@payloadcms/richtext-lexical 3.68.0-internal-debug.56c9b68 → 3.68.0-internal-debug.185cc5f

package/dist/features/blocks/premade/CodeBlock/Component/Block.js

@@ -1,6 +1,6 @@
 'use client';
-
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './index.scss';
 import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import { ChevronIcon, Combobox, CopyToClipboard, PopupList, RenderFields, useForm, useFormFields, useTranslation } from '@payloadcms/ui';
 import React from 'react';
@@ -10,105 +10,102 @@ import { Collapse } from './Collapse/index.js';
 import { defaultLanguages } from './defaultLanguages.js';
 import { FloatingCollapse } from './FloatingCollapse/index.js';
 const baseClass = 'payload-richtext-code-block';
-export const CodeBlockBlockComponent = args => {
-  const {
-    languages: languagesFromProps
-  } = args;
-  const languages = languagesFromProps || defaultLanguages;
-  const {
-    BlockCollapsible,
-    formSchema,
-    RemoveButton
-  } = useBlockComponentContext();
-  const {
-    setModified
-  } = useForm();
-  const {
-    t
-  } = useTranslation();
-  const {
-    codeField
-  } = useFormFields(([fields]) => ({
-    codeField: fields?.code
-  }));
-  const {
-    selectedLanguageField,
-    setSelectedLanguage
-  } = useFormFields(([fields_0, dispatch]) => ({
-    selectedLanguageField: fields_0?.language,
-    setSelectedLanguage: language => {
-      dispatch({
-        type: 'UPDATE',
-        path: 'language',
-        value: language
-      });
-      setModified(true);
-    }
-  }));
-  const selectedLanguageLabel = languages[selectedLanguageField?.value];
-  const isEditable = useLexicalEditable();
-  const languageEntries = React.useMemo(() => {
-    return Object.entries(languages).map(([languageCode, languageLabel]) => ({
-      name: `${languageCode} ${languageLabel}`,
-      Component: /*#__PURE__*/_jsx(PopupList.Button, {
-        active: false,
-        disabled: false,
-        onClick: () => {
-          setSelectedLanguage(languageCode);
+export const CodeBlockBlockComponent = (args)=>{
+    const { languages: languagesFromProps } = args;
+    const languages = languagesFromProps || defaultLanguages;
+    const { BlockCollapsible, formSchema, RemoveButton } = useBlockComponentContext();
+    const { setModified } = useForm();
+    const { t } = useTranslation();
+    const { codeField } = useFormFields(([fields])=>({
+            codeField: fields?.code
+        }));
+    const { selectedLanguageField, setSelectedLanguage } = useFormFields(([fields, dispatch])=>({
+            selectedLanguageField: fields?.language,
+            setSelectedLanguage: (language)=>{
+                dispatch({
+                    type: 'UPDATE',
+                    path: 'language',
+                    value: language
+                });
+                setModified(true);
+            }
+        }));
+    const selectedLanguageLabel = languages[selectedLanguageField?.value];
+    const isEditable = useLexicalEditable();
+    const languageEntries = React.useMemo(()=>{
+        return Object.entries(languages).map(([languageCode, languageLabel])=>({
+                name: `${languageCode} ${languageLabel}`,
+                Component: /*#__PURE__*/ _jsx(PopupList.Button, {
+                    active: false,
+                    disabled: false,
+                    onClick: ()=>{
+                        setSelectedLanguage(languageCode);
+                    },
+                    children: /*#__PURE__*/ _jsx("span", {
+                        className: `${baseClass}__language-code`,
+                        "data-language": languageCode,
+                        children: languageLabel
+                    })
+                })
+            }));
+    }, [
+        languages,
+        setSelectedLanguage
+    ]);
+    return /*#__PURE__*/ _jsx(BlockCollapsible, {
+        Actions: /*#__PURE__*/ _jsxs("div", {
+            className: `${baseClass}__actions`,
+            children: [
+                /*#__PURE__*/ _jsx(Combobox, {
+                    button: /*#__PURE__*/ _jsxs("div", {
+                        className: `${baseClass}__language-selector-button`,
+                        "data-selected-language": selectedLanguageField?.value,
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                children: selectedLanguageLabel
+                            }),
+                            /*#__PURE__*/ _jsx(ChevronIcon, {
+                                className: `${baseClass}__chevron`
+                            })
+                        ]
+                    }),
+                    buttonType: "custom",
+                    className: `${baseClass}__language-selector`,
+                    disabled: !isEditable,
+                    entries: languageEntries,
+                    horizontalAlign: "right",
+                    minEntriesForSearch: 8,
+                    searchPlaceholder: t('fields:searchForLanguage'),
+                    showScrollbar: true,
+                    size: "large"
+                }),
+                /*#__PURE__*/ _jsx(CopyToClipboard, {
+                    value: codeField?.value ?? ''
+                }),
+                /*#__PURE__*/ _jsx(Collapse, {}),
+                isEditable && /*#__PURE__*/ _jsx(RemoveButton, {})
+            ]
+        }),
+        className: baseClass,
+        collapsibleProps: {
+            AfterCollapsible: /*#__PURE__*/ _jsx(FloatingCollapse, {}),
+            disableHeaderToggle: true,
+            disableToggleIndicator: true
         },
-        children: /*#__PURE__*/_jsx("span", {
-          className: `${baseClass}__language-code`,
-          "data-language": languageCode,
-          children: languageLabel
-        })
-      })
-    }));
-  }, [languages, setSelectedLanguage]);
-  return /*#__PURE__*/_jsx(BlockCollapsible, {
-    Actions: /*#__PURE__*/_jsxs("div", {
-      className: `${baseClass}__actions`,
-      children: [/*#__PURE__*/_jsx(Combobox, {
-        button: /*#__PURE__*/_jsxs("div", {
-          className: `${baseClass}__language-selector-button`,
-          "data-selected-language": selectedLanguageField?.value,
-          children: [/*#__PURE__*/_jsx("span", {
-            children: selectedLanguageLabel
-          }), /*#__PURE__*/_jsx(ChevronIcon, {
-            className: `${baseClass}__chevron`
-          })]
+        Pill: /*#__PURE__*/ _jsx("div", {
+            className: `${baseClass}__pill`,
+            children: /*#__PURE__*/ _jsx(CodeBlockIcon, {})
         }),
-        buttonType: "custom",
-        className: `${baseClass}__language-selector`,
-        disabled: !isEditable,
-        entries: languageEntries,
-        horizontalAlign: "right",
-        minEntriesForSearch: 8,
-        searchPlaceholder: t('fields:searchForLanguage'),
-        showScrollbar: true,
-        size: "large"
-      }), /*#__PURE__*/_jsx(CopyToClipboard, {
-        value: codeField?.value ?? ''
-      }), /*#__PURE__*/_jsx(Collapse, {}), isEditable && /*#__PURE__*/_jsx(RemoveButton, {})]
-    }),
-    className: baseClass,
-    collapsibleProps: {
-      AfterCollapsible: /*#__PURE__*/_jsx(FloatingCollapse, {}),
-      disableHeaderToggle: true,
-      disableToggleIndicator: true
-    },
-    Pill: /*#__PURE__*/_jsx("div", {
-      className: `${baseClass}__pill`,
-      children: /*#__PURE__*/_jsx(CodeBlockIcon, {})
-    }),
-    children: /*#__PURE__*/_jsx(RenderFields, {
-      fields: formSchema,
-      forceRender: true,
-      parentIndexPath: "",
-      parentPath: '',
-      parentSchemaPath: "",
-      permissions: true,
-      readOnly: !isEditable
-    })
-  });
+        children: /*#__PURE__*/ _jsx(RenderFields, {
+            fields: formSchema,
+            forceRender: true,
+            parentIndexPath: "",
+            parentPath: '',
+            parentSchemaPath: "",
+            permissions: true,
+            readOnly: !isEditable
+        })
+    });
 };
+
 //# sourceMappingURL=Block.js.map

package/dist/features/blocks/premade/CodeBlock/Component/Block.js.map

@@ -1 +1 @@
-{"version":3,"file":"Block.js","names":["useLexicalEditable","ChevronIcon","Combobox","CopyToClipboard","PopupList","RenderFields","useForm","useFormFields","useTranslation","React","CodeBlockIcon","useBlockComponentContext","Collapse","defaultLanguages","FloatingCollapse","baseClass","CodeBlockBlockComponent","args","languages","languagesFromProps","BlockCollapsible","formSchema","RemoveButton","setModified","t","codeField","fields","code","selectedLanguageField","setSelectedLanguage","dispatch","language","type","path","value","selectedLanguageLabel","isEditable","languageEntries","useMemo","Object","entries","map","languageCode","languageLabel","name","Component","_jsx","Button","active","disabled","onClick","className","Actions","_jsxs","button","buttonType","horizontalAlign","minEntriesForSearch","searchPlaceholder","showScrollbar","size","collapsibleProps","AfterCollapsible","disableHeaderToggle","disableToggleIndicator","Pill","forceRender","parentIndexPath","parentPath","parentSchemaPath","permissions","readOnly"],"sources":["../../../../../../src/features/blocks/premade/CodeBlock/Component/Block.tsx"],"sourcesContent":["'use client'\nimport type { ComboboxEntry } from '@payloadcms/ui'\nimport type {} from 'payload'\n\nimport './index.scss'\n\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\nimport {\n  ChevronIcon,\n  Combobox,\n  CopyToClipboard,\n  PopupList,\n  RenderFields,\n  useForm,\n  useFormFields,\n  useTranslation,\n} from '@payloadcms/ui'\nimport React from 'react'\n\nimport type { AdditionalCodeComponentProps } from './Code.js'\n\nimport { CodeBlockIcon } from '../../../../../lexical/ui/icons/CodeBlock/index.js'\nimport { useBlockComponentContext } from '../../../client/component/BlockContent.js'\nimport { Collapse } from './Collapse/index.js'\nimport { defaultLanguages } from './defaultLanguages.js'\nimport { FloatingCollapse } from './FloatingCollapse/index.js'\n\nconst baseClass = 'payload-richtext-code-block'\nexport const CodeBlockBlockComponent: React.FC<Pick<AdditionalCodeComponentProps, 'languages'>> = (\n  args,\n) => {\n  const { languages: languagesFromProps } = args\n  const languages = languagesFromProps || defaultLanguages\n\n  const { BlockCollapsible, formSchema, RemoveButton } = useBlockComponentContext()\n  const { setModified } = useForm()\n  const { t } = useTranslation()\n\n  const { codeField } = useFormFields(([fields]) => ({\n    codeField: fields?.code,\n  }))\n\n  const { selectedLanguageField, setSelectedLanguage } = useFormFields(([fields, dispatch]) => ({\n    selectedLanguageField: fields?.language,\n    setSelectedLanguage: (language: string) => {\n      dispatch({\n        type: 'UPDATE',\n        path: 'language',\n        value: language,\n      })\n      setModified(true)\n    },\n  }))\n\n  const selectedLanguageLabel = languages[selectedLanguageField?.value as keyof typeof languages]\n\n  const isEditable = useLexicalEditable()\n\n  const languageEntries = React.useMemo<ComboboxEntry[]>(() => {\n    return Object.entries(languages).map(([languageCode, languageLabel]) => ({\n      name: `${languageCode} ${languageLabel}`,\n      Component: (\n        <PopupList.Button\n          active={false}\n          disabled={false}\n          onClick={() => {\n            setSelectedLanguage(languageCode)\n          }}\n        >\n          <span className={`${baseClass}__language-code`} data-language={languageCode}>\n            {languageLabel}\n          </span>\n        </PopupList.Button>\n      ),\n    }))\n  }, [languages, setSelectedLanguage])\n\n  return (\n    <BlockCollapsible\n      Actions={\n        <div className={`${baseClass}__actions`}>\n          <Combobox\n            button={\n              <div\n                className={`${baseClass}__language-selector-button`}\n                data-selected-language={selectedLanguageField?.value}\n              >\n                <span>{selectedLanguageLabel}</span>\n                <ChevronIcon className={`${baseClass}__chevron`} />\n              </div>\n            }\n            buttonType=\"custom\"\n            className={`${baseClass}__language-selector`}\n            disabled={!isEditable}\n            entries={languageEntries}\n            horizontalAlign=\"right\"\n            minEntriesForSearch={8}\n            searchPlaceholder={t('fields:searchForLanguage')}\n            showScrollbar\n            size=\"large\"\n          />\n          <CopyToClipboard value={(codeField?.value as string) ?? ''} />\n\n          <Collapse />\n\n          {isEditable && <RemoveButton />}\n        </div>\n      }\n      className={baseClass}\n      collapsibleProps={{\n        AfterCollapsible: <FloatingCollapse />,\n        disableHeaderToggle: true,\n        disableToggleIndicator: true,\n      }}\n      Pill={\n        <div className={`${baseClass}__pill`}>\n          <CodeBlockIcon />\n        </div>\n      }\n    >\n      <RenderFields\n        fields={formSchema}\n        forceRender={true}\n        parentIndexPath=\"\"\n        parentPath={''}\n        parentSchemaPath=\"\"\n        permissions={true}\n        readOnly={!isEditable}\n      />\n    </BlockCollapsible>\n  )\n}\n"],"mappings":"AAAA;;;AAMA,SAASA,kBAAkB,QAAQ;AACnC,SACEC,WAAW,EACXC,QAAQ,EACRC,eAAe,EACfC,SAAS,EACTC,YAAY,EACZC,OAAO,EACPC,aAAa,EACbC,cAAc,QACT;AACP,OAAOC,KAAA,MAAW;AAIlB,SAASC,aAAa,QAAQ;AAC9B,SAASC,wBAAwB,QAAQ;AACzC,SAASC,QAAQ,QAAQ;AACzB,SAASC,gBAAgB,QAAQ;AACjC,SAASC,gBAAgB,QAAQ;AAEjC,MAAMC,SAAA,GAAY;AAClB,OAAO,MAAMC,uBAAA,GACXC,IAAA;EAEA,MAAM;IAAEC,SAAA,EAAWC;EAAkB,CAAE,GAAGF,IAAA;EAC1C,MAAMC,SAAA,GAAYC,kBAAA,IAAsBN,gBAAA;EAExC,MAAM;IAAEO,gBAAgB;IAAEC,UAAU;IAAEC;EAAY,CAAE,GAAGX,wBAAA;EACvD,MAAM;IAAEY;EAAW,CAAE,GAAGjB,OAAA;EACxB,MAAM;IAAEkB;EAAC,CAAE,GAAGhB,cAAA;EAEd,MAAM;IAAEiB;EAAS,CAAE,GAAGlB,aAAA,CAAc,CAAC,CAACmB,MAAA,CAAO,MAAM;IACjDD,SAAA,EAAWC,MAAA,EAAQC;EACrB;EAEA,MAAM;IAAEC,qBAAqB;IAAEC;EAAmB,CAAE,GAAGtB,aAAA,CAAc,CAAC,CAACmB,QAAA,EAAQI,QAAA,CAAS,MAAM;IAC5FF,qBAAA,EAAuBF,QAAA,EAAQK,QAAA;IAC/BF,mBAAA,EAAsBE,QAAA;MACpBD,QAAA,CAAS;QACPE,IAAA,EAAM;QACNC,IAAA,EAAM;QACNC,KAAA,EAAOH;MACT;MACAR,WAAA,CAAY;IACd;EACF;EAEA,MAAMY,qBAAA,GAAwBjB,SAAS,CAACU,qBAAA,EAAuBM,KAAA,CAAgC;EAE/F,MAAME,UAAA,GAAapC,kBAAA;EAEnB,MAAMqC,eAAA,GAAkB5B,KAAA,CAAM6B,OAAO,CAAkB;IACrD,OAAOC,MAAA,CAAOC,OAAO,CAACtB,SAAA,EAAWuB,GAAG,CAAC,CAAC,CAACC,YAAA,EAAcC,aAAA,CAAc,MAAM;MACvEC,IAAA,EAAM,GAAGF,YAAA,IAAgBC,aAAA,EAAe;MACxCE,SAAA,eACEC,IAAA,CAAC1C,SAAA,CAAU2C,MAAM;QACfC,MAAA,EAAQ;QACRC,QAAA,EAAU;QACVC,OAAA,EAASA,CAAA;UACPrB,mBAAA,CAAoBa,YAAA;QACtB;kBAEA,aAAAI,IAAA,CAAC;UAAKK,SAAA,EAAW,GAAGpC,SAAA,iBAA0B;UAAE,iBAAe2B,YAAA;oBAC5DC;;;IAIT;EACF,GAAG,CAACzB,SAAA,EAAWW,mBAAA,CAAoB;EAEnC,oBACEiB,IAAA,CAAC1B,gBAAA;IACCgC,OAAA,eACEC,KAAA,CAAC;MAAIF,SAAA,EAAW,GAAGpC,SAAA,WAAoB;8BACrC+B,IAAA,CAAC5C,QAAA;QACCoD,MAAA,eACED,KAAA,CAAC;UACCF,SAAA,EAAW,GAAGpC,SAAA,4BAAqC;UACnD,0BAAwBa,qBAAA,EAAuBM,KAAA;kCAE/CY,IAAA,CAAC;sBAAMX;2BACPW,IAAA,CAAC7C,WAAA;YAAYkD,SAAA,EAAW,GAAGpC,SAAA;;;QAG/BwC,UAAA,EAAW;QACXJ,SAAA,EAAW,GAAGpC,SAAA,qBAA8B;QAC5CkC,QAAA,EAAU,CAACb,UAAA;QACXI,OAAA,EAASH,eAAA;QACTmB,eAAA,EAAgB;QAChBC,mBAAA,EAAqB;QACrBC,iBAAA,EAAmBlC,CAAA,CAAE;QACrBmC,aAAa;QACbC,IAAA,EAAK;uBAEPd,IAAA,CAAC3C,eAAA;QAAgB+B,KAAA,EAAOT,SAAC,EAAWS,KAAA,IAAoB;uBAExDY,IAAA,CAAClC,QAAA,OAEAwB,UAAA,iBAAcU,IAAA,CAACxB,YAAA;;IAGpB6B,SAAA,EAAWpC,SAAA;IACX8C,gBAAA,EAAkB;MAChBC,gBAAA,eAAkBhB,IAAA,CAAChC,gBAAA;MACnBiD,mBAAA,EAAqB;MACrBC,sBAAA,EAAwB;IAC1B;IACAC,IAAA,eACEnB,IAAA,CAAC;MAAIK,SAAA,EAAW,GAAGpC,SAAA,QAAiB;gBAClC,aAAA+B,IAAA,CAACpC,aAAA;;cAIL,aAAAoC,IAAA,CAACzC,YAAA;MACCqB,MAAA,EAAQL,UAAA;MACR6C,WAAA,EAAa;MACbC,eAAA,EAAgB;MAChBC,UAAA,EAAY;MACZC,gBAAA,EAAiB;MACjBC,WAAA,EAAa;MACbC,QAAA,EAAU,CAACnC;;;AAInB","ignoreList":[]}
+{"version":3,"sources":["../../../../../../src/features/blocks/premade/CodeBlock/Component/Block.tsx"],"sourcesContent":["'use client'\nimport type { ComboboxEntry } from '@payloadcms/ui'\nimport type {} from 'payload'\n\nimport './index.scss'\n\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\nimport {\n  ChevronIcon,\n  Combobox,\n  CopyToClipboard,\n  PopupList,\n  RenderFields,\n  useForm,\n  useFormFields,\n  useTranslation,\n} from '@payloadcms/ui'\nimport React from 'react'\n\nimport type { AdditionalCodeComponentProps } from './Code.js'\n\nimport { CodeBlockIcon } from '../../../../../lexical/ui/icons/CodeBlock/index.js'\nimport { useBlockComponentContext } from '../../../client/component/BlockContent.js'\nimport { Collapse } from './Collapse/index.js'\nimport { defaultLanguages } from './defaultLanguages.js'\nimport { FloatingCollapse } from './FloatingCollapse/index.js'\n\nconst baseClass = 'payload-richtext-code-block'\nexport const CodeBlockBlockComponent: React.FC<Pick<AdditionalCodeComponentProps, 'languages'>> = (\n  args,\n) => {\n  const { languages: languagesFromProps } = args\n  const languages = languagesFromProps || defaultLanguages\n\n  const { BlockCollapsible, formSchema, RemoveButton } = useBlockComponentContext()\n  const { setModified } = useForm()\n  const { t } = useTranslation()\n\n  const { codeField } = useFormFields(([fields]) => ({\n    codeField: fields?.code,\n  }))\n\n  const { selectedLanguageField, setSelectedLanguage } = useFormFields(([fields, dispatch]) => ({\n    selectedLanguageField: fields?.language,\n    setSelectedLanguage: (language: string) => {\n      dispatch({\n        type: 'UPDATE',\n        path: 'language',\n        value: language,\n      })\n      setModified(true)\n    },\n  }))\n\n  const selectedLanguageLabel = languages[selectedLanguageField?.value as keyof typeof languages]\n\n  const isEditable = useLexicalEditable()\n\n  const languageEntries = React.useMemo<ComboboxEntry[]>(() => {\n    return Object.entries(languages).map(([languageCode, languageLabel]) => ({\n      name: `${languageCode} ${languageLabel}`,\n      Component: (\n        <PopupList.Button\n          active={false}\n          disabled={false}\n          onClick={() => {\n            setSelectedLanguage(languageCode)\n          }}\n        >\n          <span className={`${baseClass}__language-code`} data-language={languageCode}>\n            {languageLabel}\n          </span>\n        </PopupList.Button>\n      ),\n    }))\n  }, [languages, setSelectedLanguage])\n\n  return (\n    <BlockCollapsible\n      Actions={\n        <div className={`${baseClass}__actions`}>\n          <Combobox\n            button={\n              <div\n                className={`${baseClass}__language-selector-button`}\n                data-selected-language={selectedLanguageField?.value}\n              >\n                <span>{selectedLanguageLabel}</span>\n                <ChevronIcon className={`${baseClass}__chevron`} />\n              </div>\n            }\n            buttonType=\"custom\"\n            className={`${baseClass}__language-selector`}\n            disabled={!isEditable}\n            entries={languageEntries}\n            horizontalAlign=\"right\"\n            minEntriesForSearch={8}\n            searchPlaceholder={t('fields:searchForLanguage')}\n            showScrollbar\n            size=\"large\"\n          />\n          <CopyToClipboard value={(codeField?.value as string) ?? ''} />\n\n          <Collapse />\n\n          {isEditable && <RemoveButton />}\n        </div>\n      }\n      className={baseClass}\n      collapsibleProps={{\n        AfterCollapsible: <FloatingCollapse />,\n        disableHeaderToggle: true,\n        disableToggleIndicator: true,\n      }}\n      Pill={\n        <div className={`${baseClass}__pill`}>\n          <CodeBlockIcon />\n        </div>\n      }\n    >\n      <RenderFields\n        fields={formSchema}\n        forceRender={true}\n        parentIndexPath=\"\"\n        parentPath={''}\n        parentSchemaPath=\"\"\n        permissions={true}\n        readOnly={!isEditable}\n      />\n    </BlockCollapsible>\n  )\n}\n"],"names":["useLexicalEditable","ChevronIcon","Combobox","CopyToClipboard","PopupList","RenderFields","useForm","useFormFields","useTranslation","React","CodeBlockIcon","useBlockComponentContext","Collapse","defaultLanguages","FloatingCollapse","baseClass","CodeBlockBlockComponent","args","languages","languagesFromProps","BlockCollapsible","formSchema","RemoveButton","setModified","t","codeField","fields","code","selectedLanguageField","setSelectedLanguage","dispatch","language","type","path","value","selectedLanguageLabel","isEditable","languageEntries","useMemo","Object","entries","map","languageCode","languageLabel","name","Component","Button","active","disabled","onClick","span","className","data-language","Actions","div","button","data-selected-language","buttonType","horizontalAlign","minEntriesForSearch","searchPlaceholder","showScrollbar","size","collapsibleProps","AfterCollapsible","disableHeaderToggle","disableToggleIndicator","Pill","forceRender","parentIndexPath","parentPath","parentSchemaPath","permissions","readOnly"],"mappings":"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"}

package/dist/features/blocks/premade/CodeBlock/Component/Code.js

@@ -1,100 +1,122 @@
 'use client';
-
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CodeField, useFormFields } from '@payloadcms/ui';
 import React, { useId, useMemo } from 'react';
 import { defaultLanguages } from './defaultLanguages.js';
-export const CodeComponent = ({
-  autoComplete,
-  field,
-  forceRender,
-  languages = defaultLanguages,
-  path,
-  permissions,
-  readOnly,
-  renderedBlocks,
-  schemaPath,
-  typescript,
-  validate
-}) => {
-  const languageField = useFormFields(([fields]) => fields['language']);
-  const language = languageField?.value || languageField?.initialValue || 'typescript';
-  // unique id per component instance to ensure Monaco creates a distinct model
-  // for each TypeScript code block. Using React's useId is SSR-safe and builtin.
-  const instanceId = useId();
-  const label = languages[language];
-  const props = useMemo(() => ({
-    ...field,
-    type: 'code',
-    admin: {
-      ...field.admin,
-      editorOptions: {},
-      editorProps: {
-        // If typescript is set, @monaco-editor/react needs to set the URI to a .ts or .tsx file when it calls createModel().
-        // Provide a unique defaultPath per instance so Monaco doesn't reuse the same model
-        // across multiple code block instances. We use field.name + instanceId for debugability.
-        defaultPath: language === 'ts' ? `file-${field.name}-${instanceId}.tsx` : undefined
-      },
-      language
-    }
-  }), [field, language, instanceId]);
-  const key = `${field.name}-${language}-${label}`;
-  return props && /*#__PURE__*/_jsx(CodeField, {
-    autoComplete: autoComplete,
-    field: props,
-    forceRender: forceRender,
-    onMount: (_editor, monaco) => {
-      monaco.editor.defineTheme('vs-dark', {
-        base: 'vs-dark',
-        colors: {
-          'editor.background': '#222222'
-        },
-        inherit: true,
-        rules: []
-      });
-      monaco.editor.defineTheme('vs', {
-        base: 'vs',
-        colors: {
-          'editor.background': '#f5f5f5'
+/**
+   * @default first key of the `languages` prop
+   */ /**
+   * @default all languages supported by Monaco Editor
+   */ /**
+   * Override the name of the block.
+   *
+   * @default 'Code'
+   */ /**
+   * Configure typescript settings for the editor
+   */ /**
+     * By default, the editor will not perform semantic validation. This means that
+     * while syntax errors will be highlighted, other issues like missing imports or incorrect
+     * types will not be.
+     *
+     * @default false
+     */ /**
+     * Additional types to fetch and include in the editor for autocompletion.
+     *
+     * For example, to include types for payload, you would set this to
+     *
+     * [{ url: 'https://unpkg.com/payload@latest/dist/index.d.ts', filePath: 'file:///node_modules/payload/index.d.ts' }]
+     */ /**
+     * @default undefined
+     */ /**
+     * @default "ESNext"
+     */ /**
+     * @default ['node_modules/@types']
+     */ export const CodeComponent = ({ autoComplete, field, forceRender, languages = defaultLanguages, path, permissions, readOnly, renderedBlocks, schemaPath, typescript, validate })=>{
+    const languageField = useFormFields(([fields])=>fields['language']);
+    const language = languageField?.value || languageField?.initialValue || 'typescript';
+    // unique id per component instance to ensure Monaco creates a distinct model
+    // for each TypeScript code block. Using React's useId is SSR-safe and builtin.
+    const instanceId = useId();
+    const label = languages[language];
+    const props = useMemo(()=>({
+            ...field,
+            type: 'code',
+            admin: {
+                ...field.admin,
+                editorOptions: {},
+                editorProps: {
+                    // If typescript is set, @monaco-editor/react needs to set the URI to a .ts or .tsx file when it calls createModel().
+                    // Provide a unique defaultPath per instance so Monaco doesn't reuse the same model
+                    // across multiple code block instances. We use field.name + instanceId for debugability.
+                    defaultPath: language === 'ts' ? `file-${field.name}-${instanceId}.tsx` : undefined
+                },
+                language
+            }
+        }), [
+        field,
+        language,
+        instanceId
+    ]);
+    const key = `${field.name}-${language}-${label}`;
+    return props && /*#__PURE__*/ _jsx(CodeField, {
+        autoComplete: autoComplete,
+        field: props,
+        forceRender: forceRender,
+        onMount: (_editor, monaco)=>{
+            monaco.editor.defineTheme('vs-dark', {
+                base: 'vs-dark',
+                colors: {
+                    'editor.background': '#222222'
+                },
+                inherit: true,
+                rules: []
+            });
+            monaco.editor.defineTheme('vs', {
+                base: 'vs',
+                colors: {
+                    'editor.background': '#f5f5f5'
+                },
+                inherit: true,
+                rules: []
+            });
+            monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+                allowNonTsExtensions: true,
+                // Set module resolution to NodeJs to enable autocompletion
+                allowJs: true,
+                allowSyntheticDefaultImports: true,
+                esModuleInterop: true,
+                jsx: monaco.languages.typescript.JsxEmit.React,
+                moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+                noEmit: true,
+                paths: typescript?.paths,
+                reactNamespace: 'React',
+                target: monaco.languages.typescript.ScriptTarget[typescript?.target ?? 'ESNext'],
+                typeRoots: typescript?.typeRoots ?? [
+                    'node_modules/@types'
+                ]
+            });
+            monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+                noSemanticValidation: typescript?.enableSemanticValidation ? false : true,
+                noSyntaxValidation: false
+            });
+            const run = async ()=>{
+                if (typescript?.fetchTypes && Array.isArray(typescript.fetchTypes) && typescript.fetchTypes.length > 0) {
+                    await Promise.all(typescript.fetchTypes.map(async (type)=>{
+                        const types = await fetch(type.url);
+                        const typesText = await types.text();
+                        monaco.languages.typescript.typescriptDefaults.addExtraLib(typesText, type.filePath);
+                    }));
+                }
+            };
+            void run();
         },
-        inherit: true,
-        rules: []
-      });
-      monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
-        allowNonTsExtensions: true,
-        // Set module resolution to NodeJs to enable autocompletion
-        allowJs: true,
-        allowSyntheticDefaultImports: true,
-        esModuleInterop: true,
-        jsx: monaco.languages.typescript.JsxEmit.React,
-        moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
-        noEmit: true,
-        paths: typescript?.paths,
-        reactNamespace: 'React',
-        target: monaco.languages.typescript.ScriptTarget[typescript?.target ?? 'ESNext'],
-        typeRoots: typescript?.typeRoots ?? ['node_modules/@types']
-      });
-      monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-        noSemanticValidation: typescript?.enableSemanticValidation ? false : true,
-        noSyntaxValidation: false
-      });
-      const run = async () => {
-        if (typescript?.fetchTypes && Array.isArray(typescript.fetchTypes) && typescript.fetchTypes.length > 0) {
-          await Promise.all(typescript.fetchTypes.map(async type => {
-            const types = await fetch(type.url);
-            const typesText = await types.text();
-            monaco.languages.typescript.typescriptDefaults.addExtraLib(typesText, type.filePath);
-          }));
-        }
-      };
-      void run();
-    },
-    path: path,
-    permissions: permissions,
-    readOnly: readOnly,
-    renderedBlocks: renderedBlocks,
-    schemaPath: schemaPath,
-    validate: validate
-  }, key);
+        path: path,
+        permissions: permissions,
+        readOnly: readOnly,
+        renderedBlocks: renderedBlocks,
+        schemaPath: schemaPath,
+        validate: validate
+    }, key);
 };
+
 //# sourceMappingURL=Code.js.map

package/dist/features/blocks/premade/CodeBlock/Component/Code.js.map

@@ -1 +1 @@
-{"version":3,"file":"Code.js","names":["CodeField","useFormFields","React","useId","useMemo","defaultLanguages","CodeComponent","autoComplete","field","forceRender","languages","path","permissions","readOnly","renderedBlocks","schemaPath","typescript","validate","languageField","fields","language","value","initialValue","instanceId","label","props","type","admin","editorOptions","editorProps","defaultPath","name","undefined","key","_jsx","onMount","_editor","monaco","editor","defineTheme","base","colors","inherit","rules","typescriptDefaults","setCompilerOptions","allowNonTsExtensions","allowJs","allowSyntheticDefaultImports","esModuleInterop","jsx","JsxEmit","moduleResolution","ModuleResolutionKind","NodeJs","noEmit","paths","reactNamespace","target","ScriptTarget","typeRoots","setDiagnosticsOptions","noSemanticValidation","enableSemanticValidation","noSyntaxValidation","run","fetchTypes","Array","isArray","length","Promise","all","map","types","fetch","url","typesText","text","addExtraLib","filePath"],"sources":["../../../../../../src/features/blocks/premade/CodeBlock/Component/Code.tsx"],"sourcesContent":["'use client'\n\nimport type { CodeFieldClient, CodeFieldClientProps } from 'payload'\n\nimport { CodeField, useFormFields } from '@payloadcms/ui'\nimport React, { useId, useMemo } from 'react'\n\nimport { defaultLanguages } from './defaultLanguages.js'\n\nexport type AdditionalCodeComponentProps = {\n  /**\n   * @default first key of the `languages` prop\n   */\n  defaultLanguage?: string\n  /**\n   * @default all languages supported by Monaco Editor\n   */\n  languages?: Record<string, string>\n  /**\n   * Override the name of the block.\n   *\n   * @default 'Code'\n   */\n  slug?: string\n  /**\n   * Configure typescript settings for the editor\n   */\n  typescript?: {\n    /**\n     * By default, the editor will not perform semantic validation. This means that\n     * while syntax errors will be highlighted, other issues like missing imports or incorrect\n     * types will not be.\n     *\n     * @default false\n     */\n    enableSemanticValidation?: boolean\n    /**\n     * Additional types to fetch and include in the editor for autocompletion.\n     *\n     * For example, to include types for payload, you would set this to\n     *\n     * [{ url: 'https://unpkg.com/payload@latest/dist/index.d.ts', filePath: 'file:///node_modules/payload/index.d.ts' }]\n     */\n    fetchTypes?: Array<{\n      filePath: string\n      url: string\n    }>\n    /**\n     * @default undefined\n     */\n    paths?: Record<string, string[]>\n    /**\n     * @default \"ESNext\"\n     */\n    target?: string\n    /**\n     * @default ['node_modules/@types']\n     */\n    typeRoots?: string[]\n  }\n}\n\nexport const CodeComponent: React.FC<AdditionalCodeComponentProps & CodeFieldClientProps> = ({\n  autoComplete,\n  field,\n  forceRender,\n  languages = defaultLanguages,\n  path,\n  permissions,\n  readOnly,\n  renderedBlocks,\n  schemaPath,\n  typescript,\n  validate,\n}) => {\n  const languageField = useFormFields(([fields]) => fields['language'])\n\n  const language: string =\n    (languageField?.value as string) || (languageField?.initialValue as string) || 'typescript'\n\n  // unique id per component instance to ensure Monaco creates a distinct model\n  // for each TypeScript code block. Using React's useId is SSR-safe and builtin.\n  const instanceId = useId()\n\n  const label = languages[language]\n\n  const props: CodeFieldClient = useMemo<CodeFieldClient>(\n    () => ({\n      ...field,\n      type: 'code',\n      admin: {\n        ...field.admin,\n        editorOptions: {},\n        editorProps: {\n          // If typescript is set, @monaco-editor/react needs to set the URI to a .ts or .tsx file when it calls createModel().\n          // Provide a unique defaultPath per instance so Monaco doesn't reuse the same model\n          // across multiple code block instances. We use field.name + instanceId for debugability.\n          defaultPath: language === 'ts' ? `file-${field.name}-${instanceId}.tsx` : undefined,\n        },\n        language,\n      },\n    }),\n    [field, language, instanceId],\n  )\n\n  const key = `${field.name}-${language}-${label}`\n\n  return (\n    props && (\n      <CodeField\n        autoComplete={autoComplete}\n        field={props}\n        forceRender={forceRender}\n        key={key}\n        onMount={(_editor, monaco) => {\n          monaco.editor.defineTheme('vs-dark', {\n            base: 'vs-dark',\n            colors: {\n              'editor.background': '#222222',\n            },\n            inherit: true,\n            rules: [],\n          })\n\n          monaco.editor.defineTheme('vs', {\n            base: 'vs',\n            colors: {\n              'editor.background': '#f5f5f5',\n            },\n            inherit: true,\n            rules: [],\n          })\n          monaco.languages.typescript.typescriptDefaults.setCompilerOptions({\n            allowNonTsExtensions: true,\n            // Set module resolution to NodeJs to enable autocompletion\n            allowJs: true,\n            allowSyntheticDefaultImports: true,\n            esModuleInterop: true,\n            jsx: monaco.languages.typescript.JsxEmit.React,\n            moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,\n            noEmit: true,\n            paths: typescript?.paths,\n            reactNamespace: 'React',\n            target: monaco.languages.typescript.ScriptTarget[\n              typescript?.target ?? ('ESNext' as any)\n            ] as any,\n            typeRoots: typescript?.typeRoots ?? ['node_modules/@types'],\n          })\n\n          monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({\n            noSemanticValidation: typescript?.enableSemanticValidation ? false : true,\n            noSyntaxValidation: false,\n          })\n\n          const run = async () => {\n            if (\n              typescript?.fetchTypes &&\n              Array.isArray(typescript.fetchTypes) &&\n              typescript.fetchTypes.length > 0\n            ) {\n              await Promise.all(\n                typescript.fetchTypes.map(async (type) => {\n                  const types = await fetch(type.url)\n                  const typesText = await types.text()\n                  monaco.languages.typescript.typescriptDefaults.addExtraLib(\n                    typesText,\n                    type.filePath,\n                  )\n                }),\n              )\n            }\n          }\n          void run()\n        }}\n        path={path}\n        permissions={permissions}\n        readOnly={readOnly}\n        renderedBlocks={renderedBlocks}\n        schemaPath={schemaPath}\n        validate={validate}\n      />\n    )\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../../../../../src/features/blocks/premade/CodeBlock/Component/Code.tsx"],"sourcesContent":["'use client'\n\nimport type { CodeFieldClient, CodeFieldClientProps } from 'payload'\n\nimport { CodeField, useFormFields } from '@payloadcms/ui'\nimport React, { useId, useMemo } from 'react'\n\nimport { defaultLanguages } from './defaultLanguages.js'\n\nexport type AdditionalCodeComponentProps = {\n  /**\n   * @default first key of the `languages` prop\n   */\n  defaultLanguage?: string\n  /**\n   * @default all languages supported by Monaco Editor\n   */\n  languages?: Record<string, string>\n  /**\n   * Override the name of the block.\n   *\n   * @default 'Code'\n   */\n  slug?: string\n  /**\n   * Configure typescript settings for the editor\n   */\n  typescript?: {\n    /**\n     * By default, the editor will not perform semantic validation. This means that\n     * while syntax errors will be highlighted, other issues like missing imports or incorrect\n     * types will not be.\n     *\n     * @default false\n     */\n    enableSemanticValidation?: boolean\n    /**\n     * Additional types to fetch and include in the editor for autocompletion.\n     *\n     * For example, to include types for payload, you would set this to\n     *\n     * [{ url: 'https://unpkg.com/payload@latest/dist/index.d.ts', filePath: 'file:///node_modules/payload/index.d.ts' }]\n     */\n    fetchTypes?: Array<{\n      filePath: string\n      url: string\n    }>\n    /**\n     * @default undefined\n     */\n    paths?: Record<string, string[]>\n    /**\n     * @default \"ESNext\"\n     */\n    target?: string\n    /**\n     * @default ['node_modules/@types']\n     */\n    typeRoots?: string[]\n  }\n}\n\nexport const CodeComponent: React.FC<AdditionalCodeComponentProps & CodeFieldClientProps> = ({\n  autoComplete,\n  field,\n  forceRender,\n  languages = defaultLanguages,\n  path,\n  permissions,\n  readOnly,\n  renderedBlocks,\n  schemaPath,\n  typescript,\n  validate,\n}) => {\n  const languageField = useFormFields(([fields]) => fields['language'])\n\n  const language: string =\n    (languageField?.value as string) || (languageField?.initialValue as string) || 'typescript'\n\n  // unique id per component instance to ensure Monaco creates a distinct model\n  // for each TypeScript code block. Using React's useId is SSR-safe and builtin.\n  const instanceId = useId()\n\n  const label = languages[language]\n\n  const props: CodeFieldClient = useMemo<CodeFieldClient>(\n    () => ({\n      ...field,\n      type: 'code',\n      admin: {\n        ...field.admin,\n        editorOptions: {},\n        editorProps: {\n          // If typescript is set, @monaco-editor/react needs to set the URI to a .ts or .tsx file when it calls createModel().\n          // Provide a unique defaultPath per instance so Monaco doesn't reuse the same model\n          // across multiple code block instances. We use field.name + instanceId for debugability.\n          defaultPath: language === 'ts' ? `file-${field.name}-${instanceId}.tsx` : undefined,\n        },\n        language,\n      },\n    }),\n    [field, language, instanceId],\n  )\n\n  const key = `${field.name}-${language}-${label}`\n\n  return (\n    props && (\n      <CodeField\n        autoComplete={autoComplete}\n        field={props}\n        forceRender={forceRender}\n        key={key}\n        onMount={(_editor, monaco) => {\n          monaco.editor.defineTheme('vs-dark', {\n            base: 'vs-dark',\n            colors: {\n              'editor.background': '#222222',\n            },\n            inherit: true,\n            rules: [],\n          })\n\n          monaco.editor.defineTheme('vs', {\n            base: 'vs',\n            colors: {\n              'editor.background': '#f5f5f5',\n            },\n            inherit: true,\n            rules: [],\n          })\n          monaco.languages.typescript.typescriptDefaults.setCompilerOptions({\n            allowNonTsExtensions: true,\n            // Set module resolution to NodeJs to enable autocompletion\n            allowJs: true,\n            allowSyntheticDefaultImports: true,\n            esModuleInterop: true,\n            jsx: monaco.languages.typescript.JsxEmit.React,\n            moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,\n            noEmit: true,\n            paths: typescript?.paths,\n            reactNamespace: 'React',\n            target: monaco.languages.typescript.ScriptTarget[\n              typescript?.target ?? ('ESNext' as any)\n            ] as any,\n            typeRoots: typescript?.typeRoots ?? ['node_modules/@types'],\n          })\n\n          monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({\n            noSemanticValidation: typescript?.enableSemanticValidation ? false : true,\n            noSyntaxValidation: false,\n          })\n\n          const run = async () => {\n            if (\n              typescript?.fetchTypes &&\n              Array.isArray(typescript.fetchTypes) &&\n              typescript.fetchTypes.length > 0\n            ) {\n              await Promise.all(\n                typescript.fetchTypes.map(async (type) => {\n                  const types = await fetch(type.url)\n                  const typesText = await types.text()\n                  monaco.languages.typescript.typescriptDefaults.addExtraLib(\n                    typesText,\n                    type.filePath,\n                  )\n                }),\n              )\n            }\n          }\n          void run()\n        }}\n        path={path}\n        permissions={permissions}\n        readOnly={readOnly}\n        renderedBlocks={renderedBlocks}\n        schemaPath={schemaPath}\n        validate={validate}\n      />\n    )\n  )\n}\n"],"names":["CodeField","useFormFields","React","useId","useMemo","defaultLanguages","CodeComponent","autoComplete","field","forceRender","languages","path","permissions","readOnly","renderedBlocks","schemaPath","typescript","validate","languageField","fields","language","value","initialValue","instanceId","label","props","type","admin","editorOptions","editorProps","defaultPath","name","undefined","key","onMount","_editor","monaco","editor","defineTheme","base","colors","inherit","rules","typescriptDefaults","setCompilerOptions","allowNonTsExtensions","allowJs","allowSyntheticDefaultImports","esModuleInterop","jsx","JsxEmit","moduleResolution","ModuleResolutionKind","NodeJs","noEmit","paths","reactNamespace","target","ScriptTarget","typeRoots","setDiagnosticsOptions","noSemanticValidation","enableSemanticValidation","noSyntaxValidation","run","fetchTypes","Array","isArray","length","Promise","all","map","types","fetch","url","typesText","text","addExtraLib","filePath"],"mappings":"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"}

package/dist/features/blocks/premade/CodeBlock/Component/Collapse/index.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
+import './index.scss';
 const baseClass = 'code-block-collapse-button';
 import { useCollapsible } from '@payloadcms/ui';
 import { CollapseIcon } from '../../../../../../lexical/ui/icons/Collapse/index.js';
-export const Collapse = () => {
-  const {
-    toggle
-  } = useCollapsible();
-  return /*#__PURE__*/_jsx("button", {
-    className: baseClass,
-    onClick: toggle,
-    type: "button",
-    children: /*#__PURE__*/_jsx(CollapseIcon, {})
-  });
+export const Collapse = ()=>{
+    const { toggle } = useCollapsible();
+    return /*#__PURE__*/ _jsx("button", {
+        className: baseClass,
+        onClick: toggle,
+        type: "button",
+        children: /*#__PURE__*/ _jsx(CollapseIcon, {})
+    });
 };
+
 //# sourceMappingURL=index.js.map

package/dist/features/blocks/premade/CodeBlock/Component/Collapse/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","baseClass","useCollapsible","CollapseIcon","Collapse","toggle","_jsx","className","onClick","type"],"sources":["../../../../../../../src/features/blocks/premade/CodeBlock/Component/Collapse/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'code-block-collapse-button'\nimport { useCollapsible } from '@payloadcms/ui'\n\nimport { CollapseIcon } from '../../../../../../lexical/ui/icons/Collapse/index.js'\n\nexport const Collapse: React.FC = () => {\n  const { toggle } = useCollapsible()\n  return (\n    <button className={baseClass} onClick={toggle} type=\"button\">\n      <CollapseIcon />\n    </button>\n  )\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAIlB,MAAMC,SAAA,GAAY;AAClB,SAASC,cAAc,QAAQ;AAE/B,SAASC,YAAY,QAAQ;AAE7B,OAAO,MAAMC,QAAA,GAAqBA,CAAA;EAChC,MAAM;IAAEC;EAAM,CAAE,GAAGH,cAAA;EACnB,oBACEI,IAAA,CAAC;IAAOC,SAAA,EAAWN,SAAA;IAAWO,OAAA,EAASH,MAAA;IAAQI,IAAA,EAAK;cAClD,aAAAH,IAAA,CAACH,YAAA;;AAGP","ignoreList":[]}
+{"version":3,"sources":["../../../../../../../src/features/blocks/premade/CodeBlock/Component/Collapse/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'code-block-collapse-button'\nimport { useCollapsible } from '@payloadcms/ui'\n\nimport { CollapseIcon } from '../../../../../../lexical/ui/icons/Collapse/index.js'\n\nexport const Collapse: React.FC = () => {\n  const { toggle } = useCollapsible()\n  return (\n    <button className={baseClass} onClick={toggle} type=\"button\">\n      <CollapseIcon />\n    </button>\n  )\n}\n"],"names":["React","baseClass","useCollapsible","CollapseIcon","Collapse","toggle","button","className","onClick","type"],"mappings":";AAAA,OAAOA,WAAW,QAAO;AAEzB,OAAO,eAAc;AAErB,MAAMC,YAAY;AAClB,SAASC,cAAc,QAAQ,iBAAgB;AAE/C,SAASC,YAAY,QAAQ,uDAAsD;AAEnF,OAAO,MAAMC,WAAqB;IAChC,MAAM,EAAEC,MAAM,EAAE,GAAGH;IACnB,qBACE,KAACI;QAAOC,WAAWN;QAAWO,SAASH;QAAQI,MAAK;kBAClD,cAAA,KAACN;;AAGP,EAAC"}

package/dist/features/blocks/premade/CodeBlock/Component/FloatingCollapse/index.js

@@ -1,26 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import './index.scss';
 const baseClass = 'code-block-floating-collapse-button';
 import { useCollapsible, useTranslation } from '@payloadcms/ui';
 import { CollapseIcon } from '../../../../../../lexical/ui/icons/Collapse/index.js';
-export const FloatingCollapse = () => {
-  const {
-    isCollapsed,
-    toggle
-  } = useCollapsible();
-  const {
-    t
-  } = useTranslation();
-  if (!isCollapsed) {
-    return null;
-  }
-  return /*#__PURE__*/_jsxs("button", {
-    className: baseClass,
-    onClick: toggle,
-    type: "button",
-    children: [/*#__PURE__*/_jsx("span", {
-      children: t('general:collapse')
-    }), /*#__PURE__*/_jsx(CollapseIcon, {})]
-  });
+export const FloatingCollapse = ()=>{
+    const { isCollapsed, toggle } = useCollapsible();
+    const { t } = useTranslation();
+    if (!isCollapsed) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsxs("button", {
+        className: baseClass,
+        onClick: toggle,
+        type: "button",
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                children: t('general:collapse')
+            }),
+            /*#__PURE__*/ _jsx(CollapseIcon, {})
+        ]
+    });
 };
+
 //# sourceMappingURL=index.js.map