@flowgram.ai/form-materials 0.1.0-alpha.33 → 0.1.0-alpha.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/cjs/components/code-editor/editor.js +4 -0
  2. package/dist/cjs/components/code-editor/styles.css +17 -1
  3. package/dist/cjs/components/code-editor-mini/index.js +1 -0
  4. package/dist/cjs/components/json-schema-editor/index.js +10 -1
  5. package/dist/esm/components/code-editor/editor.mjs +4 -0
  6. package/dist/esm/components/code-editor/styles.css +17 -1
  7. package/dist/esm/components/code-editor-mini/index.mjs +1 -0
  8. package/dist/esm/components/json-schema-editor/index.mjs +10 -1
  9. package/package.json +8 -8
  10. package/src/components/code-editor/editor.tsx +3 -0
  11. package/src/components/code-editor/styles.css +16 -1
  12. package/src/components/code-editor-mini/index.tsx +1 -0
  13. package/src/components/json-schema-editor/index.tsx +20 -2
package/dist/cjs/components/code-editor/editor.js CHANGED
@@ -50,6 +50,9 @@ const OriginCodeEditor = (0, react_namespaceObject.createRenderer)(preset_code_d
50
50
  }
51
51
  })
52
52
  ]);
53
+ const MINI_EXTENSIONS = [
54
+ view_namespaceObject.EditorView.lineWrapping
55
+ ];
53
56
  function BaseCodeEditor({ value, onChange, languageId = 'python', theme = 'light', children, placeholder, activeLinePlaceholder, options, readonly, mini }) {
54
57
  const editorRef = (0, external_react_namespaceObject.useRef)(null);
55
58
  const editorValue = String(value || '');
@@ -72,6 +75,7 @@ function BaseCodeEditor({ value, onChange, languageId = 'python', theme = 'light
72
75
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.EditorProvider, {
73
76
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(OriginCodeEditor, {
74
77
  defaultValue: editorValue,
78
+ extensions: mini ? MINI_EXTENSIONS : void 0,
75
79
  options: {
76
80
  uri: `file:///untitled${(0, external_utils_js_namespaceObject.getSuffixByLanguageId)(languageId)}`,
77
81
  languageId,
package/dist/cjs/components/code-editor/styles.css CHANGED
@@ -1,4 +1,20 @@
1
+ .gedit-m-code-editor-container {
2
+ width: 100%;
3
+ min-width: 0;
4
+ max-width: 100%;
5
+ overflow: hidden;
6
+ }
7
+
1
8
  .gedit-m-code-editor-container.mini {
2
- height: 24px;
9
+ min-height: 24px;
10
+ }
11
+
12
+ .gedit-m-code-editor-container.mini .cm-editor, .gedit-m-code-editor-container.mini .cm-scroller, .gedit-m-code-editor-container.mini .cm-content {
13
+ min-width: 0;
14
+ max-width: 100%;
15
+ }
16
+
17
+ .gedit-m-code-editor-container.mini .cm-scroller {
18
+ overflow-x: hidden;
3
19
  }
4
20
 
package/dist/cjs/components/code-editor-mini/index.js CHANGED
@@ -34,6 +34,7 @@ function CodeEditorMini(props) {
34
34
  className: "gedit-m-code-editor-mini",
35
35
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.CodeEditor, {
36
36
  ...props,
37
+ mini: true,
37
38
  options: {
38
39
  lineNumbersGutter: false,
39
40
  foldGutter: false,
package/dist/cjs/components/json-schema-editor/index.js CHANGED
@@ -28,6 +28,7 @@ __webpack_require__.d(__webpack_exports__, {
28
28
  });
29
29
  const jsx_runtime_namespaceObject = require("react/jsx-runtime");
30
30
  const external_react_namespaceObject = require("react");
31
+ const json_schema_namespaceObject = require("@flowgram.ai/json-schema");
31
32
  const editor_namespaceObject = require("@flowgram.ai/editor");
32
33
  const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
33
34
  const semi_icons_namespaceObject = require("@douyinfe/semi-icons");
@@ -40,6 +41,11 @@ require("./styles.css");
40
41
  const DEFAULT = {
41
42
  type: 'object'
42
43
  };
44
+ function getSchemaDefaultValue(typeManager, schema) {
45
+ if (schema?.type === 'object') return '{}';
46
+ if (schema?.type === 'array') return '[]';
47
+ return typeManager.getDefaultValue(schema || {});
48
+ }
43
49
  function JsonSchemaEditor(props) {
44
50
  const { value = DEFAULT, config = {}, onChange: onChangeProps, readonly } = props;
45
51
  const { propertyList, onAddProperty, onRemoveProperty, onEditProperty } = (0, external_hooks_js_namespaceObject.usePropertiesEdit)(value, onChangeProps);
@@ -78,6 +84,7 @@ function PropertyEdit(props) {
78
84
  const { value, config, readonly, $level = 0, onChange: onChangeProps, onRemove, $isLast } = props;
79
85
  const [expand, setExpand] = (0, external_react_namespaceObject.useState)(false);
80
86
  const [collapse, setCollapse] = (0, external_react_namespaceObject.useState)(false);
87
+ const typeManager = (0, json_schema_namespaceObject.useTypeManager)();
81
88
  const { name, type, items, default: defaultValue, description, isPropertyRequired } = value || {};
82
89
  const typeSelectorValue = (0, external_react_namespaceObject.useMemo)(()=>({
83
90
  type,
@@ -133,9 +140,11 @@ function PropertyEdit(props) {
133
140
  value: typeSelectorValue,
134
141
  readonly: readonly,
135
142
  onChange: (_value)=>{
143
+ const nextTypeSchema = _value || {};
136
144
  onChangeProps?.({
137
145
  ...value || {},
138
- ..._value
146
+ ...nextTypeSchema,
147
+ default: getSchemaDefaultValue(typeManager, nextTypeSchema)
139
148
  });
140
149
  }
141
150
  })
package/dist/esm/components/code-editor/editor.mjs CHANGED
@@ -12,6 +12,9 @@ const OriginCodeEditor = createRenderer(preset_code, [
12
12
  }
13
13
  })
14
14
  ]);
15
+ const MINI_EXTENSIONS = [
16
+ EditorView.lineWrapping
17
+ ];
15
18
  function BaseCodeEditor({ value, onChange, languageId = 'python', theme = 'light', children, placeholder, activeLinePlaceholder, options, readonly, mini }) {
16
19
  const editorRef = useRef(null);
17
20
  const editorValue = String(value || '');
@@ -34,6 +37,7 @@ function BaseCodeEditor({ value, onChange, languageId = 'python', theme = 'light
34
37
  children: /*#__PURE__*/ jsx(EditorProvider, {
35
38
  children: /*#__PURE__*/ jsxs(OriginCodeEditor, {
36
39
  defaultValue: editorValue,
40
+ extensions: mini ? MINI_EXTENSIONS : void 0,
37
41
  options: {
38
42
  uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
39
43
  languageId,
package/dist/esm/components/code-editor/styles.css CHANGED
@@ -1,4 +1,20 @@
1
+ .gedit-m-code-editor-container {
2
+ width: 100%;
3
+ min-width: 0;
4
+ max-width: 100%;
5
+ overflow: hidden;
6
+ }
7
+
1
8
  .gedit-m-code-editor-container.mini {
2
- height: 24px;
9
+ min-height: 24px;
10
+ }
11
+
12
+ .gedit-m-code-editor-container.mini .cm-editor, .gedit-m-code-editor-container.mini .cm-scroller, .gedit-m-code-editor-container.mini .cm-content {
13
+ min-width: 0;
14
+ max-width: 100%;
15
+ }
16
+
17
+ .gedit-m-code-editor-container.mini .cm-scroller {
18
+ overflow-x: hidden;
3
19
  }
4
20
 
package/dist/esm/components/code-editor-mini/index.mjs CHANGED
@@ -6,6 +6,7 @@ function CodeEditorMini(props) {
6
6
  className: "gedit-m-code-editor-mini",
7
7
  children: /*#__PURE__*/ jsx(CodeEditor, {
8
8
  ...props,
9
+ mini: true,
9
10
  options: {
10
11
  lineNumbersGutter: false,
11
12
  foldGutter: false,
package/dist/esm/components/json-schema-editor/index.mjs CHANGED
@@ -1,5 +1,6 @@
1
1
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
2
  import { useMemo, useState } from "react";
3
+ import { useTypeManager } from "@flowgram.ai/json-schema";
3
4
  import { I18n } from "@flowgram.ai/editor";
4
5
  import { Button, Checkbox, IconButton } from "@douyinfe/semi-ui";
5
6
  import { IconChevronDown, IconChevronRight, IconExpand, IconMinus, IconPlus, IconShrink } from "@douyinfe/semi-icons";
@@ -12,6 +13,11 @@ import "./styles.css";
12
13
  const DEFAULT = {
13
14
  type: 'object'
14
15
  };
16
+ function getSchemaDefaultValue(typeManager, schema) {
17
+ if (schema?.type === 'object') return '{}';
18
+ if (schema?.type === 'array') return '[]';
19
+ return typeManager.getDefaultValue(schema || {});
20
+ }
15
21
  function JsonSchemaEditor(props) {
16
22
  const { value = DEFAULT, config = {}, onChange: onChangeProps, readonly } = props;
17
23
  const { propertyList, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(value, onChangeProps);
@@ -50,6 +56,7 @@ function PropertyEdit(props) {
50
56
  const { value, config, readonly, $level = 0, onChange: onChangeProps, onRemove, $isLast } = props;
51
57
  const [expand, setExpand] = useState(false);
52
58
  const [collapse, setCollapse] = useState(false);
59
+ const typeManager = useTypeManager();
53
60
  const { name, type, items, default: defaultValue, description, isPropertyRequired } = value || {};
54
61
  const typeSelectorValue = useMemo(()=>({
55
62
  type,
@@ -105,9 +112,11 @@ function PropertyEdit(props) {
105
112
  value: typeSelectorValue,
106
113
  readonly: readonly,
107
114
  onChange: (_value)=>{
115
+ const nextTypeSchema = _value || {};
108
116
  onChangeProps?.({
109
117
  ...value || {},
110
- ..._value
118
+ ...nextTypeSchema,
119
+ default: getSchemaDefaultValue(typeManager, nextTypeSchema)
111
120
  });
112
121
  }
113
122
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flowgram.ai/form-materials",
3
- "version": "0.1.0-alpha.33",
3
+ "version": "0.1.0-alpha.34",
4
4
  "homepage": "https://flowgram.ai/",
5
5
  "repository": "https://github.com/bytedance/flowgram.ai",
6
6
  "license": "MIT",
@@ -64,12 +64,12 @@
64
64
  "lodash-es": "^4.17.21",
65
65
  "nanoid": "^5.0.9",
66
66
  "immer": "~10.1.1",
67
- "@codemirror/view": "~6.38.0",
68
- "@codemirror/state": "~6.5.2",
67
+ "@codemirror/state": "^6.4.1",
68
+ "@codemirror/view": "^6.26.1",
69
69
  "zod": "^3.24.4",
70
- "@flowgram.ai/editor": "0.1.0-alpha.33",
71
- "@flowgram.ai/json-schema": "0.1.0-alpha.33",
72
- "@flowgram.ai/coze-editor": "0.1.0-alpha.33"
70
+ "@flowgram.ai/editor": "0.1.0-alpha.34",
71
+ "@flowgram.ai/json-schema": "0.1.0-alpha.34",
72
+ "@flowgram.ai/coze-editor": "0.1.0-alpha.34"
73
73
  },
74
74
  "devDependencies": {
75
75
  "@types/lodash-es": "^4.17.12",
@@ -86,8 +86,8 @@
86
86
  "cross-env": "~7.0.3",
87
87
  "@rsbuild/plugin-react": "^1.1.1",
88
88
  "date-fns": "~4.1.0",
89
- "@flowgram.ai/eslint-config": "0.1.0-alpha.33",
90
- "@flowgram.ai/ts-config": "0.1.0-alpha.33"
89
+ "@flowgram.ai/eslint-config": "0.1.0-alpha.34",
90
+ "@flowgram.ai/ts-config": "0.1.0-alpha.34"
91
91
  },
92
92
  "peerDependencies": {
93
93
  "react": ">=16.8",
package/src/components/code-editor/editor.tsx CHANGED
@@ -26,6 +26,8 @@ const OriginCodeEditor = createRenderer(preset, [
26
26
  }),
27
27
  ]);
28
28
 
29
+ const MINI_EXTENSIONS = [EditorView.lineWrapping];
30
+
29
31
  // CSS styles are in styles.css
30
32
 
31
33
  type Preset = typeof preset;
@@ -79,6 +81,7 @@ export function BaseCodeEditor({
79
81
  <EditorProvider>
80
82
  <OriginCodeEditor
81
83
  defaultValue={editorValue}
84
+ extensions={mini ? MINI_EXTENSIONS : undefined}
82
85
  options={{
83
86
  uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
84
87
  languageId,
package/src/components/code-editor/styles.css CHANGED
@@ -4,8 +4,23 @@
4
4
  */
5
5
 
6
6
  .gedit-m-code-editor-container {
7
+ width: 100%;
8
+ min-width: 0;
9
+ max-width: 100%;
10
+ overflow: hidden;
7
11
  }
8
12
 
9
13
  .gedit-m-code-editor-container.mini {
10
- height: 24px;
14
+ min-height: 24px;
15
+ }
16
+
17
+ .gedit-m-code-editor-container.mini .cm-editor,
18
+ .gedit-m-code-editor-container.mini .cm-scroller,
19
+ .gedit-m-code-editor-container.mini .cm-content {
20
+ min-width: 0;
21
+ max-width: 100%;
22
+ }
23
+
24
+ .gedit-m-code-editor-container.mini .cm-scroller {
25
+ overflow-x: hidden;
11
26
  }
package/src/components/code-editor-mini/index.tsx CHANGED
@@ -15,6 +15,7 @@ export function CodeEditorMini(props: CodeEditorPropsType) {
15
15
  <div className="gedit-m-code-editor-mini">
16
16
  <CodeEditor
17
17
  {...props}
18
+ mini
18
19
  options={{
19
20
  lineNumbersGutter: false,
20
21
  foldGutter: false,
package/src/components/json-schema-editor/index.tsx CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  import React, { useMemo, useState } from 'react';
7
7
 
8
- import { IJsonSchema } from '@flowgram.ai/json-schema';
8
+ import { IJsonSchema, JsonSchemaTypeManager, useTypeManager } from '@flowgram.ai/json-schema';
9
9
  import { I18n } from '@flowgram.ai/editor';
10
10
  import { Button, Checkbox, IconButton } from '@douyinfe/semi-ui';
11
11
  import {
@@ -29,6 +29,21 @@ import './styles.css';
29
29
 
30
30
  const DEFAULT = { type: 'object' };
31
31
 
32
+ function getSchemaDefaultValue(
33
+ typeManager: JsonSchemaTypeManager,
34
+ schema: Partial<IJsonSchema> | undefined
35
+ ) {
36
+ if (schema?.type === 'object') {
37
+ return '{}';
38
+ }
39
+
40
+ if (schema?.type === 'array') {
41
+ return '[]';
42
+ }
43
+
44
+ return typeManager.getDefaultValue(schema || {});
45
+ }
46
+
32
47
  export function JsonSchemaEditor(props: {
33
48
  value?: IJsonSchema;
34
49
  onChange?: (value: IJsonSchema) => void;
@@ -86,6 +101,7 @@ function PropertyEdit(props: {
86
101
 
87
102
  const [expand, setExpand] = useState(false);
88
103
  const [collapse, setCollapse] = useState(false);
104
+ const typeManager = useTypeManager() as JsonSchemaTypeManager;
89
105
 
90
106
  const { name, type, items, default: defaultValue, description, isPropertyRequired } = value || {};
91
107
 
@@ -136,9 +152,11 @@ function PropertyEdit(props: {
136
152
  value={typeSelectorValue}
137
153
  readonly={readonly}
138
154
  onChange={(_value) => {
155
+ const nextTypeSchema = _value || {};
139
156
  onChangeProps?.({
140
157
  ...(value || {}),
141
- ..._value,
158
+ ...nextTypeSchema,
159
+ default: getSchemaDefaultValue(typeManager, nextTypeSchema),
142
160
  });
143
161
  }}
144
162
  />