smartrte-react 0.2.8 → 0.3.0

package/dist/components/LinkEditorPopover.d.ts

@@ -0,0 +1,20 @@
+export interface LinkEditorApplyValue {
+    href: string;
+    text?: string;
+    openInNewTab: boolean;
+}
+export interface LinkEditorPopoverProps {
+    x: number;
+    y: number;
+    initialHref?: string;
+    initialText?: string;
+    initialOpenInNewTab?: boolean;
+    showTextInput?: boolean;
+    showOpen?: boolean;
+    showRemove?: boolean;
+    onApply: (value: LinkEditorApplyValue) => void;
+    onOpen?: () => void;
+    onRemove?: () => void;
+    onCancel: () => void;
+}
+export declare function LinkEditorPopover({ x, y, initialHref, initialText, initialOpenInNewTab, showTextInput, showOpen, showRemove, onApply, onOpen, onRemove, onCancel, }: LinkEditorPopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/LinkEditorPopover.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { normalizeLinkInput } from "smartrte-core";
+const inputStyle = {
+    width: "100%",
+    height: 36,
+    boxSizing: "border-box",
+    marginTop: 5,
+    padding: "0 10px",
+    border: "1px solid var(--srte-input-border)",
+    borderRadius: 6,
+    outline: "none",
+    background: "var(--srte-input-bg)",
+    color: "var(--srte-input-text)",
+    font: "inherit",
+};
+const buttonStyle = {
+    minHeight: 34,
+    padding: "0 11px",
+    border: "1px solid var(--srte-input-border)",
+    borderRadius: 6,
+    background: "var(--srte-input-bg)",
+    color: "var(--srte-menu-text)",
+    cursor: "pointer",
+    fontWeight: 500,
+};
+export function LinkEditorPopover({ x, y, initialHref = "", initialText = "", initialOpenInNewTab = false, showTextInput = false, showOpen = false, showRemove = false, onApply, onOpen, onRemove, onCancel, }) {
+    const [href, setHref] = useState(initialHref);
+    const [text, setText] = useState(initialText);
+    const [openInNewTab, setOpenInNewTab] = useState(initialOpenInNewTab);
+    const [error, setError] = useState("");
+    const hrefRef = useRef(null);
+    const titleId = useId();
+    const errorId = useId();
+    useEffect(() => {
+        hrefRef.current?.focus();
+        hrefRef.current?.select();
+    }, []);
+    const apply = () => {
+        const normalized = normalizeLinkInput(href);
+        if (!normalized.href) {
+            setError("Enter a safe, valid web URL, email address, phone number, or page anchor.");
+            return;
+        }
+        if (showTextInput && !text.trim()) {
+            setError("Enter display text.");
+            return;
+        }
+        onApply({
+            href: normalized.href,
+            text: showTextInput ? text.trim() : undefined,
+            openInNewTab,
+        });
+    };
+    return (_jsxs("div", { "data-srte-link-popover": "true", role: "dialog", "aria-labelledby": titleId, style: {
+            position: "fixed",
+            left: Math.max(8, Math.min(x, typeof window === "undefined" ? x : window.innerWidth - 376)),
+            top: Math.max(8, Math.min(y, typeof window === "undefined" ? y : window.innerHeight - 344)),
+            zIndex: 70,
+            width: 360,
+            maxWidth: "calc(100vw - 16px)",
+            boxSizing: "border-box",
+            maxHeight: "calc(100vh - 16px)",
+            overflowY: "auto",
+            background: "var(--srte-menu-bg)",
+            color: "var(--srte-menu-text)",
+            border: "1px solid var(--srte-border)",
+            borderRadius: 10,
+            boxShadow: "var(--srte-menu-shadow)",
+            padding: 14,
+        }, onKeyDown: (event) => {
+            if (event.key === "Escape") {
+                event.preventDefault();
+                onCancel();
+            }
+            if (event.key === "Enter" && !event.shiftKey) {
+                event.preventDefault();
+                apply();
+            }
+        }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }, children: [_jsxs("div", { id: titleId, style: { display: "flex", alignItems: "center", gap: 8, fontWeight: 650 }, children: [_jsx("span", { "aria-hidden": "true", style: { color: "var(--srte-primary)", fontSize: 18 }, children: "\u2197" }), showRemove ? "Edit link" : "Insert link"] }), _jsx("button", { type: "button", "aria-label": "Close link editor", title: "Close", onClick: onCancel, style: { ...buttonStyle, minWidth: 28, minHeight: 28, padding: 0, border: 0, background: "transparent", fontSize: 18 }, children: "\u00D7" })] }), showTextInput && (_jsxs("label", { style: { display: "block", marginBottom: 10, fontSize: 12, fontWeight: 600 }, children: ["Display text", _jsx("input", { "data-srte-link-text-input": "true", value: text, autoComplete: "off", onChange: (event) => {
+                            setText(event.target.value);
+                            setError("");
+                        }, style: inputStyle })] })), _jsxs("label", { style: { display: "block", marginBottom: 10, fontSize: 12, fontWeight: 600 }, children: ["Link destination", _jsx("input", { ref: hrefRef, "data-srte-link-href-input": "true", value: href, inputMode: "url", autoCapitalize: "none", autoCorrect: "off", spellCheck: false, placeholder: "Paste a URL, email, phone, or #anchor", "aria-invalid": Boolean(error), "aria-describedby": error ? errorId : undefined, onChange: (event) => {
+                            setHref(event.target.value);
+                            setError("");
+                        }, style: { ...inputStyle, borderColor: error ? "var(--srte-danger)" : "var(--srte-input-border)" } })] }), _jsxs("label", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: error ? 8 : 14, fontSize: 13, cursor: "pointer" }, children: [_jsx("input", { "data-srte-link-new-tab-input": "true", type: "checkbox", checked: openInNewTab, onChange: (event) => setOpenInNewTab(event.target.checked) }), "Open in a new tab"] }), error && (_jsx("div", { id: errorId, "data-srte-link-error": "true", role: "alert", style: { color: "var(--srte-danger)", fontSize: 12, marginBottom: 10 }, children: error })), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [showRemove && (_jsx("button", { type: "button", onClick: onRemove, style: { ...buttonStyle, color: "var(--srte-danger)", marginRight: "auto" }, children: "Remove link" })), !showRemove && _jsx("span", { style: { flex: 1 } }), showOpen && _jsx("button", { type: "button", onClick: onOpen, style: buttonStyle, children: "Open" }), _jsx("button", { type: "button", onClick: onCancel, style: buttonStyle, children: "Cancel" }), _jsx("button", { type: "button", onClick: apply, style: { ...buttonStyle, borderColor: "var(--srte-primary)", background: "var(--srte-primary)", color: "var(--srte-on-primary)" }, children: showRemove ? "Update" : "Insert" })] })] }));
+}