slate-react 0.92.0 → 0.92.1-2023220163057

package/dist/components/editable.d.ts

@@ -57,7 +57,7 @@ export declare type RenderPlaceholderProps = {
         'data-slate-placeholder': boolean;
         dir?: 'rtl';
         contentEditable: boolean;
-        ref: React.RefObject<any>;
+        ref: React.RefCallback<any>;
         style: React.CSSProperties;
     };
 };

package/dist/components/editable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editable.d.ts","sourceRoot":"","sources":["../packages/slate-react/src/components/editable.tsx"],"names":[],"mappings":"AAGA,OAAO,KAON,MAAM,OAAO,CAAA;AAEd,OAAO,EAEL,OAAO,EAEP,SAAS,EAET,KAAK,EACL,IAAI,EAEL,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAOpD,OAAO,EAGL,QAAQ,EAMT,MAAM,cAAc,CAAA;AAyCrB;;GAEG;AAEH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,GAAG,CAAA;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,UAAU,EAAE;QACV,iBAAiB,EAAE,SAAS,CAAA;QAC5B,mBAAmB,CAAC,EAAE,IAAI,CAAA;QAC1B,iBAAiB,CAAC,EAAE,IAAI,CAAA;QACxB,GAAG,CAAC,EAAE,KAAK,CAAA;QACX,GAAG,EAAE,GAAG,CAAA;KACT,CAAA;CACF;AAED;;GAEG;AAEH,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,GAAG,CAAA;IACb,IAAI,EAAE,IAAI,CAAA;IACV,IAAI,EAAE,IAAI,CAAA;IACV,UAAU,EAAE;QACV,iBAAiB,EAAE,IAAI,CAAA;KACxB,CAAA;CACF;AAED;;GAEG;AAEH,oBAAY,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,KAAK,EAAE,CAAA;IACxC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,GAAG,CAAC,OAAO,CAAA;IAC1D,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,GAAG,CAAC,OAAO,CAAA;IACpD,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,GAAG,CAAC,OAAO,CAAA;IAClE,uBAAuB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC3E,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B,GAAG,KAAK,CAAC,sBAAsB,CAAC,cAAc,CAAC,CAAA;AAEhD;;GAEG;AAEH,eAAO,MAAM,QAAQ,UAAW,aAAa,gBAohD5C,CAAA;AAED;;GAEG;AACH,oBAAY,sBAAsB,GAAG;IACnC,QAAQ,EAAE,GAAG,CAAA;IACb,UAAU,EAAE;QACV,wBAAwB,EAAE,OAAO,CAAA;QACjC,GAAG,CAAC,EAAE,KAAK,CAAA;QACX,eAAe,EAAE,OAAO,CAAA;QACxB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA;QACzB,KAAK,EAAE,KAAK,CAAC,aAAa,CAAA;KAC3B,CAAA;CACF,CAAA;AAED;;GAEG;AAEH,eAAO,MAAM,kBAAkB,8BAG5B,sBAAsB,gBAOxB,CAAA;AAED;;GAEG;AAEH,eAAO,MAAM,eAAe,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,KAAK,EAAa,CAAA;AA4BtE;;GAEG;AAEH,eAAO,MAAM,cAAc,gHAIO,IAAI,GAAG,OAAO,yBAc/C,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,qBAAqB,yFAUjC,CAAA;AAED;;GAEG;AAEH,eAAO,MAAM,iBAAiB,uDAEJ,IAAI,GAAG,OAAO,yBAevC,CAAA"}
+{"version":3,"file":"editable.d.ts","sourceRoot":"","sources":["../packages/slate-react/src/components/editable.tsx"],"names":[],"mappings":"AAGA,OAAO,KAON,MAAM,OAAO,CAAA;AAEd,OAAO,EAEL,OAAO,EAEP,SAAS,EAET,KAAK,EACL,IAAI,EAEL,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAOpD,OAAO,EAEL,QAAQ,EAMT,MAAM,cAAc,CAAA;AAyCrB;;GAEG;AAEH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,GAAG,CAAA;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,UAAU,EAAE;QACV,iBAAiB,EAAE,SAAS,CAAA;QAC5B,mBAAmB,CAAC,EAAE,IAAI,CAAA;QAC1B,iBAAiB,CAAC,EAAE,IAAI,CAAA;QACxB,GAAG,CAAC,EAAE,KAAK,CAAA;QACX,GAAG,EAAE,GAAG,CAAA;KACT,CAAA;CACF;AAED;;GAEG;AAEH,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,GAAG,CAAA;IACb,IAAI,EAAE,IAAI,CAAA;IACV,IAAI,EAAE,IAAI,CAAA;IACV,UAAU,EAAE;QACV,iBAAiB,EAAE,IAAI,CAAA;KACxB,CAAA;CACF;AAED;;GAEG;AAEH,oBAAY,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,KAAK,EAAE,CAAA;IACxC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,GAAG,CAAC,OAAO,CAAA;IAC1D,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,GAAG,CAAC,OAAO,CAAA;IACpD,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,GAAG,CAAC,OAAO,CAAA;IAClE,uBAAuB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC3E,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B,GAAG,KAAK,CAAC,sBAAsB,CAAC,cAAc,CAAC,CAAA;AAEhD;;GAEG;AAEH,eAAO,MAAM,QAAQ,UAAW,aAAa,gBAgiD5C,CAAA;AAED;;GAEG;AACH,oBAAY,sBAAsB,GAAG;IACnC,QAAQ,EAAE,GAAG,CAAA;IACb,UAAU,EAAE;QACV,wBAAwB,EAAE,OAAO,CAAA;QACjC,GAAG,CAAC,EAAE,KAAK,CAAA;QACX,eAAe,EAAE,OAAO,CAAA;QACxB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAA;QAC3B,KAAK,EAAE,KAAK,CAAC,aAAa,CAAA;KAC3B,CAAA;CACF,CAAA;AAED;;GAEG;AAEH,eAAO,MAAM,kBAAkB,8BAG5B,sBAAsB,gBAOxB,CAAA;AAED;;GAEG;AAEH,eAAO,MAAM,eAAe,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,KAAK,EAAa,CAAA;AA4BtE;;GAEG;AAEH,eAAO,MAAM,cAAc,gHAIO,IAAI,GAAG,OAAO,yBAc/C,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,qBAAqB,yFAUjC,CAAA;AAED;;GAEG;AAEH,eAAO,MAAM,iBAAiB,uDAEJ,IAAI,GAAG,OAAO,yBAevC,CAAA"}

package/dist/components/leaf.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"leaf.d.ts","sourceRoot":"","sources":["../packages/slate-react/src/components/leaf.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAQrC,OAAO,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAA;AA0HpE,QAAA,MAAM,YAAY;YAlHR,OAAO;UACT,IAAI;YACF,OAAO;+BACY,sBAAsB,KAAK,WAAW;0BAC5C,eAAe,KAAK,WAAW;UAC9C,IAAI;kBAuHV,CAAA;AAEF,eAAO,MAAM,WAAW,UAAW,eAAe,gBAGjD,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"leaf.d.ts","sourceRoot":"","sources":["../packages/slate-react/src/components/leaf.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAQrC,OAAO,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAA;AA0IpE,QAAA,MAAM,YAAY;YA9GR,OAAO;UACT,IAAI;YACF,OAAO;+BACY,sBAAsB,KAAK,WAAW;0BAC5C,eAAe,KAAK,WAAW;UAC9C,IAAI;kBAmHV,CAAA;AAEF,eAAO,MAAM,WAAW,UAAW,eAAe,gBAGjD,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/custom-types.d.ts

@@ -5,9 +5,11 @@ declare module 'slate' {
         Editor: ReactEditor;
         Text: BaseText & {
             placeholder?: string;
+            onPlaceholderResize?: (node: HTMLElement | null) => void;
         };
         Range: BaseRange & {
             placeholder?: string;
+            onPlaceholderResize?: (node: HTMLElement | null) => void;
         };
     }
 }

package/dist/custom-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-types.d.ts","sourceRoot":"","sources":["packages/slate-react/src/custom-types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAEnD,OAAO,QAAQ,OAAO,CAAC;IACrB,UAAU,WAAW;QACnB,MAAM,EAAE,WAAW,CAAA;QACnB,IAAI,EAAE,QAAQ,GAAG;YACf,WAAW,CAAC,EAAE,MAAM,CAAA;SACrB,CAAA;QACD,KAAK,EAAE,SAAS,GAAG;YACjB,WAAW,CAAC,EAAE,MAAM,CAAA;SACrB,CAAA;KACF;CACF"}
+{"version":3,"file":"custom-types.d.ts","sourceRoot":"","sources":["packages/slate-react/src/custom-types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAEnD,OAAO,QAAQ,OAAO,CAAC;IACrB,UAAU,WAAW;QACnB,MAAM,EAAE,WAAW,CAAA;QACnB,IAAI,EAAE,QAAQ,GAAG;YACf,WAAW,CAAC,EAAE,MAAM,CAAA;YACpB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;SACzD,CAAA;QACD,KAAK,EAAE,SAAS,GAAG;YACjB,WAAW,CAAC,EAAE,MAAM,CAAA;YACpB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;SACzD,CAAA;KACF;CACF"}

package/dist/index.es.js

@@ -1333,10 +1333,27 @@ var 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 = props => {
   var {
     leaf,
@@ -1346,53 +1363,35 @@ var Leaf = props => {
     renderPlaceholder,
     renderLeaf = props => /*#__PURE__*/React.createElement(DefaultLeaf, Object.assign({}, props))
   } = props;
-  var lastPlaceholderRef = useRef(null);
-  var placeholderRef = useRef(null);
   var editor = useSlateStatic();
   var placeholderResizeObserver = useRef(null);
-  useEffect(() => {
-    return () => {
-      if (placeholderResizeObserver.current) {
-        placeholderResizeObserver.current.disconnect();
-      }
-    };
-  }, []);
-  useEffect(() => {
-    var placeholderEl = placeholderRef === null || placeholderRef === void 0 ? void 0 : placeholderRef.current;
+  var placeholderRef = useRef(null);
+  var [showPlaceholder, setShowPlaceholder] = useState(false);
+  var showPlaceholderTimeoutRef = useRef(null);
+  var callbackPlaceholderRef = useCallback(placeholderEl => {
+    disconnectPlaceholderResizeObserver(placeholderResizeObserver, placeholderEl == null);
+
+    if (placeholderEl == null) {
+      var _leaf$onPlaceholderRe;
 
-    if (placeholderEl) {
-      EDITOR_TO_PLACEHOLDER_ELEMENT.set(editor, placeholderEl);
-    } else {
       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) {
-      // 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(() => {
-        // 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);
-    }
+      if (!placeholderResizeObserver.current) {
+        // Create a new observer and observe the placeholder element.
+        var ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
+        placeholderResizeObserver.current = new ResizeObserver$1(() => {
+          var _leaf$onPlaceholderRe2;
 
-    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();
-    }
+          (_leaf$onPlaceholderRe2 = leaf.onPlaceholderResize) === null || _leaf$onPlaceholderRe2 === void 0 ? void 0 : _leaf$onPlaceholderRe2.call(leaf, placeholderEl);
+        });
+      }
 
-    lastPlaceholderRef.current = placeholderRef.current;
-    return () => {
-      EDITOR_TO_PLACEHOLDER_ELEMENT.delete(editor);
-    };
+      placeholderResizeObserver.current.observe(placeholderEl);
+      placeholderRef.current = placeholderEl;
+    }
   }, [placeholderRef, leaf, editor]);
   var children = /*#__PURE__*/React.createElement(String, {
     isLast: isLast,
@@ -1400,8 +1399,25 @@ var Leaf = props => {
     parent: parent,
     text: text
   });
+  var leafIsPlaceholder = leaf[PLACEHOLDER_SYMBOL];
+  useEffect(() => {
+    if (leafIsPlaceholder) {
+      if (!showPlaceholderTimeoutRef.current) {
+        // Delay the placeholder so it will not render in a selection
+        showPlaceholderTimeoutRef.current = setTimeout(() => {
+          setShowPlaceholder(true);
+          showPlaceholderTimeoutRef.current = null;
+        }, 300);
+      }
+    } else {
+      clearTimeoutRef(showPlaceholderTimeoutRef);
+      setShowPlaceholder(false);
+    }
 
-  if (leaf[PLACEHOLDER_SYMBOL]) {
+    return () => clearTimeoutRef(showPlaceholderTimeoutRef);
+  }, [leafIsPlaceholder, setShowPlaceholder]);
+
+  if (leafIsPlaceholder && showPlaceholder) {
     var placeholderProps = {
       children: leaf.placeholder,
       attributes: {
@@ -1417,7 +1433,7 @@ var Leaf = props => {
           textDecoration: 'none'
         },
         contentEditable: false,
-        ref: placeholderRef
+        ref: callbackPlaceholderRef
       }
     };
     children = /*#__PURE__*/React.createElement(React.Fragment, null, renderPlaceholder(placeholderProps), children);
@@ -3251,8 +3267,6 @@ var Children = props => /*#__PURE__*/React.createElement(React.Fragment, null, u
 
 
 var Editable = props => {
-  var _EDITOR_TO_PLACEHOLDE, _EDITOR_TO_PLACEHOLDE2;
-
   var defaultRenderPlaceholder = useCallback(props => /*#__PURE__*/React.createElement(DefaultPlaceholder, Object.assign({}, props)), []);
 
   var {
@@ -3276,6 +3290,7 @@ var Editable = props => {
   var [isComposing, setIsComposing] = useState(false);
   var ref = useRef(null);
   var deferredOperations = useRef([]);
+  var [placeholderHeight, setPlaceholderHeight] = useState();
   var {
     onUserInput,
     receivedUserInput
@@ -3822,12 +3837,23 @@ var Editable = props => {
     };
   }, [scheduleOnDOMSelectionChange]);
   var decorations = decorate([editor, []]);
+  var showPlaceholder = placeholder && editor.children.length === 1 && Array.from(Node.texts(editor)).length === 1 && Node.string(editor) === '' && !isComposing;
+  var placeHolderResizeHandler = useCallback(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(Node.texts(editor)).length === 1 && Node.string(editor) === '' && !isComposing) {
+  if (showPlaceholder) {
     var start = Editor.start(editor, []);
     decorations.push({
       [PLACEHOLDER_SYMBOL]: true,
       placeholder,
+      onPlaceholderResize: placeHolderResizeHandler,
       anchor: start,
       focus: start
     });
@@ -3890,7 +3916,6 @@ var 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.createElement(ReadOnlyContext.Provider, {
     value: readOnly
   }, /*#__PURE__*/React.createElement(DecorateContext.Provider, {