@verbb/plugin-kit-web 2.0.15 → 2.0.17

package/dist/chunks/{pk-tiptap-editor-tG67Vegc.js → pk-tiptap-editor-CTz-yfHL.js}

@@ -1,24 +1,25 @@
 import { t as icons_exports } from "./icons-BR8JcQj2.js";
 import { a as query, i as property, o as state, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
-import "./pk-button-BWGDkuzc.js";
-import { t as PkFormAssociatedElement } from "./pk-form-associated-element-9M2NzOE2.js";
+import "./pk-button-BrH4u4Qr.js";
+import { t as PkFormAssociatedElement } from "./pk-form-associated-element-CCQALRGB.js";
 import { t as MirrorValidator } from "./mirror-validator-DCjNYrrx.js";
-import "./pk-checkbox-CvZwJZn_.js";
+import "./pk-checkbox-CfV1uDdC.js";
 import { t as formControlStyles } from "./form-control.styles-BQdimE5o.js";
 import { n as renderIconHtml } from "./render-Dvc3MHQR.js";
 import { i as uniqueId } from "./focus-aa5dlv8k.js";
-import "./pk-input-DDkIXOkt.js";
-import "./pk-dialog-BbEfvb0g.js";
-import "./pk-dropdown-item-BoZTGWMU.js";
-import "./pk-dropdown-menu-CfZc7dIz.js";
+import "./pk-input-CF_icEtR.js";
+import "./pk-dialog-VMQqLW1f.js";
+import "./pk-dropdown-item-D9OaG5o-.js";
+import "./pk-dropdown-menu-DW1wI8xQ.js";
+import "./pk-dropdown-label-CRNWMWQd.js";
 import "../components/dropdown-menu/pk-dropdown-separator.js";
-import "./pk-field-NL4KdFZC.js";
-import "./pk-tooltip-BoDq8YVe.js";
-import { i as createVariableTagDomNodeView, r as tiptapProseMirrorStyles } from "./tiptap.styles-ChAfyVi9.js";
+import "./pk-field-UAlMq6mQ.js";
+import "./pk-tooltip--QBV6puX.js";
+import { i as createVariableTagDomNodeView, r as tiptapProseMirrorStyles } from "./tiptap.styles-CPRows--.js";
 import { css, html, nothing } from "lit";
 import { unsafeSVG } from "lit/directives/unsafe-svg.js";
 import { Editor, getMarkRange, posToDOMRect } from "@tiptap/core";
-import { applyLinkToEditor, createTiptapExtensions, getCraftLinkOptions, getFatalTiptapContentError, getLinkEditState, getLinkOpenInNewTab, getLinkOptionsElementSiteId, getSelectedText, getToolbarGroupDefaultIcon, getToolbarGroupMenuItems, getToolbarGroupTriggerState, isFormattingToolbarPreset, isHeadingsOnlyToolbarPreset, isTiptapButtonActive, isToolbarButtonActive, normalizeContentArray, openCraftElementLinkSelector, parseToolbarConfig, runToolbarButton, toolbarIncludesButton, unsetLinkFromEditor, valueToContent } from "@verbb/plugin-kit-tiptap-core";
+import { applyLinkToEditor, createTiptapExtensions, getCraftLinkOptions, getFatalTiptapContentError, getLinkEditState, getLinkOpenInNewTab, getLinkOptionsElementSiteId, getRegisteredTiptapToolbarControl, getSelectedText, getToolbarGroupDefaultIcon, getToolbarGroupMenuItems, getToolbarGroupTriggerState, isFormattingToolbarPreset, isHeadingsOnlyToolbarPreset, isTiptapButtonActive, isToolbarButtonActive, normalizeContentArray, openCraftElementLinkSelector, parseToolbarConfig, resolveTiptapTextStyleToolbarConfig, runToolbarButton, toolbarIncludesButton, unsetLinkFromEditor, valueToContent } from "@verbb/plugin-kit-tiptap-core";
 //#region src/components/tiptap/tiptap-editor-host.ts
 function serializeTiptapDocumentContent(content) {
 	return JSON.stringify(normalizeContentArray(content));
@@ -121,6 +122,7 @@ var TOOLBAR_ICONS = {
 	strikethrough: renderIconHtml(icons_exports.strikethrough),
 	subscript: renderIconHtml(icons_exports.subscript),
 	superscript: renderIconHtml(icons_exports.superscript),
+	"small-caps": renderIconHtml(icons_exports.smallCaps),
 	code: renderIconHtml(icons_exports.bracketsCurly),
 	"code-block": renderIconHtml(icons_exports.code),
 	highlight: renderIconHtml(icons_exports.highlighter),
@@ -154,6 +156,11 @@ var TOOLBAR_LABELS = {
 	strikethrough: "Strikethrough",
 	subscript: "Subscript",
 	superscript: "Superscript",
+	"small-caps": "Small caps",
+	"font-family": "Font family",
+	"font-size": "Font size",
+	"text-color": "Text and background color",
+	"line-height": "Line height",
 	code: "Inline code",
 	"code-block": "Code block",
 	highlight: "Highlight",
@@ -180,11 +187,15 @@ var TOOLBAR_LABELS = {
 	redo: "Redo"
 };
 function getToolbarMenuItemLabel(buttonName) {
-	return TOOLBAR_LABELS[buttonName] ?? buttonName;
+	return TOOLBAR_LABELS[buttonName] ?? getRegisteredTiptapToolbarControl(buttonName)?.label ?? buttonName;
+}
+function getToolbarButtonIcon(buttonName) {
+	const registeredIcon = getRegisteredTiptapToolbarControl(buttonName)?.icon;
+	return TOOLBAR_ICONS[buttonName] ?? (registeredIcon ? renderIconHtml(registeredIcon) : void 0);
 }
 /** Prefix icon for `pk-dropdown-item` — SVG must carry `slot="prefix"` directly. */
 function createToolbarPrefixIcon(buttonName) {
-	const iconHtml = TOOLBAR_ICONS[buttonName];
+	const iconHtml = getToolbarButtonIcon(buttonName);
 	if (!iconHtml) return null;
 	const template = document.createElement("template");
 	template.innerHTML = iconHtml.trim();
@@ -315,6 +326,136 @@ var pkTiptapEditorStyles = css`
             letter-spacing: 0.02em;
         }
 
+        .toolbar-btn--text-style {
+            max-width: 9rem;
+            padding-inline: 0.5rem;
+        }
+
+        .toolbar-btn__text-style-value {
+            overflow: hidden;
+            font-size: var(--pk-font-size-xs);
+            line-height: 1;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .toolbar-btn--color .toolbar-btn__text-style-value {
+            min-width: 1rem;
+            border-bottom: 2px solid var(--text-style-trigger-color, currentColor);
+            color: var(--text-style-trigger-color, currentColor);
+            font-weight: 700;
+            text-align: center;
+        }
+
+        pk-dropdown-menu.text-style-palette::part(panel) {
+            display: grid;
+            grid-template-columns: repeat(5, 2rem);
+            gap: 0.625rem 0.75rem;
+            width: max-content;
+            min-width: 0;
+            padding: 1rem;
+        }
+
+        .text-style-palette__label {
+            grid-column: 1 / -1;
+            color: var(--pk-color-gray-900);
+        }
+
+        .text-style-palette__label::part(label) {
+            padding: 0 0 0.125rem;
+            font-size: var(--pk-font-size-base);
+            font-weight: 600;
+        }
+
+        .text-style-palette__label--highlight {
+            margin-top: 0.375rem;
+        }
+
+        .text-style-palette__option {
+            width: 2rem;
+            height: 2rem;
+            --pk-dropdown-item-gap: 0;
+            --pk-dropdown-item-icon-size: 1.625rem;
+        }
+
+        .text-style-palette__option::part(item) {
+            justify-content: center;
+            width: 2rem;
+            height: 2rem;
+            min-height: 0;
+            padding: 0;
+            border-radius: 50%;
+            background: transparent;
+        }
+
+        .text-style-palette__option:hover::part(item),
+        .text-style-palette__option:focus-within::part(item),
+        .text-style-palette__option[data-highlighted]::part(item),
+        .text-style-palette__option[checked]::part(item) {
+            background: transparent;
+        }
+
+        .text-style-palette__option::part(prefix) {
+            width: 1.625rem;
+            height: 1.625rem;
+        }
+
+        .text-style-palette__option::part(label) {
+            position: absolute;
+        }
+
+        .text-style-palette__option::part(check) {
+            display: none;
+        }
+
+        .text-style-palette__swatch {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 1.625rem;
+            height: 1.625rem;
+            box-sizing: border-box;
+            border: 1px solid rgba(15, 23, 42, 0.16);
+            border-radius: 50%;
+        }
+
+        /* Keep the state treatment concentric with the slotted swatch. The
+           dropdown item's shadow button is wider than its prefix in some hosts. */
+        .text-style-palette__option:hover .text-style-palette__swatch,
+        .text-style-palette__option:focus-within .text-style-palette__swatch,
+        .text-style-palette__option[data-highlighted] .text-style-palette__swatch,
+        .text-style-palette__option[checked] .text-style-palette__swatch {
+            box-shadow: 0 0 0 0.25rem var(--pk-color-slate-100);
+        }
+
+        .text-style-palette__swatch--text {
+            border-color: var(--text-style-swatch, rgba(15, 23, 42, 0.35));
+            color: var(--text-style-swatch, #1f2937);
+            font-size: var(--pk-font-size-base);
+            font-weight: 500;
+            line-height: 1;
+        }
+
+        .text-style-palette__swatch--highlight {
+            background: var(--text-style-swatch, #fff);
+        }
+
+        .text-style-palette__accessible-label {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            white-space: nowrap;
+            border: 0;
+        }
+
+        .text-style-palette pk-tooltip {
+            display: contents;
+        }
+
         /* Full toolbar replace (slot=toolbar on host when hasCustomToolbar). */
         .toolbar ::slotted([slot='toolbar']) {
             display: contents;
@@ -449,6 +590,7 @@ var PkTiptapEditor = class PkTiptapEditor extends PkFormAssociatedElement {
 		this._value = null;
 		this.buttons = "bold,italic";
 		this.toolbar = null;
+		this.textStyleOptions = null;
 		this.linkOptions = null;
 		this.rows = 4;
 		this.placeholder = "";
@@ -625,6 +767,7 @@ var PkTiptapEditor = class PkTiptapEditor extends PkFormAssociatedElement {
 		});
 		queueMicrotask(() => {
 			this.attachSelectionListeners();
+			this.requestUpdate();
 		});
 	}
 	attachSelectionListeners() {
@@ -679,7 +822,7 @@ var PkTiptapEditor = class PkTiptapEditor extends PkFormAssociatedElement {
                 style=${`top:${this.linkBubbleTop}px;left:${this.linkBubbleLeft}px;transform:translate(-50%, -100%);`}
             >
                 <span class="link-bubble__arrow" aria-hidden="true"></span>
-                <span class="link-bubble__url" title=${this.linkBubbleHref}>${this.linkBubbleHref}</span>
+                <span class="link-bubble__url">${this.linkBubbleHref}</span>
                 <span class="link-bubble__divider" aria-hidden="true"></span>
                 <button
                     type="button"
@@ -841,7 +984,7 @@ var PkTiptapEditor = class PkTiptapEditor extends PkFormAssociatedElement {
 		return id;
 	}
 	getToolbarButtonLabel(buttonName) {
-		return TOOLBAR_LABELS[buttonName] ?? buttonName;
+		return TOOLBAR_LABELS[buttonName] ?? getRegisteredTiptapToolbarControl(buttonName)?.label ?? buttonName;
 	}
 	renderToolbarTooltip(buttonId, label) {
 		if (!this.toolbarTooltips) return nothing;
@@ -851,7 +994,9 @@ var PkTiptapEditor = class PkTiptapEditor extends PkFormAssociatedElement {
 	}
 	renderToolbarButton(buttonName) {
 		const editor = this.host.editor;
-		const icon = TOOLBAR_ICONS[buttonName];
+		const registered = getRegisteredTiptapToolbarControl(buttonName);
+		if (registered?.isVisible && (!editor || !registered.isVisible(editor))) return nothing;
+		const icon = getToolbarButtonIcon(buttonName);
 		const label = this.getToolbarButtonLabel(buttonName);
 		const buttonId = this.getToolbarButtonId(buttonName);
 		const active = editor ? isTiptapButtonActive(editor, buttonName) : false;
@@ -872,6 +1017,152 @@ var PkTiptapEditor = class PkTiptapEditor extends PkFormAssociatedElement {
             </div>
         `;
 	}
+	get textStyleToolbarConfig() {
+		return resolveTiptapTextStyleToolbarConfig(this.textStyleOptions);
+	}
+	getTextStyleValue(attribute) {
+		const value = this.host.editor?.getAttributes("textStyle")[attribute];
+		return typeof value === "string" && value ? value : null;
+	}
+	setTextStyleValue(attribute, value) {
+		const editor = this.host.editor;
+		if (!editor) return;
+		const chain = editor.chain().focus();
+		switch (attribute) {
+			case "fontFamily":
+				value ? chain.setFontFamily(value).run() : chain.unsetFontFamily().run();
+				break;
+			case "fontSize":
+				value ? chain.setFontSize(value).run() : chain.unsetFontSize().run();
+				break;
+			case "color":
+				value ? chain.setColor(value).run() : chain.unsetColor().run();
+				break;
+			case "backgroundColor":
+				value ? chain.setBackgroundColor(value).run() : chain.unsetBackgroundColor().run();
+				break;
+			case "lineHeight":
+				value ? chain.setLineHeight(value).run() : chain.unsetLineHeight().run();
+				break;
+		}
+	}
+	getTextStyleOptionLabel(options, value) {
+		return options.find((option) => option.value === value)?.label ?? options.find((option) => option.value === null)?.label ?? "Default";
+	}
+	renderTextStyleOptions(attribute, options) {
+		const currentValue = this.getTextStyleValue(attribute);
+		return options.map((option) => html`
+            <pk-dropdown-item
+                type="radio"
+                radio-group=${attribute}
+                value=${option.value ?? ""}
+                ?checked=${option.value === currentValue}
+                @click=${() => this.setTextStyleValue(attribute, option.value)}
+            >
+                ${option.label}
+            </pk-dropdown-item>
+        `);
+	}
+	renderTextStylePaletteOptions(attribute, options, idPrefix) {
+		const currentValue = this.getTextStyleValue(attribute);
+		const isTextColor = attribute === "color";
+		return options.map((option, index) => {
+			const optionId = `${idPrefix}-${attribute}-${index}`;
+			const accessibleLabel = option.value ? `${option.label} ${isTextColor ? "text" : "highlight"}` : isTextColor ? "Default text color" : "No highlight";
+			return html`
+                <pk-dropdown-item
+                    id=${optionId}
+                    class="text-style-palette__option"
+                    type="radio"
+                    radio-group=${attribute}
+                    value=${option.value ?? ""}
+                    ?checked=${option.value === currentValue}
+                    @click=${() => this.setTextStyleValue(attribute, option.value)}
+                >
+                    <span
+                        slot="start"
+                        class="text-style-palette__swatch ${isTextColor ? "text-style-palette__swatch--text" : "text-style-palette__swatch--highlight"}"
+                        style=${option.value ? `--text-style-swatch:${option.value}` : ""}
+                        data-empty=${option.value === null ? "" : nothing}
+                        aria-hidden="true"
+                    >${isTextColor ? "A" : nothing}</span>
+                    <span class="text-style-palette__accessible-label">${accessibleLabel}</span>
+                </pk-dropdown-item>
+                ${this.toolbarTooltips ? html`
+                    <pk-tooltip for=${optionId} content=${accessibleLabel} placement="top"></pk-tooltip>
+                ` : nothing}
+            `;
+		});
+	}
+	handleTextStylePaletteKeyDown(event) {
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -5,
+			ArrowDown: 5
+		}[event.key];
+		if (!delta) return;
+		const menu = event.currentTarget;
+		const item = event.composedPath().find((node) => node instanceof HTMLElement && node.localName === "pk-dropdown-item" && node.classList.contains("text-style-palette__option"));
+		const items = menu.getItems().filter((candidate) => candidate.classList.contains("text-style-palette__option"));
+		const index = item ? items.indexOf(item) : -1;
+		if (index === -1) return;
+		const target = items[Math.max(0, Math.min(index + delta, items.length - 1))];
+		event.preventDefault();
+		event.stopPropagation();
+		target?.focusControl();
+	}
+	renderTextStyleToolbar(buttonName) {
+		const config = this.textStyleToolbarConfig;
+		const buttonId = this.getToolbarButtonId(buttonName);
+		const triggerColor = buttonName === "text-color" ? this.getTextStyleValue("color") : null;
+		let triggerLabel = "";
+		let menuContent = nothing;
+		if (buttonName === "font-family") {
+			triggerLabel = this.getTextStyleOptionLabel(config.fontFamilies, this.getTextStyleValue("fontFamily"));
+			menuContent = html`${this.renderTextStyleOptions("fontFamily", config.fontFamilies)}`;
+		} else if (buttonName === "font-size") {
+			triggerLabel = this.getTextStyleOptionLabel(config.fontSizes, this.getTextStyleValue("fontSize"));
+			menuContent = html`${this.renderTextStyleOptions("fontSize", config.fontSizes)}`;
+		} else if (buttonName === "line-height") {
+			triggerLabel = this.getTextStyleOptionLabel(config.lineHeights, this.getTextStyleValue("lineHeight"));
+			menuContent = html`${this.renderTextStyleOptions("lineHeight", config.lineHeights)}`;
+		} else {
+			triggerLabel = "A";
+			menuContent = html`
+                <pk-dropdown-label class="text-style-palette__label">Text color</pk-dropdown-label>
+                ${this.renderTextStylePaletteOptions("color", config.textColors, buttonId)}
+                <pk-dropdown-label class="text-style-palette__label text-style-palette__label--highlight">Highlight color</pk-dropdown-label>
+                ${this.renderTextStylePaletteOptions("backgroundColor", config.backgroundColors, buttonId)}
+            `;
+		}
+		const label = this.getToolbarButtonLabel(buttonName);
+		return html`
+            <div class="toolbar-item">
+                <button
+                    id=${buttonId}
+                    type="button"
+                    class="toolbar-btn toolbar-btn--menu toolbar-btn--text-style ${buttonName === "text-color" ? "toolbar-btn--color" : ""}"
+                    aria-label=${label}
+                    aria-haspopup="menu"
+                    ?disabled=${this.disabled || this.readonly}
+                    style=${triggerColor ? `--text-style-trigger-color:${triggerColor}` : ""}
+                >
+                    <span class="toolbar-btn__text-style-value">${triggerLabel}</span>
+                    <span class="toolbar-btn__chevron">${unsafeSVG(TOOLBAR_CHEVRON_HTML)}</span>
+                </button>
+                ${this.renderToolbarTooltip(buttonId, label)}
+                <pk-dropdown-menu
+                    for=${buttonId}
+                    placement="bottom-start"
+                    class=${buttonName === "text-color" ? "text-style-palette" : ""}
+                    @keydown=${buttonName === "text-color" ? this.handleTextStylePaletteKeyDown : nothing}
+                >
+                    ${menuContent}
+                </pk-dropdown-menu>
+            </div>
+        `;
+	}
 	handleCraftLink(config) {
 		const editor = this.host.editor;
 		if (!editor) return;
@@ -901,7 +1192,7 @@ var PkTiptapEditor = class PkTiptapEditor extends PkFormAssociatedElement {
 		return html`<span class="toolbar-separator" aria-hidden="true"></span>`;
 	}
 	renderGroupTriggerContent(group, triggerLabel, iconName) {
-		const icon = TOOLBAR_ICONS[iconName];
+		const icon = getToolbarButtonIcon(iconName);
 		if (Boolean(group.label) && triggerLabel) return html`
                 <span class="toolbar-btn__trigger-label">${triggerLabel}</span>
                 <span class="toolbar-btn__chevron">${unsafeSVG(TOOLBAR_CHEVRON_HTML)}</span>
@@ -920,7 +1211,12 @@ var PkTiptapEditor = class PkTiptapEditor extends PkFormAssociatedElement {
 			isActive: false,
 			icon: group.icon ?? getToolbarGroupDefaultIcon(group)
 		};
-		const menuItems = getToolbarGroupMenuItems(group);
+		const menuItems = getToolbarGroupMenuItems(group).filter((entry) => {
+			if (entry.type === "separator") return true;
+			const control = getRegisteredTiptapToolbarControl(entry.name);
+			return !control?.isVisible || Boolean(editor && control.isVisible(editor));
+		});
+		if (!menuItems.some((entry) => entry.type === "item")) return nothing;
 		const tooltipLabel = group.label ?? (isHeadingsOnlyToolbarPreset(group.preset) ? "Headings" : isFormattingToolbarPreset(group.preset) ? "Formatting" : group.preset === "lists" ? "Lists" : group.preset === "align" ? "Alignment" : "More");
 		return html`
             <div class="toolbar-item">
@@ -962,6 +1258,12 @@ var PkTiptapEditor = class PkTiptapEditor extends PkFormAssociatedElement {
 		if (node.type === "separator") return this.renderToolbarSeparator();
 		if (node.type === "group") return this.renderToolbarGroup(node.group, `group-${index}`);
 		if (node.name === "link") return this.renderLinkToolbarButton();
+		if ([
+			"font-family",
+			"font-size",
+			"text-color",
+			"line-height"
+		].includes(node.name)) return this.renderTextStyleToolbar(node.name);
 		return this.renderToolbarButton(node.name);
 	}
 	renderDefaultToolbar() {
@@ -1055,6 +1357,20 @@ __decorate([property({
 		}
 	}
 })], PkTiptapEditor.prototype, "toolbar", void 0);
+__decorate([property({
+	attribute: "text-style-options",
+	converter: {
+		fromAttribute: (value) => {
+			if (!value) return null;
+			try {
+				return JSON.parse(value);
+			} catch {
+				return null;
+			}
+		},
+		toAttribute: (value) => value ? JSON.stringify(value) : null
+	}
+})], PkTiptapEditor.prototype, "textStyleOptions", void 0);
 __decorate([property({ attribute: "link-options" })], PkTiptapEditor.prototype, "linkOptions", void 0);
 __decorate([property({ attribute: "link-selector-storage-key-prefix" })], PkTiptapEditor.prototype, "linkSelectorStorageKeyPrefix", void 0);
 __decorate([property({ type: Number })], PkTiptapEditor.prototype, "rows", void 0);
@@ -1089,4 +1405,4 @@ PkTiptapEditor = __decorate([customElement("pk-tiptap-editor")], PkTiptapEditor)
 //#endregion
 export { PkTiptapEditor as t };
 
-//# sourceMappingURL=pk-tiptap-editor-tG67Vegc.js.map
+//# sourceMappingURL=pk-tiptap-editor-CTz-yfHL.js.map