@dialpad/dialtone/dist/vue3/lib/editor/editor.js

Dialpad's Dialtone design system monorepo

import { addClassStyleAttrs as e, removeClassStyleAttrs as t } from "../../common/utils/index.js";
import { t as n } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import { DialtoneLocalization as r } from "../../localization/index.js";
import i from "../button/button.js";
import a from "../list-item/list-item.js";
import { t as o } from "../../combobox-DgClbLOg.js";
import s from "../stack/stack.js";
import c from "../tooltip/tooltip.js";
import l from "../popover/popover.js";
import u from "../dropdown/dropdown-separator.js";
import d from "../input/input.js";
import f from "../list-item-group/list-item-group.js";
import { t as p } from "../../rich_text_editor-DYu2R0kw.js";
import { RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as m, RICH_TEXT_EDITOR_OUTPUT_FORMATS as h } from "../rich-text-editor/rich-text-editor-constants.js";
import { EDITOR_DEFAULT_FONT_COLOR as g, EDITOR_DEFAULT_LINK_PREFIX as _, EDITOR_SUPPORTED_LINK_PROTOCOLS as v } from "./editor-constants.js";
import y from "./EditorToolbarButton.js";
import b from "./EditorToolbarDropdownButton.js";
import ee from "./EditorToolbarPopoverButton.js";
import { Fragment as x, createBlock as S, createCommentVNode as C, createElementBlock as w, createElementVNode as T, createTextVNode as E, createVNode as D, mergeProps as O, normalizeClass as te, normalizeStyle as k, openBlock as A, renderList as j, resolveComponent as M, resolveDirective as ne, resolveDynamicComponent as N, toDisplayString as P, withCtx as F, withDirectives as re, withKeys as I, withModifiers as L } from "vue";
import { DtIconAlignCenter as R, DtIconAlignJustify as z, DtIconAlignLeft as B, DtIconAlignRight as V, DtIconBold as H, DtIconBraces as U, DtIconChevronDown as ie, DtIconCodeBlock as W, DtIconFontSize as G, DtIconImage as K, DtIconItalic as q, DtIconLink2 as J, DtIconListBullet as Y, DtIconListOrdered as X, DtIconQuickReply as Z, DtIconQuote as Q, DtIconSearch as ae, DtIconStopFilled as oe, DtIconStrikethrough as se, DtIconType as ce, DtIconUnderline as $ } from "@dialpad/dialtone-icons/vue3";
//#region recipes/conversation_view/editor/editor.vue
var le = {
	compatConfig: { MODE: 3 },
	name: "DtRecipeEditor",
	components: {
		DtListItemGroup: f,
		DtDropdownSeparator: u,
		DtListItem: a,
		DtRichTextEditor: p,
		DtButton: i,
		DtPopover: l,
		DtStack: s,
		DtInput: d,
		DtTooltip: c,
		DtCombobox: o,
		EditorToolbarButton: y,
		EditorToolbarDropdownButton: b,
		EditorToolbarPopoverButton: ee,
		DtIconQuickReply: Z,
		DtIconBold: H,
		DtIconItalic: q,
		DtIconUnderline: $,
		DtIconStrikethrough: se,
		DtIconListBullet: Y,
		DtIconListOrdered: X,
		DtIconAlignLeft: B,
		DtIconAlignCenter: R,
		DtIconAlignRight: V,
		DtIconAlignJustify: z,
		DtIconQuote: Q,
		DtIconCodeBlock: W,
		DtIconLink2: J,
		DtIconImage: K,
		DtIconSearch: ae,
		DtIconType: ce,
		DtIconBraces: U,
		DtIconChevronDown: ie,
		DtIconFontSize: G,
		DtIconStopFilled: oe
	},
	mixins: [],
	inheritAttrs: !1,
	props: {
		modelValue: {
			type: [Object, String],
			default: ""
		},
		editable: {
			type: Boolean,
			default: !0
		},
		inputAriaLabel: {
			type: String,
			required: !0,
			default: ""
		},
		inputClass: {
			type: String,
			default: ""
		},
		autoFocus: {
			type: [
				Boolean,
				String,
				Number
			],
			default: !1,
			validator(e) {
				return typeof e == "string" ? m.includes(e) : !0;
			}
		},
		placeholder: {
			type: String,
			default: ""
		},
		maxHeight: {
			type: String,
			default: "unset"
		},
		setLinkPlaceholder: {
			type: String,
			default: ""
		},
		showBoldButton: {
			type: Boolean,
			default: !0
		},
		showItalicsButton: {
			type: Boolean,
			default: !0
		},
		showUnderlineButton: {
			type: Boolean,
			default: !0
		},
		showStrikeButton: {
			type: Boolean,
			default: !0
		},
		showListItemsButton: {
			type: Boolean,
			default: !0
		},
		showOrderedListButton: {
			type: Boolean,
			default: !0
		},
		showAlignLeftButton: {
			type: Boolean,
			default: !0
		},
		showAlignCenterButton: {
			type: Boolean,
			default: !0
		},
		showAlignRightButton: {
			type: Boolean,
			default: !0
		},
		showAlignJustifyButton: {
			type: Boolean,
			default: !0
		},
		showQuoteButton: {
			type: Boolean,
			default: !0
		},
		showCodeBlockButton: {
			type: Boolean,
			default: !0
		},
		showQuickRepliesButton: {
			type: Boolean,
			default: !0
		},
		showInlineImageButton: {
			type: Boolean,
			default: !1
		},
		showVariableButton: {
			type: Boolean,
			default: !1
		},
		variableCategories: {
			type: Array,
			default: () => []
		},
		showAddLink: {
			type: Object,
			default: () => ({ showAddLinkButton: !0 })
		},
		showFontStyleButton: {
			type: Boolean,
			default: !1
		},
		showFontSizeButton: {
			type: Boolean,
			default: !1
		},
		showFontColorButton: {
			type: Boolean,
			default: !1
		},
		fontStyles: {
			type: Array,
			default: () => [
				{
					name: "Arial",
					value: null
				},
				{
					name: "Georgia",
					value: "Georgia"
				},
				{
					name: "Helvetica",
					value: "Helvetica"
				},
				{
					name: "Verdana",
					value: "Verdana"
				},
				{
					name: "Times New Roman",
					value: "Times New Roman"
				}
			]
		},
		fontSizes: {
			type: Array,
			default: () => [
				{
					name: "Small",
					value: "12px"
				},
				{
					name: "Normal",
					value: "15px"
				},
				{
					name: "Large",
					value: "24px"
				},
				{
					name: "Huge",
					value: "36px"
				}
			]
		},
		allowBackgroundColor: {
			type: Boolean,
			default: !1
		},
		allowLineHeight: {
			type: Boolean,
			default: !1
		},
		preserveWhitespace: {
			type: [Boolean, String],
			default: "full"
		},
		useDivTags: {
			type: Boolean,
			default: !1
		},
		allowTables: {
			type: Boolean,
			default: !1
		},
		allowImageResize: {
			type: Boolean,
			default: !1
		}
	},
	emits: [
		"focus",
		"blur",
		"input",
		"update:modelValue",
		"quick-replies-click",
		"inline-image-click",
		"text-input"
	],
	data() {
		return {
			internalInputValue: this.modelValue,
			hasFocus: !1,
			linkOptions: { class: "d-recipe-editor__link" },
			currentFontColor: void 0,
			showLinkInput: !1,
			fontStyleSearch: "",
			linkInput: "",
			currentButtonRefIndex: 0,
			variableSearchValue: "",
			i18n: new r()
		};
	},
	computed: {
		inputLength() {
			return this.internalInputValue.length;
		},
		htmlOutputFormat() {
			return h[2];
		},
		flattenedVariableItems() {
			return this.variableCategories ? this.variableCategories.reduce((e, t) => e.concat(t.items || []), []) : [];
		},
		showingTextFormatButtons() {
			return this.showBoldButton || this.showItalicsButton || this.showStrikeButton || this.showUnderlineButton;
		},
		showingAlignmentButtons() {
			return this.showAlignLeftButton || this.showAlignCenterButton || this.showAlignRightButton || this.showAlignJustifyButton;
		},
		showingListButtons() {
			return this.showListItemsButton || this.showOrderedListButton;
		},
		orderedRefs() {
			let e = this.buttonGroups.reduce(function(e, t) {
				return t.buttonGroup.forEach((n) => {
					e.push(this.getButtonRef(t.key, n.selector));
				}, this), e;
			}.bind(this), []);
			return e.push(this.getButtonRef("custom", "link")), e;
		},
		buttonGroups() {
			let e = this.individualButtons.map((e) => ({
				key: e.selector,
				buttonGroup: [e]
			}));
			return [
				{
					key: "new",
					buttonGroup: this.newButtons
				},
				{
					key: "format",
					buttonGroup: this.textFormatButtons
				},
				{
					key: "alignment",
					buttonGroup: this.alignmentButtons
				},
				{
					key: "list",
					buttonGroup: this.listButtons
				},
				...e
			].filter((e) => e.buttonGroup.length > 0);
		},
		newButtons() {
			return [{
				showBtn: this.showQuickRepliesButton,
				buttonType: "button",
				label: this.i18n.$t("DIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL"),
				selector: "quickReplies",
				icon: Z,
				dataQA: "dt-recipe-editor-quick-replies-btn",
				tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL"),
				onClick: this.onQuickRepliesClick
			}].filter((e) => e.showBtn);
		},
		textFormatButtons() {
			return [
				{
					showBtn: this.showFontStyleButton,
					buttonType: "popover",
					selector: "fontStyle",
					icon: ce,
					dataQA: "dt-recipe-editor-font-style-btn",
					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_FONT_STYLE_BUTTON_LABEL")
				},
				{
					showBtn: this.showFontSizeButton,
					buttonType: "popover",
					selector: "fontSize",
					icon: G,
					dataQA: "dt-recipe-editor-font-size-btn",
					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_FONT_SIZE_BUTTON_LABEL")
				},
				{
					showBtn: this.showFontColorButton,
					buttonType: "custom",
					selector: "fontColor",
					icon: oe,
					dataQA: "dt-recipe-editor-font-color-btn",
					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_FONT_COLOR_BUTTON_LABEL"),
					onClick: this.onColorPickerButtonClick
				},
				{
					showBtn: this.showBoldButton,
					buttonType: "button",
					selector: "bold",
					icon: H,
					dataQA: "dt-recipe-editor-bold-btn",
					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_BOLD_BUTTON_LABEL"),
					onClick: this.onBoldTextToggle
				},
				{
					showBtn: this.showItalicsButton,
					buttonType: "button",
					selector: "italic",
					icon: q,
					dataQA: "dt-recipe-editor-italics-btn",
					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ITALICS_BUTTON_LABEL"),
					onClick: this.onItalicTextToggle
				},
				{
					showBtn: this.showUnderlineButton,
					buttonType: "button",
					selector: "underline",
					icon: $,
					dataQA: "dt-recipe-editor-underline-btn",
					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_UNDERLINE_BUTTON_LABEL"),
					onClick: this.onUnderlineTextToggle
				},
				{
					showBtn: this.showStrikeButton,
					buttonType: "button",
					selector: "strike",
					icon: se,
					dataQA: "dt-recipe-editor-strike-btn",
					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_STRIKE_BUTTON_LABEL"),
					onClick: this.onStrikethroughTextToggle
				}
			].filter((e) => e.showBtn);
		},
		alignmentButtons() {
			return [
				{
					showBtn: this.showAlignLeftButton,
					buttonType: "button",
					selector: { textAlign: "left" },
					icon: B,
					dataQA: "dt-recipe-editor-align-left-btn",
					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_LEFT_BUTTON_LABEL"),
					onClick: () => this.onTextAlign("left")
				},
				{
					showBtn: this.showAlignCenterButton,
					buttonType: "button",
					selector: { textAlign: "center" },
					icon: R,
					dataQA: "dt-recipe-editor-align-center-btn",
					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_CENTER_BUTTON_LABEL"),
					onClick: () => this.onTextAlign("center")
				},
				{
					showBtn: this.showAlignRightButton,
					buttonType: "button",
					selector: { textAlign: "right" },
					icon: V,
					dataQA: "dt-recipe-editor-align-right-btn",
					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_RIGHT_BUTTON_LABEL"),
					onClick: () => this.onTextAlign("right")
				},
				{
					showBtn: this.showAlignJustifyButton,
					buttonType: "button",
					selector: { textAlign: "justify" },
					icon: z,
					dataQA: "dt-recipe-editor-align-justify-btn",
					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_JUSTIFY_BUTTON_LABEL"),
					onClick: () => this.onTextAlign("justify")
				}
			].filter((e) => e.showBtn);
		},
		listButtons() {
			return [{
				showBtn: this.showListItemsButton,
				buttonType: "button",
				selector: "bulletList",
				icon: Y,
				dataQA: "dt-recipe-editor-list-items-btn",
				tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_BULLET_LIST_BUTTON_LABEL"),
				onClick: this.onBulletListToggle
			}, {
				showBtn: this.showOrderedListButton,
				buttonType: "button",
				selector: "orderedList",
				icon: X,
				dataQA: "dt-recipe-editor-ordered-list-items-btn",
				tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ORDERED_LIST_BUTTON_LABEL"),
				onClick: this.onOrderedListToggle
			}].filter((e) => e.showBtn);
		},
		individualButtons() {
			return [
				{
					showBtn: this.showQuoteButton,
					buttonType: "button",
					selector: "blockquote",
					icon: Q,
					dataQA: "dt-recipe-editor-blockquote-btn",
					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_QUOTE_BUTTON_LABEL"),
					onClick: this.onBlockquoteToggle
				},
				{
					showBtn: this.showCodeBlockButton,
					buttonType: "button",
					selector: "codeBlock",
					icon: W,
					dataQA: "dt-recipe-editor-code-block-btn",
					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_CODE_BUTTON_LABEL"),
					onClick: this.onCodeBlockToggle
				},
				{
					showBtn: this.showInlineImageButton,
					buttonType: "button",
					selector: "image",
					icon: K,
					dataQA: "dt-recipe-editor-inline-image-btn",
					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_IMAGE_BUTTON_LABEL"),
					onClick: this.onInsertInlineImageClick
				},
				{
					showBtn: this.showVariableButton,
					buttonType: "popover",
					selector: "variable",
					icon: U,
					dataQA: "dt-recipe-editor-variable-btn",
					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_VARIABLE_BUTTON_LABEL")
				}
			].filter((e) => e.showBtn);
		},
		linkButton() {
			return {
				showBtn: this.showAddLink.showAddLinkButton,
				buttonType: "custom",
				selector: "link",
				icon: J,
				dataQA: "dt-recipe-editor-add-link-btn",
				tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_LINK_BUTTON_LABEL"),
				onClick: this.openLinkInput
			};
		},
		confirmSetLinkButtonLabels() {
			return this.i18n.$ta("DIALTONE_EDITOR_CONFIRM_SET_LINK_BUTTON");
		},
		cancelSetLinkButtonLabels() {
			return this.i18n.$ta("DIALTONE_EDITOR_CANCEL_SET_LINK_BUTTON");
		},
		removeLinkButtonLabels() {
			return this.i18n.$ta("DIALTONE_EDITOR_REMOVE_LINK_BUTTON");
		},
		showAddLinkButtonLabels() {
			return this.i18n.$ta("DIALTONE_EDITOR_ADD_LINK_BUTTON");
		},
		filteredFontStyles() {
			let e = this.fontStyleSearch.toLowerCase();
			return this.fontStyles.filter((t) => t.name.toLowerCase().includes(e));
		},
		filteredCategories() {
			return this.variableCategories.filter((e) => this.getFilteredItemsForCategory(e).length);
		},
		colorPickerInput() {
			return this.$refs.editorRoot?.querySelector(".colorPickerInput");
		},
		isDefaultFontColor() {
			return this.currentFontColor === g;
		},
		actionBarBtn() {
			let e = this.$refs[this.orderedRefs[this.currentButtonRefIndex]][0]?.$refs?.buttonRef || this.$refs[this.orderedRefs[this.currentButtonRefIndex]];
			return Array.isArray(e) ? e[0] : e;
		}
	},
	watch: { modelValue(e) {
		this.internalInputValue = e;
	} },
	methods: {
		removeClassStyleAttrs: t,
		addClassStyleAttrs: e,
		focusEditor() {
			this.$refs.richTextEditor?.editor?.commands.focus();
		},
		onInputFocus(e) {
			e?.stopPropagation();
		},
		removeLink() {
			this.$refs.richTextEditor?.editor?.chain()?.focus()?.unsetLink()?.run(), this.closeLinkInput();
		},
		setLink(e) {
			let t = this.$refs.richTextEditor?.editor;
			if (e?.preventDefault(), e?.stopPropagation(), !this.linkInput) {
				this.removeLink();
				return;
			}
			v.find((e) => e.test(this.linkInput)) || (this.linkInput = `${_}${this.linkInput}`);
			let n = t?.view?.state?.selection;
			n.anchor === n.head ? t.chain().focus().insertContentAt(n.anchor, `<a class="${this.linkOptions.class}" href=${this.linkInput}>${this.linkInput}</a>`).run() : t.chain().focus().extendMarkRange("link").setLink({
				href: this.linkInput,
				class: this.linkOptions.class
			}).run(), this.closeLinkInput();
		},
		openLinkInput() {
			this.showLinkInput = !0;
		},
		updateInput(e) {
			if (!e) return this.closeLinkInput();
			this.linkInput = this.$refs.richTextEditor?.editor?.getAttributes("link")?.href;
		},
		closeLinkInput() {
			this.showLinkInput = !1, this.linkInput = "", this.$refs.richTextEditor.editor?.chain().focus();
		},
		onBoldTextToggle() {
			this.$refs.richTextEditor?.editor?.chain().focus().toggleBold().run();
		},
		onItalicTextToggle() {
			this.$refs.richTextEditor?.editor.chain().focus().toggleItalic().run();
		},
		onUnderlineTextToggle() {
			this.$refs.richTextEditor?.editor.chain().focus().toggleUnderline().run();
		},
		onStrikethroughTextToggle() {
			this.$refs.richTextEditor?.editor.chain().focus().toggleStrike().run();
		},
		onTextAlign(e) {
			if (this.$refs.richTextEditor?.editor?.isActive({ textAlign: e })) return this.$refs.richTextEditor?.editor.chain().focus().unsetTextAlign().run();
			this.$refs.richTextEditor?.editor.chain().focus().setTextAlign(e).run();
		},
		onBulletListToggle() {
			this.$refs.richTextEditor?.editor.chain().focus().toggleBulletList().run();
		},
		onOrderedListToggle() {
			this.$refs.richTextEditor?.editor.chain().focus().toggleOrderedList().run();
		},
		onCodeBlockToggle() {
			this.$refs.richTextEditor?.editor.chain().focus().toggleCodeBlock().run();
		},
		onQuickRepliesClick() {
			this.$emit("quick-replies-click");
		},
		onInsertInlineImageClick() {
			this.$emit("inline-image-click");
		},
		insertVariable(e, t) {
			this.$refs.richTextEditor?.editor.chain().focus().insertVariable({
				id: t.id,
				placeholder: t.placeholder || "",
				altText: "",
				enableAltText: t.enableAltText
			}).run();
		},
		insertInlineImage(e) {
			this.$refs.richTextEditor?.editor.chain().focus().setImage({ src: e }).run();
		},
		insertInMessageBody(e) {
			this.$refs.richTextEditor?.editor.chain().focus().insertContent(e).run();
		},
		setCursorPosition(e = null) {
			this.$refs.richTextEditor?.editor.chain().focus(e).run();
		},
		onBlockquoteToggle() {
			this.$refs.richTextEditor?.editor.chain().focus().toggleBlockquote().run();
		},
		onTextInput(e) {
			this.$emit("text-input", e);
		},
		onFocus(e) {
			this.hasFocus = !0, this.$emit("focus", e);
		},
		onBlur(e) {
			this.hasFocus = !1, this.$emit("blur", e);
		},
		onInput(e) {
			this.$emit("input", e), this.$emit("update:modelValue", e);
		},
		onSelected() {
			this.updateFontColorInput();
		},
		getButtonKey(e, t) {
			return `${e}-${JSON.stringify(t)}`;
		},
		getButtonRef(e, t) {
			return `${this.getButtonKey(e, t)}-ref`;
		},
		canFocus(e) {
			return e === this.orderedRefs[this.currentButtonRefIndex];
		},
		shiftActionBarFocusRight() {
			this.shiftButtonRefIndex(1);
		},
		shiftActionBarFocusLeft() {
			this.shiftButtonRefIndex(-1);
		},
		shiftButtonRefIndex(e) {
			let t = this.actionBarBtn, n = (this.currentButtonRefIndex + e) % this.orderedRefs.length;
			this.currentButtonRefIndex = n >= 0 ? n : this.orderedRefs.length + n;
			let r = this.actionBarBtn;
			t.$el.blur(), r.$el.focus();
		},
		onFontStyleSelect(e) {
			e ? this.$refs.richTextEditor?.editor?.chain().focus().setFontFamily(e).run() : this.$refs.richTextEditor?.editor?.chain().focus().unsetFontFamily().run(), this.$refs.richTextEditor?.editor?.commands.focus();
		},
		isCurrentFontFamily(e) {
			return e ? this.$refs.richTextEditor?.editor?.isActive("textStyle", { fontFamily: e }) : !this.$refs.richTextEditor?.editor?.getAttributes("textStyle")?.fontFamily;
		},
		onFontSizeSelect(e) {
			this.$refs.richTextEditor?.editor?.chain().focus().setFontSize(e).run(), this.$refs.richTextEditor?.editor?.commands.focus();
		},
		isCurrentFontSize(e) {
			return e ? this.$refs.richTextEditor?.editor?.isActive("textStyle", { fontSize: e }) : !this.$refs.richTextEditor?.editor?.getAttributes("textStyle")?.fontSize;
		},
		getFilteredItemsForCategory(e) {
			let t = this.variableSearchValue.toLowerCase();
			return e.name.toLowerCase().includes(t) ? e.items : e.items.filter((e) => e.name.toLowerCase().includes(t));
		},
		updateFontColorInput() {
			this.currentFontColor = this.$refs.richTextEditor?.editor?.getAttributes("textStyle")?.color || "#000000";
		},
		onColorPickerButtonClick() {
			this.colorPickerInput?.click();
		},
		onColorPickerInput(e) {
			this.$refs.richTextEditor?.editor?.chain().focus().setColor(e).run(), this.$refs.richTextEditor?.editor?.commands.focus(), this.updateFontColorInput();
		}
	}
}, ue = { class: "d-recipe-editor__popover-content" };
function de(e, t, n, r, i, a) {
	let o = M("dt-icon-search"), s = M("dt-input"), c = M("dt-list-item"), l = M("dt-combobox"), u = M("editor-toolbar-popover-button"), d = M("editor-toolbar-dropdown-button"), f = M("dt-button"), p = M("dt-dropdown-separator"), m = M("dt-list-item-group"), h = M("editor-toolbar-button"), g = M("dt-stack"), _ = M("dt-tooltip"), v = M("dt-popover"), y = M("dt-rich-text-editor"), b = ne("dt-tooltip");
	return A(), w("div", O({
		ref: "editorRoot",
		class: "d-recipe-editor"
	}, a.addClassStyleAttrs(e.$attrs), {
		"data-qa": "dt-recipe-editor",
		role: "presentation",
		onClick: t[7] || (t[7] = (t) => e.$refs.richTextEditor.focusEditor())
	}), [D(g, {
		class: "d-recipe-editor__top-bar",
		direction: "row",
		gap: "450"
	}, {
		default: F(() => [(A(!0), w(x, null, j(a.buttonGroups, (r) => (A(), S(g, {
			key: r.key,
			direction: "row",
			gap: "300"
		}, {
			default: F(() => [(A(!0), w(x, null, j(r.buttonGroup, (g) => (A(), w(x, null, [g.buttonType === "popover" && g.selector === "fontStyle" ? (A(), S(u, {
				key: a.getButtonKey(r.key, g.selector),
				ref_for: !0,
				ref: a.getButtonRef(r.key, g.selector),
				"is-active": e.$refs.richTextEditor?.editor?.isActive(g.selector),
				"tooltip-message": g.tooltipMessage,
				"data-qa": g.dataQA,
				"popover-data-qa": "dt-recipe-editor-font-style-input-popover",
				tabindex: a.canFocus(a.getButtonRef(r.key, g.selector)) ? 0 : -1,
				icon: g.icon,
				onShiftFocusRight: a.shiftActionBarFocusRight,
				onShiftFocusLeft: a.shiftActionBarFocusLeft
			}, {
				content: F(({ close: e }) => [D(l, {
					label: "",
					"label-visible": !1,
					"show-list": !0,
					"click-on-select": !0,
					onEscape: (t) => e()
				}, {
					input: F(({ inputProps: e }) => [D(s, O({ ref_for: !0 }, e, {
						modelValue: i.fontStyleSearch,
						"onUpdate:modelValue": t[0] || (t[0] = (e) => i.fontStyleSearch = e),
						"root-class": "d-p8 d-pb4 d-w216",
						type: "search",
						placeholder: i.i18n.$t("DIALTONE_EDITOR_FONT_STYLE_SEARCH_PLACEHOLDER"),
						size: "sm",
						role: "menuitem"
					}), {
						leftIcon: F(({ iconSize: e }) => [D(o, { size: e }, null, 8, ["size"])]),
						_: 1
					}, 16, ["modelValue", "placeholder"])]),
					list: F(({ listProps: t }) => [T("ul", O({ ref_for: !0 }, t), [(A(!0), w(x, null, j(a.filteredFontStyles, (t) => (A(), S(c, {
						key: t.name,
						selected: a.isCurrentFontFamily(t.value),
						style: k({ fontFamily: t.value || "inherit" }),
						role: "option",
						"navigation-type": "arrow-keys",
						onClick: (n) => {
							e(a.focusEditor), a.onFontStyleSelect(t.value);
						}
					}, {
						default: F(() => [E(P(t.name), 1)]),
						_: 2
					}, 1032, [
						"selected",
						"style",
						"onClick"
					]))), 128))], 16)]),
					_: 2
				}, 1032, ["onEscape"])]),
				_: 1
			}, 8, [
				"is-active",
				"tooltip-message",
				"data-qa",
				"tabindex",
				"icon",
				"onShiftFocusRight",
				"onShiftFocusLeft"
			])) : g.buttonType === "popover" && g.selector === "fontSize" ? (A(), S(d, {
				key: a.getButtonKey(r.key, g.selector),
				ref_for: !0,
				ref: a.getButtonRef(r.key, g.selector),
				"is-active": e.$refs.richTextEditor?.editor?.isActive(g.selector),
				"tooltip-message": g.tooltipMessage,
				"data-qa": g.dataQA,
				"dropdown-data-qa": "dt-recipe-editor-font-size-input-popover",
				tabindex: a.canFocus(a.getButtonRef(r.key, g.selector)) ? 0 : -1,
				icon: g.icon,
				onShiftFocusRight: a.shiftActionBarFocusRight,
				onShiftFocusLeft: a.shiftActionBarFocusLeft
			}, {
				list: F(({ close: e }) => [(A(!0), w(x, null, j(n.fontSizes, (t) => (A(), S(c, {
					key: t.name,
					selected: a.isCurrentFontSize(t.value),
					role: "menuitem",
					"navigation-type": "arrow-keys",
					onClick: (n) => {
						e(a.focusEditor), a.onFontSizeSelect(t.value, n);
					}
				}, {
					default: F(() => [T("span", { style: k({ fontSize: t.value }) }, P(t.name), 5)]),
					_: 2
				}, 1032, ["selected", "onClick"]))), 128))]),
				_: 1
			}, 8, [
				"is-active",
				"tooltip-message",
				"data-qa",
				"tabindex",
				"icon",
				"onShiftFocusRight",
				"onShiftFocusLeft"
			])) : g.buttonType === "custom" && g.selector === "fontColor" ? re((A(), S(f, {
				key: a.getButtonKey(r.key, g.selector),
				ref_for: !0,
				ref: a.getButtonRef(r.key, g.selector),
				kind: "muted",
				importance: "clear",
				size: "xs",
				active: e.$refs.richTextEditor?.editor?.isActive(g.selector),
				tabindex: a.canFocus(a.getButtonRef(r.key, g.selector)) ? 0 : -1,
				"aria-label": g.tooltipMessage,
				"data-qa": g.dataQA,
				onKeydown: [I(L(a.shiftActionBarFocusRight, ["stop"]), ["right"]), I(L(a.shiftActionBarFocusLeft, ["stop"]), ["left"])],
				onClick: (e) => g.onClick()
			}, {
				icon: F(() => [(A(), S(N(g.icon), {
					size: "200",
					style: k(a.isDefaultFontColor ? {} : { color: i.currentFontColor })
				}, null, 8, ["style"])), D(s, {
					value: i.currentFontColor,
					"root-class": "d-w0 d-h0 d-of-hidden",
					"input-class": "colorPickerInput d-w0 d-h0 d-p0 d-bar0",
					"input-wrapper-class": "d-w0 d-h0 d-ba-none",
					size: "sm",
					type: "color",
					onInput: a.onColorPickerInput,
					onClick: t[1] || (t[1] = L(() => {}, ["stop"]))
				}, null, 8, ["value", "onInput"])]),
				_: 2
			}, 1032, [
				"active",
				"tabindex",
				"aria-label",
				"data-qa",
				"onKeydown",
				"onClick"
			])), [[b, {
				message: g.tooltipMessage,
				placement: "top",
				externalAnchorElement: e.$refs[a.getButtonRef(r.key, g.selector)]?.$el
			}]]) : g.buttonType === "popover" && g.selector === "variable" ? (A(), S(u, {
				key: a.getButtonKey(r.key, g.selector),
				ref_for: !0,
				ref: a.getButtonRef(r.key, g.selector),
				"is-active": !1,
				"tooltip-message": g.tooltipMessage,
				"data-qa": g.dataQA,
				"popover-data-qa": "dt-recipe-editor-variable-popover",
				tabindex: a.canFocus(a.getButtonRef(r.key, g.selector)) ? 0 : -1,
				icon: g.icon,
				onShiftFocusRight: a.shiftActionBarFocusRight,
				onShiftFocusLeft: a.shiftActionBarFocusLeft
			}, {
				content: F(({ close: e }) => [D(l, {
					label: "",
					"label-visible": !1,
					"show-list": !0,
					"click-on-select": !0,
					onEscape: (t) => e()
				}, {
					input: F(({ inputProps: e }) => [D(s, O({ ref_for: !0 }, e, {
						modelValue: i.variableSearchValue,
						"onUpdate:modelValue": t[2] || (t[2] = (e) => i.variableSearchValue = e),
						"root-class": "d-p8 d-pb4 d-w264",
						type: "search",
						placeholder: i.i18n.$t("DIALTONE_EDITOR_VARIABLE_POPOVER_SEARCH_PLACEHOLDER"),
						size: "md",
						role: "menuitem"
					}), {
						leftIcon: F(({ iconSize: e }) => [D(o, { size: e }, null, 8, ["size"])]),
						_: 1
					}, 16, ["modelValue", "placeholder"])]),
					list: F(({ listProps: t }) => [T("div", O({ ref_for: !0 }, t), [(A(!0), w(x, null, j(a.filteredCategories, (t, n) => (A(), S(m, {
						key: t.name,
						heading: t.name,
						"heading-class": "d-headline--sm-compact d-p8"
					}, {
						default: F(() => [(A(!0), w(x, null, j(a.getFilteredItemsForCategory(t), (n) => (A(), S(c, {
							key: t.name + n.name,
							role: "option",
							"navigation-type": "arrow-keys",
							onClick: (r) => {
								a.insertVariable(t.name, n), e(a.focusEditor);
							}
						}, {
							default: F(() => [E(P(n.name), 1)]),
							_: 2
						}, 1032, ["onClick"]))), 128)), n < a.filteredCategories.length - 1 ? (A(), S(p, { key: 0 })) : C("", !0)]),
						_: 2
					}, 1032, ["heading"]))), 128))], 16)]),
					_: 2
				}, 1032, ["onEscape"])]),
				_: 1
			}, 8, [
				"tooltip-message",
				"data-qa",
				"tabindex",
				"icon",
				"onShiftFocusRight",
				"onShiftFocusLeft"
			])) : g.buttonType === "button" ? (A(), S(h, {
				key: a.getButtonKey(r.key, g.selector),
				ref_for: !0,
				ref: a.getButtonRef(r.key, g.selector),
				"is-active": e.$refs.richTextEditor?.editor?.isActive(g.selector),
				"tooltip-message": g.tooltipMessage,
				"data-qa": g.dataQA,
				tabindex: a.canFocus(a.getButtonRef(r.key, g.selector)) ? 0 : -1,
				icon: g.icon,
				label: g.label,
				"on-click": g.onClick,
				onShiftFocusRight: a.shiftActionBarFocusRight,
				onShiftFocusLeft: a.shiftActionBarFocusLeft
			}, null, 8, [
				"is-active",
				"tooltip-message",
				"data-qa",
				"tabindex",
				"icon",
				"label",
				"on-click",
				"onShiftFocusRight",
				"onShiftFocusLeft"
			])) : C("", !0)], 64))), 256)), t[8] || (t[8] = T("div", { class: "d-recipe-editor__button-group-divider" }, null, -1))]),
			_: 2
		}, 1024))), 128)), a.linkButton.showBtn ? (A(), S(g, {
			key: 0,
			direction: "row",
			gap: "300"
		}, {
			default: F(() => [D(v, {
				open: i.showLinkInput,
				"show-close-button": !1,
				"data-qa": "dt-recipe-editor-link-input-popover",
				padding: "none",
				placement: "bottom-start",
				onClick: [a.onInputFocus, L(a.onInputFocus, ["stop"])],
				onOpened: a.updateInput
			}, {
				anchor: F(() => [(A(), S(_, {
					key: a.linkButton.key,
					message: a.linkButton.tooltipMessage,
					placement: "top"
				}, {
					anchor: F(() => [D(f, {
						ref: a.getButtonRef("custom", "link"),
						active: e.$refs.richTextEditor?.editor?.isActive(a.linkButton.selector),
						"aria-label": a.linkButton.tooltipMessage,
						"data-qa": a.linkButton.dataQA,
						tabindex: a.canFocus(a.getButtonRef("custom", "link")) ? 0 : -1,
						importance: "clear",
						kind: "muted",
						size: "xs",
						onClick: t[3] || (t[3] = (e) => a.linkButton.onClick()),
						onKeydown: [I(L(a.shiftActionBarFocusRight, ["stop"]), ["right"]), I(L(a.shiftActionBarFocusLeft, ["stop"]), ["left"])]
					}, {
						icon: F(() => [(A(), S(N(a.linkButton.icon), { size: "200" }))]),
						_: 1
					}, 8, [
						"active",
						"aria-label",
						"data-qa",
						"tabindex",
						"onKeydown"
					])]),
					_: 1
				}, 8, ["message"]))]),
				content: F(() => [T("div", ue, [T("span", null, P(a.showAddLinkButtonLabels.title), 1), D(s, {
					modelValue: i.linkInput,
					"onUpdate:modelValue": t[4] || (t[4] = (e) => i.linkInput = e),
					"input-aria-label": a.showAddLinkButtonLabels["aria-label"],
					placeholder: n.setLinkPlaceholder,
					"data-qa": "dt-recipe-editor-link-input",
					"input-wrapper-class": "d-recipe-editor-link__input-wrapper",
					onClick: [a.onInputFocus, L(a.onInputFocus, ["stop"])],
					onFocus: a.onInputFocus,
					onKeydown: I(a.setLink, ["enter"])
				}, null, 8, [
					"modelValue",
					"input-aria-label",
					"placeholder",
					"onClick",
					"onFocus",
					"onKeydown"
				])])]),
				footerContent: F(() => [D(g, {
					direction: "row",
					gap: "300",
					class: "d-recipe-editor__popover-footer"
				}, {
					default: F(() => [
						D(f, O({
							"data-qa": "dt-recipe-editor-remove-link-btn",
							importance: "clear",
							kind: "muted",
							size: "sm"
						}, a.removeLinkButtonLabels, { onClick: a.removeLink }), {
							default: F(() => [E(P(a.removeLinkButtonLabels.title), 1)]),
							_: 1
						}, 16, ["onClick"]),
						D(f, O({
							"data-qa": "dt-recipe-editor-set-link-cancel-btn",
							importance: "clear",
							kind: "muted",
							size: "sm"
						}, a.cancelSetLinkButtonLabels, { onClick: a.closeLinkInput }), {
							default: F(() => [E(P(a.cancelSetLinkButtonLabels.title), 1)]),
							_: 1
						}, 16, ["onClick"]),
						D(f, O({
							"data-qa": "dt-recipe-editor-set-link-confirm-btn",
							size: "sm"
						}, a.confirmSetLinkButtonLabels, { onClick: a.setLink }), {
							default: F(() => [E(P(a.confirmSetLinkButtonLabels.title), 1)]),
							_: 1
						}, 16, ["onClick"])
					]),
					_: 1
				})]),
				_: 1
			}, 8, [
				"open",
				"onClick",
				"onOpened"
			])]),
			_: 1
		})) : C("", !0)]),
		_: 1
	}), T("div", {
		style: k({ "max-height": n.maxHeight }),
		class: te(["d-recipe-editor__content", { "d-recipe-editor__content-image-resize": n.allowImageResize }])
	}, [D(y, O({
		ref: "richTextEditor",
		modelValue: i.internalInputValue,
		"onUpdate:modelValue": t[5] || (t[5] = (e) => i.internalInputValue = e),
		"allow-font-color": !0,
		"allow-font-family": !0,
		"allow-inline-images": !0,
		"allow-line-breaks": !0,
		"allow-variable": !0,
		"allow-font-size": n.showFontSizeButton,
		"allow-background-color": n.allowBackgroundColor,
		"allow-line-height": n.allowLineHeight,
		"variable-items": a.flattenedVariableItems,
		"hide-link-bubble-menu": !0,
		"auto-focus": n.autoFocus,
		editable: n.editable,
		"input-aria-label": n.inputAriaLabel,
		"input-class": `d-recipe-editor__content-input ${n.inputClass}`,
		link: !0,
		"output-format": a.htmlOutputFormat,
		placeholder: n.placeholder,
		"preserve-whitespace": n.preserveWhitespace,
		"use-div-tags": n.useDivTags,
		"allow-tables": n.allowTables,
		"allow-image-resize": n.allowImageResize,
		"data-qa": "dt-rich-text-editor"
	}, a.removeClassStyleAttrs(e.$attrs), {
		onTextInput: a.onTextInput,
		onBlur: a.onBlur,
		onFocus: a.onFocus,
		onInput: t[6] || (t[6] = (e) => a.onInput(e)),
		onSelected: a.onSelected
	}), null, 16, [
		"modelValue",
		"allow-font-size",
		"allow-background-color",
		"allow-line-height",
		"variable-items",
		"auto-focus",
		"editable",
		"input-aria-label",
		"input-class",
		"output-format",
		"placeholder",
		"preserve-whitespace",
		"use-div-tags",
		"allow-tables",
		"allow-image-resize",
		"onTextInput",
		"onBlur",
		"onFocus",
		"onSelected"
	])], 6)], 16);
}
var fe = /* @__PURE__ */ n(le, [["render", de]]);
//#endregion
export { fe as default };

//# sourceMappingURL=editor.js.map