fix: update tiptap packages (#1755)

* update tiptap version

* create empty paragraph on enter

* feat: split title text into page content on Enter

* update hocuspocus
This commit is contained in:
Philip Okugbe
2025-12-02 13:15:19 +00:00
committed by GitHub
parent ab96672ecd
commit 9139d393ef
4 changed files with 443 additions and 401 deletions
@@ -1,7 +1,9 @@
import { StarterKit } from "@tiptap/starter-kit";
import { Placeholder } from "@tiptap/extension-placeholder";
import { TextAlign } from "@tiptap/extension-text-align";
import { CharacterCount } from "@tiptap/extension-character-count";
import { TaskList } from "@tiptap/extension-task-list";
import { ListKeymap } from "@tiptap/extension-list-keymap";
import { TaskItem } from "@tiptap/extension-task-item";
import { Underline } from "@tiptap/extension-underline";
import { Superscript } from "@tiptap/extension-superscript";
@@ -9,6 +11,8 @@ import SubScript from "@tiptap/extension-subscript";
import { Typography } from "@tiptap/extension-typography";
import { TextStyle } from "@tiptap/extension-text-style";
import { Color } from "@tiptap/extension-color";
import GlobalDragHandle from "tiptap-extension-global-drag-handle";
import { Youtube } from "@tiptap/extension-youtube";
import SlashCommand from "@/features/editor/extensions/slash-command";
import { Collaboration } from "@tiptap/extension-collaboration";
import { CollaborationCursor } from "@tiptap/extension-collaboration-cursor";
@@ -48,11 +52,8 @@ import {
import { IUser } from "@/features/user/types/user.types.ts";
import MathInlineView from "@/features/editor/components/math/math-inline.tsx";
import MathBlockView from "@/features/editor/components/math/math-block.tsx";
import GlobalDragHandle from "tiptap-extension-global-drag-handle";
import { Youtube } from "@tiptap/extension-youtube";
import ImageView from "@/features/editor/components/image/image-view.tsx";
import CalloutView from "@/features/editor/components/callout/callout-view.tsx";
import { common, createLowlight } from "lowlight";
import VideoView from "@/features/editor/components/video/video-view.tsx";
import AttachmentView from "@/features/editor/components/attachment/attachment-view.tsx";
import CodeBlockView from "@/features/editor/components/code-block/code-block-view.tsx";
@@ -60,6 +61,7 @@ import DrawioView from "../components/drawio/drawio-view";
import ExcalidrawView from "@/features/editor/components/excalidraw/excalidraw-view.tsx";
import EmbedView from "@/features/editor/components/embed/embed-view.tsx";
import SubpagesView from "@/features/editor/components/subpages/subpages-view.tsx";
import { common, createLowlight } from "lowlight";
import plaintext from "highlight.js/lib/languages/plaintext";
import powershell from "highlight.js/lib/languages/powershell";
import abap from "highlightjs-sap-abap";
@@ -76,7 +78,6 @@ import MentionView from "@/features/editor/components/mention/mention-view.tsx";
import i18n from "@/i18n.ts";
import { MarkdownClipboard } from "@/features/editor/extensions/markdown-clipboard.ts";
import EmojiCommand from "./emoji-command";
import { CharacterCount } from "@tiptap/extension-character-count";
import { countWords } from "alfaaz";
const lowlight = createLowlight(common);
@@ -125,6 +126,7 @@ export const mainExtensions = [
TaskItem.configure({
nested: true,
}),
ListKeymap,
Underline,
LinkExtension.configure({
openOnClick: false,
@@ -192,10 +192,43 @@ export function TitleEditor({
const { key } = event;
const { $head } = titleEditor.state.selection;
if (key === "Enter") {
event.preventDefault();
const { $from } = titleEditor.state.selection;
const titleText = titleEditor.getText();
// Get the text offset within the heading node (not document position)
const textOffset = $from.parentOffset;
const textAfterCursor = titleText.slice(textOffset);
// Delete text after cursor from title (this will be in undo history)
const endPos = titleEditor.state.doc.content.size;
if (textAfterCursor) {
titleEditor.commands.deleteRange({ from: $from.pos, to: endPos });
}
// Don't add to history so undo in page editor won't remove this split
pageEditor
.chain()
.command(({ tr }) => {
tr.setMeta("addToHistory", false);
return true;
})
.insertContentAt(0, {
type: "paragraph",
content: textAfterCursor
? [{ type: "text", text: textAfterCursor }]
: undefined,
})
.focus("start")
.run();
return;
}
const shouldFocusEditor =
key === "Enter" ||
key === "ArrowDown" ||
(key === "ArrowRight" && !$head.nodeAfter);
key === "ArrowDown" || (key === "ArrowRight" && !$head.nodeAfter);
if (shouldFocusEditor) {
pageEditor.commands.focus("start");