fix: update typings for node view decorations (#3783)

* fix: update typings for node view decorations * fix(core): update types for NodeView * fix(core): declare props.decorations as decorationWithType
ueberdosis · Feb 27, 2023 · f869507 · f869507
1 parent e597809
commit f869507
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 9 deletions.
diff --git a/packages/core/src/NodeView.ts b/packages/core/src/NodeView.ts
@@ -1,10 +1,10 @@
 import { Node as ProseMirrorNode } from '@tiptap/pm/model'
 import { NodeSelection } from '@tiptap/pm/state'
-import { Decoration, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
+import { NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
 
 import { Editor as CoreEditor } from './Editor'
 import { Node } from './Node'
-import { NodeViewRendererOptions, NodeViewRendererProps } from './types'
+import { DecorationWithType, NodeViewRendererOptions, NodeViewRendererProps } from './types'
 import { isiOS } from './utilities/isiOS'
 
 export class NodeView<
@@ -22,7 +22,7 @@ export class NodeView<
 
   node: ProseMirrorNode
 
-  decorations: Decoration[]
+  decorations: DecorationWithType[]
 
   getPos: any
 
@@ -38,7 +38,7 @@ export class NodeView<
     } as Options
     this.extension = props.extension
     this.node = props.node
-    this.decorations = props.decorations
+    this.decorations = props.decorations as DecorationWithType[]
     this.getPos = props.getPos
     this.mount()
   }

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -1,4 +1,6 @@
-import { Mark as ProseMirrorMark, Node as ProseMirrorNode, ParseOptions } from '@tiptap/pm/model'
+import {
+  Mark as ProseMirrorMark, Node as ProseMirrorNode, NodeType, ParseOptions,
+} from '@tiptap/pm/model'
 import { EditorState, Transaction } from '@tiptap/pm/state'
 import {
   Decoration, EditorProps, EditorView, NodeView,
@@ -148,10 +150,14 @@ export type ValuesOf<T> = T[keyof T]
 
 export type KeysWithTypeOf<T, Type> = { [P in keyof T]: T[P] extends Type ? P : never }[keyof T]
 
+export type DecorationWithType = Decoration & {
+  type: NodeType
+}
+
 export type NodeViewProps = {
   editor: Editor
   node: ProseMirrorNode
-  decorations: Decoration[]
+  decorations: DecorationWithType[]
   selected: boolean
   extension: Node
   getPos: () => number

diff --git a/packages/react/src/ReactNodeViewRenderer.tsx b/packages/react/src/ReactNodeViewRenderer.tsx
@@ -1,4 +1,5 @@
 import {
+  DecorationWithType,
   NodeView,
   NodeViewProps,
   NodeViewRenderer,
@@ -124,7 +125,7 @@ class ReactNodeView extends NodeView<
     return this.contentDOMElement
   }
 
-  update(node: ProseMirrorNode, decorations: Decoration[]) {
+  update(node: ProseMirrorNode, decorations: DecorationWithType[]) {
     const updateProps = (props?: Record<string, any>) => {
       this.renderer.updateProps(props)
     }

diff --git a/packages/vue-2/src/VueNodeViewRenderer.ts b/packages/vue-2/src/VueNodeViewRenderer.ts
@@ -1,4 +1,5 @@
 import {
+  DecorationWithType,
   NodeView,
   NodeViewProps,
   NodeViewRenderer,
@@ -122,7 +123,7 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
     return (contentElement || this.dom) as HTMLElement | null
   }
 
-  update(node: ProseMirrorNode, decorations: Decoration[]) {
+  update(node: ProseMirrorNode, decorations: DecorationWithType[]) {
     const updateProps = (props?: Record<string, any>) => {
       this.decorationClasses.value = this.getDecorationClasses()
       this.renderer.updateProps(props)

diff --git a/packages/vue-3/src/VueNodeViewRenderer.ts b/packages/vue-3/src/VueNodeViewRenderer.ts
@@ -1,4 +1,5 @@
 import {
+  DecorationWithType,
   NodeView,
   NodeViewProps,
   NodeViewRenderer,
@@ -133,7 +134,7 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
     return (contentElement || this.dom) as HTMLElement | null
   }
 
-  update(node: ProseMirrorNode, decorations: Decoration[]) {
+  update(node: ProseMirrorNode, decorations: DecorationWithType[]) {
     const updateProps = (props?: Record<string, any>) => {
       this.decorationClasses.value = this.getDecorationClasses()
       this.renderer.updateProps(props)