slate-react 0.89.0 → 0.90.0-20231122332

package/dist/components/editable.d.ts

@@ -42,6 +42,7 @@ export declare type EditableProps = {
     renderPlaceholder?: (props: RenderPlaceholderProps) => JSX.Element;
     scrollSelectionIntoView?: (editor: ReactEditor, domRange: DOMRange) => void;
     as?: React.ElementType;
+    disableDefaultStyles?: boolean;
 } & React.TextareaHTMLAttributes<HTMLDivElement>;
 /**
  * Editable.

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;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,gBA0+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;AA4BtE;;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;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;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B,GAAG,KAAK,CAAC,sBAAsB,CAAC,cAAc,CAAC,CAAA;AAEhD;;GAEG;AAEH,eAAO,MAAM,QAAQ,UAAW,aAAa,gBAy9C5C,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;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;AA8HpE,QAAA,MAAM,YAAY;YArHR,OAAO;UACT,IAAI;YACF,OAAO;+BACY,sBAAsB,KAAK,WAAW;0BAC5C,eAAe,KAAK,WAAW;UAC9C,IAAI;kBA0HV,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;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"}

package/dist/index.es.js

@@ -91,7 +91,6 @@ 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.
  */
@@ -1296,22 +1295,6 @@ var useSlateStatic = () => {
   return editor;
 };
 
-/**
- * Returns a set of rules that use the `:where` selector if it is supported,
- * otherwise it falls back to the provided selector on its own.
- *
- * The `:where` selector is used to give a selector a lower specificity,
- * allowing the rule to be overridden by a user-defined stylesheet.
- *
- * Older browsers do not support the `:where` selector.
- * If it is not supported, the selector will be used without `:where`,
- * which means that the rule will have a higher specificity and a user-defined
- * stylesheet will not be able to override it easily.
- */
-function whereIfSupported(selector, styles) {
-  return "@supports (selector(:where(".concat(selector, "))) {") + ":where(".concat(selector, ") { ").concat(styles, " }") + "}" + "@supports not (selector(:where(".concat(selector, "))) {") + "".concat(selector, " { ").concat(styles, " }") + "}";
-}
-
 /**
  * Individual leaves in a text node with unique formatting.
  */
@@ -1325,6 +1308,7 @@ 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);
@@ -1351,32 +1335,23 @@ var Leaf = props => {
     } else if (placeholderEl) {
       // Create a new observer and observe the placeholder element.
       var ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
-      placeholderResizeObserver.current = new ResizeObserver$1(_ref => {
-        var [{
-          target
-        }] = _ref;
-        var styleElement = EDITOR_TO_STYLE_ELEMENT.get(editor);
-
-        if (styleElement) {
-          // Make the min-height the height of the placeholder.
-          var selector = "[data-slate-editor-id=\"".concat(editor.id, "\"]");
-          var styles = "min-height: ".concat(target.clientHeight, "px;");
-          styleElement.innerHTML = whereIfSupported(selector, styles);
-        }
+      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 (!placeholderEl) {
+    if (!placeholderEl && lastPlaceholderRef.current) {
       // 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 = '';
-      }
+      // 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();
     }
 
+    lastPlaceholderRef.current = placeholderRef.current;
     return () => {
       EDITOR_TO_PLACEHOLDER_ELEMENT.delete(editor);
     };
@@ -3156,22 +3131,22 @@ function useTrackUserInput() {
   };
 }
 
-var _excluded$1 = ["autoFocus", "decorate", "onDOMBeforeInput", "placeholder", "readOnly", "renderElement", "renderLeaf", "renderPlaceholder", "scrollSelectionIntoView", "style", "as"],
+var _excluded$1 = ["autoFocus", "decorate", "onDOMBeforeInput", "placeholder", "readOnly", "renderElement", "renderLeaf", "renderPlaceholder", "scrollSelectionIntoView", "style", "as", "disableDefaultStyles"],
     _excluded2 = ["text"];
 
 function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 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)); // The number of Editable components currently mounted.
-
-
-var mountedCount = 0;
+var Children = props => /*#__PURE__*/React.createElement(React.Fragment, null, useChildren(props));
 /**
  * Editable.
  */
 
+
 var Editable = props => {
+  var _EDITOR_TO_PLACEHOLDE, _EDITOR_TO_PLACEHOLDE2;
+
   var {
     autoFocus,
     decorate = defaultDecorate,
@@ -3182,8 +3157,9 @@ var Editable = props => {
     renderLeaf,
     renderPlaceholder = props => /*#__PURE__*/React.createElement(DefaultPlaceholder, Object.assign({}, props)),
     scrollSelectionIntoView = defaultScrollSelectionIntoView,
-    style = {},
-    as: Component = 'div'
+    style: userStyle = {},
+    as: Component = 'div',
+    disableDefaultStyles = false
   } = props,
       attributes = _objectWithoutProperties(props, _excluded$1);
 
@@ -3787,39 +3763,7 @@ 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');
-      var selector = '[data-slate-editor]';
-      var defaultStyles = // 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;";
-      defaultStylesElement.innerHTML = whereIfSupported(selector, defaultStyles);
-      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);
-    };
-  }, []);
+  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, {
@@ -3840,7 +3784,6 @@ 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,
@@ -3850,7 +3793,18 @@ var Editable = props => {
     zindex: -1,
     suppressContentEditableWarning: true,
     ref: ref,
-    style: style,
+    style: _objectSpread$1(_objectSpread$1({}, disableDefaultStyles ? {} : _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'
+    }, placeholderHeight ? {
+      minHeight: placeholderHeight
+    } : {})), userStyle),
     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