fix: added react node view and pass react node as props

Author: Arif-un

src/MixInput.tsx

@@ -13,8 +13,8 @@ import { type MixInputProps, type MixInputRef, type MixInputValue } from './MixI
 
 const DEFAULT_TAG_ATTRS = {
   id: undefined,
-  label: undefined,
-  class: undefined,
+  label: 'undefined',
+  className: undefined,
   style: undefined,
 }
 
@@ -30,15 +30,15 @@ const MixInput = forwardRef((props: MixInputProps, ref: ForwardedRef<MixInputRef
     editorOptions,
     className,
     tagAttrs,
-    tagEventHandlers,
+    tagView,
     ...restProps
   } = props
 
   const editorRef = useRef<HTMLDivElement>(null)
 
   const editor = useEditor({
     editorProps: {
-      attributes: { class: `mix-input ${className}` },
+      attributes: { class: `mix-input ${className || ''}` },
     },
     extensions: [
       Document,
@@ -50,7 +50,7 @@ const MixInput = forwardRef((props: MixInputProps, ref: ForwardedRef<MixInputRef
       TagExtension.configure({
         tagClassName,
         attrs: { ...DEFAULT_TAG_ATTRS, ...tagAttrs },
-        eventHandlers: tagEventHandlers,
+        tagView,
       }),
     ],
     onUpdate: ({ editor }) => {

src/MixInputType.d.ts

@@ -1,16 +1,16 @@
 import '@total-typescript/ts-reset'
-import { Editor, } from '@tiptap/core'
-import { EditorContentProps, UseEditorOptions } from '@tiptap/react'
+import { Editor, NodeViewProps } from '@tiptap/core'
+import { EditorContentProps, UseEditorOptions, NodeViewProps } from '@tiptap/react'
 
-import type { CSSProperties, HTMLAttributes } from 'react'
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react'
 export interface Tag {
   type: 'tag'
   attrs: {
     id?: string
     label?: string
-    class?: string | string[]
+    className?: string
     style?: CSSProperties
-    [key: string]: string | string[] | CSSProperties | undefined
+    [key: string]: string | CSSProperties | undefined
   }
 }
 
@@ -26,7 +26,7 @@ export interface MixInputProps extends HTMLAttributes<HTMLDivElement>, Omit<Edit
   tagClassName?: string
   editorOptions?: UseEditorOptions
   tagAttrs?: Record<string, string | undefined>
-  tagEventHandlers?: Record<string, (event: Event, view: Editor) => void>
+  tagView?: (props: NodeViewProps) => React.ReactNode
   // multiline?: boolean
   // showTagDeleteBtn?: boolean
 }

src/Tag.tsx

@@ -0,0 +1,15 @@
+import { type NodeViewProps, NodeViewWrapper } from '@tiptap/react'
+import React from 'react'
+
+export default function Tag(props: NodeViewProps) {
+  const { tagView, tagClassName } = props.extension.options
+  const { label, ...restAttrs } = props.node.attrs
+  return (
+    <>
+      <NodeViewWrapper className={`mi-tag ${tagClassName || ''}`} data-type="tag" as="span">
+        {tagView ? tagView(props) : <span {...restAttrs}>{label}</span>}
+      </NodeViewWrapper>
+      {'\u200B'}
+    </>
+  )
+}

src/TagExtension.ts

@@ -1,4 +1,6 @@
 import { Attribute, mergeAttributes, Node } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import Tag from "./Tag";
 
 export default Node.create({
   name: "tag",
@@ -12,71 +14,15 @@ export default Node.create({
       {
         tag: `span[data-type="${this.name}"]`,
       },
-    ];
+    ]
   },
 
   renderHTML({ HTMLAttributes }) {
     return ["span", mergeAttributes(HTMLAttributes)];
   },
 
-
-  addNodeView: () => ({ node, extension }) => {
-    const span = document.createElement('span');
-    span.className = 'mi-tag'
-    const { label, id, class: classes, style, ...restAttrs } = node.attrs
-    span.innerHTML = label
-    span.setAttribute('data-type', 'tag')
-
-    if (id) {
-      span.setAttribute('data-id', id)
-    }
-
-    if (extension.options.tagClassName) {
-      span.classList.add(extension.options.tagClassName)
-    }
-
-    if (classes) {
-      if (Array.isArray(classes)) {
-        classes.forEach((c) => {
-          span.classList.add(c as string)
-        })
-      } else {
-        span.classList.add(classes)
-      }
-    }
-
-    if (style) {
-      Object.assign(span.style, style)
-    }
-
-    if (Object.keys(restAttrs).length) {
-      Object.keys(restAttrs).forEach((key) => {
-        span.dataset[key] = restAttrs[key]
-      })
-    }
-
-    // Add event listeners
-    if (extension.options.eventHandlers) {
-      Object.entries(extension.options.eventHandlers).forEach(([eventName, handler]) => {
-        span.addEventListener(eventName, handler as EventListener)
-      })
-    }
-
-    const dom = document.createElement('span')
-    dom.appendChild(span)
-    // add zero-width space to make caret visible to outside of tag
-    dom.appendChild(document.createTextNode('\u200B'))
-
-    return {
-      dom,
-      destroy: () => {
-        if (extension.options.eventHandlers) {
-          Object.entries(extension.options.eventHandlers).forEach(([eventName, handler]) => {
-            span.removeEventListener(eventName, handler as EventListener)
-          })
-        }
-      }
-    }
+  addNodeView() {
+    return ReactNodeViewRenderer(Tag)
   },
 
   addAttributes() {
@@ -85,5 +31,5 @@ export default Node.create({
       extraAttrs[key] = { default: this.options.attrs[key] }
     }
     return extraAttrs
-  }
-});
+  },
+})