@frontify/fondue 12.0.0-beta.67 → 12.0.0-beta.68

package/dist/components/RichTextEditor/RichTextEditor.d.ts

@@ -13,7 +13,7 @@ export declare type RichTextEditorProps = {
     padding?: PaddingSizes;
     position?: Position;
     plugins?: PluginComposer;
-    onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLDivElement>, value: TreeOfNodes | null) => void;
     onValueChanged?: (value: TreeOfNodes | null) => void;
     border?: boolean;
     updateValueOnChange?: boolean;

package/dist/components/RichTextEditor/RichTextEditor.es.js

@@ -14,34 +14,34 @@ const k = {
   position: "relative",
   height: "0"
 }, U = ({
-  id: m,
+  id: s,
   value: i,
-  placeholder: s = "",
-  readonly: c = !1,
-  designTokens: d = v,
-  onTextChange: f,
-  onBlur: a,
-  padding: p = O.None,
-  position: u = w.FLOATING,
-  plugins: E = x,
-  updateValueOnChange: g = !1,
-  onKeyDown: n,
-  onValueChanged: P,
-  border: R = !0
+  placeholder: c = "",
+  readonly: d = !1,
+  designTokens: f = v,
+  onTextChange: p,
+  onBlur: n,
+  padding: u = O.None,
+  position: E = w.FLOATING,
+  plugins: g = x,
+  updateValueOnChange: P = !1,
+  onKeyDown: a,
+  onValueChanged: R,
+  border: T = !0
 }) => {
-  const r = L(m), { localValue: T, onChange: h, memoizedValue: S, config: o } = C({
+  const r = L(s), { localValue: l, onChange: h, memoizedValue: S, config: o } = C({
     editorId: r,
     initialValue: i,
-    onTextChange: f,
-    plugins: E,
-    onValueChanged: P
+    onTextChange: p,
+    plugins: g,
+    onValueChanged: R
   }), V = y({
-    placeholder: s,
-    renderPlaceholder: ({ children: e, attributes: l }) => {
+    placeholder: c,
+    renderPlaceholder: ({ children: e, attributes: m }) => {
       const b = {
-        ...l,
+        ...m,
         style: {
-          ...l.style,
+          ...m.style,
           ...k
         }
       };
@@ -49,22 +49,22 @@ const k = {
         ...b
       }, e);
     },
-    readOnly: c,
-    onBlur: () => a && a(JSON.stringify(T.current)),
-    className: p,
+    readOnly: d,
+    onBlur: () => n && n(JSON.stringify(l.current)),
+    className: u,
     onKeyDown: (e) => {
-      e.code === "Tab" && I(), n && n(e);
+      e.code === "Tab" && I(), a && a(e, l.current);
     }
   });
   return /* @__PURE__ */ t.createElement(N, {
-    value: { designTokens: d, position: u, border: R }
+    value: { designTokens: f, position: E, border: T }
   }, /* @__PURE__ */ t.createElement(A, {
     id: r,
     onChange: h,
     editableProps: V.current,
     plugins: o.create(),
     initialValue: S
-  }, o.toolbar(), o.inline(), g && /* @__PURE__ */ t.createElement(z, {
+  }, o.toolbar(), o.inline(), P && /* @__PURE__ */ t.createElement(z, {
     value: D({ editorId: r, raw: i })
   })));
 };

package/dist/components/RichTextEditor/RichTextEditor.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.es.js","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { KeyboardEvent, useRef } from 'react';\nimport { Plate } from '@udecode/plate';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { EditableProps, RenderPlaceholderProps } from 'slate-react/dist/components/editable';\nimport { useEditorState } from './hooks';\nimport { RichTextEditorProvider } from './context/RichTextEditorContext';\nimport { DesignTokens, PaddingSizes, TreeOfNodes } from './types';\nimport { defaultDesignTokens } from './utils/defaultDesignTokens';\nimport { Position } from './EditorPositioningWrapper';\nimport { PluginComposer, defaultPlugins } from './Plugins';\nimport { forceToBlurActiveElement } from './helpers';\nimport { parseRawValue } from './utils';\nimport { ContentReplacement } from './ContentReplacement';\n\nconst PLACEHOLDER_STYLES: RenderPlaceholderProps['attributes']['style'] = {\n    position: 'relative',\n    height: '0',\n};\n\nexport type RichTextEditorProps = {\n    id?: string;\n    placeholder?: string;\n    value?: string;\n    onTextChange?: (value: string) => void;\n    onBlur?: (value: string) => void;\n    readonly?: boolean;\n    designTokens?: DesignTokens;\n    padding?: PaddingSizes;\n    position?: Position;\n    plugins?: PluginComposer;\n    onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;\n    onValueChanged?: (value: TreeOfNodes | null) => void;\n    border?: boolean;\n    updateValueOnChange?: boolean; // Only set to true when you are sure that performance isn't an issue\n};\n\nexport const RichTextEditor = ({\n    id,\n    value,\n    placeholder = '',\n    readonly = false,\n    designTokens = defaultDesignTokens,\n    onTextChange,\n    onBlur,\n    padding = PaddingSizes.None,\n    position = Position.FLOATING,\n    plugins = defaultPlugins,\n    updateValueOnChange = false,\n    onKeyDown,\n    onValueChanged,\n    border = true,\n}: RichTextEditorProps) => {\n    const editorId = useMemoizedId(id);\n    const { localValue, onChange, memoizedValue, config } = useEditorState({\n        editorId,\n        initialValue: value,\n        onTextChange,\n        plugins,\n        onValueChanged,\n    });\n\n    const editableProps = useRef<EditableProps>({\n        placeholder,\n        renderPlaceholder: ({ children, attributes }) => {\n            const mergedAttributes = {\n                ...attributes,\n                style: {\n                    ...attributes.style,\n                    ...PLACEHOLDER_STYLES,\n                },\n            };\n            return <span {...mergedAttributes}>{children}</span>;\n        },\n        readOnly: readonly,\n        onBlur: () => onBlur && onBlur(JSON.stringify(localValue.current)),\n        className: padding,\n        onKeyDown: (event) => {\n            if (event.code === 'Tab') {\n                // Forcing a blur event because of accessibility\n                forceToBlurActiveElement();\n            }\n\n            onKeyDown && onKeyDown(event);\n        },\n    });\n\n    return (\n        <RichTextEditorProvider value={{ designTokens, position, border }}>\n            <Plate\n                id={editorId}\n                onChange={onChange}\n                editableProps={editableProps.current}\n                plugins={config.create()}\n                initialValue={memoizedValue}\n            >\n                {config.toolbar()}\n                {config.inline()}\n                {updateValueOnChange && <ContentReplacement value={parseRawValue({ editorId, raw: value })} />}\n            </Plate>\n        </RichTextEditorProvider>\n    );\n};\n"],"names":["PLACEHOLDER_STYLES","RichTextEditor","id","value","placeholder","readonly","designTokens","defaultDesignTokens","onTextChange","onBlur","padding","PaddingSizes","position","Position","plugins","defaultPlugins","updateValueOnChange","onKeyDown","onValueChanged","border","editorId","useMemoizedId","localValue","onChange","memoizedValue","config","useEditorState","editableProps","useRef","children","attributes","mergedAttributes","React","event","forceToBlurActiveElement","RichTextEditorProvider","Plate","ContentReplacement","parseRawValue"],"mappings":";;;;;;;;;;;;AAgBA,MAAMA,IAAoE;AAAA,EACtE,UAAU;AAAA,EACV,QAAQ;AACZ,GAmBaC,IAAiB,CAAC;AAAA,EAC3B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAeC;AAAA,EACf,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC,IAAUC,EAAa;AAAA,EACvB,UAAAC,IAAWC,EAAS;AAAA,EACpB,SAAAC,IAAUC;AAAA,EACV,qBAAAC,IAAsB;AAAA,EACtB,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,QAAAC,IAAS;AACb,MAA2B;AACjB,QAAAC,IAAWC,EAAcnB,CAAE,GAC3B,EAAE,YAAAoB,GAAY,UAAAC,GAAU,eAAAC,GAAe,QAAAC,EAAA,IAAWC,EAAe;AAAA,IACnE,UAAAN;AAAA,IACA,cAAcjB;AAAA,IACd,cAAAK;AAAA,IACA,SAAAM;AAAA,IACA,gBAAAI;AAAA,EAAA,CACH,GAEKS,IAAgBC,EAAsB;AAAA,IACxC,aAAAxB;AAAA,IACA,mBAAmB,CAAC,EAAE,UAAAyB,GAAU,YAAAC,QAAiB;AAC7C,YAAMC,IAAmB;AAAA,QACrB,GAAGD;AAAA,QACH,OAAO;AAAA,UACH,GAAGA,EAAW;AAAA,UACd,GAAG9B;AAAA,QACP;AAAA,MAAA;AAEJ,aAAQ,gBAAAgC,EAAA,cAAA,QAAA;AAAA,QAAM,GAAGD;AAAA,MAAA,GAAmBF,CAAS;AAAA,IACjD;AAAA,IACA,UAAUxB;AAAA,IACV,QAAQ,MAAMI,KAAUA,EAAO,KAAK,UAAUa,EAAW,OAAO,CAAC;AAAA,IACjE,WAAWZ;AAAA,IACX,WAAW,CAACuB,MAAU;AACd,MAAAA,EAAM,SAAS,SAEUC,KAG7BjB,KAAaA,EAAUgB,CAAK;AAAA,IAChC;AAAA,EAAA,CACH;AAED,SACK,gBAAAD,EAAA,cAAAG,GAAA;AAAA,IAAuB,OAAO,EAAE,cAAA7B,GAAc,UAAAM,GAAU,QAAAO,EAAO;AAAA,EAAA,GAC3D,gBAAAa,EAAA,cAAAI,GAAA;AAAA,IACG,IAAIhB;AAAA,IACJ,UAAAG;AAAA,IACA,eAAeI,EAAc;AAAA,IAC7B,SAASF,EAAO,OAAO;AAAA,IACvB,cAAcD;AAAA,EAAA,GAEbC,EAAO,QAAQ,GACfA,EAAO,OAAO,GACdT,KAAwB,gBAAAgB,EAAA,cAAAK,GAAA;AAAA,IAAmB,OAAOC,EAAc,EAAE,UAAAlB,GAAU,KAAKjB,GAAO;AAAA,EAAG,CAAA,CAChG,CACJ;AAER;"}
+{"version":3,"file":"RichTextEditor.es.js","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { KeyboardEvent, useRef } from 'react';\nimport { Plate } from '@udecode/plate';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { EditableProps, RenderPlaceholderProps } from 'slate-react/dist/components/editable';\nimport { useEditorState } from './hooks';\nimport { RichTextEditorProvider } from './context/RichTextEditorContext';\nimport { DesignTokens, PaddingSizes, TreeOfNodes } from './types';\nimport { defaultDesignTokens } from './utils/defaultDesignTokens';\nimport { Position } from './EditorPositioningWrapper';\nimport { PluginComposer, defaultPlugins } from './Plugins';\nimport { forceToBlurActiveElement } from './helpers';\nimport { parseRawValue } from './utils';\nimport { ContentReplacement } from './ContentReplacement';\n\nconst PLACEHOLDER_STYLES: RenderPlaceholderProps['attributes']['style'] = {\n    position: 'relative',\n    height: '0',\n};\n\nexport type RichTextEditorProps = {\n    id?: string;\n    placeholder?: string;\n    value?: string;\n    onTextChange?: (value: string) => void;\n    onBlur?: (value: string) => void;\n    readonly?: boolean;\n    designTokens?: DesignTokens;\n    padding?: PaddingSizes;\n    position?: Position;\n    plugins?: PluginComposer;\n    onKeyDown?: (event: KeyboardEvent<HTMLDivElement>, value: TreeOfNodes | null) => void;\n    onValueChanged?: (value: TreeOfNodes | null) => void;\n    border?: boolean;\n    updateValueOnChange?: boolean; // Only set to true when you are sure that performance isn't an issue\n};\n\nexport const RichTextEditor = ({\n    id,\n    value,\n    placeholder = '',\n    readonly = false,\n    designTokens = defaultDesignTokens,\n    onTextChange,\n    onBlur,\n    padding = PaddingSizes.None,\n    position = Position.FLOATING,\n    plugins = defaultPlugins,\n    updateValueOnChange = false,\n    onKeyDown,\n    onValueChanged,\n    border = true,\n}: RichTextEditorProps) => {\n    const editorId = useMemoizedId(id);\n    const { localValue, onChange, memoizedValue, config } = useEditorState({\n        editorId,\n        initialValue: value,\n        onTextChange,\n        plugins,\n        onValueChanged,\n    });\n\n    const editableProps = useRef<EditableProps>({\n        placeholder,\n        renderPlaceholder: ({ children, attributes }) => {\n            const mergedAttributes = {\n                ...attributes,\n                style: {\n                    ...attributes.style,\n                    ...PLACEHOLDER_STYLES,\n                },\n            };\n            return <span {...mergedAttributes}>{children}</span>;\n        },\n        readOnly: readonly,\n        onBlur: () => onBlur && onBlur(JSON.stringify(localValue.current)),\n        className: padding,\n        onKeyDown: (event) => {\n            if (event.code === 'Tab') {\n                // Forcing a blur event because of accessibility\n                forceToBlurActiveElement();\n            }\n\n            onKeyDown && onKeyDown(event, localValue.current);\n        },\n    });\n\n    return (\n        <RichTextEditorProvider value={{ designTokens, position, border }}>\n            <Plate\n                id={editorId}\n                onChange={onChange}\n                editableProps={editableProps.current}\n                plugins={config.create()}\n                initialValue={memoizedValue}\n            >\n                {config.toolbar()}\n                {config.inline()}\n                {updateValueOnChange && <ContentReplacement value={parseRawValue({ editorId, raw: value })} />}\n            </Plate>\n        </RichTextEditorProvider>\n    );\n};\n"],"names":["PLACEHOLDER_STYLES","RichTextEditor","id","value","placeholder","readonly","designTokens","defaultDesignTokens","onTextChange","onBlur","padding","PaddingSizes","position","Position","plugins","defaultPlugins","updateValueOnChange","onKeyDown","onValueChanged","border","editorId","useMemoizedId","localValue","onChange","memoizedValue","config","useEditorState","editableProps","useRef","children","attributes","mergedAttributes","React","event","forceToBlurActiveElement","RichTextEditorProvider","Plate","ContentReplacement","parseRawValue"],"mappings":";;;;;;;;;;;;AAgBA,MAAMA,IAAoE;AAAA,EACtE,UAAU;AAAA,EACV,QAAQ;AACZ,GAmBaC,IAAiB,CAAC;AAAA,EAC3B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAeC;AAAA,EACf,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC,IAAUC,EAAa;AAAA,EACvB,UAAAC,IAAWC,EAAS;AAAA,EACpB,SAAAC,IAAUC;AAAA,EACV,qBAAAC,IAAsB;AAAA,EACtB,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,QAAAC,IAAS;AACb,MAA2B;AACjB,QAAAC,IAAWC,EAAcnB,CAAE,GAC3B,EAAE,YAAAoB,GAAY,UAAAC,GAAU,eAAAC,GAAe,QAAAC,EAAA,IAAWC,EAAe;AAAA,IACnE,UAAAN;AAAA,IACA,cAAcjB;AAAA,IACd,cAAAK;AAAA,IACA,SAAAM;AAAA,IACA,gBAAAI;AAAA,EAAA,CACH,GAEKS,IAAgBC,EAAsB;AAAA,IACxC,aAAAxB;AAAA,IACA,mBAAmB,CAAC,EAAE,UAAAyB,GAAU,YAAAC,QAAiB;AAC7C,YAAMC,IAAmB;AAAA,QACrB,GAAGD;AAAA,QACH,OAAO;AAAA,UACH,GAAGA,EAAW;AAAA,UACd,GAAG9B;AAAA,QACP;AAAA,MAAA;AAEJ,aAAQ,gBAAAgC,EAAA,cAAA,QAAA;AAAA,QAAM,GAAGD;AAAA,MAAA,GAAmBF,CAAS;AAAA,IACjD;AAAA,IACA,UAAUxB;AAAA,IACV,QAAQ,MAAMI,KAAUA,EAAO,KAAK,UAAUa,EAAW,OAAO,CAAC;AAAA,IACjE,WAAWZ;AAAA,IACX,WAAW,CAACuB,MAAU;AACd,MAAAA,EAAM,SAAS,SAEUC,KAGhBjB,KAAAA,EAAUgB,GAAOX,EAAW,OAAO;AAAA,IACpD;AAAA,EAAA,CACH;AAED,SACK,gBAAAU,EAAA,cAAAG,GAAA;AAAA,IAAuB,OAAO,EAAE,cAAA7B,GAAc,UAAAM,GAAU,QAAAO,EAAO;AAAA,EAAA,GAC3D,gBAAAa,EAAA,cAAAI,GAAA;AAAA,IACG,IAAIhB;AAAA,IACJ,UAAAG;AAAA,IACA,eAAeI,EAAc;AAAA,IAC7B,SAASF,EAAO,OAAO;AAAA,IACvB,cAAcD;AAAA,EAAA,GAEbC,EAAO,QAAQ,GACfA,EAAO,OAAO,GACdT,KAAwB,gBAAAgB,EAAA,cAAAK,GAAA;AAAA,IAAmB,OAAOC,EAAc,EAAE,UAAAlB,GAAU,KAAKjB,GAAO;AAAA,EAAG,CAAA,CAChG,CACJ;AAER;"}

package/dist/index.cjs.js

@@ -70,7 +70,7 @@
             font-weight: bold;
             line-height: 10px;
             border-radius: 2px;
-        `]},bE0=e=>t.default.createElement(w.MentionInputElement,{...e,styles:kE0});class zE0 extends E0{constructor(l=w.ELEMENT_MENTION_INPUT,c=bE0){super(l,c)}}class TE0 extends N0{constructor(l){super(vE0,{markupElement:new xE0().setNodeWithMentionable(l.mentionableItems),markupInputElement:new zE0,...l})}inline(){var l;return yE0(((l=this.props)==null?void 0:l.mentionableItems)||[])}plugins(){return[w.createComboboxPlugin(),w.createMentionPlugin(RE0)]}}const kI=new hN;kI.setPlugin(new DN,new BN).setPlugin(new EN).setPlugin([new pN,new bN,new zN,new HN,new VN,new QN,new kN],[new SN,new ZN,new yN,new NN,new MN,new xN,new CN,new YN,new GN]);const VT=new hN;VT.setPlugin([new DN,new BN],[new EN],[new pN,new bN,new zN,new HN,new VN,new QN,new kN],[new SN,new ZN,new yN,new NN,new MN,new xN,new CN,new TT,new YN,new GN]);class Ne{static getInstance(){return this.editor===void 0&&this.init(),this.editor}static init(l=he(),c=kI){const o=gy(l,c);return this.editor=w.createPlateEditor({id:l,plugins:o.create()}),this}}y0(Ne,"editor"),y0(Ne,"editorId",he());const HE0=e=>new DOMParser().parseFromString(e,"text/html").body.children.length>0,jE0=e=>HE0(e)?e:`<p>${e}</p>`,DT=[{type:w.ELEMENT_PARAGRAPH,children:[{text:""}]}],bI=({editorId:e="parseRawValue",raw:l,plugins:c})=>{const o=Ne.init(`${e}_parseRawValue`,c).getInstance();let i=DT;if(!l)return i;try{i=JSON.parse(l)}catch{const u=l.trim().replace(/>\s+</g,"><"),s=jE0(u),d=w.deserializeHtml(o,{element:s,stripWhitespace:!0});d&&(i=d)}return o.children=i,w.normalizeEditor(o,{force:!0}),o.children},f2=e=>e&&typeof e=="object"&&!Array.isArray(e),Ey=(e,l)=>{if(!f2(e)||!f2(l))return{};const c=Object.assign({},e);for(const o of Object.keys(l)){if(o in e&&f2(l[o])){c[o]=Ey(e[o],l[o]);continue}Object.assign(c,{[o]:l[o]})}return c},VE0=e=>e.hasOwnProperty("type")&&typeof e.type=="string"&&e.type.length>0,DE0=e=>e.hasOwnProperty("children")&&Array.isArray(e.children)&&e.children.length===1,BE0=e=>typeof e=="object"&&e.hasOwnProperty("text")&&typeof e.text=="string"&&e.text.length===0,FE0=e=>DE0(e)&&BE0(e.children[0]),PE0=e=>{if(!e)return!0;if(Array.isArray(e)&&e.length<2){if(e.length===0)return!0;const l=e[0];if(VE0(l)&&FE0(l))return!0}return!1},OE0=({children:e,editorWidth:l,toolbarButtonGroups:c=[]})=>{const[o,i]=a.useState();return a.useEffect(()=>{const u=bb(c);u>0&&i(u+c.length+kb)},[l,c]),t.default.createElement(w.BalloonToolbar,{floatingOptions:{middleware:[w.flip(),w.shift()]},styles:{root:{border:"none",background:"#ffffff",width:o}}},t.default.createElement("div",{"data-test-id":"toolbar-floating",className:"tw-rounded tw-min-h-12 tw-border tw-border-line tw-shadow-lg tw-bg-base tw-divide-y tw-divide-line tw-flex tw-flex-wrap"},e))},BT={[s0.BOTTOM]:{PlateWrapperClassNames:"tw-relative tw-w-full tw-flex tw-flex-col",ToolbarWrapper:do0},[s0.FLOATING]:{PlateWrapperClassNames:"tw-relative tw-w-full",ToolbarWrapper:OE0},[s0.TOP]:{PlateWrapperClassNames:"tw-relative tw-w-full tw-flex tw-flex-col-reverse",ToolbarWrapper:mo0}},UE0=(e,l)=>{const c=BT[e].PlateWrapperClassNames;return I([c,l&&"tw-border tw-border-line tw-rounded"])},FT=()=>{var e;(e=document.activeElement)==null||e.blur()},QE0=({children:e,apply:l})=>{for(const c of e)l({type:"remove_node",path:[0],node:c})},YE0=({value:e})=>{const l=w.usePlateEditorRef();return a.useEffect(()=>{e&&(QE0(l),w.insertNodes(l,e))},[l,e]),null},GE0={position:"relative",height:"0"},WE0=({id:e,value:l,placeholder:c="",readonly:o=!1,designTokens:i=g1,onTextChange:u,onBlur:s,padding:d=wN.None,position:m=s0.FLOATING,plugins:f=kI,updateValueOnChange:L=!1,onKeyDown:h,onValueChanged:v,border:A=!0})=>{const g=T0(e),{localValue:E,onChange:C,memoizedValue:M,config:x}=vo0({editorId:g,initialValue:l,onTextChange:u,plugins:f,onValueChanged:v}),S=a.useRef({placeholder:c,renderPlaceholder:({children:z,attributes:B})=>{const j={...B,style:{...B.style,...GE0}};return t.default.createElement("span",{...j},z)},readOnly:o,onBlur:()=>s&&s(JSON.stringify(E.current)),className:d,onKeyDown:z=>{z.code==="Tab"&&FT(),h&&h(z)}});return t.default.createElement(Co0,{value:{designTokens:i,position:m,border:A}},t.default.createElement(w.Plate,{id:g,onChange:C,editableProps:S.current,plugins:x.create(),initialValue:M},x.toolbar(),x.inline(),L&&t.default.createElement(YE0,{value:bI({editorId:g,raw:l})})))},KE0=(e,l)=>(l.strikethrough&&l.bold&&l.italic?e=y1(e,"~~***"):l.bold&&l.italic?e=y1(e,"***"):(l.bold&&(e=y1(e,"**")),l.italic&&(e=y1(e,"_")),l.strikethrough&&(e=y1(e,"~~")),l.code&&(e=y1(e,"`"))),e),FR=e=>e.split("").reverse().join("");function y1(e,l){const c=e.trim(),o=c,i=`${l}${o}${FR(l)}`;if(o.length===e.length)return i;const u=l+o+FR(l);return e.replace(c,u)}const P1=e=>!("type"in e),qE0=e=>`@[${e.category}:${e.key}]`,$E0=(e,l,c,o)=>{const i=c&&c.parentType===e.olList,u=c.children.length===1&&P1(c.children[0]);let s="";for(let d=0;o>d;d++)i?s+="   ":s+="  ";return`${s}${i?"1.":"-"} ${l}${u?`
+        `]},bE0=e=>t.default.createElement(w.MentionInputElement,{...e,styles:kE0});class zE0 extends E0{constructor(l=w.ELEMENT_MENTION_INPUT,c=bE0){super(l,c)}}class TE0 extends N0{constructor(l){super(vE0,{markupElement:new xE0().setNodeWithMentionable(l.mentionableItems),markupInputElement:new zE0,...l})}inline(){var l;return yE0(((l=this.props)==null?void 0:l.mentionableItems)||[])}plugins(){return[w.createComboboxPlugin(),w.createMentionPlugin(RE0)]}}const kI=new hN;kI.setPlugin(new DN,new BN).setPlugin(new EN).setPlugin([new pN,new bN,new zN,new HN,new VN,new QN,new kN],[new SN,new ZN,new yN,new NN,new MN,new xN,new CN,new YN,new GN]);const VT=new hN;VT.setPlugin([new DN,new BN],[new EN],[new pN,new bN,new zN,new HN,new VN,new QN,new kN],[new SN,new ZN,new yN,new NN,new MN,new xN,new CN,new TT,new YN,new GN]);class Ne{static getInstance(){return this.editor===void 0&&this.init(),this.editor}static init(l=he(),c=kI){const o=gy(l,c);return this.editor=w.createPlateEditor({id:l,plugins:o.create()}),this}}y0(Ne,"editor"),y0(Ne,"editorId",he());const HE0=e=>new DOMParser().parseFromString(e,"text/html").body.children.length>0,jE0=e=>HE0(e)?e:`<p>${e}</p>`,DT=[{type:w.ELEMENT_PARAGRAPH,children:[{text:""}]}],bI=({editorId:e="parseRawValue",raw:l,plugins:c})=>{const o=Ne.init(`${e}_parseRawValue`,c).getInstance();let i=DT;if(!l)return i;try{i=JSON.parse(l)}catch{const u=l.trim().replace(/>\s+</g,"><"),s=jE0(u),d=w.deserializeHtml(o,{element:s,stripWhitespace:!0});d&&(i=d)}return o.children=i,w.normalizeEditor(o,{force:!0}),o.children},f2=e=>e&&typeof e=="object"&&!Array.isArray(e),Ey=(e,l)=>{if(!f2(e)||!f2(l))return{};const c=Object.assign({},e);for(const o of Object.keys(l)){if(o in e&&f2(l[o])){c[o]=Ey(e[o],l[o]);continue}Object.assign(c,{[o]:l[o]})}return c},VE0=e=>e.hasOwnProperty("type")&&typeof e.type=="string"&&e.type.length>0,DE0=e=>e.hasOwnProperty("children")&&Array.isArray(e.children)&&e.children.length===1,BE0=e=>typeof e=="object"&&e.hasOwnProperty("text")&&typeof e.text=="string"&&e.text.length===0,FE0=e=>DE0(e)&&BE0(e.children[0]),PE0=e=>{if(!e)return!0;if(Array.isArray(e)&&e.length<2){if(e.length===0)return!0;const l=e[0];if(VE0(l)&&FE0(l))return!0}return!1},OE0=({children:e,editorWidth:l,toolbarButtonGroups:c=[]})=>{const[o,i]=a.useState();return a.useEffect(()=>{const u=bb(c);u>0&&i(u+c.length+kb)},[l,c]),t.default.createElement(w.BalloonToolbar,{floatingOptions:{middleware:[w.flip(),w.shift()]},styles:{root:{border:"none",background:"#ffffff",width:o}}},t.default.createElement("div",{"data-test-id":"toolbar-floating",className:"tw-rounded tw-min-h-12 tw-border tw-border-line tw-shadow-lg tw-bg-base tw-divide-y tw-divide-line tw-flex tw-flex-wrap"},e))},BT={[s0.BOTTOM]:{PlateWrapperClassNames:"tw-relative tw-w-full tw-flex tw-flex-col",ToolbarWrapper:do0},[s0.FLOATING]:{PlateWrapperClassNames:"tw-relative tw-w-full",ToolbarWrapper:OE0},[s0.TOP]:{PlateWrapperClassNames:"tw-relative tw-w-full tw-flex tw-flex-col-reverse",ToolbarWrapper:mo0}},UE0=(e,l)=>{const c=BT[e].PlateWrapperClassNames;return I([c,l&&"tw-border tw-border-line tw-rounded"])},FT=()=>{var e;(e=document.activeElement)==null||e.blur()},QE0=({children:e,apply:l})=>{for(const c of e)l({type:"remove_node",path:[0],node:c})},YE0=({value:e})=>{const l=w.usePlateEditorRef();return a.useEffect(()=>{e&&(QE0(l),w.insertNodes(l,e))},[l,e]),null},GE0={position:"relative",height:"0"},WE0=({id:e,value:l,placeholder:c="",readonly:o=!1,designTokens:i=g1,onTextChange:u,onBlur:s,padding:d=wN.None,position:m=s0.FLOATING,plugins:f=kI,updateValueOnChange:L=!1,onKeyDown:h,onValueChanged:v,border:A=!0})=>{const g=T0(e),{localValue:E,onChange:C,memoizedValue:M,config:x}=vo0({editorId:g,initialValue:l,onTextChange:u,plugins:f,onValueChanged:v}),S=a.useRef({placeholder:c,renderPlaceholder:({children:z,attributes:B})=>{const j={...B,style:{...B.style,...GE0}};return t.default.createElement("span",{...j},z)},readOnly:o,onBlur:()=>s&&s(JSON.stringify(E.current)),className:d,onKeyDown:z=>{z.code==="Tab"&&FT(),h&&h(z,E.current)}});return t.default.createElement(Co0,{value:{designTokens:i,position:m,border:A}},t.default.createElement(w.Plate,{id:g,onChange:C,editableProps:S.current,plugins:x.create(),initialValue:M},x.toolbar(),x.inline(),L&&t.default.createElement(YE0,{value:bI({editorId:g,raw:l})})))},KE0=(e,l)=>(l.strikethrough&&l.bold&&l.italic?e=y1(e,"~~***"):l.bold&&l.italic?e=y1(e,"***"):(l.bold&&(e=y1(e,"**")),l.italic&&(e=y1(e,"_")),l.strikethrough&&(e=y1(e,"~~")),l.code&&(e=y1(e,"`"))),e),FR=e=>e.split("").reverse().join("");function y1(e,l){const c=e.trim(),o=c,i=`${l}${o}${FR(l)}`;if(o.length===e.length)return i;const u=l+o+FR(l);return e.replace(c,u)}const P1=e=>!("type"in e),qE0=e=>`@[${e.category}:${e.key}]`,$E0=(e,l,c,o)=>{const i=c&&c.parentType===e.olList,u=c.children.length===1&&P1(c.children[0]);let s="";for(let d=0;o>d;d++)i?s+="   ":s+="  ";return`${s}${i?"1.":"-"} ${l}${u?`
 `:""}`},XE0=(e,l,c,o)=>(o===l.codeBlock||c===l.codeBlock||(e=se.default(e)),e),JE0=(e,l,c,o,i,u)=>{var d,m;const s=e.nodeTypes;switch(i){case s.heading[1]:return`# ${l}
 `;case s.heading[2]:return`## ${l}
 `;case s.heading[3]:return`### ${l}