slate-react 0.92.0 → 0.92.1-2023220163057

package/dist/plugin/react-editor.d.ts

@@ -118,6 +118,7 @@ export declare const ReactEditor: {
         suppressThrow: T_1;
     }): T_1 extends true ? import("slate").BaseSelection : import("slate").BaseRange & {
         placeholder?: string | undefined;
+        onPlaceholderResize?: ((node: HTMLElement | null) => void) | undefined;
     };
     hasRange(editor: ReactEditor, range: Range): boolean;
     /**

package/dist/plugin/react-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react-editor.d.ts","sourceRoot":"","sources":["../packages/slate-react/src/plugin/react-editor.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"react-editor.d.ts","sourceRoot":"","sources":["../packages/slate-react/src/plugin/react-editor.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EAIN,MAAM,OAAO,CAAA;AAEd,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAA;AAelC,OAAO,EAEL,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,cAAc,EAOf,MAAM,cAAc,CAAA;AAGrB;;GAEG;AAEH,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C,UAAU,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;IACxC,kBAAkB,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,OAAO,CAAA;IACnD,cAAc,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,OAAO,CAAA;IAC/C,eAAe,EAAE,CACf,IAAI,EAAE,YAAY,EAClB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,KAClC,IAAI,CAAA;IACT,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,KAAK,OAAO,CAAA;IACxD,SAAS,EAAE,CACT,MAAM,EAAE,WAAW,EACnB,MAAM,EAAE,WAAW,GAAG,IAAI,KACvB,MAAM,IAAI,OAAO,CAAA;IACtB,iBAAiB,EAAE,CACjB,MAAM,EAAE,WAAW,EACnB,MAAM,EAAE,WAAW,GAAG,IAAI,KACvB,MAAM,IAAI,OAAO,CAAA;IACtB,mBAAmB,EAAE,CACnB,MAAM,EAAE,WAAW,EACnB,MAAM,EAAE,WAAW,GAAG,IAAI,KACvB,OAAO,CAAA;IACZ,6BAA6B,EAAE,CAC7B,MAAM,EAAE,WAAW,EACnB,MAAM,EAAE,WAAW,GAAG,IAAI,KACvB,OAAO,CAAA;CACb;AAGD,eAAO,MAAM,WAAW;IACtB;;OAEG;wBAEiB,WAAW,GAAG,OAAO;IAIzC;;OAEG;sBAEe,WAAW,GAAG,MAAM;IAQtC;;OAEG;oBAEa,WAAW,QAAQ,IAAI,GAAG,GAAG;IAW7C;;OAEG;qBAEc,WAAW,QAAQ,IAAI;IA8BxC;;OAEG;qCAE8B,WAAW,GAAG,QAAQ,GAAG,UAAU;IAcpE;;OAEG;sBAEe,WAAW,GAAG,OAAO;IAIvC;;OAEG;uBAEgB,WAAW,GAAG,OAAO;IAIxC;;OAEG;iBAEU,WAAW,GAAG,IAAI;IAU/B;;OAEG;kBAEW,WAAW,GAAG,IAAI;IAUhC;;OAEG;qBAEc,WAAW,GAAG,IAAI;IAcnC;;OAEG;uBAGO,WAAW,UACX,OAAO,YACN;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,GAC9B,OAAO;IAoCV;;OAEG;uBAEgB,WAAW,QAAQ,YAAY,GAAG,IAAI;IAIzD;;OAEG;+BAEwB,WAAW,QAAQ,YAAY,GAAG,OAAO;IAIpE;;OAEG;2BAEoB,WAAW,QAAQ,YAAY,GAAG,OAAO;IAIhE;;OAEG;4BAGO,WAAW,QACb,YAAY,sDAEjB,IAAI;IAIP;;OAEG;sBAEe,WAAW,QAAQ,IAAI,GAAG,WAAW;IAevD;;OAEG;uBAEgB,WAAW,SAAS,KAAK;IAwE5C;;;;;;;OAOG;uBAEgB,WAAW,SAAS,KAAK,GAAG,QAAQ;IA8BvD;;OAEG;wBAEiB,WAAW,WAAW,OAAO,GAAG,IAAI;IAgBxD;;OAEG;2BAEoB,WAAW,SAAS,GAAG,GAAG,KAAK;IAiEtD;;OAEG;4CAGO,WAAW;oBAGL,OAAO;;;IAiKvB;;OAEG;8CAGO,WAAW,YACT,QAAQ,GAAG,cAAc,GAAG,YAAY;oBAEpC,OAAO;;;;;;qBAyIN,WAAW,SAAS,KAAK,GAAG,OAAO;IAOpD;;OAEG;sBAEO,WAAW,UACX,WAAW,GAAG,IAAI;IAK5B;;OAEG;8BAEO,WAAW,UACX,WAAW,GAAG,IAAI;IAQ5B;;OAEG;gCAEO,WAAW,UACX,WAAW,GAAG,IAAI,GACzB,OAAO;IAOV;;OAEG;0CAEO,WAAW,UACX,WAAW,GAAG,IAAI,GACzB,OAAO;IASV;;OAEG;iCAC0B,MAAM;IAInC;;OAEG;gCACyB,MAAM;CAGnC,CAAA"}

package/dist/slate-react.js

@@ -2730,10 +2730,27 @@
 	  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,
@@ -2744,53 +2761,40 @@
 	      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$1 = window.ResizeObserver || ResizeObserver;
-	      placeholderResizeObserver.current = new ResizeObserver$1(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$1 = window.ResizeObserver || ResizeObserver;
+	        placeholderResizeObserver.current = new ResizeObserver$1(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$1, {
 	    isLast: isLast,
@@ -2798,8 +2802,27 @@
 	    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: {
@@ -2815,7 +2838,7 @@
 	          textDecoration: 'none'
 	        },
 	        contentEditable: false,
-	        ref: placeholderRef
+	        ref: callbackPlaceholderRef
 	      }
 	    };
 	    children = /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, renderPlaceholder(placeholderProps), children);
@@ -5137,8 +5160,6 @@
 
 
 	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));
 	  }, []);
@@ -5174,6 +5195,11 @@
 	  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;
@@ -5728,12 +5754,22 @@
 	    };
 	  }, [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;
@@ -5786,7 +5822,6 @@
 	      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, {