slate-react 0.86.0 → 0.87.0

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;AAwCrB;;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;CACvB,GAAG,KAAK,CAAC,sBAAsB,CAAC,cAAc,CAAC,CAAA;AAEhD;;GAEG;AAEH,eAAO,MAAM,QAAQ,UAAW,aAAa,gBAy8C5C,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;AA2BtE;;GAEG;AAEH,eAAO,MAAM,cAAc,gHAIO,IAAI,GAAG,OAAO,yBAc/C,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,EAGL,QAAQ,EAMT,MAAM,cAAc,CAAA;AA4CrB;;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;CACvB,GAAG,KAAK,CAAC,sBAAsB,CAAC,cAAc,CAAC,CAAA;AAEhD;;GAEG;AAEH,eAAO,MAAM,QAAQ,UAAW,aAAa,gBAu+C5C,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;AA2BtE;;GAEG;AAEH,eAAO,MAAM,cAAc,gHAIO,IAAI,GAAG,OAAO,yBAc/C,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;AAMrC,OAAO,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAA;AAyFpE,QAAA,MAAM,YAAY;YAhFR,OAAO;UACT,IAAI;YACF,OAAO;+BACY,sBAAsB,KAAK,WAAW;0BAC5C,eAAe,KAAK,WAAW;UAC9C,IAAI;kBAqFV,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,KAA4B,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAOrC,OAAO,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAA;AA2HpE,QAAA,MAAM,YAAY;YAnHR,OAAO;UACT,IAAI;YACF,OAAO;+BACY,sBAAsB,KAAK,WAAW;0BAC5C,eAAe,KAAK,WAAW;UAC9C,IAAI;kBAwHV,CAAA;AAEF,eAAO,MAAM,WAAW,UAAW,eAAe,gBAGjD,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/index.es.js

@@ -90,6 +90,7 @@ var ELEMENT_TO_NODE = new WeakMap();
 var NODE_TO_ELEMENT = new WeakMap();
 var NODE_TO_KEY = new WeakMap();
 var EDITOR_TO_KEY_TO_ELEMENT = new WeakMap();
+var EDITOR_TO_STYLE_ELEMENT = new WeakMap();
 /**
  * Weak maps for storing editor-related state.
  */
@@ -1261,18 +1262,55 @@ var Leaf = props => {
   } = props;
   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 editorEl = ReactEditor.toDOMNode(editor, editor);
 
-    if (!placeholderEl || !editorEl) {
-      return;
+    if (placeholderEl) {
+      EDITOR_TO_PLACEHOLDER_ELEMENT.set(editor, placeholderEl);
+    } else {
+      EDITOR_TO_PLACEHOLDER_ELEMENT.delete(editor);
+    }
+
+    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.
+      placeholderResizeObserver.current = new ResizeObserver(_ref => {
+        var [{
+          target
+        }] = _ref;
+        var styleElement = EDITOR_TO_STYLE_ELEMENT.get(editor);
+
+        if (styleElement) {
+          // Make the min-height the height of the placeholder.
+          var minHeight = "".concat(target.clientHeight, "px");
+          styleElement.innerHTML = ":where([data-slate-editor-id=\"".concat(editor.id, "\"]) { min-height: ").concat(minHeight, "; }");
+        }
+      });
+      placeholderResizeObserver.current.observe(placeholderEl);
+    }
+
+    if (!placeholderEl) {
+      // No placeholder element, so no need for a resize observer.
+      var styleElement = EDITOR_TO_STYLE_ELEMENT.get(editor);
+
+      if (styleElement) {
+        // No min-height if there is no placeholder.
+        styleElement.innerHTML = '';
+      }
     }
 
-    editorEl.style.minHeight = "".concat(placeholderEl.clientHeight, "px");
-    EDITOR_TO_PLACEHOLDER_ELEMENT.set(editor, placeholderEl);
     return () => {
-      editorEl.style.minHeight = 'auto';
       EDITOR_TO_PLACEHOLDER_ELEMENT.delete(editor);
     };
   }, [placeholderRef, leaf]);
@@ -3058,12 +3096,14 @@ function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if
 
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-var Children = props => /*#__PURE__*/React.createElement(React.Fragment, null, useChildren(props));
+var Children = props => /*#__PURE__*/React.createElement(React.Fragment, null, useChildren(props)); // The number of Editable components currently mounted.
+
+
+var mountedCount = 0;
 /**
  * Editable.
  */
 
-
 var Editable = props => {
   var {
     autoFocus,
@@ -3680,6 +3720,38 @@ var Editable = props => {
       EDITOR_TO_PENDING_INSERTION_MARKS.delete(editor);
     });
   });
+  useEffect(() => {
+    mountedCount++;
+
+    if (mountedCount === 1) {
+      // Set global default styles for editors.
+      var defaultStylesElement = document.createElement('style');
+      defaultStylesElement.setAttribute('data-slate-default-styles', 'true');
+      defaultStylesElement.innerHTML = // :where is used to give these rules lower specificity so user stylesheets can override them.
+      ":where([data-slate-editor]) {" + // Allow positioning relative to the editable element.
+      "position: relative;" + // Prevent the default outline styles.
+      "outline: none;" + // Preserve adjacent whitespace and new lines.
+      "white-space: pre-wrap;" + // Allow words to break if they are too long.
+      "word-wrap: break-word;" + "}";
+      document.head.appendChild(defaultStylesElement);
+    }
+
+    return () => {
+      var _document$querySelect;
+
+      mountedCount--;
+      if (mountedCount <= 0) (_document$querySelect = document.querySelector('style[data-slate-default-styles]')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.remove();
+    };
+  }, []);
+  useEffect(() => {
+    var styleElement = document.createElement('style');
+    document.head.appendChild(styleElement);
+    EDITOR_TO_STYLE_ELEMENT.set(editor, styleElement);
+    return () => {
+      styleElement.remove();
+      EDITOR_TO_STYLE_ELEMENT.delete(editor);
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(ReadOnlyContext.Provider, {
     value: readOnly
   }, /*#__PURE__*/React.createElement(DecorateContext.Provider, {
@@ -3700,6 +3772,7 @@ var Editable = props => {
     autoCorrect: HAS_BEFORE_INPUT_SUPPORT || !CAN_USE_DOM ? attributes.autoCorrect : 'false',
     autoCapitalize: HAS_BEFORE_INPUT_SUPPORT || !CAN_USE_DOM ? attributes.autoCapitalize : 'false',
     "data-slate-editor": true,
+    "data-slate-editor-id": editor.id,
     "data-slate-node": "value",
     // explicitly set this
     contentEditable: !readOnly,
@@ -3709,16 +3782,7 @@ var Editable = props => {
     zindex: -1,
     suppressContentEditableWarning: true,
     ref: ref,
-    style: _objectSpread$1({
-      // Allow positioning relative to the editable element.
-      position: 'relative',
-      // Prevent the default outline styles.
-      outline: 'none',
-      // Preserve adjacent whitespace and new lines.
-      whiteSpace: 'pre-wrap',
-      // Allow words to break if they are too long.
-      wordWrap: 'break-word'
-    }, style),
+    style: style,
     onBeforeInput: useCallback(event => {
       // COMPAT: Certain browsers don't support the `beforeinput` event, so we
       // fall back to React's leaky polyfill instead just for it. It