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

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

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