feat: make editor configurable

README.md

@@ -29,6 +29,7 @@
     - [v1 - Stable](#v1---stable)
   - [Contributing](#contributing)
   - [Resources](#resources)
+    - [🛠️ Sponsored by hashbite.net | support \& custom development available](#️-sponsored-by-hashbitenet--support--custom-development-available)
 
 <!-- /TOC -->
 
@@ -38,53 +39,52 @@
 
 1. Install the plugin:
 
-   ```bash
-   npm install strapi-plugin-lexical
-   ```
+    ```bash
+    npm install strapi-plugin-lexical
+    ```
 
 2. Enable the plugin:
 
-   ```javascript
-   // ./config/plugins.js
-   {
-    lexical: {
-      enabled: true,
-    },
-
-  };
+    ```javascript
+    // ./config/plugins.js
+    {
+      lexical: {
+        enabled: true,
+      },
+    };
     ```
 
 3. Include the required CSS and Prism.js in your Strapi admin:
 
-   ```javascript
-   // ./src/admin/app.js
-   import "strapi-plugin-lexical/dist/style.css";
-   import "prismjs";
-   ```
+    ```javascript
+    // ./src/admin/app.js
+    import "strapi-plugin-lexical/style.css";
+    import "prismjs";
+    ```
 
 4. Add Vite support for Prism.js:
-   - Install the plugin:
-
-     ```bash
-     npm install --save-dev vite-plugin-prismjs
-     ```
-
-   - Update your Vite configuration:
-
-     ```javascript
-     // ./src/admin/vite.config.js
-     import { mergeConfig } from "vite";
-     import prismjs from "vite-plugin-prismjs";
-
-     export default (config) =>
-       mergeConfig(config, {
-         plugins: [
-           prismjs({
-             languages: "all", // Load all languages or customize as needed
-           }),
-         ],
-       });
-     ```
+    - Install the plugin:
+
+      ```bash
+      npm install --save-dev vite-plugin-prismjs
+      ```
+
+    - Update your Vite configuration:
+
+      ```javascript
+      // ./src/admin/vite.config.js
+      import { mergeConfig } from "vite";
+      import prismjs from "vite-plugin-prismjs";
+
+      export default (config) =>
+        mergeConfig(config, {
+          plugins: [
+            prismjs({
+              languages: "all", // Load all languages or customize as needed
+            }),
+          ],
+        });
+      ```
 
     > **Note:** Prism.js is required even if you don't plan to support code blocks. If you find a workaround to avoid this, please share it with us via a pull request or issue. We happily skip this installation step if we can!
 

admin/src/components/Input.tsx

@@ -10,7 +10,11 @@ import { SerializedEditorState, SerializedElementNode, SerializedLexicalNode } f
 
 import LexicalEditor from '../lexical/Editor';
 import { FlashMessageContext } from '../lexical/context/FlashMessageContext';
-import { ToolbarContext } from '../lexical/context/ToolbarContext';
+import { INITIAL_TOOLBAR_STATE, ToolbarContext } from '../lexical/context/ToolbarContext';
+import {
+  StrapiFieldConfig,
+  StrapiFieldConfigProvider,
+} from '../lexical/context/StrapiFieldContext';
 import { TableContext } from '../lexical/plugins/TablePlugin';
 import PlaygroundEditorTheme from '../lexical/themes/PlaygroundEditorTheme';
 
@@ -26,6 +30,7 @@ interface CustomFieldsComponentProps {
   attribute: {
     type: string;
     customField: string;
+    options: StrapiFieldConfig;
   };
   description: MessageDescriptor;
   placeholder: MessageDescriptor;
@@ -245,14 +250,22 @@ const Input = React.forwardRef<HTMLDivElement, CustomFieldsComponentProps & Inpu
             <FlashMessageContext>
               <LexicalComposer initialConfig={initialConfig}>
                 <TableContext>
-                  <ToolbarContext>
-                    <LexicalEditor
-                      onChange={handleChangeCb}
-                      ref={ref}
-                      fieldName={name}
-                      expectedEditorState={expectedEditorState}
-                    />
-                  </ToolbarContext>
+                  <StrapiFieldConfigProvider value={attribute.options}>
+                    <ToolbarContext
+                      initialState={{
+                        ...INITIAL_TOOLBAR_STATE,
+                        fontSize: `${attribute.options.fontSize?.default || 15}px`,
+                        fontSizeInputValue: `${attribute.options.fontSize?.default || 15}`,
+                      }}
+                    >
+                      <LexicalEditor
+                        onChange={handleChangeCb}
+                        ref={ref}
+                        fieldName={name}
+                        expectedEditorState={expectedEditorState}
+                      />
+                    </ToolbarContext>
+                  </StrapiFieldConfigProvider>
                 </TableContext>
               </LexicalComposer>
             </FlashMessageContext>

admin/src/index.ts

@@ -3,6 +3,9 @@ import { Initializer } from './components/Initializer';
 import { LexicalIcon } from './components/LexicalIcon';
 import { PLUGIN_ID } from './pluginId';
 
+import { supportedNodeTypes } from './supportedNodeTypes';
+import { defaultStrapiFieldConfig } from './lexical/context/StrapiFieldContext';
+
 export default {
   register(app: StrapiApp) {
     app.registerPlugin({
@@ -31,7 +34,217 @@ export default {
           import(/* webpackChunkName: "lexical-input-component" */ './components/Input'),
       },
       options: {
-        // declare options here
+        advanced: [
+          {
+            sectionTitle: {
+              id: 'lexical.nodeTypes.section.enabled',
+              defaultMessage: 'Select the node types to enable',
+            },
+            items: Object.values(supportedNodeTypes).map((supportedNodeType) => ({
+              intlLabel: {
+                id: `lexical.supportedNodeTypes.${supportedNodeType.id}.label`,
+                defaultMessage: supportedNodeType.defaultLabel,
+              },
+              type: 'checkbox',
+              description: {
+                id: `lexical.supportedNodeTypes.${supportedNodeType.id}.description`,
+                defaultMessage: supportedNodeType.defaultDescription,
+              },
+              // Current strapi types do not reflect the possibility
+              // to store custom configuration names, but code does.
+              name: `options.enabledNodeTypes.${supportedNodeType.id}` as any,
+              defaultValue: supportedNodeType.enabledByDefault,
+            })),
+          },
+          {
+            sectionTitle: {
+              id: 'lexical.fontSize.section.feature',
+              defaultMessage: 'Font size feature',
+            },
+            items: [
+              {
+                intlLabel: {
+                  id: `lexical.fontSize.enabled.label`,
+                  defaultMessage: 'Enable font size feature',
+                },
+                type: 'checkbox',
+                defaultValue: defaultStrapiFieldConfig.fontSize.enabled,
+                description: {
+                  id: `lexical.fontSize.enabled.description`,
+                  defaultMessage: 'Enable users to change font size',
+                },
+                name: `options.fontSize.enabled`,
+              },
+              {
+                intlLabel: {
+                  id: `lexical.fontSize.default.label`,
+                  defaultMessage: 'Default font size',
+                },
+                type: 'number',
+                defaultValue: defaultStrapiFieldConfig.fontSize.default,
+                description: {
+                  id: `lexical.fontSize.default.description`,
+                  defaultMessage: 'Default font size size of your editor',
+                },
+                name: `options.fontSize.default`,
+              },
+              {
+                intlLabel: {
+                  id: `lexical.fontSize.minimum.label`,
+                  defaultMessage: 'Minimum font size',
+                },
+                type: 'number',
+                defaultValue: defaultStrapiFieldConfig.fontSize.minimum,
+                description: {
+                  id: `lexical.fontSize.minimum.description`,
+                  defaultMessage: 'Minimum font size size of your editor',
+                },
+                name: `options.fontSize.minimum`,
+              },
+              {
+                intlLabel: {
+                  id: `lexical.fontSize.maximum.label`,
+                  defaultMessage: 'Maximum font size',
+                },
+                type: 'number',
+                defaultValue: defaultStrapiFieldConfig.fontSize.maximum,
+                description: {
+                  id: `lexical.fontSize.maximum.description`,
+                  defaultMessage: 'Maximum font size size of your editor',
+                },
+                name: `options.fontSize.maximum`,
+              },
+            ],
+          },
+          {
+            sectionTitle: {
+              id: 'lexical.fontFamily.section.feature',
+              defaultMessage: 'Font family feature',
+            },
+            items: [
+              {
+                intlLabel: {
+                  id: `lexical.fontFamily.enabled.label`,
+                  defaultMessage: 'Enable font family feature',
+                },
+                type: 'checkbox',
+                defaultValue: defaultStrapiFieldConfig.fontFamily.enabled,
+                description: {
+                  id: `lexical.fontFamily.enabled.description`,
+                  defaultMessage: 'Enable users to change font family',
+                },
+                name: `options.fontFamily.enabled`,
+              },
+              {
+                intlLabel: {
+                  id: `lexical.fontFamily.families.label`,
+                  defaultMessage: 'Enabled font families',
+                },
+                type: 'text',
+                defaultValue: defaultStrapiFieldConfig.fontFamily.families,
+                description: {
+                  id: `lexical.fontFamily.default.description`,
+                  defaultMessage: 'Enabled font families. Separated by semi-colon (;)',
+                },
+                name: `options.fontFamily.families`,
+              },
+            ],
+          },
+          {
+            sectionTitle: {
+              id: 'lexical.actions.section.enabled',
+              defaultMessage: 'Select actions to enable',
+            },
+            items: [
+              {
+                intlLabel: {
+                  id: `lexical.actions.sessionHistory.label`,
+                  defaultMessage: 'Session history',
+                },
+                type: 'checkbox',
+                description: {
+                  id: `lexical.actions.sessionHistory.description`,
+                  defaultMessage: 'Add buttons to undo/redo within the current editing session',
+                },
+                name: `options.enabledActions.sessionHistory`,
+                defaultValue: defaultStrapiFieldConfig.enabledActions.sessionHistory,
+              },
+              {
+                intlLabel: {
+                  id: `lexical.actions.clear.label`,
+                  defaultMessage: 'Clear',
+                },
+                type: 'checkbox',
+                description: {
+                  id: `lexical.actions.clear.description`,
+                  defaultMessage: 'Add button to clear all text within the current editor',
+                },
+                name: `options.enabledActions.clear`,
+                defaultValue: defaultStrapiFieldConfig.enabledActions.clear,
+              },
+              {
+                intlLabel: {
+                  id: `lexical.actions.exportAsMarkdown.label`,
+                  defaultMessage: 'Export as Markdown',
+                },
+                type: 'checkbox',
+                description: {
+                  id: `lexical.actions.exportAsMarkdown.description`,
+                  defaultMessage: 'Add button to export editor text in Markdown format',
+                },
+                name: `options.enabledActions.exportAsMarkdown`,
+                defaultValue: defaultStrapiFieldConfig.enabledActions.exportAsMarkdown,
+              },
+              {
+                intlLabel: {
+                  id: `lexical.actions.import.label`,
+                  defaultMessage: 'Import',
+                },
+                type: 'checkbox',
+                description: {
+                  id: `lexical.actions.import.description`,
+                  defaultMessage: 'Add button to import existing Lexical-formatted text',
+                },
+                name: `options.enabledActions.import`,
+                defaultValue: defaultStrapiFieldConfig.enabledActions.import,
+              },
+              {
+                intlLabel: {
+                  id: `lexical.actions.export.label`,
+                  defaultMessage: 'Export',
+                },
+                type: 'checkbox',
+                description: {
+                  id: `lexical.actions.export.description`,
+                  defaultMessage: 'Add button to export text in Lexical format',
+                },
+                name: `options.enabledActions.export`,
+                defaultValue: defaultStrapiFieldConfig.enabledActions.export,
+              },
+            ],
+          },
+          {
+            sectionTitle: {
+              id: 'lexical.developers.section.enabled',
+              defaultMessage: 'Select developer settings to enable',
+            },
+            items: [
+              {
+                intlLabel: {
+                  id: `lexical.developers.treeView.label`,
+                  defaultMessage: 'Tree view',
+                },
+                type: 'checkbox',
+                description: {
+                  id: `lexical.developers.treeView.description`,
+                  defaultMessage: 'Add button to show internal Lexical tree',
+                },
+                name: `options.developers.treeView`,
+                defaultValue: defaultStrapiFieldConfig.developers.treeView,
+              },
+            ],
+          },
+        ],
       },
     });
   },