@nocobase/client-v2 2.1.0-alpha.21 → 2.1.0-alpha.23

package/src/flow/components/code-editor/__tests__/useCodeRunner.test.tsx

@@ -0,0 +1,273 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { renderHook, act } from '@testing-library/react-hooks';
+import { render, waitFor } from '@testing-library/react';
+import { App, ConfigProvider } from 'antd';
+import { useCodeRunner } from '../hooks/useCodeRunner';
+import {
+  FlowEngine,
+  FlowModel,
+  FlowEngineProvider,
+  FlowModelRenderer,
+  ElementProxy,
+  createSafeWindow,
+  createSafeDocument,
+} from '@nocobase/flow-engine';
+import { JSEditableFieldModel } from '../../../models/fields/JSEditableFieldModel';
+
+// Minimal beforeRender event model that executes preview code
+class DummyJsAutoModel extends FlowModel {
+  render() {
+    return <span data-testid={`dummy-${this.uid}`} ref={this.context.ref as any} />;
+  }
+}
+
+describe('useCodeRunner (beforeRender)', () => {
+  it('logs success and captures console output', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DummyJsAutoModel });
+    const model = engine.createModel<DummyJsAutoModel>({ use: 'DummyJsAutoModel', uid: 'm-run' });
+    model.registerFlow('jsSettings', {
+      steps: {
+        runJs: {
+          useRawParams: true,
+          async handler(ctx) {
+            const code = ctx?.inputArgs?.preview?.code || '';
+            return ctx.runjs(code, undefined, { preprocessTemplates: true });
+          },
+        },
+      },
+    });
+
+    const { result } = renderHook(() => useCodeRunner(model.context, 'v1'));
+
+    await act(async () => {
+      await result.current.run('console.log("hello"); return 1');
+    });
+
+    expect(result.current.logs.some((l) => l.msg?.includes('Execution succeeded'))).toBe(true);
+    expect(result.current.logs.some((l) => l.level === 'log' && l.msg.includes('hello'))).toBe(true);
+    expect(result.current.running).toBe(false);
+  });
+
+  it('captures ctx.logger output into logs panel', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DummyJsAutoModel });
+    const model = engine.createModel<DummyJsAutoModel>({ use: 'DummyJsAutoModel', uid: 'm-logger' });
+    model.registerFlow('jsSettings', {
+      steps: {
+        runJs: {
+          useRawParams: true,
+          async handler(ctx) {
+            const code = ctx?.inputArgs?.preview?.code || '';
+            return ctx.runjs(code, undefined, { preprocessTemplates: true });
+          },
+        },
+      },
+    });
+
+    const { result } = renderHook(() => useCodeRunner(model.context, 'v1'));
+
+    await act(async () => {
+      await result.current.run('ctx.logger.info("hello-logger"); return 1');
+    });
+
+    expect(result.current.logs.some((l) => l.level === 'info' && l.msg.includes('hello-logger'))).toBe(true);
+  });
+
+  it('logs error message on failure', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DummyJsAutoModel });
+    const model = engine.createModel<DummyJsAutoModel>({ use: 'DummyJsAutoModel', uid: 'm-err' });
+    model.registerFlow('jsSettings', {
+      steps: {
+        runJs: {
+          useRawParams: true,
+          async handler(ctx) {
+            const code = ctx?.inputArgs?.preview?.code || '';
+            return ctx.runjs(code, undefined, { preprocessTemplates: true });
+          },
+        },
+      },
+    });
+
+    const { result } = renderHook(() => useCodeRunner(model.context, 'v1'));
+    await act(async () => {
+      await result.current.run('throw new Error("boom")');
+    });
+
+    expect(result.current.logs.some((l) => l.level === 'error' && /boom/i.test(l.msg))).toBe(true);
+    expect(result.current.running).toBe(false);
+  });
+
+  it('previews and updates DOM for JSEditable (beforeRender)', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ JSEditableFieldModel });
+    const field = engine.createModel<JSEditableFieldModel>({ use: 'JSEditableFieldModel', uid: 'f1' });
+    field.setProps('value', 'INIT');
+
+    render(
+      <ConfigProvider>
+        <App>
+          <FlowEngineProvider engine={engine}>
+            <FlowModelRenderer model={field} />
+          </FlowEngineProvider>
+        </App>
+      </ConfigProvider>,
+    );
+
+    const { result } = renderHook(() => useCodeRunner(field.context, 'v1'));
+    await act(async () => {
+      await result.current.run(
+        'ctx.element.innerHTML = `<span id="out">${ctx.getValue ? ctx.getValue() : "NO"}</span>`; ctx.setValue && ctx.setValue("NEW");',
+      );
+    });
+
+    await waitFor(() => {
+      const text = document.querySelector('#out')?.textContent;
+      expect(text === 'INIT' || text === 'NEW').toBe(true);
+    });
+    expect(field.getProps().value).toBe('NEW');
+  });
+
+  it('previews on a forked view updates the fork DOM', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DummyJsAutoModel });
+    const master = engine.createModel<DummyJsAutoModel>({ use: 'DummyJsAutoModel', uid: 'm2' });
+    master.registerFlow('jsSettings', {
+      steps: {
+        runJs: {
+          useRawParams: true,
+          async handler(ctx) {
+            const code = ctx?.inputArgs?.preview?.code || '';
+            ctx.onRefReady(ctx.ref, async (el) => {
+              ctx.defineProperty('element', { get: () => new ElementProxy(el as any) });
+              await ctx.runjs(
+                code,
+                { window: createSafeWindow(), document: createSafeDocument() },
+                { preprocessTemplates: true },
+              );
+            });
+          },
+        },
+      },
+    });
+    const fork = master.createFork({}, 'row-1');
+
+    render(
+      <ConfigProvider>
+        <App>
+          <FlowEngineProvider engine={engine}>
+            <>
+              <FlowModelRenderer model={master} />
+              <FlowModelRenderer model={fork as any} />
+            </>
+          </FlowEngineProvider>
+        </App>
+      </ConfigProvider>,
+    );
+
+    // ensure both master and fork containers are mounted
+    await waitFor(() => {
+      const nodes = document.querySelectorAll('[data-testid="dummy-m2"]');
+      expect(nodes.length).toBeGreaterThanOrEqual(2);
+    });
+    const { result } = renderHook(() => useCodeRunner(master.context, 'v1'));
+    await act(async () => {
+      await result.current.run('ctx.element.setAttribute("data-preview", "FORKED")');
+    });
+
+    await waitFor(() => {
+      const nodes = Array.from(document.querySelectorAll('[data-testid="dummy-m2"]')) as HTMLElement[];
+      expect(nodes.some((el) => el.getAttribute('data-preview') === 'FORKED')).toBe(true);
+    });
+  });
+
+  it('compiles JSX in preview and renders antd Input without syntax error', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DummyJsAutoModel });
+    const model = engine.createModel<DummyJsAutoModel>({ use: 'DummyJsAutoModel', uid: 'm-jsx' });
+    // beforeRender-like flow that binds ctx.element and runs preview code
+    model.registerFlow('jsSettings', {
+      steps: {
+        runJs: {
+          useRawParams: true,
+          async handler(ctx) {
+            const code = ctx?.inputArgs?.preview?.code || '';
+            ctx.onRefReady(ctx.ref, async (el) => {
+              ctx.defineProperty('element', { get: () => new ElementProxy(el as any) });
+              const navigator = { userAgent: 'test' } as any;
+              await ctx.runjs(
+                code,
+                {
+                  window: createSafeWindow({ navigator }),
+                  document: createSafeDocument(),
+                  navigator,
+                },
+                { preprocessTemplates: true },
+              );
+            });
+          },
+        },
+      },
+    });
+
+    render(
+      <ConfigProvider>
+        <App>
+          <FlowEngineProvider engine={engine}>
+            <FlowModelRenderer model={model} />
+          </FlowEngineProvider>
+        </App>
+      </ConfigProvider>,
+    );
+
+    const { result } = renderHook(() => useCodeRunner(model.context, 'v1'));
+
+    const jsxCode = `
+function JsReadonlyField() {
+  const React = ctx.React;
+  const { Input } = ctx.antd;
+  return (
+    <Input
+      value={String(ctx.value ?? '')}
+      disabled
+      readOnly
+      style={{ width: '100%' }}
+    />
+  );
+}
+ctx.render(<JsReadonlyField />);
+`;
+
+    await act(async () => {
+      // Simulate settings form: step params store user's original source (JSX)
+      model.setStepParams('jsSettings', 'runJs', { code: jsxCode, version: 'v1' });
+      await result.current.run(jsxCode);
+    });
+
+    // Should not rewrite user's source code into compiled output (e.g. ctx.React.createElement)
+    const saved = model.getStepParams('jsSettings', 'runJs')?.code;
+    expect(saved).toContain('<Input');
+    expect(saved).not.toContain('ctx.React.createElement');
+
+    // Should succeed and render antd input into the model container
+    await waitFor(() => {
+      expect(result.current.logs.some((l) => l.msg?.includes('Execution succeeded'))).toBe(true);
+    });
+    await waitFor(() => {
+      // Antd input element should be present
+      const el = document.querySelector('.ant-input');
+      expect(el).toBeTruthy();
+    });
+  });
+});

package/src/flow/components/code-editor/core/EditorCore.tsx

@@ -0,0 +1,216 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React, { useEffect, useRef } from 'react';
+import {
+  autocompletion,
+  type Completion,
+  type CompletionContext,
+  type CompletionResult,
+  type CompletionSource,
+} from '@codemirror/autocomplete';
+import { lintGutter } from '@codemirror/lint';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { basicSetup } from 'codemirror';
+import { EditorView, placeholder as cmPlaceholder, tooltips } from '@codemirror/view';
+import { javascriptWithHtmlTemplates } from '../javascriptHtmlTemplate';
+import { createHtmlCompletion } from '../htmlCompletion';
+import { createJsxCompletion } from '../jsxCompletion';
+import { createJavaScriptLinter } from '../linter';
+import { resolveTooltipParent } from './tooltipParent';
+
+export const EditorCore: React.FC<{
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  height?: string | number;
+  minHeight?: string | number;
+  theme?: 'light' | 'dark';
+  readonly?: boolean;
+  enableLinter?: boolean;
+  knownCtxMemberRoots?: string[];
+  extraCompletions?: Completion[];
+  completionSource?: CompletionSource;
+  viewRef: React.MutableRefObject<EditorView | null>;
+}> = ({
+  value = '',
+  onChange,
+  placeholder = '',
+  height = '100%',
+  minHeight,
+  theme = 'light',
+  readonly = false,
+  enableLinter = false,
+  knownCtxMemberRoots,
+  extraCompletions,
+  completionSource,
+  viewRef,
+}) => {
+  const editorRef = useRef<HTMLDivElement>(null);
+  const onChangeRef = useRef<typeof onChange>();
+  // keep latest onChange without re-creating the editor
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+
+  useEffect(() => {
+    if (!editorRef.current) return;
+    const staticCompletionSource = (options: Completion[]) => {
+      const source = (context: CompletionContext): CompletionResult | null => {
+        const word = context.matchBefore(/[$_\p{Letter}][$_\p{Letter}\p{Number}.-]*/u);
+        if (!word) {
+          if (context.explicit) {
+            return { from: context.pos, to: context.pos, options };
+          }
+          return null;
+        }
+        if (word.from === word.to && !context.explicit) return null;
+        return { from: word.from, to: word.to, options };
+      };
+      return source;
+    };
+
+    const cmMinHeight =
+      typeof minHeight === 'undefined' ? undefined : typeof minHeight === 'string' ? minHeight : `${minHeight}px`;
+    const gutterTheme =
+      typeof cmMinHeight === 'string'
+        ? {
+            '.cm-gutter,.cm-content': {
+              minHeight: cmMinHeight,
+            },
+          }
+        : {};
+
+    const extensions = [
+      basicSetup,
+      javascriptWithHtmlTemplates(),
+      autocompletion({
+        override: [
+          createHtmlCompletion(),
+          createJsxCompletion(),
+          ...(typeof completionSource === 'function'
+            ? [completionSource]
+            : Array.isArray(extraCompletions) && extraCompletions.length
+              ? [staticCompletionSource(extraCompletions)]
+              : []),
+        ],
+        closeOnBlur: false,
+        activateOnTyping: true,
+      }),
+      ...(placeholder ? [cmPlaceholder(placeholder)] : []),
+      ...(enableLinter ? [lintGutter(), createJavaScriptLinter({ knownCtxMemberRoots })] : []),
+      // Prefer the current popup container so completion tooltips stay above Modal/Drawer masks.
+      tooltips({
+        parent: resolveTooltipParent(editorRef.current),
+      }),
+      EditorView.updateListener.of((update) => {
+        if (update.docChanged && !readonly) {
+          const newValue = update.state.doc.toString();
+          try {
+            onChangeRef.current?.(newValue);
+          } catch (_) {
+            void 0;
+          }
+        }
+      }),
+      EditorView.theme({
+        '&.cm-editor': {
+          height: typeof height === 'string' ? height || '100%' : `${height}px`,
+        },
+        ...gutterTheme,
+        '.cm-scroller': {
+          fontFamily: '"Fira Code", "Monaco", "Menlo", "Ubuntu Mono", monospace',
+          overflow: 'auto',
+        },
+        '.cm-placeholder': {
+          color: '#999',
+          fontStyle: 'normal',
+          whiteSpace: 'pre',
+          pointerEvents: 'none',
+        },
+        '.cm-diagnostic': {
+          padding: '4px 8px',
+          borderRadius: '4px',
+          border: '1px solid #d9d9d9',
+          backgroundColor: '#fff',
+          boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+          fontSize: '12px',
+          maxWidth: '300px',
+        },
+        '.cm-diagnostic-error': {
+          borderLeftColor: '#ff4d4f',
+          borderLeftWidth: '3px',
+        },
+        '.cm-diagnostic-warning': {
+          borderLeftColor: '#faad14',
+          borderLeftWidth: '3px',
+        },
+        '.cm-diagnostic-info': {
+          borderLeftColor: '#1890ff',
+          borderLeftWidth: '3px',
+        },
+        '.cm-lintRange-error': {
+          backgroundImage: `url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='3'><path d='m0 3 l2 -2 l1 0 l2 2 l1 0' stroke='%23ff4d4f' fill='none' stroke-width='.7'/></svg>")`,
+          backgroundRepeat: 'repeat-x',
+          backgroundPosition: 'left bottom',
+        },
+        '.cm-lintRange-warning': {
+          backgroundImage: `url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='3'><path d='m0 3 l2 -2 l1 0 l2 2 l1 0' stroke='%23faad14' fill='none' stroke-width='.7'/></svg>")`,
+          backgroundRepeat: 'repeat-x',
+          backgroundPosition: 'left bottom',
+        },
+        '.cm-lintRange-info': {
+          backgroundImage: `url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='3'><path d='m0 3 l2 -2 l1 0 l2 2 l1 0' stroke='%231890ff' fill='none' stroke-width='.7'/></svg>")`,
+          backgroundRepeat: 'repeat-x',
+          backgroundPosition: 'left bottom',
+        },
+        '.cm-tooltip': {
+          zIndex: 1,
+        },
+      }),
+    ];
+
+    if (theme === 'dark') {
+      extensions.push(oneDark);
+    }
+
+    // Preserve current document when reinitializing (e.g., theme/linters/completions change)
+    const initialDoc = (
+      viewRef.current && typeof viewRef.current.state?.doc?.toString === 'function'
+        ? viewRef.current.state.doc.toString()
+        : value || ''
+    ) as string;
+    const view = new EditorView({ doc: initialDoc, extensions, parent: editorRef.current });
+    viewRef.current = view;
+    return () => {
+      try {
+        view.destroy();
+      } catch (_) {
+        void 0;
+      }
+      viewRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [completionSource, extraCompletions, enableLinter, height, minHeight, theme, readonly, placeholder]);
+
+  // Update editor content when value changes
+  useEffect(() => {
+    const view = viewRef.current;
+    if (view && view.state.doc.toString() !== (value || '')) {
+      view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: value || '' } });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  return (
+    <>
+      <div style={{ flex: 1, minHeight: 120 }} ref={editorRef} />
+    </>
+  );
+};

package/src/flow/components/code-editor/core/tooltipParent.ts

@@ -0,0 +1,28 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+const POPUP_CONTAINER_SELECTORS = [
+  '.ant-modal-content',
+  '.ant-modal',
+  '.ant-drawer-content',
+  '.ant-drawer-content-wrapper',
+];
+
+export const resolveTooltipParent = (element: HTMLElement | null) => {
+  const doc = element?.ownerDocument ?? document;
+
+  for (const selector of POPUP_CONTAINER_SELECTORS) {
+    const popupContainer = element?.closest(selector);
+    if (popupContainer instanceof HTMLElement) {
+      return popupContainer;
+    }
+  }
+
+  return (doc.getElementById('nocobase-embed-container') as HTMLElement | null) || doc.body;
+};

package/src/flow/components/code-editor/errorHelpers.ts

@@ -0,0 +1,92 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { setDiagnostics, Diagnostic } from '@codemirror/lint';
+import { EditorView } from '@codemirror/view';
+
+export const WRAPPER_PRELUDE_LINES = 2; // (async () => {\n  try {\n  // user code starts at line 3
+
+export function clearDiagnostics(view: EditorView | null | undefined) {
+  try {
+    if (view) view.dispatch(setDiagnostics(view.state, []));
+  } catch (err) {
+    // Debug: failed to clear diagnostics
+    try {
+      console.debug?.('[errorHelpers] clearDiagnostics failed', err);
+    } catch (_) {
+      void 0;
+    }
+  }
+}
+
+export function parseErrorLineColumn(err: any): { line: number; column: number } | null {
+  const stack = String(err?.stack || err?.message || err || '');
+  const lines = stack.split('\n');
+  // Prefer RunJS user code frames (typically "<anonymous>:line:column") over external libs.
+  // Many third-party library stacks contain URL frames first (e.g. https://cdn...:175:30),
+  // which are not meaningful for mapping back to the editor.
+  for (const ln of lines) {
+    const m = ln.match(/<anonymous>:(\d+):(\d+)/);
+    if (m) return { line: parseInt(m[1], 10), column: parseInt(m[2], 10) };
+  }
+  for (const ln of lines) {
+    const m = ln.match(/:(\d+):(\d+)/); // fallback: pick first line:column found
+    if (m) {
+      const l = parseInt(m[1], 10);
+      const c = parseInt(m[2], 10);
+      if (!Number.isNaN(l) && !Number.isNaN(c)) return { line: l, column: c };
+    }
+  }
+  const m2 = stack.match(/line\s*(\d+)\D+column\s*(\d+)/i);
+  if (m2) return { line: parseInt(m2[1], 10), column: parseInt(m2[2], 10) };
+  return null;
+}
+
+export function markErrorAt(
+  view: EditorView,
+  line: number,
+  column: number,
+  message: string,
+  wrapperPreludeLines = WRAPPER_PRELUDE_LINES,
+) {
+  try {
+    if (!view) return;
+    const userLine = Math.max(1, line - wrapperPreludeLines);
+    const lineInfo = view.state.doc.line(Math.min(userLine, view.state.doc.lines));
+    const from = Math.min(lineInfo.from + Math.max(0, column - 1), lineInfo.to);
+    const to = from;
+    const diags: Diagnostic[] = [{ from, to, severity: 'error', message }];
+    view.dispatch(setDiagnostics(view.state, diags));
+    view.dispatch({ selection: { anchor: from }, scrollIntoView: true });
+  } catch (err) {
+    // Debug: failed to mark diagnostics
+    try {
+      console.debug?.('[errorHelpers] markErrorAt failed', err);
+    } catch (_) {
+      void 0;
+    }
+  }
+}
+
+export function jumpTo(view: EditorView, line: number, column: number, wrapperPreludeLines = WRAPPER_PRELUDE_LINES) {
+  try {
+    if (!view) return;
+    const userLine = Math.max(1, line - wrapperPreludeLines);
+    const lineInfo = view.state.doc.line(Math.min(userLine, view.state.doc.lines));
+    const from = Math.min(lineInfo.from + Math.max(0, column - 1), lineInfo.to);
+    view.dispatch({ selection: { anchor: from }, scrollIntoView: true });
+  } catch (err) {
+    // Debug: failed to jump to error position
+    try {
+      console.debug?.('[errorHelpers] jumpTo failed', err);
+    } catch (_) {
+      void 0;
+    }
+  }
+}

package/src/flow/components/code-editor/extension/CodeEditorExtension.tsx

@@ -0,0 +1,23 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { Registry } from '@nocobase/utils/client';
+import type { CodeEditorExtra, CodeEditorExtraRegistry, EditorRef } from '../types';
+
+export class CodeEditorExtension {
+  private static rightExtras = new Registry<CodeEditorExtra>();
+
+  static registerRightExtra(options: CodeEditorExtraRegistry) {
+    CodeEditorExtension.rightExtras.register(options.name, options.extra);
+  }
+
+  static getRightExtras(): CodeEditorExtra[] {
+    return Array.from(CodeEditorExtension.rightExtras.getValues());
+  }
+}

package/src/flow/components/code-editor/extension/index.ts

@@ -0,0 +1,10 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export * from './CodeEditorExtension';