@shopware-ag/meteor-component-library
Version:
The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).
440 lines (439 loc) • 16.9 kB
JavaScript
import '../mt-text-editor-toolbar.css';
import { defineComponent, computed, watch, openBlock, createElementBlock, createElementVNode, Fragment, renderList, renderSlot, createBlock, withCtx, createVNode, unref } from "vue";
import mtPopover from "./MtPopover.js";
import mtPopoverItem from "./MtPopoverItem.js";
import mtTextEditorToolbarButton from "./MtTextEditorToolbarButton.js";
import { useI18n } from "vue-i18n";
import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.mjs";
import "./MtCheckbox.js";
import "../mt-icon.vue_vue_type_style_index_0_lang-2cc5f73e.mjs";
import "../mt-base-field-7a978dcf.mjs";
import "./MtInheritanceSwitch.js";
import "./MtTooltip.js";
import "../floating-ui.vue-fe27ebef.mjs";
import "../floating-ui.dom-f450fda4.mjs";
import "../useIsInsideTooltip-0c3bd290.mjs";
import "../index-221bad05.mjs";
import "./MtFieldCopyable.js";
import "../tooltip.directive-a5042569.mjs";
import "../id-1e5b8276.mjs";
import "./MtHelpText.js";
import "../useFutureFlags-2be3e179.mjs";
import "./MtFieldError.js";
import "./MtText.js";
import "../mt-switch.vue_vue_type_style_index_0_lang-e05ec27a.mjs";
import "./MtFieldLabel.js";
import "./MtButton.js";
import "./MtLoader.js";
import "./MtSmoothReflow.js";
import "../_commonjsHelpers-7a77ea84.mjs";
import "../mt-floating-ui.vue_vue_type_style_index_0_lang-c9aba54c.mjs";
const _hoisted_1 = {
class: "mt-text-editor-toolbar",
role: "menu",
tabindex: "0"
};
const _hoisted_2 = { class: "mt-text-editor-toolbar__buttons-left" };
const _hoisted_3 = { class: "mt-text-editor-toolbar__buttons-right" };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "mt-text-editor-toolbar",
props: {
editor: {
type: Object,
required: true
},
customButtons: {
type: Array,
default: () => []
},
excludedButtons: {
type: Array,
default: () => []
},
disabled: {
type: Boolean,
default: false
}
},
emits: ["updateContextualButtons"],
setup(__props, { emit: __emit }) {
const { t } = useI18n({
useScope: "global",
messages: {
en: {
"mt-text-editor-toolbar": {
buttons: {
format: "Format",
p: "Paragraph",
h1: "Headline 1",
h2: "Headline 2",
h3: "Headline 3",
h4: "Headline 4",
h5: "Headline 5",
h6: "Headline 6",
bold: "Bold",
italic: "Italic",
underline: "Underline",
strikethrough: "Strikethrough",
superscript: "Superscript",
subscript: "Subscript",
"text-alignment": "Text Alignment",
"align-left": "Align left",
"align-center": "Align center",
"align-right": "Align right",
justify: "Justify",
"unordered-list": "Insert Unordered List",
"numbered-list": "Insert Ordered List",
undo: "Undo",
redo: "Redo"
}
}
},
de: {
"mt-text-editor-toolbar": {
buttons: {
format: "Format",
p: "Absatz",
h1: "Überschrift 1",
h2: "Überschrift 2",
h3: "Überschrift 3",
h4: "Überschrift 4",
h5: "Überschrift 5",
h6: "Überschrift 6",
bold: "Fett",
italic: "Kursiv",
underline: "Unterstrichen",
strikethrough: "Durchgestrichen",
superscript: "Hochgestellt",
subscript: "Tiefgestellt",
"text-alignment": "Textausrichtung",
"align-left": "Links ausrichten",
"align-center": "Zentriert ausrichten",
"align-right": "Rechts ausrichten",
justify: "Blocksatz",
"unordered-list": "Unsortierte Liste einfügen",
"numbered-list": "Sortierte Liste einfügen",
undo: "Rückgängig",
redo: "Wiederholen"
}
}
}
}
});
const props = __props;
const emit = __emit;
const defaultButtons = [
{
name: "format",
label: "mt-text-editor-toolbar.buttons.format",
icon: "regular-style-xs",
position: 1e3,
children: [
{
name: "p",
label: "mt-text-editor-toolbar.buttons.p",
action: () => props.editor.chain().focus().setParagraph().run(),
isActive: (editor) => editor.isActive("paragraph")
},
{
name: "h1",
label: "mt-text-editor-toolbar.buttons.h1",
action: () => props.editor.chain().focus().setHeading({ level: 1 }).run(),
isActive: (editor) => editor.isActive("heading", { level: 1 })
},
{
name: "h2",
label: "mt-text-editor-toolbar.buttons.h2",
action: () => props.editor.chain().focus().setHeading({ level: 2 }).run(),
isActive: (editor) => editor.isActive("heading", { level: 2 })
},
{
name: "h3",
label: "mt-text-editor-toolbar.buttons.h3",
action: () => props.editor.chain().focus().setHeading({ level: 3 }).run(),
isActive: (editor) => editor.isActive("heading", { level: 3 })
},
{
name: "h4",
label: "mt-text-editor-toolbar.buttons.h4",
action: () => props.editor.chain().focus().setHeading({ level: 4 }).run(),
isActive: (editor) => editor.isActive("heading", { level: 4 })
},
{
name: "h5",
label: "mt-text-editor-toolbar.buttons.h5",
action: () => props.editor.chain().focus().setHeading({ level: 5 }).run(),
isActive: (editor) => editor.isActive("heading", { level: 5 })
},
{
name: "h6",
label: "mt-text-editor-toolbar.buttons.h6",
action: () => props.editor.chain().focus().setHeading({ level: 6 }).run(),
isActive: (editor) => editor.isActive("heading", { level: 6 })
}
]
},
{
name: "bold",
label: "mt-text-editor-toolbar.buttons.bold",
icon: "regular-bold-xs",
action: () => props.editor.chain().focus().toggleBold().run(),
isActive: (editor) => editor.isActive("bold"),
position: 3e3
},
{
name: "italic",
label: "mt-text-editor-toolbar.buttons.italic",
icon: "regular-italic-xs",
action: () => props.editor.chain().focus().toggleItalic().run(),
isActive: (editor) => editor.isActive("italic"),
position: 4e3
},
{
name: "underline",
label: "mt-text-editor-toolbar.buttons.underline",
icon: "regular-underline-xs",
action: () => props.editor.chain().focus().toggleUnderline().run(),
isActive: (editor) => editor.isActive("underline"),
position: 5e3
},
{
name: "strikethrough",
label: "mt-text-editor-toolbar.buttons.strikethrough",
icon: "regular-strikethrough-xs",
action: () => props.editor.chain().focus().toggleStrike().run(),
isActive: (editor) => editor.isActive("strike"),
position: 6e3
},
{
name: "superscript",
label: "mt-text-editor-toolbar.buttons.superscript",
icon: "regular-superscript-xs",
action: () => props.editor.chain().focus().toggleSuperscript().run(),
isActive: (editor) => editor.isActive("superscript"),
position: 7e3
},
{
name: "subscript",
label: "mt-text-editor-toolbar.buttons.subscript",
icon: "regular-subscript-xs",
action: () => props.editor.chain().focus().toggleSubscript().run(),
isActive: (editor) => editor.isActive("subscript"),
position: 8e3
},
{
name: "text-alignment",
label: "mt-text-editor-toolbar.buttons.text-alignment",
icon: "regular-align-left-xs",
children: [
{
name: "align-left",
label: "mt-text-editor-toolbar.buttons.align-left",
action: () => props.editor.chain().focus().setTextAlign("left").run(),
isActive: (editor) => editor.isActive({ textAlign: "left" })
},
{
name: "align-center",
label: "mt-text-editor-toolbar.buttons.align-center",
action: () => props.editor.chain().focus().setTextAlign("center").run(),
isActive: (editor) => editor.isActive({ textAlign: "center" })
},
{
name: "align-right",
label: "mt-text-editor-toolbar.buttons.align-right",
action: () => props.editor.chain().focus().setTextAlign("right").run(),
isActive: (editor) => editor.isActive({ textAlign: "right" })
},
{
name: "justify",
label: "mt-text-editor-toolbar.buttons.justify",
action: () => props.editor.chain().focus().setTextAlign("justify").run(),
isActive: (editor) => editor.isActive({ textAlign: "justify" })
}
],
position: 9e3
},
{
name: "unordered-list",
icon: "regular-list-unordered-xs",
label: "mt-text-editor-toolbar.buttons.unordered-list",
action: () => props.editor.chain().focus().toggleBulletList().run(),
isActive: (editor) => editor.isActive("bulletList"),
position: 1e4
},
{
name: "numbered-list",
icon: "regular-list-numbered-xs",
label: "mt-text-editor-toolbar.buttons.numbered-list",
action: () => props.editor.chain().focus().toggleOrderedList().run(),
isActive: (editor) => editor.isActive("orderedList"),
position: 11e3
},
{
name: "undo",
icon: "regular-undo-xs",
alignment: "right",
label: "mt-text-editor-toolbar.buttons.undo",
action: () => props.editor.chain().focus().undo().run(),
disabled: (editor) => {
if (props.disabled) {
return true;
}
return !editor.can().undo();
},
position: 1e3
},
{
name: "redo",
icon: "regular-redo-xs",
alignment: "right",
label: "mt-text-editor-toolbar.buttons.redo",
action: () => props.editor.chain().focus().redo().run(),
disabled: (editor) => {
if (props.disabled) {
return true;
}
return !editor.can().redo();
},
position: 2e3
}
];
const buttonsLeft = computed(() => {
return [...defaultButtons, ...props.customButtons].filter((button) => {
const isExcluded = props.excludedButtons.includes(button.name);
const isRight = button.alignment === "right";
return !isExcluded && !isRight;
}).sort((a, b) => {
return (a.position ?? Number.MAX_SAFE_INTEGER) - (b.position ?? Number.MAX_SAFE_INTEGER);
});
});
const buttonsRight = computed(() => {
return [...defaultButtons, ...props.customButtons].filter((button) => {
const isExcluded = props.excludedButtons.includes(button.name);
const isRight = button.alignment === "right";
return !isExcluded && isRight;
}).sort((a, b) => {
return (a.position ?? Number.MAX_SAFE_INTEGER) - (b.position ?? Number.MAX_SAFE_INTEGER);
});
});
const handleButtonClick = (button) => {
if (!button.action) {
return;
}
button.action(props.editor);
};
const contextualButtons = computed(() => {
return [...buttonsLeft.value, ...buttonsRight.value].filter((button) => {
return button.contextualButtons && button.contextualButtons(props.editor).length > 0;
}).map((button) => {
return button.contextualButtons(props.editor);
}).flat();
});
watch(
contextualButtons,
(newValue, oldValue) => {
if (JSON.stringify(newValue) === JSON.stringify(oldValue)) {
return;
}
emit("updateContextualButtons", newValue);
},
{ immediate: true }
);
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
(openBlock(true), createElementBlock(Fragment, null, renderList(buttonsLeft.value, (button) => {
return renderSlot(_ctx.$slots, "button_" + button.name, {
key: button.name,
editor: props.editor,
disabled: __props.disabled,
button
}, () => [
button.children ? (openBlock(), createBlock(mtPopover, {
key: button.name
}, {
trigger: withCtx(({ toggleFloatingUi }) => [
createVNode(mtTextEditorToolbarButton, {
button,
editor: props.editor,
onClick: toggleFloatingUi,
disabled: __props.disabled
}, null, 8, ["button", "editor", "onClick", "disabled"])
]),
"popover-items__base": withCtx(({ toggleFloatingUi }) => [
(openBlock(true), createElementBlock(Fragment, null, renderList(button.children, (child) => {
return openBlock(), createBlock(mtPopoverItem, {
key: child.name,
label: unref(t)(child.label),
icon: child.icon,
type: child.isActive && child.isActive(props.editor) ? "active" : "default",
onLabelClick: () => {
handleButtonClick(child);
toggleFloatingUi();
}
}, null, 8, ["label", "icon", "type", "onLabelClick"]);
}), 128))
]),
_: 2
}, 1024)) : (openBlock(), createBlock(mtTextEditorToolbarButton, {
key: 1,
button,
editor: props.editor,
disabled: __props.disabled,
onClick: ($event) => handleButtonClick(button)
}, null, 8, ["button", "editor", "disabled", "onClick"]))
], true);
}), 128))
]),
renderSlot(_ctx.$slots, "default", {}, void 0, true),
createElementVNode("div", _hoisted_3, [
(openBlock(true), createElementBlock(Fragment, null, renderList(buttonsRight.value, (button) => {
return renderSlot(_ctx.$slots, "button_" + button.name, {
key: button.name,
editor: props.editor,
disabled: __props.disabled,
button
}, () => [
button.children ? (openBlock(), createBlock(mtPopover, {
key: button.name
}, {
trigger: withCtx(({ toggleFloatingUi }) => [
createVNode(mtTextEditorToolbarButton, {
button,
editor: props.editor,
onClick: toggleFloatingUi,
disabled: __props.disabled
}, null, 8, ["button", "editor", "onClick", "disabled"])
]),
"popover-items__base": withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(button.children, (child) => {
return openBlock(), createBlock(mtPopoverItem, {
key: child.name,
label: unref(t)(child.label),
icon: child.icon,
type: child.isActive && child.isActive(props.editor) ? "active" : "default",
onLabelClick: () => handleButtonClick(child)
}, null, 8, ["label", "icon", "type", "onLabelClick"]);
}), 128))
]),
_: 2
}, 1024)) : (openBlock(), createBlock(mtTextEditorToolbarButton, {
key: 1,
button,
editor: props.editor,
onClick: ($event) => handleButtonClick(button),
disabled: __props.disabled
}, null, 8, ["button", "editor", "onClick", "disabled"]))
], true);
}), 128))
])
]);
};
}
});
const mtTextEditorToolbar_vue_vue_type_style_index_0_scoped_20dee6c8_lang = "";
const mtTextEditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-20dee6c8"]]);
export {
mtTextEditorToolbar as default
};
//# sourceMappingURL=MtTextEditorToolbar.js.map