@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/).
439 lines (438 loc) • 17 kB
JavaScript
import '../mt-text-editor-toolbar.css';
;
const vue = require("vue");
const MtPopover = require("./MtPopover.js");
const MtPopoverItem = require("./MtPopoverItem.js");
const MtTextEditorToolbarButton = require("./MtTextEditorToolbarButton.js");
const vueI18n = require("vue-i18n");
const _pluginVue_exportHelper = require("../_plugin-vue_export-helper-9c783a34.js");
require("./MtCheckbox.js");
require("../mt-icon.vue_vue_type_style_index_0_lang-0a28c7b6.js");
require("../mt-base-field-6a3a56a0.js");
require("./MtInheritanceSwitch.js");
require("./MtTooltip.js");
require("../floating-ui.vue-48d5c774.js");
require("../floating-ui.dom-fe395b67.js");
require("../useIsInsideTooltip-f4674e27.js");
require("../index-ab705c2a.js");
require("./MtFieldCopyable.js");
require("../tooltip.directive-7b51326d.js");
require("../id-8e80f112.js");
require("./MtHelpText.js");
require("../useFutureFlags-35232480.js");
require("./MtFieldError.js");
require("./MtText.js");
require("../mt-switch.vue_vue_type_style_index_0_lang-fb6defc7.js");
require("./MtFieldLabel.js");
require("./MtButton.js");
require("./MtLoader.js");
require("./MtSmoothReflow.js");
require("../_commonjsHelpers-2cbbddc8.js");
require("../mt-floating-ui.vue_vue_type_style_index_0_lang-1a484bca.js");
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__ */ vue.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 } = vueI18n.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 = vue.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 = vue.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 = vue.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();
});
vue.watch(
contextualButtons,
(newValue, oldValue) => {
if (JSON.stringify(newValue) === JSON.stringify(oldValue)) {
return;
}
emit("updateContextualButtons", newValue);
},
{ immediate: true }
);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createElementVNode("div", _hoisted_2, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(buttonsLeft.value, (button) => {
return vue.renderSlot(_ctx.$slots, "button_" + button.name, {
key: button.name,
editor: props.editor,
disabled: __props.disabled,
button
}, () => [
button.children ? (vue.openBlock(), vue.createBlock(MtPopover, {
key: button.name
}, {
trigger: vue.withCtx(({ toggleFloatingUi }) => [
vue.createVNode(MtTextEditorToolbarButton, {
button,
editor: props.editor,
onClick: toggleFloatingUi,
disabled: __props.disabled
}, null, 8, ["button", "editor", "onClick", "disabled"])
]),
"popover-items__base": vue.withCtx(({ toggleFloatingUi }) => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(button.children, (child) => {
return vue.openBlock(), vue.createBlock(MtPopoverItem, {
key: child.name,
label: vue.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)) : (vue.openBlock(), vue.createBlock(MtTextEditorToolbarButton, {
key: 1,
button,
editor: props.editor,
disabled: __props.disabled,
onClick: ($event) => handleButtonClick(button)
}, null, 8, ["button", "editor", "disabled", "onClick"]))
], true);
}), 128))
]),
vue.renderSlot(_ctx.$slots, "default", {}, void 0, true),
vue.createElementVNode("div", _hoisted_3, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(buttonsRight.value, (button) => {
return vue.renderSlot(_ctx.$slots, "button_" + button.name, {
key: button.name,
editor: props.editor,
disabled: __props.disabled,
button
}, () => [
button.children ? (vue.openBlock(), vue.createBlock(MtPopover, {
key: button.name
}, {
trigger: vue.withCtx(({ toggleFloatingUi }) => [
vue.createVNode(MtTextEditorToolbarButton, {
button,
editor: props.editor,
onClick: toggleFloatingUi,
disabled: __props.disabled
}, null, 8, ["button", "editor", "onClick", "disabled"])
]),
"popover-items__base": vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(button.children, (child) => {
return vue.openBlock(), vue.createBlock(MtPopoverItem, {
key: child.name,
label: vue.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)) : (vue.openBlock(), vue.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__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-20dee6c8"]]);
module.exports = mtTextEditorToolbar;
//# sourceMappingURL=MtTextEditorToolbar.js.map