@smartsoft001/react 0.0.0-stage → 2.193.0

package/src/lib/components/input/long-text/rich-text-editor.js

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartRichTextEditor = SmartRichTextEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const rich_text_commands_1 = require("./rich-text-commands");
+const rich_text_menu_1 = require("./rich-text-menu");
+const rich_text_toolbar_1 = require("./rich-text-toolbar");
+const html_1 = require("../../../utils/html");
+// The `ngx-editor` content styles (padding, paragraph spacing, quotes), plus
+// the list, heading, code and link looks Tailwind's preflight resets.
+const CONTENT_CLASSES = [
+    'smart:min-h-45',
+    'smart:p-2',
+    'smart:whitespace-pre-wrap',
+    'smart:outline-none',
+    'smart:[&_p]:mb-2.5',
+    'smart:[&_blockquote]:border-l-3',
+    'smart:[&_blockquote]:border-gray-300',
+    'smart:[&_blockquote]:pl-4',
+    'smart:dark:[&_blockquote]:border-white/20',
+    'smart:[&_ul]:list-disc',
+    'smart:[&_ul]:pl-6',
+    'smart:[&_ol]:list-decimal',
+    'smart:[&_ol]:pl-6',
+    'smart:[&_h1]:text-2xl',
+    'smart:[&_h1]:font-bold',
+    'smart:[&_h2]:text-xl',
+    'smart:[&_h2]:font-bold',
+    'smart:[&_h3]:text-lg',
+    'smart:[&_h3]:font-semibold',
+    'smart:[&_h4]:font-semibold',
+    'smart:[&_h5]:text-sm',
+    'smart:[&_h5]:font-semibold',
+    'smart:[&_h6]:text-xs',
+    'smart:[&_h6]:font-semibold',
+    'smart:[&_code]:rounded-sm',
+    'smart:[&_code]:bg-gray-100',
+    'smart:[&_code]:px-1',
+    'smart:[&_code]:font-mono',
+    'smart:dark:[&_code]:bg-white/10',
+    'smart:[&_a]:text-indigo-600',
+    'smart:[&_a]:underline',
+    'smart:dark:[&_a]:text-indigo-400',
+].join(' ');
+const PLACEHOLDER_CLASSES = 'smart:pointer-events-none smart:absolute smart:left-2 smart:top-2 smart:select-none smart:text-gray-500 smart:dark:text-gray-400';
+/** Whether `html` shows nothing: no text and no image. */
+function isEmptyHtml(html) {
+    return !html
+        .replace(/<(?!img\b)[^>]*>/gi, '')
+        .replace(/&nbsp;/g, ' ')
+        .trim();
+}
+/**
+ * A dependency-free rich-text editor: a menu bar over a `contentEditable`
+ * element whose HTML is the value. It stands in for the `ngx-editor` menu and
+ * editor the Angular `InputLongTextComponent` rendered; the menu runs its
+ * commands through `document.execCommand` on the last selection made in the
+ * editor.
+ */
+function SmartRichTextEditor({ value, placeholder, disabled = false, toolbar = rich_text_toolbar_1.LONG_TEXT_TOOLBAR, labelledBy, onChange, onBlur, }) {
+    const editorRef = (0, react_1.useRef)(null);
+    const rangeRef = (0, react_1.useRef)(null);
+    const emittedRef = (0, react_1.useRef)(value ?? '');
+    const [initialHtml] = (0, react_1.useState)(() => (0, html_1.toInnerHtml)(value));
+    const [empty, setEmpty] = (0, react_1.useState)(() => isEmptyHtml(initialHtml.__html));
+    const [state, setState] = (0, react_1.useState)(rich_text_commands_1.EMPTY_RICH_TEXT_STATE);
+    const refreshState = (0, react_1.useCallback)(() => {
+        const editor = editorRef.current;
+        if (!editor)
+            return;
+        const next = (0, rich_text_commands_1.getRichTextState)(editor, rangeRef.current);
+        setState((current) => (0, rich_text_commands_1.isSameRichTextState)(current, next) ? current : next);
+    }, []);
+    // Remember the last selection made in the editor: the menu (and its
+    // popups) take the focus, the commands run on that selection.
+    (0, react_1.useEffect)(() => {
+        const onSelectionChange = () => {
+            const editor = editorRef.current;
+            const range = editor && (0, rich_text_commands_1.getEditorRange)(editor);
+            if (!range)
+                return;
+            rangeRef.current = range;
+            refreshState();
+        };
+        document.addEventListener('selectionchange', onSelectionChange);
+        return () => document.removeEventListener('selectionchange', onSelectionChange);
+    }, [refreshState]);
+    // A value that did not come from the editor (a reset, a patch) replaces
+    // the content, sanitised as the initial one.
+    (0, react_1.useEffect)(() => {
+        const editor = editorRef.current;
+        if (!editor || (value ?? '') === emittedRef.current)
+            return;
+        emittedRef.current = value ?? '';
+        editor.innerHTML = (0, html_1.toInnerHtml)(value).__html;
+        setEmpty(isEmptyHtml(editor.innerHTML));
+    }, [value]);
+    const emit = () => {
+        const editor = editorRef.current;
+        if (!editor)
+            return;
+        const html = editor.innerHTML;
+        setEmpty(isEmptyHtml(html));
+        if (html === emittedRef.current)
+            return;
+        emittedRef.current = html;
+        onChange?.(html);
+    };
+    const run = (command) => {
+        const editor = editorRef.current;
+        if (!editor || disabled)
+            return;
+        const range = (0, rich_text_commands_1.getEditorRange)(editor) ?? rangeRef.current;
+        editor.focus();
+        (0, rich_text_commands_1.restoreRange)(range);
+        (0, rich_text_commands_1.applyRichTextCommand)(editor, range, command);
+        rangeRef.current = (0, rich_text_commands_1.getEditorRange)(editor) ?? range;
+        emit();
+        refreshState();
+    };
+    const getSelectedText = () => {
+        const editor = editorRef.current;
+        const range = editor && ((0, rich_text_commands_1.getEditorRange)(editor) ?? rangeRef.current);
+        return range ? range.toString() : '';
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(rich_text_menu_1.SmartRichTextMenu, { toolbar: toolbar, state: state, disabled: disabled, onCommand: run, getSelectedText: getSelectedText }), (0, jsx_runtime_1.jsxs)("div", { className: "smart:relative", children: [empty && ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", className: PLACEHOLDER_CLASSES, children: placeholder })), (0, jsx_runtime_1.jsx)("div", { ref: editorRef, role: "textbox", "aria-multiline": "true", "aria-labelledby": labelledBy, "aria-placeholder": placeholder, "aria-disabled": disabled || undefined, contentEditable: !disabled, className: CONTENT_CLASSES, dangerouslySetInnerHTML: initialHtml, 
+                        // Paragraphs, as the Angular editor wrote.
+                        onFocus: () => (0, rich_text_commands_1.execCommand)('defaultParagraphSeparator', 'p'), onInput: emit, onBlur: onBlur })] })] }));
+}
+//# sourceMappingURL=rich-text-editor.js.map

package/src/lib/components/input/long-text/rich-text-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-text-editor.js","sourceRoot":"","sources":["../../../../../../../../../packages/shared/react/src/lib/components/input/long-text/rich-text-editor.tsx"],"names":[],"mappings":"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"}

package/src/lib/components/input/long-text/rich-text-menu.d.ts

@@ -0,0 +1,21 @@
+import { SmartRichTextCommand, SmartRichTextState } from './rich-text-commands';
+import { SmartRichTextIconName, SmartRichTextToolbar } from './rich-text-toolbar';
+/** An `ngx-editor` menu icon. */
+export declare function SmartRichTextIcon({ name }: {
+    name: SmartRichTextIconName;
+}): import("react/jsx-runtime").JSX.Element;
+export interface SmartRichTextMenuProps {
+    toolbar: SmartRichTextToolbar;
+    state: SmartRichTextState;
+    disabled?: boolean;
+    onCommand: (command: SmartRichTextCommand) => void;
+    /** The text selected in the editor, which a new link takes. */
+    getSelectedText: () => string;
+}
+/**
+ * The menu bar of `SmartRichTextEditor` (the `ngx-editor-menu` of the Angular
+ * field): the toolbar's groups of items, separated. Toggles press while their
+ * format is at the selection; headings open a listbox, links, images and
+ * colours a popup.
+ */
+export declare function SmartRichTextMenu({ toolbar, state, disabled, onCommand, getSelectedText, }: SmartRichTextMenuProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/input/long-text/rich-text-menu.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartRichTextIcon = SmartRichTextIcon;
+exports.SmartRichTextMenu = SmartRichTextMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const rich_text_popups_1 = require("./rich-text-popups");
+const rich_text_toolbar_1 = require("./rich-text-toolbar");
+const class_names_1 = require("../../../utils/class-names");
+const MENU_BAR_CLASSES = 'smart:flex smart:flex-wrap smart:gap-x-0.5 smart:gap-y-1 smart:p-1 smart:border-b smart:border-gray-300 smart:dark:border-white/10';
+const ITEM_CLASSES = 'smart:relative smart:flex smart:shrink-0 smart:items-center smart:justify-center';
+const ICON_BUTTON_CLASSES = 'smart:inline-flex smart:size-7.5 smart:items-center smart:justify-center smart:rounded-xs smart:transition smart:duration-200 smart:ease-in-out smart:hover:bg-gray-100 smart:dark:hover:bg-white/10 smart:focus-visible:outline-1 smart:focus-visible:outline-blue-400 smart:disabled:opacity-50 smart:disabled:pointer-events-none';
+const ACTIVE_CLASSES = 'smart:bg-blue-50 smart:text-blue-600 smart:dark:bg-white/15 smart:dark:text-blue-300';
+const SEPARATOR_CLASSES = 'smart:mx-1.5 smart:border-l smart:border-gray-300 smart:dark:border-white/15';
+const DROPDOWN_CLASSES = 'smart:relative smart:flex smart:min-w-16 smart:shrink-0 smart:items-center smart:hover:bg-gray-100 smart:dark:hover:bg-white/10';
+const DROPDOWN_TEXT_CLASSES = 'smart:flex smart:h-full smart:w-full smart:items-center smart:justify-center smart:gap-x-6 smart:px-1.5 smart:text-sm smart:focus-visible:outline-1 smart:focus-visible:outline-blue-400 smart:disabled:opacity-50 smart:disabled:pointer-events-none';
+const DROPDOWN_MENU_CLASSES = 'smart:absolute smart:left-0 smart:top-full smart:z-10 smart:mt-0.5 smart:flex smart:w-full smart:flex-col smart:rounded-sm smart:bg-white smart:shadow-md smart:dark:bg-gray-800';
+const DROPDOWN_ITEM_CLASSES = 'smart:whitespace-nowrap smart:p-2 smart:text-left smart:text-sm smart:hover:bg-gray-100 smart:dark:hover:bg-white/10 smart:focus-visible:outline-1 smart:focus-visible:outline-blue-400';
+const DROPDOWN_ACTIVE_CLASSES = 'smart:bg-blue-50 smart:dark:bg-white/15';
+/** An `ngx-editor` menu icon. */
+function SmartRichTextIcon({ name }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", height: "20", width: "20", "aria-hidden": "true", children: rich_text_toolbar_1.RICH_TEXT_ICONS[name].map((d) => ((0, jsx_runtime_1.jsx)("path", { d: d }, d))) }));
+}
+/**
+ * The menu bar of `SmartRichTextEditor` (the `ngx-editor-menu` of the Angular
+ * field): the toolbar's groups of items, separated. Toggles press while their
+ * format is at the selection; headings open a listbox, links, images and
+ * colours a popup.
+ */
+function SmartRichTextMenu({ toolbar, state, disabled = false, onCommand, getSelectedText, }) {
+    const [open, setOpen] = (0, react_1.useState)(null);
+    const [selectedText, setSelectedText] = (0, react_1.useState)('');
+    const openItemRef = (0, react_1.useRef)(null);
+    // A press outside the open item closes its popup, as in `ngx-editor`.
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return undefined;
+        const close = (e) => {
+            if (!openItemRef.current?.contains(e.target))
+                setOpen(null);
+        };
+        document.addEventListener('mousedown', close);
+        return () => document.removeEventListener('mousedown', close);
+    }, [open]);
+    /** The ref of an item's container while its popup is open. */
+    const itemRef = (popup) => open === popup ? openItemRef : undefined;
+    const togglePopup = (popup) => setOpen((current) => (current === popup ? null : popup));
+    const command = (next) => {
+        setOpen(null);
+        onCommand(next);
+    };
+    const iconButton = (options) => ((0, jsx_runtime_1.jsxs)("div", { className: ITEM_CLASSES, ref: options.popup ? itemRef(options.popup) : undefined, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, class_names_1.cn)(ICON_BUTTON_CLASSES, options.active && ACTIVE_CLASSES), title: options.label, "aria-label": options.label, "aria-pressed": options.pressed, "aria-haspopup": options.popup ? 'dialog' : undefined, "aria-expanded": options.popup ? open === options.popup : undefined, disabled: disabled, onMouseDown: rich_text_popups_1.keepEditorFocus, onClick: options.onClick, children: (0, jsx_runtime_1.jsx)(SmartRichTextIcon, { name: options.icon }) }), options.children] }));
+    const headingDropdown = (levels) => {
+        const active = levels.find((level) => level === state.heading);
+        const name = rich_text_toolbar_1.RICH_TEXT_LABELS[active ?? 'heading'];
+        const expanded = open === 'heading';
+        return ((0, jsx_runtime_1.jsxs)("div", { className: DROPDOWN_CLASSES, ref: itemRef('heading'), children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: (0, class_names_1.cn)(DROPDOWN_TEXT_CLASSES, (active || expanded) && ACTIVE_CLASSES), "aria-label": name, "aria-haspopup": "listbox", "aria-expanded": expanded, disabled: disabled, onMouseDown: rich_text_popups_1.keepEditorFocus, onClick: () => togglePopup('heading'), children: [name, (0, jsx_runtime_1.jsx)("svg", { className: "smart:size-2", viewBox: "0 0 8 4", fill: "currentColor", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "M0 0h8L4 4z" }) })] }), expanded && ((0, jsx_runtime_1.jsx)("div", { className: DROPDOWN_MENU_CLASSES, role: "listbox", children: levels.map((level) => ((0, jsx_runtime_1.jsx)("button", { type: "button", role: "option", "aria-selected": level === active, className: (0, class_names_1.cn)(DROPDOWN_ITEM_CLASSES, level === active && DROPDOWN_ACTIVE_CLASSES), onMouseDown: rich_text_popups_1.keepEditorFocus, onClick: () => command({ type: 'heading', level }), children: rich_text_toolbar_1.RICH_TEXT_LABELS[level] }, level))) }))] }));
+    };
+    const renderItem = (item) => {
+        if (typeof item === 'object')
+            return headingDropdown(item.heading);
+        if (item === 'link') {
+            return iconButton({
+                label: state.link
+                    ? rich_text_toolbar_1.RICH_TEXT_LABELS.removeLink
+                    : rich_text_toolbar_1.RICH_TEXT_LABELS.insertLink,
+                icon: state.link ? 'unlink' : 'link',
+                active: state.link || open === 'link',
+                popup: 'link',
+                onClick: () => {
+                    if (state.link) {
+                        command({ type: 'unlink' });
+                        return;
+                    }
+                    setSelectedText(getSelectedText());
+                    togglePopup('link');
+                },
+                children: open === 'link' && ((0, jsx_runtime_1.jsx)(rich_text_popups_1.SmartRichTextLinkPopup, { selectedText: selectedText, onInsert: (link) => command({ type: 'link', ...link }) })),
+            });
+        }
+        if (item === 'image') {
+            return iconButton({
+                label: rich_text_toolbar_1.RICH_TEXT_LABELS.insertImage,
+                icon: 'image',
+                active: open === 'image',
+                popup: 'image',
+                onClick: () => togglePopup('image'),
+                children: open === 'image' && ((0, jsx_runtime_1.jsx)(rich_text_popups_1.SmartRichTextImagePopup, { onInsert: (image) => command({ type: 'image', ...image }) })),
+            });
+        }
+        if (item === 'text_color' || item === 'background_color') {
+            return iconButton({
+                label: rich_text_toolbar_1.RICH_TEXT_LABELS[item],
+                icon: item === 'text_color' ? 'text_color' : 'color_fill',
+                active: !!state[item] || open === item,
+                popup: item,
+                onClick: () => togglePopup(item),
+                children: open === item && ((0, jsx_runtime_1.jsx)(rich_text_popups_1.SmartRichTextColorPopup, { kind: item, active: state[item], onSelect: (color) => command({ type: 'color', kind: item, color }), onRemove: () => command({ type: 'removeColor', kind: item }) })),
+            });
+        }
+        const pressed = !!state.toggles[item];
+        return iconButton({
+            label: rich_text_toolbar_1.RICH_TEXT_LABELS[item],
+            icon: item,
+            active: pressed,
+            pressed,
+            onClick: () => command({ type: 'toggle', item }),
+        });
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: MENU_BAR_CLASSES, children: toolbar.map((group, groupIndex) => group.map((item, itemIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [renderItem(item), itemIndex === group.length - 1 &&
+                    groupIndex !== toolbar.length - 1 && ((0, jsx_runtime_1.jsx)("div", { role: "separator", "aria-orientation": "vertical", className: SEPARATOR_CLASSES }))] }, `${groupIndex}-${itemIndex}`)))) }));
+}
+//# sourceMappingURL=rich-text-menu.js.map

package/src/lib/components/input/long-text/rich-text-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-text-menu.js","sourceRoot":"","sources":["../../../../../../../../../packages/shared/react/src/lib/components/input/long-text/rich-text-menu.tsx"],"names":[],"mappings":";;AAsDA,8CAeC;AAiBD,8CAsNC;;AA5SD,iCAA8D;AAI9D,yDAK4B;AAC5B,2DAO6B;AAC7B,4DAAgD;AAEhD,MAAM,gBAAgB,GACpB,oIAAoI,CAAC;AAEvI,MAAM,YAAY,GAChB,kFAAkF,CAAC;AAErF,MAAM,mBAAmB,GACvB,sUAAsU,CAAC;AAEzU,MAAM,cAAc,GAClB,sFAAsF,CAAC;AAEzF,MAAM,iBAAiB,GACrB,8EAA8E,CAAC;AAEjF,MAAM,gBAAgB,GACpB,iIAAiI,CAAC;AAEpI,MAAM,qBAAqB,GACzB,uPAAuP,CAAC;AAE1P,MAAM,qBAAqB,GACzB,kLAAkL,CAAC;AAErL,MAAM,qBAAqB,GACzB,yLAAyL,CAAC;AAE5L,MAAM,uBAAuB,GAAG,yCAAyC,CAAC;AAM1E,iCAAiC;AACjC,SAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAmC;IACzE,OAAO,CACL,gCACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,IAAI,EACX,KAAK,EAAC,IAAI,iBACE,MAAM,YAEjB,mCAAe,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAChC,iCAAc,CAAC,EAAE,CAAC,IAAP,CAAC,CAAU,CACvB,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAWD;;;;;GAKG;AACH,SAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,eAAe,GACQ;IACvB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAA4B,IAAI,CAAC,CAAC;IAClE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAEjD,sEAAsE;IACtE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI;YAAE,OAAO,SAAS,CAAC;QAE5B,MAAM,KAAK,GAAG,CAAC,CAAQ,EAAE,EAAE;YACzB,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC;gBAAE,OAAO,CAAC,IAAI,CAAC,CAAC;QACtE,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;QAE9C,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IAChE,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,8DAA8D;IAC9D,MAAM,OAAO,GAAG,CAAC,KAAyB,EAAE,EAAE,CAC5C,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC;IAE3C,MAAM,WAAW,GAAG,CAAC,KAAyB,EAAE,EAAE,CAChD,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;IAE3D,MAAM,OAAO,GAAG,CAAC,IAA0B,EAAE,EAAE;QAC7C,OAAO,CAAC,IAAI,CAAC,CAAC;QACd,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,OAQnB,EAAE,EAAE,CAAC,CACJ,iCACE,SAAS,EAAE,YAAY,EACvB,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,aAEvD,mCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAA,gBAAE,EAAC,mBAAmB,EAAE,OAAO,CAAC,MAAM,IAAI,cAAc,CAAC,EACpE,KAAK,EAAE,OAAO,CAAC,KAAK,gBACR,OAAO,CAAC,KAAK,kBACX,OAAO,CAAC,OAAO,mBACd,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,mBACpC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EACjE,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,kCAAe,EAC5B,OAAO,EAAE,OAAO,CAAC,OAAO,YAExB,uBAAC,iBAAiB,IAAC,IAAI,EAAE,OAAO,CAAC,IAAI,GAAI,GAClC,EACR,OAAO,CAAC,QAAQ,IACb,CACP,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,MAA8B,EAAE,EAAE;QACzD,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,CAAC,CAAC;QAC/D,MAAM,IAAI,GAAG,oCAAgB,CAAC,MAAM,IAAI,SAAS,CAAC,CAAC;QACnD,MAAM,QAAQ,GAAG,IAAI,KAAK,SAAS,CAAC;QAEpC,OAAO,CACL,iCAAK,SAAS,EAAE,gBAAgB,EAAE,GAAG,EAAE,OAAO,CAAC,SAAS,CAAC,aACvD,oCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAA,gBAAE,EACX,qBAAqB,EACrB,CAAC,MAAM,IAAI,QAAQ,CAAC,IAAI,cAAc,CACvC,gBACW,IAAI,mBACF,SAAS,mBACR,QAAQ,EACvB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,kCAAe,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,SAAS,CAAC,aAEpC,IAAI,EACL,gCACE,SAAS,EAAC,cAAc,EACxB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,cAAc,iBACP,MAAM,YAElB,iCAAM,CAAC,EAAC,aAAa,GAAG,GACpB,IACC,EACR,QAAQ,IAAI,CACX,gCAAK,SAAS,EAAE,qBAAqB,EAAE,IAAI,EAAC,SAAS,YAClD,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,mCAEE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,mBACE,KAAK,KAAK,MAAM,EAC/B,SAAS,EAAE,IAAA,gBAAE,EACX,qBAAqB,EACrB,KAAK,KAAK,MAAM,IAAI,uBAAuB,CAC5C,EACD,WAAW,EAAE,kCAAe,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,YAEjD,oCAAgB,CAAC,KAAK,CAAC,IAXnB,KAAK,CAYH,CACV,CAAC,GACE,CACP,IACG,CACP,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,IAA8B,EAAE,EAAE;QACpD,IAAI,OAAO,IAAI,KAAK,QAAQ;YAAE,OAAO,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEnE,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;YACpB,OAAO,UAAU,CAAC;gBAChB,KAAK,EAAE,KAAK,CAAC,IAAI;oBACf,CAAC,CAAC,oCAAgB,CAAC,UAAU;oBAC7B,CAAC,CAAC,oCAAgB,CAAC,UAAU;gBAC/B,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;gBACpC,MAAM,EAAE,KAAK,CAAC,IAAI,IAAI,IAAI,KAAK,MAAM;gBACrC,KAAK,EAAE,MAAM;gBACb,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;wBACf,OAAO,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;wBAE5B,OAAO;oBACT,CAAC;oBAED,eAAe,CAAC,eAAe,EAAE,CAAC,CAAC;oBACnC,WAAW,CAAC,MAAM,CAAC,CAAC;gBACtB,CAAC;gBACD,QAAQ,EAAE,IAAI,KAAK,MAAM,IAAI,CAC3B,uBAAC,yCAAsB,IACrB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,CAAC,GACtD,CACH;aACF,CAAC,CAAC;QACL,CAAC;QAED,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;YACrB,OAAO,UAAU,CAAC;gBAChB,KAAK,EAAE,oCAAgB,CAAC,WAAW;gBACnC,IAAI,EAAE,OAAO;gBACb,MAAM,EAAE,IAAI,KAAK,OAAO;gBACxB,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC;gBACnC,QAAQ,EAAE,IAAI,KAAK,OAAO,IAAI,CAC5B,uBAAC,0CAAuB,IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,CAAC,GACzD,CACH;aACF,CAAC,CAAC;QACL,CAAC;QAED,IAAI,IAAI,KAAK,YAAY,IAAI,IAAI,KAAK,kBAAkB,EAAE,CAAC;YACzD,OAAO,UAAU,CAAC;gBAChB,KAAK,EAAE,oCAAgB,CAAC,IAAI,CAAC;gBAC7B,IAAI,EAAE,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY;gBACzD,MAAM,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,IAAI,KAAK,IAAI;gBACtC,KAAK,EAAE,IAAI;gBACX,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC;gBAChC,QAAQ,EAAE,IAAI,KAAK,IAAI,IAAI,CACzB,uBAAC,0CAAuB,IACtB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,EACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAClE,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAC5D,CACH;aACF,CAAC,CAAC;QACL,CAAC;QAED,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAEtC,OAAO,UAAU,CAAC;YAChB,KAAK,EAAE,oCAAgB,CAAC,IAAI,CAAC;YAC7B,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,OAAO;YACf,OAAO;YACP,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;SACjD,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,gCAAK,SAAS,EAAE,gBAAgB,YAC7B,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE,CACjC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,CAC7B,wBAAC,gBAAQ,eACN,UAAU,CAAC,IAAI,CAAC,EAChB,SAAS,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;oBAC7B,UAAU,KAAK,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CACnC,gCACE,IAAI,EAAC,WAAW,sBACC,UAAU,EAC3B,SAAS,EAAE,iBAAiB,GAC5B,CACH,KATU,GAAG,UAAU,IAAI,SAAS,EAAE,CAUhC,CACZ,CAAC,CACH,GACG,CACP,CAAC;AACJ,CAAC"}

package/src/lib/components/input/long-text/rich-text-popups.d.ts

@@ -0,0 +1,44 @@
+import type { MouseEvent } from 'react';
+import { SmartRichTextColorKind } from './rich-text-toolbar';
+/** Keeps the focus (and so the selection) in the editor on a press. */
+export declare const keepEditorFocus: (e: MouseEvent) => void;
+export interface SmartRichTextLink {
+    href: string;
+    text: string;
+    openInNewTab: boolean;
+}
+/**
+ * The link popup of the menu (the `ngx-link` form): URL, text (the selected
+ * text, locked, when there is one) and whether the link opens in a new tab.
+ * Not a `<form>`: the field usually sits in one.
+ */
+export declare function SmartRichTextLinkPopup({ selectedText, onInsert, }: {
+    selectedText: string;
+    onInsert: (link: SmartRichTextLink) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export interface SmartRichTextImage {
+    src: string;
+    alt: string;
+    title: string;
+}
+/**
+ * The image popup of the menu (the `ngx-image` form): the image URL, its
+ * alternative text and title.
+ */
+export declare function SmartRichTextImagePopup({ onInsert, }: {
+    onInsert: (image: SmartRichTextImage) => void;
+}): import("react/jsx-runtime").JSX.Element;
+/** Black or white, whichever reads better on `hex` (as `ngx-editor`). */
+export declare function getContrastYIQ(hex: string): 'black' | 'white';
+/**
+ * The colour popup of the menu (the `ngx-color-picker` of `ngx-editor`): the
+ * presets in rows of 8, the colour of the selection checked, and a button
+ * removing that colour.
+ */
+export declare function SmartRichTextColorPopup({ kind, active, onSelect, onRemove, }: {
+    kind: SmartRichTextColorKind;
+    /** The colour of the selection (`#rrggbb`), if any. */
+    active: string | null;
+    onSelect: (color: string) => void;
+    onRemove: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/input/long-text/rich-text-popups.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.keepEditorFocus = void 0;
+exports.SmartRichTextLinkPopup = SmartRichTextLinkPopup;
+exports.SmartRichTextImagePopup = SmartRichTextImagePopup;
+exports.getContrastYIQ = getContrastYIQ;
+exports.SmartRichTextColorPopup = SmartRichTextColorPopup;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const rich_text_toolbar_1 = require("./rich-text-toolbar");
+const class_names_1 = require("../../../utils/class-names");
+const POPUP_CLASSES = 'smart:absolute smart:left-0 smart:top-full smart:z-10 smart:mt-0.5 smart:min-w-48 smart:rounded-sm smart:bg-white smart:p-2 smart:text-sm smart:text-gray-900 smart:shadow-md smart:dark:bg-gray-800 smart:dark:text-white';
+const FORM_GROUP_CLASSES = 'smart:mb-2 smart:flex smart:flex-col';
+const LABEL_CLASSES = 'smart:mb-0.5 smart:text-xs';
+const INPUT_CLASSES = 'smart:rounded-sm smart:border smart:border-gray-300 smart:bg-white smart:px-1 smart:py-0.5 smart:text-sm smart:text-gray-900 smart:dark:border-white/10 smart:dark:bg-white/5 smart:dark:text-white smart:disabled:opacity-50';
+const ERROR_CLASSES = 'smart:text-xs smart:text-red-600 smart:dark:text-red-400';
+const SUBMIT_CLASSES = 'smart:rounded-md smart:bg-indigo-600 smart:px-2.5 smart:py-1.5 smart:text-sm smart:font-semibold smart:text-white smart:hover:bg-indigo-500 smart:disabled:opacity-50 smart:disabled:pointer-events-none';
+const COLOR_CLASSES = 'smart:size-6 smart:shrink-0 smart:rounded-md smart:border-none smart:text-xs smart:focus-visible:outline-1 smart:focus-visible:outline-offset-1 smart:focus-visible:outline-blue-400';
+const REMOVE_CLASSES = 'smart:mt-1.5 smart:rounded-md smart:border smart:border-gray-300 smart:px-2 smart:py-1 smart:text-sm smart:hover:bg-gray-100 smart:dark:border-white/10 smart:dark:hover:bg-white/10 smart:disabled:opacity-50 smart:disabled:pointer-events-none';
+/** Keeps the focus (and so the selection) in the editor on a press. */
+const keepEditorFocus = (e) => e.preventDefault();
+exports.keepEditorFocus = keepEditorFocus;
+/** Runs `submit` on Enter, without submitting a surrounding form. */
+const onEnter = (submit) => (e) => {
+    if (e.key !== 'Enter')
+        return;
+    e.preventDefault();
+    submit();
+};
+/**
+ * The link popup of the menu (the `ngx-link` form): URL, text (the selected
+ * text, locked, when there is one) and whether the link opens in a new tab.
+ * Not a `<form>`: the field usually sits in one.
+ */
+function SmartRichTextLinkPopup({ selectedText, onInsert, }) {
+    const id = (0, react_1.useId)();
+    const [href, setHref] = (0, react_1.useState)('');
+    const [text, setText] = (0, react_1.useState)(selectedText);
+    const [openInNewTab, setOpenInNewTab] = (0, react_1.useState)(true);
+    const [hrefTouched, setHrefTouched] = (0, react_1.useState)(false);
+    const [textTouched, setTextTouched] = (0, react_1.useState)(false);
+    const hrefValid = rich_text_toolbar_1.RICH_TEXT_LINK_PATTERN.test(href);
+    const valid = hrefValid && !!text;
+    const insert = () => {
+        if (valid)
+            onInsert({ href, text, openInNewTab });
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { role: "dialog", "aria-label": rich_text_toolbar_1.RICH_TEXT_LABELS.insertLink, className: POPUP_CLASSES, children: [(0, jsx_runtime_1.jsxs)("div", { className: FORM_GROUP_CLASSES, children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: `${id}-url`, className: LABEL_CLASSES, children: rich_text_toolbar_1.RICH_TEXT_LABELS.url }), (0, jsx_runtime_1.jsx)("input", { id: `${id}-url`, type: "url", autoComplete: "off", className: INPUT_CLASSES, value: href, onChange: (e) => setHref(e.target.value), onBlur: () => setHrefTouched(true), onKeyDown: onEnter(insert) }), hrefTouched && href && !hrefValid && ((0, jsx_runtime_1.jsx)("div", { className: ERROR_CLASSES, children: rich_text_toolbar_1.RICH_TEXT_LABELS.enterValidUrl }))] }), (0, jsx_runtime_1.jsxs)("div", { className: FORM_GROUP_CLASSES, children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: `${id}-text`, className: LABEL_CLASSES, children: rich_text_toolbar_1.RICH_TEXT_LABELS.text }), (0, jsx_runtime_1.jsx)("input", { id: `${id}-text`, type: "text", autoComplete: "off", className: INPUT_CLASSES, value: text, disabled: !!selectedText, onChange: (e) => setText(e.target.value), onBlur: () => setTextTouched(true), onKeyDown: onEnter(insert) }), textTouched && !text && ((0, jsx_runtime_1.jsx)("div", { className: ERROR_CLASSES, children: rich_text_toolbar_1.RICH_TEXT_LABELS.required }))] }), (0, jsx_runtime_1.jsx)("div", { className: FORM_GROUP_CLASSES, children: (0, jsx_runtime_1.jsxs)("label", { className: "smart:flex smart:items-center smart:gap-x-1", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: openInNewTab, onChange: (e) => setOpenInNewTab(e.target.checked) }), rich_text_toolbar_1.RICH_TEXT_LABELS.openInNewTab] }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: SUBMIT_CLASSES, disabled: !valid, onClick: insert, children: rich_text_toolbar_1.RICH_TEXT_LABELS.insert })] }));
+}
+/**
+ * The image popup of the menu (the `ngx-image` form): the image URL, its
+ * alternative text and title.
+ */
+function SmartRichTextImagePopup({ onInsert, }) {
+    const id = (0, react_1.useId)();
+    const [src, setSrc] = (0, react_1.useState)('');
+    const [alt, setAlt] = (0, react_1.useState)('');
+    const [title, setTitle] = (0, react_1.useState)('');
+    const [srcTouched, setSrcTouched] = (0, react_1.useState)(false);
+    const valid = rich_text_toolbar_1.RICH_TEXT_IMAGE_PATTERN.test(src);
+    const insert = () => {
+        if (valid)
+            onInsert({ src, alt, title });
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { role: "dialog", "aria-label": rich_text_toolbar_1.RICH_TEXT_LABELS.insertImage, className: POPUP_CLASSES, children: [(0, jsx_runtime_1.jsxs)("div", { className: FORM_GROUP_CLASSES, children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: `${id}-url`, className: LABEL_CLASSES, children: rich_text_toolbar_1.RICH_TEXT_LABELS.url }), (0, jsx_runtime_1.jsx)("input", { id: `${id}-url`, type: "url", autoComplete: "off", className: INPUT_CLASSES, value: src, onChange: (e) => setSrc(e.target.value), onBlur: () => setSrcTouched(true), onKeyDown: onEnter(insert) }), srcTouched && src && !valid && ((0, jsx_runtime_1.jsx)("div", { className: ERROR_CLASSES, children: rich_text_toolbar_1.RICH_TEXT_LABELS.enterValidUrl }))] }), (0, jsx_runtime_1.jsxs)("div", { className: FORM_GROUP_CLASSES, children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: `${id}-alt`, className: LABEL_CLASSES, children: rich_text_toolbar_1.RICH_TEXT_LABELS.altText }), (0, jsx_runtime_1.jsx)("input", { id: `${id}-alt`, type: "text", autoComplete: "off", className: INPUT_CLASSES, value: alt, onChange: (e) => setAlt(e.target.value), onKeyDown: onEnter(insert) })] }), (0, jsx_runtime_1.jsxs)("div", { className: FORM_GROUP_CLASSES, children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: `${id}-title`, className: LABEL_CLASSES, children: rich_text_toolbar_1.RICH_TEXT_LABELS.title }), (0, jsx_runtime_1.jsx)("input", { id: `${id}-title`, type: "text", autoComplete: "off", className: INPUT_CLASSES, value: title, onChange: (e) => setTitle(e.target.value), onKeyDown: onEnter(insert) })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: SUBMIT_CLASSES, disabled: !valid, onClick: insert, children: rich_text_toolbar_1.RICH_TEXT_LABELS.insert })] }));
+}
+/** Black or white, whichever reads better on `hex` (as `ngx-editor`). */
+function getContrastYIQ(hex) {
+    const color = hex.replace('#', '');
+    const r = parseInt(color.substring(0, 2), 16);
+    const g = parseInt(color.substring(2, 4), 16);
+    const b = parseInt(color.substring(4, 6), 16);
+    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+    return yiq >= 128 ? 'black' : 'white';
+}
+const COLOR_ROWS = rich_text_toolbar_1.RICH_TEXT_COLOR_PRESETS.reduce((rows, color, index) => {
+    if (index % 8 === 0)
+        rows.push([]);
+    rows[rows.length - 1].push(color);
+    return rows;
+}, []);
+/**
+ * The colour popup of the menu (the `ngx-color-picker` of `ngx-editor`): the
+ * presets in rows of 8, the colour of the selection checked, and a button
+ * removing that colour.
+ */
+function SmartRichTextColorPopup({ kind, active, onSelect, onRemove, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { role: "dialog", "aria-label": rich_text_toolbar_1.RICH_TEXT_LABELS[kind], className: (0, class_names_1.cn)(POPUP_CLASSES, 'smart:w-57.5'), children: [COLOR_ROWS.map((row, index) => ((0, jsx_runtime_1.jsx)("div", { className: (0, class_names_1.cn)('smart:flex smart:justify-between', index > 0 && 'smart:mt-1.5'), children: row.map((color) => ((0, jsx_runtime_1.jsx)("button", { type: "button", title: color, className: COLOR_CLASSES, style: { backgroundColor: color, color: getContrastYIQ(color) }, onMouseDown: exports.keepEditorFocus, onClick: () => onSelect(color), children: color === active ? '✔' : null }, color))) }, row[0]))), (0, jsx_runtime_1.jsx)("button", { type: "button", className: REMOVE_CLASSES, disabled: !active, onMouseDown: exports.keepEditorFocus, onClick: onRemove, children: rich_text_toolbar_1.RICH_TEXT_LABELS.remove })] }));
+}
+//# sourceMappingURL=rich-text-popups.js.map

package/src/lib/components/input/long-text/rich-text-popups.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-text-popups.js","sourceRoot":"","sources":["../../../../../../../../../packages/shared/react/src/lib/components/input/long-text/rich-text-popups.tsx"],"names":[],"mappings":"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"}

package/src/lib/components/input/long-text/rich-text-toolbar.d.ts

@@ -0,0 +1,69 @@
+/** The menu items that toggle a format of the selection. */
+export type SmartRichTextToggle = 'bold' | 'italic' | 'underline' | 'strike' | 'code' | 'blockquote' | 'ordered_list' | 'bullet_list' | 'align_left' | 'align_center' | 'align_right' | 'align_justify';
+export type SmartRichTextHeading = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type SmartRichTextColorKind = 'text_color' | 'background_color';
+/** A menu item, named as in the `ngx-editor` `Toolbar`. */
+export type SmartRichTextToolbarItem = SmartRichTextToggle | SmartRichTextColorKind | 'link' | 'image' | {
+    heading: SmartRichTextHeading[];
+};
+/** Groups of menu items, separated in the menu bar. */
+export type SmartRichTextToolbar = SmartRichTextToolbarItem[][];
+/**
+ * The menu of the Angular `InputLongTextComponent` (its desktop toolbar; the
+ * mobile one was never shown, as the Angular `HardwareService` always reports
+ * a desktop).
+ */
+export declare const LONG_TEXT_TOOLBAR: SmartRichTextToolbar;
+/**
+ * The texts of the menu: the default `ngx-editor` locals, which the Angular
+ * field used as is (they are not translation keys).
+ */
+export declare const RICH_TEXT_LABELS: {
+    readonly bold: "Bold";
+    readonly italic: "Italic";
+    readonly code: "Code";
+    readonly underline: "Underline";
+    readonly strike: "Strike";
+    readonly blockquote: "Blockquote";
+    readonly bullet_list: "Bullet List";
+    readonly ordered_list: "Ordered List";
+    readonly heading: "Heading";
+    readonly h1: "Header 1";
+    readonly h2: "Header 2";
+    readonly h3: "Header 3";
+    readonly h4: "Header 4";
+    readonly h5: "Header 5";
+    readonly h6: "Header 6";
+    readonly align_left: "Left Align";
+    readonly align_center: "Center Align";
+    readonly align_right: "Right Align";
+    readonly align_justify: "Justify";
+    readonly text_color: "Text Color";
+    readonly background_color: "Background Color";
+    readonly insertLink: "Insert Link";
+    readonly removeLink: "Remove Link";
+    readonly insertImage: "Insert Image";
+    readonly url: "URL";
+    readonly text: "Text";
+    readonly openInNewTab: "Open in new tab";
+    readonly insert: "Insert";
+    readonly altText: "Alt Text";
+    readonly title: "Title";
+    readonly remove: "Remove";
+    readonly enterValidUrl: "Please enter a valid URL";
+    readonly required: "This is required";
+};
+/**
+ * The URLs the link form accepts: the `ngx-editor` link validation pattern,
+ * matched whole. (Angular's `Validators.pattern` anchored only the ends of
+ * its alternation, which let `javascript:` URLs ending in a `mailto:` part
+ * through.)
+ */
+export declare const RICH_TEXT_LINK_PATTERN: RegExp;
+/** The URLs the image form accepts: the `ngx-editor` image pattern. */
+export declare const RICH_TEXT_IMAGE_PATTERN: RegExp;
+/** The `ngx-editor` colour presets, shown in rows of 8. */
+export declare const RICH_TEXT_COLOR_PRESETS: string[];
+export type SmartRichTextIconName = SmartRichTextToggle | 'link' | 'unlink' | 'image' | 'text_color' | 'color_fill';
+/** The paths of the `ngx-editor` (Material) icons, on a 24x24 view box. */
+export declare const RICH_TEXT_ICONS: Record<SmartRichTextIconName, string[]>;