blixify-ui-web 1.2.144 → 1.2.145

package/lib/components/input/markdown/index.d.ts

@@ -40,7 +40,7 @@ interface Props {
     /**
      * `"sm"` draws the text at 14px on every screen. Default is 14px on phones
      * and 16px from md up for MarkdownStatic, and 16px everywhere for the editor.
-     * The editor keeps a real 16px font on phones and is zoomed to 87.5%, so it
+     * The editor keeps a real 16px font on phones and is scaled to 87.5%, so it
      * looks 14px while iOS Safari still sees 16px and does not zoom on focus.
      */
     textSize?: "sm";

package/lib/components/input/markdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/input/markdown/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/input/markdown/index.tsx"],"names":[],"mappings":"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"}

package/lib/components/input/markdown/index.js

@@ -85,6 +85,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MarkdownInput = exports.MarkdownStatic = exports.handleResolveInheritedView = exports.handleParseEmbedView = void 0;
 var solid_1 = require("@heroicons/react/20/solid");
 var PhotoIcon_1 = __importDefault(require("@heroicons/react/24/outline/PhotoIcon"));
+var BoldIcon_1 = __importDefault(require("@heroicons/react/24/outline/BoldIcon"));
+var ItalicIcon_1 = __importDefault(require("@heroicons/react/24/outline/ItalicIcon"));
+var UnderlineIcon_1 = __importDefault(require("@heroicons/react/24/outline/UnderlineIcon"));
+var StrikethroughIcon_1 = __importDefault(require("@heroicons/react/24/outline/StrikethroughIcon"));
+var CodeBracketIcon_1 = __importDefault(require("@heroicons/react/24/outline/CodeBracketIcon"));
+var LinkIcon_1 = __importDefault(require("@heroicons/react/24/outline/LinkIcon"));
 var QuestionMarkCircleIcon_1 = __importDefault(require("@heroicons/react/24/solid/QuestionMarkCircleIcon"));
 var TableCellsIcon_1 = __importDefault(require("@heroicons/react/24/solid/TableCellsIcon"));
 var core_1 = require("@tiptap/core");
@@ -1333,6 +1339,11 @@ var MarkdownInputContent = function (_a) {
         range: null,
         position: null,
     }), suggestionState = _g[0], setSuggestionState = _g[1];
+    // INFO: where the selection toolbar sits, in viewport px, or null when hidden
+    var _h = (0, react_2.useState)(null), selectionToolbar = _h[0], setSelectionToolbar = _h[1];
+    // INFO: the url being typed for a link, or null when the link field is closed
+    var _j = (0, react_2.useState)(null), linkDraft = _j[0], setLinkDraft = _j[1];
+    var selectionToolbarRef = (0, react_2.useRef)(null);
     var isInternalUpdateRef = (0, react_2.useRef)(false);
     var isHeicFile = function (file) {
         var fileName = file.name.toLowerCase();
@@ -1705,6 +1716,28 @@ var MarkdownInputContent = function (_a) {
         };
         input.click();
     }, [updatePendingImages]);
+    // INFO: a scaled editor keeps its unscaled height in the layout, so the
+    // empty band below it is pulled back with a negative margin — see index.css
+    (0, react_2.useEffect)(function () {
+        if (textSize !== "sm" || !editor)
+            return;
+        var dom = editor.view.dom;
+        var phoneQuery = window.matchMedia("(max-width: 767px)");
+        var handleFitHeight = function () {
+            dom.style.marginBottom = phoneQuery.matches
+                ? "-".concat(dom.offsetHeight * 0.125, "px")
+                : "";
+        };
+        handleFitHeight();
+        var observer = new ResizeObserver(handleFitHeight);
+        observer.observe(dom);
+        phoneQuery.addEventListener("change", handleFitHeight);
+        return function () {
+            observer.disconnect();
+            phoneQuery.removeEventListener("change", handleFitHeight);
+            dom.style.marginBottom = "";
+        };
+    }, [editor, textSize]);
     (0, react_2.useEffect)(function () {
         if (editor) {
             editorRef.current = editor;
@@ -1994,6 +2027,69 @@ var MarkdownInputContent = function (_a) {
             editor.off("selectionUpdate", handleSelectionUpdate);
         };
     }, [editor, readOnly, disabled, suggestionState.show]);
+    // INFO: borderless mode has no static toolbar, so formatting is offered on
+    // the selection instead. Fixed to the viewport, so it does not depend on
+    // which ancestor the host has positioned.
+    (0, react_2.useEffect)(function () {
+        if (!editor || !borderless || readOnly || disabled)
+            return;
+        var handlePlaceToolbar = function () {
+            var _a;
+            var state = editor.state, view = editor.view;
+            var selection = state.selection;
+            // INFO: the link field takes focus from the editor, and a phone keyboard
+            // opening fires resize — neither should close the toolbar mid-typing
+            var toolbarFocused = !!((_a = selectionToolbarRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement));
+            if (selection.empty ||
+                selection instanceof state_1.NodeSelection ||
+                editor.isActive("codeBlock") ||
+                (!view.hasFocus() && !toolbarFocused)) {
+                setSelectionToolbar(null);
+                setLinkDraft(null);
+                return;
+            }
+            var start = view.coordsAtPos(selection.from);
+            var end = view.coordsAtPos(selection.to);
+            var top = Math.min(start.top, end.top);
+            var center = (start.left + end.left) / 2;
+            setSelectionToolbar({
+                top: top > 56 ? top - 48 : Math.max(start.bottom, end.bottom) + 8,
+                left: Math.min(Math.max(center, 150), window.innerWidth - 150),
+            });
+        };
+        var handleBlur = function (_a) {
+            var _b;
+            var event = _a.event;
+            var next = event.relatedTarget;
+            if (next && ((_b = selectionToolbarRef.current) === null || _b === void 0 ? void 0 : _b.contains(next)))
+                return;
+            setSelectionToolbar(null);
+            setLinkDraft(null);
+        };
+        editor.on("selectionUpdate", handlePlaceToolbar);
+        editor.on("focus", handlePlaceToolbar);
+        editor.on("blur", handleBlur);
+        window.addEventListener("scroll", handlePlaceToolbar, true);
+        window.addEventListener("resize", handlePlaceToolbar);
+        return function () {
+            editor.off("selectionUpdate", handlePlaceToolbar);
+            editor.off("focus", handlePlaceToolbar);
+            editor.off("blur", handleBlur);
+            window.removeEventListener("scroll", handlePlaceToolbar, true);
+            window.removeEventListener("resize", handlePlaceToolbar);
+        };
+    }, [editor, borderless, readOnly, disabled]);
+    var handleApplyLink = function () {
+        if (!editor || linkDraft === null)
+            return;
+        var href = linkDraft.trim();
+        var chain = editor.chain().focus().extendMarkRange("link");
+        if (href)
+            chain.setLink({ href: href }).run();
+        else
+            chain.unsetLink().run();
+        setLinkDraft(null);
+    };
     // Update editor content when value prop changes
     (0, react_2.useEffect)(function () {
         if (editor) {
@@ -2184,6 +2280,88 @@ var MarkdownInputContent = function (_a) {
     // Only borderless opts into skipping it; boxed usage renders as it always has.
     var showLabelRow = !borderless ||
         Boolean(label || subLabel || (!readOnly && (customElement || infoElement)));
+    var renderSelectionToolbar = function () {
+        if (!editor || !selectionToolbar)
+            return null;
+        var surface = darkMode
+            ? "bg-gray-800 border-gray-600 text-gray-200"
+            : "bg-white border-gray-200 text-gray-700";
+        var hover = darkMode ? "hover:bg-gray-700" : "hover:bg-gray-100";
+        var active = darkMode
+            ? "bg-gray-700 text-white"
+            : "bg-primary-50 text-primary-600";
+        var marks = [
+            {
+                id: "bold",
+                title: "Bold",
+                icon: BoldIcon_1.default,
+                run: function () { return editor.chain().focus().toggleBold().run(); },
+            },
+            {
+                id: "italic",
+                title: "Italic",
+                icon: ItalicIcon_1.default,
+                run: function () { return editor.chain().focus().toggleItalic().run(); },
+            },
+            {
+                id: "underline",
+                title: "Underline",
+                icon: UnderlineIcon_1.default,
+                run: function () { return editor.chain().focus().toggleUnderline().run(); },
+            },
+            {
+                id: "strike",
+                title: "Strikethrough",
+                icon: StrikethroughIcon_1.default,
+                run: function () { return editor.chain().focus().toggleStrike().run(); },
+            },
+            {
+                id: "code",
+                title: "Inline code",
+                icon: CodeBracketIcon_1.default,
+                run: function () { return editor.chain().focus().toggleCode().run(); },
+            },
+        ];
+        return (react_2.default.createElement("div", { ref: selectionToolbarRef, "data-testid": "markdown-selection-toolbar", className: "fixed z-50 flex -translate-x-1/2 flex-row items-center gap-x-0.5 rounded-lg border p-1 shadow-lg ".concat(surface), style: { top: selectionToolbar.top, left: selectionToolbar.left }, 
+            // INFO: keeps the editor focused and the selection intact while a
+            // button is pressed; the link field is the one control that takes focus
+            onMouseDown: function (event) {
+                if (event.target.tagName !== "INPUT")
+                    event.preventDefault();
+            } }, linkDraft !== null ? (
+        // INFO: a form so a phone keyboard's Done submits; stopPropagation
+        // keeps it from submitting a form the editor sits inside
+        react_2.default.createElement("form", { className: "flex flex-row items-center gap-x-1", onBlur: function (event) {
+                var _a;
+                var next = event.relatedTarget;
+                if (next && ((_a = selectionToolbarRef.current) === null || _a === void 0 ? void 0 : _a.contains(next)))
+                    return;
+                if (next && editor.view.dom.contains(next))
+                    return;
+                setSelectionToolbar(null);
+                setLinkDraft(null);
+            }, onSubmit: function (event) {
+                event.preventDefault();
+                event.stopPropagation();
+                handleApplyLink();
+            } },
+            react_2.default.createElement("input", { autoFocus: true, type: "url", enterKeyHint: "done", value: linkDraft, placeholder: "Paste a link", onChange: function (event) { return setLinkDraft(event.target.value); }, onKeyDown: function (event) {
+                    if (event.key === "Escape")
+                        setLinkDraft(null);
+                }, className: "w-56 rounded border-0 px-2 py-1 text-base focus:ring-1 focus:ring-primary-500 sm:text-sm ".concat(darkMode ? "bg-gray-700 text-white" : "bg-gray-50") }),
+            react_2.default.createElement("button", { type: "submit", className: "rounded px-2 py-1 text-sm font-medium text-primary-600 ".concat(hover) }, "Apply"))) : (react_2.default.createElement(react_2.default.Fragment, null,
+            marks.map(function (eachMark) {
+                var Icon = eachMark.icon;
+                return (react_2.default.createElement("button", { key: eachMark.id, type: "button", title: eachMark.title, "aria-label": eachMark.title, "aria-pressed": editor.isActive(eachMark.id), onClick: eachMark.run, className: "rounded p-1.5 ".concat(editor.isActive(eachMark.id) ? active : hover) },
+                    react_2.default.createElement(Icon, { className: "h-4 w-4" })));
+            }),
+            react_2.default.createElement("button", { type: "button", title: "Link", "aria-label": "Link", "aria-pressed": editor.isActive("link"), onClick: function () { var _a; return setLinkDraft((_a = editor.getAttributes("link").href) !== null && _a !== void 0 ? _a : ""); }, className: "rounded p-1.5 ".concat(editor.isActive("link") ? active : hover) },
+                react_2.default.createElement(LinkIcon_1.default, { className: "h-4 w-4" })),
+            react_2.default.createElement("span", { className: "mx-0.5 h-5 w-px ".concat(darkMode ? "bg-gray-600" : "bg-gray-200") }),
+            react_2.default.createElement("button", { type: "button", title: "Clear formatting", "aria-label": "Clear formatting", onClick: function () { return editor.chain().focus().unsetAllMarks().run(); }, className: "rounded px-1.5 py-1 text-sm font-medium ".concat(hover) },
+                "T",
+                react_2.default.createElement("sub", { className: "text-[10px]" }, "x"))))));
+    };
     return (react_2.default.createElement("div", { className: defaultClassName },
         showLabelRow && (react_2.default.createElement("div", { className: "flex w-full" },
             react_2.default.createElement("div", { className: "flex flex-col".concat(disabledClassName) },
@@ -2388,6 +2566,7 @@ var MarkdownInputContent = function (_a) {
                                 ? "text-red-400 hover:bg-gray-700"
                                 : "text-red-600 hover:bg-gray-200"), title: "Delete Table" }, "Del"))))),
                 react_2.default.createElement(react_1.EditorContent, { editor: editor }),
+                renderSelectionToolbar(),
                 suggestionState.show && !readOnly && suggestionState.position && (react_2.default.createElement("div", { className: "absolute z-50", style: {
                         top: "".concat(suggestionState.position.top, "px"),
                         left: "".concat(suggestionState.position.left, "px"),