slate-react 0.92.0 → 0.92.1-2023220163057

package/dist/index.js

@@ -1578,10 +1578,27 @@ var useSlateStatic = function useSlateStatic() {
   return editor;
 };
 
+function disconnectPlaceholderResizeObserver(placeholderResizeObserver, releaseObserver) {
+  if (placeholderResizeObserver.current) {
+    placeholderResizeObserver.current.disconnect();
+
+    if (releaseObserver) {
+      placeholderResizeObserver.current = null;
+    }
+  }
+}
+
+function clearTimeoutRef(timeoutRef) {
+  if (timeoutRef.current) {
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = null;
+  }
+}
 /**
  * Individual leaves in a text node with unique formatting.
  */
 
+
 var Leaf = function Leaf(props) {
   var leaf = props.leaf,
       isLast = props.isLast,
@@ -1592,53 +1609,40 @@ var Leaf = function Leaf(props) {
       renderLeaf = _props$renderLeaf === void 0 ? function (props) {
     return /*#__PURE__*/React__default['default'].createElement(DefaultLeaf, Object.assign({}, props));
   } : _props$renderLeaf;
-  var lastPlaceholderRef = React.useRef(null);
-  var placeholderRef = React.useRef(null);
   var editor = useSlateStatic();
   var placeholderResizeObserver = React.useRef(null);
-  React.useEffect(function () {
-    return function () {
-      if (placeholderResizeObserver.current) {
-        placeholderResizeObserver.current.disconnect();
-      }
-    };
-  }, []);
-  React.useEffect(function () {
-    var placeholderEl = placeholderRef === null || placeholderRef === void 0 ? void 0 : placeholderRef.current;
+  var placeholderRef = React.useRef(null);
 
-    if (placeholderEl) {
-      EDITOR_TO_PLACEHOLDER_ELEMENT.set(editor, placeholderEl);
-    } else {
-      EDITOR_TO_PLACEHOLDER_ELEMENT["delete"](editor);
-    }
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showPlaceholder = _useState2[0],
+      setShowPlaceholder = _useState2[1];
 
-    if (placeholderResizeObserver.current) {
-      // Update existing observer.
-      placeholderResizeObserver.current.disconnect();
-      if (placeholderEl) placeholderResizeObserver.current.observe(placeholderEl);
-    } else if (placeholderEl) {
-      // Create a new observer and observe the placeholder element.
-      var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
-      placeholderResizeObserver.current = new ResizeObserver(function () {
-        // Force a re-render of the editor so its min-height can be updated
-        // to the new height of the placeholder.
-        var forceRender = EDITOR_TO_FORCE_RENDER.get(editor);
-        forceRender === null || forceRender === void 0 ? void 0 : forceRender();
-      });
-      placeholderResizeObserver.current.observe(placeholderEl);
-    }
+  var showPlaceholderTimeoutRef = React.useRef(null);
+  var callbackPlaceholderRef = React.useCallback(function (placeholderEl) {
+    disconnectPlaceholderResizeObserver(placeholderResizeObserver, placeholderEl == null);
 
-    if (!placeholderEl && lastPlaceholderRef.current) {
-      // No placeholder element, so no need for a resize observer.
-      // Force a re-render of the editor so its min-height can be reset.
-      var forceRender = EDITOR_TO_FORCE_RENDER.get(editor);
-      forceRender === null || forceRender === void 0 ? void 0 : forceRender();
-    }
+    if (placeholderEl == null) {
+      var _leaf$onPlaceholderRe;
 
-    lastPlaceholderRef.current = placeholderRef.current;
-    return function () {
       EDITOR_TO_PLACEHOLDER_ELEMENT["delete"](editor);
-    };
+      (_leaf$onPlaceholderRe = leaf.onPlaceholderResize) === null || _leaf$onPlaceholderRe === void 0 ? void 0 : _leaf$onPlaceholderRe.call(leaf, null);
+    } else {
+      EDITOR_TO_PLACEHOLDER_ELEMENT.set(editor, placeholderEl);
+
+      if (!placeholderResizeObserver.current) {
+        // Create a new observer and observe the placeholder element.
+        var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
+        placeholderResizeObserver.current = new ResizeObserver(function () {
+          var _leaf$onPlaceholderRe2;
+
+          (_leaf$onPlaceholderRe2 = leaf.onPlaceholderResize) === null || _leaf$onPlaceholderRe2 === void 0 ? void 0 : _leaf$onPlaceholderRe2.call(leaf, placeholderEl);
+        });
+      }
+
+      placeholderResizeObserver.current.observe(placeholderEl);
+      placeholderRef.current = placeholderEl;
+    }
   }, [placeholderRef, leaf, editor]);
   var children = /*#__PURE__*/React__default['default'].createElement(String, {
     isLast: isLast,
@@ -1646,8 +1650,27 @@ var Leaf = function Leaf(props) {
     parent: parent,
     text: text
   });
+  var leafIsPlaceholder = leaf[PLACEHOLDER_SYMBOL];
+  React.useEffect(function () {
+    if (leafIsPlaceholder) {
+      if (!showPlaceholderTimeoutRef.current) {
+        // Delay the placeholder so it will not render in a selection
+        showPlaceholderTimeoutRef.current = setTimeout(function () {
+          setShowPlaceholder(true);
+          showPlaceholderTimeoutRef.current = null;
+        }, 300);
+      }
+    } else {
+      clearTimeoutRef(showPlaceholderTimeoutRef);
+      setShowPlaceholder(false);
+    }
+
+    return function () {
+      return clearTimeoutRef(showPlaceholderTimeoutRef);
+    };
+  }, [leafIsPlaceholder, setShowPlaceholder]);
 
-  if (leaf[PLACEHOLDER_SYMBOL]) {
+  if (leafIsPlaceholder && showPlaceholder) {
     var placeholderProps = {
       children: leaf.placeholder,
       attributes: {
@@ -1663,7 +1686,7 @@ var Leaf = function Leaf(props) {
           textDecoration: 'none'
         },
         contentEditable: false,
-        ref: placeholderRef
+        ref: callbackPlaceholderRef
       }
     };
     children = /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, renderPlaceholder(placeholderProps), children);
@@ -3729,8 +3752,6 @@ var Children = function Children(props) {
 
 
 var Editable = function Editable(props) {
-  var _EDITOR_TO_PLACEHOLDE, _EDITOR_TO_PLACEHOLDE2;
-
   var defaultRenderPlaceholder = React.useCallback(function (props) {
     return /*#__PURE__*/React__default['default'].createElement(DefaultPlaceholder, Object.assign({}, props));
   }, []);
@@ -3766,6 +3787,11 @@ var Editable = function Editable(props) {
   var ref = React.useRef(null);
   var deferredOperations = React.useRef([]);
 
+  var _useState3 = React.useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      placeholderHeight = _useState4[0],
+      setPlaceholderHeight = _useState4[1];
+
   var _useTrackUserInput = useTrackUserInput(),
       onUserInput = _useTrackUserInput.onUserInput,
       receivedUserInput = _useTrackUserInput.receivedUserInput;
@@ -4320,12 +4346,22 @@ var Editable = function Editable(props) {
     };
   }, [scheduleOnDOMSelectionChange]);
   var decorations = decorate([editor, []]);
+  var showPlaceholder = placeholder && editor.children.length === 1 && Array.from(slate.Node.texts(editor)).length === 1 && slate.Node.string(editor) === '' && !isComposing;
+  var placeHolderResizeHandler = React.useCallback(function (placeholderEl) {
+    if (placeholderEl && showPlaceholder) {
+      var _placeholderEl$getBou;
+
+      setPlaceholderHeight((_placeholderEl$getBou = placeholderEl.getBoundingClientRect()) === null || _placeholderEl$getBou === void 0 ? void 0 : _placeholderEl$getBou.height);
+    } else {
+      setPlaceholderHeight(undefined);
+    }
+  }, [showPlaceholder]);
 
-  if (placeholder && editor.children.length === 1 && Array.from(slate.Node.texts(editor)).length === 1 && slate.Node.string(editor) === '' && !isComposing) {
+  if (showPlaceholder) {
     var _decorations$push;
 
     var start = slate.Editor.start(editor, []);
-    decorations.push((_decorations$push = {}, _defineProperty(_decorations$push, PLACEHOLDER_SYMBOL, true), _defineProperty(_decorations$push, "placeholder", placeholder), _defineProperty(_decorations$push, "anchor", start), _defineProperty(_decorations$push, "focus", start), _decorations$push));
+    decorations.push((_decorations$push = {}, _defineProperty(_decorations$push, PLACEHOLDER_SYMBOL, true), _defineProperty(_decorations$push, "placeholder", placeholder), _defineProperty(_decorations$push, "onPlaceholderResize", placeHolderResizeHandler), _defineProperty(_decorations$push, "anchor", start), _defineProperty(_decorations$push, "focus", start), _decorations$push));
   }
 
   var marks = editor.marks;
@@ -4378,7 +4414,6 @@ var Editable = function Editable(props) {
       EDITOR_TO_PENDING_INSERTION_MARKS["delete"](editor);
     });
   });
-  var placeholderHeight = (_EDITOR_TO_PLACEHOLDE = EDITOR_TO_PLACEHOLDER_ELEMENT.get(editor)) === null || _EDITOR_TO_PLACEHOLDE === void 0 ? void 0 : (_EDITOR_TO_PLACEHOLDE2 = _EDITOR_TO_PLACEHOLDE.getBoundingClientRect()) === null || _EDITOR_TO_PLACEHOLDE2 === void 0 ? void 0 : _EDITOR_TO_PLACEHOLDE2.height;
   return /*#__PURE__*/React__default['default'].createElement(ReadOnlyContext.Provider, {
     value: readOnly
   }, /*#__PURE__*/React__default['default'].createElement(DecorateContext.Provider, {