Merge pull request #53 from kwinyyyc/fix/prod-build

fix: prod build issue #52

Author: kwinyyyc

README.md

@@ -57,3 +57,4 @@ $ yarn build
 $ yarn run develop
 ```
 
+

admin/src/components/CustomField.tsx

@@ -1,10 +1,11 @@
+import "@uiw/react-md-editor/markdown-editor.css";
+import "@uiw/react-markdown-preview/markdown.css";
 import { FC as FunctionComponent, useState, useEffect, useMemo } from "react";
 import { Flex, Field } from "@strapi/design-system";
 import type { Schema } from "@strapi/types";
 import { commands, ICommand } from "@uiw/react-md-editor";
 import { useIntl } from "react-intl";
 import { styled } from "styled-components";
-import "@uiw/react-markdown-preview/markdown.css";
 import { PLUGIN_ID } from "../utils/pluginId";
 import MediaLib from "./MediaLib";
 import { useField } from "@strapi/strapi/admin";

admin/src/components/CustomMDEditor.tsx

@@ -1,25 +1,24 @@
-import React, { useState,useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import MDEditor from "@uiw/react-md-editor";
 
-const CustomMDEditor = (props:any) => {
-
+const CustomMDEditor = (props: any) => {
   const [value, setValue] = useState<string | undefined>(props.value);
 
   useEffect(() => {
-    setValue(props.value)
+    setValue(props.value);
   }, [props.value]);
 
   useEffect(() => {
     props.onChange(value);
   }, [value]);
 
   return (
-      <MDEditor
-        value={value}
-        onChange={setValue}
-        hidden={props.hidden}
-        commands={props.commands}
-      />
+    <MDEditor
+      value={value}
+      onChange={setValue}
+      hidden={props.hidden}
+      commands={props.commands}
+    />
   );
 };
 

admin/src/index.ts

@@ -1,22 +1,30 @@
 import pluginPkg from "../../package.json";
-import {PLUGIN_ID} from './utils/pluginId';
+import { PLUGIN_ID } from "./utils/pluginId";
 import { Initializer } from "./components/Initializer";
 import { CustomField } from "./components/CustomField";
+
 import { getTranslation } from "./utils/getTranslation";
 
 const name = pluginPkg.strapi.name;
 
 export default {
   register(app: any) {
-    app.addFields({ type: "richtext", Component: CustomField });
-    const plugin = {
-      id: PLUGIN_ID,
-      initializer: Initializer,
-      isReady: false,
+    app.customFields.register({
       name,
-    };
-
-    app.registerPlugin(plugin);
+      type: "richtext",
+      pluginId: PLUGIN_ID,
+      intlLabel: {
+        id: `${PLUGIN_ID}.label`,
+        defaultMessage: PLUGIN_ID,
+      },
+      intlDescription: {
+        id: `${PLUGIN_ID}.description`,
+        defaultMessage: "The markdown text editor for every use case",
+      },
+      components: {
+        Input: async () => await import("./components/CustomField"),
+      },
+    });
   },
   async registerTrads({ locales }: any) {
     const importedTrads = await Promise.all(

package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-wysiwyg-react-md-editor",
-  "version": "5.8.2",
+  "version": "5.8.3",
   "description": "Replaces the default Strapi WYSIWYG editor with react md editor.",
   "keywords": [
     "strapi",
@@ -90,7 +90,7 @@
     "@uiw/react-md-editor": "^4.0.0"
   },
   "devDependencies": {
-    "@strapi/icons": "^2.0.0-rc.11",
+    "@strapi/icons": "^2.0.1",
     "@strapi/sdk-plugin": "^5.2.6",
     "@strapi/strapi": "^5.0.2",
     "@strapi/typescript-utils": "^5.0.2",
@@ -106,7 +106,7 @@
     "typescript": "^5.6.0"
   },
   "peerDependencies": {
-    "@strapi/icons": "^2.0.0-rc.11",
+    "@strapi/icons": "^2.0.1",
     "@strapi/sdk-plugin": "^5.2.6",
     "@strapi/strapi": "^5.0.2",
     "@strapi/typescript-utils": "^5.0.2",