payload-richtext-tiptap 0.0.28 → 0.0.29

package/dist/src/fields/TiptapEditor/features/menus/TextMenu/components/FontSizePicker.js

@@ -6,6 +6,7 @@ import { DropdownButton } from "../../../ui/Dropdown/Dropdown.js";
 import { Icon } from "../../../ui/Icon.js";
 import { Surface } from "../../../ui/Surface.js";
 import { Toolbar } from "../../../ui/Toolbar.js";
+import { twj } from "tw-to-css";
 const FONT_SIZES = [
     {
         label: "Smaller",
@@ -53,7 +54,7 @@ export const FontSizePicker = ({ onChange, value })=>{
             /*#__PURE__*/ _jsx(Dropdown.Content, {
                 asChild: true,
                 children: /*#__PURE__*/ _jsx(Surface, {
-                    className: "flex flex-col gap-1 px-2 py-4",
+                    style: twj("flex flex-col gap-1 px-2 py-4"),
                     children: FONT_SIZES.map((size)=>/*#__PURE__*/ _jsx(DropdownButton, {
                             isActive: value === size.value,
                             onClick: selectSize(size.value),

package/dist/src/fields/TiptapEditor/features/menus/TextMenu/components/FontSizePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/components/FontSizePicker.tsx"],"sourcesContent":["import * as Dropdown from \"@radix-ui/react-dropdown-menu\";\nimport { ChevronDown } from \"lucide-react\";\nimport { useCallback } from \"react\";\nimport { DropdownButton } from \"../../../ui/Dropdown/Dropdown.js\";\nimport { Icon } from \"../../../ui/Icon.js\";\nimport { Surface } from \"../../../ui/Surface.js\";\nimport { Toolbar } from \"../../../ui/Toolbar.js\";\n\nconst FONT_SIZES = [\n  { label: \"Smaller\", value: \"12px\" },\n  { label: \"Small\", value: \"14px\" },\n  { label: \"Medium\", value: \"\" },\n  { label: \"Large\", value: \"18px\" },\n  { label: \"Extra Large\", value: \"24px\" },\n];\n\nexport type FontSizePickerProps = {\n  onChange: (value: string) => void; // eslint-disable-line no-unused-vars\n  value: string;\n};\n\nexport const FontSizePicker = ({ onChange, value }: FontSizePickerProps) => {\n  const currentValue = FONT_SIZES.find((size) => size.value === value);\n  const currentSizeLabel = currentValue?.label.split(\" \")[0] || \"Medium\";\n\n  const selectSize = useCallback(\n    (size: string) => () => onChange(size),\n    [onChange]\n  );\n\n  return (\n    <Dropdown.Root>\n      <Dropdown.Trigger asChild>\n        <Toolbar.Button type=\"button\" active={!!currentValue?.value}>\n          {currentSizeLabel}\n          <Icon icon={ChevronDown} className=\"w-2 h-2\" />\n        </Toolbar.Button>\n      </Dropdown.Trigger>\n      <Dropdown.Content asChild>\n        <Surface className=\"flex flex-col gap-1 px-2 py-4\">\n          {FONT_SIZES.map((size) => (\n            <DropdownButton\n              isActive={value === size.value}\n              onClick={selectSize(size.value)}\n              key={`${size.label}_${size.value}`}\n            >\n              <span style={{ fontSize: size.value }}>{size.label}</span>\n            </DropdownButton>\n          ))}\n        </Surface>\n      </Dropdown.Content>\n    </Dropdown.Root>\n  );\n};\n"],"names":["Dropdown","ChevronDown","useCallback","DropdownButton","Icon","Surface","Toolbar","FONT_SIZES","label","value","FontSizePicker","onChange","currentValue","find","size","currentSizeLabel","split","selectSize","Root","Trigger","asChild","Button","type","active","icon","className","Content","map","isActive","onClick","span","style","fontSize"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,cAAc,gCAAgC;AAC1D,SAASC,WAAW,QAAQ,eAAe;AAC3C,SAASC,WAAW,QAAQ,QAAQ;AACpC,SAASC,cAAc,QAAQ,mCAAmC;AAClE,SAASC,IAAI,QAAQ,sBAAsB;AAC3C,SAASC,OAAO,QAAQ,yBAAyB;AACjD,SAASC,OAAO,QAAQ,yBAAyB;AAEjD,MAAMC,aAAa;IACjB;QAAEC,OAAO;QAAWC,OAAO;IAAO;IAClC;QAAED,OAAO;QAASC,OAAO;IAAO;IAChC;QAAED,OAAO;QAAUC,OAAO;IAAG;IAC7B;QAAED,OAAO;QAASC,OAAO;IAAO;IAChC;QAAED,OAAO;QAAeC,OAAO;IAAO;CACvC;AAOD,OAAO,MAAMC,iBAAiB,CAAC,EAAEC,QAAQ,EAAEF,KAAK,EAAuB;IACrE,MAAMG,eAAeL,WAAWM,IAAI,CAAC,CAACC,OAASA,KAAKL,KAAK,KAAKA;IAC9D,MAAMM,mBAAmBH,cAAcJ,MAAMQ,MAAM,IAAI,CAAC,EAAE,IAAI;IAE9D,MAAMC,aAAaf,YACjB,CAACY,OAAiB,IAAMH,SAASG,OACjC;QAACH;KAAS;IAGZ,qBACE,MAACX,SAASkB,IAAI;;0BACZ,KAAClB,SAASmB,OAAO;gBAACC,OAAO;0BACvB,cAAA,MAACd,QAAQe,MAAM;oBAACC,MAAK;oBAASC,QAAQ,CAAC,CAACX,cAAcH;;wBACnDM;sCACD,KAACX;4BAAKoB,MAAMvB;4BAAawB,WAAU;;;;;0BAGvC,KAACzB,SAAS0B,OAAO;gBAACN,OAAO;0BACvB,cAAA,KAACf;oBAAQoB,WAAU;8BAChBlB,WAAWoB,GAAG,CAAC,CAACb,qBACf,KAACX;4BACCyB,UAAUnB,UAAUK,KAAKL,KAAK;4BAC9BoB,SAASZ,WAAWH,KAAKL,KAAK;sCAG9B,cAAA,KAACqB;gCAAKC,OAAO;oCAAEC,UAAUlB,KAAKL,KAAK;gCAAC;0CAAIK,KAAKN,KAAK;;2BAF7C,CAAC,EAAEM,KAAKN,KAAK,CAAC,CAAC,EAAEM,KAAKL,KAAK,CAAC,CAAC;;;;;AAShD,EAAE"}
+{"version":3,"sources":["../../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/components/FontSizePicker.tsx"],"sourcesContent":["import * as Dropdown from \"@radix-ui/react-dropdown-menu\";\nimport { ChevronDown } from \"lucide-react\";\nimport { useCallback } from \"react\";\nimport { DropdownButton } from \"../../../ui/Dropdown/Dropdown.js\";\nimport { Icon } from \"../../../ui/Icon.js\";\nimport { Surface } from \"../../../ui/Surface.js\";\nimport { Toolbar } from \"../../../ui/Toolbar.js\";\nimport { twj } from \"tw-to-css\";\n\nconst FONT_SIZES = [\n  { label: \"Smaller\", value: \"12px\" },\n  { label: \"Small\", value: \"14px\" },\n  { label: \"Medium\", value: \"\" },\n  { label: \"Large\", value: \"18px\" },\n  { label: \"Extra Large\", value: \"24px\" },\n];\n\nexport type FontSizePickerProps = {\n  onChange: (value: string) => void; // eslint-disable-line no-unused-vars\n  value: string;\n};\n\nexport const FontSizePicker = ({ onChange, value }: FontSizePickerProps) => {\n  const currentValue = FONT_SIZES.find((size) => size.value === value);\n  const currentSizeLabel = currentValue?.label.split(\" \")[0] || \"Medium\";\n\n  const selectSize = useCallback(\n    (size: string) => () => onChange(size),\n    [onChange]\n  );\n\n  return (\n    <Dropdown.Root>\n      <Dropdown.Trigger asChild>\n        <Toolbar.Button type=\"button\" active={!!currentValue?.value}>\n          {currentSizeLabel}\n          <Icon icon={ChevronDown} className=\"w-2 h-2\" />\n        </Toolbar.Button>\n      </Dropdown.Trigger>\n      <Dropdown.Content asChild>\n        <Surface style={twj(\"flex flex-col gap-1 px-2 py-4\")}>\n          {FONT_SIZES.map((size) => (\n            <DropdownButton\n              isActive={value === size.value}\n              onClick={selectSize(size.value)}\n              key={`${size.label}_${size.value}`}\n            >\n              <span style={{ fontSize: size.value }}>{size.label}</span>\n            </DropdownButton>\n          ))}\n        </Surface>\n      </Dropdown.Content>\n    </Dropdown.Root>\n  );\n};\n"],"names":["Dropdown","ChevronDown","useCallback","DropdownButton","Icon","Surface","Toolbar","twj","FONT_SIZES","label","value","FontSizePicker","onChange","currentValue","find","size","currentSizeLabel","split","selectSize","Root","Trigger","asChild","Button","type","active","icon","className","Content","style","map","isActive","onClick","span","fontSize"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,cAAc,gCAAgC;AAC1D,SAASC,WAAW,QAAQ,eAAe;AAC3C,SAASC,WAAW,QAAQ,QAAQ;AACpC,SAASC,cAAc,QAAQ,mCAAmC;AAClE,SAASC,IAAI,QAAQ,sBAAsB;AAC3C,SAASC,OAAO,QAAQ,yBAAyB;AACjD,SAASC,OAAO,QAAQ,yBAAyB;AACjD,SAASC,GAAG,QAAQ,YAAY;AAEhC,MAAMC,aAAa;IACjB;QAAEC,OAAO;QAAWC,OAAO;IAAO;IAClC;QAAED,OAAO;QAASC,OAAO;IAAO;IAChC;QAAED,OAAO;QAAUC,OAAO;IAAG;IAC7B;QAAED,OAAO;QAASC,OAAO;IAAO;IAChC;QAAED,OAAO;QAAeC,OAAO;IAAO;CACvC;AAOD,OAAO,MAAMC,iBAAiB,CAAC,EAAEC,QAAQ,EAAEF,KAAK,EAAuB;IACrE,MAAMG,eAAeL,WAAWM,IAAI,CAAC,CAACC,OAASA,KAAKL,KAAK,KAAKA;IAC9D,MAAMM,mBAAmBH,cAAcJ,MAAMQ,MAAM,IAAI,CAAC,EAAE,IAAI;IAE9D,MAAMC,aAAahB,YACjB,CAACa,OAAiB,IAAMH,SAASG,OACjC;QAACH;KAAS;IAGZ,qBACE,MAACZ,SAASmB,IAAI;;0BACZ,KAACnB,SAASoB,OAAO;gBAACC,OAAO;0BACvB,cAAA,MAACf,QAAQgB,MAAM;oBAACC,MAAK;oBAASC,QAAQ,CAAC,CAACX,cAAcH;;wBACnDM;sCACD,KAACZ;4BAAKqB,MAAMxB;4BAAayB,WAAU;;;;;0BAGvC,KAAC1B,SAAS2B,OAAO;gBAACN,OAAO;0BACvB,cAAA,KAAChB;oBAAQuB,OAAOrB,IAAI;8BACjBC,WAAWqB,GAAG,CAAC,CAACd,qBACf,KAACZ;4BACC2B,UAAUpB,UAAUK,KAAKL,KAAK;4BAC9BqB,SAASb,WAAWH,KAAKL,KAAK;sCAG9B,cAAA,KAACsB;gCAAKJ,OAAO;oCAAEK,UAAUlB,KAAKL,KAAK;gCAAC;0CAAIK,KAAKN,KAAK;;2BAF7C,CAAC,EAAEM,KAAKN,KAAK,CAAC,CAAC,EAAEM,KAAKL,KAAK,CAAC,CAAC;;;;;AAShD,EAAE"}

package/dist/src/fields/TiptapEditor/features/menus/TextMenu/components/ai-completion-command.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ai-completion-command.d.ts","sourceRoot":"","sources":["../../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/components/ai-completion-command.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAIvC,QAAA,MAAM,oBAAoB,uCAIvB;IACD,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,gCAoDA,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"ai-completion-command.d.ts","sourceRoot":"","sources":["../../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/components/ai-completion-command.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAKvC,QAAA,MAAM,oBAAoB,uCAIvB;IACD,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,gCAsDA,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/src/fields/TiptapEditor/features/menus/TextMenu/components/ai-completion-command.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Check, TextQuote, TrashIcon } from "lucide-react";
 import { Toolbar } from "../../../ui/Toolbar.js";
+import { twj } from "tw-to-css";
 const AICompletionCommands = ({ completion, onDiscard, editor })=>{
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsxs(Toolbar.Button, {
-                className: "gap-2 px-4 w-full flex justify-start ",
+                style: twj("gap-2 px-4 w-full flex justify-start "),
                 value: "replace",
                 onClick: ()=>{
                     const selection = editor.view.state.selection;
@@ -16,13 +17,13 @@ const AICompletionCommands = ({ completion, onDiscard, editor })=>{
                 },
                 children: [
                     /*#__PURE__*/ _jsx(Check, {
-                        className: "h-4 w-4 text-muted-foreground"
+                        style: twj("h-4 w-4 text-muted-foreground")
                     }),
                     "Replace selection"
                 ]
             }),
             /*#__PURE__*/ _jsxs(Toolbar.Button, {
-                className: "gap-2 px-4 w-full flex justify-start",
+                style: twj("gap-2 px-4 w-full flex justify-start"),
                 value: "insert",
                 onClick: ()=>{
                     const selection = editor.view.state.selection;
@@ -30,7 +31,7 @@ const AICompletionCommands = ({ completion, onDiscard, editor })=>{
                 },
                 children: [
                     /*#__PURE__*/ _jsx(TextQuote, {
-                        className: "h-4 w-4 text-muted-foreground"
+                        style: twj("h-4 w-4 text-muted-foreground")
                     }),
                     "Insert below"
                 ]
@@ -41,10 +42,10 @@ const AICompletionCommands = ({ completion, onDiscard, editor })=>{
             /*#__PURE__*/ _jsxs(Toolbar.Button, {
                 onClick: onDiscard,
                 value: "thrash",
-                className: "w-full text-red-500 bg-red-500 dark:text-red-500 hover:bg-red-500 dark:hover:text-red-500 dark:hover:bg-red-500 bg-opacity-10 hover:bg-opacity-20 dark:hover:bg-opacity-20",
+                style: twj("w-full text-red-500 bg-red-500 dark:text-red-500 hover:bg-red-500 dark:hover:text-red-500 dark:hover:bg-red-500 bg-opacity-10 hover:bg-opacity-20 dark:hover:bg-opacity-20"),
                 children: [
                     /*#__PURE__*/ _jsx(TrashIcon, {
-                        className: "h-4 w-4 text-muted-foreground"
+                        style: twj("h-4 w-4 text-muted-foreground")
                     }),
                     "Discard"
                 ]

package/dist/src/fields/TiptapEditor/features/menus/TextMenu/components/ai-completion-command.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/components/ai-completion-command.tsx"],"sourcesContent":["import { Editor } from \"@tiptap/react\";\nimport { Check, TextQuote, TrashIcon } from \"lucide-react\";\nimport { Toolbar } from \"../../../ui/Toolbar.js\";\n\nconst AICompletionCommands = ({\n  completion,\n  onDiscard,\n  editor,\n}: {\n  editor: Editor;\n  completion: string;\n  onDiscard: () => void;\n}) => {\n  return (\n    <>\n      <Toolbar.Button\n        className=\"gap-2 px-4 w-full flex justify-start \"\n        value=\"replace\"\n        onClick={() => {\n          const selection = editor.view.state.selection;\n\n          editor\n            .chain()\n            .focus()\n            .insertContentAt(\n              {\n                from: selection.from,\n                to: selection.to,\n              },\n              completion\n            )\n            .run();\n        }}\n      >\n        <Check className=\"h-4 w-4 text-muted-foreground\" />\n        Replace selection\n      </Toolbar.Button>\n      <Toolbar.Button\n        className=\"gap-2 px-4 w-full flex justify-start\"\n        value=\"insert\"\n        onClick={() => {\n          const selection = editor.view.state.selection;\n          editor\n            .chain()\n            .focus()\n            .insertContentAt(selection.to + 1, completion)\n            .run();\n        }}\n      >\n        <TextQuote className=\"h-4 w-4 text-muted-foreground\" />\n        Insert below\n      </Toolbar.Button>\n      <Toolbar.Divider horizontal />\n\n      <Toolbar.Button\n        onClick={onDiscard}\n        value=\"thrash\"\n        className=\"w-full text-red-500 bg-red-500 dark:text-red-500 hover:bg-red-500 dark:hover:text-red-500 dark:hover:bg-red-500 bg-opacity-10 hover:bg-opacity-20 dark:hover:bg-opacity-20\"\n      >\n        <TrashIcon className=\"h-4 w-4 text-muted-foreground\" />\n        Discard\n      </Toolbar.Button>\n    </>\n  );\n};\n\nexport default AICompletionCommands;\n"],"names":["Check","TextQuote","TrashIcon","Toolbar","AICompletionCommands","completion","onDiscard","editor","Button","className","value","onClick","selection","view","state","chain","focus","insertContentAt","from","to","run","Divider","horizontal"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AACA,SAASA,KAAK,EAAEC,SAAS,EAAEC,SAAS,QAAQ,eAAe;AAC3D,SAASC,OAAO,QAAQ,yBAAyB;AAEjD,MAAMC,uBAAuB,CAAC,EAC5BC,UAAU,EACVC,SAAS,EACTC,MAAM,EAKP;IACC,qBACE;;0BACE,MAACJ,QAAQK,MAAM;gBACbC,WAAU;gBACVC,OAAM;gBACNC,SAAS;oBACP,MAAMC,YAAYL,OAAOM,IAAI,CAACC,KAAK,CAACF,SAAS;oBAE7CL,OACGQ,KAAK,GACLC,KAAK,GACLC,eAAe,CACd;wBACEC,MAAMN,UAAUM,IAAI;wBACpBC,IAAIP,UAAUO,EAAE;oBAClB,GACAd,YAEDe,GAAG;gBACR;;kCAEA,KAACpB;wBAAMS,WAAU;;oBAAkC;;;0BAGrD,MAACN,QAAQK,MAAM;gBACbC,WAAU;gBACVC,OAAM;gBACNC,SAAS;oBACP,MAAMC,YAAYL,OAAOM,IAAI,CAACC,KAAK,CAACF,SAAS;oBAC7CL,OACGQ,KAAK,GACLC,KAAK,GACLC,eAAe,CAACL,UAAUO,EAAE,GAAG,GAAGd,YAClCe,GAAG;gBACR;;kCAEA,KAACnB;wBAAUQ,WAAU;;oBAAkC;;;0BAGzD,KAACN,QAAQkB,OAAO;gBAACC,UAAU;;0BAE3B,MAACnB,QAAQK,MAAM;gBACbG,SAASL;gBACTI,OAAM;gBACND,WAAU;;kCAEV,KAACP;wBAAUO,WAAU;;oBAAkC;;;;;AAK/D;AAEA,eAAeL,qBAAqB"}
+{"version":3,"sources":["../../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/components/ai-completion-command.tsx"],"sourcesContent":["import { Editor } from \"@tiptap/react\";\nimport { Check, TextQuote, TrashIcon } from \"lucide-react\";\nimport { Toolbar } from \"../../../ui/Toolbar.js\";\nimport { twj } from \"tw-to-css\";\n\nconst AICompletionCommands = ({\n  completion,\n  onDiscard,\n  editor,\n}: {\n  editor: Editor;\n  completion: string;\n  onDiscard: () => void;\n}) => {\n  return (\n    <>\n      <Toolbar.Button\n        style={twj(\"gap-2 px-4 w-full flex justify-start \")}\n        value=\"replace\"\n        onClick={() => {\n          const selection = editor.view.state.selection;\n\n          editor\n            .chain()\n            .focus()\n            .insertContentAt(\n              {\n                from: selection.from,\n                to: selection.to,\n              },\n              completion\n            )\n            .run();\n        }}\n      >\n        <Check style={twj(\"h-4 w-4 text-muted-foreground\")} />\n        Replace selection\n      </Toolbar.Button>\n      <Toolbar.Button\n        style={twj(\"gap-2 px-4 w-full flex justify-start\")}\n        value=\"insert\"\n        onClick={() => {\n          const selection = editor.view.state.selection;\n          editor\n            .chain()\n            .focus()\n            .insertContentAt(selection.to + 1, completion)\n            .run();\n        }}\n      >\n        <TextQuote style={twj(\"h-4 w-4 text-muted-foreground\")} />\n        Insert below\n      </Toolbar.Button>\n      <Toolbar.Divider horizontal />\n\n      <Toolbar.Button\n        onClick={onDiscard}\n        value=\"thrash\"\n        style={twj(\n          \"w-full text-red-500 bg-red-500 dark:text-red-500 hover:bg-red-500 dark:hover:text-red-500 dark:hover:bg-red-500 bg-opacity-10 hover:bg-opacity-20 dark:hover:bg-opacity-20\"\n        )}\n      >\n        <TrashIcon style={twj(\"h-4 w-4 text-muted-foreground\")} />\n        Discard\n      </Toolbar.Button>\n    </>\n  );\n};\n\nexport default AICompletionCommands;\n"],"names":["Check","TextQuote","TrashIcon","Toolbar","twj","AICompletionCommands","completion","onDiscard","editor","Button","style","value","onClick","selection","view","state","chain","focus","insertContentAt","from","to","run","Divider","horizontal"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AACA,SAASA,KAAK,EAAEC,SAAS,EAAEC,SAAS,QAAQ,eAAe;AAC3D,SAASC,OAAO,QAAQ,yBAAyB;AACjD,SAASC,GAAG,QAAQ,YAAY;AAEhC,MAAMC,uBAAuB,CAAC,EAC5BC,UAAU,EACVC,SAAS,EACTC,MAAM,EAKP;IACC,qBACE;;0BACE,MAACL,QAAQM,MAAM;gBACbC,OAAON,IAAI;gBACXO,OAAM;gBACNC,SAAS;oBACP,MAAMC,YAAYL,OAAOM,IAAI,CAACC,KAAK,CAACF,SAAS;oBAE7CL,OACGQ,KAAK,GACLC,KAAK,GACLC,eAAe,CACd;wBACEC,MAAMN,UAAUM,IAAI;wBACpBC,IAAIP,UAAUO,EAAE;oBAClB,GACAd,YAEDe,GAAG;gBACR;;kCAEA,KAACrB;wBAAMU,OAAON,IAAI;;oBAAoC;;;0BAGxD,MAACD,QAAQM,MAAM;gBACbC,OAAON,IAAI;gBACXO,OAAM;gBACNC,SAAS;oBACP,MAAMC,YAAYL,OAAOM,IAAI,CAACC,KAAK,CAACF,SAAS;oBAC7CL,OACGQ,KAAK,GACLC,KAAK,GACLC,eAAe,CAACL,UAAUO,EAAE,GAAG,GAAGd,YAClCe,GAAG;gBACR;;kCAEA,KAACpB;wBAAUS,OAAON,IAAI;;oBAAoC;;;0BAG5D,KAACD,QAAQmB,OAAO;gBAACC,UAAU;;0BAE3B,MAACpB,QAAQM,MAAM;gBACbG,SAASL;gBACTI,OAAM;gBACND,OAAON,IACL;;kCAGF,KAACF;wBAAUQ,OAAON,IAAI;;oBAAoC;;;;;AAKlE;AAEA,eAAeC,qBAAqB"}

package/dist/src/fields/TiptapEditor/features/menus/TextMenu/components/ai-selector-commands.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ai-selector-commands.d.ts","sourceRoot":"","sources":["../../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/components/ai-selector-commands.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAwDvC,UAAU,uBAAuB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CACR,KAAK,EAAE,MAAM,EACb,OAAO,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,KAC3C,IAAI,CAAC;CACX;AAED,QAAA,MAAM,kBAAkB,yBAA0B,uBAAuB,gCAkFxE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ai-selector-commands.d.ts","sourceRoot":"","sources":["../../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/components/ai-selector-commands.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAyDvC,UAAU,uBAAuB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CACR,KAAK,EAAE,MAAM,EACb,OAAO,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,KAC3C,IAAI,CAAC;CACX;AAED,QAAA,MAAM,kBAAkB,yBAA0B,uBAAuB,gCAsFxE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/src/fields/TiptapEditor/features/menus/TextMenu/components/ai-selector-commands.js

@@ -9,6 +9,7 @@ import { DropdownCategoryTitle } from "../../../ui/Dropdown/Dropdown.js";
 import { Icon } from "../../../ui/Icon.js";
 import { Surface } from "../../../ui/Surface.js";
 import { Toolbar } from "../../../ui/Toolbar.js";
+import { twj } from "tw-to-css";
 const options = [
     // {
     //   value: 'translate',
@@ -61,7 +62,7 @@ const AISelectorCommands = ({ onSelect, editor })=>{
                     /*#__PURE__*/ _jsx(Popover.Trigger, {
                         asChild: true,
                         children: /*#__PURE__*/ _jsxs(Toolbar.Button, {
-                            className: "gap-2 px-4 w-full flex justify-start ",
+                            style: twj("gap-2 px-4 w-full flex justify-start "),
                             type: "button",
                             // active={!!states.currentHighlight}
                             tooltip: "Highlight text",
@@ -84,7 +85,7 @@ const AISelectorCommands = ({ onSelect, editor })=>{
                         sideOffset: 8,
                         asChild: true,
                         children: /*#__PURE__*/ _jsxs(Surface, {
-                            className: "flex flex-col min-w-[15rem] p-2 max-h-[20rem] overflow-auto",
+                            style: twj("flex flex-col min-w-[15rem] p-2 max-h-[20rem] overflow-auto"),
                             children: [
                                 /*#__PURE__*/ _jsx(DropdownCategoryTitle, {
                                     children: "Languages"
@@ -98,7 +99,7 @@ const AISelectorCommands = ({ onSelect, editor })=>{
                                                 language: lang.value
                                             });
                                         },
-                                        className: "gap-2 px-4 w-full flex justify-start ",
+                                        style: twj("gap-2 px-4 w-full flex justify-start "),
                                         children: lang.label
                                     }, lang.value))
                             ]
@@ -120,11 +121,11 @@ const AISelectorCommands = ({ onSelect, editor })=>{
                             language: code ?? "en"
                         });
                     },
-                    className: " gap-2 px-4 w-full flex justify-start",
+                    style: twj(" gap-2 px-4 w-full flex justify-start"),
                     value: option.value,
                     children: [
                         /*#__PURE__*/ _jsx(option.icon, {
-                            className: "h-4 w-4 text-blue-500"
+                            style: twj("h-4 w-4 text-blue-500")
                         }),
                         option.label
                     ]
@@ -146,10 +147,10 @@ const AISelectorCommands = ({ onSelect, editor })=>{
                     });
                 },
                 value: "continue",
-                className: "gap-2 px-4 w-full flex justify-start",
+                style: twj("gap-2 px-4 w-full flex justify-start"),
                 children: [
                     /*#__PURE__*/ _jsx(StepForward, {
-                        className: "h-4 w-4 text-blue-500"
+                        style: twj("h-4 w-4 text-blue-500")
                     }),
                     "Continue writing"
                 ]

package/dist/src/fields/TiptapEditor/features/menus/TextMenu/components/ai-selector-commands.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/components/ai-selector-commands.tsx"],"sourcesContent":["import { useLocale } from \"@payloadcms/ui/providers/Locale\";\nimport * as Popover from \"@radix-ui/react-popover\";\nimport { Editor } from \"@tiptap/react\";\nimport { useAssistant } from \"ai/react\";\nimport {\n  ArrowDownWideNarrow,\n  CheckCheck,\n  ChevronDown,\n  Languages,\n  RefreshCcwDot,\n  StepForward,\n  WrapText,\n} from \"lucide-react\";\nimport { languages } from \"../../../../lib/constants.js\";\nimport { getPrevText } from \"../../../../lib/utils/index.js\";\nimport { DropdownCategoryTitle } from \"../../../ui/Dropdown/Dropdown.js\";\nimport { Icon } from \"../../../ui/Icon.js\";\nimport { Surface } from \"../../../ui/Surface.js\";\nimport { Toolbar } from \"../../../ui/Toolbar.js\";\nconst options = [\n  // {\n  //   value: 'translate',\n  //   label: 'Translate text',\n  //   icon: WrapText,\n  // },\n  {\n    value: \"summarize\",\n    label: \"Summarize text\",\n    icon: WrapText,\n  },\n  {\n    value: \"rewrite\",\n    label: \"Rewrite into Axios\",\n    icon: WrapText,\n  },\n  {\n    value: \"improve\",\n    label: \"Improve writing\",\n    icon: RefreshCcwDot,\n  },\n\n  {\n    value: \"fix\",\n    label: \"Fix grammar\",\n    icon: CheckCheck,\n  },\n  {\n    value: \"shorter\",\n    label: \"Make shorter\",\n    icon: ArrowDownWideNarrow,\n  },\n  {\n    value: \"longer\",\n    label: \"Make longer\",\n    icon: WrapText,\n  },\n];\n\ninterface AISelectorCommandsProps {\n  editor: Editor;\n  onSelect: (\n    value: string,\n    options: { option: string; language?: string }\n  ) => void;\n}\n\nconst AISelectorCommands = ({ onSelect, editor }: AISelectorCommandsProps) => {\n  const { status, messages, input, submitMessage, handleInputChange } =\n    useAssistant({\n      api: \"/api/assistant\",\n    });\n  const { code } = useLocale();\n\n  return (\n    <>\n      <DropdownCategoryTitle>Edit or review selection</DropdownCategoryTitle>\n      <Popover.Root>\n        <Popover.Trigger asChild>\n          <Toolbar.Button\n            className=\"gap-2 px-4 w-full flex justify-start \"\n            type=\"button\"\n            // active={!!states.currentHighlight}\n            tooltip=\"Highlight text\"\n          >\n            <Icon icon={Languages} className=\"h-4 w-4 text-blue-500\" />\n            Translate text\n            <Icon icon={ChevronDown} className=\"h-4 w-4 text-blue-500\" />\n          </Toolbar.Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"right\" align=\"start\" sideOffset={8} asChild>\n          <Surface className=\"flex flex-col min-w-[15rem] p-2 max-h-[20rem] overflow-auto\">\n            <DropdownCategoryTitle>Languages</DropdownCategoryTitle>\n\n            {languages.map((lang) => (\n              <Toolbar.Button\n                onClick={() => {\n                  const { from, to, empty } = editor.state.selection;\n                  const content = editor.state.doc.textBetween(from, to, \" \");\n                  onSelect(content, {\n                    option: \"translate\",\n                    language: lang.value,\n                  });\n                }}\n                className=\"gap-2 px-4 w-full flex justify-start \"\n                key={lang.value}\n              >\n                {lang.label}\n              </Toolbar.Button>\n            ))}\n          </Surface>\n        </Popover.Content>\n      </Popover.Root>\n\n      {options.map((option) => (\n        <Toolbar.Button\n          // onSelect={(value) => {\n          //   const slice = editor.state.selection.content()\n          //   const text = editor.storage.markdown.serializer.serialize(slice.content)\n          //   onSelect(text, option.value)\n          // }}\n          onClick={() => {\n            const { from, to, empty } = editor.state.selection;\n            const content = editor.state.doc.textBetween(from, to, \" \");\n            onSelect(content, { option: option.value, language: code ?? \"en\" });\n          }}\n          className=\" gap-2 px-4 w-full flex justify-start\"\n          key={option.value}\n          value={option.value}\n        >\n          <option.icon className=\"h-4 w-4 text-blue-500\" />\n          {option.label}\n        </Toolbar.Button>\n      ))}\n      <Toolbar.Divider horizontal />\n      <DropdownCategoryTitle>Use AI to do more</DropdownCategoryTitle>\n      <Toolbar.Button\n        onClick={() => {\n          const text = getPrevText(editor, { chars: 5000 });\n          onSelect(text, { option: \"continue\", language: code ?? \"en\" });\n        }}\n        value=\"continue\"\n        className=\"gap-2 px-4 w-full flex justify-start\"\n      >\n        <StepForward className=\"h-4 w-4 text-blue-500\" />\n        Continue writing\n      </Toolbar.Button>\n    </>\n  );\n};\n\nexport default AISelectorCommands;\n"],"names":["useLocale","Popover","useAssistant","ArrowDownWideNarrow","CheckCheck","ChevronDown","Languages","RefreshCcwDot","StepForward","WrapText","languages","getPrevText","DropdownCategoryTitle","Icon","Surface","Toolbar","options","value","label","icon","AISelectorCommands","onSelect","editor","status","messages","input","submitMessage","handleInputChange","api","code","Root","Trigger","asChild","Button","className","type","tooltip","Content","side","align","sideOffset","map","lang","onClick","from","to","empty","state","selection","content","doc","textBetween","option","language","Divider","horizontal","text","chars"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../../../../../src/fields/TiptapEditor/features/menus/TextMenu/components/ai-selector-commands.tsx"],"sourcesContent":["import { useLocale } from \"@payloadcms/ui/providers/Locale\";\nimport * as Popover from \"@radix-ui/react-popover\";\nimport { Editor } from \"@tiptap/react\";\nimport { useAssistant } from \"ai/react\";\nimport {\n  ArrowDownWideNarrow,\n  CheckCheck,\n  ChevronDown,\n  Languages,\n  RefreshCcwDot,\n  StepForward,\n  WrapText,\n} from \"lucide-react\";\nimport { languages } from \"../../../../lib/constants.js\";\nimport { getPrevText } from \"../../../../lib/utils/index.js\";\nimport { DropdownCategoryTitle } from \"../../../ui/Dropdown/Dropdown.js\";\nimport { Icon } from \"../../../ui/Icon.js\";\nimport { Surface } from \"../../../ui/Surface.js\";\nimport { Toolbar } from \"../../../ui/Toolbar.js\";\nimport { twj } from \"tw-to-css\";\nconst options = [\n  // {\n  //   value: 'translate',\n  //   label: 'Translate text',\n  //   icon: WrapText,\n  // },\n  {\n    value: \"summarize\",\n    label: \"Summarize text\",\n    icon: WrapText,\n  },\n  {\n    value: \"rewrite\",\n    label: \"Rewrite into Axios\",\n    icon: WrapText,\n  },\n  {\n    value: \"improve\",\n    label: \"Improve writing\",\n    icon: RefreshCcwDot,\n  },\n\n  {\n    value: \"fix\",\n    label: \"Fix grammar\",\n    icon: CheckCheck,\n  },\n  {\n    value: \"shorter\",\n    label: \"Make shorter\",\n    icon: ArrowDownWideNarrow,\n  },\n  {\n    value: \"longer\",\n    label: \"Make longer\",\n    icon: WrapText,\n  },\n];\n\ninterface AISelectorCommandsProps {\n  editor: Editor;\n  onSelect: (\n    value: string,\n    options: { option: string; language?: string }\n  ) => void;\n}\n\nconst AISelectorCommands = ({ onSelect, editor }: AISelectorCommandsProps) => {\n  const { status, messages, input, submitMessage, handleInputChange } =\n    useAssistant({\n      api: \"/api/assistant\",\n    });\n  const { code } = useLocale();\n\n  return (\n    <>\n      <DropdownCategoryTitle>Edit or review selection</DropdownCategoryTitle>\n      <Popover.Root>\n        <Popover.Trigger asChild>\n          <Toolbar.Button\n            style={twj(\"gap-2 px-4 w-full flex justify-start \")}\n            type=\"button\"\n            // active={!!states.currentHighlight}\n            tooltip=\"Highlight text\"\n          >\n            <Icon icon={Languages} className=\"h-4 w-4 text-blue-500\" />\n            Translate text\n            <Icon icon={ChevronDown} className=\"h-4 w-4 text-blue-500\" />\n          </Toolbar.Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"right\" align=\"start\" sideOffset={8} asChild>\n          <Surface\n            style={twj(\n              \"flex flex-col min-w-[15rem] p-2 max-h-[20rem] overflow-auto\"\n            )}\n          >\n            <DropdownCategoryTitle>Languages</DropdownCategoryTitle>\n\n            {languages.map((lang) => (\n              <Toolbar.Button\n                onClick={() => {\n                  const { from, to, empty } = editor.state.selection;\n                  const content = editor.state.doc.textBetween(from, to, \" \");\n                  onSelect(content, {\n                    option: \"translate\",\n                    language: lang.value,\n                  });\n                }}\n                style={twj(\"gap-2 px-4 w-full flex justify-start \")}\n                key={lang.value}\n              >\n                {lang.label}\n              </Toolbar.Button>\n            ))}\n          </Surface>\n        </Popover.Content>\n      </Popover.Root>\n\n      {options.map((option) => (\n        <Toolbar.Button\n          // onSelect={(value) => {\n          //   const slice = editor.state.selection.content()\n          //   const text = editor.storage.markdown.serializer.serialize(slice.content)\n          //   onSelect(text, option.value)\n          // }}\n          onClick={() => {\n            const { from, to, empty } = editor.state.selection;\n            const content = editor.state.doc.textBetween(from, to, \" \");\n            onSelect(content, { option: option.value, language: code ?? \"en\" });\n          }}\n          style={twj(\" gap-2 px-4 w-full flex justify-start\")}\n          key={option.value}\n          value={option.value}\n        >\n          <option.icon style={twj(\"h-4 w-4 text-blue-500\")} />\n          {option.label}\n        </Toolbar.Button>\n      ))}\n      <Toolbar.Divider horizontal />\n      <DropdownCategoryTitle>Use AI to do more</DropdownCategoryTitle>\n      <Toolbar.Button\n        onClick={() => {\n          const text = getPrevText(editor, { chars: 5000 });\n          onSelect(text, { option: \"continue\", language: code ?? \"en\" });\n        }}\n        value=\"continue\"\n        style={twj(\"gap-2 px-4 w-full flex justify-start\")}\n      >\n        <StepForward style={twj(\"h-4 w-4 text-blue-500\")} />\n        Continue writing\n      </Toolbar.Button>\n    </>\n  );\n};\n\nexport default AISelectorCommands;\n"],"names":["useLocale","Popover","useAssistant","ArrowDownWideNarrow","CheckCheck","ChevronDown","Languages","RefreshCcwDot","StepForward","WrapText","languages","getPrevText","DropdownCategoryTitle","Icon","Surface","Toolbar","twj","options","value","label","icon","AISelectorCommands","onSelect","editor","status","messages","input","submitMessage","handleInputChange","api","code","Root","Trigger","asChild","Button","style","type","tooltip","className","Content","side","align","sideOffset","map","lang","onClick","from","to","empty","state","selection","content","doc","textBetween","option","language","Divider","horizontal","text","chars"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AIEditorPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAavC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,aAAa,6BAA8B,kBAAkB,gCAwIzE,CAAC"}
+{"version":3,"file":"AIEditorPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAcvC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,aAAa,6BAA8B,kBAAkB,gCA8IzE,CAAC"}

package/dist/src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.js

@@ -13,6 +13,7 @@ import { Surface } from "../../ui/Surface.js";
 import { Toolbar } from "../../ui/Toolbar.js";
 import CrazySpinner from "../../ui/crazy-spinner.js";
 import { ScrollArea } from "../../ui/scroll-area.js";
+import { twj } from "tw-to-css";
 export const AIEditorPanel = ({ editor, onOpenChange })=>{
     const [inputValue, setInputValue] = useState("");
     const { code } = useLocale();
@@ -65,14 +66,14 @@ export const AIEditorPanel = ({ editor, onOpenChange })=>{
         code
     ]);
     return /*#__PURE__*/ _jsx(Surface, {
-        className: "p-2 min-w-[20rem]",
+        style: twj("p-2 min-w-[20rem]"),
         children: /*#__PURE__*/ _jsxs(_Fragment, {
             children: [
                 hasCompletion && /*#__PURE__*/ _jsx("div", {
-                    className: "flex max-h-[400px]",
+                    style: twj("flex max-h-[400px]"),
                     children: /*#__PURE__*/ _jsx(ScrollArea, {
                         children: /*#__PURE__*/ _jsx("div", {
-                            className: "prose p-2 px-4 prose-sm",
+                            style: twj("prose p-2 px-4 prose-sm"),
                             dir: isRTL(completion) ? "rtl" : "ltr",
                             children: /*#__PURE__*/ _jsx(Markdown, {
                                 children: completion
@@ -81,14 +82,14 @@ export const AIEditorPanel = ({ editor, onOpenChange })=>{
                     })
                 }),
                 isLoading && /*#__PURE__*/ _jsxs("div", {
-                    className: "flex h-12 w-full items-center px-4 text-sm font-medium text-muted-foreground text-blue-500",
+                    style: twj("flex h-12 w-full items-center px-4 text-sm font-medium text-muted-foreground text-blue-500"),
                     children: [
                         /*#__PURE__*/ _jsx(Sparkles, {
-                            className: "mr-2 h-4 w-4 shrink-0  "
+                            style: twj("mr-2 h-4 w-4 shrink-0  ")
                         }),
                         "AI is thinking",
                         /*#__PURE__*/ _jsx("div", {
-                            className: "ml-2 mt-1",
+                            style: twj("ml-2 mt-1"),
                             children: /*#__PURE__*/ _jsx(CrazySpinner, {})
                         })
                     ]
@@ -96,13 +97,13 @@ export const AIEditorPanel = ({ editor, onOpenChange })=>{
                 !isLoading && /*#__PURE__*/ _jsxs(_Fragment, {
                     children: [
                         /*#__PURE__*/ _jsxs("div", {
-                            className: "flex justify-between items-center",
+                            style: twj("flex justify-between items-center"),
                             children: [
                                 /*#__PURE__*/ _jsx(Sparkles, {
-                                    className: "mr-2 h-4 w-4 shrink-0 text-blue-500 "
+                                    style: twj("mr-2 h-4 w-4 shrink-0 text-blue-500 ")
                                 }),
                                 /*#__PURE__*/ _jsx("input", {
-                                    className: "w-full p-2 text-black bg-white  rounded dark:bg-black dark:text-white focus:outline-none",
+                                    style: twj("w-full p-2 text-black bg-white  rounded dark:bg-black dark:text-white focus:outline-none"),
                                     value: inputValue,
                                     onChange: (e)=>{
                                         setInputValue(e.target.value);
@@ -116,7 +117,7 @@ export const AIEditorPanel = ({ editor, onOpenChange })=>{
                                 }),
                                 /*#__PURE__*/ _jsx(Toolbar.Button, {
                                     // size="icon"
-                                    // className="absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full  bg-zinc-100 hover:bg-zinc-150"
+                                    // style={twj("absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full  bg-zinc-100 hover:bg-zinc-150"
                                     onClick: handleClick,
                                     children: /*#__PURE__*/ _jsx(ArrowRight, {})
                                 })

package/dist/src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport { useLocale } from \"@payloadcms/ui/providers/Locale\";\nimport { Editor } from \"@tiptap/react\";\nimport { useCompletion } from \"ai/react\";\nimport { ArrowRight, Sparkles } from \"lucide-react\";\nimport { useCallback, useState } from \"react\";\nimport Markdown from \"react-markdown\";\nimport { getPrevText } from \"../../../lib/utils/index.js\";\nimport { isRTL } from \"../../../lib/utils/isRtl.js\";\nimport AICompletionCommands from \"../../menus/TextMenu/components/ai-completion-command.js\";\nimport AISelectorCommands from \"../../menus/TextMenu/components/ai-selector-commands.js\";\nimport { Surface } from \"../../ui/Surface.js\";\nimport { Toolbar } from \"../../ui/Toolbar.js\";\nimport CrazySpinner from \"../../ui/crazy-spinner.js\";\nimport { ScrollArea } from \"../../ui/scroll-area.js\";\nexport type AIEditorPanelProps = {\n  editor: Editor;\n  onOpenChange: (value: boolean) => void;\n};\n\nexport const AIEditorPanel = ({ editor, onOpenChange }: AIEditorPanelProps) => {\n  const [inputValue, setInputValue] = useState(\"\");\n  const { code } = useLocale();\n\n  // const { status, messages, input, submitMessage, handleInputChange } = useAssistant({\n  //   // id: \"novel\",\n  //   api: \"/api/assistant\",\n  //   onResponse: (response) => {\n  //     if (response.status === 429) {\n  //       toast.error(\"You have reached your request limit for the day.\");\n  //       return;\n  //     }\n  //   },\n  //   onError: (e) => {\n  //     toast.error(e.message);\n  //   },\n  // });\n\n  const { completion, complete, isLoading } = useCompletion({\n    // id: \"novel\",\n    api: \"/api/generate\",\n    onResponse: (response) => {\n      if (response.status === 429) {\n        console.log(\"You have reached your request limit for the day.\");\n\n        return;\n      }\n    },\n    onError: (e) => {\n      console.log(\"ERROR\", e.message);\n    },\n  });\n\n  const hasCompletion = completion.length > 0;\n  const handleClick = useCallback(() => {\n    if (completion)\n      return complete(completion, {\n        body: { option: \"zap\", command: inputValue, language: code ?? \"en\" },\n      }).then(() => setInputValue(\"\"));\n    const text = getPrevText(editor, { chars: 5000 });\n\n    complete(text, {\n      body: { option: \"zap\", command: inputValue, language: code ?? \"en\" },\n    }).then(() => setInputValue(\"\"));\n  }, [code]);\n  return (\n    <Surface className=\"p-2 min-w-[20rem]\">\n      <>\n        {hasCompletion && (\n          <div className=\"flex max-h-[400px]\">\n            <ScrollArea>\n              <div\n                className=\"prose p-2 px-4 prose-sm\"\n                dir={isRTL(completion) ? \"rtl\" : \"ltr\"}\n              >\n                <Markdown>{completion}</Markdown>\n              </div>\n            </ScrollArea>\n          </div>\n        )}\n\n        {isLoading && (\n          <div className=\"flex h-12 w-full items-center px-4 text-sm font-medium text-muted-foreground text-blue-500\">\n            <Sparkles className=\"mr-2 h-4 w-4 shrink-0  \" />\n            AI is thinking\n            <div className=\"ml-2 mt-1\">\n              <CrazySpinner />\n            </div>\n          </div>\n        )}\n\n        {!isLoading && (\n          <>\n            <div className=\"flex justify-between items-center\">\n              {/* <CommandInput\n                value={inputValue}\n                onValueChange={setInputValue}\n                autoFocus\n                placeholder={\n                  hasCompletion ? 'Tell AI what to do next' : 'Ask AI to edit or generate...'\n                }\n                // onFocus={() => addAIHighlight(editor)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter') handleClick()\n                }}\n              /> */}\n              <Sparkles className=\"mr-2 h-4 w-4 shrink-0 text-blue-500 \" />\n              <input\n                className=\"w-full p-2 text-black bg-white  rounded dark:bg-black dark:text-white focus:outline-none\"\n                value={inputValue}\n                onChange={(e) => {\n                  setInputValue(e.target.value);\n                }}\n                placeholder={\n                  hasCompletion\n                    ? \"Tell AI what to do next\"\n                    : \"Ask AI to edit or generate...\"\n                }\n                autoFocus\n                // onFocus={() => addAIHighlight(editor)}\n\n                onKeyDown={(e) => {\n                  if (e.key === \"Enter\") handleClick();\n                }}\n              />\n              <Toolbar.Button\n                // size=\"icon\"\n\n                // className=\"absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full  bg-zinc-100 hover:bg-zinc-150\"\n                onClick={handleClick}\n              >\n                <ArrowRight />\n              </Toolbar.Button>\n            </div>\n            {hasCompletion ? (\n              <AICompletionCommands\n                editor={editor}\n                onDiscard={() => {\n                  editor.chain().unsetHighlight().focus().run();\n                  onOpenChange(false);\n                }}\n                completion={completion}\n              />\n            ) : (\n              <AISelectorCommands\n                editor={editor}\n                onSelect={(value, options) => {\n                  complete(value, { body: options });\n                }}\n              />\n            )}\n          </>\n        )}\n      </>\n    </Surface>\n  );\n};\n"],"names":["useLocale","useCompletion","ArrowRight","Sparkles","useCallback","useState","Markdown","getPrevText","isRTL","AICompletionCommands","AISelectorCommands","Surface","Toolbar","CrazySpinner","ScrollArea","AIEditorPanel","editor","onOpenChange","inputValue","setInputValue","code","completion","complete","isLoading","api","onResponse","response","status","console","log","onError","e","message","hasCompletion","length","handleClick","body","option","command","language","then","text","chars","className","div","dir","input","value","onChange","target","placeholder","autoFocus","onKeyDown","key","Button","onClick","onDiscard","chain","unsetHighlight","focus","run","onSelect","options"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport { useLocale } from \"@payloadcms/ui/providers/Locale\";\nimport { Editor } from \"@tiptap/react\";\nimport { useCompletion } from \"ai/react\";\nimport { ArrowRight, Sparkles } from \"lucide-react\";\nimport { useCallback, useState } from \"react\";\nimport Markdown from \"react-markdown\";\nimport { getPrevText } from \"../../../lib/utils/index.js\";\nimport { isRTL } from \"../../../lib/utils/isRtl.js\";\nimport AICompletionCommands from \"../../menus/TextMenu/components/ai-completion-command.js\";\nimport AISelectorCommands from \"../../menus/TextMenu/components/ai-selector-commands.js\";\nimport { Surface } from \"../../ui/Surface.js\";\nimport { Toolbar } from \"../../ui/Toolbar.js\";\nimport CrazySpinner from \"../../ui/crazy-spinner.js\";\nimport { ScrollArea } from \"../../ui/scroll-area.js\";\nimport { twj } from \"tw-to-css\";\nexport type AIEditorPanelProps = {\n  editor: Editor;\n  onOpenChange: (value: boolean) => void;\n};\n\nexport const AIEditorPanel = ({ editor, onOpenChange }: AIEditorPanelProps) => {\n  const [inputValue, setInputValue] = useState(\"\");\n  const { code } = useLocale();\n\n  // const { status, messages, input, submitMessage, handleInputChange } = useAssistant({\n  //   // id: \"novel\",\n  //   api: \"/api/assistant\",\n  //   onResponse: (response) => {\n  //     if (response.status === 429) {\n  //       toast.error(\"You have reached your request limit for the day.\");\n  //       return;\n  //     }\n  //   },\n  //   onError: (e) => {\n  //     toast.error(e.message);\n  //   },\n  // });\n\n  const { completion, complete, isLoading } = useCompletion({\n    // id: \"novel\",\n    api: \"/api/generate\",\n    onResponse: (response) => {\n      if (response.status === 429) {\n        console.log(\"You have reached your request limit for the day.\");\n\n        return;\n      }\n    },\n    onError: (e) => {\n      console.log(\"ERROR\", e.message);\n    },\n  });\n\n  const hasCompletion = completion.length > 0;\n  const handleClick = useCallback(() => {\n    if (completion)\n      return complete(completion, {\n        body: { option: \"zap\", command: inputValue, language: code ?? \"en\" },\n      }).then(() => setInputValue(\"\"));\n    const text = getPrevText(editor, { chars: 5000 });\n\n    complete(text, {\n      body: { option: \"zap\", command: inputValue, language: code ?? \"en\" },\n    }).then(() => setInputValue(\"\"));\n  }, [code]);\n  return (\n    <Surface style={twj(\"p-2 min-w-[20rem]\")}>\n      <>\n        {hasCompletion && (\n          <div style={twj(\"flex max-h-[400px]\")}>\n            <ScrollArea>\n              <div\n                style={twj(\"prose p-2 px-4 prose-sm\")}\n                dir={isRTL(completion) ? \"rtl\" : \"ltr\"}\n              >\n                <Markdown>{completion}</Markdown>\n              </div>\n            </ScrollArea>\n          </div>\n        )}\n\n        {isLoading && (\n          <div\n            style={twj(\n              \"flex h-12 w-full items-center px-4 text-sm font-medium text-muted-foreground text-blue-500\"\n            )}\n          >\n            <Sparkles style={twj(\"mr-2 h-4 w-4 shrink-0  \")} />\n            AI is thinking\n            <div style={twj(\"ml-2 mt-1\")}>\n              <CrazySpinner />\n            </div>\n          </div>\n        )}\n\n        {!isLoading && (\n          <>\n            <div style={twj(\"flex justify-between items-center\")}>\n              {/* <CommandInput\n                value={inputValue}\n                onValueChange={setInputValue}\n                autoFocus\n                placeholder={\n                  hasCompletion ? 'Tell AI what to do next' : 'Ask AI to edit or generate...'\n                }\n                // onFocus={() => addAIHighlight(editor)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter') handleClick()\n                }}\n              /> */}\n              <Sparkles style={twj(\"mr-2 h-4 w-4 shrink-0 text-blue-500 \")} />\n              <input\n                style={twj(\n                  \"w-full p-2 text-black bg-white  rounded dark:bg-black dark:text-white focus:outline-none\"\n                )}\n                value={inputValue}\n                onChange={(e) => {\n                  setInputValue(e.target.value);\n                }}\n                placeholder={\n                  hasCompletion\n                    ? \"Tell AI what to do next\"\n                    : \"Ask AI to edit or generate...\"\n                }\n                autoFocus\n                // onFocus={() => addAIHighlight(editor)}\n\n                onKeyDown={(e) => {\n                  if (e.key === \"Enter\") handleClick();\n                }}\n              />\n              <Toolbar.Button\n                // size=\"icon\"\n\n                // style={twj(\"absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full  bg-zinc-100 hover:bg-zinc-150\"\n                onClick={handleClick}\n              >\n                <ArrowRight />\n              </Toolbar.Button>\n            </div>\n            {hasCompletion ? (\n              <AICompletionCommands\n                editor={editor}\n                onDiscard={() => {\n                  editor.chain().unsetHighlight().focus().run();\n                  onOpenChange(false);\n                }}\n                completion={completion}\n              />\n            ) : (\n              <AISelectorCommands\n                editor={editor}\n                onSelect={(value, options) => {\n                  complete(value, { body: options });\n                }}\n              />\n            )}\n          </>\n        )}\n      </>\n    </Surface>\n  );\n};\n"],"names":["useLocale","useCompletion","ArrowRight","Sparkles","useCallback","useState","Markdown","getPrevText","isRTL","AICompletionCommands","AISelectorCommands","Surface","Toolbar","CrazySpinner","ScrollArea","twj","AIEditorPanel","editor","onOpenChange","inputValue","setInputValue","code","completion","complete","isLoading","api","onResponse","response","status","console","log","onError","e","message","hasCompletion","length","handleClick","body","option","command","language","then","text","chars","style","div","dir","input","value","onChange","target","placeholder","autoFocus","onKeyDown","key","Button","onClick","onDiscard","chain","unsetHighlight","focus","run","onSelect","options"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/src/fields/TiptapEditor/features/panels/Colorpicker/ColorButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorButton.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/panels/Colorpicker/ColorButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,WAAW,+DACa,gBAAgB,uBA2BpD,CAAC"}
+{"version":3,"file":"ColorButton.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/panels/Colorpicker/ColorButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,WAAW,+DACa,gBAAgB,uBA8BpD,CAAC"}

package/dist/src/fields/TiptapEditor/features/panels/Colorpicker/ColorButton.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { memo, useCallback } from "react";
 import { cn } from "../../../lib/utils/index.js";
+import { twj } from "tw-to-css";
 export const ColorButton = /*#__PURE__*/ memo(({ color, active, onColorChange })=>{
     const wrapperClassName = cn("flex items-center justify-center px-1.5 py-1.5 rounded group", !active && "hover:bg-neutral-100", active && "bg-neutral-100");
     const bubbleClassName = cn("w-4 h-4 rounded bg-slate-100 shadow-sm ring-offset-2 ring-current", !active && `hover:ring-1`, active && `ring-1`);
@@ -15,13 +16,13 @@ export const ColorButton = /*#__PURE__*/ memo(({ color, active, onColorChange })
     return /*#__PURE__*/ _jsx("button", {
         type: "button",
         onClick: handleClick,
-        className: wrapperClassName,
+        style: twj(wrapperClassName),
         children: /*#__PURE__*/ _jsx("div", {
             style: {
+                ...twj(bubbleClassName),
                 backgroundColor: color,
                 color: color
-            },
-            className: bubbleClassName
+            }
         })
     });
 });

package/dist/src/fields/TiptapEditor/features/panels/Colorpicker/ColorButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/Colorpicker/ColorButton.tsx"],"sourcesContent":["import React, { memo, useCallback } from \"react\";\nimport { cn } from \"../../../lib/utils/index.js\";\n\nexport type ColorButtonProps = {\n  color?: string;\n  active?: boolean;\n  onColorChange?: (color: string) => void; // eslint-disable-line no-unused-vars\n};\n\nexport const ColorButton = memo(\n  ({ color, active, onColorChange }: ColorButtonProps) => {\n    const wrapperClassName = cn(\n      \"flex items-center justify-center px-1.5 py-1.5 rounded group\",\n      !active && \"hover:bg-neutral-100\",\n      active && \"bg-neutral-100\"\n    );\n    const bubbleClassName = cn(\n      \"w-4 h-4 rounded bg-slate-100 shadow-sm ring-offset-2 ring-current\",\n      !active && `hover:ring-1`,\n      active && `ring-1`\n    );\n\n    const handleClick = useCallback(() => {\n      if (onColorChange) {\n        onColorChange(color || \"\");\n      }\n    }, [onColorChange, color]);\n\n    return (\n      <button type=\"button\" onClick={handleClick} className={wrapperClassName}>\n        <div\n          style={{ backgroundColor: color, color: color }}\n          className={bubbleClassName}\n        ></div>\n      </button>\n    );\n  }\n);\n\nColorButton.displayName = \"ColorButton\";\n"],"names":["React","memo","useCallback","cn","ColorButton","color","active","onColorChange","wrapperClassName","bubbleClassName","handleClick","button","type","onClick","className","div","style","backgroundColor","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,OAAOA,SAASC,IAAI,EAAEC,WAAW,QAAQ,QAAQ;AACjD,SAASC,EAAE,QAAQ,8BAA8B;AAQjD,OAAO,MAAMC,4BAAcH,KACzB,CAAC,EAAEI,KAAK,EAAEC,MAAM,EAAEC,aAAa,EAAoB;IACjD,MAAMC,mBAAmBL,GACvB,gEACA,CAACG,UAAU,wBACXA,UAAU;IAEZ,MAAMG,kBAAkBN,GACtB,qEACA,CAACG,UAAU,CAAC,YAAY,CAAC,EACzBA,UAAU,CAAC,MAAM,CAAC;IAGpB,MAAMI,cAAcR,YAAY;QAC9B,IAAIK,eAAe;YACjBA,cAAcF,SAAS;QACzB;IACF,GAAG;QAACE;QAAeF;KAAM;IAEzB,qBACE,KAACM;QAAOC,MAAK;QAASC,SAASH;QAAaI,WAAWN;kBACrD,cAAA,KAACO;YACCC,OAAO;gBAAEC,iBAAiBZ;gBAAOA,OAAOA;YAAM;YAC9CS,WAAWL;;;AAInB,GACA;AAEFL,YAAYc,WAAW,GAAG"}
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/Colorpicker/ColorButton.tsx"],"sourcesContent":["import React, { memo, useCallback } from \"react\";\nimport { cn } from \"../../../lib/utils/index.js\";\nimport { twj } from \"tw-to-css\";\n\nexport type ColorButtonProps = {\n  color?: string;\n  active?: boolean;\n  onColorChange?: (color: string) => void; // eslint-disable-line no-unused-vars\n};\n\nexport const ColorButton = memo(\n  ({ color, active, onColorChange }: ColorButtonProps) => {\n    const wrapperClassName = cn(\n      \"flex items-center justify-center px-1.5 py-1.5 rounded group\",\n      !active && \"hover:bg-neutral-100\",\n      active && \"bg-neutral-100\"\n    );\n    const bubbleClassName = cn(\n      \"w-4 h-4 rounded bg-slate-100 shadow-sm ring-offset-2 ring-current\",\n      !active && `hover:ring-1`,\n      active && `ring-1`\n    );\n\n    const handleClick = useCallback(() => {\n      if (onColorChange) {\n        onColorChange(color || \"\");\n      }\n    }, [onColorChange, color]);\n\n    return (\n      <button type=\"button\" onClick={handleClick} style={twj(wrapperClassName)}>\n        <div\n          style={{\n            ...twj(bubbleClassName),\n            backgroundColor: color,\n            color: color,\n          }}\n        ></div>\n      </button>\n    );\n  }\n);\n\nColorButton.displayName = \"ColorButton\";\n"],"names":["React","memo","useCallback","cn","twj","ColorButton","color","active","onColorChange","wrapperClassName","bubbleClassName","handleClick","button","type","onClick","style","div","backgroundColor","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,OAAOA,SAASC,IAAI,EAAEC,WAAW,QAAQ,QAAQ;AACjD,SAASC,EAAE,QAAQ,8BAA8B;AACjD,SAASC,GAAG,QAAQ,YAAY;AAQhC,OAAO,MAAMC,4BAAcJ,KACzB,CAAC,EAAEK,KAAK,EAAEC,MAAM,EAAEC,aAAa,EAAoB;IACjD,MAAMC,mBAAmBN,GACvB,gEACA,CAACI,UAAU,wBACXA,UAAU;IAEZ,MAAMG,kBAAkBP,GACtB,qEACA,CAACI,UAAU,CAAC,YAAY,CAAC,EACzBA,UAAU,CAAC,MAAM,CAAC;IAGpB,MAAMI,cAAcT,YAAY;QAC9B,IAAIM,eAAe;YACjBA,cAAcF,SAAS;QACzB;IACF,GAAG;QAACE;QAAeF;KAAM;IAEzB,qBACE,KAACM;QAAOC,MAAK;QAASC,SAASH;QAAaI,OAAOX,IAAIK;kBACrD,cAAA,KAACO;YACCD,OAAO;gBACL,GAAGX,IAAIM,gBAAgB;gBACvBO,iBAAiBX;gBACjBA,OAAOA;YACT;;;AAIR,GACA;AAEFD,YAAYa,WAAW,GAAG"}

package/dist/src/fields/TiptapEditor/features/panels/Colorpicker/Colorpicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Colorpicker.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/panels/Colorpicker/Colorpicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAQrD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,WAAW,iCAAkC,gBAAgB,sBAwDzE,CAAC"}
+{"version":3,"file":"Colorpicker.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/panels/Colorpicker/Colorpicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AASrD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,WAAW,iCAAkC,gBAAgB,sBA0DzE,CAAC"}

package/dist/src/fields/TiptapEditor/features/panels/Colorpicker/Colorpicker.js

@@ -6,6 +6,7 @@ import { Toolbar } from "../../ui/Toolbar.js";
 import { Icon } from "../../ui/Icon.js";
 import { themeColors } from "../../../lib/constants.js";
 import { Undo } from "lucide-react";
+import { twj } from "tw-to-css";
 export const ColorPicker = ({ color, onChange, onClear })=>{
     const [colorInputValue, setColorInputValue] = useState(color || "");
     const handleColorUpdate = useCallback((event)=>{
@@ -27,23 +28,23 @@ export const ColorPicker = ({ color, onChange, onClear })=>{
         onChange
     ]);
     return /*#__PURE__*/ _jsxs("div", {
-        className: "flex flex-col gap-2",
+        style: twj("flex flex-col gap-2"),
         children: [
             /*#__PURE__*/ _jsx(HexColorPicker, {
-                className: "w-full",
+                style: twj("w-full"),
                 color: color || "",
                 onChange: onChange
             }),
             /*#__PURE__*/ _jsx("input", {
                 type: "text",
-                className: "w-full p-2 text-black bg-white border rounded dark:bg-black dark:text-white border-neutral-200 dark:border-neutral-800 focus:outline-1 focus:ring-0 focus:outline-neutral-300 dark:focus:outline-neutral-700",
+                style: twj("w-full p-2 text-black bg-white border rounded dark:bg-black dark:text-white border-neutral-200 dark:border-neutral-800 focus:outline-1 focus:ring-0 focus:outline-neutral-300 dark:focus:outline-neutral-700"),
                 placeholder: "#000000",
                 value: colorInputValue,
                 onChange: handleColorUpdate,
                 onBlur: handleColorChange
             }),
             /*#__PURE__*/ _jsxs("div", {
-                className: "flex flex-wrap items-center gap-1 max-w-[15rem]",
+                style: twj("flex flex-wrap items-center gap-1 max-w-[15rem]"),
                 children: [
                     themeColors.map((currentColor)=>/*#__PURE__*/ _jsx(ColorButton, {
                             active: currentColor === color,

package/dist/src/fields/TiptapEditor/features/panels/Colorpicker/Colorpicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/Colorpicker/Colorpicker.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport { HexColorPicker } from \"react-colorful\";\nimport { ColorButton } from \"./ColorButton.js\";\nimport { Toolbar } from \"../../ui/Toolbar.js\";\nimport { Icon } from \"../../ui/Icon.js\";\nimport { themeColors } from \"../../../lib/constants.js\";\nimport { Undo } from \"lucide-react\";\n\nexport type ColorPickerProps = {\n  color?: string;\n  onChange?: (color: string) => void;\n  onClear?: () => void;\n};\n\nexport const ColorPicker = ({ color, onChange, onClear }: ColorPickerProps) => {\n  const [colorInputValue, setColorInputValue] = useState(color || \"\");\n\n  const handleColorUpdate = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setColorInputValue(event.target.value);\n    },\n    []\n  );\n\n  const handleColorChange = useCallback(() => {\n    const isCorrectColor = /^#([0-9A-F]{3}){1,2}$/i.test(colorInputValue);\n\n    if (!isCorrectColor) {\n      if (onChange) {\n        onChange(\"\");\n      }\n\n      return;\n    }\n\n    if (onChange) {\n      onChange(colorInputValue);\n    }\n  }, [colorInputValue, onChange]);\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <HexColorPicker\n        className=\"w-full\"\n        color={color || \"\"}\n        onChange={onChange}\n      />\n      <input\n        type=\"text\"\n        className=\"w-full p-2 text-black bg-white border rounded dark:bg-black dark:text-white border-neutral-200 dark:border-neutral-800 focus:outline-1 focus:ring-0 focus:outline-neutral-300 dark:focus:outline-neutral-700\"\n        placeholder=\"#000000\"\n        value={colorInputValue}\n        onChange={handleColorUpdate}\n        onBlur={handleColorChange}\n      />\n      <div className=\"flex flex-wrap items-center gap-1 max-w-[15rem]\">\n        {themeColors.map((currentColor) => (\n          <ColorButton\n            active={currentColor === color}\n            color={currentColor}\n            key={currentColor}\n            onColorChange={onChange}\n          />\n        ))}\n        <Toolbar.Button tooltip=\"Reset color to default\" onClick={onClear}>\n          <Icon icon={Undo} />\n        </Toolbar.Button>\n      </div>\n    </div>\n  );\n};\n"],"names":["React","useCallback","useState","HexColorPicker","ColorButton","Toolbar","Icon","themeColors","Undo","ColorPicker","color","onChange","onClear","colorInputValue","setColorInputValue","handleColorUpdate","event","target","value","handleColorChange","isCorrectColor","test","div","className","input","type","placeholder","onBlur","map","currentColor","active","onColorChange","Button","tooltip","onClick","icon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,OAAOA,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AACrD,SAASC,cAAc,QAAQ,iBAAiB;AAChD,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,OAAO,QAAQ,sBAAsB;AAC9C,SAASC,IAAI,QAAQ,mBAAmB;AACxC,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,IAAI,QAAQ,eAAe;AAQpC,OAAO,MAAMC,cAAc,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,OAAO,EAAoB;IACxE,MAAM,CAACC,iBAAiBC,mBAAmB,GAAGZ,SAASQ,SAAS;IAEhE,MAAMK,oBAAoBd,YACxB,CAACe;QACCF,mBAAmBE,MAAMC,MAAM,CAACC,KAAK;IACvC,GACA,EAAE;IAGJ,MAAMC,oBAAoBlB,YAAY;QACpC,MAAMmB,iBAAiB,yBAAyBC,IAAI,CAACR;QAErD,IAAI,CAACO,gBAAgB;YACnB,IAAIT,UAAU;gBACZA,SAAS;YACX;YAEA;QACF;QAEA,IAAIA,UAAU;YACZA,SAASE;QACX;IACF,GAAG;QAACA;QAAiBF;KAAS;IAE9B,qBACE,MAACW;QAAIC,WAAU;;0BACb,KAACpB;gBACCoB,WAAU;gBACVb,OAAOA,SAAS;gBAChBC,UAAUA;;0BAEZ,KAACa;gBACCC,MAAK;gBACLF,WAAU;gBACVG,aAAY;gBACZR,OAAOL;gBACPF,UAAUI;gBACVY,QAAQR;;0BAEV,MAACG;gBAAIC,WAAU;;oBACZhB,YAAYqB,GAAG,CAAC,CAACC,6BAChB,KAACzB;4BACC0B,QAAQD,iBAAiBnB;4BACzBA,OAAOmB;4BAEPE,eAAepB;2BADVkB;kCAIT,KAACxB,QAAQ2B,MAAM;wBAACC,SAAQ;wBAAyBC,SAAStB;kCACxD,cAAA,KAACN;4BAAK6B,MAAM3B;;;;;;;AAKtB,EAAE"}
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/Colorpicker/Colorpicker.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport { HexColorPicker } from \"react-colorful\";\nimport { ColorButton } from \"./ColorButton.js\";\nimport { Toolbar } from \"../../ui/Toolbar.js\";\nimport { Icon } from \"../../ui/Icon.js\";\nimport { themeColors } from \"../../../lib/constants.js\";\nimport { Undo } from \"lucide-react\";\nimport { twj } from \"tw-to-css\";\n\nexport type ColorPickerProps = {\n  color?: string;\n  onChange?: (color: string) => void;\n  onClear?: () => void;\n};\n\nexport const ColorPicker = ({ color, onChange, onClear }: ColorPickerProps) => {\n  const [colorInputValue, setColorInputValue] = useState(color || \"\");\n\n  const handleColorUpdate = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setColorInputValue(event.target.value);\n    },\n    []\n  );\n\n  const handleColorChange = useCallback(() => {\n    const isCorrectColor = /^#([0-9A-F]{3}){1,2}$/i.test(colorInputValue);\n\n    if (!isCorrectColor) {\n      if (onChange) {\n        onChange(\"\");\n      }\n\n      return;\n    }\n\n    if (onChange) {\n      onChange(colorInputValue);\n    }\n  }, [colorInputValue, onChange]);\n\n  return (\n    <div style={twj(\"flex flex-col gap-2\")}>\n      <HexColorPicker\n        style={twj(\"w-full\")}\n        color={color || \"\"}\n        onChange={onChange}\n      />\n      <input\n        type=\"text\"\n        style={twj(\n          \"w-full p-2 text-black bg-white border rounded dark:bg-black dark:text-white border-neutral-200 dark:border-neutral-800 focus:outline-1 focus:ring-0 focus:outline-neutral-300 dark:focus:outline-neutral-700\"\n        )}\n        placeholder=\"#000000\"\n        value={colorInputValue}\n        onChange={handleColorUpdate}\n        onBlur={handleColorChange}\n      />\n      <div style={twj(\"flex flex-wrap items-center gap-1 max-w-[15rem]\")}>\n        {themeColors.map((currentColor) => (\n          <ColorButton\n            active={currentColor === color}\n            color={currentColor}\n            key={currentColor}\n            onColorChange={onChange}\n          />\n        ))}\n        <Toolbar.Button tooltip=\"Reset color to default\" onClick={onClear}>\n          <Icon icon={Undo} />\n        </Toolbar.Button>\n      </div>\n    </div>\n  );\n};\n"],"names":["React","useCallback","useState","HexColorPicker","ColorButton","Toolbar","Icon","themeColors","Undo","twj","ColorPicker","color","onChange","onClear","colorInputValue","setColorInputValue","handleColorUpdate","event","target","value","handleColorChange","isCorrectColor","test","div","style","input","type","placeholder","onBlur","map","currentColor","active","onColorChange","Button","tooltip","onClick","icon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,OAAOA,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AACrD,SAASC,cAAc,QAAQ,iBAAiB;AAChD,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,OAAO,QAAQ,sBAAsB;AAC9C,SAASC,IAAI,QAAQ,mBAAmB;AACxC,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,IAAI,QAAQ,eAAe;AACpC,SAASC,GAAG,QAAQ,YAAY;AAQhC,OAAO,MAAMC,cAAc,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,OAAO,EAAoB;IACxE,MAAM,CAACC,iBAAiBC,mBAAmB,GAAGb,SAASS,SAAS;IAEhE,MAAMK,oBAAoBf,YACxB,CAACgB;QACCF,mBAAmBE,MAAMC,MAAM,CAACC,KAAK;IACvC,GACA,EAAE;IAGJ,MAAMC,oBAAoBnB,YAAY;QACpC,MAAMoB,iBAAiB,yBAAyBC,IAAI,CAACR;QAErD,IAAI,CAACO,gBAAgB;YACnB,IAAIT,UAAU;gBACZA,SAAS;YACX;YAEA;QACF;QAEA,IAAIA,UAAU;YACZA,SAASE;QACX;IACF,GAAG;QAACA;QAAiBF;KAAS;IAE9B,qBACE,MAACW;QAAIC,OAAOf,IAAI;;0BACd,KAACN;gBACCqB,OAAOf,IAAI;gBACXE,OAAOA,SAAS;gBAChBC,UAAUA;;0BAEZ,KAACa;gBACCC,MAAK;gBACLF,OAAOf,IACL;gBAEFkB,aAAY;gBACZR,OAAOL;gBACPF,UAAUI;gBACVY,QAAQR;;0BAEV,MAACG;gBAAIC,OAAOf,IAAI;;oBACbF,YAAYsB,GAAG,CAAC,CAACC,6BAChB,KAAC1B;4BACC2B,QAAQD,iBAAiBnB;4BACzBA,OAAOmB;4BAEPE,eAAepB;2BADVkB;kCAIT,KAACzB,QAAQ4B,MAAM;wBAACC,SAAQ;wBAAyBC,SAAStB;kCACxD,cAAA,KAACP;4BAAK8B,MAAM5B;;;;;;;AAKtB,EAAE"}

package/dist/src/fields/TiptapEditor/features/panels/InsideLinksEditorPanel/InsideLinksEditorPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InsideLinksEditorPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/panels/InsideLinksEditorPanel/InsideLinksEditorPanel.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,2BAA2B,GAAG;IACxC,oBAAoB,EAAE,CAAC,EACrB,SAAS,EACT,KAAK,EACL,EAAE,EACF,IAAI,EACJ,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;IACX,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,sBAAsB,wCAInC,2BAA2B,gCAgB1B,CAAC"}
+{"version":3,"file":"InsideLinksEditorPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/panels/InsideLinksEditorPanel/InsideLinksEditorPanel.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,2BAA2B,GAAG;IACxC,oBAAoB,EAAE,CAAC,EACrB,SAAS,EACT,KAAK,EACL,EAAE,EACF,IAAI,EACJ,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;IACX,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,sBAAsB,wCAInC,2BAA2B,gCAkB1B,CAAC"}

package/dist/src/fields/TiptapEditor/features/panels/InsideLinksEditorPanel/InsideLinksEditorPanel.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { twj } from "tw-to-css";
 import { ContentRelationship } from "../../../extensions/InsideLinks/InsideLink.client.js";
 import { Surface } from "../../ui/Surface.js";
 export const InsideLinksEditorPanel = ({ onRelationshipSelect, onCancel })=>{
     return /*#__PURE__*/ _jsx(Surface, {
-        className: "p-2",
+        style: twj("p-2"),
         children: /*#__PURE__*/ _jsxs("div", {
-            className: "flex flex-col items-center gap-2 p-1",
+            style: twj("flex flex-col items-center gap-2 p-1"),
             children: [
                 /*#__PURE__*/ _jsx(ContentRelationship, {
                     setRelationship: ({ id, thumbnail, title, type, url })=>{
@@ -22,7 +23,7 @@ export const InsideLinksEditorPanel = ({ onRelationshipSelect, onCancel })=>{
                     }
                 }),
                 /*#__PURE__*/ _jsx("span", {
-                    className: "mt-1 mb-0 text-sm",
+                    style: twj("mt-1 mb-0 text-sm"),
                     children: "Add Internal Link to Contents"
                 })
             ]

package/dist/src/fields/TiptapEditor/features/panels/InsideLinksEditorPanel/InsideLinksEditorPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/InsideLinksEditorPanel/InsideLinksEditorPanel.tsx"],"sourcesContent":["import { ContentRelationship } from \"../../../extensions/InsideLinks/InsideLink.client.js\";\nimport { Surface } from \"../../ui/Surface.js\";\n\nexport type InsideLinksEditorPanelProps = {\n  onRelationshipSelect: ({\n    thumbnail,\n    title,\n    id,\n    type,\n    url,\n  }: {\n    id: string;\n    type: string;\n    thumbnail: string;\n    title: string;\n    url: string;\n  }) => void;\n  onCancel: () => void;\n};\n\nexport const InsideLinksEditorPanel = ({\n  onRelationshipSelect,\n  onCancel,\n}: // initialOpenInNewTab,\nInsideLinksEditorPanelProps) => {\n  return (\n    <Surface className=\"p-2\">\n      <div className=\"flex flex-col items-center gap-2 p-1\">\n        <ContentRelationship\n          setRelationship={({ id, thumbnail, title, type, url }) => {\n            onRelationshipSelect({ id, thumbnail, title, type, url });\n          }}\n          cancelSelection={() => {\n            onCancel();\n          }}\n        />\n        <span className=\"mt-1 mb-0 text-sm\">Add Internal Link to Contents</span>\n      </div>\n    </Surface>\n  );\n};\n"],"names":["ContentRelationship","Surface","InsideLinksEditorPanel","onRelationshipSelect","onCancel","className","div","setRelationship","id","thumbnail","title","type","url","cancelSelection","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,mBAAmB,QAAQ,uDAAuD;AAC3F,SAASC,OAAO,QAAQ,sBAAsB;AAmB9C,OAAO,MAAMC,yBAAyB,CAAC,EACrCC,oBAAoB,EACpBC,QAAQ,EAEiB;IACzB,qBACE,KAACH;QAAQI,WAAU;kBACjB,cAAA,MAACC;YAAID,WAAU;;8BACb,KAACL;oBACCO,iBAAiB,CAAC,EAAEC,EAAE,EAAEC,SAAS,EAAEC,KAAK,EAAEC,IAAI,EAAEC,GAAG,EAAE;wBACnDT,qBAAqB;4BAAEK;4BAAIC;4BAAWC;4BAAOC;4BAAMC;wBAAI;oBACzD;oBACAC,iBAAiB;wBACfT;oBACF;;8BAEF,KAACU;oBAAKT,WAAU;8BAAoB;;;;;AAI5C,EAAE"}
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/InsideLinksEditorPanel/InsideLinksEditorPanel.tsx"],"sourcesContent":["import { twj } from \"tw-to-css\";\nimport { ContentRelationship } from \"../../../extensions/InsideLinks/InsideLink.client.js\";\nimport { Surface } from \"../../ui/Surface.js\";\n\nexport type InsideLinksEditorPanelProps = {\n  onRelationshipSelect: ({\n    thumbnail,\n    title,\n    id,\n    type,\n    url,\n  }: {\n    id: string;\n    type: string;\n    thumbnail: string;\n    title: string;\n    url: string;\n  }) => void;\n  onCancel: () => void;\n};\n\nexport const InsideLinksEditorPanel = ({\n  onRelationshipSelect,\n  onCancel,\n}: // initialOpenInNewTab,\nInsideLinksEditorPanelProps) => {\n  return (\n    <Surface style={twj(\"p-2\")}>\n      <div style={twj(\"flex flex-col items-center gap-2 p-1\")}>\n        <ContentRelationship\n          setRelationship={({ id, thumbnail, title, type, url }) => {\n            onRelationshipSelect({ id, thumbnail, title, type, url });\n          }}\n          cancelSelection={() => {\n            onCancel();\n          }}\n        />\n        <span style={twj(\"mt-1 mb-0 text-sm\")}>\n          Add Internal Link to Contents\n        </span>\n      </div>\n    </Surface>\n  );\n};\n"],"names":["twj","ContentRelationship","Surface","InsideLinksEditorPanel","onRelationshipSelect","onCancel","style","div","setRelationship","id","thumbnail","title","type","url","cancelSelection","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,mBAAmB,QAAQ,uDAAuD;AAC3F,SAASC,OAAO,QAAQ,sBAAsB;AAmB9C,OAAO,MAAMC,yBAAyB,CAAC,EACrCC,oBAAoB,EACpBC,QAAQ,EAEiB;IACzB,qBACE,KAACH;QAAQI,OAAON,IAAI;kBAClB,cAAA,MAACO;YAAID,OAAON,IAAI;;8BACd,KAACC;oBACCO,iBAAiB,CAAC,EAAEC,EAAE,EAAEC,SAAS,EAAEC,KAAK,EAAEC,IAAI,EAAEC,GAAG,EAAE;wBACnDT,qBAAqB;4BAAEK;4BAAIC;4BAAWC;4BAAOC;4BAAMC;wBAAI;oBACzD;oBACAC,iBAAiB;wBACfT;oBACF;;8BAEF,KAACU;oBAAKT,OAAON,IAAI;8BAAsB;;;;;AAM/C,EAAE"}

package/dist/src/fields/TiptapEditor/features/panels/LinkEditorPanel/LinkEditorPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkEditorPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/panels/LinkEditorPanel/LinkEditorPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAM9D,MAAM,MAAM,oBAAoB,GAAG;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1D,CAAC;AAEF,eAAO,MAAM,kBAAkB,oDAI5B,oBAAoB;;;;;sBAMgB,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC;sBAOlE,KAAK,CAAC,SAAS;;CAkBtB,CAAC;AAEF,eAAO,MAAM,eAAe,oDAIzB,oBAAoB,sBA2CtB,CAAC"}
+{"version":3,"file":"LinkEditorPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/panels/LinkEditorPanel/LinkEditorPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAO9D,MAAM,MAAM,oBAAoB,GAAG;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1D,CAAC;AAEF,eAAO,MAAM,kBAAkB,oDAI5B,oBAAoB;;;;;sBAMgB,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC;sBAOlE,KAAK,CAAC,SAAS;;CAkBtB,CAAC;AAEF,eAAO,MAAM,eAAe,oDAIzB,oBAAoB,sBAqDtB,CAAC"}

package/dist/src/fields/TiptapEditor/features/panels/LinkEditorPanel/LinkEditorPanel.js

@@ -5,6 +5,7 @@ import { Button } from "../../ui/Button/Button.js";
 import { Icon } from "../../ui/Icon.js";
 import { Surface } from "../../ui/Surface.js";
 import { Toggle } from "../../ui/Toggle/Toggle.js";
+import { twj } from "tw-to-css";
 export const useLinkEditorState = ({ initialUrl, initialOpenInNewTab, onSetLink })=>{
     const [url, setUrl] = useState(initialUrl || "");
     const [openInNewTab, setOpenInNewTab] = useState(initialOpenInNewTab || false);
@@ -42,12 +43,12 @@ export const LinkEditorPanel = ({ onSetLink, initialOpenInNewTab, initialUrl })=
         initialUrl
     });
     return /*#__PURE__*/ _jsx(Surface, {
-        className: "p-2",
+        style: twj("p-2"),
         children: /*#__PURE__*/ _jsxs("div", {
-            className: "flex items-center gap-2",
+            style: twj("flex items-center gap-2"),
             children: [
                 /*#__PURE__*/ _jsxs("label", {
-                    className: "flex items-center gap-2 p-2 rounded-lg bg-neutral-100 dark:bg-neutral-900 cursor-text",
+                    style: twj("flex items-center gap-2 p-2 rounded-lg bg-neutral-100 dark:bg-neutral-900 cursor-text"),
                     children: [
                         /*#__PURE__*/ _jsx(Icon, {
                             icon: Link,
@@ -55,7 +56,7 @@ export const LinkEditorPanel = ({ onSetLink, initialOpenInNewTab, initialUrl })=
                         }),
                         /*#__PURE__*/ _jsx("input", {
                             type: "url",
-                            className: "flex-1 bg-transparent outline-none min-w-[12rem] text-black text-sm dark:text-white",
+                            style: twj("flex-1 bg-transparent outline-none min-w-[12rem] text-black text-sm dark:text-white"),
                             placeholder: "Enter URL",
                             value: state.url,
                             onChange: state.onChange
@@ -73,9 +74,9 @@ export const LinkEditorPanel = ({ onSetLink, initialOpenInNewTab, initialUrl })=
                     children: "Set Link"
                 }),
                 /*#__PURE__*/ _jsx("div", {
-                    className: "mt-3",
+                    style: twj("mt-3"),
                     children: /*#__PURE__*/ _jsxs("label", {
-                        className: "flex items-center justify-start gap-2 text-sm font-semibold cursor-pointer select-none text-neutral-500 dark:text-neutral-400",
+                        style: twj("flex items-center justify-start gap-2 text-sm font-semibold cursor-pointer select-none text-neutral-500 dark:text-neutral-400"),
                         children: [
                             "Open in new tab",
                             /*#__PURE__*/ _jsx(Toggle, {