Merge remote-tracking branch 'origin/feat/1.7.2/ui' into test

Author: LinkinStars

ui/.gitignore

@@ -1,7 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+node_modules
 /.pnp
 .pnp.js
 
@@ -36,6 +36,4 @@ package-lock.json
 /src/plugins/*
 !/src/plugins/builtin
 !/src/plugins/Demo
-!/src/plugins/answer-chart
-!/src/plugins/answer-formula
 /src/plugins/*/*.go

ui/pnpm-lock.yaml

@@ -19,6 +19,6 @@
 
 import React from 'react';
 
-import { IEditorContext } from './types';
+import { Editor } from './types';
 
-export const EditorContext = React.createContext<IEditorContext | any>({});
+export const EditorContext = React.createContext<Editor | null>(null);

ui/src/components/Editor/EditorContext.ts

@@ -0,0 +1,98 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useEffect, useRef } from 'react';
+
+import { EditorView } from '@codemirror/view';
+
+import { BaseEditorProps } from './types';
+import { useEditor } from './utils';
+
+interface MarkdownEditorProps extends BaseEditorProps {}
+
+const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+  placeholder,
+  autoFocus,
+  onEditorReady,
+}) => {
+  const editorRef = useRef<HTMLDivElement>(null);
+  const lastSyncedValueRef = useRef<string>(value);
+  const isInitializedRef = useRef<boolean>(false);
+
+  const editor = useEditor({
+    editorRef,
+    onChange,
+    onFocus,
+    onBlur,
+    placeholder,
+    autoFocus,
+    initialValue: value,
+  });
+
+  useEffect(() => {
+    if (!editor || isInitializedRef.current) {
+      return;
+    }
+
+    isInitializedRef.current = true;
+    onEditorReady?.(editor);
+  }, [editor, onEditorReady]);
+
+  useEffect(() => {
+    if (!editor || value === lastSyncedValueRef.current) {
+      return;
+    }
+
+    const currentValue = editor.getValue();
+    if (currentValue !== value) {
+      editor.setValue(value || '');
+      lastSyncedValueRef.current = value || '';
+    }
+  }, [editor, value]);
+
+  useEffect(() => {
+    lastSyncedValueRef.current = value;
+    isInitializedRef.current = false;
+
+    return () => {
+      if (editor) {
+        const view = editor as unknown as EditorView;
+        if (view.destroy) {
+          view.destroy();
+        }
+      }
+      isInitializedRef.current = false;
+    };
+  }, []);
+
+  return (
+    <div className="content-wrap">
+      <div
+        className="md-editor position-relative w-100 h-100"
+        ref={editorRef}
+      />
+    </div>
+  );
+};
+
+export default MarkdownEditor;

ui/src/components/Editor/MarkdownEditor.tsx

@@ -21,9 +21,8 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import ToolItem from '../toolItem';
-import { IEditorContext } from '../types';
+import { Editor } from '../types';
 
-let context: IEditorContext;
 const BlockQuote = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'editor' });
 
@@ -33,21 +32,9 @@ const BlockQuote = () => {
     tip: `${t('blockquote.text')} (Ctrl+Q)`,
   };
 
-  const handleClick = (ctx) => {
-    context = ctx;
-    context.replaceLines((line) => {
-      const FIND_BLOCKQUOTE_RX = /^>\s+?/g;
-
-      if (line === `> ${t('blockquote.text')}`) {
-        line = '';
-      } else if (line.match(FIND_BLOCKQUOTE_RX)) {
-        line = line.replace(FIND_BLOCKQUOTE_RX, '');
-      } else {
-        line = `> ${line || t('blockquote.text')}`;
-      }
-      return line;
-    }, 2);
-    context.editor?.focus();
+  const handleClick = (editor: Editor) => {
+    editor.insertBlockquote(t('blockquote.text'));
+    editor.focus();
   };
 
   return <ToolItem {...item} onClick={handleClick} />;

ui/src/components/Editor/ToolBars/blockquote.tsx

@@ -21,9 +21,8 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import ToolItem from '../toolItem';
-import { IEditorContext } from '../types';
+import { Editor } from '../types';
 
-let context: IEditorContext;
 const Bold = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'editor' });
   const item = {
@@ -33,10 +32,9 @@ const Bold = () => {
   };
   const DEFAULTTEXT = t('bold.text');
 
-  const handleClick = (ctx) => {
-    context = ctx;
-    context.wrapText('**', '**', DEFAULTTEXT);
-    context.editor?.focus();
+  const handleClick = (editor: Editor) => {
+    editor.insertBold(DEFAULTTEXT);
+    editor.focus();
   };
 
   return <ToolItem {...item} onClick={handleClick} />;