slate-react 0.73.0 → 0.74.0

package/dist/slate-react.js

@@ -5060,6 +5060,137 @@
 	  return React.useContext(FocusedContext);
 	};
 
+	function isError(error) {
+	  return error instanceof Error;
+	}
+	/**
+	 * A React context for sharing the editor selector context in a way to control rerenders
+	 */
+
+
+	var SlateSelectorContext = /*#__PURE__*/React.createContext({});
+
+	var refEquality = function refEquality(a, b) {
+	  return a === b;
+	};
+	/**
+	 * use redux style selectors to prevent rerendering on every keystroke.
+	 * Bear in mind rerendering can only prevented if the returned value is a value type or for reference types (e.g. objects and arrays) add a custom equality function.
+	 *
+	 * Example:
+	 * ```
+	 *  const isSelectionActive = useSlateSelector(editor => Boolean(editor.selection));
+	 * ```
+	 */
+
+
+	function useSlateSelector(selector) {
+	  var equalityFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : refEquality;
+
+	  var _useReducer = React.useReducer(function (s) {
+	    return s + 1;
+	  }, 0),
+	      _useReducer2 = _slicedToArray(_useReducer, 2),
+	      forceRender = _useReducer2[1];
+
+	  var context = React.useContext(SlateSelectorContext);
+
+	  if (!context) {
+	    throw new Error("The `useSlateSelector` hook must be used inside the <Slate> component's context.");
+	  }
+
+	  var getSlate = context.getSlate,
+	      addEventListener = context.addEventListener;
+	  var latestSubscriptionCallbackError = React.useRef();
+	  var latestSelector = React.useRef(function () {
+	    return null;
+	  });
+	  var latestSelectedState = React.useRef(null);
+	  var selectedState;
+
+	  try {
+	    if (selector !== latestSelector.current || latestSubscriptionCallbackError.current) {
+	      selectedState = selector(getSlate());
+	    } else {
+	      selectedState = latestSelectedState.current;
+	    }
+	  } catch (err) {
+	    if (latestSubscriptionCallbackError.current && isError(err)) {
+	      err.message += "\nThe error may be correlated with this previous error:\n".concat(latestSubscriptionCallbackError.current.stack, "\n\n");
+	    }
+
+	    throw err;
+	  }
+
+	  useIsomorphicLayoutEffect(function () {
+	    latestSelector.current = selector;
+	    latestSelectedState.current = selectedState;
+	    latestSubscriptionCallbackError.current = undefined;
+	  });
+	  useIsomorphicLayoutEffect(function () {
+	    function checkForUpdates() {
+	      try {
+	        var newSelectedState = latestSelector.current(getSlate());
+
+	        if (equalityFn(newSelectedState, latestSelectedState.current)) {
+	          return;
+	        }
+
+	        latestSelectedState.current = newSelectedState;
+	      } catch (err) {
+	        // we ignore all errors here, since when the component
+	        // is re-rendered, the selectors are called again, and
+	        // will throw again, if neither props nor store state
+	        // changed
+	        latestSubscriptionCallbackError.current = err;
+	      }
+
+	      forceRender();
+	    }
+
+	    var unsubscribe = addEventListener(checkForUpdates);
+	    checkForUpdates();
+	    return function () {
+	      return unsubscribe();
+	    };
+	  }, // don't rerender on equalityFn change since we want to be able to define it inline
+	  [addEventListener, getSlate]);
+	  return selectedState;
+	}
+	/**
+	 * Create selector context with editor updating on every editor change
+	 */
+
+	function getSelectorContext(editor) {
+	  var eventListeners = React.useRef([]).current;
+	  var slateRef = React.useRef({
+	    editor: editor
+	  }).current;
+	  var onChange = React.useCallback(function (editor) {
+	    slateRef.editor = editor;
+	    eventListeners.forEach(function (listener) {
+	      return listener(editor);
+	    });
+	  }, []);
+	  var selectorContext = React.useMemo(function () {
+	    return {
+	      getSlate: function getSlate() {
+	        return slateRef.editor;
+	      },
+	      addEventListener: function addEventListener(callback) {
+	        eventListeners.push(callback);
+	        return function () {
+	          eventListeners.splice(eventListeners.indexOf(callback), 1);
+	        };
+	      }
+	    };
+	  }, [eventListeners, slateRef]);
+	  return {
+	    selectorContext: selectorContext,
+	    onChange: onChange
+	  };
+	}
+
 	var _excluded = ["editor", "children", "onChange", "value"];
 	/**
 	 * A wrapper around the provider to handle `onChange` events, because the editor
@@ -5092,9 +5223,14 @@
 	      context = _React$useState2[0],
 	      setContext = _React$useState2[1];
 
+	  var _getSelectorContext = getSelectorContext(editor),
+	      selectorContext = _getSelectorContext.selectorContext,
+	      handleSelectorChange = _getSelectorContext.onChange;
+
 	  var onContextChange = React.useCallback(function () {
 	    onChange(editor.children);
 	    setContext([editor]);
+	    handleSelectorChange(editor);
 	  }, [onChange]);
 	  EDITOR_TO_ON_CHANGE.set(editor, onContextChange);
 	  React.useEffect(function () {
@@ -5130,13 +5266,15 @@
 	      document.removeEventListener('blur', fn, true);
 	    };
 	  }, []);
-	  return /*#__PURE__*/React__default['default'].createElement(SlateContext.Provider, {
+	  return /*#__PURE__*/React__default['default'].createElement(SlateSelectorContext.Provider, {
+	    value: selectorContext
+	  }, /*#__PURE__*/React__default['default'].createElement(SlateContext.Provider, {
 	    value: context
 	  }, /*#__PURE__*/React__default['default'].createElement(EditorContext.Provider, {
 	    value: editor
 	  }, /*#__PURE__*/React__default['default'].createElement(FocusedContext.Provider, {
 	    value: isFocused
-	  }, children)));
+	  }, children))));
 	};
 
 	/**
@@ -32968,6 +33106,7 @@
 	exports.useReadOnly = useReadOnly;
 	exports.useSelected = useSelected;
 	exports.useSlate = useSlate;
+	exports.useSlateSelector = useSlateSelector;
 	exports.useSlateStatic = useSlateStatic;
 	exports.withReact = withReact;