@datarobot/design-system 30.7.0 → 30.8.0

package/cjs/chat/chat-message-body.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChatMessageBody = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
+var _cloneDeep = _interopRequireDefault(require("lodash-es/cloneDeep"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _slate = require("slate");
 var _slateReact = require("slate-react");
@@ -36,8 +37,9 @@ function ChatMessageBodyBase({
   editableContentClassName,
   mentionsPropmptText,
   autoFocus,
-  value = _constants.DEFAULT_VALUE
+  value
 }) {
+  const slateValue = (0, _react.useMemo)(() => (0, _cloneDeep.default)(value ?? _constants.DEFAULT_VALUE), [value]);
   const anchorRef = (0, _react.useRef)(null);
   const [target, setTarget] = (0, _react.useState)();
   const [search, setSearch] = (0, _react.useState)('');
@@ -54,10 +56,10 @@ function ChatMessageBodyBase({
       event.preventDefault();
       onSubmit({
         key: itemKey,
-        value
+        value: slateValue
       });
     }
-  }, [mentions, target, value, itemKey, onSubmit]);
+  }, [mentions, target, slateValue, itemKey, onSubmit]);
   const handleChange = (0, _react.useCallback)(val => {
     onChange({
       key: itemKey,
@@ -124,14 +126,14 @@ function ChatMessageBodyBase({
     });
   }, [search]);
   (0, _react.useEffect)(() => {
-    if (!(0, _isEqual.default)(editor.children, value)) {
-      (0, _utils.resetNodes)(editor, value);
+    if (!(0, _isEqual.default)(editor.children, slateValue)) {
+      (0, _utils.resetNodes)(editor, slateValue);
     }
-  }, [value, editor]);
+  }, [slateValue, editor]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_slateReact.Slate, {
       editor: editor,
-      initialValue: value,
+      initialValue: slateValue,
       onChange: handleChange,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         "test-id": `chat-item-body-editable-content-${itemKey}`,

package/cjs/chat/utils.js

@@ -7,7 +7,9 @@ exports.getMentionsCount = getMentionsCount;
 exports.isMentionElement = isMentionElement;
 exports.resetNodes = resetNodes;
 var _slate = require("slate");
+var _cloneDeep = _interopRequireDefault(require("lodash-es/cloneDeep"));
 var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function isMentionElement(type) {
   return type === _constants.CUSTOM_ELEMENT_TYPES.mention;
 }
@@ -34,10 +36,12 @@ function resetNodes(editor, nodes) {
     path: [0],
     node
   }));
+
+  // Clone nodes before inserting so multiple editors never share Slate node refs.
   nodes.forEach((node, i) => editor.apply({
     type: 'insert_node',
     path: [i],
-    node
+    node: (0, _cloneDeep.default)(node)
   }));
   const point = _slate.Editor.end(editor, []);
   _slate.Transforms.select(editor, point);

package/cjs/text-editor/edited-text.js

@@ -7,6 +7,7 @@ exports.default = EditedText;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
+var _cloneDeep = _interopRequireDefault(require("lodash-es/cloneDeep"));
 var _slateHistory = require("slate-history");
 var _chat = require("../chat");
 var _textEditorContext = _interopRequireDefault(require("./text-editor-context"));
@@ -37,12 +38,19 @@ function EditedTextComponent({
     Slate
   } = slateReact;
   const editor = (0, _react.useMemo)(() => (0, _withLinks.default)((0, _slateHistory.withHistory)(withReact(createEditor()))), []);
+
+  // Clone the incoming value so this editor instance owns its own Slate node
+  // references. slate-dom 0.123+ keys internal WeakMaps by node identity, and
+  // sharing node references across editors (e.g. the same value bound to a
+  // form's TextEditor and a preview's EditedText at the same time) makes
+  // findPath throw "Unable to find the path for Slate node".
+  const slateValue = (0, _react.useMemo)(() => value ? (0, _cloneDeep.default)(value) : value, [value]);
   (0, _react.useEffect)(() => {
-    if (value && !(0, _isEqual.default)(editor.children, value)) {
+    if (slateValue && !(0, _isEqual.default)(editor.children, slateValue)) {
       // Update the cached value inside the editor
-      (0, _chat.resetNodes)(editor, value);
+      (0, _chat.resetNodes)(editor, slateValue);
     }
-  }, [value, editor]);
+  }, [slateValue, editor]);
   const ariaAttrs = (0, _react.useMemo)(() => {
     return {
       'aria-label': ariaLabel
@@ -53,7 +61,7 @@ function EditedTextComponent({
     // Slate throws an error when no onChange is given, providing a noop func to avoid issues
     (0, _jsxRuntime.jsx)(Slate, {
       editor: editor,
-      initialValue: value,
+      initialValue: slateValue,
       onChange: () => undefined,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textEditorContent.default, {
         placeholder: placeholder,

package/cjs/text-editor/text-editor.js

@@ -7,6 +7,7 @@ exports.default = TextEditor;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
+var _cloneDeep = _interopRequireDefault(require("lodash-es/cloneDeep"));
 var _slateHistory = require("slate-history");
 var _formField = require("../form-field");
 var _chat = require("../chat");
@@ -79,7 +80,13 @@ function TextEditorComponent({
   }, [getCharactersCounterString]);
   const editor = (0, _react.useMemo)(() => (0, _chat.withMaxLength)(maxLength)((0, _withLinks.default)((0, _slateHistory.withHistory)(withReact(createEditor())))), [maxLength]);
   const selection = (0, _react.useRef)(null);
-  const slateValue = value || initialValue || _textEditorConstants.TEXT_EDITOR_DEFAULT_VALUE;
+  // Clone the incoming value so this editor instance owns its own Slate node
+  // references. slate-dom 0.123+ keys internal WeakMaps by node identity, and
+  // sharing the same node references across editors (e.g. several editors
+  // falling back to TEXT_EDITOR_DEFAULT_VALUE, or the same parent state being
+  // bound to multiple editors at once) makes findPath throw
+  // "Unable to find the path for Slate node".
+  const slateValue = (0, _react.useMemo)(() => (0, _cloneDeep.default)(value || initialValue || _textEditorConstants.TEXT_EDITOR_DEFAULT_VALUE), [value, initialValue]);
   (0, _react.useEffect)(() => {
     if (!(0, _isEqual.default)(editor.children, slateValue)) {
       // Update the cached value inside the editor

package/esm/chat/chat-message-body.js

@@ -1,5 +1,6 @@
 import React, { useMemo, useState, useCallback, useRef, useEffect, memo } from 'react';
 import isEqual from 'lodash-es/isEqual';
+import cloneDeep from 'lodash-es/cloneDeep';
 import classNames from 'classnames';
 import { Editor, createEditor, Transforms, Range } from 'slate';
 import { Slate, Editable, ReactEditor, withReact } from 'slate-react';
@@ -28,8 +29,9 @@ function ChatMessageBodyBase({
   editableContentClassName,
   mentionsPropmptText,
   autoFocus,
-  value = DEFAULT_VALUE
+  value
 }) {
+  const slateValue = useMemo(() => cloneDeep(value ?? DEFAULT_VALUE), [value]);
   const anchorRef = useRef(null);
   const [target, setTarget] = useState();
   const [search, setSearch] = useState('');
@@ -46,10 +48,10 @@ function ChatMessageBodyBase({
       event.preventDefault();
       onSubmit({
         key: itemKey,
-        value
+        value: slateValue
       });
     }
-  }, [mentions, target, value, itemKey, onSubmit]);
+  }, [mentions, target, slateValue, itemKey, onSubmit]);
   const handleChange = useCallback(val => {
     onChange({
       key: itemKey,
@@ -116,14 +118,14 @@ function ChatMessageBodyBase({
     });
   }, [search]);
   useEffect(() => {
-    if (!isEqual(editor.children, value)) {
-      resetNodes(editor, value);
+    if (!isEqual(editor.children, slateValue)) {
+      resetNodes(editor, slateValue);
     }
-  }, [value, editor]);
+  }, [slateValue, editor]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(Slate, {
       editor: editor,
-      initialValue: value,
+      initialValue: slateValue,
       onChange: handleChange,
       children: [/*#__PURE__*/_jsx("div", {
         "test-id": `chat-item-body-editable-content-${itemKey}`,

package/esm/chat/utils.js

@@ -1,4 +1,5 @@
 import { Editor, Transforms } from 'slate';
+import cloneDeep from 'lodash-es/cloneDeep';
 import { CUSTOM_ELEMENT_TYPES } from './constants';
 export function isMentionElement(type) {
   return type === CUSTOM_ELEMENT_TYPES.mention;
@@ -26,10 +27,12 @@ export function resetNodes(editor, nodes) {
     path: [0],
     node
   }));
+
+  // Clone nodes before inserting so multiple editors never share Slate node refs.
   nodes.forEach((node, i) => editor.apply({
     type: 'insert_node',
     path: [i],
-    node
+    node: cloneDeep(node)
   }));
   const point = Editor.end(editor, []);
   Transforms.select(editor, point);

package/esm/text-editor/edited-text.js

@@ -1,6 +1,7 @@
 import React, { useMemo, useContext, useEffect } from 'react';
 import classnames from 'classnames';
 import isEqual from 'lodash-es/isEqual';
+import cloneDeep from 'lodash-es/cloneDeep';
 import { withHistory } from 'slate-history';
 import { resetNodes } from '../chat';
 import TextEditorContext from './text-editor-context';
@@ -29,12 +30,19 @@ function EditedTextComponent({
     Slate
   } = slateReact;
   const editor = useMemo(() => withLinks(withHistory(withReact(createEditor()))), []);
+
+  // Clone the incoming value so this editor instance owns its own Slate node
+  // references. slate-dom 0.123+ keys internal WeakMaps by node identity, and
+  // sharing node references across editors (e.g. the same value bound to a
+  // form's TextEditor and a preview's EditedText at the same time) makes
+  // findPath throw "Unable to find the path for Slate node".
+  const slateValue = useMemo(() => value ? cloneDeep(value) : value, [value]);
   useEffect(() => {
-    if (value && !isEqual(editor.children, value)) {
+    if (slateValue && !isEqual(editor.children, slateValue)) {
       // Update the cached value inside the editor
-      resetNodes(editor, value);
+      resetNodes(editor, slateValue);
     }
-  }, [value, editor]);
+  }, [slateValue, editor]);
   const ariaAttrs = useMemo(() => {
     return {
       'aria-label': ariaLabel
@@ -45,7 +53,7 @@ function EditedTextComponent({
     // Slate throws an error when no onChange is given, providing a noop func to avoid issues
     _jsx(Slate, {
       editor: editor,
-      initialValue: value,
+      initialValue: slateValue,
       onChange: () => undefined,
       children: /*#__PURE__*/_jsx(TextEditorContent, {
         placeholder: placeholder,

package/esm/text-editor/text-editor.js

@@ -1,6 +1,7 @@
 import React, { useMemo, useRef, useContext, useState, useEffect, useCallback } from 'react';
 import classnames from 'classnames';
 import isEqual from 'lodash-es/isEqual';
+import cloneDeep from 'lodash-es/cloneDeep';
 import { withHistory } from 'slate-history';
 import { ValidityMessages, getErrorAriaAttributes, useDefaultValidationValues } from '../form-field';
 import { resetNodes, CharactersCounter, withMaxLength } from '../chat';
@@ -71,7 +72,13 @@ function TextEditorComponent({
   }, [getCharactersCounterString]);
   const editor = useMemo(() => withMaxLength(maxLength)(withLinks(withHistory(withReact(createEditor())))), [maxLength]);
   const selection = useRef(null);
-  const slateValue = value || initialValue || TEXT_EDITOR_DEFAULT_VALUE;
+  // Clone the incoming value so this editor instance owns its own Slate node
+  // references. slate-dom 0.123+ keys internal WeakMaps by node identity, and
+  // sharing the same node references across editors (e.g. several editors
+  // falling back to TEXT_EDITOR_DEFAULT_VALUE, or the same parent state being
+  // bound to multiple editors at once) makes findPath throw
+  // "Unable to find the path for Slate node".
+  const slateValue = useMemo(() => cloneDeep(value || initialValue || TEXT_EDITOR_DEFAULT_VALUE), [value, initialValue]);
   useEffect(() => {
     if (!isEqual(editor.children, slateValue)) {
       // Update the cached value inside the editor

package/js/bundle/bundle.js

@@ -15015,6 +15015,48 @@ function trimmedEndIndex(string) {
 
 /***/ }),
 
+/***/ "../../node_modules/lodash-es/cloneDeep.js":
+/*!*************************************************!*\
+  !*** ../../node_modules/lodash-es/cloneDeep.js ***!
+  \*************************************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _baseClone_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./_baseClone.js */ "../../node_modules/lodash-es/_baseClone.js");
+
+
+/** Used to compose bitmasks for cloning. */
+var CLONE_DEEP_FLAG = 1,
+  CLONE_SYMBOLS_FLAG = 4;
+
+/**
+ * This method is like `_.clone` except that it recursively clones `value`.
+ *
+ * @static
+ * @memberOf _
+ * @since 1.0.0
+ * @category Lang
+ * @param {*} value The value to recursively clone.
+ * @returns {*} Returns the deep cloned value.
+ * @see _.clone
+ * @example
+ *
+ * var objects = [{ 'a': 1 }, { 'b': 2 }];
+ *
+ * var deep = _.cloneDeep(objects);
+ * console.log(deep[0] === objects[0]);
+ * // => false
+ */
+function cloneDeep(value) {
+  return (0,_baseClone_js__WEBPACK_IMPORTED_MODULE_0__["default"])(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG);
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (cloneDeep);
+
+/***/ }),
+
 /***/ "../../node_modules/lodash-es/constant.js":
 /*!************************************************!*\
   !*** ../../node_modules/lodash-es/constant.js ***!
@@ -45651,7 +45693,8 @@ var CharactersCounter = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.memo)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var lodash_es_isEqual__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! lodash-es/isEqual */ "../../node_modules/lodash-es/isEqual.js");
+/* harmony import */ var lodash_es_isEqual__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! lodash-es/isEqual */ "../../node_modules/lodash-es/isEqual.js");
+/* harmony import */ var lodash_es_cloneDeep__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! lodash-es/cloneDeep */ "../../node_modules/lodash-es/cloneDeep.js");
 /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
 /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var slate__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! slate */ "slate");
@@ -45685,6 +45728,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 
 
+
 function ChatMessageBodyBase(_ref) {
   var itemKey = _ref.itemKey,
     textBoxAriaLabel = _ref.textBoxAriaLabel,
@@ -45702,8 +45746,10 @@ function ChatMessageBodyBase(_ref) {
     editableContentClassName = _ref.editableContentClassName,
     mentionsPropmptText = _ref.mentionsPropmptText,
     autoFocus = _ref.autoFocus,
-    _ref$value = _ref.value,
-    value = _ref$value === void 0 ? _constants__WEBPACK_IMPORTED_MODULE_9__.DEFAULT_VALUE : _ref$value;
+    value = _ref.value;
+  var slateValue = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    return (0,lodash_es_cloneDeep__WEBPACK_IMPORTED_MODULE_12__["default"])(value !== null && value !== void 0 ? value : _constants__WEBPACK_IMPORTED_MODULE_9__.DEFAULT_VALUE);
+  }, [value]);
   var anchorRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(),
     _useState2 = _slicedToArray(_useState, 2),
@@ -45734,10 +45780,10 @@ function ChatMessageBodyBase(_ref) {
       event.preventDefault();
       onSubmit({
         key: itemKey,
-        value: value
+        value: slateValue
       });
     }
-  }, [mentions, target, value, itemKey, onSubmit]);
+  }, [mentions, target, slateValue, itemKey, onSubmit]);
   var handleChange = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (val) {
     onChange({
       key: itemKey,
@@ -45807,13 +45853,13 @@ function ChatMessageBodyBase(_ref) {
     });
   }, [search]);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-    if (!(0,lodash_es_isEqual__WEBPACK_IMPORTED_MODULE_12__["default"])(editor.children, value)) {
-      (0,_utils__WEBPACK_IMPORTED_MODULE_11__.resetNodes)(editor, value);
+    if (!(0,lodash_es_isEqual__WEBPACK_IMPORTED_MODULE_13__["default"])(editor.children, slateValue)) {
+      (0,_utils__WEBPACK_IMPORTED_MODULE_11__.resetNodes)(editor, slateValue);
     }
-  }, [value, editor]);
+  }, [slateValue, editor]);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(slate_react__WEBPACK_IMPORTED_MODULE_3__.Slate, {
     editor: editor,
-    initialValue: value,
+    initialValue: slateValue,
     onChange: handleChange
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     "test-id": "chat-item-body-editable-content-".concat(itemKey),
@@ -46436,6 +46482,7 @@ var getOptionsTriggerIcon = function getOptionsTriggerIcon() {
 /* harmony export */ });
 /* harmony import */ var slate__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! slate */ "slate");
 /* harmony import */ var slate__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(slate__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var lodash_es_cloneDeep__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lodash-es/cloneDeep */ "../../node_modules/lodash-es/cloneDeep.js");
 /* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./constants */ "./src/components/chat/constants.ts");
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -46445,6 +46492,7 @@ function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 
 
+
 function isMentionElement(type) {
   return type === _constants__WEBPACK_IMPORTED_MODULE_1__.CUSTOM_ELEMENT_TYPES.mention;
 }
@@ -46471,11 +46519,13 @@ function resetNodes(editor, nodes) {
       node: node
     });
   });
+
+  // Clone nodes before inserting so multiple editors never share Slate node refs.
   nodes.forEach(function (node, i) {
     return editor.apply({
       type: 'insert_node',
       path: [i],
-      node: node
+      node: (0,lodash_es_cloneDeep__WEBPACK_IMPORTED_MODULE_2__["default"])(node)
     });
   });
   var point = slate__WEBPACK_IMPORTED_MODULE_0__.Editor.end(editor, []);
@@ -83181,7 +83231,8 @@ function TabularDataTooltip(_ref) {
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
 /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var lodash_es_isEqual__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! lodash-es/isEqual */ "../../node_modules/lodash-es/isEqual.js");
+/* harmony import */ var lodash_es_isEqual__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! lodash-es/isEqual */ "../../node_modules/lodash-es/isEqual.js");
+/* harmony import */ var lodash_es_cloneDeep__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! lodash-es/cloneDeep */ "../../node_modules/lodash-es/cloneDeep.js");
 /* harmony import */ var slate_history__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! slate-history */ "slate-history");
 /* harmony import */ var slate_history__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(slate_history__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _chat__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../chat */ "./src/components/chat/index.ts");
@@ -83201,6 +83252,7 @@ function TabularDataTooltip(_ref) {
 
 
 
+
 function EditedTextComponent(_ref) {
   var value = _ref.value,
     placeholder = _ref.placeholder,
@@ -83221,12 +83273,21 @@ function EditedTextComponent(_ref) {
   var editor = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
     return (0,_hooks_with_links__WEBPACK_IMPORTED_MODULE_6__["default"])((0,slate_history__WEBPACK_IMPORTED_MODULE_2__.withHistory)(withReact(createEditor())));
   }, []);
+
+  // Clone the incoming value so this editor instance owns its own Slate node
+  // references. slate-dom 0.123+ keys internal WeakMaps by node identity, and
+  // sharing node references across editors (e.g. the same value bound to a
+  // form's TextEditor and a preview's EditedText at the same time) makes
+  // findPath throw "Unable to find the path for Slate node".
+  var slateValue = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    return value ? (0,lodash_es_cloneDeep__WEBPACK_IMPORTED_MODULE_9__["default"])(value) : value;
+  }, [value]);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-    if (value && !(0,lodash_es_isEqual__WEBPACK_IMPORTED_MODULE_9__["default"])(editor.children, value)) {
+    if (slateValue && !(0,lodash_es_isEqual__WEBPACK_IMPORTED_MODULE_10__["default"])(editor.children, slateValue)) {
       // Update the cached value inside the editor
-      (0,_chat__WEBPACK_IMPORTED_MODULE_3__.resetNodes)(editor, value);
+      (0,_chat__WEBPACK_IMPORTED_MODULE_3__.resetNodes)(editor, slateValue);
     }
-  }, [value, editor]);
+  }, [slateValue, editor]);
   var ariaAttrs = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
     return {
       'aria-label': ariaLabel
@@ -83237,7 +83298,7 @@ function EditedTextComponent(_ref) {
     // Slate throws an error when no onChange is given, providing a noop func to avoid issues
     react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Slate, {
       editor: editor,
-      initialValue: value,
+      initialValue: slateValue,
       onChange: function onChange() {
         return undefined;
       }
@@ -85225,7 +85286,8 @@ function TextEditorToolbar(_ref) {
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
 /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var lodash_es_isEqual__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! lodash-es/isEqual */ "../../node_modules/lodash-es/isEqual.js");
+/* harmony import */ var lodash_es_isEqual__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! lodash-es/isEqual */ "../../node_modules/lodash-es/isEqual.js");
+/* harmony import */ var lodash_es_cloneDeep__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! lodash-es/cloneDeep */ "../../node_modules/lodash-es/cloneDeep.js");
 /* harmony import */ var slate_history__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! slate-history */ "slate-history");
 /* harmony import */ var slate_history__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(slate_history__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _form_field__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../form-field */ "./src/components/form-field/index.ts");
@@ -85271,6 +85333,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 
 
 
+
 function TextEditorComponent(_ref) {
   var name = _ref.name,
     type = _ref.type,
@@ -85337,9 +85400,17 @@ function TextEditorComponent(_ref) {
     return (0,_chat__WEBPACK_IMPORTED_MODULE_4__.withMaxLength)(maxLength)((0,_hooks_with_links__WEBPACK_IMPORTED_MODULE_9__["default"])((0,slate_history__WEBPACK_IMPORTED_MODULE_2__.withHistory)(withReact(createEditor()))));
   }, [maxLength]);
   var selection = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-  var slateValue = value || initialValue || _text_editor_constants__WEBPACK_IMPORTED_MODULE_11__.TEXT_EDITOR_DEFAULT_VALUE;
+  // Clone the incoming value so this editor instance owns its own Slate node
+  // references. slate-dom 0.123+ keys internal WeakMaps by node identity, and
+  // sharing the same node references across editors (e.g. several editors
+  // falling back to TEXT_EDITOR_DEFAULT_VALUE, or the same parent state being
+  // bound to multiple editors at once) makes findPath throw
+  // "Unable to find the path for Slate node".
+  var slateValue = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    return (0,lodash_es_cloneDeep__WEBPACK_IMPORTED_MODULE_16__["default"])(value || initialValue || _text_editor_constants__WEBPACK_IMPORTED_MODULE_11__.TEXT_EDITOR_DEFAULT_VALUE);
+  }, [value, initialValue]);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-    if (!(0,lodash_es_isEqual__WEBPACK_IMPORTED_MODULE_16__["default"])(editor.children, slateValue)) {
+    if (!(0,lodash_es_isEqual__WEBPACK_IMPORTED_MODULE_17__["default"])(editor.children, slateValue)) {
       // Update the cached value inside the editor
       (0,_chat__WEBPACK_IMPORTED_MODULE_4__.resetNodes)(editor, slateValue);
     }