@flowgram.ai/form-materials 1.0.1 → 1.0.2

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 (4) hide show
  1. package/dist/cjs/components/coze-editor-extensions/extensions/variable-tree.js +7 -3
  2. package/dist/esm/components/coze-editor-extensions/extensions/variable-tree.mjs +8 -4
  3. package/package.json +6 -6
  4. package/src/components/coze-editor-extensions/extensions/variable-tree.tsx +14 -4
package/dist/cjs/components/coze-editor-extensions/extensions/variable-tree.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 external_lodash_es_namespaceObject = require("lodash-es");
31
32
  const react_namespaceObject = require("@flowgram.ai/coze-editor/react");
32
33
  const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
33
34
  const index_js_namespaceObject = require("../../variable-selector/index.js");
@@ -65,6 +66,7 @@ function VariableTree({ triggerCharacters = DEFAULT_TRIGGER_CHARACTER }) {
65
66
  visible
66
67
  ]);
67
68
  const treeData = (0, index_js_namespaceObject.useVariableTree)({});
69
+ const debounceUpdatePosKey = (0, external_react_namespaceObject.useCallback)((0, external_lodash_es_namespaceObject.debounce)(()=>setPosKey(String(Math.random())), 100), []);
68
70
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
69
71
  children: [
70
72
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.Mention, {
@@ -84,8 +86,8 @@ function VariableTree({ triggerCharacters = DEFAULT_TRIGGER_CHARACTER }) {
84
86
  },
85
87
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Tree, {
86
88
  treeData: treeData,
87
- onExpand: (v)=>{
88
- setPosKey(String(Math.random()));
89
+ onExpand: ()=>{
90
+ debounceUpdatePosKey();
89
91
  },
90
92
  onSelect: (v)=>{
91
93
  insert(v);
@@ -94,7 +96,9 @@ function VariableTree({ triggerCharacters = DEFAULT_TRIGGER_CHARACTER }) {
94
96
  }),
95
97
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.PositionMirror, {
96
98
  position: position,
97
- onChange: ()=>setPosKey(String(Math.random()))
99
+ onChange: ()=>{
100
+ setPosKey(String(Math.random()));
101
+ }
98
102
  })
99
103
  })
100
104
  ]
package/dist/esm/components/coze-editor-extensions/extensions/variable-tree.mjs CHANGED
@@ -1,5 +1,6 @@
1
1
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
- import { useEffect, useState } from "react";
2
+ import { useCallback, useEffect, useState } from "react";
3
+ import { debounce } from "lodash-es";
3
4
  import { Mention, PositionMirror, getCurrentMentionReplaceRange, useEditor } from "@flowgram.ai/coze-editor/react";
4
5
  import { Popover, Tree } from "@douyinfe/semi-ui";
5
6
  import { useVariableTree } from "../../variable-selector/index.mjs";
@@ -37,6 +38,7 @@ function VariableTree({ triggerCharacters = DEFAULT_TRIGGER_CHARACTER }) {
37
38
  visible
38
39
  ]);
39
40
  const treeData = useVariableTree({});
41
+ const debounceUpdatePosKey = useCallback(debounce(()=>setPosKey(String(Math.random())), 100), []);
40
42
  return /*#__PURE__*/ jsxs(Fragment, {
41
43
  children: [
42
44
  /*#__PURE__*/ jsx(Mention, {
@@ -56,8 +58,8 @@ function VariableTree({ triggerCharacters = DEFAULT_TRIGGER_CHARACTER }) {
56
58
  },
57
59
  children: /*#__PURE__*/ jsx(Tree, {
58
60
  treeData: treeData,
59
- onExpand: (v)=>{
60
- setPosKey(String(Math.random()));
61
+ onExpand: ()=>{
62
+ debounceUpdatePosKey();
61
63
  },
62
64
  onSelect: (v)=>{
63
65
  insert(v);
@@ -66,7 +68,9 @@ function VariableTree({ triggerCharacters = DEFAULT_TRIGGER_CHARACTER }) {
66
68
  }),
67
69
  children: /*#__PURE__*/ jsx(PositionMirror, {
68
70
  position: position,
69
- onChange: ()=>setPosKey(String(Math.random()))
71
+ onChange: ()=>{
72
+ setPosKey(String(Math.random()));
73
+ }
70
74
  })
71
75
  })
72
76
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flowgram.ai/form-materials",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "homepage": "https://flowgram.ai/",
5
5
  "repository": "https://github.com/bytedance/flowgram.ai",
6
6
  "license": "MIT",
@@ -67,9 +67,9 @@
67
67
  "@codemirror/view": "~6.38.0",
68
68
  "@codemirror/state": "~6.5.2",
69
69
  "zod": "^3.24.4",
70
- "@flowgram.ai/editor": "1.0.1",
71
- "@flowgram.ai/json-schema": "1.0.1",
72
- "@flowgram.ai/coze-editor": "1.0.1"
70
+ "@flowgram.ai/editor": "1.0.2",
71
+ "@flowgram.ai/coze-editor": "1.0.2",
72
+ "@flowgram.ai/json-schema": "1.0.2"
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": "1.0.1",
90
- "@flowgram.ai/ts-config": "1.0.1"
89
+ "@flowgram.ai/eslint-config": "1.0.2",
90
+ "@flowgram.ai/ts-config": "1.0.2"
91
91
  },
92
92
  "peerDependencies": {
93
93
  "react": ">=16.8",
package/src/components/coze-editor-extensions/extensions/variable-tree.tsx CHANGED
@@ -3,8 +3,9 @@
3
3
  * SPDX-License-Identifier: MIT
4
4
  */
5
5
 
6
- import React, { useEffect, useState } from 'react';
6
+ import React, { useCallback, useEffect, useState } from 'react';
7
7
 
8
+ import { debounce } from 'lodash-es';
8
9
  import {
9
10
  Mention,
10
11
  MentionOpenChangeEvent,
@@ -69,6 +70,11 @@ export function VariableTree({
69
70
 
70
71
  const treeData = useVariableTree({});
71
72
 
73
+ const debounceUpdatePosKey = useCallback(
74
+ debounce(() => setPosKey(String(Math.random())), 100),
75
+ []
76
+ );
77
+
72
78
  return (
73
79
  <>
74
80
  <Mention triggerCharacters={triggerCharacters} onOpenChange={handleOpenChange} />
@@ -82,8 +88,9 @@ export function VariableTree({
82
88
  <div style={{ width: 300, maxHeight: 300, overflowY: 'auto' }}>
83
89
  <Tree
84
90
  treeData={treeData}
85
- onExpand={(v) => {
86
- setPosKey(String(Math.random()));
91
+ onExpand={() => {
92
+ // When Expand, an animation is triggered, so we need to update the position by debounce
93
+ debounceUpdatePosKey();
87
94
  }}
88
95
  onSelect={(v) => {
89
96
  insert(v);
@@ -96,7 +103,10 @@ export function VariableTree({
96
103
  <PositionMirror
97
104
  position={position}
98
105
  // When Doc scroll, update position
99
- onChange={() => setPosKey(String(Math.random()))}
106
+ onChange={() => {
107
+ // Update immediately to avoid the popover position lagging behind the cursor
108
+ setPosKey(String(Math.random()));
109
+ }}
100
110
  />
101
111
  </Popover>
102
112
  </>