@xplor-education/core-stencil-components 3.1.2 → 3.1.3

package/dist/collection/components/xplor-rich-text-editor/xplor-rich-text-editor.js

@@ -0,0 +1,800 @@
+import { Host, h, } from "@stencil/core";
+import { Editor } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import Underline from "@tiptap/extension-underline";
+import Link from "@tiptap/extension-link";
+import Placeholder from "@tiptap/extension-placeholder";
+import CharacterCount from "@tiptap/extension-character-count";
+import { convertLegacySlateJsonToHtml, } from "../../utils/slate-legacy-converter";
+let rteIdCounter = 0;
+export class XplorRichTextEditor {
+    constructor() {
+        this.editor = null;
+        this.editorId = `xplor-rte-${++rteIdCounter}`;
+        this.toolbarId = `${this.editorId}-toolbar`;
+        this.charCountId = `${this.editorId}-char-count`;
+        this.labelId = `${this.editorId}-label`;
+        // -------------------------------------------------------------------------
+        // Props
+        // -------------------------------------------------------------------------
+        /**
+         * HTML string content of the editor. Supports two-way binding via xplorChange.
+         */
+        this.value = '';
+        /**
+         * Stringified Slate 0.42.x document JSON for backwards compatibility.
+         * When supplied, this takes precedence over `value` as the initial content.
+         */
+        this.legacySlateDocument = '';
+        /**
+         * Placeholder text shown when the editor is empty.
+         */
+        this.placeholder = 'Start typing…';
+        /**
+         * Visible label above the editor.
+         */
+        this.label = '';
+        /**
+         * Marks the field as required. Adds an asterisk to the label.
+         */
+        this.required = false;
+        /**
+         * Whether the editor is in read-only mode. Content is visible but not editable.
+         * The toolbar is hidden in this mode.
+         */
+        this.readonly = false;
+        /**
+         * Whether the editor is disabled. Content cannot be edited or interacted with.
+         */
+        this.disabled = false;
+        /**
+         * Accessible label for the editor region. Used when no `label` prop or
+         * `ariaLabelledBy` is provided.
+         */
+        this.ariaLabel = '';
+        /**
+         * ID of an external element that labels this editor (aria-labelledby).
+         */
+        this.ariaLabelledBy = '';
+        /**
+         * Controls which toolbar buttons are rendered.
+         * - `full`    — All formatting options (default)
+         * - `minimal` — Text style buttons only (bold, italic, underline, strike, code)
+         * - `none`    — No toolbar; editor acts as a plain rich-text input
+         */
+        this.toolbar = 'full';
+        /**
+         * Maximum character count. When set, a character counter is shown below the editor.
+         */
+        this.maxLength = undefined;
+        /**
+         * Validation error message. Turns the editor border red and shows the message below.
+         */
+        this.error = '';
+        /**
+         * Helper text shown below the editor when there is no error.
+         */
+        this.helperText = '';
+        // -------------------------------------------------------------------------
+        // Internal state
+        // -------------------------------------------------------------------------
+        /** Incremented on every TipTap transaction to force toolbar re-render */
+        this.editorVersion = 0;
+        this.isFocused = false;
+        this.showLinkPopover = false;
+        this.linkUrl = '';
+        this.charCount = 0;
+        this.handleLinkButtonClick = (event) => {
+            event.preventDefault();
+            if (!this.editor || this.disabled || this.readonly)
+                return;
+            if (this.editor.isActive('link')) {
+                // Remove existing link
+                this.editor.chain().focus().extendMarkRange('link').unsetLink().run();
+            }
+            else {
+                // Pre-populate URL input with existing href if cursor is on a link
+                this.linkUrl = this.editor.getAttributes('link').href || '';
+                this.showLinkPopover = !this.showLinkPopover;
+            }
+        };
+        this.handleLinkSubmit = (event) => {
+            event.preventDefault();
+            if (!this.editor)
+                return;
+            const url = this.linkUrl.trim();
+            if (url) {
+                this.editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
+            }
+            else {
+                this.editor.chain().focus().extendMarkRange('link').unsetLink().run();
+            }
+            this.showLinkPopover = false;
+            this.linkUrl = '';
+        };
+        this.handleLinkCancel = () => {
+            this.showLinkPopover = false;
+            this.linkUrl = '';
+        };
+        this.handleLinkKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                this.showLinkPopover = false;
+                this.linkUrl = '';
+            }
+        };
+    }
+    // -------------------------------------------------------------------------
+    // Lifecycle
+    // -------------------------------------------------------------------------
+    componentDidLoad() {
+        this.initEditor();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.editor = null;
+    }
+    // -------------------------------------------------------------------------
+    // Watchers
+    // -------------------------------------------------------------------------
+    handleValueChange(newValue) {
+        if (!this.editor)
+            return;
+        // Avoid a feedback loop — only sync if externally changed
+        if (this.editor.getHTML() !== newValue) {
+            this.editor.commands.setContent(newValue || '', false);
+        }
+    }
+    handleReadonlyChange() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.setEditable(!this.readonly && !this.disabled);
+    }
+    handleDisabledChange() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.setEditable(!this.readonly && !this.disabled);
+    }
+    handleLegacyDocChange(newValue) {
+        if (!newValue || !this.editor)
+            return;
+        const html = convertLegacySlateJsonToHtml(newValue);
+        this.editor.commands.setContent(html, false);
+    }
+    // -------------------------------------------------------------------------
+    // Public methods
+    // -------------------------------------------------------------------------
+    /**
+     * Returns the current content as an HTML string.
+     */
+    async getHTML() {
+        var _a, _b;
+        return (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getHTML()) !== null && _b !== void 0 ? _b : '';
+    }
+    /**
+     * Returns the current content as plain text (all markup stripped).
+     */
+    async getText() {
+        var _a, _b;
+        return (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getText()) !== null && _b !== void 0 ? _b : '';
+    }
+    /**
+     * Replaces the editor content with the provided HTML string.
+     */
+    async setContent(html) {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.commands.setContent(html, false);
+    }
+    /**
+     * Clears all content from the editor.
+     */
+    async clearContent() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.commands.clearContent(true);
+    }
+    /**
+     * Programmatically focuses the editor.
+     */
+    async focusEditor() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.commands.focus();
+    }
+    // -------------------------------------------------------------------------
+    // Private: Editor initialisation
+    // -------------------------------------------------------------------------
+    initEditor() {
+        var _a, _b, _c;
+        // Resolve initial content — legacy doc takes precedence over value
+        let initialContent = '';
+        if (this.legacySlateDocument) {
+            initialContent = convertLegacySlateJsonToHtml(this.legacySlateDocument);
+        }
+        else if (this.value) {
+            initialContent = this.value;
+        }
+        const extensions = [
+            StarterKit,
+            Underline,
+            Link.configure({ openOnClick: false, autolink: true }),
+            Placeholder.configure({ placeholder: this.placeholder }),
+        ];
+        if (this.maxLength != null) {
+            extensions.push(CharacterCount.configure({ limit: this.maxLength }));
+        }
+        this.editor = new Editor({
+            element: this.editorEl,
+            extensions,
+            content: initialContent,
+            editable: !this.readonly && !this.disabled,
+            onUpdate: ({ editor }) => {
+                var _a, _b, _c;
+                const html = editor.getHTML();
+                this.value = html;
+                if (this.maxLength != null) {
+                    this.charCount = (_c = (_b = (_a = editor.storage) === null || _a === void 0 ? void 0 : _a.characterCount) === null || _b === void 0 ? void 0 : _b.characters()) !== null && _c !== void 0 ? _c : 0;
+                }
+                this.xplorChange.emit({
+                    html,
+                    text: editor.getText(),
+                    isEmpty: editor.isEmpty,
+                });
+            },
+            onFocus: () => {
+                this.isFocused = true;
+                this.xplorFocus.emit();
+            },
+            onBlur: () => {
+                this.isFocused = false;
+                this.showLinkPopover = false;
+                this.xplorBlur.emit();
+            },
+            // Increment editorVersion on every transaction + selection change so the
+            // toolbar re-renders with up-to-date isActive() states.
+            onTransaction: () => {
+                this.editorVersion += 1;
+            },
+            onSelectionUpdate: () => {
+                this.editorVersion += 1;
+            },
+        });
+        // Set initial char count
+        if (this.maxLength != null) {
+            this.charCount = (_c = (_b = (_a = this.editor.storage) === null || _a === void 0 ? void 0 : _a.characterCount) === null || _b === void 0 ? void 0 : _b.characters()) !== null && _c !== void 0 ? _c : 0;
+        }
+    }
+    // -------------------------------------------------------------------------
+    // Private: Toolbar command helpers
+    // -------------------------------------------------------------------------
+    execCommand(command, event) {
+        event.preventDefault();
+        if (!this.editor || this.disabled || this.readonly)
+            return;
+        command();
+    }
+    // -------------------------------------------------------------------------
+    // Private: Render helpers
+    // -------------------------------------------------------------------------
+    renderToolbarButton(label, isActive, onClick, iconContent) {
+        return (h("button", { type: "button", class: {
+                'xplor-rte__toolbar-btn': true,
+                'xplor-rte__toolbar-btn--active': isActive,
+            }, "aria-label": label, "aria-pressed": String(isActive), title: label, disabled: this.disabled || this.readonly, onClick: onClick }, iconContent));
+    }
+    renderLinkPopover() {
+        return (h("div", { class: "xplor-rte__link-popover", role: "dialog", "aria-label": "Insert link", "aria-modal": "false" }, h("form", { onSubmit: this.handleLinkSubmit, class: "xplor-rte__link-form" }, h("label", { class: "xplor-rte__link-label", htmlFor: `${this.editorId}-link-input` }, "URL"), h("input", { id: `${this.editorId}-link-input`, class: "xplor-rte__link-input", type: "url", placeholder: "https://example.com", value: this.linkUrl, onInput: (e) => {
+                this.linkUrl = e.target.value;
+            }, onKeyDown: this.handleLinkKeyDown, autoFocus: true }), h("div", { class: "xplor-rte__link-actions" }, h("button", { type: "submit", class: "xplor-rte__link-apply" }, "Apply"), h("button", { type: "button", class: "xplor-rte__link-cancel", onClick: this.handleLinkCancel }, "Cancel")))));
+    }
+    renderToolbar() {
+        if (this.toolbar === 'none' || !this.editor)
+            return null;
+        const e = this.editor;
+        const isMinimal = this.toolbar === 'minimal';
+        // --- Text style buttons (shared between full and minimal) ---
+        const textStyleGroup = (h("div", { class: "xplor-rte__toolbar-group", role: "group", "aria-label": "Text style" }, this.renderToolbarButton('Bold (Ctrl+B)', e.isActive('bold'), (ev) => this.execCommand(() => e.chain().focus().toggleBold().run(), ev), 
+        // Bold icon
+        h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M15.6 11.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5S13.83 9.5 13 9.5h-3V6.5zm3.5 9H10V13h3.5c.83 0 1.5.67 1.5 1.5S14.33 15.5 13.5 15.5z" }))), this.renderToolbarButton('Italic (Ctrl+I)', e.isActive('italic'), (ev) => this.execCommand(() => e.chain().focus().toggleItalic().run(), ev), 
+        // Italic icon
+        h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" }))), this.renderToolbarButton('Underline (Ctrl+U)', e.isActive('underline'), (ev) => this.execCommand(() => e.chain().focus().toggleUnderline().run(), ev), 
+        // Underline icon
+        h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z" }))), this.renderToolbarButton('Strikethrough', e.isActive('strike'), (ev) => this.execCommand(() => e.chain().focus().toggleStrike().run(), ev), 
+        // Strikethrough icon
+        h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M6.85 7.08C6.85 4.37 9.45 3 12.24 3c1.64 0 3 .49 3.9 1.28.77.65 1.46 1.73 1.46 3.24h-3.01c0-.31-.05-.59-.15-.85-.29-.86-1.2-1.28-2.25-1.28-1.86 0-2.34.92-2.34 1.69 0 .48.25.88.74 1.21L13.25 9H7.39c-.21-.28-.54-.71-.54-1.92zM21 12v-2H3v2h9.62c1.15.45 1.96.75 1.96 1.97 0 1-.81 1.67-2.28 1.67-1.54 0-2.93-.54-2.93-2.51H7.4c0 1.97.93 5.15 5.85 5.15 3.47 0 5.37-1.96 5.37-4.15 0-.87-.23-1.58-.62-2.13z" }))), this.renderToolbarButton('Inline code', e.isActive('code'), (ev) => this.execCommand(() => e.chain().focus().toggleCode().run(), ev), 
+        // Code icon
+        h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" })))));
+        if (isMinimal) {
+            return (h("div", { id: this.toolbarId, class: "xplor-rte__toolbar", role: "toolbar", "aria-label": "Text formatting", "aria-controls": this.editorId }, textStyleGroup));
+        }
+        return (h("div", { id: this.toolbarId, class: "xplor-rte__toolbar", role: "toolbar", "aria-label": "Text formatting", "aria-controls": this.editorId }, textStyleGroup, h("div", { class: "xplor-rte__toolbar-divider", "aria-hidden": "true" }), h("div", { class: "xplor-rte__toolbar-group", role: "group", "aria-label": "Headings" }, [1, 2, 3].map((level) => this.renderToolbarButton(`Heading ${level}`, e.isActive('heading', { level }), (ev) => this.execCommand(() => e.chain().focus().toggleHeading({ level }).run(), ev), h("span", { class: "xplor-rte__toolbar-text", "aria-hidden": "true" }, "H", level)))), h("div", { class: "xplor-rte__toolbar-divider", "aria-hidden": "true" }), h("div", { class: "xplor-rte__toolbar-group", role: "group", "aria-label": "Lists" }, this.renderToolbarButton('Bullet list', e.isActive('bulletList'), (ev) => this.execCommand(() => e.chain().focus().toggleBulletList().run(), ev), 
+        // Bullet list icon
+        h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" }))), this.renderToolbarButton('Numbered list', e.isActive('orderedList'), (ev) => this.execCommand(() => e.chain().focus().toggleOrderedList().run(), ev), 
+        // Ordered list icon
+        h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" })))), h("div", { class: "xplor-rte__toolbar-divider", "aria-hidden": "true" }), h("div", { class: "xplor-rte__toolbar-group", role: "group", "aria-label": "Block elements" }, this.renderToolbarButton('Blockquote', e.isActive('blockquote'), (ev) => this.execCommand(() => e.chain().focus().toggleBlockquote().run(), ev), 
+        // Blockquote icon
+        h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z" }))), this.renderToolbarButton('Code block', e.isActive('codeBlock'), (ev) => this.execCommand(() => e.chain().focus().toggleCodeBlock().run(), ev), 
+        // Code block icon
+        h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.89 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z" })))), h("div", { class: "xplor-rte__toolbar-divider", "aria-hidden": "true" }), h("div", { class: "xplor-rte__toolbar-group", role: "group", "aria-label": "Insert and utilities" }, h("div", { class: "xplor-rte__link-wrapper" }, this.renderToolbarButton(e.isActive('link') ? 'Remove link' : 'Insert link', e.isActive('link'), this.handleLinkButtonClick, 
+        // Link icon
+        h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" }))), this.showLinkPopover && this.renderLinkPopover()), this.renderToolbarButton('Clear formatting', false, (ev) => this.execCommand(() => e.chain().focus().clearNodes().unsetAllMarks().run(), ev), 
+        // Clear formatting icon
+        h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M6 19h4v-2H6v2zM3 5v2h18V5H3zm3 9h7v-2H6v2zm10.88-3.36L18.3 9.2l1.41 1.41-1.42 1.43 1.42 1.41-1.41 1.41-1.42-1.41-1.41 1.41-1.41-1.41 1.41-1.41-1.41-1.43 1.41-1.41 1.41 1.43z" }))))));
+    }
+    // -------------------------------------------------------------------------
+    // Render
+    // -------------------------------------------------------------------------
+    render() {
+        const hasError = !!this.error;
+        const showCharCount = this.maxLength != null;
+        const charCountDescribedBy = showCharCount ? this.charCountId : undefined;
+        const describedBy = charCountDescribedBy || undefined;
+        // Resolve aria-label / aria-labelledby precedence:
+        // 1. External ariaLabelledBy prop
+        // 2. Internal label element (rendered via labelId)
+        // 3. ariaLabel prop (falls back to default)
+        const effectiveLabelledBy = this.ariaLabelledBy || (this.label ? this.labelId : undefined);
+        const effectiveAriaLabel = !effectiveLabelledBy
+            ? this.ariaLabel || 'Rich text editor'
+            : undefined;
+        const containerClasses = {
+            'xplor-rte': true,
+            'xplor-rte--focused': this.isFocused,
+            'xplor-rte--disabled': this.disabled,
+            'xplor-rte--readonly': this.readonly,
+            'xplor-rte--error': hasError,
+            'xplor-rte--has-toolbar': this.toolbar !== 'none',
+        };
+        return (h(Host, { key: 'fc096cb8ba8e4233e93412ec2ed671ffbd4b9184' }, this.label && (h("label", { key: '1784f79f9d10ece709a295fbc3dc6e05c56e8416', class: "xplor-rte__label", id: this.labelId, htmlFor: this.editorId }, this.label, this.required && (h("span", { key: '9325636810f20e6799a0cbceb55332cbc73a1414', class: "xplor-rte__required", "aria-hidden": "true" }, ' ', "*")))), h("div", { key: '7ed8359ae6c211c550a14bd08556a82b70d2378c', class: containerClasses }, this.renderToolbar(), h("div", { key: '61f378b7850d9aa3f1f7e217f3458d105a37037a', class: "xplor-rte__content", id: this.editorId, ref: (el) => {
+                this.editorEl = el;
+            }, "aria-label": effectiveAriaLabel, "aria-labelledby": effectiveLabelledBy, "aria-multiline": "true", "aria-readonly": this.readonly ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": describedBy, "aria-invalid": hasError ? 'true' : undefined }), showCharCount && (h("div", { key: 'f3c58766396c34d1a7169621ca14ed77c7d7b5ef', id: this.charCountId, class: {
+                'xplor-rte__char-count': true,
+                'xplor-rte__char-count--limit': this.charCount >= this.maxLength,
+            }, role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.charCount, " / ", this.maxLength))), hasError && (h("div", { key: '55ea73de4fb0ed6a5aa907497cab92671f40ac7d', class: "xplor-rte__error", role: "alert", "aria-live": "assertive" }, this.error)), !hasError && this.helperText && (h("div", { key: '2356b00baa478796a842ad3a0c135d96ae4e5bcd', class: "xplor-rte__helper" }, this.helperText))));
+    }
+    static get is() { return "xplor-rich-text-editor"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-rich-text-editor.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-rich-text-editor.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML string content of the editor. Supports two-way binding via xplorChange."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "legacySlateDocument": {
+                "type": "string",
+                "attribute": "legacy-slate-document",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stringified Slate 0.42.x document JSON for backwards compatibility.\nWhen supplied, this takes precedence over `value` as the initial content."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "attribute": "placeholder",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text shown when the editor is empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Start typing\u2026'"
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible label above the editor."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "required": {
+                "type": "boolean",
+                "attribute": "required",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the field as required. Adds an asterisk to the label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the editor is in read-only mode. Content is visible but not editable.\nThe toolbar is hidden in this mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the editor is disabled. Content cannot be edited or interacted with."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "attribute": "aria-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the editor region. Used when no `label` prop or\n`ariaLabelledBy` is provided."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "ariaLabelledBy": {
+                "type": "string",
+                "attribute": "aria-labelled-by",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of an external element that labels this editor (aria-labelledby)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "toolbar": {
+                "type": "string",
+                "attribute": "toolbar",
+                "mutable": false,
+                "complexType": {
+                    "original": "'full' | 'minimal' | 'none'",
+                    "resolved": "\"full\" | \"minimal\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls which toolbar buttons are rendered.\n- `full`    \u2014 All formatting options (default)\n- `minimal` \u2014 Text style buttons only (bold, italic, underline, strike, code)\n- `none`    \u2014 No toolbar; editor acts as a plain rich-text input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'full'"
+            },
+            "maxLength": {
+                "type": "number",
+                "attribute": "max-length",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | undefined",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum character count. When set, a character counter is shown below the editor."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "error": {
+                "type": "string",
+                "attribute": "error",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Validation error message. Turns the editor border red and shows the message below."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "helperText": {
+                "type": "string",
+                "attribute": "helper-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text shown below the editor when there is no error."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "editorVersion": {},
+            "isFocused": {},
+            "showLinkPopover": {},
+            "linkUrl": {},
+            "charCount": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xplorChange",
+                "name": "xplorChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever the content changes.\nPayload: `{ html: string; text: string; isEmpty: boolean }`"
+                },
+                "complexType": {
+                    "original": "RteChangePayload",
+                    "resolved": "RteChangePayload",
+                    "references": {
+                        "RteChangePayload": {
+                            "location": "local",
+                            "path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-rich-text-editor/xplor-rich-text-editor.tsx",
+                            "id": "src/components/xplor-rich-text-editor/xplor-rich-text-editor.tsx::RteChangePayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "xplorFocus",
+                "name": "xplorFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the editor gains focus."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "xplorBlur",
+                "name": "xplorBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the editor loses focus."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getHTML": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Returns the current content as an HTML string.",
+                    "tags": []
+                }
+            },
+            "getText": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Returns the current content as plain text (all markup stripped).",
+                    "tags": []
+                }
+            },
+            "setContent": {
+                "complexType": {
+                    "signature": "(html: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "html",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Replaces the editor content with the provided HTML string.",
+                    "tags": []
+                }
+            },
+            "clearContent": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears all content from the editor.",
+                    "tags": []
+                }
+            },
+            "focusEditor": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically focuses the editor.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "readonly",
+                "methodName": "handleReadonlyChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleDisabledChange"
+            }, {
+                "propName": "legacySlateDocument",
+                "methodName": "handleLegacyDocChange"
+            }];
+    }
+}
+//# sourceMappingURL=xplor-rich-text-editor.js.map