colibri-ui 0.8.100 → 0.8.101

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 (3) hide show
  1. package/Editable/Editable.js +30 -4
  2. package/esm/Editable/Editable.js +30 -4
  3. package/package.json +1 -1
package/Editable/Editable.js CHANGED
@@ -59,12 +59,28 @@ const Editable = /*#__PURE__*/React.forwardRef(function EditableComponent(_a, fo
59
59
  const [currentValue, setCurrentValue] = React.useState(value !== null && value !== void 0 ? value : "");
60
60
  const [isEditing, setIsEditing] = React.useState(false);
61
61
  const lastValidValue = React.useRef(value !== null && value !== void 0 ? value : "");
62
+ // React must not rewrite the text node while typing: that resets the caret.
63
+ // A new text element is created only with a new component, so seed it then.
64
+ const [textSeed, setTextSeed] = React.useState({
65
+ component: TextComponent,
66
+ text: value !== null && value !== void 0 ? value : ""
67
+ });
68
+ if (textSeed.component !== TextComponent) {
69
+ setTextSeed({
70
+ component: TextComponent,
71
+ text: currentValue
72
+ });
73
+ }
74
+ const isMouseFocus = React.useRef(false);
62
75
  React.useImperativeHandle(forwardedRef, () => editorRef.current, []);
63
76
  React.useEffect(() => {
64
77
  if (value === undefined || value === lastValidValue.current) return;
65
78
  lastValidValue.current = value;
66
79
  setCurrentValue(value);
67
- if (editorRef.current) editorRef.current.textContent = value;
80
+ const editor = editorRef.current;
81
+ if (!editor) return;
82
+ editor.textContent = value;
83
+ if (document.activeElement === editor) placeCaretAtEnd(editor);
68
84
  }, [value]);
69
85
  const commitInput = React.useCallback(event => {
70
86
  var _a;
@@ -82,6 +98,10 @@ const Editable = /*#__PURE__*/React.forwardRef(function EditableComponent(_a, fo
82
98
  }, [maxLength, onChange]);
83
99
  const handleFocus = event => {
84
100
  setIsEditing(true);
101
+ if (isMouseFocus.current) {
102
+ isMouseFocus.current = false;
103
+ return;
104
+ }
85
105
  const selection = window.getSelection();
86
106
  const range = document.createRange();
87
107
  range.selectNodeContents(event.currentTarget);
@@ -91,6 +111,7 @@ const Editable = /*#__PURE__*/React.forwardRef(function EditableComponent(_a, fo
91
111
  const handleBlur = event => {
92
112
  var _a;
93
113
  setIsEditing(false);
114
+ isMouseFocus.current = false;
94
115
  (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
95
116
  if (event.currentTarget.innerHTML === "<br>") event.currentTarget.innerHTML = "";
96
117
  onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
@@ -113,8 +134,10 @@ const Editable = /*#__PURE__*/React.forwardRef(function EditableComponent(_a, fo
113
134
  onPaste === null || onPaste === void 0 ? void 0 : onPaste(event);
114
135
  };
115
136
  const focusEditor = () => {
116
- var _a;
117
- if (!disabled) (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
137
+ const editor = editorRef.current;
138
+ if (disabled || !editor) return;
139
+ editor.focus();
140
+ placeCaretAtEnd(editor);
118
141
  };
119
142
  return /*#__PURE__*/React__default.default.createElement("span", Object.assign({}, rest, {
120
143
  className: [styles__default.default.root, disabled ? styles__default.default.disabled : "", className !== null && className !== void 0 ? className : ""].filter(Boolean).join(" ")
@@ -129,11 +152,14 @@ const Editable = /*#__PURE__*/React.forwardRef(function EditableComponent(_a, fo
129
152
  suppressContentEditableWarning: true,
130
153
  spellCheck: spellCheck,
131
154
  onInput: commitInput,
155
+ onMouseDown: () => {
156
+ isMouseFocus.current = !disabled;
157
+ },
132
158
  onFocus: handleFocus,
133
159
  onBlur: handleBlur,
134
160
  onKeyDown: handleKeyDown,
135
161
  onPaste: handlePaste
136
- }, currentValue), !currentValue && !isEditing && placeholder && (/*#__PURE__*/React__default.default.createElement("span", {
162
+ }, textSeed.text), !currentValue && !isEditing && placeholder && (/*#__PURE__*/React__default.default.createElement("span", {
137
163
  className: styles__default.default.placeholder,
138
164
  onClick: focusEditor,
139
165
  "aria-hidden": "true"
package/esm/Editable/Editable.js CHANGED
@@ -51,12 +51,28 @@ const Editable = /*#__PURE__*/forwardRef(function EditableComponent(_a, forwarde
51
51
  const [currentValue, setCurrentValue] = useState(value !== null && value !== void 0 ? value : "");
52
52
  const [isEditing, setIsEditing] = useState(false);
53
53
  const lastValidValue = useRef(value !== null && value !== void 0 ? value : "");
54
+ // React must not rewrite the text node while typing: that resets the caret.
55
+ // A new text element is created only with a new component, so seed it then.
56
+ const [textSeed, setTextSeed] = useState({
57
+ component: TextComponent,
58
+ text: value !== null && value !== void 0 ? value : ""
59
+ });
60
+ if (textSeed.component !== TextComponent) {
61
+ setTextSeed({
62
+ component: TextComponent,
63
+ text: currentValue
64
+ });
65
+ }
66
+ const isMouseFocus = useRef(false);
54
67
  useImperativeHandle(forwardedRef, () => editorRef.current, []);
55
68
  useEffect(() => {
56
69
  if (value === undefined || value === lastValidValue.current) return;
57
70
  lastValidValue.current = value;
58
71
  setCurrentValue(value);
59
- if (editorRef.current) editorRef.current.textContent = value;
72
+ const editor = editorRef.current;
73
+ if (!editor) return;
74
+ editor.textContent = value;
75
+ if (document.activeElement === editor) placeCaretAtEnd(editor);
60
76
  }, [value]);
61
77
  const commitInput = useCallback(event => {
62
78
  var _a;
@@ -74,6 +90,10 @@ const Editable = /*#__PURE__*/forwardRef(function EditableComponent(_a, forwarde
74
90
  }, [maxLength, onChange]);
75
91
  const handleFocus = event => {
76
92
  setIsEditing(true);
93
+ if (isMouseFocus.current) {
94
+ isMouseFocus.current = false;
95
+ return;
96
+ }
77
97
  const selection = window.getSelection();
78
98
  const range = document.createRange();
79
99
  range.selectNodeContents(event.currentTarget);
@@ -83,6 +103,7 @@ const Editable = /*#__PURE__*/forwardRef(function EditableComponent(_a, forwarde
83
103
  const handleBlur = event => {
84
104
  var _a;
85
105
  setIsEditing(false);
106
+ isMouseFocus.current = false;
86
107
  (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
87
108
  if (event.currentTarget.innerHTML === "<br>") event.currentTarget.innerHTML = "";
88
109
  onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
@@ -105,8 +126,10 @@ const Editable = /*#__PURE__*/forwardRef(function EditableComponent(_a, forwarde
105
126
  onPaste === null || onPaste === void 0 ? void 0 : onPaste(event);
106
127
  };
107
128
  const focusEditor = () => {
108
- var _a;
109
- if (!disabled) (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
129
+ const editor = editorRef.current;
130
+ if (disabled || !editor) return;
131
+ editor.focus();
132
+ placeCaretAtEnd(editor);
110
133
  };
111
134
  return /*#__PURE__*/React.createElement("span", Object.assign({}, rest, {
112
135
  className: [styles.root, disabled ? styles.disabled : "", className !== null && className !== void 0 ? className : ""].filter(Boolean).join(" ")
@@ -121,11 +144,14 @@ const Editable = /*#__PURE__*/forwardRef(function EditableComponent(_a, forwarde
121
144
  suppressContentEditableWarning: true,
122
145
  spellCheck: spellCheck,
123
146
  onInput: commitInput,
147
+ onMouseDown: () => {
148
+ isMouseFocus.current = !disabled;
149
+ },
124
150
  onFocus: handleFocus,
125
151
  onBlur: handleBlur,
126
152
  onKeyDown: handleKeyDown,
127
153
  onPaste: handlePaste
128
- }, currentValue), !currentValue && !isEditing && placeholder && (/*#__PURE__*/React.createElement("span", {
154
+ }, textSeed.text), !currentValue && !isEditing && placeholder && (/*#__PURE__*/React.createElement("span", {
129
155
  className: styles.placeholder,
130
156
  onClick: focusEditor,
131
157
  "aria-hidden": "true"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "colibri-ui",
3
- "version": "0.8.100",
3
+ "version": "0.8.101",
4
4
  "description": "React UI components library",
5
5
  "main": "index.js",
6
6
  "types": "index.d.ts",