slate-react 0.88.2 → 0.89.0

package/dist/slate-react.js

@@ -1644,7 +1644,7 @@
 	    // next or previous node, depending on which side the `x` and `y`
 	    // coordinates are closest to.
 
-	    if (slate.Editor.isVoid(editor, node)) {
+	    if (slate.Element.isElement(node) && slate.Editor.isVoid(editor, node)) {
 	      var rect = target.getBoundingClientRect();
 	      var isPrev = editor.isInline(node) ? x - rect.left < rect.left + rect.width - x : y - rect.top < rect.top + rect.height - y;
 	      var edge = slate.Editor.point(editor, path, {
@@ -1886,6 +1886,46 @@
 	    if (!focus) {
 	      return null;
 	    }
+	    /**
+	     * suppose we have this document:
+	     *
+	     * { type: 'paragraph',
+	     *   children: [
+	     *     { text: 'foo ' },
+	     *     { text: 'bar' },
+	     *     { text: ' baz' }
+	     *   ]
+	     * }
+	     *
+	     * a double click on "bar" on chrome will create this range:
+	     *
+	     * anchor -> [0,1] offset 0
+	     * focus  -> [0,1] offset 3
+	     *
+	     * while on firefox will create this range:
+	     *
+	     * anchor -> [0,0] offset 4
+	     * focus  -> [0,2] offset 0
+	     *
+	     * let's try to fix it...
+	     */
+
+
+	    if (IS_FIREFOX && !isCollapsed && anchorNode !== focusNode) {
+	      var isEnd = slate.Editor.isEnd(editor, anchor, anchor.path);
+	      var isStart = slate.Editor.isStart(editor, focus, focus.path);
+
+	      if (isEnd) {
+	        var after = slate.Editor.after(editor, anchor); // Editor.after() might return undefined
+
+	        anchor = after || anchor;
+	      }
+
+	      if (isStart) {
+	        var before = slate.Editor.before(editor, focus);
+	        focus = before || focus;
+	      }
+	    }
 
 	    var range = {
 	      anchor: anchor,
@@ -1941,7 +1981,7 @@
 	  isTargetInsideNonReadonlyVoid: function isTargetInsideNonReadonlyVoid(editor, target) {
 	    if (IS_READ_ONLY.get(editor)) return false;
 	    var slateNode = ReactEditor.hasTarget(editor, target) && ReactEditor.toSlateNode(editor, target);
-	    return slate.Editor.isVoid(editor, slateNode);
+	    return slate.Element.isElement(slateNode) && slate.Editor.isVoid(editor, slateNode);
 	  },
 
 	  /**
@@ -2007,6 +2047,505 @@
 	  return true;
 	};
 
+	var resizeObservers = [];
+
+	var hasActiveObservations = function () {
+	    return resizeObservers.some(function (ro) { return ro.activeTargets.length > 0; });
+	};
+
+	var hasSkippedObservations = function () {
+	    return resizeObservers.some(function (ro) { return ro.skippedTargets.length > 0; });
+	};
+
+	var msg = 'ResizeObserver loop completed with undelivered notifications.';
+	var deliverResizeLoopError = function () {
+	    var event;
+	    if (typeof ErrorEvent === 'function') {
+	        event = new ErrorEvent('error', {
+	            message: msg
+	        });
+	    }
+	    else {
+	        event = document.createEvent('Event');
+	        event.initEvent('error', false, false);
+	        event.message = msg;
+	    }
+	    window.dispatchEvent(event);
+	};
+
+	var ResizeObserverBoxOptions;
+	(function (ResizeObserverBoxOptions) {
+	    ResizeObserverBoxOptions["BORDER_BOX"] = "border-box";
+	    ResizeObserverBoxOptions["CONTENT_BOX"] = "content-box";
+	    ResizeObserverBoxOptions["DEVICE_PIXEL_CONTENT_BOX"] = "device-pixel-content-box";
+	})(ResizeObserverBoxOptions || (ResizeObserverBoxOptions = {}));
+
+	var freeze = function (obj) { return Object.freeze(obj); };
+
+	var ResizeObserverSize = (function () {
+	    function ResizeObserverSize(inlineSize, blockSize) {
+	        this.inlineSize = inlineSize;
+	        this.blockSize = blockSize;
+	        freeze(this);
+	    }
+	    return ResizeObserverSize;
+	}());
+
+	var DOMRectReadOnly = (function () {
+	    function DOMRectReadOnly(x, y, width, height) {
+	        this.x = x;
+	        this.y = y;
+	        this.width = width;
+	        this.height = height;
+	        this.top = this.y;
+	        this.left = this.x;
+	        this.bottom = this.top + this.height;
+	        this.right = this.left + this.width;
+	        return freeze(this);
+	    }
+	    DOMRectReadOnly.prototype.toJSON = function () {
+	        var _a = this, x = _a.x, y = _a.y, top = _a.top, right = _a.right, bottom = _a.bottom, left = _a.left, width = _a.width, height = _a.height;
+	        return { x: x, y: y, top: top, right: right, bottom: bottom, left: left, width: width, height: height };
+	    };
+	    DOMRectReadOnly.fromRect = function (rectangle) {
+	        return new DOMRectReadOnly(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
+	    };
+	    return DOMRectReadOnly;
+	}());
+
+	var isSVG = function (target) { return target instanceof SVGElement && 'getBBox' in target; };
+	var isHidden = function (target) {
+	    if (isSVG(target)) {
+	        var _a = target.getBBox(), width = _a.width, height = _a.height;
+	        return !width && !height;
+	    }
+	    var _b = target, offsetWidth = _b.offsetWidth, offsetHeight = _b.offsetHeight;
+	    return !(offsetWidth || offsetHeight || target.getClientRects().length);
+	};
+	var isElement = function (obj) {
+	    var _a;
+	    if (obj instanceof Element) {
+	        return true;
+	    }
+	    var scope = (_a = obj === null || obj === void 0 ? void 0 : obj.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
+	    return !!(scope && obj instanceof scope.Element);
+	};
+	var isReplacedElement = function (target) {
+	    switch (target.tagName) {
+	        case 'INPUT':
+	            if (target.type !== 'image') {
+	                break;
+	            }
+	        case 'VIDEO':
+	        case 'AUDIO':
+	        case 'EMBED':
+	        case 'OBJECT':
+	        case 'CANVAS':
+	        case 'IFRAME':
+	        case 'IMG':
+	            return true;
+	    }
+	    return false;
+	};
+
+	var global$1 = typeof window !== 'undefined' ? window : {};
+
+	var cache = new WeakMap();
+	var scrollRegexp = /auto|scroll/;
+	var verticalRegexp = /^tb|vertical/;
+	var IE = (/msie|trident/i).test(global$1.navigator && global$1.navigator.userAgent);
+	var parseDimension = function (pixel) { return parseFloat(pixel || '0'); };
+	var size = function (inlineSize, blockSize, switchSizes) {
+	    if (inlineSize === void 0) { inlineSize = 0; }
+	    if (blockSize === void 0) { blockSize = 0; }
+	    if (switchSizes === void 0) { switchSizes = false; }
+	    return new ResizeObserverSize((switchSizes ? blockSize : inlineSize) || 0, (switchSizes ? inlineSize : blockSize) || 0);
+	};
+	var zeroBoxes = freeze({
+	    devicePixelContentBoxSize: size(),
+	    borderBoxSize: size(),
+	    contentBoxSize: size(),
+	    contentRect: new DOMRectReadOnly(0, 0, 0, 0)
+	});
+	var calculateBoxSizes = function (target, forceRecalculation) {
+	    if (forceRecalculation === void 0) { forceRecalculation = false; }
+	    if (cache.has(target) && !forceRecalculation) {
+	        return cache.get(target);
+	    }
+	    if (isHidden(target)) {
+	        cache.set(target, zeroBoxes);
+	        return zeroBoxes;
+	    }
+	    var cs = getComputedStyle(target);
+	    var svg = isSVG(target) && target.ownerSVGElement && target.getBBox();
+	    var removePadding = !IE && cs.boxSizing === 'border-box';
+	    var switchSizes = verticalRegexp.test(cs.writingMode || '');
+	    var canScrollVertically = !svg && scrollRegexp.test(cs.overflowY || '');
+	    var canScrollHorizontally = !svg && scrollRegexp.test(cs.overflowX || '');
+	    var paddingTop = svg ? 0 : parseDimension(cs.paddingTop);
+	    var paddingRight = svg ? 0 : parseDimension(cs.paddingRight);
+	    var paddingBottom = svg ? 0 : parseDimension(cs.paddingBottom);
+	    var paddingLeft = svg ? 0 : parseDimension(cs.paddingLeft);
+	    var borderTop = svg ? 0 : parseDimension(cs.borderTopWidth);
+	    var borderRight = svg ? 0 : parseDimension(cs.borderRightWidth);
+	    var borderBottom = svg ? 0 : parseDimension(cs.borderBottomWidth);
+	    var borderLeft = svg ? 0 : parseDimension(cs.borderLeftWidth);
+	    var horizontalPadding = paddingLeft + paddingRight;
+	    var verticalPadding = paddingTop + paddingBottom;
+	    var horizontalBorderArea = borderLeft + borderRight;
+	    var verticalBorderArea = borderTop + borderBottom;
+	    var horizontalScrollbarThickness = !canScrollHorizontally ? 0 : target.offsetHeight - verticalBorderArea - target.clientHeight;
+	    var verticalScrollbarThickness = !canScrollVertically ? 0 : target.offsetWidth - horizontalBorderArea - target.clientWidth;
+	    var widthReduction = removePadding ? horizontalPadding + horizontalBorderArea : 0;
+	    var heightReduction = removePadding ? verticalPadding + verticalBorderArea : 0;
+	    var contentWidth = svg ? svg.width : parseDimension(cs.width) - widthReduction - verticalScrollbarThickness;
+	    var contentHeight = svg ? svg.height : parseDimension(cs.height) - heightReduction - horizontalScrollbarThickness;
+	    var borderBoxWidth = contentWidth + horizontalPadding + verticalScrollbarThickness + horizontalBorderArea;
+	    var borderBoxHeight = contentHeight + verticalPadding + horizontalScrollbarThickness + verticalBorderArea;
+	    var boxes = freeze({
+	        devicePixelContentBoxSize: size(Math.round(contentWidth * devicePixelRatio), Math.round(contentHeight * devicePixelRatio), switchSizes),
+	        borderBoxSize: size(borderBoxWidth, borderBoxHeight, switchSizes),
+	        contentBoxSize: size(contentWidth, contentHeight, switchSizes),
+	        contentRect: new DOMRectReadOnly(paddingLeft, paddingTop, contentWidth, contentHeight)
+	    });
+	    cache.set(target, boxes);
+	    return boxes;
+	};
+	var calculateBoxSize = function (target, observedBox, forceRecalculation) {
+	    var _a = calculateBoxSizes(target, forceRecalculation), borderBoxSize = _a.borderBoxSize, contentBoxSize = _a.contentBoxSize, devicePixelContentBoxSize = _a.devicePixelContentBoxSize;
+	    switch (observedBox) {
+	        case ResizeObserverBoxOptions.DEVICE_PIXEL_CONTENT_BOX:
+	            return devicePixelContentBoxSize;
+	        case ResizeObserverBoxOptions.BORDER_BOX:
+	            return borderBoxSize;
+	        default:
+	            return contentBoxSize;
+	    }
+	};
+
+	var ResizeObserverEntry = (function () {
+	    function ResizeObserverEntry(target) {
+	        var boxes = calculateBoxSizes(target);
+	        this.target = target;
+	        this.contentRect = boxes.contentRect;
+	        this.borderBoxSize = freeze([boxes.borderBoxSize]);
+	        this.contentBoxSize = freeze([boxes.contentBoxSize]);
+	        this.devicePixelContentBoxSize = freeze([boxes.devicePixelContentBoxSize]);
+	    }
+	    return ResizeObserverEntry;
+	}());
+
+	var calculateDepthForNode = function (node) {
+	    if (isHidden(node)) {
+	        return Infinity;
+	    }
+	    var depth = 0;
+	    var parent = node.parentNode;
+	    while (parent) {
+	        depth += 1;
+	        parent = parent.parentNode;
+	    }
+	    return depth;
+	};
+
+	var broadcastActiveObservations = function () {
+	    var shallowestDepth = Infinity;
+	    var callbacks = [];
+	    resizeObservers.forEach(function processObserver(ro) {
+	        if (ro.activeTargets.length === 0) {
+	            return;
+	        }
+	        var entries = [];
+	        ro.activeTargets.forEach(function processTarget(ot) {
+	            var entry = new ResizeObserverEntry(ot.target);
+	            var targetDepth = calculateDepthForNode(ot.target);
+	            entries.push(entry);
+	            ot.lastReportedSize = calculateBoxSize(ot.target, ot.observedBox);
+	            if (targetDepth < shallowestDepth) {
+	                shallowestDepth = targetDepth;
+	            }
+	        });
+	        callbacks.push(function resizeObserverCallback() {
+	            ro.callback.call(ro.observer, entries, ro.observer);
+	        });
+	        ro.activeTargets.splice(0, ro.activeTargets.length);
+	    });
+	    for (var _i = 0, callbacks_1 = callbacks; _i < callbacks_1.length; _i++) {
+	        var callback = callbacks_1[_i];
+	        callback();
+	    }
+	    return shallowestDepth;
+	};
+
+	var gatherActiveObservationsAtDepth = function (depth) {
+	    resizeObservers.forEach(function processObserver(ro) {
+	        ro.activeTargets.splice(0, ro.activeTargets.length);
+	        ro.skippedTargets.splice(0, ro.skippedTargets.length);
+	        ro.observationTargets.forEach(function processTarget(ot) {
+	            if (ot.isActive()) {
+	                if (calculateDepthForNode(ot.target) > depth) {
+	                    ro.activeTargets.push(ot);
+	                }
+	                else {
+	                    ro.skippedTargets.push(ot);
+	                }
+	            }
+	        });
+	    });
+	};
+
+	var process = function () {
+	    var depth = 0;
+	    gatherActiveObservationsAtDepth(depth);
+	    while (hasActiveObservations()) {
+	        depth = broadcastActiveObservations();
+	        gatherActiveObservationsAtDepth(depth);
+	    }
+	    if (hasSkippedObservations()) {
+	        deliverResizeLoopError();
+	    }
+	    return depth > 0;
+	};
+
+	var trigger;
+	var callbacks = [];
+	var notify = function () { return callbacks.splice(0).forEach(function (cb) { return cb(); }); };
+	var queueMicroTask = function (callback) {
+	    if (!trigger) {
+	        var toggle_1 = 0;
+	        var el_1 = document.createTextNode('');
+	        var config = { characterData: true };
+	        new MutationObserver(function () { return notify(); }).observe(el_1, config);
+	        trigger = function () { el_1.textContent = "".concat(toggle_1 ? toggle_1-- : toggle_1++); };
+	    }
+	    callbacks.push(callback);
+	    trigger();
+	};
+
+	var queueResizeObserver = function (cb) {
+	    queueMicroTask(function ResizeObserver() {
+	        requestAnimationFrame(cb);
+	    });
+	};
+
+	var watching = 0;
+	var isWatching = function () { return !!watching; };
+	var CATCH_PERIOD = 250;
+	var observerConfig = { attributes: true, characterData: true, childList: true, subtree: true };
+	var events = [
+	    'resize',
+	    'load',
+	    'transitionend',
+	    'animationend',
+	    'animationstart',
+	    'animationiteration',
+	    'keyup',
+	    'keydown',
+	    'mouseup',
+	    'mousedown',
+	    'mouseover',
+	    'mouseout',
+	    'blur',
+	    'focus'
+	];
+	var time = function (timeout) {
+	    if (timeout === void 0) { timeout = 0; }
+	    return Date.now() + timeout;
+	};
+	var scheduled = false;
+	var Scheduler = (function () {
+	    function Scheduler() {
+	        var _this = this;
+	        this.stopped = true;
+	        this.listener = function () { return _this.schedule(); };
+	    }
+	    Scheduler.prototype.run = function (timeout) {
+	        var _this = this;
+	        if (timeout === void 0) { timeout = CATCH_PERIOD; }
+	        if (scheduled) {
+	            return;
+	        }
+	        scheduled = true;
+	        var until = time(timeout);
+	        queueResizeObserver(function () {
+	            var elementsHaveResized = false;
+	            try {
+	                elementsHaveResized = process();
+	            }
+	            finally {
+	                scheduled = false;
+	                timeout = until - time();
+	                if (!isWatching()) {
+	                    return;
+	                }
+	                if (elementsHaveResized) {
+	                    _this.run(1000);
+	                }
+	                else if (timeout > 0) {
+	                    _this.run(timeout);
+	                }
+	                else {
+	                    _this.start();
+	                }
+	            }
+	        });
+	    };
+	    Scheduler.prototype.schedule = function () {
+	        this.stop();
+	        this.run();
+	    };
+	    Scheduler.prototype.observe = function () {
+	        var _this = this;
+	        var cb = function () { return _this.observer && _this.observer.observe(document.body, observerConfig); };
+	        document.body ? cb() : global$1.addEventListener('DOMContentLoaded', cb);
+	    };
+	    Scheduler.prototype.start = function () {
+	        var _this = this;
+	        if (this.stopped) {
+	            this.stopped = false;
+	            this.observer = new MutationObserver(this.listener);
+	            this.observe();
+	            events.forEach(function (name) { return global$1.addEventListener(name, _this.listener, true); });
+	        }
+	    };
+	    Scheduler.prototype.stop = function () {
+	        var _this = this;
+	        if (!this.stopped) {
+	            this.observer && this.observer.disconnect();
+	            events.forEach(function (name) { return global$1.removeEventListener(name, _this.listener, true); });
+	            this.stopped = true;
+	        }
+	    };
+	    return Scheduler;
+	}());
+	var scheduler$1 = new Scheduler();
+	var updateCount = function (n) {
+	    !watching && n > 0 && scheduler$1.start();
+	    watching += n;
+	    !watching && scheduler$1.stop();
+	};
+
+	var skipNotifyOnElement = function (target) {
+	    return !isSVG(target)
+	        && !isReplacedElement(target)
+	        && getComputedStyle(target).display === 'inline';
+	};
+	var ResizeObservation = (function () {
+	    function ResizeObservation(target, observedBox) {
+	        this.target = target;
+	        this.observedBox = observedBox || ResizeObserverBoxOptions.CONTENT_BOX;
+	        this.lastReportedSize = {
+	            inlineSize: 0,
+	            blockSize: 0
+	        };
+	    }
+	    ResizeObservation.prototype.isActive = function () {
+	        var size = calculateBoxSize(this.target, this.observedBox, true);
+	        if (skipNotifyOnElement(this.target)) {
+	            this.lastReportedSize = size;
+	        }
+	        if (this.lastReportedSize.inlineSize !== size.inlineSize
+	            || this.lastReportedSize.blockSize !== size.blockSize) {
+	            return true;
+	        }
+	        return false;
+	    };
+	    return ResizeObservation;
+	}());
+
+	var ResizeObserverDetail = (function () {
+	    function ResizeObserverDetail(resizeObserver, callback) {
+	        this.activeTargets = [];
+	        this.skippedTargets = [];
+	        this.observationTargets = [];
+	        this.observer = resizeObserver;
+	        this.callback = callback;
+	    }
+	    return ResizeObserverDetail;
+	}());
+
+	var observerMap = new WeakMap();
+	var getObservationIndex = function (observationTargets, target) {
+	    for (var i = 0; i < observationTargets.length; i += 1) {
+	        if (observationTargets[i].target === target) {
+	            return i;
+	        }
+	    }
+	    return -1;
+	};
+	var ResizeObserverController = (function () {
+	    function ResizeObserverController() {
+	    }
+	    ResizeObserverController.connect = function (resizeObserver, callback) {
+	        var detail = new ResizeObserverDetail(resizeObserver, callback);
+	        observerMap.set(resizeObserver, detail);
+	    };
+	    ResizeObserverController.observe = function (resizeObserver, target, options) {
+	        var detail = observerMap.get(resizeObserver);
+	        var firstObservation = detail.observationTargets.length === 0;
+	        if (getObservationIndex(detail.observationTargets, target) < 0) {
+	            firstObservation && resizeObservers.push(detail);
+	            detail.observationTargets.push(new ResizeObservation(target, options && options.box));
+	            updateCount(1);
+	            scheduler$1.schedule();
+	        }
+	    };
+	    ResizeObserverController.unobserve = function (resizeObserver, target) {
+	        var detail = observerMap.get(resizeObserver);
+	        var index = getObservationIndex(detail.observationTargets, target);
+	        var lastObservation = detail.observationTargets.length === 1;
+	        if (index >= 0) {
+	            lastObservation && resizeObservers.splice(resizeObservers.indexOf(detail), 1);
+	            detail.observationTargets.splice(index, 1);
+	            updateCount(-1);
+	        }
+	    };
+	    ResizeObserverController.disconnect = function (resizeObserver) {
+	        var _this = this;
+	        var detail = observerMap.get(resizeObserver);
+	        detail.observationTargets.slice().forEach(function (ot) { return _this.unobserve(resizeObserver, ot.target); });
+	        detail.activeTargets.splice(0, detail.activeTargets.length);
+	    };
+	    return ResizeObserverController;
+	}());
+
+	var ResizeObserver = (function () {
+	    function ResizeObserver(callback) {
+	        if (arguments.length === 0) {
+	            throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");
+	        }
+	        if (typeof callback !== 'function') {
+	            throw new TypeError("Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function.");
+	        }
+	        ResizeObserverController.connect(this, callback);
+	    }
+	    ResizeObserver.prototype.observe = function (target, options) {
+	        if (arguments.length === 0) {
+	            throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': 1 argument required, but only 0 present.");
+	        }
+	        if (!isElement(target)) {
+	            throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element");
+	        }
+	        ResizeObserverController.observe(this, target, options);
+	    };
+	    ResizeObserver.prototype.unobserve = function (target) {
+	        if (arguments.length === 0) {
+	            throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': 1 argument required, but only 0 present.");
+	        }
+	        if (!isElement(target)) {
+	            throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element");
+	        }
+	        ResizeObserverController.unobserve(this, target);
+	    };
+	    ResizeObserver.prototype.disconnect = function () {
+	        ResizeObserverController.disconnect(this);
+	    };
+	    ResizeObserver.toString = function () {
+	        return 'function ResizeObserver () { [polyfill code] }';
+	    };
+	    return ResizeObserver;
+	}());
+
 	/**
 	 * Leaf content strings.
 	 */
@@ -2151,6 +2690,22 @@
 	  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.
 	 */
@@ -2190,7 +2745,8 @@
 	      if (placeholderEl) placeholderResizeObserver.current.observe(placeholderEl);
 	    } else if (placeholderEl) {
 	      // Create a new observer and observe the placeholder element.
-	      placeholderResizeObserver.current = new ResizeObserver(function (_ref) {
+	      var ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
+	      placeholderResizeObserver.current = new ResizeObserver$1(function (_ref) {
 	        var _ref2 = _slicedToArray(_ref, 1),
 	            target = _ref2[0].target;
 
@@ -2198,8 +2754,9 @@
 
 	        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, "; }");
+	          var selector = "[data-slate-editor-id=\"".concat(editor.id, "\"]");
+	          var styles = "min-height: ".concat(target.clientHeight, "px;");
+	          styleElement.innerHTML = whereIfSupported(selector, styles);
 	        }
 	      });
 	      placeholderResizeObserver.current.observe(placeholderEl);
@@ -2328,7 +2885,7 @@
 	 * Element.
 	 */
 
-	var Element = function Element(props) {
+	var Element$1 = function Element(props) {
 	  var decorations = props.decorations,
 	      element = props.element,
 	      _props$renderElement = props.renderElement,
@@ -2426,7 +2983,7 @@
 	  });
 	};
 
-	var MemoizedElement = /*#__PURE__*/React__default['default'].memo(Element, function (prev, next) {
+	var MemoizedElement = /*#__PURE__*/React__default['default'].memo(Element$1, function (prev, next) {
 	  return prev.element === next.element && prev.renderElement === next.renderElement && prev.renderLeaf === next.renderLeaf && isDecoratorRangeListEqual(prev.decorations, next.decorations) && (prev.selection === next.selection || !!prev.selection && !!next.selection && slate.Range.equals(prev.selection, next.selection));
 	});
 	/**
@@ -3375,7 +3932,7 @@
 
 	  var parentBlock = slate.Editor.above(editor, {
 	    match: function match(n) {
-	      return slate.Editor.isBlock(editor, n);
+	      return slate.Element.isElement(n) && slate.Editor.isBlock(editor, n);
 	    },
 	    at: path
 	  });
@@ -4828,7 +5385,7 @@
 	          var block = slate.Editor.above(editor, {
 	            at: anchor.path,
 	            match: function match(n) {
-	              return slate.Editor.isBlock(editor, n);
+	              return slate.Element.isElement(n) && slate.Editor.isBlock(editor, n);
 	            }
 	          });
 
@@ -5119,12 +5676,13 @@
 	      // 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.
+	      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;" + "}";
+	      "word-wrap: break-word;";
+	      defaultStylesElement.innerHTML = whereIfSupported(selector, defaultStyles);
 	      document.head.appendChild(defaultStylesElement);
 	    }
 
@@ -5280,12 +5838,12 @@
 	        if (event.detail === TRIPLE_CLICK && path.length >= 1) {
 	          var blockPath = path;
 
-	          if (!slate.Editor.isBlock(editor, node)) {
+	          if (!(slate.Element.isElement(node) && slate.Editor.isBlock(editor, node))) {
 	            var _block$;
 
 	            var block = slate.Editor.above(editor, {
 	              match: function match(n) {
-	                return slate.Editor.isBlock(editor, n);
+	                return slate.Element.isElement(n) && slate.Editor.isBlock(editor, n);
 	              },
 	              at: path
 	            });
@@ -5381,7 +5939,7 @@
 
 	          var inline = slate.Editor.above(editor, {
 	            match: function match(n) {
-	              return slate.Editor.isInline(editor, n);
+	              return slate.Element.isElement(n) && slate.Editor.isInline(editor, n);
 	            },
 	            mode: 'highest'
 	          });
@@ -5433,7 +5991,7 @@
 	        // default, and calling `preventDefault` hides the cursor.
 	        var node = ReactEditor.toSlateNode(editor, event.target);
 
-	        if (slate.Editor.isVoid(editor, node)) {
+	        if (slate.Element.isElement(node) && slate.Editor.isVoid(editor, node)) {
 	          event.preventDefault();
 	        }
 	      }
@@ -5442,7 +6000,7 @@
 	      if (!readOnly && ReactEditor.hasTarget(editor, event.target) && !isEventHandled(event, attributes.onDragStart)) {
 	        var node = ReactEditor.toSlateNode(editor, event.target);
 	        var path = ReactEditor.findPath(editor, node);
-	        var voidMatch = slate.Editor.isVoid(editor, node) || slate.Editor["void"](editor, {
+	        var voidMatch = slate.Element.isElement(node) && slate.Editor.isVoid(editor, node) || slate.Editor["void"](editor, {
 	          at: path,
 	          voids: true
 	        }); // If starting a drag on a void node, make sure it is selected
@@ -6096,8 +6654,8 @@
 	    });
 	    handleSelectorChange(editor);
 	  }, [onChange]);
-	  EDITOR_TO_ON_CHANGE.set(editor, onContextChange);
 	  React.useEffect(function () {
+	    EDITOR_TO_ON_CHANGE.set(editor, onContextChange);
 	    return function () {
 	      EDITOR_TO_ON_CHANGE.set(editor, function () {});
 	      unmountRef.current = true;
@@ -33722,7 +34280,7 @@
 	    if (e.selection && slate.Range.isCollapsed(e.selection)) {
 	      var parentBlockEntry = slate.Editor.above(e, {
 	        match: function match(n) {
-	          return slate.Editor.isBlock(e, n);
+	          return slate.Element.isElement(n) && slate.Editor.isBlock(e, n);
 	        },
 	        at: e.selection
 	      });