feat: v4.0.39 编辑器(可选)

src/Rich/components/Editor/index.tsx

@@ -1,58 +1,49 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styles from './index.less';
 import { Utils } from '@hocgin/ui';
 import { useMount } from 'ahooks';
 
 const EDITOR_ID = 'rich-editor';
-let RichEditor: any = <></>;
-
-const Index: React.FC<{
-  value?: string;
-  onChange?: (value?: string) => void;
-}> = (props, ref) => {
-  let { onChange } = props;
-  let [value, setValue] = useState(props?.value || '');
-  let [init, setInit] = useState(false);
-
-  let onFinally = () => {
-    setValue(RichEditor?.createEditorState(value, { editorId: EDITOR_ID }));
-    setInit(true);
-  };
-
-  useMount(() => {
-    if (Utils.Lang.isServer()) {
-      return;
-    }
-
-    let re = require('braft-editor');
-    if (re) {
+const RichEditor: React.FC<any> = ({ value, ...rest }: any) => {
+  if (Utils.Lang.isServer()) {
+    return <></>;
+  }
+  let [text, setText] = useState(undefined);
+
+  try {
+    let RichEd = require('braft-editor')?.default;
+    useMount(() => setText(RichEd?.createEditorState?.(value, { editorId: EDITOR_ID })));
+    if (RichEd) {
       require('braft-editor/dist/index.css');
       require('braft-extensions/dist/code-highlighter.css');
       require('braft-extensions/dist/table.css');
-      RichEditor = re.default;
 
       let codeHighlighter = require('braft-extensions/dist/code-highlighter.js');
       if (codeHighlighter) {
-        RichEditor.use(codeHighlighter.default());
+        RichEd.use(codeHighlighter.default());
       }
 
       let table = require('braft-extensions/dist/table.js');
       if (table) {
-        RichEditor.use(table.default());
+        RichEd.use(table.default());
       }
 
       let markdown = require('braft-extensions/dist/markdown.js');
       if (markdown) {
-        RichEditor.use(markdown.default());
+        RichEd.use(markdown.default());
       }
     }
-  });
+    return <div className={styles.rich}><RichEd value={text} {...rest} /></div>;
+  } catch (e) {
+    return <div>需要安装 braft-editor</div>;
+  }
+};
 
-  return (
-    <div className={styles.rich}>
-      {init && <RichEditor id={EDITOR_ID} value={value} onChange={onChange} />}
-    </div>
-  );
+const Index: React.FC<{
+  value?: string;
+  onChange?: (value?: string) => void;
+}> = ({ value, onChange }, ref) => {
+  return <RichEditor id={EDITOR_ID} value={value} onChange={onChange} />;
 };
 
 export default Index;

src/Rich/components/Preview/index.tsx

@@ -1,24 +1,26 @@
-import React, { Component } from 'react';
+import React from 'react';
 import styles from './index.less';
-import { Utils } from '@/index';
-import { useMount } from 'ahooks';
+import { Utils } from '@hocgin/ui';
+
+const Preview: React.FC<any> = ({ children, ...rest }: any) => {
+  if (Utils.Lang.isServer()) {
+    return <></>;
+  }
+  try {
+    require('braft-extensions/dist/code-highlighter.css');
+    let dangerouslySetInnerHTML = { __html: `${children}` };
+    return <div className={styles.richPreview}>
+      <div dangerouslySetInnerHTML={dangerouslySetInnerHTML} />
+    </div>;
+  } catch (e) {
+    return <div>需要安装 @uiw/react-md-editor</div>;
+  }
+};
 
 const Index: React.FC<{
   children?: string;
 }> = ({ children }, ref) => {
-  useMount(() => {
-    if (Utils.Lang.isServer()) {
-      return;
-    }
-    require('braft-extensions/dist/code-highlighter.css');
-  });
-
-  let dangerouslySetInnerHTML = { __html: `${children}` };
-  return (
-    <div className={styles.richPreview}>
-      <div dangerouslySetInnerHTML={dangerouslySetInnerHTML} />
-    </div>
-  );
+  return <Preview>{children}</Preview>;
 };
 
 export default Index;