@flowgram.ai/form-materials 1.0.10 → 1.0.11

package/dist/cjs/components/code-editor/editor.js

@@ -50,6 +50,9 @@ const OriginCodeEditor = (0, react_namespaceObject.createRenderer)(preset_code_d
         }
     })
 ]);
+const MINI_EXTENSIONS = [
+    view_namespaceObject.EditorView.lineWrapping
+];
 function BaseCodeEditor({ value, onChange, languageId = 'python', theme = 'light', children, placeholder, activeLinePlaceholder, options, readonly, mini }) {
     const editorRef = (0, external_react_namespaceObject.useRef)(null);
     const editorValue = String(value || '');
@@ -72,6 +75,7 @@ function BaseCodeEditor({ value, onChange, languageId = 'python', theme = 'light
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.EditorProvider, {
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(OriginCodeEditor, {
                 defaultValue: editorValue,
+                extensions: mini ? MINI_EXTENSIONS : void 0,
                 options: {
                     uri: `file:///untitled${(0, external_utils_js_namespaceObject.getSuffixByLanguageId)(languageId)}`,
                     languageId,

package/dist/cjs/components/code-editor/styles.css

@@ -1,4 +1,20 @@
+.gedit-m-code-editor-container {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+
 .gedit-m-code-editor-container.mini {
-  height: 24px;
+  min-height: 24px;
+}
+
+.gedit-m-code-editor-container.mini .cm-editor, .gedit-m-code-editor-container.mini .cm-scroller, .gedit-m-code-editor-container.mini .cm-content {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.gedit-m-code-editor-container.mini .cm-scroller {
+  overflow-x: hidden;
 }
 

package/dist/cjs/components/code-editor-mini/index.js

@@ -34,6 +34,7 @@ function CodeEditorMini(props) {
         className: "gedit-m-code-editor-mini",
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.CodeEditor, {
             ...props,
+            mini: true,
             options: {
                 lineNumbersGutter: false,
                 foldGutter: false,

package/dist/cjs/components/json-schema-editor/index.js

@@ -28,6 +28,7 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
+const json_schema_namespaceObject = require("@flowgram.ai/json-schema");
 const editor_namespaceObject = require("@flowgram.ai/editor");
 const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
 const semi_icons_namespaceObject = require("@douyinfe/semi-icons");
@@ -40,6 +41,11 @@ require("./styles.css");
 const DEFAULT = {
     type: 'object'
 };
+function getSchemaDefaultValue(typeManager, schema) {
+    if (schema?.type === 'object') return '{}';
+    if (schema?.type === 'array') return '[]';
+    return typeManager.getDefaultValue(schema || {});
+}
 function JsonSchemaEditor(props) {
     const { value = DEFAULT, config = {}, onChange: onChangeProps, readonly } = props;
     const { propertyList, onAddProperty, onRemoveProperty, onEditProperty } = (0, external_hooks_js_namespaceObject.usePropertiesEdit)(value, onChangeProps);
@@ -78,6 +84,7 @@ function PropertyEdit(props) {
     const { value, config, readonly, $level = 0, onChange: onChangeProps, onRemove, $isLast } = props;
     const [expand, setExpand] = (0, external_react_namespaceObject.useState)(false);
     const [collapse, setCollapse] = (0, external_react_namespaceObject.useState)(false);
+    const typeManager = (0, json_schema_namespaceObject.useTypeManager)();
     const { name, type, items, default: defaultValue, description, isPropertyRequired } = value || {};
     const typeSelectorValue = (0, external_react_namespaceObject.useMemo)(()=>({
             type,
@@ -133,9 +140,11 @@ function PropertyEdit(props) {
                                             value: typeSelectorValue,
                                             readonly: readonly,
                                             onChange: (_value)=>{
+                                                const nextTypeSchema = _value || {};
                                                 onChangeProps?.({
                                                     ...value || {},
-                                                    ..._value
+                                                    ...nextTypeSchema,
+                                                    default: getSchemaDefaultValue(typeManager, nextTypeSchema)
                                                 });
                                             }
                                         })

package/dist/cjs/plugins/json-schema-preset/type-definition/date-time.js

@@ -31,6 +31,13 @@ require("react");
 const external_date_fns_namespaceObject = require("date-fns");
 const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
 const op_js_namespaceObject = require("../../../components/condition-context/op.js");
+const DATE_TIME_FORMAT = "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'";
+const stringifyDateTime = (value)=>{
+    if (null == value || '' === value) return '';
+    const date = value instanceof Date ? value : 'number' == typeof value ? new Date(value) : new Date(String(value));
+    if (Number.isNaN(date.getTime())) return '';
+    return (0, external_date_fns_namespaceObject.format)(date, DATE_TIME_FORMAT);
+};
 const dateTimeRegistry = {
     type: 'date-time',
     ConstantRenderer: (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.DatePicker, {
@@ -45,7 +52,7 @@ const dateTimeRegistry = {
             disabled: props.readonly,
             ...props,
             onChange: (date)=>{
-                props.onChange?.((0, external_date_fns_namespaceObject.format)(date, "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'"));
+                props.onChange?.(stringifyDateTime(date));
             },
             value: props.value
         }),

package/dist/esm/components/code-editor/editor.mjs

@@ -12,6 +12,9 @@ const OriginCodeEditor = createRenderer(preset_code, [
         }
     })
 ]);
+const MINI_EXTENSIONS = [
+    EditorView.lineWrapping
+];
 function BaseCodeEditor({ value, onChange, languageId = 'python', theme = 'light', children, placeholder, activeLinePlaceholder, options, readonly, mini }) {
     const editorRef = useRef(null);
     const editorValue = String(value || '');
@@ -34,6 +37,7 @@ function BaseCodeEditor({ value, onChange, languageId = 'python', theme = 'light
         children: /*#__PURE__*/ jsx(EditorProvider, {
             children: /*#__PURE__*/ jsxs(OriginCodeEditor, {
                 defaultValue: editorValue,
+                extensions: mini ? MINI_EXTENSIONS : void 0,
                 options: {
                     uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
                     languageId,

package/dist/esm/components/code-editor/styles.css

@@ -1,4 +1,20 @@
+.gedit-m-code-editor-container {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+
 .gedit-m-code-editor-container.mini {
-  height: 24px;
+  min-height: 24px;
+}
+
+.gedit-m-code-editor-container.mini .cm-editor, .gedit-m-code-editor-container.mini .cm-scroller, .gedit-m-code-editor-container.mini .cm-content {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.gedit-m-code-editor-container.mini .cm-scroller {
+  overflow-x: hidden;
 }
 

package/dist/esm/components/code-editor-mini/index.mjs

@@ -6,6 +6,7 @@ function CodeEditorMini(props) {
         className: "gedit-m-code-editor-mini",
         children: /*#__PURE__*/ jsx(CodeEditor, {
             ...props,
+            mini: true,
             options: {
                 lineNumbersGutter: false,
                 foldGutter: false,

package/dist/esm/components/json-schema-editor/index.mjs

@@ -1,5 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
+import { useTypeManager } from "@flowgram.ai/json-schema";
 import { I18n } from "@flowgram.ai/editor";
 import { Button, Checkbox, IconButton } from "@douyinfe/semi-ui";
 import { IconChevronDown, IconChevronRight, IconExpand, IconMinus, IconPlus, IconShrink } from "@douyinfe/semi-icons";
@@ -12,6 +13,11 @@ import "./styles.css";
 const DEFAULT = {
     type: 'object'
 };
+function getSchemaDefaultValue(typeManager, schema) {
+    if (schema?.type === 'object') return '{}';
+    if (schema?.type === 'array') return '[]';
+    return typeManager.getDefaultValue(schema || {});
+}
 function JsonSchemaEditor(props) {
     const { value = DEFAULT, config = {}, onChange: onChangeProps, readonly } = props;
     const { propertyList, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(value, onChangeProps);
@@ -50,6 +56,7 @@ function PropertyEdit(props) {
     const { value, config, readonly, $level = 0, onChange: onChangeProps, onRemove, $isLast } = props;
     const [expand, setExpand] = useState(false);
     const [collapse, setCollapse] = useState(false);
+    const typeManager = useTypeManager();
     const { name, type, items, default: defaultValue, description, isPropertyRequired } = value || {};
     const typeSelectorValue = useMemo(()=>({
             type,
@@ -105,9 +112,11 @@ function PropertyEdit(props) {
                                             value: typeSelectorValue,
                                             readonly: readonly,
                                             onChange: (_value)=>{
+                                                const nextTypeSchema = _value || {};
                                                 onChangeProps?.({
                                                     ...value || {},
-                                                    ..._value
+                                                    ...nextTypeSchema,
+                                                    default: getSchemaDefaultValue(typeManager, nextTypeSchema)
                                                 });
                                             }
                                         })

package/dist/esm/plugins/json-schema-preset/type-definition/date-time.mjs

@@ -3,6 +3,13 @@ import "react";
 import { format } from "date-fns";
 import { DatePicker } from "@douyinfe/semi-ui";
 import { ConditionPresetOp } from "../../../components/condition-context/op.mjs";
+const DATE_TIME_FORMAT = "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'";
+const stringifyDateTime = (value)=>{
+    if (null == value || '' === value) return '';
+    const date = value instanceof Date ? value : 'number' == typeof value ? new Date(value) : new Date(String(value));
+    if (Number.isNaN(date.getTime())) return '';
+    return format(date, DATE_TIME_FORMAT);
+};
 const dateTimeRegistry = {
     type: 'date-time',
     ConstantRenderer: (props)=>/*#__PURE__*/ jsx(DatePicker, {
@@ -17,7 +24,7 @@ const dateTimeRegistry = {
             disabled: props.readonly,
             ...props,
             onChange: (date)=>{
-                props.onChange?.(format(date, "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'"));
+                props.onChange?.(stringifyDateTime(date));
             },
             value: props.value
         }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -67,9 +67,9 @@
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.26.1",
     "zod": "^3.24.4",
-    "@flowgram.ai/json-schema": "1.0.10",
-    "@flowgram.ai/editor": "1.0.10",
-    "@flowgram.ai/coze-editor": "1.0.10"
+    "@flowgram.ai/editor": "1.0.11",
+    "@flowgram.ai/json-schema": "1.0.11",
+    "@flowgram.ai/coze-editor": "1.0.11"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
@@ -86,8 +86,8 @@
     "cross-env": "~7.0.3",
     "@rsbuild/plugin-react": "^1.1.1",
     "date-fns": "~4.1.0",
-    "@flowgram.ai/eslint-config": "1.0.10",
-    "@flowgram.ai/ts-config": "1.0.10"
+    "@flowgram.ai/eslint-config": "1.0.11",
+    "@flowgram.ai/ts-config": "1.0.11"
   },
   "peerDependencies": {
     "react": ">=16.8",

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

@@ -26,6 +26,8 @@ const OriginCodeEditor = createRenderer(preset, [
   }),
 ]);
 
+const MINI_EXTENSIONS = [EditorView.lineWrapping];
+
 // CSS styles are in styles.css
 
 type Preset = typeof preset;
@@ -79,6 +81,7 @@ export function BaseCodeEditor({
       <EditorProvider>
         <OriginCodeEditor
           defaultValue={editorValue}
+          extensions={mini ? MINI_EXTENSIONS : undefined}
           options={{
             uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
             languageId,

package/src/components/code-editor/styles.css

@@ -4,8 +4,23 @@
  */
 
 .gedit-m-code-editor-container {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
 }
 
 .gedit-m-code-editor-container.mini {
-  height: 24px;
+  min-height: 24px;
+}
+
+.gedit-m-code-editor-container.mini .cm-editor,
+.gedit-m-code-editor-container.mini .cm-scroller,
+.gedit-m-code-editor-container.mini .cm-content {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.gedit-m-code-editor-container.mini .cm-scroller {
+  overflow-x: hidden;
 }

package/src/components/code-editor-mini/index.tsx

@@ -15,6 +15,7 @@ export function CodeEditorMini(props: CodeEditorPropsType) {
     <div className="gedit-m-code-editor-mini">
       <CodeEditor
         {...props}
+        mini
         options={{
           lineNumbersGutter: false,
           foldGutter: false,

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

@@ -5,7 +5,7 @@
 
 import React, { useMemo, useState } from 'react';
 
-import { IJsonSchema } from '@flowgram.ai/json-schema';
+import { IJsonSchema, JsonSchemaTypeManager, useTypeManager } from '@flowgram.ai/json-schema';
 import { I18n } from '@flowgram.ai/editor';
 import { Button, Checkbox, IconButton } from '@douyinfe/semi-ui';
 import {
@@ -29,6 +29,21 @@ import './styles.css';
 
 const DEFAULT = { type: 'object' };
 
+function getSchemaDefaultValue(
+  typeManager: JsonSchemaTypeManager,
+  schema: Partial<IJsonSchema> | undefined
+) {
+  if (schema?.type === 'object') {
+    return '{}';
+  }
+
+  if (schema?.type === 'array') {
+    return '[]';
+  }
+
+  return typeManager.getDefaultValue(schema || {});
+}
+
 export function JsonSchemaEditor(props: {
   value?: IJsonSchema;
   onChange?: (value: IJsonSchema) => void;
@@ -86,6 +101,7 @@ function PropertyEdit(props: {
 
   const [expand, setExpand] = useState(false);
   const [collapse, setCollapse] = useState(false);
+  const typeManager = useTypeManager() as JsonSchemaTypeManager;
 
   const { name, type, items, default: defaultValue, description, isPropertyRequired } = value || {};
 
@@ -136,9 +152,11 @@ function PropertyEdit(props: {
                 value={typeSelectorValue}
                 readonly={readonly}
                 onChange={(_value) => {
+                  const nextTypeSchema = _value || {};
                   onChangeProps?.({
                     ...(value || {}),
-                    ..._value,
+                    ...nextTypeSchema,
+                    default: getSchemaDefaultValue(typeManager, nextTypeSchema),
                   });
                 }}
               />

package/src/plugins/json-schema-preset/type-definition/date-time.tsx

@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: MIT
  */
 
-/* eslint-disable react/prop-types */
 import React from 'react';
 
 import { format } from 'date-fns';
@@ -14,6 +13,27 @@ import { ConditionPresetOp } from '@/components/condition-context/op';
 
 import { type JsonSchemaTypeRegistry } from '../types';
 
+const DATE_TIME_FORMAT = "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'";
+
+const stringifyDateTime = (value: unknown) => {
+  if (value === null || value === undefined || value === '') {
+    return '';
+  }
+
+  const date =
+    value instanceof Date
+      ? value
+      : typeof value === 'number'
+      ? new Date(value)
+      : new Date(String(value));
+
+  if (Number.isNaN(date.getTime())) {
+    return '';
+  }
+
+  return format(date, DATE_TIME_FORMAT);
+};
+
 export const dateTimeRegistry: Partial<JsonSchemaTypeRegistry> = {
   type: 'date-time',
   ConstantRenderer: (props: DatePickerProps & { readonly?: boolean }) => (
@@ -26,7 +46,7 @@ export const dateTimeRegistry: Partial<JsonSchemaTypeRegistry> = {
       disabled={props.readonly}
       {...props}
       onChange={(date) => {
-        props.onChange?.(format(date as Date, "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'"));
+        props.onChange?.(stringifyDateTime(date));
       }}
       value={props.value}
     />