feat: support tiptap 2.7

taiga-family · Sep 19, 2024 · 4e21d63 · 4e21d63
1 parent ee3c0d8
commit 4e21d63
Show file tree

Hide file tree

Showing 8 changed files with 513 additions and 420 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/projects/editor-extensions/.npmignore b/projects/editor-extensions/.npmignore
diff --git a/projects/editor-extensions/package.json b/projects/editor-extensions/package.json
diff --git a/projects/editor-extensions/project.json b/projects/editor-extensions/project.json
diff --git a/projects/editor/package.json b/projects/editor/package.json
@@ -17,10 +17,45 @@
         "@maskito/angular": ">=3.0.1",
         "@maskito/core": ">=3.0.1",
         "@maskito/kit": ">=3.0.1",
-        "@taiga-ui/editor-extensions": ">=4.7.0",
-        "@tiptap/core": "~2.6.6",
-        "@tiptap/pm": "~2.6.6",
-        "@tiptap/starter-kit": "~2.6.6",
+        "@tiptap/core": ">=2.7.0",
+        "@tiptap/extension-blockquote": ">=2.7.0",
+        "@tiptap/extension-bold": ">=2.7.0",
+        "@tiptap/extension-bubble-menu": ">=2.7.0",
+        "@tiptap/extension-bullet-list": ">=2.7.0",
+        "@tiptap/extension-code": ">=2.7.0",
+        "@tiptap/extension-code-block": ">=2.7.0",
+        "@tiptap/extension-document": ">=2.7.0",
+        "@tiptap/extension-dropcursor": ">=2.7.0",
+        "@tiptap/extension-focus": ">=2.7.0",
+        "@tiptap/extension-gapcursor": ">=2.7.0",
+        "@tiptap/extension-hard-break": ">=2.7.0",
+        "@tiptap/extension-heading": ">=2.7.0",
+        "@tiptap/extension-highlight": ">=2.7.0",
+        "@tiptap/extension-history": ">=2.7.0",
+        "@tiptap/extension-horizontal-rule": ">=2.7.0",
+        "@tiptap/extension-image": ">=2.7.0",
+        "@tiptap/extension-italic": ">=2.7.0",
+        "@tiptap/extension-link": ">=2.7.0",
+        "@tiptap/extension-list-item": ">=2.7.0",
+        "@tiptap/extension-ordered-list": ">=2.7.0",
+        "@tiptap/extension-paragraph": ">=2.7.0",
+        "@tiptap/extension-placeholder": ">=2.7.0",
+        "@tiptap/extension-strike": ">=2.7.0",
+        "@tiptap/extension-subscript": ">=2.7.0",
+        "@tiptap/extension-superscript": ">=2.7.0",
+        "@tiptap/extension-table": ">=2.7.0",
+        "@tiptap/extension-table-cell": ">=2.7.0",
+        "@tiptap/extension-table-header": ">=2.7.0",
+        "@tiptap/extension-table-row": ">=2.7.0",
+        "@tiptap/extension-task-item": ">=2.7.0",
+        "@tiptap/extension-task-list": ">=2.7.0",
+        "@tiptap/extension-text": ">=2.7.0",
+        "@tiptap/extension-text-align": ">=2.7.0",
+        "@tiptap/extension-text-style": ">=2.7.0",
+        "@tiptap/extension-underline": ">=2.7.0",
+        "@tiptap/extension-youtube": ">=2.7.0",
+        "@tiptap/pm": ">=2.7.0",
+        "@tiptap/starter-kit": ">=2.7.0",
         "@types/markdown-it": ">=14.1.2",
         "@types/markdown-it-container": ">=2.0.10",
         "markdown-it": ">=14.1.0"

diff --git a/projects/editor/src/extensions/iframe-editor/iframe-editor.extension.ts b/projects/editor/src/extensions/iframe-editor/iframe-editor.extension.ts
@@ -7,6 +7,7 @@ import type {
 } from '@tiptap/core';
 import {mergeAttributes, Node} from '@tiptap/core';
 import type {DOMOutputSpec, NodeSpec} from '@tiptap/pm/model';
+import type {NodeView} from '@tiptap/pm/view';
 
 import {TuiNodeView} from '../tiptap-node-view';
 import {TuiIframeEditor} from './iframe-editor.component';
@@ -69,12 +70,11 @@ export const tuiCreateIframeEditorExtension = ({injector}: {injector: Injector})
         },
 
         addNodeView(): NodeViewRenderer {
-            return (props: NodeViewRendererProps) =>
-                Reflect.construct(TuiNodeView, [
-                    TuiIframeEditor,
-                    props,
-                    {injector, ...props},
-                ]);
+            return (props: NodeViewRendererProps): NodeView =>
+                new TuiNodeView(TuiIframeEditor, props, {
+                    injector,
+                    ...props,
+                }) as unknown as NodeView;
         },
 
         addCommands(): Partial<RawCommands> {

diff --git a/projects/editor/src/extensions/image-editor/image-editor.extension.ts b/projects/editor/src/extensions/image-editor/image-editor.extension.ts
@@ -11,7 +11,7 @@ import {mergeAttributes} from '@tiptap/core';
 import {Image} from '@tiptap/extension-image';
 import type {DOMOutputSpec, NodeSpec} from '@tiptap/pm/model';
 import {Plugin} from '@tiptap/pm/state';
-import type {EditorView} from '@tiptap/pm/view';
+import type {EditorView, NodeView} from '@tiptap/pm/view';
 import {take, takeWhile} from 'rxjs';
 
 import {TUI_IMAGE_LOADER} from '../../tokens/image-loader';
@@ -123,12 +123,11 @@ export function tuiCreateImageEditorExtension<T, K>({
         },
 
         addNodeView(): NodeViewRenderer {
-            return (props: NodeViewRendererProps) =>
-                Reflect.construct(TuiNodeView, [
-                    TuiImageEditor,
-                    props,
-                    {injector, ...props},
-                ]);
+            return (props: NodeViewRendererProps): NodeView =>
+                new TuiNodeView(TuiImageEditor, props, {
+                    injector,
+                    ...props,
+                }) as unknown as NodeView;
         },
 
         addCommands(): Partial<RawCommands> {

diff --git a/projects/editor/src/extensions/tiptap-node-view/index.ts b/projects/editor/src/extensions/tiptap-node-view/index.ts
@@ -10,7 +10,7 @@ import type {
 } from '@tiptap/core';
 import {NodeView} from '@tiptap/core';
 import type {Node as ProseMirrorNode} from '@tiptap/pm/model';
-import type {Decoration} from '@tiptap/pm/view';
+import type {Decoration, DecorationSource, EditorView} from '@tiptap/pm/view';
 
 /**
  * Copied from
@@ -75,6 +75,10 @@ export class TuiNodeViewNg implements NodeViewProps {
     public declare getPos: NodeViewProps['getPos'];
     public declare updateAttributes: NodeViewProps['updateAttributes'];
     public declare deleteNode: NodeViewProps['deleteNode'];
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    public declare HTMLAttributes: Record<string, any>;
+    public declare innerDecorations: DecorationSource;
+    public declare view: EditorView;
 }
 
 export interface TuiNodeViewRendererOptions extends NodeViewRendererOptions {
@@ -131,12 +135,15 @@ export class TuiNodeView extends NodeView<
         const props: NodeViewProps = {
             editor: this.editor,
             node: this.node,
-            decorations: this.decorations,
+            decorations: this.decorations as readonly DecorationWithType[],
             selected: false,
             extension: this.extension,
             getPos: () => this.getPos(),
             updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
             deleteNode: () => this.deleteNode(),
+            view: this.view,
+            innerDecorations: this.innerDecorations,
+            HTMLAttributes: this.HTMLAttributes,
         };
 
         this.editor.on('selectionUpdate', this.handleSelectionUpdate.bind(this));