feat: Tiptap V3 migration (#1854)

* Tiptap3 migration - WIP * fix collaboration * remove unused code * fix flicker * disable duplicate extensions * update tiptap version * Switch to useEditorState - Set shouldRerenderOnTransaction to false * fix editable state * add tippyoptions for reference * merge main * tiptap 3.6.1 * fix bubble menu * fix converter * fix menus * fix collaboration caret css * fix: Set `isInitialized` to force immediate react node view rendering * feat: Migrate tippy.js menus to Floating UI * feat: Update collaboration connection for HocusPocus v3 * fix: Connect/disconnect websocketProvider * cleanup * cleanup * feat: Improved placeholder and upload handling for images * feat: Improved placeholder and upload handling for videos * refactor: Image node and view clean-up * feat: Improved placeholder and upload handling for attachments * fix: Video view styles * fix: Transaction handling on asset upload * fix: Use imageDimensionsFromStream * feat: Multiple file upload, improved placeholders, local previews * fix: Drag & drop, paste upload * fix: Allow media as attachment * * add skeleton pulse animation * add translation strings * fix attachment view responsiveness * fix collab connection status display * Tiptap v3.17.0 * fix suggestion menu exit bug * fix search shortcut * fix history editor css * tiptap 3.17.1 --------- Co-authored-by: Arek Nawo <areknawo@areknawo.com>
2026-05-16 14:14:06 +08:00 · 2026-01-24 20:41:08 +00:00
parent 98f71c95fe
commit 657fdf8cb7
74 changed files with 2532 additions and 2370 deletions
@@ -0,0 +1,108 @@
+import type { CodeBlockOptions } from "@tiptap/extension-code-block";
+import CodeBlock from "@tiptap/extension-code-block";
+
+import { LowlightPlugin } from "./lowlight-plugin.js";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+
+export interface CodeBlockLowlightOptions extends CodeBlockOptions {
+  /**
+   * The lowlight instance.
+   */
+  lowlight: any;
+  view: any;
+}
+
+const TAB_CHAR = "\u00A0\u00A0";
+
+/**
+ * This extension allows you to highlight code blocks with lowlight.
+ * @see https://tiptap.dev/api/nodes/code-block-lowlight
+ */
+export const CustomCodeBlock = CodeBlock.extend<CodeBlockLowlightOptions>({
+  selectable: true,
+
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      lowlight: {},
+      languageClassPrefix: "language-",
+      exitOnTripleEnter: true,
+      exitOnArrowDown: true,
+      defaultLanguage: null,
+      HTMLAttributes: {},
+      view: null,
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      ...this.parent?.(),
+      Tab: () => {
+        if (this.editor.isActive("codeBlock")) {
+          this.editor
+            .chain()
+            .command(({ tr }) => {
+              tr.insertText(TAB_CHAR);
+              return true;
+            })
+            .run();
+          return true;
+        }
+      },
+      "Mod-a": () => {
+        if (this.editor.isActive("codeBlock")) {
+          const { state } = this.editor;
+          const { $from } = state.selection;
+
+          let codeBlockNode = null;
+          let codeBlockPos = null;
+          let depth = 0;
+
+          for (depth = $from.depth; depth > 0; depth--) {
+            const node = $from.node(depth);
+            if (node.type.name === "codeBlock") {
+              codeBlockNode = node;
+              codeBlockPos = $from.start(depth) - 1;
+              break;
+            }
+          }
+
+          if (codeBlockNode && codeBlockPos !== null) {
+            const codeBlockStart = codeBlockPos;
+            const codeBlockEnd = codeBlockPos + codeBlockNode.nodeSize;
+
+            const contentStart = codeBlockStart + 1;
+            const contentEnd = codeBlockEnd - 1;
+
+            this.editor.commands.setTextSelection({
+              from: contentStart,
+              to: contentEnd,
+            });
+
+            return true;
+          }
+        }
+
+        return false;
+      },
+    };
+  },
+
+  addNodeView() {
+    // Force the react node view to render immediately using flush sync (https://github.com/ueberdosis/tiptap/blob/b4db352f839e1d82f9add6ee7fb45561336286d8/packages/react/src/ReactRenderer.tsx#L183-L191)
+    this.editor.isInitialized = true;
+
+    return ReactNodeViewRenderer(this.options.view);
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      ...(this.parent?.() || []),
+      LowlightPlugin({
+        name: this.name,
+        lowlight: this.options.lowlight,
+        defaultLanguage: this.options.defaultLanguage,
+      }),
+    ];
+  },
+});