@fileverse-dev/fortune-react 1.2.0-link-ux-2 → 1.2.0-link-ux-fixes-1

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 (5) hide show
  1. package/es/components/LinkEidtCard/index.d.ts +1 -3
  2. package/es/components/LinkEidtCard/index.js +24 -11
  3. package/lib/components/LinkEidtCard/index.d.ts +1 -3
  4. package/lib/components/LinkEidtCard/index.js +24 -11
  5. package/package.json +2 -3
package/es/components/LinkEidtCard/index.d.ts CHANGED
@@ -1,7 +1,5 @@
1
1
  import React from "react";
2
2
  import { LinkCardProps } from "@fileverse-dev/fortune-core";
3
3
  import "./index.css";
4
- export declare const LinkEditCard: React.FC<LinkCardProps & {
5
- selectionHeight?: number;
6
- }>;
4
+ export declare const LinkEditCard: React.FC<LinkCardProps>;
7
5
  export default LinkEditCard;
package/es/components/LinkEidtCard/index.js CHANGED
@@ -23,17 +23,17 @@ export var LinkEditCard = function LinkEditCard(_a) {
23
23
  originType = _a.originType,
24
24
  originAddress = _a.originAddress,
25
25
  isEditing = _a.isEditing,
26
- position = _a.position,
27
- selectionHeight = _a.selectionHeight;
26
+ position = _a.position;
28
27
  var _b = useContext(WorkbookContext),
29
28
  context = _b.context,
30
29
  setContext = _b.setContext,
31
30
  refs = _b.refs;
32
31
  var cardRef = useRef(null);
33
- var _c = useState(position.cellBottom + 8),
32
+ var linkAddressRef = useRef(null);
33
+ var linkTextRef = useRef(null);
34
+ var _c = useState(position.cellBottom),
34
35
  cardTop = _c[0],
35
36
  setCardTop = _c[1];
36
- var cellTop = position.cellBottom - (typeof selectionHeight === "number" ? selectionHeight : 30);
37
37
  var _d = useState(originText),
38
38
  linkText = _d[0],
39
39
  setLinkText = _d[1];
@@ -127,12 +127,27 @@ export var LinkEditCard = function LinkEditCard(_a) {
127
127
  var spaceAbove = dragRect.top;
128
128
  var newTop;
129
129
  if (spaceBelow < cardRect.height + 16 && spaceAbove > cardRect.height + 16) {
130
+ var cellTop = position.cellBottom - 30;
130
131
  newTop = cellTop - cardRect.height - 8;
131
132
  } else {
132
133
  newTop = position.cellBottom + 8;
133
134
  }
134
135
  setCardTop(newTop);
135
- }, [cellTop, position.cellBottom, isEditing, originText, originAddress, originType]);
136
+ }, [position.cellBottom, isEditing]);
137
+ useEffect(function () {
138
+ if (linkAddressRef.current && !linkAddress && isEditing) {
139
+ setTimeout(function () {
140
+ var _a;
141
+ (_a = linkAddressRef.current) === null || _a === void 0 ? void 0 : _a.focus();
142
+ }, 0);
143
+ }
144
+ if (linkTextRef.current && !linkText && isEditing) {
145
+ setTimeout(function () {
146
+ var _a;
147
+ (_a = linkTextRef.current) === null || _a === void 0 ? void 0 : _a.focus();
148
+ }, 0);
149
+ }
150
+ }, [linkAddressRef, isEditing, linkTextRef]);
136
151
  if (!isEditing) {
137
152
  return /*#__PURE__*/React.createElement("div", __assign({}, containerEvent, {
138
153
  onKeyDown: function onKeyDown(e) {
@@ -178,9 +193,7 @@ export var LinkEditCard = function LinkEditCard(_a) {
178
193
  ref: cardRef,
179
194
  style: {
180
195
  left: position.cellLeft + 20,
181
- top: cardTop,
182
- position: "absolute",
183
- zIndex: 1000
196
+ top: cardTop
184
197
  }
185
198
  }, containerEvent), /*#__PURE__*/React.createElement(Select, {
186
199
  value: linkType,
@@ -213,13 +226,13 @@ export var LinkEditCard = function LinkEditCard(_a) {
213
226
  }, /*#__PURE__*/React.createElement(LucideIcon, {
214
227
  name: "ALargeSmall"
215
228
  })), /*#__PURE__*/React.createElement(TextField, {
229
+ ref: linkTextRef,
216
230
  placeholder: "Display text",
217
231
  value: linkText,
218
232
  onChange: function onChange(e) {
219
233
  return setLinkText(e.target.value);
220
234
  },
221
- className: "fortune-link-input",
222
- autoFocus: !linkText
235
+ className: "fortune-link-input"
223
236
  })), linkType === "webpage" && (/*#__PURE__*/React.createElement("div", {
224
237
  className: "fortune-input-with-icon"
225
238
  }, /*#__PURE__*/React.createElement("div", {
@@ -229,9 +242,9 @@ export var LinkEditCard = function LinkEditCard(_a) {
229
242
  width: 16,
230
243
  height: 16
231
244
  })), /*#__PURE__*/React.createElement(TextField, {
245
+ ref: linkAddressRef,
232
246
  placeholder: "Paste URL",
233
247
  value: linkAddress,
234
- autoFocus: !!linkText,
235
248
  onChange: function onChange(e) {
236
249
  return setLinkAddress(e.target.value);
237
250
  },
package/lib/components/LinkEidtCard/index.d.ts CHANGED
@@ -1,7 +1,5 @@
1
1
  import React from "react";
2
2
  import { LinkCardProps } from "@fileverse-dev/fortune-core";
3
3
  import "./index.css";
4
- export declare const LinkEditCard: React.FC<LinkCardProps & {
5
- selectionHeight?: number;
6
- }>;
4
+ export declare const LinkEditCard: React.FC<LinkCardProps>;
7
5
  export default LinkEditCard;
package/lib/components/LinkEidtCard/index.js CHANGED
@@ -32,17 +32,17 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
32
32
  originType = _a.originType,
33
33
  originAddress = _a.originAddress,
34
34
  isEditing = _a.isEditing,
35
- position = _a.position,
36
- selectionHeight = _a.selectionHeight;
35
+ position = _a.position;
37
36
  var _b = (0, _react.useContext)(_context.default),
38
37
  context = _b.context,
39
38
  setContext = _b.setContext,
40
39
  refs = _b.refs;
41
40
  var cardRef = (0, _react.useRef)(null);
42
- var _c = (0, _react.useState)(position.cellBottom + 8),
41
+ var linkAddressRef = (0, _react.useRef)(null);
42
+ var linkTextRef = (0, _react.useRef)(null);
43
+ var _c = (0, _react.useState)(position.cellBottom),
43
44
  cardTop = _c[0],
44
45
  setCardTop = _c[1];
45
- var cellTop = position.cellBottom - (typeof selectionHeight === "number" ? selectionHeight : 30);
46
46
  var _d = (0, _react.useState)(originText),
47
47
  linkText = _d[0],
48
48
  setLinkText = _d[1];
@@ -136,12 +136,27 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
136
136
  var spaceAbove = dragRect.top;
137
137
  var newTop;
138
138
  if (spaceBelow < cardRect.height + 16 && spaceAbove > cardRect.height + 16) {
139
+ var cellTop = position.cellBottom - 30;
139
140
  newTop = cellTop - cardRect.height - 8;
140
141
  } else {
141
142
  newTop = position.cellBottom + 8;
142
143
  }
143
144
  setCardTop(newTop);
144
- }, [cellTop, position.cellBottom, isEditing, originText, originAddress, originType]);
145
+ }, [position.cellBottom, isEditing]);
146
+ (0, _react.useEffect)(function () {
147
+ if (linkAddressRef.current && !linkAddress && isEditing) {
148
+ setTimeout(function () {
149
+ var _a;
150
+ (_a = linkAddressRef.current) === null || _a === void 0 ? void 0 : _a.focus();
151
+ }, 0);
152
+ }
153
+ if (linkTextRef.current && !linkText && isEditing) {
154
+ setTimeout(function () {
155
+ var _a;
156
+ (_a = linkTextRef.current) === null || _a === void 0 ? void 0 : _a.focus();
157
+ }, 0);
158
+ }
159
+ }, [linkAddressRef, isEditing, linkTextRef]);
145
160
  if (!isEditing) {
146
161
  return /*#__PURE__*/_react.default.createElement("div", __assign({}, containerEvent, {
147
162
  onKeyDown: function onKeyDown(e) {
@@ -187,9 +202,7 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
187
202
  ref: cardRef,
188
203
  style: {
189
204
  left: position.cellLeft + 20,
190
- top: cardTop,
191
- position: "absolute",
192
- zIndex: 1000
205
+ top: cardTop
193
206
  }
194
207
  }, containerEvent), /*#__PURE__*/_react.default.createElement(_ui.Select, {
195
208
  value: linkType,
@@ -222,13 +235,13 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
222
235
  }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
223
236
  name: "ALargeSmall"
224
237
  })), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
238
+ ref: linkTextRef,
225
239
  placeholder: "Display text",
226
240
  value: linkText,
227
241
  onChange: function onChange(e) {
228
242
  return setLinkText(e.target.value);
229
243
  },
230
- className: "fortune-link-input",
231
- autoFocus: !linkText
244
+ className: "fortune-link-input"
232
245
  })), linkType === "webpage" && (/*#__PURE__*/_react.default.createElement("div", {
233
246
  className: "fortune-input-with-icon"
234
247
  }, /*#__PURE__*/_react.default.createElement("div", {
@@ -238,9 +251,9 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
238
251
  width: 16,
239
252
  height: 16
240
253
  })), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
254
+ ref: linkAddressRef,
241
255
  placeholder: "Paste URL",
242
256
  value: linkAddress,
243
- autoFocus: !!linkText,
244
257
  onChange: function onChange(e) {
245
258
  return setLinkAddress(e.target.value);
246
259
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fileverse-dev/fortune-react",
3
- "version": "1.2.0-link-ux-2",
3
+ "version": "1.2.0-link-ux-fixes-1",
4
4
  "main": "lib/index.js",
5
5
  "types": "lib/index.d.ts",
6
6
  "module": "es/index.js",
@@ -16,13 +16,12 @@
16
16
  "tsc": "tsc"
17
17
  },
18
18
  "dependencies": {
19
- "@fileverse-dev/fortune-core": "1.2.0-link-ux-2",
19
+ "@fileverse-dev/fortune-core": "1.2.0-link-ux-fixes-1",
20
20
  "@fileverse/ui": "^4.1.7-patch-21",
21
21
  "@tippyjs/react": "^4.2.6",
22
22
  "@types/regenerator-runtime": "^0.13.6",
23
23
  "immer": "^9.0.12",
24
24
  "lodash": "^4.17.21",
25
- "react-intersection-observer": "^9.16.0",
26
25
  "regenerator-runtime": "^0.14.1"
27
26
  },
28
27
  "peerDependencies": {