@arif-un/react-mix-tag-input/dist/index.mjs

A simple react component for inputting tags with a mix of text

"use client";
import J,{forwardRef as v,useEffect as H,useImperativeHandle as L,useRef as y}from"react";function R(e){return typeof e=="object"&&e.type==="tag"}function P(e){return{type:"tag",attrs:{...e.attrs}}}function d(e){let n=[];return e.forEach(r=>{var p;r.type==="paragraph"&&(n.push([]),(p=r==null?void 0:r.content)==null||p.forEach(t=>{var o,s;t.type==="text"&&t.text&&((o=n.at(-1))==null||o.push(t.text)),t.type==="tag"&&((s=n.at(-1))==null||s.push(P(t)))}))}),n}function c(e){let n=[];return e.forEach((r,p)=>{Array.isArray(n[p])||n.push({type:"paragraph",content:[]});let t=n.at(-1);typeof r=="string"&&(t!=null&&t.content)&&t.content.push({type:"text",text:r}),!Array.isArray(r)&&R(r)&&(t!=null&&t.content)&&t.content.push({type:"tag",attrs:{...r.attrs}}),Array.isArray(r)&&r.forEach(o=>{typeof o=="string"&&(t!=null&&t.content)&&t.content.push({type:"text",text:o}),typeof o=="object"&&o.type==="tag"&&(t!=null&&t.content)&&t.content.push({type:"tag",attrs:{...o.attrs}})})}),n}import{EditorContent as $,useEditor as j}from"@tiptap/react";import k from"@tiptap/extension-document";import D from"@tiptap/extension-paragraph";import F from"@tiptap/extension-text";import U from"@tiptap/extension-placeholder";import{mergeAttributes as C,Node as O}from"@tiptap/core";import{ReactNodeViewRenderer as S}from"@tiptap/react";import{NodeViewWrapper as w}from"@tiptap/react";import f from"react";function l(e){let{tagView:n,tagClassName:r}=e.extension.options,{label:p,className:t,...o}=e.node.attrs;return f.createElement(f.Fragment,null,f.createElement(w,{"data-type":"tag",as:"span"},n?n(e):f.createElement("span",{className:`${r||""} ${t||""}`,...o},p)),"\u200B")}var g=O.create({name:"tag",group:"inline",inline:!0,atom:!0,selectable:!1,parseHTML(){return[{tag:`span[data-type="${this.name}"]`}]},renderHTML({HTMLAttributes:e}){return["span",C(e)]},addNodeView(){return S(l)},addAttributes(){let e={};for(let n in this.options.attrs)e[n]={default:this.options.attrs[n]};return e}});var W={id:void 0,label:"undefined",className:void 0,style:void 0},_=v((e,n)=>{let{onChange:r,value:p=[],placeholder:t,disabled:o=!1,tagClassName:s="mi-tag",editorOptions:h,className:M,tagAttrs:T,tagView:b,immediatelyRender:I=!0,...N}=e,x=y(null),m=y(""),i=j({editable:!o,immediatelyRender:I,editorProps:{attributes:{class:`mix-input ${o?"mi-disabled":""} ${M||""}`}},extensions:[k,D.configure({HTMLAttributes:{class:"mi-paragraph"}}),F,U.configure({placeholder:t}),g.configure({tagClassName:s,attrs:{...W,...T},tagView:b})],onUpdate:({editor:a})=>{var u;o||r==null||r(d(((u=a==null?void 0:a.getJSON())==null?void 0:u.content)||[]))},...h}),A=a=>{o||i==null||i.chain().focus().insertContent(a).run()};return H(()=>{if(!i)return;let a=c(p);a.length===0&&(a=[{type:"paragraph"}]);let u=JSON.stringify(a),E=JSON.stringify(i.getJSON().content);u!==E&&u!==m.current&&(m.current=u,setTimeout(()=>{i&&!i.isDestroyed&&i.commands.setContent(a)},0))},[p,i]),L(n,()=>({element:x.current,editor:i,insertContent:A})),J.createElement($,{"aria-disabled":o,editor:i,innerRef:x,...N})}),V=_;var lt=V;export{lt as default,d as editorValueToMixInputValue,c as mixInputValueToEditorValue};
//# sourceMappingURL=index.mjs.map