Merge pull request #1482 from merico-dev/1455-format-input-output-of-…

…inline-function-editor 1455 format input output of inline function editor
merico-dev · Jul 22, 2024 · 4da6180 · 4da6180
2 parents 65a3f6c + b545a10
commit 4da6180
Show file tree

Hide file tree

Showing 13 changed files with 80 additions and 51 deletions.
diff --git a/api/package.json b/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "13.27.2",
+  "version": "13.27.9-beta.1",
   "description": "",
   "main": "index.js",
   "scripts": {

diff --git a/dashboard/package.json b/dashboard/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "13.27.2",
+  "version": "13.27.9-beta.1",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

diff --git a/dashboard/project.json b/dashboard/project.json
@@ -12,7 +12,7 @@
       "options": {
         "command": "exit 0"
       },
-      "dependsOn": ["vitest", "cypress"]
+      "dependsOn": ["vitest"]
     },
     "vitest": {
       "executor": "nx:run-commands",

diff --git a/dashboard/src/components/widgets/function-editor/function-editor.tsx b/dashboard/src/components/widgets/function-editor/function-editor.tsx
@@ -1,11 +1,15 @@
-import Editor, { OnMount } from '@monaco-editor/react';
-
+import Editor, { Monaco, OnMount } from '@monaco-editor/react';
+import { useEffect, useRef } from 'react';
+import * as monaco from 'monaco-editor';
 interface IFunctionEditor {
   value: TFunctionString;
   onChange: (v: TFunctionString) => void;
   onMount?: OnMount;
 }
 export const FunctionEditor = ({ value, onChange, onMount }: IFunctionEditor) => {
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
+  const monacoRef = useRef<Monaco | null>(null);
+
   const changeContent = (v?: TFunctionString) => {
     if (!v) {
       onChange('');
@@ -14,12 +18,30 @@ export const FunctionEditor = ({ value, onChange, onMount }: IFunctionEditor) =>
     onChange(v);
   };
 
+  useEffect(() => {
+    const model = editorRef.current?.getModel();
+    if (!model) {
+      return;
+    }
+    if (!model.getValue()) {
+      // init from blank
+      model.setValue(value);
+    }
+  }, [value]);
+
+  const handleOnMount: OnMount = (editor, monaco) => {
+    editorRef.current = editor;
+    monacoRef.current = monaco;
+    onMount?.(editor, monaco);
+  };
+
   return (
     <Editor
       className="function-editor"
       height="100%"
       defaultLanguage="javascript"
-      value={value}
+      // https://github.com/suren-atoyan/monaco-react/issues/402
+      defaultValue={value}
       onChange={changeContent}
       theme="vs-dark"
       options={{
@@ -32,7 +54,7 @@ export const FunctionEditor = ({ value, onChange, onMount }: IFunctionEditor) =>
           enabled: false,
         },
       }}
-      onMount={onMount}
+      onMount={handleOnMount}
     />
   );
 };
diff --git a/dashboard/src/components/widgets/inline-function-input/index.tsx b/dashboard/src/components/widgets/inline-function-input/index.tsx
@@ -5,9 +5,8 @@ import { AboutFunctionUtils } from '../about-function-utils';
 import { FunctionEditor, MonacoEditorRestriction } from '../function-editor';
 import { useTranslation } from 'react-i18next';
 import { OnMount } from '@monaco-editor/react';
-// @ts-expect-error types of constrained-editor-plugin
-import { constrainedEditor } from 'constrained-editor-plugin';
-
+// @ts-expect-error type of this lib
+import { constrainedEditor } from 'constrained-editor-plugin/dist/esm/constrainedEditor.js';
 interface IInlineFunctionInput {
   value: TFunctionString;
   onChange: (v: TFunctionString) => void;
@@ -37,26 +36,29 @@ export const InlineFunctionInput = forwardRef(
       setLocalValue(value);
     }, [value]);
 
-    const applyRestrictions: OnMount = useCallback((editor, monaco) => {
-      if (restrictions.length === 0) {
-        return;
-      }
+    const applyRestrictions: OnMount = useCallback(
+      (editor, monaco) => {
+        if (restrictions.length === 0) {
+          return;
+        }
 
-      const constrainedInstance = constrainedEditor(monaco);
-      const model = editor.getModel() as any;
-      constrainedInstance.initializeIn(editor);
-      constrainedInstance.addRestrictionsTo(model, restrictions);
-      if (!model) {
-        return;
-      }
-      if (!model._hasHighlight) {
-        constrainedInstance.toggleDevMode();
-        model.toggleHighlightOfEditableAreas();
-        const currentRanges = model.getCurrentEditableRanges();
-        const currentValue = model.getValueInEditableRanges();
-        console.debug({ model, currentRanges, currentValue });
-      }
-    }, []);
+        const constrainedInstance = constrainedEditor(monaco);
+        const model = editor.getModel() as any;
+        constrainedInstance.initializeIn(editor);
+        constrainedInstance.addRestrictionsTo(model, restrictions);
+        if (!model) {
+          return;
+        }
+        if (!model._hasHighlight) {
+          constrainedInstance.toggleDevMode();
+          model.toggleHighlightOfEditableAreas();
+          const currentRanges = model.getCurrentEditableRanges();
+          const currentValue = model.getValueInEditableRanges();
+          console.debug({ model, currentRanges, currentValue });
+        }
+      },
+      [restrictions],
+    );
 
     const hasChanges = localValue !== value;
 

diff --git a/...oard/src/components/widgets/rich-text-editor/dynamic-color-mark/dynamic-color-control.tsx b/...oard/src/components/widgets/rich-text-editor/dynamic-color-mark/dynamic-color-control.tsx
@@ -5,7 +5,7 @@ import { Editor } from '@tiptap/react';
 import { useTranslation } from 'react-i18next';
 import { ModalFunctionEditor } from '../../modal-function-editor';
 import { DynamicColorAttrKey, DynamicColorName } from './dynamic-color-mark';
-import { DefaultDynamicColorFunc, getDynamicColorRestrictions } from './utils';
+import { DefaultDynamicColorFunc, completeDynamicColorFunc, getDynamicColorRestrictions } from './utils';
 
 const renderTriggerButton = ({ onClick }: { onClick: () => void }) => {
   const { t } = useTranslation();
@@ -32,13 +32,15 @@ const renderTriggerButton = ({ onClick }: { onClick: () => void }) => {
 export const DynamicColorControl = ({ editor }: { editor: Editor }) => {
   const { t } = useTranslation();
   const currentDynamicColor = editor.getAttributes(DynamicColorName)[DynamicColorAttrKey] ?? '';
+  const value = completeDynamicColorFunc(currentDynamicColor);
+  const restrictions = getDynamicColorRestrictions(currentDynamicColor);
   return (
     <>
       <ModalFunctionEditor
         title={t('rich_text.dynamic_color.edit')}
         label=""
         triggerLabel={''}
-        value={currentDynamicColor}
+        value={value}
         onChange={(v: string) => {
           if (!v) {
             editor.chain().focus().unsetDynamicColor().run();
@@ -48,7 +50,7 @@ export const DynamicColorControl = ({ editor }: { editor: Editor }) => {
         }}
         defaultValue={DefaultDynamicColorFunc}
         renderTriggerButton={renderTriggerButton}
-        restrictions={getDynamicColorRestrictions(currentDynamicColor)}
+        restrictions={restrictions}
         zIndex={340}
       />
       <Tooltip label={t('rich_text.dynamic_color.clear')}>

diff --git a/dashboard/src/components/widgets/rich-text-editor/dynamic-color-mark/dynamic-color-mark.tsx b/dashboard/src/components/widgets/rich-text-editor/dynamic-color-mark/dynamic-color-mark.tsx
@@ -59,9 +59,9 @@ export const DynamicColorMark = Mark.create({
       setDynamicColor:
         (v) =>
         ({ commands }) => {
-          // const value = trimDynamicColorFunc(v);
+          const value = trimDynamicColorFunc(v);
           return commands.setMark(this.name, {
-            [AttrKey]: v,
+            [AttrKey]: value,
           });
         },
       unsetDynamicColor:

diff --git a/dashboard/src/components/widgets/rich-text-editor/dynamic-color-mark/utils.ts b/dashboard/src/components/widgets/rich-text-editor/dynamic-color-mark/utils.ts
@@ -7,40 +7,35 @@ const tail = '}';
 export const DefaultDynamicColorFuncLines = [head, '    return "red";', tail];
 export const DefaultDynamicColorFunc = DefaultDynamicColorFuncLines.join('\n');
 export function getDynamicColorRestrictions(code: string): MonacoEditorRestriction[] {
-  const lines = code.split('\n');
-  if (lines.length === 2) {
-    console.warn('[getDynamicColorRestrictions]unexpected lines of code: ', code);
+  if (!code) {
     return [];
   }
+  const lines = code.split('\n');
 
-  const lastContentLine = lines[lines.length - 2];
-  if (!lastContentLine) {
-    return [];
+  const lastLineIndex = lines.length + 1;
+  let lastLineColumn = 1;
+  const lastContentLine = lines[lines.length - 1];
+  if (lastContentLine) {
+    lastLineColumn = lastContentLine.length + 1;
   }
 
   return [
     {
-      range: [2, 1, lines.length - 1, lastContentLine.length + 1],
+      range: [2, 1, lastLineIndex, lastLineColumn],
       label: 'body',
       allowMultiline: true,
     },
   ];
 }
 
-// TODO: use it after https://github.com/merico-dev/table/issues/1455
 export const trimDynamicColorFunc = (raw: string) => {
   if (!raw) {
     return raw;
   }
-  const ret = raw
-    .replace(DefaultDynamicColorFuncLines[0], '')
-    .replace(/[\r\n]+/gm, '')
-    .replace(/(.+)\}$/, '$1')
-    .trim();
+  const ret = raw.replace(head, '').replace(/(.*)\}$/, '$1');
   return ret;
 };
 
-// TODO: use it after https://github.com/merico-dev/table/issues/1455
 export const completeDynamicColorFunc = (trimmed: string) => {
   if (!trimmed || trimmed.startsWith(head)) {
     return trimmed;

diff --git a/dashboard/vite.config.ts b/dashboard/vite.config.ts
@@ -77,6 +77,10 @@ export default defineConfig({
       react: 'react',
       'react/jsx-runtime.js': 'react/jsx-runtime.js',
       'reactflow/dist/style.css': 'reactflow/dist/style.css',
+      'constrained-editor-plugin/dist/esm/constrainedEditor.js': resolve(
+        __dirname,
+        '../node_modules/constrained-editor-plugin/dist/esm/constrainedEditor.js',
+      ),
     },
   },
   build: {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "13.27.2",
+  "version": "13.27.9-beta.1",
   "private": true,
   "workspaces": [
     "api",

diff --git a/settings-form/package.json b/settings-form/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "13.27.2",
+  "version": "13.27.9-beta.1",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

diff --git a/website/package.json b/website/package.json
@@ -2,7 +2,7 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "13.27.2",
+  "version": "13.27.9-beta.1",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview"

diff --git a/website/vite.config.ts b/website/vite.config.ts
@@ -41,6 +41,10 @@ export default ({ mode }) => {
         '@devtable/dashboard': workspace('dashboard', 'src'),
         '@devtable/settings-form': workspace('settings-form', 'src'),
         'dayjs/locale': path.resolve(__dirname, '../node_modules/dayjs/locale'),
+        'constrained-editor-plugin/dist/esm/constrainedEditor.js': path.resolve(
+          __dirname,
+          '../node_modules/constrained-editor-plugin/dist/esm/constrainedEditor.js',
+        ),
       },
     },
     optimizeDeps: {