feat: added tag attribute pass dynamicly

Author: Arif-un

src/MixInput.tsx

@@ -11,6 +11,13 @@ import Placeholder from '@tiptap/extension-placeholder'
 import TagExtension from './TagExtension'
 import { type MixInputProps, type MixInputRef, type MixInputValue } from './MixInputType'
 
+const DEFAULT_TAG_ATTRS = {
+ id: undefined,
+ label: undefined,
+ class: undefined,
+ style: undefined,
+}
+
 const MixInput = forwardRef((props: MixInputProps, ref: ForwardedRef<MixInputRef>) => {
  const {
  onChange,
@@ -22,6 +29,7 @@ const MixInput = forwardRef((props: MixInputProps, ref: ForwardedRef<MixInputRef
  tagClassName,
  editorOptions,
  className,
+ tagAttrs,
  ...restProps
  } = props
 
@@ -38,6 +46,7 @@ const MixInput = forwardRef((props: MixInputProps, ref: ForwardedRef<MixInputRef
  Placeholder.configure({ placeholder }),
  TagExtension.configure({
  tagClassName,
+ attrs: { ...DEFAULT_TAG_ATTRS, ...tagAttrs},
  }),
  ],
  onUpdate: ({ editor }) => {
@@ -62,7 +71,7 @@ const MixInput = forwardRef((props: MixInputProps, ref: ForwardedRef<MixInputRef
 
  useImperativeHandle(ref, () => ({
  element: editorRef.current,
- editor: editor,
+ editor,
  insertContent,
  }))
 

src/MixInputType.d.ts

@@ -1,6 +1,6 @@
 import '@total-typescript/ts-reset'
 import { Editor, } from '@tiptap/core'
-import { UseEditorOptions } from '@tiptap/react'
+import { EditorContentProps, UseEditorOptions } from '@tiptap/react'
 
 import type { CSSProperties, HTMLAttributes } from 'react'
 export interface Tag {
@@ -10,20 +10,22 @@ export interface Tag {
  label?: string
  class?: string | string[]
  style?: CSSProperties
+ [key: string]: string | string[] | CSSProperties | undefined
  }
 }
 
 export type MixInputValue = Tag | string
 
 export type MixInputValues = MixInputValue[][]
 
-export interface MixInputProps extends HTMLAttributes<HTMLDivElement> {
+export interface MixInputProps extends HTMLAttributes<HTMLDivElement>, Omit<EditorContentProps, 'editor'> {
  value: MixInputValues
  placeholder?: string
  onChange: (value: MixInputValues) => void
  readonly?: boolean
  tagClassName?: string
  editorOptions?: UseEditorOptions
+ tagAttrs?: Record<string, string | undefined>
  // multiline?: boolean
  // showTagDeleteBtn?: boolean
 }

src/TagExtension.ts

@@ -1,4 +1,4 @@
-import { mergeAttributes, Node } from "@tiptap/core";
+import { Attribute, mergeAttributes, Node } from "@tiptap/core";
 
 export default Node.create({
  name: "tag",
@@ -23,30 +23,36 @@ export default Node.create({
  addNodeView: () => ({ node, extension }) => {
  const span = document.createElement('span');
  span.className = 'mi-tag'
- span.innerHTML = node.attrs.label
- // span.setAttribute('contenteditable', 'false');
+ const { label, id, class: classes, style, ...restAttrs } = node.attrs
+ span.innerHTML = label
  span.setAttribute('data-type', 'tag')
 
- if (node.attrs.id) {
- span.setAttribute('data-id', node.attrs.id)
+ if (id) {
+ span.setAttribute('data-id', id)
  }
 
  if (extension.options.tagClassName) {
  span.classList.add(extension.options.tagClassName)
  }
 
- if (node.attrs.class) {
- if (Array.isArray(node.attrs.class)) {
- node.attrs.class.forEach((c) => {
+ if (classes) {
+ if (Array.isArray(classes)) {
+ classes.forEach((c) => {
  span.classList.add(c as string)
  })
  } else {
- span.classList.add(node.attrs.class)
+ span.classList.add(classes)
  }
  }
 
- if (node.attrs.style) {
- Object.assign(span.style, node.attrs.style)
+ if (style) {
+ Object.assign(span.style, style)
+ }
+
+ if (Object.keys(restAttrs).length) {
+ Object.keys(restAttrs).forEach((key) => {
+ span.dataset[key] = restAttrs[key]
+ })
  }
 
  const dom = document.createElement('span')
@@ -58,6 +64,10 @@ export default Node.create({
  },
 
  addAttributes() {
- return { label: undefined, id: undefined, class: undefined, style: undefined };
+ const extraAttrs: Record<string, Attribute> = {}
+ for (const key in this.options.attrs) {
+ extraAttrs[key] = { default: this.options.attrs[key] }
+ }
+ return extraAttrs
  }
 });