@qoretechnologies/reqore 0.76.0-pr.673.g960750c → 0.76.0

package/dist/components/RichTextEditor/index.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -29,29 +30,120 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import isPropValid from '@emotion/is-prop-valid';
-import { map, size } from 'lodash';
-import { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useState } from 'react';
-import { useUpdateEffect } from 'react-use';
-import { createEditor, Editor, Transforms } from 'slate';
-import { withHistory } from 'slate-history';
-import { Editable, ReactEditor, Slate, useSelected, withReact } from 'slate-react';
-import { ReqoreButton, ReqoreControlGroup, ReqorePanel, ReqoreTextarea } from '../../index.js';
-import { getOneLessSize } from '../../helpers/utils.js';
-import { ReqoreP } from '../Paragraph/index.js';
-import { ReqoreSpan } from '../Span/index.js';
-import ReqoreTag from '../Tag/index.js';
-export var TemplateElement = memo(function (props) {
-    var _a, _b;
-    var selected = useSelected();
-    var handleClick = useCallback(function (e) {
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReqoreRichTextEditor = exports.DefaultElement = exports.withTemplates = exports.TemplateElement = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
+var lodash_1 = require("lodash");
+var react_1 = require("react");
+var react_use_1 = require("react-use");
+var slate_1 = require("slate");
+var slate_history_1 = require("slate-history");
+var slate_react_1 = require("slate-react");
+var __1 = require("../..");
+var utils_1 = require("../../helpers/utils");
+var Paragraph_1 = require("../Paragraph");
+var Span_1 = require("../Span");
+var Tag_1 = __importDefault(require("../Tag"));
+/* Stable identities for the optional props' defaults.
+ *
+ * Written as literals in the destructuring (`tagsProps = {}`,
+ * `getTagProps = () => ({})`) they were rebuilt on EVERY render, which put a
+ * new identity into `renderElement`'s dependency list every time — and
+ * slate-react's own `ElementComponent` memo compares `renderElement` by
+ * identity. So an unstable default made every element in the document
+ * re-render on every keystroke, including chips nothing had touched. Hoisting
+ * them costs nothing and is the whole fix for the common case, where the
+ * consumer passes neither prop. */
+var NO_TAG_PROPS = function () { return ({}); };
+var EMPTY_TAG_PROPS = {};
+var EMPTY_TAGS_LIST_PROPS = {};
+exports.TemplateElement = (0, react_1.memo)(function (props) {
+    var _a, _b, _c;
+    var selected = (0, slate_react_1.useSelected)();
+    var editor = (0, slate_react_1.useSlateStatic)();
+    /* Slate's own answer, which is the editor's `readOnly` — it reaches `Editable`
+       as a DOM-valid prop and Slate reads it back. It is NOT the whole answer: the
+       editor's `disabled` never reaches Slate, so `composeTagProps` marks the chip
+       read-only for that case and this takes whichever of the two says so. */
+    var slateReadOnly = (0, slate_react_1.useReadOnly)();
+    var readOnly = slateReadOnly || !!((_a = props.tagProps) === null || _a === void 0 ? void 0 : _a.readOnly);
+    /* A chip is an inline VOID: it holds no text of its own, so a click on it has
+       no text position to land in and the browser places the cursor nowhere. This
+       handler used to `preventDefault()` + `stopPropagation()` and stop there,
+       which made the chip a dead spot.
+  
+       That is not merely a missing convenience. A field whose entire value is one
+       reference renders as one chip and nothing else, so the chip IS the control:
+       with no way to get a cursor into the editor, nothing could be typed into it
+       at all. Reported against a Qorus test assertion's `Value`, where it made a
+       path deeper than any offered candidate — the case the rich-text control
+       exists for — impossible to write by hand.
+  
+       The cursor goes AFTER the chip, which is where a walk is continued
+       (`$.order.id` -> `$.order.id.value`). Both calls above are kept and are
+       load-bearing: `preventDefault` stops the browser racing us to a position of
+       its own, and `stopPropagation` keeps the click from reaching a host row that
+       treats a click as "collapse me". The selection is then set explicitly rather
+       than left to the browser, so where the cursor lands does not depend on which
+       pixel of the chip was hit.
+  
+       Removing a chip is unaffected: that is the tag's own `×`
+       (`onRemoveClick`), not a click on its body. */
+    var handleClick = (0, react_1.useCallback)(function (e) {
+        var _a, _b, _c;
         e.preventDefault();
         e.stopPropagation();
-    }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(ReqoreTag, __assign({}, props.attributes, { compact: true, flat: false, asBadge: true, fixed: 'key', onClick: handleClick, tooltip: (_a = props.element.value) === null || _a === void 0 ? void 0 : _a.toString(), label: props.element.label }, props.tagProps, { contentEditable: false, intent: selected ? 'info' : (_b = props.tagProps) === null || _b === void 0 ? void 0 : _b.intent })), props.children] }));
+        // The consumer's own handler still runs: the editor composes `onTagClick`
+        // and any `getTagProps().onClick` into the `tagProps.onClick` below, and
+        // this element used to be overridden by it rather than run alongside it.
+        (_b = (_a = props.tagProps) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+        // A read-only surface has no cursor to give.
+        if (readOnly) {
+            return;
+        }
+        try {
+            var path = slate_react_1.ReactEditor.findPath(editor, props.element);
+            // From the void's END, and skipping voids. Asking for the point after
+            // the void's PATH can resolve to a point INSIDE its own empty text
+            // child, where typing is silently ignored — the cursor reads as placed
+            // (the DOM selection is real and inside the editor) and the editor
+            // still accepts nothing, which is a worse failure than an obvious one.
+            // The fallback covers a void that ends the document with no text node
+            // after it; a well-formed document always has one.
+            var point = (_c = slate_1.Editor.after(editor, slate_1.Editor.end(editor, path), { voids: false })) !== null && _c !== void 0 ? _c : slate_1.Editor.end(editor, []);
+            // Focus BEFORE selecting. `ReactEditor.focus` restores the editor's
+            // previous selection as it takes focus, so focusing afterwards throws
+            // away the point just set — which cost the FIRST character typed after
+            // a chip click and nothing else, the kind of loss that reads as a
+            // flaky keyboard rather than a bug.
+            slate_react_1.ReactEditor.focus(editor);
+            slate_1.Transforms.select(editor, point);
+        }
+        catch (_d) {
+            // The element can be gone between render and click (a re-render that
+            // replaced the value). Losing the cursor is the right outcome then, and
+            // it must not take the click handler down with it.
+        }
+    }, [editor, props.element, props.tagProps, readOnly]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Tag_1.default, __assign({}, props.attributes, { compact: true, flat: false, asBadge: true, fixed: 'key', tooltip: (_b = props.element.value) === null || _b === void 0 ? void 0 : _b.toString(), label: props.element.label }, props.tagProps, { 
+                // AFTER the spread on purpose: `tagProps` carries an `onClick` of its
+                // own, so declaring this before it meant this handler never ran at all.
+                onClick: handleClick, 
+                /* And `readOnly` with it, because winning the spread cost the chip the
+                   one signal that said it could not be pressed. `composeTagProps`
+                   withholds its `onClick` on a read-only surface; overriding that put a
+                   handler back unconditionally, and a tag with a handler paints itself
+                   pressable — pointer cursor, hover lift, a tab stop — for a click this
+                   element then declines. The handler stays (it still runs the
+                   consumer's own `onClick`), and this is what says the cursor is not on
+                   offer. */
+                readOnly: readOnly, contentEditable: false, intent: selected ? 'info' : (_c = props.tagProps) === null || _c === void 0 ? void 0 : _c.intent })), props.children] }));
 });
-export var withTemplates = function (editor) {
+var withTemplates = function (editor) {
     var isInline = editor.isInline, isVoid = editor.isVoid, markableVoid = editor.markableVoid;
     editor.isInline = function (element) {
         return element.type === 'tag' ? true : isInline(element);
@@ -64,30 +156,32 @@ export var withTemplates = function (editor) {
     };
     return editor;
 };
+exports.withTemplates = withTemplates;
 var Leaf = function (_a) {
     var attributes = _a.attributes, children = _a.children, leaf = _a.leaf;
     if (leaf.bold) {
-        children = _jsx("strong", { children: children });
+        children = (0, jsx_runtime_1.jsx)("strong", { children: children });
     }
     if (leaf.code) {
-        children = _jsx("code", { children: children });
+        children = (0, jsx_runtime_1.jsx)("code", { children: children });
     }
     if (leaf.italic) {
-        children = _jsx("em", { children: children });
+        children = (0, jsx_runtime_1.jsx)("em", { children: children });
     }
     if (leaf.underline) {
-        children = _jsx("u", { children: children });
+        children = (0, jsx_runtime_1.jsx)("u", { children: children });
     }
-    return (_jsx(ReqoreSpan, __assign({ inline: true }, attributes, { effect: {
+    return ((0, jsx_runtime_1.jsx)(Span_1.ReqoreSpan, __assign({ inline: true }, attributes, { effect: {
             weight: leaf.bold ? 'bold' : 'normal',
             italic: leaf.italic,
             underline: leaf.underline,
         }, children: children })));
 };
-export var DefaultElement = function (props) {
+var DefaultElement = function (props) {
     var _a;
-    return (_jsxs(ReqoreP, __assign({}, props.attributes, { style: { position: 'relative' }, children: [props.placeholder && (_jsx(ReqoreSpan, __assign({ inline: true, effect: { opacity: 0.3 } }, props.placeholderProps, { contentEditable: false, style: __assign({ position: 'absolute', top: 0, left: 0, right: 0, pointerEvents: 'none', userSelect: 'none' }, (_a = props.placeholderProps) === null || _a === void 0 ? void 0 : _a.style), children: props.placeholder }))), props.children] })));
+    return ((0, jsx_runtime_1.jsxs)(Paragraph_1.ReqoreP, __assign({}, props.attributes, { style: { position: 'relative' }, children: [props.placeholder && ((0, jsx_runtime_1.jsx)(Span_1.ReqoreSpan, __assign({ inline: true, effect: { opacity: 0.3 } }, props.placeholderProps, { contentEditable: false, style: __assign({ position: 'absolute', top: 0, left: 0, right: 0, pointerEvents: 'none', userSelect: 'none' }, (_a = props.placeholderProps) === null || _a === void 0 ? void 0 : _a.style), children: props.placeholder }))), props.children] })));
 };
+exports.DefaultElement = DefaultElement;
 var insertTag = function (editor, value, label, metadata) {
     var mention = {
         type: 'tag',
@@ -96,8 +190,8 @@ var insertTag = function (editor, value, label, metadata) {
         metadata: metadata,
         children: [{ text: '' }],
     };
-    Transforms.insertNodes(editor, mention);
-    Transforms.move(editor);
+    slate_1.Transforms.insertNodes(editor, mention);
+    slate_1.Transforms.move(editor);
 };
 /**
  * Slate props that are not DOM attributes and must survive the filter below.
@@ -145,50 +239,50 @@ var NON_EDITABLE_PROPS = new Set(['cols', 'fill', 'rows', 'value']);
  * silently. Apply the same rule styled-components applies for a tag target,
  * plus the Slate props it has no way to know about.
  */
-var RefSafeSlateEditable = memo(forwardRef(function (props, ref) {
+var RefSafeSlateEditable = (0, react_1.memo)((0, react_1.forwardRef)(function (props, ref) {
     // Accept the polymorphic input's DOM-ref contract without passing it to
     // Slate's function component. Slate owns this element through ReactEditor.
     void ref;
     // Not memoised: `memo` above already skips the re-render when the props are
     // shallow-equal, so every render that reaches here has new props to filter.
     var editableProps = Object.keys(props).reduce(function (acc, key) {
-        if (!NON_EDITABLE_PROPS.has(key) && (SLATE_EDITABLE_PROPS.has(key) || isPropValid(key))) {
+        if (!NON_EDITABLE_PROPS.has(key) && (SLATE_EDITABLE_PROPS.has(key) || (0, is_prop_valid_1.default)(key))) {
             acc[key] = props[key];
         }
         return acc;
     }, {});
-    return _jsx(Editable, __assign({}, editableProps));
+    return (0, jsx_runtime_1.jsx)(slate_react_1.Editable, __assign({}, editableProps));
 }));
 RefSafeSlateEditable.displayName = 'RefSafeSlateEditable';
-export var ReqoreRichTextEditor = forwardRef(function (_a, ref) {
+exports.ReqoreRichTextEditor = (0, react_1.forwardRef)(function (_a, ref) {
     var _b = _a.value, value = _b === void 0 ? [
         {
             type: 'paragraph',
             children: [{ text: '' }],
         },
-    ] : _b, onChange = _a.onChange, tags = _a.tags, _c = _a.getTagProps, getTagProps = _c === void 0 ? function () { return ({}); } : _c, _d = _a.tagsProps, tagsProps = _d === void 0 ? {} : _d, onTagClick = _a.onTagClick, _e = _a.tagsListProps, tagsListProps = _e === void 0 ? {} : _e, panelProps = _a.panelProps, actions = _a.actions, customRenderLeaf = _a.customRenderLeaf, decorate = _a.decorate, placeholder = _a.placeholder, placeholderProps = _a.placeholderProps, onFocus = _a.onFocus, onFocusCapture = _a.onFocusCapture, rest = __rest(_a, ["value", "onChange", "tags", "getTagProps", "tagsProps", "onTagClick", "tagsListProps", "panelProps", "actions", "customRenderLeaf", "decorate", "placeholder", "placeholderProps", "onFocus", "onFocusCapture"]);
+    ] : _b, onChange = _a.onChange, tags = _a.tags, _c = _a.getTagProps, getTagProps = _c === void 0 ? NO_TAG_PROPS : _c, _d = _a.tagsProps, tagsProps = _d === void 0 ? EMPTY_TAG_PROPS : _d, onTagClick = _a.onTagClick, _e = _a.tagsListProps, tagsListProps = _e === void 0 ? EMPTY_TAGS_LIST_PROPS : _e, panelProps = _a.panelProps, actions = _a.actions, customRenderLeaf = _a.customRenderLeaf, decorate = _a.decorate, placeholder = _a.placeholder, placeholderProps = _a.placeholderProps, onFocus = _a.onFocus, onFocusCapture = _a.onFocusCapture, rest = __rest(_a, ["value", "onChange", "tags", "getTagProps", "tagsProps", "onTagClick", "tagsListProps", "panelProps", "actions", "customRenderLeaf", "decorate", "placeholder", "placeholderProps", "onFocus", "onFocusCapture"]);
     // Create a Slate editor object that won't change across renders.
-    var editor = useState(function () { return withTemplates(withReact(withHistory(createEditor()))); })[0];
-    useImperativeHandle(ref, function () { return editor; }, [editor]);
-    var _f = useState(), target = _f[0], setTarget = _f[1];
-    useUpdateEffect(function () {
+    var editor = (0, react_1.useState)(function () { return (0, exports.withTemplates)((0, slate_react_1.withReact)((0, slate_history_1.withHistory)((0, slate_1.createEditor)()))); })[0];
+    (0, react_1.useImperativeHandle)(ref, function () { return editor; }, [editor]);
+    var _f = (0, react_1.useState)(), target = _f[0], setTarget = _f[1];
+    (0, react_use_1.useUpdateEffect)(function () {
         // Only update the editor's children if the value has changed
         if (JSON.stringify(value) === JSON.stringify(editor.children)) {
             return;
         }
         // Use Slate transforms instead of direct mutation
         try {
-            Editor.withoutNormalizing(editor, function () {
+            slate_1.Editor.withoutNormalizing(editor, function () {
                 // Deselect before replacing content
-                Transforms.deselect(editor);
+                slate_1.Transforms.deselect(editor);
                 // Remove all existing top-level nodes
                 while (editor.children.length) {
-                    Transforms.removeNodes(editor, { at: [0] });
+                    slate_1.Transforms.removeNodes(editor, { at: [0] });
                 }
                 // Insert new content
-                Transforms.insertNodes(editor, value, { at: [0] });
+                slate_1.Transforms.insertNodes(editor, value, { at: [0] });
                 // Move selection to end
-                Transforms.select(editor, Editor.end(editor, []));
+                slate_1.Transforms.select(editor, slate_1.Editor.end(editor, []));
             });
         }
         catch (error) {
@@ -197,51 +291,71 @@ export var ReqoreRichTextEditor = forwardRef(function (_a, ref) {
             editor.children = value;
         }
     }, [JSON.stringify(value)]);
-    var isEmpty = useMemo(function () {
-        return size(value) === 1 && size(value[0].children) === 1 && value[0].children[0].text === '';
+    var isEmpty = (0, react_1.useMemo)(function () {
+        return (0, lodash_1.size)(value) === 1 && (0, lodash_1.size)(value[0].children) === 1 && value[0].children[0].text === '';
     }, [value]);
-    var renderElement = useCallback(function (props) {
-        switch (props.element.type) {
-            case 'tag': {
-                var tagProps = getTagProps(props.element);
-                var finalProps_1 = __assign(__assign({}, tagsProps), tagProps);
-                return (_jsx(TemplateElement, __assign({}, props, { tagProps: __assign(__assign({}, finalProps_1), { size: rest.size ? getOneLessSize(rest.size) : finalProps_1.size || 'small', onClick: !rest.readOnly && !rest.disabled
-                            ? function (event) {
-                                var _a;
-                                onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(props.element);
-                                (_a = finalProps_1.onClick) === null || _a === void 0 ? void 0 : _a.call(finalProps_1, event);
-                            }
-                            : undefined, onRemoveClick: !rest.readOnly && !rest.disabled
-                            ? function () {
-                                try {
-                                    var path = ReactEditor.findPath(editor, props.element);
-                                    Transforms.removeNodes(editor, { at: path });
-                                }
-                                catch (error) {
-                                    // Element may no longer be in the editor
-                                    console.warn('Failed to remove tag:', error);
-                                }
-                            }
-                            : undefined }) })));
-            }
-            default:
-                return (_jsx(DefaultElement, __assign({}, props, { placeholder: isEmpty ? placeholder : undefined, placeholderProps: isEmpty ? placeholderProps : undefined })));
+    /**
+     * The composed chip props, cached PER ELEMENT.
+     *
+     * Composing them inline in `renderElement` built a new object — and two new
+     * closures — every time it ran, for every chip in the document. That object
+     * is `TemplateElement`'s only non-trivial prop, so `memo()` on it could
+     * never bail out, and `handleClick`'s `useCallback` inside it, which lists
+     * `props.tagProps`, could never hit: every chip re-rendered and re-bound its
+     * handlers on every keystroke, on the hot path of a control whose whole job
+     * is to be typed into.
+     *
+     * A `WeakMap` keyed by the element is the right cache because Slate's
+     * documents are immutable: an untouched node keeps its identity across an
+     * edit, and an edited one becomes a new object, which misses and recomposes.
+     * Entries are dropped with the elements themselves.
+     *
+     * The cache is thrown away and rebuilt whenever anything the composition
+     * reads changes, so `getTagProps` identity is the invalidation signal — a
+     * `useCallback`-stable one is a promise that its answer for a given element
+     * is stable too. A `getTagProps` that has to react to something else (a
+     * hover, a selection held outside the editor) must list it, exactly as it
+     * already must for `renderElement` to see the change at all.
+     */
+    var tagPropsCache = (0, react_1.useMemo)(function () { return new WeakMap(); }, [editor, getTagProps, tagsProps, onTagClick, rest.size, rest.readOnly, rest.disabled]);
+    var composeTagProps = (0, react_1.useCallback)(function (element) {
+        var cached = tagPropsCache.get(element);
+        if (cached) {
+            return cached;
         }
-    }, 
-    // All values read inside the callback must be listed here.
-    // `editor` is stable (created once via `useState` initializer)
-    // but listed for completeness. The callback-shaped props
-    // (`getTagProps`, `onTagClick`) and the `rest`-derived flags
-    // (`size`, `readOnly`, `disabled`) need to be tracked so the
-    // memo invalidates when the parent passes new ones — otherwise
-    // tag chips render with stale click handlers / sizes.
-    // Consumers that pass non-stable callbacks via inline arrow
-    // functions will cause re-memoization on every render; pass
-    // stable refs (`useCallback`) for best performance.
-    [
-        isEmpty,
-        placeholder,
-        placeholderProps,
+        var finalProps = __assign(__assign({}, tagsProps), getTagProps(element));
+        var interactive = !rest.readOnly && !rest.disabled;
+        var composed = __assign(__assign({}, finalProps), { size: rest.size ? (0, utils_1.getOneLessSize)(rest.size) : finalProps.size || 'small', 
+            /* Says "not choosable" to the chip itself, which withholding the
+               handlers below cannot: `TemplateElement` binds a click of its own to
+               place the cursor, so an uninteractive editor still hands the tag a
+               handler and a tag with a handler paints itself pressable. This is
+               the flag that keeps the cursor, the hover effect and the tab stop
+               honest — and it is the ONLY route by which the editor's `disabled`
+               reaches the chip, since `disabled` never reaches Slate and
+               `useReadOnly()` therefore cannot see it. */
+            readOnly: !interactive || finalProps.readOnly, onClick: interactive
+                ? function (event) {
+                    var _a;
+                    onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(element);
+                    (_a = finalProps.onClick) === null || _a === void 0 ? void 0 : _a.call(finalProps, event);
+                }
+                : undefined, onRemoveClick: interactive
+                ? function () {
+                    try {
+                        var path = slate_react_1.ReactEditor.findPath(editor, element);
+                        slate_1.Transforms.removeNodes(editor, { at: path });
+                    }
+                    catch (error) {
+                        // Element may no longer be in the editor
+                        console.warn('Failed to remove tag:', error);
+                    }
+                }
+                : undefined });
+        tagPropsCache.set(element, composed);
+        return composed;
+    }, [
+        tagPropsCache,
         editor,
         getTagProps,
         tagsProps,
@@ -250,13 +364,34 @@ export var ReqoreRichTextEditor = forwardRef(function (_a, ref) {
         rest.readOnly,
         rest.disabled,
     ]);
-    var handleFocus = useCallback(function (event) {
+    var renderElement = (0, react_1.useCallback)(function (props) {
+        switch (props.element.type) {
+            case 'tag': {
+                return (0, jsx_runtime_1.jsx)(exports.TemplateElement, __assign({}, props, { tagProps: composeTagProps(props.element) }));
+            }
+            default:
+                return ((0, jsx_runtime_1.jsx)(exports.DefaultElement, __assign({}, props, { placeholder: isEmpty ? placeholder : undefined, placeholderProps: isEmpty ? placeholderProps : undefined })));
+        }
+    }, 
+    // All values read inside the callback must be listed here. Everything
+    // the chip composition reads now hangs off `composeTagProps`, which
+    // carries those dependencies itself — so this list is short on purpose,
+    // and that matters: slate-react's `ElementComponent` memo compares
+    // `renderElement` BY IDENTITY, so a dependency that churns re-renders
+    // every element in the document, not just the chips.
+    //
+    // Consumers that pass non-stable callbacks (`getTagProps`, `onTagClick`)
+    // or a fresh `placeholderProps` object as inline literals put that churn
+    // back; pass stable refs (`useCallback` / `useMemo`) for best
+    // performance.
+    [isEmpty, placeholder, placeholderProps, composeTagProps]);
+    var handleFocus = (0, react_1.useCallback)(function (event) {
         // Firefox does not always create a DOM selection when an empty Slate
         // editor contains an absolutely positioned, non-editable placeholder.
         // Establish the corresponding Slate selection before the first key
         // event so keyboard input is not discarded.
         if (isEmpty && !editor.selection && !rest.readOnly && !rest.disabled) {
-            Transforms.select(editor, Editor.start(editor, []));
+            slate_1.Transforms.select(editor, slate_1.Editor.start(editor, []));
         }
         // Chain any consumer-provided focus handlers. Slate's `Editable`
         // gates its internal `onFocus` wrapper behind editable-target/selection
@@ -265,23 +400,23 @@ export var ReqoreRichTextEditor = forwardRef(function (_a, ref) {
         onFocusCapture === null || onFocusCapture === void 0 ? void 0 : onFocusCapture(event);
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
     }, [editor, isEmpty, onFocus, onFocusCapture, rest.disabled, rest.readOnly]);
-    var renderLeaf = useCallback(function (props) {
-        return customRenderLeaf ? customRenderLeaf(props) : _jsx(Leaf, __assign({}, props));
+    var renderLeaf = (0, react_1.useCallback)(function (props) {
+        return customRenderLeaf ? customRenderLeaf(props) : (0, jsx_runtime_1.jsx)(Leaf, __assign({}, props));
     }, [customRenderLeaf]);
-    var isMarkActive = useCallback(function (editor, format) {
-        var marks = Editor.marks(editor);
+    var isMarkActive = (0, react_1.useCallback)(function (editor, format) {
+        var marks = slate_1.Editor.marks(editor);
         return marks ? marks[format] === true : false;
     }, []);
-    var toggleMark = useCallback(function (editor, format) {
+    var toggleMark = (0, react_1.useCallback)(function (editor, format) {
         var isActive = isMarkActive(editor, format);
         if (isActive) {
-            Editor.removeMark(editor, format);
+            slate_1.Editor.removeMark(editor, format);
         }
         else {
-            Editor.addMark(editor, format, true);
+            slate_1.Editor.addMark(editor, format, true);
         }
     }, [isMarkActive]);
-    var panelActions = useMemo(function () {
+    var panelActions = (0, react_1.useMemo)(function () {
         var _actions = __spreadArray([], ((panelProps === null || panelProps === void 0 ? void 0 : panelProps.actions) || []), true);
         if (!actions) {
             return _actions;
@@ -346,47 +481,160 @@ export var ReqoreRichTextEditor = forwardRef(function (_a, ref) {
             _actions.push(undoRedoActions);
         }
         return _actions;
-    }, [actions, value, target, Editor.marks(editor), editor]);
-    var items = useMemo(function () {
-        if (size(tags)) {
-            return map(tags, function (_a, key) {
+    }, [actions, value, target, slate_1.Editor.marks(editor), editor]);
+    var items = (0, react_1.useMemo)(function () {
+        if ((0, lodash_1.size)(tags)) {
+            return (0, lodash_1.map)(tags, function (_a, key) {
                 var items = _a.items, tag = __rest(_a, ["items"]);
                 return (__assign(__assign({ label: tag.label || key }, tag), { items: items }));
             });
         }
         return undefined;
     }, [tags]);
-    return (_jsx(ReqorePanel, __assign({ flat: true, padded: false, minimal: true, transparent: true, size: 'small' }, panelProps, { children: _jsx(Slate, { editor: editor, initialValue: value, onChange: function (data) {
+    /* A caret in the empty text BESIDE a chip is a dead cursor.
+       
+       The position itself is legitimate — it is the point `TemplateElement`
+       deliberately moves to when the chip is clicked, and typing works from
+       there. What breaks is arriving by clicking the empty text directly: the
+       BROWSER owns the DOM caret then, and it resolves the first keystroke back
+       into the chip's own text child, where Slate silently ignores it.
+
+       Measured on the reported case: selection `[0,2]` before the key,
+       `[0,1,0]` after it, document unchanged, `onChange` fired twice.
+
+       Re-selecting through Slate alone does not help, because Slate's selection
+       is ALREADY the right point — `Transforms.select` to the same range is a
+       no-op and never re-syncs the DOM. So the DOM range is set explicitly,
+       which is the thing the next keystroke actually resolves from.
+
+       Collapsed selections only: a RANGE spanning a chip is how it gets
+       selected for deletion and must be left alone. */
+    var repairCaretBesideVoid = (0, react_1.useCallback)(function () {
+        var _a;
+        if (rest.readOnly || rest.disabled) {
+            return;
+        }
+        /* Adopt the caret this click placed BEFORE reading it.
+  
+           slate-react takes the browser's caret into `editor.selection` from a
+           `selectionchange` handler throttled to 100ms, so at mouseup Slate may
+           still have no selection at all. This handler then used to return
+           without repairing anything — and the gap is worse than a missed
+           repair: a re-render of the editable in that window sees a browser caret
+           with no Slate selection, treats it as stale and REMOVES it, which is
+           itself a selection change and spends the throttle window. The click's
+           own change is deferred to the trailing edge, a key pressed before then
+           is dropped, and by the time the handler runs there is no caret left to
+           adopt — the field reads as frozen.
+  
+           Measured in the Qorus test editor: Slate's selection `null` at the first
+           keystroke while the browser caret sat correctly beside the chip; the
+           same story passed only when the key happened to land more than 100ms
+           after the last throttled call.
+  
+           Only a caret slate-react itself would accept is taken, and never while
+           composing — an IME owns the selection then. */
+        try {
+            var domSelection = slate_react_1.ReactEditor.getWindow(editor).getSelection();
+            var _b = domSelection !== null && domSelection !== void 0 ? domSelection : {}, anchorNode = _b.anchorNode, focusNode = _b.focusNode;
+            /* The same test slate-react's own handler applies before it adopts a
+               caret, so this takes exactly what that handler would take, only
+               sooner. */
+            if (domSelection &&
+                domSelection.rangeCount > 0 &&
+                anchorNode &&
+                focusNode &&
+                !slate_react_1.ReactEditor.isComposing(editor) &&
+                slate_react_1.ReactEditor.hasSelectableTarget(editor, anchorNode) &&
+                slate_react_1.ReactEditor.hasSelectableTarget(editor, focusNode)) {
+                var clicked = slate_react_1.ReactEditor.toSlateRange(editor, domSelection, {
+                    exactMatch: false,
+                    suppressThrow: true,
+                });
+                if (clicked && !(editor.selection && slate_1.Range.equals(editor.selection, clicked))) {
+                    slate_1.Transforms.select(editor, clicked);
+                }
+            }
+        }
+        catch (_c) {
+            // Nothing to adopt is not an error; the throttled handler still runs.
+        }
+        var selection = editor.selection;
+        if (!selection || !slate_1.Range.isCollapsed(selection)) {
+            return;
+        }
+        try {
+            /* Either already inside a void (`voids: true`, or the void the point
+               is inside is not matched at all), or in the empty text immediately
+               after one. `Editor.void` / `Editor.leaf` rather than `Editor.nodes`:
+               the latter returns a generator, which this build target cannot
+               destructure (TS2802). */
+            var inside = slate_1.Editor.void(editor, { at: selection, voids: true });
+            var voidPath = inside === null || inside === void 0 ? void 0 : inside[1];
+            if (!voidPath) {
+                var textEntry = slate_1.Editor.leaf(editor, selection);
+                if (!textEntry) {
+                    return;
+                }
+                var textNode = textEntry[0], textPath = textEntry[1];
+                if (textNode.text !== '') {
+                    return;
+                }
+                var previous = slate_1.Editor.previous(editor, { at: textPath });
+                if (!previous || !slate_1.Editor.isVoid(editor, previous[0])) {
+                    return;
+                }
+                voidPath = previous[1];
+            }
+            // The same point `TemplateElement` uses: from the void's END and
+            // skipping voids, so it cannot resolve back into another one.
+            var point = (_a = slate_1.Editor.after(editor, slate_1.Editor.end(editor, voidPath), { voids: false })) !== null && _a !== void 0 ? _a : slate_1.Editor.end(editor, []);
+            var range = { anchor: point, focus: point };
+            slate_1.Transforms.select(editor, range);
+            var domRange = slate_react_1.ReactEditor.toDOMRange(editor, range);
+            var domSelection = slate_react_1.ReactEditor.getWindow(editor).getSelection();
+            if (domSelection) {
+                domSelection.removeAllRanges();
+                domSelection.addRange(domRange);
+            }
+        }
+        catch (_d) {
+            // A selection can reference a path a concurrent re-render has removed,
+            // and `toDOMRange` throws for a point it cannot resolve. Leaving the
+            // cursor where it is beats throwing out of an event handler.
+        }
+    }, [editor, rest.readOnly, rest.disabled]);
+    return ((0, jsx_runtime_1.jsx)(__1.ReqorePanel, __assign({ flat: true, padded: false, minimal: true, transparent: true, size: 'small' }, panelProps, { children: (0, jsx_runtime_1.jsx)(slate_react_1.Slate, { editor: editor, initialValue: value, onChange: function (data) {
                 var selection = editor.selection;
                 setTarget(selection);
                 onChange === null || onChange === void 0 ? void 0 : onChange(data);
-            }, children: _jsx(ReqoreTextarea, __assign({}, rest, { renderElement: renderElement, renderLeaf: renderLeaf, decorate: decorate, onFocusCapture: handleFocus, as: RefSafeSlateEditable, style: {
+            }, children: (0, jsx_runtime_1.jsx)(__1.ReqoreTextarea, __assign({}, rest, { renderElement: renderElement, renderLeaf: renderLeaf, decorate: decorate, onFocusCapture: handleFocus, onMouseUp: repairCaretBesideVoid, as: RefSafeSlateEditable, style: {
                     lineHeight: 1.5,
                     outline: 'none',
                 }, onClearClick: isEmpty
                     ? undefined
                     : function () {
-                        Transforms.delete(editor, {
+                        slate_1.Transforms.delete(editor, {
                             at: {
-                                anchor: Editor.start(editor, []),
-                                focus: Editor.end(editor, []),
+                                anchor: slate_1.Editor.start(editor, []),
+                                focus: slate_1.Editor.end(editor, []),
                             },
                         });
                         // Focus the editor
                         try {
-                            ReactEditor.focus(editor);
+                            slate_react_1.ReactEditor.focus(editor);
                         }
                         catch (error) {
                             // Editor may not be mounted
                         }
-                    }, value: JSON.stringify(value || []), onChange: useCallback(function () { }, []), templates: __assign(__assign({ customElements: size(panelActions)
+                    }, value: JSON.stringify(value || []), onChange: (0, react_1.useCallback)(function () { }, []), templates: __assign(__assign({ customElements: (0, lodash_1.size)(panelActions)
                         ? [
-                            _jsx(ReqoreControlGroup, { spaceBetween: true, size: 'small', fixed: true, children: panelActions.map(function (action, index) {
+                            (0, jsx_runtime_1.jsx)(__1.ReqoreControlGroup, { spaceBetween: true, size: 'small', fixed: true, children: panelActions.map(function (action, index) {
                                     var _a;
                                     if (action.group) {
-                                        return (_jsx(ReqoreControlGroup, { stack: true, children: (_a = action.group) === null || _a === void 0 ? void 0 : _a.map(function (action, index) { return (_jsx(ReqoreButton, __assign({ customTheme: tagsListProps === null || tagsListProps === void 0 ? void 0 : tagsListProps.listCustomTheme, intent: tagsListProps === null || tagsListProps === void 0 ? void 0 : tagsListProps.listIntent }, action), index)); }) }, index));
+                                        return ((0, jsx_runtime_1.jsx)(__1.ReqoreControlGroup, { stack: true, children: (_a = action.group) === null || _a === void 0 ? void 0 : _a.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(__1.ReqoreButton, __assign({ customTheme: tagsListProps === null || tagsListProps === void 0 ? void 0 : tagsListProps.listCustomTheme, intent: tagsListProps === null || tagsListProps === void 0 ? void 0 : tagsListProps.listIntent }, action), index)); }) }, index));
                                     }
-                                    return (_jsx(ReqoreButton, __assign({ customTheme: tagsListProps === null || tagsListProps === void 0 ? void 0 : tagsListProps.listCustomTheme, intent: tagsListProps === null || tagsListProps === void 0 ? void 0 : tagsListProps.listIntent }, action), index));
+                                    return ((0, jsx_runtime_1.jsx)(__1.ReqoreButton, __assign({ customTheme: tagsListProps === null || tagsListProps === void 0 ? void 0 : tagsListProps.listCustomTheme, intent: tagsListProps === null || tagsListProps === void 0 ? void 0 : tagsListProps.listIntent }, action), index));
                                 }) }, 0),
                         ]
                         : undefined }, tagsListProps), { items: items, closeOnInsideClick: false, onItemSelect: function (item) {
@@ -394,12 +642,12 @@ export var ReqoreRichTextEditor = forwardRef(function (_a, ref) {
                             try {
                                 // Use current selection or fallback to end of document
                                 var selection = editor.selection || {
-                                    anchor: Editor.end(editor, []),
-                                    focus: Editor.end(editor, []),
+                                    anchor: slate_1.Editor.end(editor, []),
+                                    focus: slate_1.Editor.end(editor, []),
                                 };
-                                Transforms.select(editor, selection);
+                                slate_1.Transforms.select(editor, selection);
                                 insertTag(editor, item.value, item.label, item.metadata);
-                                ReactEditor.focus(editor);
+                                slate_react_1.ReactEditor.focus(editor);
                             }
                             catch (error) {
                                 // Fallback: just insert at current position