Merge pull request #26 from kwinyyyc/feat/custom-config

feat: allow customizing the toolbar commands

.gitignore

@@ -8,3 +8,4 @@ package-lock.json
 .DS_Store
 npm-debug.log
 .idea
+dist/

.npmignore

@@ -0,0 +1,10 @@
+# Don't check auto-generated stuff into git
+coverage
+node_modules
+stats.json
+package-lock.json
+
+# Cruft
+.DS_Store
+npm-debug.log
+.idea

README.md

@@ -4,6 +4,43 @@ This is a [strapi](https://github.com/strapi/strapi) rich text editor plugin bas
 
 ![](screenshot.png)
 
+## Customizing the toolbar commands
+Default it uses below commands in sequence:
+`[
+    "title2",
+    "title3",
+    "title4",
+    "title5",
+    "title6",
+    "divider",
+    "bold",
+    "codeBlock",
+    "italic",
+    "strikethrough",
+    "hr",
+    "group",
+    "divider",
+    "link",
+    "quote",
+    "code",
+    "unorderedListCommand",
+    "orderedListCommand",
+    "checkedListCommand",
+    "strapiMediaLibrary"
+]`
+
+You can customize the value in plugins/config.ts file.
+```json
+export default {
+    "wysiwyg-react-md-editor": {
+        enabled: true,
+        config: {
+            toolbarCommands: ["title1", "strapiMediaLibrary"],
+        },
+    }
+}
+```
+
 ## Get started
 With yarn:
 
@@ -19,3 +56,4 @@ With yarn:
 $ yarn build
 $ yarn run develop
 ```
+

admin/src/components/Initializer/index.tsx

@@ -0,0 +1,24 @@
+/**
+ *
+ * Initializer
+ *
+ */
+
+import { useEffect, useRef } from 'react';
+import pluginId from '../../pluginId';
+
+type InitializerProps = {
+  setPlugin: (id: string) => void;
+};
+
+const Initializer = ({ setPlugin }: InitializerProps) => {
+  const ref = useRef(setPlugin);
+
+  useEffect(() => {
+    ref.current(pluginId);
+  }, []);
+
+  return null;
+};
+
+export default Initializer;

admin/src/components/ReactMdEditor/index.js → admin/src/components/ReactMdEditor/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import PropTypes from "prop-types";
 import MDEditor, { commands } from "@uiw/react-md-editor";
 import MediaLib from "../MediaLib";
@@ -8,6 +8,8 @@ import { Stack } from "@strapi/design-system/Stack";
 import { Box } from "@strapi/design-system/Box";
 import { Typography } from "@strapi/design-system/Typography";
 import { useIntl } from "react-intl";
+import pluginId from "../../pluginId";
+import { ICommand } from "@uiw/react-md-editor";
 
 const Wrapper = styled.div`
   > div:nth-child(2) {
@@ -95,6 +97,65 @@ const Editor = ({
     handleToggleMediaLib();
   };
 
+  const [configs, setConfigs] = useState<{ toolbarCommands?: string[] }>({});
+
+  const toolbarCommands: ICommand[] = useMemo(() => {
+    const strapiMediaLibrary = {
+      name: "image",
+      keyCommand: "image",
+      buttonProps: { "aria-label": "Insert title3" },
+      icon: (
+        <svg width="12" height="12" viewBox="0 0 20 20">
+          <path
+            fill="currentColor"
+            d="M15 9c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4-7H1c-.55 0-1 .45-1 1v14c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 13l-6-5-2 2-4-5-4 8V4h16v11z"
+          ></path>
+        </svg>
+      ),
+      execute: (state, api) => {
+        setMediaLibSelection(state.selection.end);
+        handleToggleMediaLib();
+      },
+    };
+    if (!configs?.toolbarCommands) {
+      return [
+        commands.title2,
+        commands.title3,
+        commands.title4,
+        commands.title5,
+        commands.title6,
+        commands.divider,
+        commands.bold,
+        commands.codeBlock,
+        commands.italic,
+        commands.strikethrough,
+        commands.hr,
+        commands.group,
+        commands.divider,
+        commands.link,
+        commands.quote,
+        commands.code,
+        strapiMediaLibrary,
+        commands.unorderedListCommand,
+        commands.orderedListCommand,
+        commands.checkedListCommand,
+      ];
+    }
+    const customCommands = configs?.toolbarCommands?.map((config) => {
+      if (config === "strapiMediaLibrary") return strapiMediaLibrary;
+      if (commands[config]) return commands[config];
+    });
+    return customCommands;
+  }, [JSON.stringify(configs)]);
+
+  useEffect(() => {
+    fetch(`/${pluginId}`)
+      .then((response) => response.json())
+      .then((data) => {
+        setConfigs(data);
+      });
+  }, []);
+
   return (
     <Stack size={1}>
       <Box>
@@ -110,44 +171,7 @@ const Editor = ({
       <Wrapper>
         <MDEditor
           disabled={disabled}
-          commands={[
-            commands.title2,
-            commands.title3,
-            commands.title4,
-            commands.title5,
-            commands.title6,
-            commands.divider,
-            commands.bold,
-            commands.codeBlock,
-            commands.italic,
-            commands.strikethrough,
-            commands.hr,
-            commands.group,
-            commands.divider,
-            commands.link,
-            commands.quote,
-            commands.code,
-            {
-              name: "image",
-              keyCommand: "image",
-              buttonProps: { "aria-label": "Insert title3" },
-              icon: (
-                <svg width="12" height="12" viewBox="0 0 20 20">
-                  <path
-                    fill="currentColor"
-                    d="M15 9c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4-7H1c-.55 0-1 .45-1 1v14c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 13l-6-5-2 2-4-5-4 8V4h16v11z"
-                  ></path>
-                </svg>
-              ),
-              execute: (state, api) => {
-                setMediaLibSelection(state.selection.end);
-                handleToggleMediaLib();
-              },
-            },
-            commands.unorderedListCommand,
-            commands.orderedListCommand,
-            commands.checkedListCommand,
-          ]}
+          commands={toolbarCommands}
           value={value || ""}
           onChange={(newValue) => {
             onChange({ target: { name, value: newValue || "" } });

admin/src/index.tsx

@@ -0,0 +1,49 @@
+import { prefixPluginTranslations } from "@strapi/helper-plugin";
+
+import pluginPkg from "../../package.json";
+import pluginId from "./pluginId";
+import Initializer from "./components/Initializer";
+import PluginIcon from "./components/PluginIcon";
+import ReactMdEditor from "./components/ReactMdEditor";
+
+const name = pluginPkg.strapi.name;
+
+export default {
+  register(app: any) {
+    app.addFields({ type: "wysiwyg", Component: ReactMdEditor });
+    const plugin = {
+      id: pluginId,
+      initializer: Initializer,
+      isReady: false,
+      name,
+    };
+
+    app.registerPlugin(plugin);
+  },
+
+  bootstrap(app: any) {},
+
+  async registerTrads(app: any) {
+    const { locales } = app;
+
+    const importedTrads = await Promise.all(
+      (locales as any[]).map((locale) => {
+        return import(`./translations/${locale}.json`)
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, pluginId),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
+};

admin/src/pluginId.ts

@@ -0,0 +1,5 @@
+import pluginPkg from '../../package.json';
+
+const pluginId = pluginPkg.name.replace(/^(@[^-,.][\w,-]+\/|strapi-)plugin-/i, '');
+
+export default pluginId;

admin/src/translations/en.json

@@ -0,0 +1 @@
+{}

admin/src/translations/fr.json

@@ -0,0 +1 @@
+{}

admin/src/utils/getTrad.ts

@@ -0,0 +1,5 @@
+import pluginId from '../pluginId';
+
+const getTrad = (id: string) => `${pluginId}.${id}`;
+
+export default getTrad;

custom.d.ts

@@ -0,0 +1,6 @@
+declare module "@strapi/design-system/*";
+declare module "@strapi/design-system";
+declare module "@strapi/icons";
+declare module "@strapi/icons/*";
+declare module "@strapi/helper-plugin";
+declare module "@strapi/strapi";