payload-richtext-tiptap 0.0.28 → 0.0.29

package/dist/src/fields/TiptapEditor/extensions/BlockquoteFigure/Design.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 declare const Design: () => React.JSX.Element;
 export default Design;
 //# sourceMappingURL=Design.d.ts.map

package/dist/src/fields/TiptapEditor/extensions/BlockquoteFigure/Design.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Design.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/BlockquoteFigure/Design.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,QAAA,MAAM,MAAM,yBASX,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Design.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/BlockquoteFigure/Design.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,QAAA,MAAM,MAAM,yBAgBX,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/src/fields/TiptapEditor/extensions/BlockquoteFigure/Design.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+import React from "react";
+import { twj } from "tw-to-css";
 const Design = ()=>{
     return /*#__PURE__*/ _jsx("blockquote", {
-        className: "p-4 my-4 border-s-4 border-gray-300 bg-gray-50 w-full",
+        style: twj("p-4 my-4 border-s-4 border-gray-300 bg-gray-50 w-full"),
         children: /*#__PURE__*/ _jsx("p", {
-            className: "text-xl italic font-medium leading-relaxed text-gray-900 w-full",
+            style: twj("text-xl italic font-medium leading-relaxed text-gray-900 w-full"),
             children: '"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."'
         })
     });

package/dist/src/fields/TiptapEditor/extensions/BlockquoteFigure/Design.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/BlockquoteFigure/Design.tsx"],"sourcesContent":["import React from 'react'\n\nconst Design = () => {\n  return (\n    <blockquote className=\"p-4 my-4 border-s-4 border-gray-300 bg-gray-50 w-full\">\n      <p className=\"text-xl italic font-medium leading-relaxed text-gray-900 w-full\">\n        \"Flowbite is just awesome. It contains tons of predesigned components and pages starting\n        from login screen to complex dashboard. Perfect choice for your next SaaS application.\"\n      </p>\n    </blockquote>\n  )\n}\n\nexport default Design\n"],"names":["React","Design","blockquote","className","p"],"rangeMappings":";;;;;;;;;;;","mappings":";AAAA,OAAOA,WAAW,QAAO;AAEzB,MAAMC,SAAS;IACb,qBACE,KAACC;QAAWC,WAAU;kBACpB,cAAA,KAACC;YAAED,WAAU;sBAAkE;;;AAMrF;AAEA,eAAeF,OAAM"}
+{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/BlockquoteFigure/Design.tsx"],"sourcesContent":["import React from \"react\";\nimport { twj } from \"tw-to-css\";\n\nconst Design = () => {\n  return (\n    <blockquote\n      style={twj(\"p-4 my-4 border-s-4 border-gray-300 bg-gray-50 w-full\")}\n    >\n      <p\n        style={twj(\n          \"text-xl italic font-medium leading-relaxed text-gray-900 w-full\"\n        )}\n      >\n        \"Flowbite is just awesome. It contains tons of predesigned components\n        and pages starting from login screen to complex dashboard. Perfect\n        choice for your next SaaS application.\"\n      </p>\n    </blockquote>\n  );\n};\n\nexport default Design;\n"],"names":["React","twj","Design","blockquote","style","p"],"rangeMappings":";;;;;;;;;;;;","mappings":";AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,GAAG,QAAQ,YAAY;AAEhC,MAAMC,SAAS;IACb,qBACE,KAACC;QACCC,OAAOH,IAAI;kBAEX,cAAA,KAACI;YACCD,OAAOH,IACL;sBAEH;;;AAOP;AAEA,eAAeC,OAAO"}

package/dist/src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageBlockView.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,MAAM,EAAmB,MAAM,eAAe,CAAC;AACxD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,MAAM,CAAC;IACrB,IAAI,EAAE,IAAI,GAAG;QACX,KAAK,EAAE;YACL,GAAG,EAAE,MAAM,CAAC;SACb,CAAC;KACH,CAAC;IACF,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;CAC3D;AAED,eAAO,MAAM,cAAc,UAAW,mBAAmB,sBAwBxD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ImageBlockView.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,MAAM,EAAmB,MAAM,eAAe,CAAC;AACxD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,MAAM,CAAC;IACrB,IAAI,EAAE,IAAI,GAAG;QACX,KAAK,EAAE;YACL,GAAG,EAAE,MAAM,CAAC;SACb,CAAC;KACH,CAAC;IACF,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;CAC3D;AAED,eAAO,MAAM,cAAc,UAAW,mBAAmB,sBAwBxD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockView.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { NodeViewWrapper } from "@tiptap/react";
 import React, { useCallback, useRef } from "react";
 import { cn } from "../../../lib/utils/index.js";
+import { twj } from "tw-to-css";
 export const ImageBlockView = (props)=>{
     const { editor, getPos, node } = props;
     const imageWrapperRef = useRef(null);
@@ -15,15 +16,15 @@ export const ImageBlockView = (props)=>{
     ]);
     return /*#__PURE__*/ _jsx(NodeViewWrapper, {
         children: /*#__PURE__*/ _jsx("div", {
-            className: wrapperClassName,
             style: {
+                ...twj(wrapperClassName),
                 width: node.attrs.width
             },
             children: /*#__PURE__*/ _jsx("div", {
                 contentEditable: false,
                 ref: imageWrapperRef,
                 children: /*#__PURE__*/ _jsx("img", {
-                    className: "block",
+                    style: twj("block"),
                     src: src,
                     alt: "",
                     onClick: onClick

package/dist/src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockView.tsx"],"sourcesContent":["import { Node } from \"@tiptap/pm/model\";\nimport { Editor, NodeViewWrapper } from \"@tiptap/react\";\nimport React, { useCallback, useRef } from \"react\";\nimport { cn } from \"../../../lib/utils/index.js\";\n\ninterface ImageBlockViewProps {\n  editor: Editor;\n  getPos: () => number;\n  node: Node & {\n    attrs: {\n      src: string;\n    };\n  };\n  updateAttributes: (attrs: Record<string, string>) => void;\n}\n\nexport const ImageBlockView = (props: ImageBlockViewProps) => {\n  const { editor, getPos, node } = props;\n  const imageWrapperRef = useRef<HTMLDivElement>(null);\n  const { src } = node.attrs;\n\n  const wrapperClassName = cn(\n    node.attrs.align === \"left\" ? \"ml-0\" : \"ml-auto\",\n    node.attrs.align === \"right\" ? \"mr-0\" : \"mr-auto\",\n    node.attrs.align === \"center\" && \"mx-auto\"\n  );\n\n  const onClick = useCallback(() => {\n    editor.commands.setNodeSelection(getPos());\n  }, [getPos, editor.commands]);\n\n  return (\n    <NodeViewWrapper>\n      <div className={wrapperClassName} style={{ width: node.attrs.width }}>\n        <div contentEditable={false} ref={imageWrapperRef}>\n          <img className=\"block\" src={src} alt=\"\" onClick={onClick} />\n        </div>\n      </div>\n    </NodeViewWrapper>\n  );\n};\n\nexport default ImageBlockView;\n"],"names":["NodeViewWrapper","React","useCallback","useRef","cn","ImageBlockView","props","editor","getPos","node","imageWrapperRef","src","attrs","wrapperClassName","align","onClick","commands","setNodeSelection","div","className","style","width","contentEditable","ref","img","alt"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AACA,SAAiBA,eAAe,QAAQ,gBAAgB;AACxD,OAAOC,SAASC,WAAW,EAAEC,MAAM,QAAQ,QAAQ;AACnD,SAASC,EAAE,QAAQ,8BAA8B;AAajD,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGH;IACjC,MAAMI,kBAAkBP,OAAuB;IAC/C,MAAM,EAAEQ,GAAG,EAAE,GAAGF,KAAKG,KAAK;IAE1B,MAAMC,mBAAmBT,GACvBK,KAAKG,KAAK,CAACE,KAAK,KAAK,SAAS,SAAS,WACvCL,KAAKG,KAAK,CAACE,KAAK,KAAK,UAAU,SAAS,WACxCL,KAAKG,KAAK,CAACE,KAAK,KAAK,YAAY;IAGnC,MAAMC,UAAUb,YAAY;QAC1BK,OAAOS,QAAQ,CAACC,gBAAgB,CAACT;IACnC,GAAG;QAACA;QAAQD,OAAOS,QAAQ;KAAC;IAE5B,qBACE,KAAChB;kBACC,cAAA,KAACkB;YAAIC,WAAWN;YAAkBO,OAAO;gBAAEC,OAAOZ,KAAKG,KAAK,CAACS,KAAK;YAAC;sBACjE,cAAA,KAACH;gBAAII,iBAAiB;gBAAOC,KAAKb;0BAChC,cAAA,KAACc;oBAAIL,WAAU;oBAAQR,KAAKA;oBAAKc,KAAI;oBAAGV,SAASA;;;;;AAK3D,EAAE;AAEF,eAAeV,eAAe"}
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockView.tsx"],"sourcesContent":["import { Node } from \"@tiptap/pm/model\";\nimport { Editor, NodeViewWrapper } from \"@tiptap/react\";\nimport React, { useCallback, useRef } from \"react\";\nimport { cn } from \"../../../lib/utils/index.js\";\nimport { twj } from \"tw-to-css\";\n\ninterface ImageBlockViewProps {\n  editor: Editor;\n  getPos: () => number;\n  node: Node & {\n    attrs: {\n      src: string;\n    };\n  };\n  updateAttributes: (attrs: Record<string, string>) => void;\n}\n\nexport const ImageBlockView = (props: ImageBlockViewProps) => {\n  const { editor, getPos, node } = props;\n  const imageWrapperRef = useRef<HTMLDivElement>(null);\n  const { src } = node.attrs;\n\n  const wrapperClassName = cn(\n    node.attrs.align === \"left\" ? \"ml-0\" : \"ml-auto\",\n    node.attrs.align === \"right\" ? \"mr-0\" : \"mr-auto\",\n    node.attrs.align === \"center\" && \"mx-auto\"\n  );\n\n  const onClick = useCallback(() => {\n    editor.commands.setNodeSelection(getPos());\n  }, [getPos, editor.commands]);\n\n  return (\n    <NodeViewWrapper>\n      <div style={{ ...twj(wrapperClassName), width: node.attrs.width }}>\n        <div contentEditable={false} ref={imageWrapperRef}>\n          <img style={twj(\"block\")} src={src} alt=\"\" onClick={onClick} />\n        </div>\n      </div>\n    </NodeViewWrapper>\n  );\n};\n\nexport default ImageBlockView;\n"],"names":["NodeViewWrapper","React","useCallback","useRef","cn","twj","ImageBlockView","props","editor","getPos","node","imageWrapperRef","src","attrs","wrapperClassName","align","onClick","commands","setNodeSelection","div","style","width","contentEditable","ref","img","alt"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AACA,SAAiBA,eAAe,QAAQ,gBAAgB;AACxD,OAAOC,SAASC,WAAW,EAAEC,MAAM,QAAQ,QAAQ;AACnD,SAASC,EAAE,QAAQ,8BAA8B;AACjD,SAASC,GAAG,QAAQ,YAAY;AAahC,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGH;IACjC,MAAMI,kBAAkBR,OAAuB;IAC/C,MAAM,EAAES,GAAG,EAAE,GAAGF,KAAKG,KAAK;IAE1B,MAAMC,mBAAmBV,GACvBM,KAAKG,KAAK,CAACE,KAAK,KAAK,SAAS,SAAS,WACvCL,KAAKG,KAAK,CAACE,KAAK,KAAK,UAAU,SAAS,WACxCL,KAAKG,KAAK,CAACE,KAAK,KAAK,YAAY;IAGnC,MAAMC,UAAUd,YAAY;QAC1BM,OAAOS,QAAQ,CAACC,gBAAgB,CAACT;IACnC,GAAG;QAACA;QAAQD,OAAOS,QAAQ;KAAC;IAE5B,qBACE,KAACjB;kBACC,cAAA,KAACmB;YAAIC,OAAO;gBAAE,GAAGf,IAAIS,iBAAiB;gBAAEO,OAAOX,KAAKG,KAAK,CAACQ,KAAK;YAAC;sBAC9D,cAAA,KAACF;gBAAIG,iBAAiB;gBAAOC,KAAKZ;0BAChC,cAAA,KAACa;oBAAIJ,OAAOf,IAAI;oBAAUO,KAAKA;oBAAKa,KAAI;oBAAGT,SAASA;;;;;AAK9D,EAAE;AAEF,eAAeV,eAAe"}

package/dist/src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockWidth.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 export type ImageBlockWidthProps = {
     onChange: (value: number) => void;
     value: number;

package/dist/src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockWidth.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageBlockWidth.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockWidth.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAA;AAErE,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,eAAe,kDAA8B,oBAAoB,uBA4B5E,CAAA"}
+{"version":3,"file":"ImageBlockWidth.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockWidth.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAGtE,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,eAAe,kDACJ,oBAAoB,uBAiC3C,CAAC"}

package/dist/src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockWidth.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { memo, useCallback, useEffect, useState } from 'react';
+import React, { memo, useCallback, useEffect, useState } from "react";
+import { twj } from "tw-to-css";
 export const ImageBlockWidth = /*#__PURE__*/ memo(({ onChange, value })=>{
     const [currentValue, setCurrentValue] = useState(value);
     useEffect(()=>{
@@ -13,10 +14,10 @@ export const ImageBlockWidth = /*#__PURE__*/ memo(({ onChange, value })=>{
         onChange
     ]);
     return /*#__PURE__*/ _jsxs("div", {
-        className: "flex items-center gap-2",
+        style: twj("flex items-center gap-2"),
         children: [
             /*#__PURE__*/ _jsx("input", {
-                className: "h-2 bg-neutral-200 border-0 rounded appearance-none fill-neutral-300",
+                style: twj("h-2 bg-neutral-200 border-0 rounded appearance-none fill-neutral-300"),
                 type: "range",
                 min: "25",
                 max: "100",
@@ -25,7 +26,7 @@ export const ImageBlockWidth = /*#__PURE__*/ memo(({ onChange, value })=>{
                 value: currentValue
             }),
             /*#__PURE__*/ _jsxs("span", {
-                className: "text-xs font-semibold text-neutral-500 select-none",
+                style: twj("text-xs font-semibold text-neutral-500 select-none"),
                 children: [
                     value,
                     "%"
@@ -34,6 +35,6 @@ export const ImageBlockWidth = /*#__PURE__*/ memo(({ onChange, value })=>{
         ]
     });
 });
-ImageBlockWidth.displayName = 'ImageBlockWidth';
+ImageBlockWidth.displayName = "ImageBlockWidth";
 
 //# sourceMappingURL=ImageBlockWidth.js.map

package/dist/src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockWidth.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockWidth.tsx"],"sourcesContent":["import React, { memo, useCallback, useEffect, useState } from 'react'\n\nexport type ImageBlockWidthProps = {\n  onChange: (value: number) => void\n  value: number\n}\n\nexport const ImageBlockWidth = memo(({ onChange, value }: ImageBlockWidthProps) => {\n  const [currentValue, setCurrentValue] = useState(value)\n\n  useEffect(() => {\n    setCurrentValue(value)\n  }, [value])\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange(parseInt(e.target.value))\n    },\n    [onChange],\n  )\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      <input\n        className=\"h-2 bg-neutral-200 border-0 rounded appearance-none fill-neutral-300\"\n        type=\"range\"\n        min=\"25\"\n        max=\"100\"\n        step=\"25\"\n        onChange={handleChange}\n        value={currentValue}\n      />\n      <span className=\"text-xs font-semibold text-neutral-500 select-none\">{value}%</span>\n    </div>\n  )\n})\n\nImageBlockWidth.displayName = 'ImageBlockWidth'\n"],"names":["React","memo","useCallback","useEffect","useState","ImageBlockWidth","onChange","value","currentValue","setCurrentValue","handleChange","e","parseInt","target","div","className","input","type","min","max","step","span","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,OAAOA,SAASC,IAAI,EAAEC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAOrE,OAAO,MAAMC,gCAAkBJ,KAAK,CAAC,EAAEK,QAAQ,EAAEC,KAAK,EAAwB;IAC5E,MAAM,CAACC,cAAcC,gBAAgB,GAAGL,SAASG;IAEjDJ,UAAU;QACRM,gBAAgBF;IAClB,GAAG;QAACA;KAAM;IAEV,MAAMG,eAAeR,YACnB,CAACS;QACCL,SAASM,SAASD,EAAEE,MAAM,CAACN,KAAK;IAClC,GACA;QAACD;KAAS;IAGZ,qBACE,MAACQ;QAAIC,WAAU;;0BACb,KAACC;gBACCD,WAAU;gBACVE,MAAK;gBACLC,KAAI;gBACJC,KAAI;gBACJC,MAAK;gBACLd,UAAUI;gBACVH,OAAOC;;0BAET,MAACa;gBAAKN,WAAU;;oBAAsDR;oBAAM;;;;;AAGlF,GAAE;AAEFF,gBAAgBiB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageBlock/components/ImageBlockWidth.tsx"],"sourcesContent":["import React, { memo, useCallback, useEffect, useState } from \"react\";\nimport { twj } from \"tw-to-css\";\n\nexport type ImageBlockWidthProps = {\n  onChange: (value: number) => void;\n  value: number;\n};\n\nexport const ImageBlockWidth = memo(\n  ({ onChange, value }: ImageBlockWidthProps) => {\n    const [currentValue, setCurrentValue] = useState(value);\n\n    useEffect(() => {\n      setCurrentValue(value);\n    }, [value]);\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        onChange(parseInt(e.target.value));\n      },\n      [onChange]\n    );\n\n    return (\n      <div style={twj(\"flex items-center gap-2\")}>\n        <input\n          style={twj(\n            \"h-2 bg-neutral-200 border-0 rounded appearance-none fill-neutral-300\"\n          )}\n          type=\"range\"\n          min=\"25\"\n          max=\"100\"\n          step=\"25\"\n          onChange={handleChange}\n          value={currentValue}\n        />\n        <span style={twj(\"text-xs font-semibold text-neutral-500 select-none\")}>\n          {value}%\n        </span>\n      </div>\n    );\n  }\n);\n\nImageBlockWidth.displayName = \"ImageBlockWidth\";\n"],"names":["React","memo","useCallback","useEffect","useState","twj","ImageBlockWidth","onChange","value","currentValue","setCurrentValue","handleChange","e","parseInt","target","div","style","input","type","min","max","step","span","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,OAAOA,SAASC,IAAI,EAAEC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AACtE,SAASC,GAAG,QAAQ,YAAY;AAOhC,OAAO,MAAMC,gCAAkBL,KAC7B,CAAC,EAAEM,QAAQ,EAAEC,KAAK,EAAwB;IACxC,MAAM,CAACC,cAAcC,gBAAgB,GAAGN,SAASI;IAEjDL,UAAU;QACRO,gBAAgBF;IAClB,GAAG;QAACA;KAAM;IAEV,MAAMG,eAAeT,YACnB,CAACU;QACCL,SAASM,SAASD,EAAEE,MAAM,CAACN,KAAK;IAClC,GACA;QAACD;KAAS;IAGZ,qBACE,MAACQ;QAAIC,OAAOX,IAAI;;0BACd,KAACY;gBACCD,OAAOX,IACL;gBAEFa,MAAK;gBACLC,KAAI;gBACJC,KAAI;gBACJC,MAAK;gBACLd,UAAUI;gBACVH,OAAOC;;0BAET,MAACa;gBAAKN,OAAOX,IAAI;;oBACdG;oBAAM;;;;;AAIf,GACA;AAEFF,gBAAgBiB,WAAW,GAAG"}

package/dist/src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUpload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageUpload.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUpload.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAmB,MAAM,eAAe,CAAC;AAGxD,eAAO,MAAM,WAAW,wBAGrB;IACD,MAAM,EAAE,MAAM,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;CAChB,gCAuCA,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ImageUpload.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUpload.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAmB,MAAM,eAAe,CAAC;AAIxD,eAAO,MAAM,WAAW,wBAGrB;IACD,MAAM,EAAE,MAAM,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;CAChB,gCAuCA,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUpload.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Upload } from "@payloadcms/ui/fields/Upload";
 import { NodeViewWrapper } from "@tiptap/react";
 import { useCallback } from "react";
+import { twj } from "tw-to-css";
 export const ImageUpload = ({ getPos, editor })=>{
     const onUpload = useCallback((url)=>{
         if (url) {
@@ -18,7 +19,7 @@ export const ImageUpload = ({ getPos, editor })=>{
     ]);
     return /*#__PURE__*/ _jsx(NodeViewWrapper, {
         children: /*#__PURE__*/ _jsx("div", {
-            className: "p-0 m-0",
+            style: twj("p-0 m-0"),
             "data-drag-handle": true,
             children: /*#__PURE__*/ _jsx(Upload, {})
         })

package/dist/src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUpload.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUpload.tsx"],"sourcesContent":["import { Upload } from \"@payloadcms/ui/fields/Upload\";\nimport { Editor, NodeViewWrapper } from \"@tiptap/react\";\nimport { useCallback } from \"react\";\n\nexport const ImageUpload = ({\n  getPos,\n  editor,\n}: {\n  getPos: () => number;\n  editor: Editor;\n}) => {\n  const onUpload = useCallback(\n    (url: string) => {\n      if (url) {\n        editor\n          .chain()\n          .setImageBlock({ src: url })\n          .deleteRange({ from: getPos(), to: getPos() })\n          .focus()\n          .run();\n      }\n    },\n    [getPos, editor]\n  );\n\n  return (\n    <NodeViewWrapper>\n      <div className=\"p-0 m-0\" data-drag-handle>\n        {/* <RenderFields\n          fieldMap={[\n            {\n              name: 'thumbnail',\n              type: 'upload',\n\n            },\n          ]}\n          path=\"media\"\n          readOnly={false}\n          schemaPath=\"\"\n          // fieldTypes={fieldTypes}\n          // fields={sidebarFields}\n          // permissions={permissions.fields}\n          // readOnly={!hasSavePermission}\n        /> */}\n        {/* <ImageUploader onUpload={onUpload} /> */}\n        <Upload />\n      </div>\n    </NodeViewWrapper>\n  );\n};\n\nexport default ImageUpload;\n"],"names":["Upload","NodeViewWrapper","useCallback","ImageUpload","getPos","editor","onUpload","url","chain","setImageBlock","src","deleteRange","from","to","focus","run","div","className","data-drag-handle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,MAAM,QAAQ,+BAA+B;AACtD,SAAiBC,eAAe,QAAQ,gBAAgB;AACxD,SAASC,WAAW,QAAQ,QAAQ;AAEpC,OAAO,MAAMC,cAAc,CAAC,EAC1BC,MAAM,EACNC,MAAM,EAIP;IACC,MAAMC,WAAWJ,YACf,CAACK;QACC,IAAIA,KAAK;YACPF,OACGG,KAAK,GACLC,aAAa,CAAC;gBAAEC,KAAKH;YAAI,GACzBI,WAAW,CAAC;gBAAEC,MAAMR;gBAAUS,IAAIT;YAAS,GAC3CU,KAAK,GACLC,GAAG;QACR;IACF,GACA;QAACX;QAAQC;KAAO;IAGlB,qBACE,KAACJ;kBACC,cAAA,KAACe;YAAIC,WAAU;YAAUC,kBAAgB;sBAkBvC,cAAA,KAAClB;;;AAIT,EAAE;AAEF,eAAeG,YAAY"}
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUpload.tsx"],"sourcesContent":["import { Upload } from \"@payloadcms/ui/fields/Upload\";\nimport { Editor, NodeViewWrapper } from \"@tiptap/react\";\nimport { useCallback } from \"react\";\nimport { twj } from \"tw-to-css\";\n\nexport const ImageUpload = ({\n  getPos,\n  editor,\n}: {\n  getPos: () => number;\n  editor: Editor;\n}) => {\n  const onUpload = useCallback(\n    (url: string) => {\n      if (url) {\n        editor\n          .chain()\n          .setImageBlock({ src: url })\n          .deleteRange({ from: getPos(), to: getPos() })\n          .focus()\n          .run();\n      }\n    },\n    [getPos, editor]\n  );\n\n  return (\n    <NodeViewWrapper>\n      <div style={twj(\"p-0 m-0\")} data-drag-handle>\n        {/* <RenderFields\n          fieldMap={[\n            {\n              name: 'thumbnail',\n              type: 'upload',\n\n            },\n          ]}\n          path=\"media\"\n          readOnly={false}\n          schemaPath=\"\"\n          // fieldTypes={fieldTypes}\n          // fields={sidebarFields}\n          // permissions={permissions.fields}\n          // readOnly={!hasSavePermission}\n        /> */}\n        {/* <ImageUploader onUpload={onUpload} /> */}\n        <Upload />\n      </div>\n    </NodeViewWrapper>\n  );\n};\n\nexport default ImageUpload;\n"],"names":["Upload","NodeViewWrapper","useCallback","twj","ImageUpload","getPos","editor","onUpload","url","chain","setImageBlock","src","deleteRange","from","to","focus","run","div","style","data-drag-handle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,MAAM,QAAQ,+BAA+B;AACtD,SAAiBC,eAAe,QAAQ,gBAAgB;AACxD,SAASC,WAAW,QAAQ,QAAQ;AACpC,SAASC,GAAG,QAAQ,YAAY;AAEhC,OAAO,MAAMC,cAAc,CAAC,EAC1BC,MAAM,EACNC,MAAM,EAIP;IACC,MAAMC,WAAWL,YACf,CAACM;QACC,IAAIA,KAAK;YACPF,OACGG,KAAK,GACLC,aAAa,CAAC;gBAAEC,KAAKH;YAAI,GACzBI,WAAW,CAAC;gBAAEC,MAAMR;gBAAUS,IAAIT;YAAS,GAC3CU,KAAK,GACLC,GAAG;QACR;IACF,GACA;QAACX;QAAQC;KAAO;IAGlB,qBACE,KAACL;kBACC,cAAA,KAACgB;YAAIC,OAAOf,IAAI;YAAYgB,kBAAgB;sBAkB1C,cAAA,KAACnB;;;AAIT,EAAE;AAEF,eAAeI,YAAY"}

package/dist/src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUploader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageUploader.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUploader.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,aAAa,kBAEvB;IACD,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,gCAgEA,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ImageUploader.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUploader.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,aAAa,kBAEvB;IACD,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,gCAwEA,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUploader.js

@@ -6,6 +6,7 @@ import { Icon } from "../../../features/ui/Icon.js";
 import { Spinner } from "../../../features/ui/Spinner/Spinner.js";
 import { cn } from "../../../lib/utils/index.js";
 import { useDropZone, useFileUpload, useUploader } from "./hooks.js";
+import { twj } from "tw-to-css";
 export const ImageUploader = ({ onUpload })=>{
     const { loading, uploadFile } = useUploader({
         onUpload
@@ -19,16 +20,16 @@ export const ImageUploader = ({ onUpload })=>{
     ]);
     if (loading) {
         return /*#__PURE__*/ _jsx("div", {
-            className: "flex items-center justify-center p-8 rounded-lg min-h-[10rem] bg-opacity-80",
+            style: twj("flex items-center justify-center p-8 rounded-lg min-h-[10rem] bg-opacity-80"),
             children: /*#__PURE__*/ _jsx(Spinner, {
-                className: "text-neutral-500",
+                style: twj("text-neutral-500"),
                 size: 1.5
             })
         });
     }
     const wrapperClass = cn("flex flex-col items-center justify-center px-8 py-10 rounded-lg bg-opacity-80", draggedInside && "bg-neutral-100");
     return /*#__PURE__*/ _jsxs("div", {
-        className: wrapperClass,
+        style: twj(wrapperClass),
         onDrop: onDrop,
         onDragOver: onDragEnter,
         onDragLeave: onDragLeave,
@@ -39,10 +40,10 @@ export const ImageUploader = ({ onUpload })=>{
                 className: "w-12 h-12 mb-4 text-black dark:text-white opacity-20"
             }),
             /*#__PURE__*/ _jsxs("div", {
-                className: "flex flex-col items-center justify-center gap-2",
+                style: twj("flex flex-col items-center justify-center gap-2"),
                 children: [
                     /*#__PURE__*/ _jsx("div", {
-                        className: "text-sm font-medium text-center text-neutral-400 dark:text-neutral-500",
+                        style: twj("text-sm font-medium text-center text-neutral-400 dark:text-neutral-500"),
                         children: draggedInside ? "Drop image here" : "Drag and drop or"
                     }),
                     /*#__PURE__*/ _jsx("div", {
@@ -63,7 +64,7 @@ export const ImageUploader = ({ onUpload })=>{
                 ]
             }),
             /*#__PURE__*/ _jsx("input", {
-                className: "w-0 h-0 overflow-hidden opacity-0",
+                style: twj("w-0 h-0 overflow-hidden opacity-0"),
                 ref: ref,
                 type: "file",
                 accept: ".jpg,.jpeg,.png,.webp,.gif",

package/dist/src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUploader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUploader.tsx"],"sourcesContent":["import { Image, Upload } from \"lucide-react\";\nimport { ChangeEvent, useCallback } from \"react\";\nimport { Button } from \"../../../features/ui/Button/Button.js\";\nimport { Icon } from \"../../../features/ui/Icon.js\";\nimport { Spinner } from \"../../../features/ui/Spinner/Spinner.js\";\nimport { cn } from \"../../../lib/utils/index.js\";\nimport { useDropZone, useFileUpload, useUploader } from \"./hooks.js\";\nexport const ImageUploader = ({\n  onUpload,\n}: {\n  onUpload: (url: string) => void;\n}) => {\n  const { loading, uploadFile } = useUploader({ onUpload });\n  const { handleUploadClick, ref } = useFileUpload();\n  const { draggedInside, onDrop, onDragEnter, onDragLeave } = useDropZone({\n    uploader: uploadFile,\n  });\n\n  const onFileChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) =>\n      e.target.files ? uploadFile() : null,\n    [uploadFile]\n  );\n\n  if (loading) {\n    return (\n      <div className=\"flex items-center justify-center p-8 rounded-lg min-h-[10rem] bg-opacity-80\">\n        <Spinner className=\"text-neutral-500\" size={1.5} />\n      </div>\n    );\n  }\n\n  const wrapperClass = cn(\n    \"flex flex-col items-center justify-center px-8 py-10 rounded-lg bg-opacity-80\",\n    draggedInside && \"bg-neutral-100\"\n  );\n\n  return (\n    <div\n      className={wrapperClass}\n      onDrop={onDrop}\n      onDragOver={onDragEnter}\n      onDragLeave={onDragLeave}\n      contentEditable={false}\n    >\n      <Icon\n        icon={Image}\n        className=\"w-12 h-12 mb-4 text-black dark:text-white opacity-20\"\n      />\n      <div className=\"flex flex-col items-center justify-center gap-2\">\n        <div className=\"text-sm font-medium text-center text-neutral-400 dark:text-neutral-500\">\n          {draggedInside ? \"Drop image here\" : \"Drag and drop or\"}\n        </div>\n        <div>\n          <Button\n            type=\"button\"\n            disabled={draggedInside}\n            onClick={handleUploadClick}\n            variant=\"primary\"\n            buttonSize=\"small\"\n          >\n            <Icon icon={Upload} />\n            Upload an image\n          </Button>\n        </div>\n      </div>\n      <input\n        className=\"w-0 h-0 overflow-hidden opacity-0\"\n        ref={ref}\n        type=\"file\"\n        accept=\".jpg,.jpeg,.png,.webp,.gif\"\n        onChange={onFileChange}\n      />\n    </div>\n  );\n};\n\nexport default ImageUploader;\n"],"names":["Image","Upload","useCallback","Button","Icon","Spinner","cn","useDropZone","useFileUpload","useUploader","ImageUploader","onUpload","loading","uploadFile","handleUploadClick","ref","draggedInside","onDrop","onDragEnter","onDragLeave","uploader","onFileChange","e","target","files","div","className","size","wrapperClass","onDragOver","contentEditable","icon","type","disabled","onClick","variant","buttonSize","input","accept","onChange"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,KAAK,EAAEC,MAAM,QAAQ,eAAe;AAC7C,SAAsBC,WAAW,QAAQ,QAAQ;AACjD,SAASC,MAAM,QAAQ,wCAAwC;AAC/D,SAASC,IAAI,QAAQ,+BAA+B;AACpD,SAASC,OAAO,QAAQ,0CAA0C;AAClE,SAASC,EAAE,QAAQ,8BAA8B;AACjD,SAASC,WAAW,EAAEC,aAAa,EAAEC,WAAW,QAAQ,aAAa;AACrE,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,QAAQ,EAGT;IACC,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGJ,YAAY;QAAEE;IAAS;IACvD,MAAM,EAAEG,iBAAiB,EAAEC,GAAG,EAAE,GAAGP;IACnC,MAAM,EAAEQ,aAAa,EAAEC,MAAM,EAAEC,WAAW,EAAEC,WAAW,EAAE,GAAGZ,YAAY;QACtEa,UAAUP;IACZ;IAEA,MAAMQ,eAAenB,YACnB,CAACoB,IACCA,EAAEC,MAAM,CAACC,KAAK,GAAGX,eAAe,MAClC;QAACA;KAAW;IAGd,IAAID,SAAS;QACX,qBACE,KAACa;YAAIC,WAAU;sBACb,cAAA,KAACrB;gBAAQqB,WAAU;gBAAmBC,MAAM;;;IAGlD;IAEA,MAAMC,eAAetB,GACnB,iFACAU,iBAAiB;IAGnB,qBACE,MAACS;QACCC,WAAWE;QACXX,QAAQA;QACRY,YAAYX;QACZC,aAAaA;QACbW,iBAAiB;;0BAEjB,KAAC1B;gBACC2B,MAAM/B;gBACN0B,WAAU;;0BAEZ,MAACD;gBAAIC,WAAU;;kCACb,KAACD;wBAAIC,WAAU;kCACZV,gBAAgB,oBAAoB;;kCAEvC,KAACS;kCACC,cAAA,MAACtB;4BACC6B,MAAK;4BACLC,UAAUjB;4BACVkB,SAASpB;4BACTqB,SAAQ;4BACRC,YAAW;;8CAEX,KAAChC;oCAAK2B,MAAM9B;;gCAAU;;;;;;0BAK5B,KAACoC;gBACCX,WAAU;gBACVX,KAAKA;gBACLiB,MAAK;gBACLM,QAAO;gBACPC,UAAUlB;;;;AAIlB,EAAE;AAEF,eAAeX,cAAc"}
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/ImageUpload/view/ImageUploader.tsx"],"sourcesContent":["import { Image, Upload } from \"lucide-react\";\nimport { ChangeEvent, useCallback } from \"react\";\nimport { Button } from \"../../../features/ui/Button/Button.js\";\nimport { Icon } from \"../../../features/ui/Icon.js\";\nimport { Spinner } from \"../../../features/ui/Spinner/Spinner.js\";\nimport { cn } from \"../../../lib/utils/index.js\";\nimport { useDropZone, useFileUpload, useUploader } from \"./hooks.js\";\nimport { twj } from \"tw-to-css\";\nexport const ImageUploader = ({\n  onUpload,\n}: {\n  onUpload: (url: string) => void;\n}) => {\n  const { loading, uploadFile } = useUploader({ onUpload });\n  const { handleUploadClick, ref } = useFileUpload();\n  const { draggedInside, onDrop, onDragEnter, onDragLeave } = useDropZone({\n    uploader: uploadFile,\n  });\n\n  const onFileChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) =>\n      e.target.files ? uploadFile() : null,\n    [uploadFile]\n  );\n\n  if (loading) {\n    return (\n      <div\n        style={twj(\n          \"flex items-center justify-center p-8 rounded-lg min-h-[10rem] bg-opacity-80\"\n        )}\n      >\n        <Spinner style={twj(\"text-neutral-500\")} size={1.5} />\n      </div>\n    );\n  }\n\n  const wrapperClass = cn(\n    \"flex flex-col items-center justify-center px-8 py-10 rounded-lg bg-opacity-80\",\n    draggedInside && \"bg-neutral-100\"\n  );\n\n  return (\n    <div\n      style={twj(wrapperClass)}\n      onDrop={onDrop}\n      onDragOver={onDragEnter}\n      onDragLeave={onDragLeave}\n      contentEditable={false}\n    >\n      <Icon\n        icon={Image}\n        className=\"w-12 h-12 mb-4 text-black dark:text-white opacity-20\"\n      />\n      <div style={twj(\"flex flex-col items-center justify-center gap-2\")}>\n        <div\n          style={twj(\n            \"text-sm font-medium text-center text-neutral-400 dark:text-neutral-500\"\n          )}\n        >\n          {draggedInside ? \"Drop image here\" : \"Drag and drop or\"}\n        </div>\n        <div>\n          <Button\n            type=\"button\"\n            disabled={draggedInside}\n            onClick={handleUploadClick}\n            variant=\"primary\"\n            buttonSize=\"small\"\n          >\n            <Icon icon={Upload} />\n            Upload an image\n          </Button>\n        </div>\n      </div>\n      <input\n        style={twj(\"w-0 h-0 overflow-hidden opacity-0\")}\n        ref={ref}\n        type=\"file\"\n        accept=\".jpg,.jpeg,.png,.webp,.gif\"\n        onChange={onFileChange}\n      />\n    </div>\n  );\n};\n\nexport default ImageUploader;\n"],"names":["Image","Upload","useCallback","Button","Icon","Spinner","cn","useDropZone","useFileUpload","useUploader","twj","ImageUploader","onUpload","loading","uploadFile","handleUploadClick","ref","draggedInside","onDrop","onDragEnter","onDragLeave","uploader","onFileChange","e","target","files","div","style","size","wrapperClass","onDragOver","contentEditable","icon","className","type","disabled","onClick","variant","buttonSize","input","accept","onChange"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,KAAK,EAAEC,MAAM,QAAQ,eAAe;AAC7C,SAAsBC,WAAW,QAAQ,QAAQ;AACjD,SAASC,MAAM,QAAQ,wCAAwC;AAC/D,SAASC,IAAI,QAAQ,+BAA+B;AACpD,SAASC,OAAO,QAAQ,0CAA0C;AAClE,SAASC,EAAE,QAAQ,8BAA8B;AACjD,SAASC,WAAW,EAAEC,aAAa,EAAEC,WAAW,QAAQ,aAAa;AACrE,SAASC,GAAG,QAAQ,YAAY;AAChC,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,QAAQ,EAGT;IACC,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGL,YAAY;QAAEG;IAAS;IACvD,MAAM,EAAEG,iBAAiB,EAAEC,GAAG,EAAE,GAAGR;IACnC,MAAM,EAAES,aAAa,EAAEC,MAAM,EAAEC,WAAW,EAAEC,WAAW,EAAE,GAAGb,YAAY;QACtEc,UAAUP;IACZ;IAEA,MAAMQ,eAAepB,YACnB,CAACqB,IACCA,EAAEC,MAAM,CAACC,KAAK,GAAGX,eAAe,MAClC;QAACA;KAAW;IAGd,IAAID,SAAS;QACX,qBACE,KAACa;YACCC,OAAOjB,IACL;sBAGF,cAAA,KAACL;gBAAQsB,OAAOjB,IAAI;gBAAqBkB,MAAM;;;IAGrD;IAEA,MAAMC,eAAevB,GACnB,iFACAW,iBAAiB;IAGnB,qBACE,MAACS;QACCC,OAAOjB,IAAImB;QACXX,QAAQA;QACRY,YAAYX;QACZC,aAAaA;QACbW,iBAAiB;;0BAEjB,KAAC3B;gBACC4B,MAAMhC;gBACNiC,WAAU;;0BAEZ,MAACP;gBAAIC,OAAOjB,IAAI;;kCACd,KAACgB;wBACCC,OAAOjB,IACL;kCAGDO,gBAAgB,oBAAoB;;kCAEvC,KAACS;kCACC,cAAA,MAACvB;4BACC+B,MAAK;4BACLC,UAAUlB;4BACVmB,SAASrB;4BACTsB,SAAQ;4BACRC,YAAW;;8CAEX,KAAClC;oCAAK4B,MAAM/B;;gCAAU;;;;;;0BAK5B,KAACsC;gBACCZ,OAAOjB,IAAI;gBACXM,KAAKA;gBACLkB,MAAK;gBACLM,QAAO;gBACPC,UAAUnB;;;;AAIlB,EAAE;AAEF,eAAeX,cAAc"}

package/dist/src/fields/TiptapEditor/extensions/InsideLinks/InsideLink.client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InsideLink.client.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/InsideLinks/InsideLink.client.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,mBAAmB,0CAG7B;IACD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,eAAe,EAAE,CAAC,EAChB,EAAE,EACF,IAAI,EACJ,SAAS,EACT,KAAK,EACL,GAAG,GACJ,EAAE;QACD,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;KACb,KAAK,IAAI,CAAC;CACZ,gCA6GA,CAAC"}
+{"version":3,"file":"InsideLink.client.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/InsideLinks/InsideLink.client.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,mBAAmB,0CAG7B;IACD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,eAAe,EAAE,CAAC,EAChB,EAAE,EACF,IAAI,EACJ,SAAS,EACT,KAAK,EACL,GAAG,GACJ,EAAE;QACD,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;KACb,KAAK,IAAI,CAAC;CACZ,gCA6GA,CAAC"}

package/dist/src/fields/TiptapEditor/extensions/InsideLinks/InsideLink.client.js

@@ -4,6 +4,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // import { PayloadAsyncSelect } from '@/components/PayloadAsyncSelect'
 import { Button } from "@payloadcms/ui/elements/Button";
 import { useCallback, useState } from "react";
+import { twj } from "tw-to-css";
 const limit = 10;
 export const ContentRelationship = ({ setRelationship, cancelSelection })=>{
     const [optionType, setOptionType] = useState("articles");
@@ -37,7 +38,7 @@ export const ContentRelationship = ({ setRelationship, cancelSelection })=>{
         }
     }, []);
     return /*#__PURE__*/ _jsx("div", {
-        className: "w-full min-w-[300px] ",
+        style: twj("w-full min-w-[300px] "),
         children: /*#__PURE__*/ _jsx("div", {
             children: /*#__PURE__*/ _jsx(Button, {
                 onClick: ()=>{

package/dist/src/fields/TiptapEditor/extensions/InsideLinks/InsideLink.client.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/InsideLinks/InsideLink.client.tsx"],"sourcesContent":["\"use client\";\n\n// import { CustomRelationShipComponent } from '@/components/CustomRelationshipComponent'\n// import { PayloadAsyncSelect } from '@/components/PayloadAsyncSelect'\nimport { Button } from \"@payloadcms/ui/elements/Button\";\nimport { useCallback, useState } from \"react\";\n\nconst limit = 10;\nexport const ContentRelationship = ({\n  setRelationship,\n  cancelSelection,\n}: {\n  type?: string;\n  relationId?: string;\n  cancelSelection: () => void;\n  setRelationship: ({\n    id,\n    type,\n    thumbnail,\n    title,\n    url,\n  }: {\n    id: string;\n    type: string;\n    thumbnail: string;\n    title: string;\n    url: string;\n  }) => void;\n}) => {\n  const [optionType, setOptionType] = useState(\"articles\");\n  const [relationOption, setRelationOption] = useState<any>(null);\n  const opts = [\n    {\n      label: \"Article\",\n      value: \"articles\",\n    },\n    {\n      label: \"Video\",\n      value: \"video\",\n    },\n    {\n      label: \"Audio\",\n      value: \"audios\",\n    },\n    // {\n    //   label: 'Media',\n    //   value: 'media',\n    // },\n  ];\n\n  const fetchContentTypes = useCallback(\n    async (search: any, loadedOptions: any, { page }: any) => {\n      try {\n        // Perform your API call with the endpoint and inputValue\n\n        return {\n          options: opts,\n          hasMore: opts?.length === limit,\n          additional: {\n            page: page + 1,\n          },\n        };\n      } catch (error) {\n        // console.error('Error fetching data:', error)\n      }\n    },\n    []\n  );\n  return (\n    <div className=\"w-full min-w-[300px] \">\n      {/* <PayloadAsyncSelect\n        fetchData={fetchContentTypes as any}\n        handleChange={(val: string) => {\n          setOptionType(val);\n        }}\n        defaultValue={opts?.find((option) => {\n          return option.value === optionType;\n        })}\n        cacheOptions={null}\n      /> */}\n\n      {/* <CustomRelationShipComponent\n        label={`${\n          opts?.find((option) => {\n            return option.value === optionType\n          })?.label\n        } Content`}\n        collection={optionType}\n        key={optionType}\n        value={relationOption?.id ?? null}\n        handleChange={(val: any) => {\n          setRelationOption(val)\n        }}\n        handleInitialLoad={(val: any) => {\n          setRelationOption(val)\n        }}\n      /> */}\n\n      <div>\n        <Button\n          onClick={() => {\n            let url = \"\";\n            const topic = relationOption?.topics?.[0]?.slug ?? \"\";\n            switch (optionType) {\n              case \"articles\":\n                url = `/${topic}/${relationOption?.slug}`;\n                break;\n              case \"video\":\n                url = `/video/${relationOption?.slug}`;\n\n                break;\n              case \"audios\":\n                url = `/audio/${relationOption?.slug}`;\n                break;\n            }\n            setRelationship({\n              id: relationOption?.id,\n              type: optionType,\n              thumbnail: relationOption?.thumbnail?.url,\n              title: relationOption?.title,\n              url: url,\n            });\n          }}\n        >\n          Save\n        </Button>\n\n        {/* <Button\n          onClick={() => {\n            cancelSelection()\n          }}\n        >\n          Cancel\n        </Button> */}\n      </div>\n    </div>\n  );\n};\n"],"names":["Button","useCallback","useState","limit","ContentRelationship","setRelationship","cancelSelection","optionType","setOptionType","relationOption","setRelationOption","opts","label","value","fetchContentTypes","search","loadedOptions","page","options","hasMore","length","additional","error","div","className","onClick","url","topic","topics","slug","id","type","thumbnail","title"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,yFAAyF;AACzF,uEAAuE;AACvE,SAASA,MAAM,QAAQ,iCAAiC;AACxD,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAE9C,MAAMC,QAAQ;AACd,OAAO,MAAMC,sBAAsB,CAAC,EAClCC,eAAe,EACfC,eAAe,EAkBhB;IACC,MAAM,CAACC,YAAYC,cAAc,GAAGN,SAAS;IAC7C,MAAM,CAACO,gBAAgBC,kBAAkB,GAAGR,SAAc;IAC1D,MAAMS,OAAO;QACX;YACEC,OAAO;YACPC,OAAO;QACT;QACA;YACED,OAAO;YACPC,OAAO;QACT;QACA;YACED,OAAO;YACPC,OAAO;QACT;KAKD;IAED,MAAMC,oBAAoBb,YACxB,OAAOc,QAAaC,eAAoB,EAAEC,IAAI,EAAO;QACnD,IAAI;YACF,yDAAyD;YAEzD,OAAO;gBACLC,SAASP;gBACTQ,SAASR,MAAMS,WAAWjB;gBAC1BkB,YAAY;oBACVJ,MAAMA,OAAO;gBACf;YACF;QACF,EAAE,OAAOK,OAAO;QACd,+CAA+C;QACjD;IACF,GACA,EAAE;IAEJ,qBACE,KAACC;QAAIC,WAAU;kBA6Bb,cAAA,KAACD;sBACC,cAAA,KAACvB;gBACCyB,SAAS;oBACP,IAAIC,MAAM;oBACV,MAAMC,QAAQlB,gBAAgBmB,QAAQ,CAAC,EAAE,EAAEC,QAAQ;oBACnD,OAAQtB;wBACN,KAAK;4BACHmB,MAAM,CAAC,CAAC,EAAEC,MAAM,CAAC,EAAElB,gBAAgBoB,KAAK,CAAC;4BACzC;wBACF,KAAK;4BACHH,MAAM,CAAC,OAAO,EAAEjB,gBAAgBoB,KAAK,CAAC;4BAEtC;wBACF,KAAK;4BACHH,MAAM,CAAC,OAAO,EAAEjB,gBAAgBoB,KAAK,CAAC;4BACtC;oBACJ;oBACAxB,gBAAgB;wBACdyB,IAAIrB,gBAAgBqB;wBACpBC,MAAMxB;wBACNyB,WAAWvB,gBAAgBuB,WAAWN;wBACtCO,OAAOxB,gBAAgBwB;wBACvBP,KAAKA;oBACP;gBACF;0BACD;;;;AAcT,EAAE"}
+{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/InsideLinks/InsideLink.client.tsx"],"sourcesContent":["\"use client\";\n\n// import { CustomRelationShipComponent } from '@/components/CustomRelationshipComponent'\n// import { PayloadAsyncSelect } from '@/components/PayloadAsyncSelect'\nimport { Button } from \"@payloadcms/ui/elements/Button\";\nimport { useCallback, useState } from \"react\";\nimport { twj } from \"tw-to-css\";\n\nconst limit = 10;\nexport const ContentRelationship = ({\n  setRelationship,\n  cancelSelection,\n}: {\n  type?: string;\n  relationId?: string;\n  cancelSelection: () => void;\n  setRelationship: ({\n    id,\n    type,\n    thumbnail,\n    title,\n    url,\n  }: {\n    id: string;\n    type: string;\n    thumbnail: string;\n    title: string;\n    url: string;\n  }) => void;\n}) => {\n  const [optionType, setOptionType] = useState(\"articles\");\n  const [relationOption, setRelationOption] = useState<any>(null);\n  const opts = [\n    {\n      label: \"Article\",\n      value: \"articles\",\n    },\n    {\n      label: \"Video\",\n      value: \"video\",\n    },\n    {\n      label: \"Audio\",\n      value: \"audios\",\n    },\n    // {\n    //   label: 'Media',\n    //   value: 'media',\n    // },\n  ];\n\n  const fetchContentTypes = useCallback(\n    async (search: any, loadedOptions: any, { page }: any) => {\n      try {\n        // Perform your API call with the endpoint and inputValue\n\n        return {\n          options: opts,\n          hasMore: opts?.length === limit,\n          additional: {\n            page: page + 1,\n          },\n        };\n      } catch (error) {\n        // console.error('Error fetching data:', error)\n      }\n    },\n    []\n  );\n  return (\n    <div style={twj(\"w-full min-w-[300px] \")}>\n      {/* <PayloadAsyncSelect\n        fetchData={fetchContentTypes as any}\n        handleChange={(val: string) => {\n          setOptionType(val);\n        }}\n        defaultValue={opts?.find((option) => {\n          return option.value === optionType;\n        })}\n        cacheOptions={null}\n      /> */}\n\n      {/* <CustomRelationShipComponent\n        label={`${\n          opts?.find((option) => {\n            return option.value === optionType\n          })?.label\n        } Content`}\n        collection={optionType}\n        key={optionType}\n        value={relationOption?.id ?? null}\n        handleChange={(val: any) => {\n          setRelationOption(val)\n        }}\n        handleInitialLoad={(val: any) => {\n          setRelationOption(val)\n        }}\n      /> */}\n\n      <div>\n        <Button\n          onClick={() => {\n            let url = \"\";\n            const topic = relationOption?.topics?.[0]?.slug ?? \"\";\n            switch (optionType) {\n              case \"articles\":\n                url = `/${topic}/${relationOption?.slug}`;\n                break;\n              case \"video\":\n                url = `/video/${relationOption?.slug}`;\n\n                break;\n              case \"audios\":\n                url = `/audio/${relationOption?.slug}`;\n                break;\n            }\n            setRelationship({\n              id: relationOption?.id,\n              type: optionType,\n              thumbnail: relationOption?.thumbnail?.url,\n              title: relationOption?.title,\n              url: url,\n            });\n          }}\n        >\n          Save\n        </Button>\n\n        {/* <Button\n          onClick={() => {\n            cancelSelection()\n          }}\n        >\n          Cancel\n        </Button> */}\n      </div>\n    </div>\n  );\n};\n"],"names":["Button","useCallback","useState","twj","limit","ContentRelationship","setRelationship","cancelSelection","optionType","setOptionType","relationOption","setRelationOption","opts","label","value","fetchContentTypes","search","loadedOptions","page","options","hasMore","length","additional","error","div","style","onClick","url","topic","topics","slug","id","type","thumbnail","title"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,yFAAyF;AACzF,uEAAuE;AACvE,SAASA,MAAM,QAAQ,iCAAiC;AACxD,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAC9C,SAASC,GAAG,QAAQ,YAAY;AAEhC,MAAMC,QAAQ;AACd,OAAO,MAAMC,sBAAsB,CAAC,EAClCC,eAAe,EACfC,eAAe,EAkBhB;IACC,MAAM,CAACC,YAAYC,cAAc,GAAGP,SAAS;IAC7C,MAAM,CAACQ,gBAAgBC,kBAAkB,GAAGT,SAAc;IAC1D,MAAMU,OAAO;QACX;YACEC,OAAO;YACPC,OAAO;QACT;QACA;YACED,OAAO;YACPC,OAAO;QACT;QACA;YACED,OAAO;YACPC,OAAO;QACT;KAKD;IAED,MAAMC,oBAAoBd,YACxB,OAAOe,QAAaC,eAAoB,EAAEC,IAAI,EAAO;QACnD,IAAI;YACF,yDAAyD;YAEzD,OAAO;gBACLC,SAASP;gBACTQ,SAASR,MAAMS,WAAWjB;gBAC1BkB,YAAY;oBACVJ,MAAMA,OAAO;gBACf;YACF;QACF,EAAE,OAAOK,OAAO;QACd,+CAA+C;QACjD;IACF,GACA,EAAE;IAEJ,qBACE,KAACC;QAAIC,OAAOtB,IAAI;kBA6Bd,cAAA,KAACqB;sBACC,cAAA,KAACxB;gBACC0B,SAAS;oBACP,IAAIC,MAAM;oBACV,MAAMC,QAAQlB,gBAAgBmB,QAAQ,CAAC,EAAE,EAAEC,QAAQ;oBACnD,OAAQtB;wBACN,KAAK;4BACHmB,MAAM,CAAC,CAAC,EAAEC,MAAM,CAAC,EAAElB,gBAAgBoB,KAAK,CAAC;4BACzC;wBACF,KAAK;4BACHH,MAAM,CAAC,OAAO,EAAEjB,gBAAgBoB,KAAK,CAAC;4BAEtC;wBACF,KAAK;4BACHH,MAAM,CAAC,OAAO,EAAEjB,gBAAgBoB,KAAK,CAAC;4BACtC;oBACJ;oBACAxB,gBAAgB;wBACdyB,IAAIrB,gBAAgBqB;wBACpBC,MAAMxB;wBACNyB,WAAWvB,gBAAgBuB,WAAWN;wBACtCO,OAAOxB,gBAAgBwB;wBACvBP,KAAKA;oBACP;gBACF;0BACD;;;;AAcT,EAAE"}

package/dist/src/fields/TiptapEditor/extensions/SlashCommand/CommandButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandButton.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/SlashCommand/CommandButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,aAAa,kHAsBzB,CAAC"}
+{"version":3,"file":"CommandButton.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/SlashCommand/CommandButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,aAAa,kHAsBzB,CAAC"}

package/dist/src/fields/TiptapEditor/extensions/SlashCommand/CommandButton.js

@@ -2,22 +2,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Icon } from "../../features/ui/Icon.js";
 import { cn } from "../../lib/utils/index.js";
+import { twj } from "tw-to-css";
 export const CommandButton = /*#__PURE__*/ forwardRef(({ active, icon, onClick, title }, ref)=>{
     const wrapperClass = cn("flex text-neutral-500 items-center text-xs font-semibold justify-start p-1.5 gap-2 rounded", !active && "bg-transparent hover:bg-neutral-50 hover:text-black", active && "bg-neutral-100 text-black hover:bg-neutral-100");
     return /*#__PURE__*/ _jsxs("button", {
         type: "button",
         ref: ref,
         onClick: onClick,
-        className: wrapperClass,
+        style: twj(wrapperClass),
         children: [
             /*#__PURE__*/ _jsx(Icon, {
                 icon: icon,
                 className: "w-3 h-3"
             }),
             /*#__PURE__*/ _jsx("div", {
-                className: "flex flex-col items-start justify-start",
+                style: twj("flex flex-col items-start justify-start"),
                 children: /*#__PURE__*/ _jsx("div", {
-                    className: "text-sm font-medium",
+                    style: twj("text-sm font-medium"),
                     children: title
                 })
             })

package/dist/src/fields/TiptapEditor/extensions/SlashCommand/CommandButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/SlashCommand/CommandButton.tsx"],"sourcesContent":["import { LucideIcon } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport { Icon } from \"../../features/ui/Icon.js\";\nimport { cn } from \"../../lib/utils/index.js\";\n\nexport type CommandButtonProps = {\n  active?: boolean;\n  description: string;\n  icon: LucideIcon;\n  onClick: () => void;\n  title: string;\n};\n\nexport const CommandButton = forwardRef<HTMLButtonElement, CommandButtonProps>(\n  ({ active, icon, onClick, title }, ref) => {\n    const wrapperClass = cn(\n      \"flex text-neutral-500 items-center text-xs font-semibold justify-start p-1.5 gap-2 rounded\",\n      !active && \"bg-transparent hover:bg-neutral-50 hover:text-black\",\n      active && \"bg-neutral-100 text-black hover:bg-neutral-100\"\n    );\n\n    return (\n      <button\n        type=\"button\"\n        ref={ref}\n        onClick={onClick}\n        className={wrapperClass}\n      >\n        <Icon icon={icon} className=\"w-3 h-3\" />\n        <div className=\"flex flex-col items-start justify-start\">\n          <div className=\"text-sm font-medium\">{title}</div>\n        </div>\n      </button>\n    );\n  }\n);\n\nCommandButton.displayName = \"CommandButton\";\n"],"names":["forwardRef","Icon","cn","CommandButton","active","icon","onClick","title","ref","wrapperClass","button","type","className","div","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AACA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,EAAE,QAAQ,2BAA2B;AAU9C,OAAO,MAAMC,8BAAgBH,WAC3B,CAAC,EAAEI,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAEC,KAAK,EAAE,EAAEC;IACjC,MAAMC,eAAeP,GACnB,8FACA,CAACE,UAAU,uDACXA,UAAU;IAGZ,qBACE,MAACM;QACCC,MAAK;QACLH,KAAKA;QACLF,SAASA;QACTM,WAAWH;;0BAEX,KAACR;gBAAKI,MAAMA;gBAAMO,WAAU;;0BAC5B,KAACC;gBAAID,WAAU;0BACb,cAAA,KAACC;oBAAID,WAAU;8BAAuBL;;;;;AAI9C,GACA;AAEFJ,cAAcW,WAAW,GAAG"}
+{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/SlashCommand/CommandButton.tsx"],"sourcesContent":["import { LucideIcon } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport { Icon } from \"../../features/ui/Icon.js\";\nimport { cn } from \"../../lib/utils/index.js\";\nimport { twj } from \"tw-to-css\";\n\nexport type CommandButtonProps = {\n  active?: boolean;\n  description: string;\n  icon: LucideIcon;\n  onClick: () => void;\n  title: string;\n};\n\nexport const CommandButton = forwardRef<HTMLButtonElement, CommandButtonProps>(\n  ({ active, icon, onClick, title }, ref) => {\n    const wrapperClass = cn(\n      \"flex text-neutral-500 items-center text-xs font-semibold justify-start p-1.5 gap-2 rounded\",\n      !active && \"bg-transparent hover:bg-neutral-50 hover:text-black\",\n      active && \"bg-neutral-100 text-black hover:bg-neutral-100\"\n    );\n\n    return (\n      <button\n        type=\"button\"\n        ref={ref}\n        onClick={onClick}\n        style={twj(wrapperClass)}\n      >\n        <Icon icon={icon} className=\"w-3 h-3\" />\n        <div style={twj(\"flex flex-col items-start justify-start\")}>\n          <div style={twj(\"text-sm font-medium\")}>{title}</div>\n        </div>\n      </button>\n    );\n  }\n);\n\nCommandButton.displayName = \"CommandButton\";\n"],"names":["forwardRef","Icon","cn","twj","CommandButton","active","icon","onClick","title","ref","wrapperClass","button","type","style","className","div","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AACA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,EAAE,QAAQ,2BAA2B;AAC9C,SAASC,GAAG,QAAQ,YAAY;AAUhC,OAAO,MAAMC,8BAAgBJ,WAC3B,CAAC,EAAEK,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAEC,KAAK,EAAE,EAAEC;IACjC,MAAMC,eAAeR,GACnB,8FACA,CAACG,UAAU,uDACXA,UAAU;IAGZ,qBACE,MAACM;QACCC,MAAK;QACLH,KAAKA;QACLF,SAASA;QACTM,OAAOV,IAAIO;;0BAEX,KAACT;gBAAKK,MAAMA;gBAAMQ,WAAU;;0BAC5B,KAACC;gBAAIF,OAAOV,IAAI;0BACd,cAAA,KAACY;oBAAIF,OAAOV,IAAI;8BAAyBK;;;;;AAIjD,GACA;AAEFJ,cAAcY,WAAW,GAAG"}

package/dist/src/fields/TiptapEditor/extensions/SlashCommand/MenuList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/SlashCommand/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAW,aAAa,EAAE,MAAM,YAAY,CAAC;AAIpD,eAAO,MAAM,QAAQ,+EAiJnB,CAAC;AAIH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/SlashCommand/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAW,aAAa,EAAE,MAAM,YAAY,CAAC;AAKpD,eAAO,MAAM,QAAQ,+EAqJnB,CAAC;AAIH,eAAe,QAAQ,CAAC"}

package/dist/src/fields/TiptapEditor/extensions/SlashCommand/MenuList.js

@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import { DropdownButton } from "../../features/ui/Dropdown/Dropdown.js";
 import { Surface } from "../../features/ui/Surface.js";
 import { Icon } from "../../features/ui/Icon.js";
+import { twj } from "tw-to-css";
 export const MenuList = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const scrollContainer = useRef(null);
     const activeItem = useRef(null);
@@ -92,13 +93,13 @@ export const MenuList = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     }
     return /*#__PURE__*/ _jsx(Surface, {
         ref: scrollContainer,
-        className: "text-black max-h-[min(80vh,24rem)] overflow-auto flex-wrap mb-8 p-2",
+        style: twj("text-black max-h-[min(80vh,24rem)] overflow-auto flex-wrap mb-8 p-2"),
         children: /*#__PURE__*/ _jsx("div", {
-            className: "grid grid-cols-1 gap-0.5",
+            style: twj("grid grid-cols-1 gap-0.5"),
             children: props.items.map((group, groupIndex)=>/*#__PURE__*/ _jsxs(React.Fragment, {
                     children: [
                         /*#__PURE__*/ _jsx("div", {
-                            className: "text-neutral-500 text-[0.65rem] col-[1/-1] mx-2 mt-4 font-semibold tracking-wider select-none uppercase first:mt-0.5",
+                            style: twj("text-neutral-500 text-[0.65rem] col-[1/-1] mx-2 mt-4 font-semibold tracking-wider select-none uppercase first:mt-0.5"),
                             children: group.title
                         }, `${group.title}`),
                         group.commands.map((command, commandIndex)=>/*#__PURE__*/ _jsxs(DropdownButton, {

package/dist/src/fields/TiptapEditor/extensions/SlashCommand/MenuList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/SlashCommand/MenuList.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { DropdownButton } from \"../../features/ui/Dropdown/Dropdown.js\";\nimport { Surface } from \"../../features/ui/Surface.js\";\nimport { Command, MenuListProps } from \"./types.js\";\n\nimport { Icon } from \"../../features/ui/Icon.js\";\n\nexport const MenuList = React.forwardRef((props: MenuListProps, ref) => {\n  const scrollContainer = useRef<HTMLDivElement>(null);\n  const activeItem = useRef<HTMLButtonElement>(null);\n  const [selectedGroupIndex, setSelectedGroupIndex] = useState(0);\n  const [selectedCommandIndex, setSelectedCommandIndex] = useState(0);\n\n  // Anytime the groups change, i.e. the user types to narrow it down, we want to\n  // reset the current selection to the first menu item\n  useEffect(() => {\n    setSelectedGroupIndex(0);\n    setSelectedCommandIndex(0);\n  }, [props.items]);\n\n  const selectItem = useCallback(\n    (groupIndex: number, commandIndex: number) => {\n      const command = props.items[groupIndex].commands[commandIndex];\n      props.command(command);\n    },\n    [props]\n  );\n\n  React.useImperativeHandle(ref, () => ({\n    onKeyDown: ({ event }: { event: React.KeyboardEvent }) => {\n      if (event.key === \"ArrowDown\") {\n        if (!props.items.length) {\n          return false;\n        }\n\n        const commands = props.items[selectedGroupIndex].commands;\n\n        let newCommandIndex = selectedCommandIndex + 1;\n        let newGroupIndex = selectedGroupIndex;\n\n        if (commands.length - 1 < newCommandIndex) {\n          newCommandIndex = 0;\n          newGroupIndex = selectedGroupIndex + 1;\n        }\n\n        if (props.items.length - 1 < newGroupIndex) {\n          newGroupIndex = 0;\n        }\n\n        setSelectedCommandIndex(newCommandIndex);\n        setSelectedGroupIndex(newGroupIndex);\n\n        return true;\n      }\n\n      if (event.key === \"ArrowUp\") {\n        if (!props.items.length) {\n          return false;\n        }\n\n        let newCommandIndex = selectedCommandIndex - 1;\n        let newGroupIndex = selectedGroupIndex;\n\n        if (newCommandIndex < 0) {\n          newGroupIndex = selectedGroupIndex - 1;\n          newCommandIndex =\n            props.items[newGroupIndex]?.commands.length - 1 || 0;\n        }\n\n        if (newGroupIndex < 0) {\n          newGroupIndex = props.items.length - 1;\n          newCommandIndex = props.items[newGroupIndex].commands.length - 1;\n        }\n\n        setSelectedCommandIndex(newCommandIndex);\n        setSelectedGroupIndex(newGroupIndex);\n\n        return true;\n      }\n\n      if (event.key === \"Enter\") {\n        if (\n          !props.items.length ||\n          selectedGroupIndex === -1 ||\n          selectedCommandIndex === -1\n        ) {\n          return false;\n        }\n\n        selectItem(selectedGroupIndex, selectedCommandIndex);\n\n        return true;\n      }\n\n      return false;\n    },\n  }));\n\n  useEffect(() => {\n    if (activeItem.current && scrollContainer.current) {\n      const offsetTop = activeItem.current.offsetTop;\n      const offsetHeight = activeItem.current.offsetHeight;\n\n      scrollContainer.current.scrollTop = offsetTop - offsetHeight;\n    }\n  }, [selectedCommandIndex, selectedGroupIndex]);\n\n  const createCommandClickHandler = useCallback(\n    (groupIndex: number, commandIndex: number) => {\n      return () => {\n        selectItem(groupIndex, commandIndex);\n      };\n    },\n    [selectItem]\n  );\n\n  if (!props.items.length) {\n    return null;\n  }\n\n  return (\n    <Surface\n      ref={scrollContainer}\n      className=\"text-black max-h-[min(80vh,24rem)] overflow-auto flex-wrap mb-8 p-2\"\n    >\n      <div className=\"grid grid-cols-1 gap-0.5\">\n        {props.items.map((group, groupIndex: number) => (\n          <React.Fragment key={`${group.title}-wrapper`}>\n            <div\n              className=\"text-neutral-500 text-[0.65rem] col-[1/-1] mx-2 mt-4 font-semibold tracking-wider select-none uppercase first:mt-0.5\"\n              key={`${group.title}`}\n            >\n              {group.title}\n            </div>\n            {group.commands.map((command: Command, commandIndex: number) => (\n              <DropdownButton\n                key={`${command.label}`}\n                isActive={\n                  selectedGroupIndex === groupIndex &&\n                  selectedCommandIndex === commandIndex\n                }\n                onClick={createCommandClickHandler(groupIndex, commandIndex)}\n              >\n                <Icon icon={command.icon} className=\"mr-1\" />\n                {command.label}\n              </DropdownButton>\n            ))}\n          </React.Fragment>\n        ))}\n      </div>\n    </Surface>\n  );\n});\n\nMenuList.displayName = \"MenuList\";\n\nexport default MenuList;\n"],"names":["React","useCallback","useEffect","useRef","useState","DropdownButton","Surface","Icon","MenuList","forwardRef","props","ref","scrollContainer","activeItem","selectedGroupIndex","setSelectedGroupIndex","selectedCommandIndex","setSelectedCommandIndex","items","selectItem","groupIndex","commandIndex","command","commands","useImperativeHandle","onKeyDown","event","key","length","newCommandIndex","newGroupIndex","current","offsetTop","offsetHeight","scrollTop","createCommandClickHandler","className","div","map","group","Fragment","title","isActive","onClick","icon","label","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/SlashCommand/MenuList.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { DropdownButton } from \"../../features/ui/Dropdown/Dropdown.js\";\nimport { Surface } from \"../../features/ui/Surface.js\";\nimport { Command, MenuListProps } from \"./types.js\";\n\nimport { Icon } from \"../../features/ui/Icon.js\";\nimport { twj } from \"tw-to-css\";\n\nexport const MenuList = React.forwardRef((props: MenuListProps, ref) => {\n  const scrollContainer = useRef<HTMLDivElement>(null);\n  const activeItem = useRef<HTMLButtonElement>(null);\n  const [selectedGroupIndex, setSelectedGroupIndex] = useState(0);\n  const [selectedCommandIndex, setSelectedCommandIndex] = useState(0);\n\n  // Anytime the groups change, i.e. the user types to narrow it down, we want to\n  // reset the current selection to the first menu item\n  useEffect(() => {\n    setSelectedGroupIndex(0);\n    setSelectedCommandIndex(0);\n  }, [props.items]);\n\n  const selectItem = useCallback(\n    (groupIndex: number, commandIndex: number) => {\n      const command = props.items[groupIndex].commands[commandIndex];\n      props.command(command);\n    },\n    [props]\n  );\n\n  React.useImperativeHandle(ref, () => ({\n    onKeyDown: ({ event }: { event: React.KeyboardEvent }) => {\n      if (event.key === \"ArrowDown\") {\n        if (!props.items.length) {\n          return false;\n        }\n\n        const commands = props.items[selectedGroupIndex].commands;\n\n        let newCommandIndex = selectedCommandIndex + 1;\n        let newGroupIndex = selectedGroupIndex;\n\n        if (commands.length - 1 < newCommandIndex) {\n          newCommandIndex = 0;\n          newGroupIndex = selectedGroupIndex + 1;\n        }\n\n        if (props.items.length - 1 < newGroupIndex) {\n          newGroupIndex = 0;\n        }\n\n        setSelectedCommandIndex(newCommandIndex);\n        setSelectedGroupIndex(newGroupIndex);\n\n        return true;\n      }\n\n      if (event.key === \"ArrowUp\") {\n        if (!props.items.length) {\n          return false;\n        }\n\n        let newCommandIndex = selectedCommandIndex - 1;\n        let newGroupIndex = selectedGroupIndex;\n\n        if (newCommandIndex < 0) {\n          newGroupIndex = selectedGroupIndex - 1;\n          newCommandIndex =\n            props.items[newGroupIndex]?.commands.length - 1 || 0;\n        }\n\n        if (newGroupIndex < 0) {\n          newGroupIndex = props.items.length - 1;\n          newCommandIndex = props.items[newGroupIndex].commands.length - 1;\n        }\n\n        setSelectedCommandIndex(newCommandIndex);\n        setSelectedGroupIndex(newGroupIndex);\n\n        return true;\n      }\n\n      if (event.key === \"Enter\") {\n        if (\n          !props.items.length ||\n          selectedGroupIndex === -1 ||\n          selectedCommandIndex === -1\n        ) {\n          return false;\n        }\n\n        selectItem(selectedGroupIndex, selectedCommandIndex);\n\n        return true;\n      }\n\n      return false;\n    },\n  }));\n\n  useEffect(() => {\n    if (activeItem.current && scrollContainer.current) {\n      const offsetTop = activeItem.current.offsetTop;\n      const offsetHeight = activeItem.current.offsetHeight;\n\n      scrollContainer.current.scrollTop = offsetTop - offsetHeight;\n    }\n  }, [selectedCommandIndex, selectedGroupIndex]);\n\n  const createCommandClickHandler = useCallback(\n    (groupIndex: number, commandIndex: number) => {\n      return () => {\n        selectItem(groupIndex, commandIndex);\n      };\n    },\n    [selectItem]\n  );\n\n  if (!props.items.length) {\n    return null;\n  }\n\n  return (\n    <Surface\n      ref={scrollContainer}\n      style={twj(\n        \"text-black max-h-[min(80vh,24rem)] overflow-auto flex-wrap mb-8 p-2\"\n      )}\n    >\n      <div style={twj(\"grid grid-cols-1 gap-0.5\")}>\n        {props.items.map((group, groupIndex: number) => (\n          <React.Fragment key={`${group.title}-wrapper`}>\n            <div\n              style={twj(\n                \"text-neutral-500 text-[0.65rem] col-[1/-1] mx-2 mt-4 font-semibold tracking-wider select-none uppercase first:mt-0.5\"\n              )}\n              key={`${group.title}`}\n            >\n              {group.title}\n            </div>\n            {group.commands.map((command: Command, commandIndex: number) => (\n              <DropdownButton\n                key={`${command.label}`}\n                isActive={\n                  selectedGroupIndex === groupIndex &&\n                  selectedCommandIndex === commandIndex\n                }\n                onClick={createCommandClickHandler(groupIndex, commandIndex)}\n              >\n                <Icon icon={command.icon} className=\"mr-1\" />\n                {command.label}\n              </DropdownButton>\n            ))}\n          </React.Fragment>\n        ))}\n      </div>\n    </Surface>\n  );\n});\n\nMenuList.displayName = \"MenuList\";\n\nexport default MenuList;\n"],"names":["React","useCallback","useEffect","useRef","useState","DropdownButton","Surface","Icon","twj","MenuList","forwardRef","props","ref","scrollContainer","activeItem","selectedGroupIndex","setSelectedGroupIndex","selectedCommandIndex","setSelectedCommandIndex","items","selectItem","groupIndex","commandIndex","command","commands","useImperativeHandle","onKeyDown","event","key","length","newCommandIndex","newGroupIndex","current","offsetTop","offsetHeight","scrollTop","createCommandClickHandler","style","div","map","group","Fragment","title","isActive","onClick","icon","className","label","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/src/fields/TiptapEditor/extensions/TableOfContentsNode/TableOfContentsNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableOfContentsNode.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/TableOfContentsNode/TableOfContentsNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAyB,MAAM,cAAc,CAAC;AAgB3D,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,mBAAmB,EAAE;YACnB,qBAAqB,EAAE,MAAM,UAAU,CAAC;SACzC,CAAC;KACH;CACF;AAED,eAAO,MAAM,mBAAmB,gBAmC9B,CAAC"}
+{"version":3,"file":"TableOfContentsNode.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/TableOfContentsNode/TableOfContentsNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAyB,MAAM,cAAc,CAAC;AAiB3D,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,mBAAmB,EAAE;YACnB,qBAAqB,EAAE,MAAM,UAAU,CAAC;SACzC,CAAC;KACH;CACF;AAED,eAAO,MAAM,mBAAmB,gBAmC9B,CAAC"}

package/dist/src/fields/TiptapEditor/extensions/TableOfContentsNode/TableOfContentsNode.js

@@ -3,11 +3,12 @@ import React from "react";
 import { Node } from "@tiptap/core";
 import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
 import { TableOfContents } from "../../features/TableOfContents/index.js";
+import { twj } from "tw-to-css";
 const TableOfNodeContent = (props)=>{
     const { editor } = props;
     return /*#__PURE__*/ _jsx(NodeViewWrapper, {
         children: /*#__PURE__*/ _jsx("div", {
-            className: "p-2 -m-2 rounded-lg",
+            style: twj("p-2 -m-2 rounded-lg"),
             contentEditable: false,
             children: /*#__PURE__*/ _jsx(TableOfContents, {
                 editor: editor

package/dist/src/fields/TiptapEditor/extensions/TableOfContentsNode/TableOfContentsNode.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/TableOfContentsNode/TableOfContentsNode.tsx"],"sourcesContent":["import React from \"react\";\nimport { Node, NodeViewRendererProps } from \"@tiptap/core\";\nimport { NodeViewWrapper, ReactNodeViewRenderer } from \"@tiptap/react\";\nimport { TableOfContents } from \"../../features/TableOfContents/index.js\";\n\nconst TableOfNodeContent = (props: NodeViewRendererProps) => {\n  const { editor } = props;\n\n  return (\n    <NodeViewWrapper>\n      <div className=\"p-2 -m-2 rounded-lg\" contentEditable={false}>\n        <TableOfContents editor={editor} />\n      </div>\n    </NodeViewWrapper>\n  );\n};\n\ndeclare module \"@tiptap/core\" {\n  interface Commands<ReturnType> {\n    tableOfContentsNode: {\n      insertTableOfContents: () => ReturnType;\n    };\n  }\n}\n\nexport const TableOfContentsNode = Node.create({\n  name: \"tableOfContentsNode\",\n  group: \"block\",\n  atom: true,\n  selectable: true,\n  draggable: true,\n  inline: false,\n\n  parseHTML() {\n    return [\n      {\n        tag: 'div[data-type=\"table-of-content\"]',\n      },\n    ];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return [\"div\", { ...HTMLAttributes, \"data-type\": \"table-of-content\" }];\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer(TableOfNodeContent);\n  },\n\n  addCommands() {\n    return {\n      insertTableOfContents:\n        () =>\n        ({ commands }) => {\n          return commands.insertContent({\n            type: this.name,\n          });\n        },\n    };\n  },\n});\n"],"names":["React","Node","NodeViewWrapper","ReactNodeViewRenderer","TableOfContents","TableOfNodeContent","props","editor","div","className","contentEditable","TableOfContentsNode","create","name","group","atom","selectable","draggable","inline","parseHTML","tag","renderHTML","HTMLAttributes","addNodeView","addCommands","insertTableOfContents","commands","insertContent","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,IAAI,QAA+B,eAAe;AAC3D,SAASC,eAAe,EAAEC,qBAAqB,QAAQ,gBAAgB;AACvE,SAASC,eAAe,QAAQ,0CAA0C;AAE1E,MAAMC,qBAAqB,CAACC;IAC1B,MAAM,EAAEC,MAAM,EAAE,GAAGD;IAEnB,qBACE,KAACJ;kBACC,cAAA,KAACM;YAAIC,WAAU;YAAsBC,iBAAiB;sBACpD,cAAA,KAACN;gBAAgBG,QAAQA;;;;AAIjC;AAUA,OAAO,MAAMI,sBAAsBV,KAAKW,MAAM,CAAC;IAC7CC,MAAM;IACNC,OAAO;IACPC,MAAM;IACNC,YAAY;IACZC,WAAW;IACXC,QAAQ;IAERC;QACE,OAAO;YACL;gBACEC,KAAK;YACP;SACD;IACH;IAEAC,YAAW,EAAEC,cAAc,EAAE;QAC3B,OAAO;YAAC;YAAO;gBAAE,GAAGA,cAAc;gBAAE,aAAa;YAAmB;SAAE;IACxE;IAEAC;QACE,OAAOpB,sBAAsBE;IAC/B;IAEAmB;QACE,OAAO;YACLC,uBACE,IACA,CAAC,EAAEC,QAAQ,EAAE;oBACX,OAAOA,SAASC,aAAa,CAAC;wBAC5BC,MAAM,IAAI,CAACf,IAAI;oBACjB;gBACF;QACJ;IACF;AACF,GAAG"}
+{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/TableOfContentsNode/TableOfContentsNode.tsx"],"sourcesContent":["import React from \"react\";\nimport { Node, NodeViewRendererProps } from \"@tiptap/core\";\nimport { NodeViewWrapper, ReactNodeViewRenderer } from \"@tiptap/react\";\nimport { TableOfContents } from \"../../features/TableOfContents/index.js\";\nimport { twj } from \"tw-to-css\";\n\nconst TableOfNodeContent = (props: NodeViewRendererProps) => {\n  const { editor } = props;\n\n  return (\n    <NodeViewWrapper>\n      <div style={twj(\"p-2 -m-2 rounded-lg\")} contentEditable={false}>\n        <TableOfContents editor={editor} />\n      </div>\n    </NodeViewWrapper>\n  );\n};\n\ndeclare module \"@tiptap/core\" {\n  interface Commands<ReturnType> {\n    tableOfContentsNode: {\n      insertTableOfContents: () => ReturnType;\n    };\n  }\n}\n\nexport const TableOfContentsNode = Node.create({\n  name: \"tableOfContentsNode\",\n  group: \"block\",\n  atom: true,\n  selectable: true,\n  draggable: true,\n  inline: false,\n\n  parseHTML() {\n    return [\n      {\n        tag: 'div[data-type=\"table-of-content\"]',\n      },\n    ];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return [\"div\", { ...HTMLAttributes, \"data-type\": \"table-of-content\" }];\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer(TableOfNodeContent);\n  },\n\n  addCommands() {\n    return {\n      insertTableOfContents:\n        () =>\n        ({ commands }) => {\n          return commands.insertContent({\n            type: this.name,\n          });\n        },\n    };\n  },\n});\n"],"names":["React","Node","NodeViewWrapper","ReactNodeViewRenderer","TableOfContents","twj","TableOfNodeContent","props","editor","div","style","contentEditable","TableOfContentsNode","create","name","group","atom","selectable","draggable","inline","parseHTML","tag","renderHTML","HTMLAttributes","addNodeView","addCommands","insertTableOfContents","commands","insertContent","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,IAAI,QAA+B,eAAe;AAC3D,SAASC,eAAe,EAAEC,qBAAqB,QAAQ,gBAAgB;AACvE,SAASC,eAAe,QAAQ,0CAA0C;AAC1E,SAASC,GAAG,QAAQ,YAAY;AAEhC,MAAMC,qBAAqB,CAACC;IAC1B,MAAM,EAAEC,MAAM,EAAE,GAAGD;IAEnB,qBACE,KAACL;kBACC,cAAA,KAACO;YAAIC,OAAOL,IAAI;YAAwBM,iBAAiB;sBACvD,cAAA,KAACP;gBAAgBI,QAAQA;;;;AAIjC;AAUA,OAAO,MAAMI,sBAAsBX,KAAKY,MAAM,CAAC;IAC7CC,MAAM;IACNC,OAAO;IACPC,MAAM;IACNC,YAAY;IACZC,WAAW;IACXC,QAAQ;IAERC;QACE,OAAO;YACL;gBACEC,KAAK;YACP;SACD;IACH;IAEAC,YAAW,EAAEC,cAAc,EAAE;QAC3B,OAAO;YAAC;YAAO;gBAAE,GAAGA,cAAc;gBAAE,aAAa;YAAmB;SAAE;IACxE;IAEAC;QACE,OAAOrB,sBAAsBG;IAC/B;IAEAmB;QACE,OAAO;YACLC,uBACE,IACA,CAAC,EAAEC,QAAQ,EAAE;oBACX,OAAOA,SAASC,aAAa,CAAC;wBAC5BC,MAAM,IAAI,CAACf,IAAI;oBACjB;gBACF;QACJ;IACF;AACF,GAAG"}

package/dist/src/fields/TiptapEditor/features/BlockEditor/BlockEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlockEditor.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/features/BlockEditor/BlockEditor.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzC,OAAO,wBAAwB,CAAC;AAEhC,eAAO,MAAM,WAAW,8BAA+B,WAAW,gCAyFjE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"BlockEditor.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/features/BlockEditor/BlockEditor.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzC,OAAO,wBAAwB,CAAC;AAGhC,eAAO,MAAM,WAAW,8BAA+B,WAAW,gCA+FjE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/src/fields/TiptapEditor/features/BlockEditor/BlockEditor.js

@@ -16,6 +16,7 @@ import { ContentItemMenu } from "../menus/ContentItemMenu/ContentItemMenu.js";
 import { TextMenu } from "../menus/TextMenu/TextMenu.js";
 import { LinkMenu } from "../menus/index.js";
 import "../../../../styles.css";
+import { twj } from "tw-to-css";
 export const BlockEditor = ({ handleChange, content })=>{
     const menuContainerRef = useRef(null);
     const editorRef = useRef(null);
@@ -57,17 +58,17 @@ export const BlockEditor = ({ handleChange, content })=>{
         value: providerValue,
         children: /*#__PURE__*/ _jsx("div", {
             lang: i18n.language,
-            className: "flex h-full overflow-visible editor-tiptap",
+            style: twj("flex h-full overflow-visible editor-tiptap"),
             ref: menuContainerRef,
             children: /*#__PURE__*/ _jsxs("div", {
-                className: "relative flex flex-col flex-1 h-full  justify-center items-center ",
+                style: twj("relative flex flex-col flex-1 h-full  justify-center items-center "),
                 children: [
                     /*#__PURE__*/ _jsx(EditorContent, {
                         editor: editor,
                         ref: editorRef,
                         lang: i18n.language,
-                        className: "flex-1 overflow-y-visible w-full h-full outline-none outline-offset-0",
                         style: {
+                            ...twj("flex-1 overflow-y-visible w-full h-full outline-none outline-offset-0"),
                             outline: "none"
                         }
                     }),