@flowgram.ai/form-materials 0.4.5 → 0.4.7

package/src/components/json-editor-with-variables/extensions/variable-tag.tsx

@@ -5,7 +5,7 @@
 
 import React, { useLayoutEffect } from 'react';
 
-import { isEqual, last } from 'lodash';
+import { isEqual, last } from 'lodash-es';
 import {
   BaseVariableField,
   Disposable,

package/src/components/json-editor-with-variables/index.tsx

@@ -3,65 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React from 'react';
+import { lazySuspense } from '@/shared';
 
-import { transformerCreator } from '@coze-editor/editor/preset-code';
-import { Text } from '@coze-editor/editor/language-json';
+export const JsonEditorWithVariables = lazySuspense(() =>
+  import('./editor').then((module) => ({ default: module.JsonEditorWithVariables }))
+);
 
-import { CodeEditor, type CodeEditorPropsType } from '@/components/code-editor';
-
-import { VariableTree } from './extensions/variable-tree';
-import { VariableTagInject } from './extensions/variable-tag';
-import { I18n } from '@flowgram.ai/editor';
-
-type Match = { match: string; range: [number, number] };
-function findAllMatches(inputString: string, regex: RegExp): Match[] {
-  const globalRegex = new RegExp(
-    regex,
-    regex.flags.includes('g') ? regex.flags : regex.flags + 'g'
-  );
-  let match;
-  const matches: Match[] = [];
-
-  while ((match = globalRegex.exec(inputString)) !== null) {
-    if (match.index === globalRegex.lastIndex) {
-      globalRegex.lastIndex++;
-    }
-    matches.push({
-      match: match[0],
-      range: [match.index, match.index + match[0].length],
-    });
-  }
-
-  return matches;
-}
-
-const transformer = transformerCreator((text: Text) => {
-  const originalSource = text.toString();
-  const matches = findAllMatches(originalSource, /\{\{([^\}]*)\}\}/g);
-
-  if (matches.length > 0) {
-    matches.forEach(({ range }) => {
-      text.replaceRange(range[0], range[1], 'null');
-    });
-  }
-
-  return text;
-});
-
-export function JsonEditorWithVariables(props: Omit<CodeEditorPropsType, 'languageId'>) {
-  return (
-    <CodeEditor
-      languageId="json"
-      activeLinePlaceholder={I18n.t("Press '@' to Select variable")}
-      {...props}
-      options={{
-        transformer,
-        ...(props.options || {}),
-      }}
-    >
-      <VariableTree />
-      <VariableTagInject />
-    </CodeEditor>
-  );
-}
+export type { JsonEditorWithVariablesProps } from './editor';

package/src/components/json-schema-editor/hooks.tsx

@@ -5,7 +5,7 @@
 
 import { useEffect, useRef, useState } from 'react';
 
-import { difference, omit } from 'lodash';
+import { difference, omit } from 'lodash-es';
 import { produce } from 'immer';
 import { IJsonSchema, type JsonSchemaTypeManager, useTypeManager } from '@flowgram.ai/json-schema';
 

package/src/components/prompt-editor/editor.tsx

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useEffect, useRef } from 'react';
+
+import {
+  Renderer,
+  EditorProvider,
+  ActiveLinePlaceholder,
+  InferValues,
+} from '@coze-editor/editor/react';
+import preset, { EditorAPI } from '@coze-editor/editor/preset-prompt';
+
+import { PropsType } from './types';
+import { UIContainer } from './styles';
+import MarkdownHighlight from './extensions/markdown';
+import LanguageSupport from './extensions/language-support';
+import JinjaHighlight from './extensions/jinja';
+
+type Preset = typeof preset;
+type Options = Partial<InferValues<Preset[number]>>;
+
+export interface PromptEditorPropsType extends PropsType {
+  options?: Options;
+}
+
+export function PromptEditor(props: PromptEditorPropsType) {
+  const {
+    value,
+    onChange,
+    readonly,
+    placeholder,
+    activeLinePlaceholder,
+    style,
+    hasError,
+    children,
+    disableMarkdownHighlight,
+    options,
+  } = props || {};
+
+  const editorRef = useRef<EditorAPI | null>(null);
+
+  useEffect(() => {
+    // listen to value change
+    if (editorRef.current?.getValue() !== value?.content) {
+      editorRef.current?.setValue(String(value?.content || ''));
+    }
+  }, [value]);
+
+  return (
+    <UIContainer $hasError={hasError} style={style}>
+      <EditorProvider>
+        <Renderer
+          didMount={(editor: EditorAPI) => {
+            editorRef.current = editor;
+          }}
+          plugins={preset}
+          defaultValue={String(value?.content)}
+          options={{
+            readOnly: readonly,
+            editable: !readonly,
+            placeholder,
+            ...options,
+          }}
+          onChange={(e) => {
+            onChange({ type: 'template', content: e.value });
+          }}
+        />
+        {activeLinePlaceholder && (
+          <ActiveLinePlaceholder>{activeLinePlaceholder}</ActiveLinePlaceholder>
+        )}
+        {!disableMarkdownHighlight && <MarkdownHighlight />}
+        <LanguageSupport />
+        <JinjaHighlight />
+        {children}
+      </EditorProvider>
+    </UIContainer>
+  );
+}

package/src/components/prompt-editor/index.tsx

@@ -3,74 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React, { useEffect, useRef } from 'react';
+import { lazySuspense } from '@/shared';
 
-import { Renderer, EditorProvider, ActiveLinePlaceholder, InferValues } from '@coze-editor/editor/react';
-import preset, { EditorAPI } from '@coze-editor/editor/preset-prompt';
+export const PromptEditor = lazySuspense(() =>
+  import('./editor').then((module) => ({ default: module.PromptEditor }))
+);
 
-import { PropsType } from './types';
-import { UIContainer } from './styles';
-import MarkdownHighlight from './extensions/markdown';
-import LanguageSupport from './extensions/language-support';
-import JinjaHighlight from './extensions/jinja';
-
-type Preset = typeof preset;
-type Options = Partial<InferValues<Preset[number]>>;
-
-export interface PromptEditorPropsType extends PropsType {
-  options?: Options;
-}
-
-export function PromptEditor(props: PromptEditorPropsType) {
-  const {
-    value,
-    onChange,
-    readonly,
-    placeholder,
-    activeLinePlaceholder,
-    style,
-    hasError,
-    children,
-    disableMarkdownHighlight,
-    options,
-  } = props || {};
-
-  const editorRef = useRef<EditorAPI | null>(null);
-
-  useEffect(() => {
-    // listen to value change
-    if (editorRef.current?.getValue() !== value?.content) {
-      editorRef.current?.setValue(String(value?.content || ''));
-    }
-  }, [value]);
-
-  return (
-    <UIContainer $hasError={hasError} style={style}>
-      <EditorProvider>
-        <Renderer
-          didMount={(editor: EditorAPI) => {
-            editorRef.current = editor;
-          }}
-          plugins={preset}
-          defaultValue={String(value?.content)}
-          options={{
-            readOnly: readonly,
-            editable: !readonly,
-            placeholder,
-            ...options
-          }}
-          onChange={(e) => {
-            onChange({ type: 'template', content: e.value });
-          }}
-        />
-        {activeLinePlaceholder && (
-          <ActiveLinePlaceholder>{activeLinePlaceholder}</ActiveLinePlaceholder>
-        )}
-        {!disableMarkdownHighlight && <MarkdownHighlight />}
-        <LanguageSupport />
-        <JinjaHighlight />
-        {children}
-      </EditorProvider>
-    </UIContainer>
-  );
-}
+export type { PromptEditorPropsType } from './editor';

package/src/components/prompt-editor-with-inputs/editor.tsx

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
+
+import { InputsTree } from './extensions/inputs-tree';
+
+export interface PromptEditorWithInputsProps extends PromptEditorPropsType {
+  inputsValues: any;
+}
+
+export function PromptEditorWithInputs({
+  inputsValues,
+  ...restProps
+}: PromptEditorWithInputsProps) {
+  return (
+    <PromptEditor {...restProps}>
+      <InputsTree inputsValues={inputsValues} />
+    </PromptEditor>
+  );
+}

package/src/components/prompt-editor-with-inputs/index.tsx

@@ -3,20 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React from 'react';
+import { lazySuspense } from '@/shared';
 
-import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
+export const PromptEditorWithInputs = lazySuspense(() =>
+  import('./editor').then((module) => ({ default: module.PromptEditorWithInputs }))
+);
 
-import { InputsTree } from './extensions/inputs-tree';
-
-interface PropsType extends PromptEditorPropsType {
-  inputsValues: any;
-}
-
-export function PromptEditorWithInputs({ inputsValues, ...restProps }: PropsType) {
-  return (
-    <PromptEditor {...restProps}>
-      <InputsTree inputsValues={inputsValues} />
-    </PromptEditor>
-  );
-}
+export type { PromptEditorWithInputsProps } from './editor';

package/src/components/prompt-editor-with-inputs/inputs-picker.tsx

@@ -5,7 +5,7 @@
 
 import React, { useMemo } from 'react';
 
-import { isPlainObject, last } from 'lodash';
+import { isPlainObject, last } from 'lodash-es';
 import {
   type ArrayType,
   ASTMatch,

package/src/components/prompt-editor-with-variables/editor.tsx

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
+
+import { VariableTree } from './extensions/variable-tree';
+import { VariableTagInject } from './extensions/variable-tag';
+
+export interface PromptEditorWithVariablesProps extends PromptEditorPropsType {}
+
+export function PromptEditorWithVariables(props: PromptEditorWithVariablesProps) {
+  return (
+    <PromptEditor {...props}>
+      <VariableTree />
+      <VariableTagInject />
+    </PromptEditor>
+  );
+}

package/src/components/prompt-editor-with-variables/extensions/variable-tag.tsx

@@ -5,7 +5,7 @@
 
 import React, { useLayoutEffect } from 'react';
 
-import { isEqual, last } from 'lodash';
+import { isEqual, last } from 'lodash-es';
 import {
   BaseVariableField,
   Disposable,

package/src/components/prompt-editor-with-variables/index.tsx

@@ -3,18 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React from 'react';
+import { lazySuspense } from '@/shared';
 
-import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
+export const PromptEditorWithVariables = lazySuspense(() =>
+  import('./editor').then((module) => ({ default: module.PromptEditorWithVariables }))
+);
 
-import { VariableTree } from './extensions/variable-tree';
-import { VariableTagInject } from './extensions/variable-tag';
-
-export function PromptEditorWithVariables(props: PromptEditorPropsType) {
-  return (
-    <PromptEditor {...props}>
-      <VariableTree />
-      <VariableTagInject />
-    </PromptEditor>
-  );
-}
+export type { PromptEditorWithVariablesProps } from './editor';

package/src/effects/validate-when-variable-sync/index.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { isEmpty } from 'lodash';
+import { isEmpty } from 'lodash-es';
 import {
   DataEvent,
   Effect,

package/src/form-plugins/infer-assign-plugin/index.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { set, uniqBy } from 'lodash';
+import { set, uniqBy } from 'lodash-es';
 import { JsonSchemaUtils } from '@flowgram.ai/json-schema';
 import {
   ASTFactory,

package/src/form-plugins/infer-inputs-plugin/index.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { get, set } from 'lodash';
+import { get, set } from 'lodash-es';
 import { defineFormPluginCreator, getNodePrivateScope, getNodeScope } from '@flowgram.ai/editor';
 
 import { FlowValueUtils } from '@/shared';

package/src/hooks/use-object-list/index.tsx

@@ -6,7 +6,7 @@
 import { useEffect, useRef, useState } from 'react';
 
 import { nanoid } from 'nanoid';
-import { difference, get, isObject, set } from 'lodash';
+import { difference, get, isObject, set } from 'lodash-es';
 
 function genId() {
   return nanoid();

package/src/shared/flow-value/utils.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { isArray, isObject, isPlainObject, uniq } from 'lodash';
+import { isArray, isObject, isPlainObject, uniq } from 'lodash-es';
 import { IJsonSchema, JsonSchemaUtils } from '@flowgram.ai/json-schema';
 import { Scope } from '@flowgram.ai/editor';
 

package/src/shared/format-legacy-refs/index.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { isObject } from 'lodash';
+import { isObject } from 'lodash-es';
 
 interface LegacyFlowRefValueSchema {
   type: 'ref';

package/src/shared/index.ts

@@ -7,3 +7,4 @@ export * from './format-legacy-refs';
 export * from './inject-material';
 export * from './flow-value';
 export * from './polyfill-create-root';
+export * from './lazy-suspense';

package/src/shared/lazy-suspense/index.tsx

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { ComponentType, lazy, Suspense } from 'react';
+
+import { Skeleton } from '@douyinfe/semi-ui';
+
+export function withSuspense<T extends ComponentType<any>>(
+  Component: T,
+  fallback?: React.ReactNode
+): T {
+  const WithSuspenseComponent: T = ((props: any) => (
+    <Suspense fallback={fallback || <Skeleton.Paragraph style={{ width: '100%' }} rows={1} />}>
+      <Component {...props} />
+    </Suspense>
+  )) as any;
+
+  return WithSuspenseComponent;
+}
+
+export function lazySuspense<T extends ComponentType<any>>(
+  params: Parameters<typeof lazy<T>>[0],
+  fallback?: React.ReactNode
+) {
+  return withSuspense(lazy(params), fallback);
+}

package/src/validate/validate-flow-value/index.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { isNil } from 'lodash';
+import { isNil } from 'lodash-es';
 import { FeedbackLevel, FlowNodeEntity, getNodeScope } from '@flowgram.ai/editor';
 
 import { IFlowValue } from '@/typings';