@vonage/vivid 5.0.0 → 5.2.0

package/rich-text-editor/definition.cjs

@@ -0,0 +1,1206 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const vividElement = require('../unbundled/vivid-element.cjs');
+const button_definition = require('../unbundled/definition.cjs');
+const divider_definition = require('../divider/definition.cjs');
+const option_definition = require('../option/definition.cjs');
+const tooltip_definition = require('../tooltip/definition.cjs');
+const menu_definition = require('../menu/definition.cjs');
+const menuItem_definition = require('../unbundled/definition2.cjs');
+const select_definition = require('../select/definition.cjs');
+const fastElement = require('@microsoft/fast-element');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const divider = require('../unbundled/divider.cjs');
+const option = require('../unbundled/option.cjs');
+const localized = require('../unbundled/localized.cjs');
+const prosemirrorState = require('prosemirror-state');
+const prosemirrorModel = require('prosemirror-model');
+const prosemirrorView = require('prosemirror-view');
+const prosemirrorKeymap = require('prosemirror-keymap');
+const prosemirrorCommands = require('prosemirror-commands');
+const prosemirrorSchemaBasic = require('prosemirror-schema-basic');
+const icon_definition = require('../icon/definition.cjs');
+
+const styles$2 = "@charset \"UTF-8\";.ProseMirror li{position:relative}.ProseMirror-hideselection *::selection{background:transparent}.ProseMirror-hideselection *::-moz-selection{background:transparent}.ProseMirror-hideselection{caret-color:transparent}.ProseMirror [draggable][contenteditable=false]{user-select:text}.ProseMirror-selectednode{outline:2px solid #8cf}li.ProseMirror-selectednode{outline:none}li.ProseMirror-selectednode:after{content:\"\";position:absolute;inset:-2px -2px -2px -32px;border:2px solid #8cf;pointer-events:none}img.ProseMirror-separator{display:inline!important;border:none!important;margin:0!important}.ProseMirror-textblock-dropdown{min-width:3em}.ProseMirror-menu{margin:0 -4px;line-height:1}.ProseMirror-tooltip .ProseMirror-menu{width:-webkit-fit-content;width:fit-content;white-space:pre}.ProseMirror-menuitem{margin-right:3px;display:inline-block}.ProseMirror-menuseparator{border-right:1px solid #ddd;margin-right:3px}.ProseMirror-menu-dropdown,.ProseMirror-menu-dropdown-menu{font-size:90%;white-space:nowrap}.ProseMirror-menu-dropdown{vertical-align:1px;cursor:pointer;position:relative;padding-right:15px}.ProseMirror-menu-dropdown-wrap{padding:1px 0 1px 4px;display:inline-block;position:relative}.ProseMirror-menu-dropdown:after{content:\"\";border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 2px)}.ProseMirror-menu-dropdown-menu,.ProseMirror-menu-submenu{position:absolute;background:#fff;color:#666;border:1px solid #aaa;padding:2px}.ProseMirror-menu-dropdown-menu{z-index:15;min-width:6em}.ProseMirror-menu-dropdown-item{cursor:pointer;padding:2px 8px 2px 4px}@media (hover: hover){.ProseMirror-menu-dropdown-item:hover{background:#f2f2f2}}.ProseMirror-menu-submenu-wrap{position:relative;margin-right:-4px}.ProseMirror-menu-submenu-label:after{content:\"\";border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 4px)}.ProseMirror-menu-submenu{display:none;min-width:4em;left:100%;top:-3px}.ProseMirror-menu-active{background:#eee;border-radius:4px}.ProseMirror-menu-disabled{opacity:.3}.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu,.ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu{display:block}.ProseMirror-menubar{border-top-left-radius:inherit;border-top-right-radius:inherit;position:relative;min-height:1em;color:#666;padding:1px 6px;top:0;left:0;right:0;border-bottom:1px solid silver;background:#fff;z-index:10;-moz-box-sizing:border-box;box-sizing:border-box;overflow:visible}.ProseMirror-icon{display:inline-block;line-height:.8;vertical-align:-2px;padding:2px 8px;cursor:pointer}.ProseMirror-menu-disabled.ProseMirror-icon{cursor:default}.ProseMirror-icon svg{fill:currentColor;height:1em}.ProseMirror-icon span{vertical-align:text-top}.ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}.ProseMirror-gapcursor:after{content:\"\";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid black;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}.ProseMirror-focused .ProseMirror-gapcursor{display:block}.ProseMirror-example-setup-style hr{padding:2px 10px;border:none;margin:1em 0}.ProseMirror-example-setup-style hr:after{content:\"\";display:block;height:1px;background-color:silver;line-height:2px}.ProseMirror ul,.ProseMirror ol{padding-left:30px}.ProseMirror blockquote{padding-left:1em;border-left:3px solid #eee;margin-left:0;margin-right:0}.ProseMirror-example-setup-style img{cursor:default}.ProseMirror-prompt{background:#fff;padding:5px 10px 5px 15px;border:1px solid silver;position:fixed;border-radius:3px;z-index:11;box-shadow:-.5px 2px 5px #0003}.ProseMirror-prompt h5{margin:0;font-weight:400;font-size:100%;color:#444}.ProseMirror-prompt input[type=text],.ProseMirror-prompt textarea{background:#eee;border:none;outline:none}.ProseMirror-prompt input[type=text]{padding:0 4px}.ProseMirror-prompt-close{position:absolute;left:2px;top:1px;color:#666;border:none;background:transparent;padding:0}.ProseMirror-prompt-close:after{content:\"✕\";font-size:12px}.ProseMirror-invalid{background:#ffc;border:1px solid #cc7;border-radius:4px;padding:5px 10px;position:absolute;min-width:10em}.ProseMirror-prompt-buttons{margin-top:5px;display:none}.placeholder:before{position:absolute;color:var(--vvd-color-neutral-600);content:attr(data-placeholder);font:var(--vvd-typography-base);pointer-events:none}.editor{box-sizing:border-box;background:var(--vvd-color-canvas);background-clip:padding-box;color:var(--vvd-color-canvas-text)}.ProseMirror{position:relative;box-sizing:border-box;padding:10px 16px;block-size:120px;font:var(--vvd-typography-base);font-feature-settings:\"liga\" 0;font-variant-ligatures:none;line-height:1.2;outline:none;overflow-y:auto;white-space:break-spaces;word-wrap:break-word}.ProseMirror pre{white-space:pre-wrap}.ProseMirror p{margin-bottom:1em}.ProseMirror p:first-child,.ProseMirror h1:first-child,.ProseMirror h2:first-child,.ProseMirror h3:first-child,.ProseMirror h4:first-child,.ProseMirror h5:first-child,.ProseMirror h6:first-child{margin-top:10px}h2{font:var(--vvd-typography-heading-4)}h3{font:var(--vvd-typography-base-extended)}p{font:var(--vvd-typography-base)}:host{display:block}#editor{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}#editor{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}#editor ::-webkit-scrollbar{width:4px}#editor ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}#editor ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}#editor{position:relative;display:flex;flex-direction:column;block-size:100%;overflow-y:auto}[contenteditable=true]{overflow:unset;block-size:unset}#attachments-wrapper{order:1}#attachments-wrapper .divider{padding:0 12px}.hidden{display:none}.drag-overlay{position:absolute;z-index:10;display:none;align-items:center;justify-content:center;border:1px dashed var(--vvd-color-cta-400);border-radius:8px;background:var(--vvd-color-cta-100);font:var(--vvd-typography-base);inset:0;opacity:.8;pointer-events:none;transition:opacity .2s}.drag-over .drag-overlay{display:flex}";
+
+function notifyMenubarChange(menubar, eventName, payload) {
+  menubar.$emit(eventName, payload, { bubbles: false, composed: false });
+  return true;
+}
+const TEXT_DECORATION_ITEMS = [
+  {
+    text: "Bold",
+    icon: "bold-line",
+    value: "bold"
+  },
+  {
+    text: "Italic",
+    icon: "italic-line",
+    value: "italics"
+  },
+  {
+    text: "Underline",
+    icon: "underline-line",
+    value: "underline"
+  },
+  {
+    text: "Strikethrough",
+    icon: "strikethrough-line",
+    value: "strikethrough"
+  },
+  {
+    text: "Monospace",
+    icon: "monospace-line",
+    value: "monospace"
+  }
+];
+const TEXT_SIZES = [
+  {
+    text: "Extra Large",
+    value: "extra-large"
+  },
+  {
+    text: "Large",
+    value: "large"
+  },
+  {
+    text: "Normal",
+    value: "normal"
+  },
+  {
+    text: "Small",
+    value: "small"
+  }
+];
+const textBlockEventHandler = (event) => {
+  const customEvent = event;
+  if (!customEvent || !customEvent.detail || customEvent.detail.textBlockType === void 0) {
+    return;
+  }
+  const menu = customEvent.target;
+  menu.shadowRoot.querySelector("#text-block").setAttribute("current-value", customEvent.detail.textBlockType);
+};
+const textDecorationEventHandler = (event) => {
+  const customEvent = event;
+  if (!customEvent || !customEvent.detail) {
+    return;
+  }
+  const menu = customEvent.target;
+  const selectionButtons = menu.shadowRoot.querySelectorAll(
+    "#text-decoration .selection-button"
+  );
+  selectionButtons.forEach((button) => button.removeAttribute("active"));
+  customEvent.detail.textDecoration !== void 0 && TEXT_DECORATION_ITEMS.forEach((menuItemConfig, index) => {
+    if (customEvent.detail.textDecoration.indexOf(menuItemConfig.value) >= 0) {
+      selectionButtons[index].toggleAttribute("active", true);
+    }
+  });
+};
+const textSizeEventHandler = (event) => {
+  const customEvent = event;
+  if (!customEvent || !customEvent.detail) {
+    return;
+  }
+  const menu = customEvent.target;
+  const selectionTextSize = customEvent.detail.textSize ?? "normal";
+  const textSizeElements = menu.shadowRoot.querySelectorAll(
+    ".menubar-selector-menuitem"
+  );
+  textSizeElements.forEach((textSizeElement) => {
+    textSizeElement.toggleAttribute(
+      "checked",
+      textSizeElement.getAttribute("value") === selectionTextSize
+    );
+  });
+};
+const MENU_BAR_ITEMS = {
+  textBlock: {
+    registerStateProperty: function(menubar) {
+      menubar.addEventListener("text-styles-changed", textBlockEventHandler);
+    },
+    render: function(context) {
+      const selectTag = context.tagFor(select_definition.VwcSelectElement);
+      const optionTag = context.tagFor(option.ListboxOption);
+      const tooltipTag = context.tagFor(tooltip_definition.VwcTooltipElement);
+      return fastElement.html`
+		<${tooltipTag} text="${(_, { parent }) => parent.locale.richTextEditor.textBlockType}" placement="top">
+			<${selectTag}
+                scale="condensed"
+                shape="rounded"
+                appearance="ghost"
+				slot="anchor"
+				trigger="auto"
+				id="text-block"
+				aria-label="Text Block"
+				placement="bottom-end"
+				value="${(_, { parent }) => parent.textBlockType}"
+				@change="${(_, { parent, event }) => notifyMenubarChange(
+        parent,
+        "text-block-selected",
+        event.target.value
+      )}"
+			>
+				<${optionTag}
+					text="Title"
+					value="title"
+					internal-part
+					class="title"
+					connotation="cta"
+				></${optionTag}>
+				<${optionTag}
+					text="Subtitle"
+					value="subtitle"
+					internal-part
+					class="subtitle"
+					connotation="cta"
+				></${optionTag}>
+				<${optionTag}
+					text="Body"
+					value="body"
+					internal-part
+					class="body"
+					connotation="cta"
+				></${optionTag}>
+			</${selectTag}>
+		</${tooltipTag}>
+		`;
+    }
+  },
+  textDecoration: {
+    registerStateProperty: function(menubar) {
+      menubar.addEventListener(
+        "text-styles-changed",
+        textDecorationEventHandler
+      );
+    },
+    render: function(context) {
+      const buttonTag = context.tagFor(button_definition.Button);
+      const tooltipTag = context.tagFor(tooltip_definition.VwcTooltipElement);
+      return fastElement.html`
+				<span id="text-decoration">
+					${fastElement.repeat(
+        (_) => TEXT_DECORATION_ITEMS,
+        fastElement.html`
+                        <${tooltipTag} text="${(x, { parentContext: { parent } }) => parent.locale.richTextEditor[x.value]}" placement="top">
+                            <${buttonTag}
+                                class="selection-button"
+                                slot="anchor"
+                                aria-label="${(x, { parentContext: { parent } }) => parent.locale.richTextEditor[x.value]}"
+                                size="super-condensed"
+                                appearance="ghost-light"
+                                shape="rounded"
+                                icon="${(x) => x.icon}"
+                                @click="${(x, c) => notifyMenubarChange(
+          c.parentContext.parent,
+          "text-decoration-selected",
+          x.value
+        )}"')}"
+                            ></${buttonTag}>
+                        </${tooltipTag}>
+				`
+      )}
+				</span>
+			`;
+    }
+  },
+  textSize: {
+    registerStateProperty: function(menubar) {
+      menubar.addEventListener("text-styles-changed", textSizeEventHandler);
+    },
+    render: function(context) {
+      const menuTag = context.tagFor(menu_definition.VwcMenuElement);
+      const buttonTag = context.tagFor(button_definition.Button);
+      const tooltipTag = context.tagFor(tooltip_definition.VwcTooltipElement);
+      const menuItemTag = context.tagFor(menuItem_definition.MenuItem);
+      return fastElement.html`
+                    <${menuTag}
+						auto-dismiss
+                        trigger="auto"
+                        id="text-size"
+                        aria-label="Text Size"
+                        placement="bottom-end"
+                    >
+						<${tooltipTag} slot="anchor" text="${(_, { parent }) => parent.locale.richTextEditor.textSize}" placement="top">
+                            <${buttonTag}
+                                slot="anchor"
+                                aria-label="Open text size menu"
+                                size="super-condensed"
+                                appearance="ghost-light"
+                                shape="pill"
+                                icon="text-size-line"
+                            ></${buttonTag}>
+						</${tooltipTag}>
+						${fastElement.repeat(
+        (_) => TEXT_SIZES,
+        fastElement.html`
+							<${menuItemTag}
+								check-appearance="tick-only"
+								control-type="checkbox"
+								text="${(x) => x.text}"
+								value="${(x) => x.value}"
+								internal-part
+								class="menubar-selector-menuitem"
+								connotation="cta"
+								@click="${(x, c) => notifyMenubarChange(
+          c.parentContext.parent,
+          "text-size-selected",
+          x.value
+        )}"
+                        ></${menuItemTag}>
+							`
+      )}
+                    </${menuTag}>
+                `;
+    }
+  },
+  divider: {
+    render: function(context) {
+      const dividerTag = context.tagFor(divider.Divider);
+      return fastElement.html`
+				<${dividerTag} class="divider" orientation="vertical"></${dividerTag}>
+			`;
+    }
+  }
+};
+
+var __defProp$2 = Object.defineProperty;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$2(target, key, result);
+  return result;
+};
+class Menubar extends localized.Localized(vividElement.VividElement) {
+  get #textEditorElement() {
+    return this.parentElement;
+  }
+  #updateTextStyleState = () => {
+    this.dispatchEvent(
+      new CustomEvent("text-styles-changed", {
+        detail: this.#textEditorElement?.selectionStyles
+      })
+    );
+  };
+  connectedCallback() {
+    super.connectedCallback();
+    this.#textEditorElement.addEventListener(
+      "selection-changed",
+      this.#updateTextStyleState
+    );
+    this.#textEditorElement.addEventListener(
+      "change",
+      this.#updateTextStyleState
+    );
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#textEditorElement?.removeEventListener(
+      "selection-changed",
+      this.#updateTextStyleState
+    );
+    this.#textEditorElement?.removeEventListener(
+      "change",
+      this.#updateTextStyleState
+    );
+  }
+}
+__decorateClass$2([
+  fastElement.attr({ attribute: "menu-items" })
+], Menubar.prototype, "menuItems");
+
+const getClasses$2 = (menubar) => fastWebUtilities.classNames("control", [
+  "hide-menubar",
+  getValidMenuItems(menubar).length === 0
+]);
+const validItems = ["textBlock", "textDecoration", "textSize", "divider"];
+function getPropertyStateRgistrationFunction(item) {
+  return MENU_BAR_ITEMS[item].registerStateProperty;
+}
+function createMenuItem(item) {
+  return MENU_BAR_ITEMS[item].render;
+}
+function getValidMenuItems({ menuItems }) {
+  return menuItems ? menuItems.split(" ").filter((item) => validItems.includes(item)) : [];
+}
+function renderMenuItems(context) {
+  return () => fastElement.html`${fastElement.repeat(
+    getValidMenuItems,
+    fastElement.html`${(menuItemName, { parent }) => {
+      getPropertyStateRgistrationFunction(menuItemName)?.(parent);
+      return createMenuItem(menuItemName)(context);
+    }}`
+  )}`;
+}
+const MenubarTemplate = (context) => {
+  return fastElement.html`<template class="${getClasses$2}">
+		${renderMenuItems(context)}
+	</template>`;
+};
+
+const styles$1 = ":host{display:flex;align-items:center;background-color:var(--vvd-color-neutral-50);gap:4px}:host .hide-menubar{display:none}.title{--_text-primary-custom-size: var(--vvd-typography-heading-4)}.subtitle{--_text-primary-custom-size: var(--vvd-typography-base-extended)}.body{--_text-primary-custom-size: var(--vvd-typography-base)}.divider{height:28px}#text-block{width:104px}";
+
+const menubarDefinition = vividElement.defineVividComponent(
+  "menubar",
+  Menubar,
+  MenubarTemplate,
+  [
+    button_definition.buttonDefinition,
+    select_definition.selectDefinition,
+    option_definition.listboxOptionDefinition,
+    divider_definition.dividerDefinition,
+    tooltip_definition.tooltipDefinition,
+    menu_definition.menuDefinition,
+    menuItem_definition.menuItemDefinition
+  ],
+  {
+    styles: styles$1,
+    shadowOptions: {
+      delegatesFocus: true
+    }
+  }
+);
+
+const TEXT_SIZES_CSS_VARIABLES = {
+  "extra-large": "var(--vvd-typography-heading-4)",
+  large: "var(--vvd-typography-base-extended)",
+  normal: "var(--vvd-typography-base)",
+  small: "var(--vvd-typography-base-condensed)"
+};
+const CSS_VARIABLES_TO_SIZES = Object.fromEntries(
+  Object.entries(TEXT_SIZES_CSS_VARIABLES).map(([key, value]) => [value, key])
+);
+const customMarks = {
+  u: {
+    parseDOM: [{ tag: "u" }],
+    toDOM() {
+      return ["u", 0];
+    }
+  },
+  s: {
+    parseDOM: [{ tag: "s" }, { tag: "del" }],
+    toDOM() {
+      return ["s", 0];
+    }
+  },
+  tt: {
+    parseDOM: [{ tag: "tt" }, { tag: "code" }],
+    toDOM() {
+      return ["tt", 0];
+    }
+  },
+  textSize: {
+    attrs: { size: { default: "normal" } },
+    parseDOM: [
+      {
+        tag: "span[style*='font']",
+        getAttrs: (node) => {
+          const style = node.getAttribute("style");
+          const fontSize = style.match(/font:\s*([^;]+)/)?.[1]?.trim();
+          const size = CSS_VARIABLES_TO_SIZES[fontSize];
+          if (size) return { size };
+          return false;
+        }
+      }
+    ],
+    toDOM(mark) {
+      const size = mark.attrs.size;
+      const fontSize = TEXT_SIZES_CSS_VARIABLES[size] || TEXT_SIZES_CSS_VARIABLES.normal;
+      return ["span", { style: `font: ${fontSize};` }, 0];
+    }
+  }
+};
+const dynamicSchema = (prefix = "vwc") => new prosemirrorModel.Schema({
+  nodes: {
+    ...prosemirrorSchemaBasic.schema.spec.nodes.toObject(),
+    imageError: {
+      inline: true,
+      group: "inline",
+      atom: true,
+      attrs: {
+        alt: { default: "" },
+        icon: { default: "" },
+        errorMessage: { default: "Failed to attach" },
+        fileName: { default: "" }
+      },
+      toDOM(node) {
+        return [
+          `${prefix}-text-editor-image-placeholder`,
+          {
+            alt: node.attrs.alt,
+            icon: node.attrs.icon,
+            "error-message": node.attrs.errorMessage,
+            "file-name": node.attrs.fileName
+          }
+        ];
+      },
+      parseDOM: [
+        {
+          tag: `${prefix}-text-editor-image-placeholder`,
+          getAttrs(dom) {
+            return {
+              alt: dom.getAttribute("alt"),
+              icon: dom.getAttribute("icon"),
+              errorMessage: dom.getAttribute("error-message"),
+              fileName: dom.getAttribute("file-name")
+            };
+          }
+        }
+      ]
+    }
+  },
+  marks: {
+    ...prosemirrorSchemaBasic.schema.spec.marks.toObject(),
+    ...customMarks
+  }
+});
+dynamicSchema();
+
+const NEGATIVE_SELECTION = {
+  start: -1,
+  end: -1
+};
+class TagToSchemaMap {
+  static get h2() {
+    return {
+      type: "heading",
+      attrs: { level: 2 }
+    };
+  }
+  static get h3() {
+    return {
+      type: "heading",
+      attrs: { level: 3 }
+    };
+  }
+  static get p() {
+    return {
+      type: "paragraph",
+      attrs: {}
+    };
+  }
+}
+function setTextBlockType(styles, type) {
+  if (styles.textBlockType && styles.textBlockType !== type || styles.textBlockType === "") {
+    styles.textBlockType = "";
+  } else {
+    styles.textBlockType = type;
+  }
+}
+function createEnterKeymapPlugin() {
+  return prosemirrorKeymap.keymap({
+    ["Shift-Enter"]: (state, dispatch) => {
+      const { schema } = state;
+      const br = schema.nodes.hard_break;
+      const { $from, $to } = state.selection;
+      if ($from.sameParent($to)) {
+        dispatch && dispatch(state.tr.replaceSelectionWith(br.create()).scrollIntoView());
+      } else {
+        if (dispatch) {
+          const tr = state.tr;
+          const lastSelectionBlock = state.doc.resolve($to.end());
+          tr.delete(lastSelectionBlock.start(), $to.pos);
+          tr.delete($from.pos, lastSelectionBlock.start() - 1);
+          tr.insert($from.pos, br.create());
+          const newSelection = prosemirrorState.TextSelection.create(tr.doc, $from.pos + 1);
+          tr.setSelection(newSelection);
+          dispatch(tr.scrollIntoView());
+        }
+      }
+      return true;
+    },
+    Enter: (state, dispatch) => {
+      const { schema } = state;
+      const paragraph = schema.nodes.paragraph;
+      const { $from, empty } = state.selection;
+      if (!empty || $from.parent.type !== paragraph) {
+        return false;
+      }
+      const tr = state.tr;
+      const marks = $from.marks();
+      tr.split($from.pos);
+      if (marks.length > 0) {
+        const newParaStart = $from.pos + 1;
+        const zeroWidthSpace = "​";
+        const content = schema.text(zeroWidthSpace, marks);
+        tr.insert(newParaStart, content);
+        tr.setSelection(prosemirrorState.TextSelection.create(tr.doc, newParaStart + 1));
+      }
+      dispatch && dispatch(tr.scrollIntoView());
+      return true;
+    }
+  });
+}
+function createSelectionChangePlugin(onSelectionChange) {
+  return new prosemirrorState.Plugin({
+    view: () => ({
+      update: (view, prevState) => {
+        const { from, to } = view.state.selection;
+        const { from: prevFrom, to: prevTo } = prevState.selection;
+        if (from !== prevFrom || to !== prevTo) {
+          onSelectionChange({ start: from, end: to });
+        }
+      }
+    })
+  });
+}
+function convertSelectionToVividFormat({
+  to,
+  from
+}) {
+  return {
+    start: from,
+    end: to
+  };
+}
+function getImageErrorNode(schema, file, errorMessage = "Image loading failed") {
+  const nodeType = schema.nodes.imageError;
+  const imageErrorNode = nodeType.create({
+    alt: `inline image from file ${file.name}`,
+    fileName: file.name,
+    icon: file.type.split("/")[1],
+    errorMessage
+  });
+  return imageErrorNode;
+}
+const isEmptyParagraph = (node) => {
+  return node.type.name === "paragraph" && node.nodeSize === 2;
+};
+const DEFAULT_TEXT_EDITOR_PLACEHOLDER = "Start typing...";
+const placeholderPluginKey = new prosemirrorState.PluginKey("placeholderPlugin");
+const createPlaceholderPlugin = (placeholder = DEFAULT_TEXT_EDITOR_PLACEHOLDER) => {
+  return new prosemirrorState.Plugin({
+    key: placeholderPluginKey,
+    props: {
+      decorations(state) {
+        const { $from } = state.selection;
+        const decorations = [];
+        if (state.doc.childCount === 1 && isEmptyParagraph($from.parent)) {
+          const decoration = prosemirrorView.Decoration.node($from.before(), $from.after(), {
+            "data-placeholder": placeholder,
+            class: "placeholder"
+          });
+          decorations.push(decoration);
+        }
+        return prosemirrorView.DecorationSet.create(state.doc, decorations);
+      }
+    }
+  });
+};
+class ProseMirrorFacade {
+  #userContentChange = false;
+  #view;
+  #verifyViewInitiation() {
+    if (!this.#view) {
+      throw new Error(
+        "ProseMirror was not initiated. Please use the `init` method first."
+      );
+    }
+  }
+  #onSelectionChange = () => {
+    this.#dispatchEvent("selection-changed");
+  };
+  #handleInputEvent = (e) => {
+    e.stopPropagation();
+    this.#userContentChange = true;
+    this.#dispatchEvent("input");
+  };
+  #handleChangeEvent = () => {
+    if (!this.#userContentChange) {
+      this.#userContentChange = false;
+      return;
+    }
+    this.#dispatchEvent("change");
+  };
+  #vwcPrefix = "vwc";
+  init(element, vwcPrefix = "vwc") {
+    this.#vwcPrefix = vwcPrefix;
+    if (!(element instanceof HTMLElement)) {
+      throw new Error(
+        "ProseMirror Facade init accepts a valid HTMLElement as its first parameter"
+      );
+    }
+    const plugins = [
+      createPlaceholderPlugin(),
+      createSelectionChangePlugin(this.#onSelectionChange),
+      createEnterKeymapPlugin(),
+      prosemirrorKeymap.keymap(prosemirrorCommands.baseKeymap)
+    ];
+    const state = prosemirrorState.EditorState.create({
+      schema: dynamicSchema(this.#vwcPrefix),
+      plugins
+    });
+    this.#view = new prosemirrorView.EditorView(element, { state });
+    this.#view.dom.addEventListener("input", this.#handleInputEvent);
+    this.#view.dom.addEventListener("blur", this.#handleChangeEvent);
+  }
+  updatePlaceholder(placeholderText) {
+    this.#verifyViewInitiation();
+    const { state } = this.#view;
+    const plugins = state.plugins.filter(
+      (plugin) => plugin !== placeholderPluginKey.get(state)
+    );
+    const newPlaceholderPlugin = createPlaceholderPlugin(placeholderText);
+    const newState = state.reconfigure({
+      plugins: [...plugins, newPlaceholderPlugin]
+    });
+    this.#view.updateState(newState);
+  }
+  replaceContent(content) {
+    this.#verifyViewInitiation();
+    const parser = prosemirrorModel.DOMParser.fromSchema(this.#view.state.schema);
+    const doc = parser.parse(
+      new window.DOMParser().parseFromString(content, "text/html").body
+    );
+    const transaction = this.#view.state.tr.replaceWith(
+      0,
+      this.#view.state.doc.content.size,
+      doc.content
+    );
+    this.#view.dispatch(transaction);
+  }
+  selection(position) {
+    if (this.#view && position) {
+      const transaction = this.#view.state.tr.setSelection(
+        prosemirrorState.TextSelection.create(this.#view.state.doc, position.start, position.end)
+      );
+      this.#view.dispatch(transaction);
+    }
+    return !this.#view ? NEGATIVE_SELECTION : convertSelectionToVividFormat(this.#view.state.selection);
+  }
+  #eventHandler = document.createElement("div");
+  addEventListener(eventName, callback) {
+    this.#eventHandler.addEventListener(eventName, callback);
+  }
+  #dispatchEvent = (eventName, detail) => {
+    this.#eventHandler.dispatchEvent(new CustomEvent(eventName, { detail }));
+  };
+  setSelectionTag(tag) {
+    this.#verifyViewInitiation();
+    const nodeDefinitions = TagToSchemaMap[tag] ?? {
+      type: tag
+    };
+    const { state, dispatch } = this.#view;
+    const { from, to } = state.selection;
+    const tr = state.tr;
+    state.doc.nodesBetween(from, to, (node) => {
+      const nodeType = state.schema.nodes[nodeDefinitions.type];
+      if (!nodeType) {
+        throw new Error("Node type tag does not exist in the schema");
+      }
+      if (node.type === nodeType) {
+        return;
+      }
+      tr.setBlockType(from, to, nodeType, nodeDefinitions.attrs);
+    });
+    dispatch(tr);
+  }
+  setSelectionDecoration(decoration) {
+    this.#verifyViewInitiation();
+    const SUPPORTED_DECORATIONS = {
+      bold: "strong",
+      italics: "em",
+      underline: "u",
+      strikethrough: "s",
+      monospace: "tt"
+    };
+    const { state, dispatch } = this.#view;
+    const decorationKey = decoration;
+    const markType = state.schema.marks[SUPPORTED_DECORATIONS[decorationKey]];
+    if (!markType) {
+      throw new Error(`${decoration} is not a supported decoration`);
+    }
+    prosemirrorCommands.toggleMark(markType)(state, dispatch);
+    this.#userContentChange = true;
+    this.#handleChangeEvent();
+  }
+  #getSelectionBlockType() {
+    const { state } = this.#view;
+    const { from, to } = state.selection;
+    const styles = {};
+    state.doc.nodesBetween(from, to, (node) => {
+      if (node.type.name === "heading" && node.attrs.level === 2) {
+        setTextBlockType(styles, "title");
+      } else if (node.type.name === "heading" && node.attrs.level === 3) {
+        setTextBlockType(styles, "subtitle");
+      } else if (node.type.name === "paragraph") {
+        setTextBlockType(styles, "body");
+      }
+    });
+    return styles.textBlockType;
+  }
+  #getSelectionTextDecoration() {
+    const { state } = this.#view;
+    const { from, to, empty } = state.selection;
+    const decorations = [];
+    if (empty) {
+      const marks = state.doc.resolve(from).marks();
+      if (state.schema.marks.strong && marks.some((mark) => mark.type === state.schema.marks.strong)) {
+        decorations.push("bold");
+      }
+      if (state.schema.marks.em && marks.some((mark) => mark.type === state.schema.marks.em)) {
+        decorations.push("italics");
+      }
+      if (state.schema.marks.u && marks.some((mark) => mark.type === state.schema.marks.u)) {
+        decorations.push("underline");
+      }
+      if (state.schema.marks.s && marks.some((mark) => mark.type === state.schema.marks.s)) {
+        decorations.push("strikethrough");
+      }
+      if (state.schema.marks.tt && marks.some((mark) => mark.type === state.schema.marks.tt)) {
+        decorations.push("monospace");
+      }
+    } else {
+      if (state.schema.marks.strong && state.doc.rangeHasMark(from, to, state.schema.marks.strong)) {
+        decorations.push("bold");
+      }
+      if (state.schema.marks.em && state.doc.rangeHasMark(from, to, state.schema.marks.em)) {
+        decorations.push("italics");
+      }
+      if (state.schema.marks.u && state.doc.rangeHasMark(from, to, state.schema.marks.u)) {
+        decorations.push("underline");
+      }
+      if (state.schema.marks.s && state.doc.rangeHasMark(from, to, state.schema.marks.s)) {
+        decorations.push("strikethrough");
+      }
+      if (state.schema.marks.tt && state.doc.rangeHasMark(from, to, state.schema.marks.tt)) {
+        decorations.push("monospace");
+      }
+    }
+    return decorations.length ? decorations : void 0;
+  }
+  #getSelectionTextSize() {
+    const { state } = this.#view;
+    const { from, to, empty } = state.selection;
+    const defaultSize = "normal";
+    if (empty) {
+      const marks = state.doc.resolve(from).marks();
+      const textSizeMark = marks.find(
+        (mark) => mark.type === state.schema.marks.textSize
+      );
+      return textSizeMark ? textSizeMark.attrs.size : defaultSize;
+    } else {
+      let textSize = null;
+      let foundMixedSizes = false;
+      state.doc.nodesBetween(from, to, (node) => {
+        if (node.isText) {
+          const mark = node.marks.find(
+            (mark2) => mark2.type === state.schema.marks.textSize
+          );
+          if (mark) {
+            if (textSize === null) {
+              textSize = mark.attrs.size;
+            } else if (textSize !== mark.attrs.size) {
+              foundMixedSizes = true;
+              return false;
+            }
+          } else if (textSize !== null) {
+            foundMixedSizes = true;
+            return false;
+          }
+        }
+        return true;
+      });
+      if (foundMixedSizes) {
+        return "";
+      }
+      return textSize !== null ? textSize : defaultSize;
+    }
+  }
+  getSelectionStyles() {
+    this.#verifyViewInitiation();
+    const styles = {};
+    styles.textBlockType = this.#getSelectionBlockType();
+    styles.textDecoration = this.#getSelectionTextDecoration();
+    styles.textSize = this.#getSelectionTextSize();
+    return styles;
+  }
+  setTextSize(size = "normal") {
+    this.#verifyViewInitiation();
+    const { state, dispatch } = this.#view;
+    const { schema, selection, tr } = state;
+    const { from, to } = selection;
+    const textSizeMark = schema.marks.textSize;
+    tr.removeMark(from, to, textSizeMark);
+    tr.addMark(from, to, textSizeMark.create({ size }));
+    dispatch(tr.scrollIntoView());
+    this.#userContentChange = true;
+    this.#handleChangeEvent();
+  }
+  getValue() {
+    return this.#view.dom.innerHTML;
+  }
+  async addInlineImage({
+    file,
+    position,
+    alt,
+    error
+  }) {
+    this.#verifyViewInitiation();
+    const reader = new FileReader();
+    const src = await new Promise((resolve, reject) => {
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+    const { state, dispatch } = this.#view;
+    const { schema } = state;
+    const imageAlt = alt ?? `inline image from file ${file.name}`;
+    const imageNode = error ? getImageErrorNode(schema, file, error) : schema.nodes.image.create({ src, alt: imageAlt });
+    let insertPos = position;
+    if (typeof insertPos !== "number") {
+      insertPos = state.selection.from;
+    }
+    const tr = state.tr.insert(insertPos, imageNode);
+    dispatch(tr.scrollIntoView());
+  }
+}
+
+var __defProp$1 = Object.defineProperty;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$1(target, key, result);
+  return result;
+};
+const RichTextEditorTextBlocks = {
+  title: "h2",
+  subtitle: "h3",
+  body: "p"
+};
+class RichTextEditor extends localized.Localized(vividElement.VividElement) {
+  constructor() {
+    super();
+    this.selectionStart = null;
+    this.#updateEditorSelection = () => {
+      try {
+        this.#editor?.selection({
+          start: this.selectionStart,
+          end: this.selectionEnd ? this.selectionEnd : this.selectionStart
+        });
+      } catch (e) {
+        console.warn(e.message);
+      }
+    };
+    this.selectionEnd = null;
+    this.#handleSelectionChange = () => {
+      if (!this.#editor.selection()) {
+        return;
+      }
+      const { start, end } = this.#editor.selection();
+      this.selectionStart = start;
+      this.selectionEnd = end;
+      this.$emit("selection-changed");
+    };
+    this.#handleChange = () => {
+      this.$emit("change");
+    };
+    this.#handleInput = () => {
+      this.$emit("input");
+    };
+  }
+  /**
+   * Indicates the rich text editor's value.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: value
+   */
+  get value() {
+    return this.#editor?.getValue();
+  }
+  set value(content) {
+    if (this.#editor) {
+      this.#editor.replaceContent(content);
+    }
+  }
+  #editor;
+  get #editorWrapperElement() {
+    return this.shadowRoot.querySelector("#editor");
+  }
+  selectionStartChanged() {
+    if (!this.selectionStart || this.selectionEnd && this.selectionStart > this.selectionEnd) {
+      return;
+    }
+    this.#updateEditorSelection();
+  }
+  #updateEditorSelection;
+  selectionEndChanged() {
+    if (this.selectionEnd && !this.selectionStart) {
+      this.selectionStart = 1;
+    }
+    this.#updateEditorSelection();
+  }
+  placeholderChanged() {
+    this.#editor?.updatePlaceholder(this.placeholder);
+  }
+  #handleSelectionChange;
+  #handleChange;
+  #handleInput;
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.#editor) {
+      this.#editor = new ProseMirrorFacade();
+      this.#editor.init(this.#editorWrapperElement);
+      this.#editor.addEventListener(
+        "selection-changed",
+        this.#handleSelectionChange
+      );
+      this.#editor.addEventListener("change", this.#handleChange);
+      this.#editor.addEventListener("input", this.#handleInput);
+    }
+    this.placeholderChanged();
+  }
+  setTextBlock(blockType) {
+    try {
+      this.#editor?.setSelectionTag(RichTextEditorTextBlocks[blockType]);
+    } catch (e) {
+      console.warn(`Invalid text block: ${blockType}`);
+    }
+  }
+  setSelectionDecoration(decoration) {
+    try {
+      this.#editor?.setSelectionDecoration(decoration);
+    } catch (e) {
+      console.warn(`Invalid decoration: ${decoration}`);
+    }
+  }
+  setSelectionTextSize(textSize) {
+    this.#editor?.setTextSize(textSize);
+  }
+  get selectionStyles() {
+    if (!this.#editor) {
+      return {};
+    }
+    return this.#editor.getSelectionStyles();
+  }
+  focus() {
+    super.focus();
+    setTimeout(() => {
+      this.#editableAreaElement.focus();
+    }, 0);
+  }
+  get #editableAreaElement() {
+    return this.#editorWrapperElement.querySelector(
+      '[contenteditable="true"]'
+    );
+  }
+  scrollToAttachments(additionalPixels = 0) {
+    fastElement.DOM.queueUpdate(() => {
+      this.#editorWrapperElement.scrollTop = this.#editableAreaElement.getBoundingClientRect().height - this.#editorWrapperElement.getBoundingClientRect().height + additionalPixels;
+    });
+  }
+  async addInlineImage(imageProps) {
+    try {
+      await this.#editor.addInlineImage(imageProps);
+    } catch (e) {
+      console.warn(e.message);
+    }
+  }
+}
+__decorateClass$1([
+  fastElement.attr({ converter: fastElement.nullableNumberConverter, attribute: "selection-start" })
+], RichTextEditor.prototype, "selectionStart");
+__decorateClass$1([
+  fastElement.attr({ converter: fastElement.nullableNumberConverter, attribute: "selection-end" })
+], RichTextEditor.prototype, "selectionEnd");
+__decorateClass$1([
+  fastElement.attr
+], RichTextEditor.prototype, "placeholder");
+
+const getClasses$1 = (_) => fastWebUtilities.classNames("control");
+const VALID_MENU_ELEMEMENT_SUFFIX = "menubar";
+const menuParent = (target) => target.parentElement;
+function textBlockSelectedHandler(event) {
+  menuParent(event.target).setTextBlock(
+    event.detail
+  );
+  menuParent(event.target).focus();
+}
+function selectionDecorationSelectedHandler(event) {
+  menuParent(event.target).setSelectionDecoration(
+    event.detail
+  );
+  menuParent(event.target).focus();
+}
+function textSizeSelectedHandler(event) {
+  menuParent(event.target).setSelectionTextSize(
+    event.detail
+  );
+  menuParent(event.target).focus();
+}
+function handleAttachmentsSlotChange(_, { event }) {
+  const slotElement = event.target;
+  slotElement.parentElement?.classList.toggle(
+    "hidden",
+    slotElement.assignedElements().length < 1
+  );
+}
+function handleMenubarSlotChange(_, { event }) {
+  const slot = event.target;
+  const assignedElements = slot.assignedElements({ flatten: true });
+  const menubar = assignedElements.find(
+    (element) => element.tagName.toLowerCase().endsWith(VALID_MENU_ELEMEMENT_SUFFIX)
+  );
+  assignedElements.forEach((element) => {
+    if (element === menubar) {
+      element.style.removeProperty("display");
+    } else {
+      element.style.display = "none";
+    }
+  });
+  if (menubar) {
+    menubar.addEventListener(
+      "text-block-selected",
+      textBlockSelectedHandler
+    );
+    menubar.addEventListener(
+      "text-decoration-selected",
+      selectionDecorationSelectedHandler
+    );
+    menubar.addEventListener(
+      "text-size-selected",
+      textSizeSelectedHandler
+    );
+  }
+}
+function handleFileDrop(x, { event }) {
+  x.dispatchEvent(
+    new CustomEvent("file-drop", { detail: event.dataTransfer.files })
+  );
+  handleDragLeave(x, { event });
+}
+function handleDragEnter(_, { event }) {
+  const editorWrapperElement = event.currentTarget;
+  editorWrapperElement.classList.toggle("drag-over", true);
+}
+function handleDragLeave(_, { event }) {
+  const editorWrapperElement = event.currentTarget;
+  if (!editorWrapperElement.contains(event.relatedTarget)) {
+    editorWrapperElement.classList.remove("drag-over");
+  }
+}
+const RichTextEditorTemplate = (context) => {
+  const dividerTag = context.tagFor(divider.Divider);
+  return fastElement.html`<template class="${getClasses$1}">
+		<div id="editor"
+		     class="editor"
+			 @drop="${handleFileDrop}"
+			 @dragenter="${handleDragEnter}"
+			 @dragleave="${handleDragLeave}"
+			 >
+			 <div class="drag-overlay">
+				${(x) => x.locale.richTextEditor.dragAndDropFilesHere}
+			</div>
+			<div id="attachments-wrapper" class="hidden">
+				<${dividerTag} class="divider"></${dividerTag}>
+				<slot name="attachments"
+					  @slotchange="${handleAttachmentsSlotChange}">
+				</slot>
+			</div>
+		</div>
+		<slot name="menu-bar"
+			  @slotchange="${handleMenubarSlotChange}"></slot>
+	</template>`;
+};
+
+const styles = ":host{white-space:normal}.image-placeholder{display:flex;width:250px;height:64px;box-sizing:border-box;align-items:center;padding:16px;border:1px solid var(--vvd-color-neutral-200);border-radius:12px;background-color:var(--vvd-color-canvas);gap:16px}.icon{display:flex;width:40px;height:40px;box-sizing:border-box;flex-shrink:0;align-items:center;justify-content:center;border-radius:8px;background-color:color-mix(in srgb,var(--vvd-color-neutral-950),transparent 90%);color:var(--vvd-color-neutral-600)}.info{display:flex;flex-direction:column;min-inline-size:0}.filename{display:flex;overflow:hidden;width:100%;max-width:220px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-condensed-bold);white-space:nowrap}.name{overflow:hidden;flex:1 1 auto;text-overflow:ellipsis}.suffix{flex:0 0 auto;margin-left:4px}.error{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed);gap:6px}";
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class ImagePlaceholder extends vividElement.VividElement {
+}
+__decorateClass([
+  fastElement.attr({ attribute: "file-name" })
+], ImagePlaceholder.prototype, "fileName");
+__decorateClass([
+  fastElement.attr({ attribute: "size" })
+], ImagePlaceholder.prototype, "size");
+__decorateClass([
+  fastElement.attr({ attribute: "error-message" })
+], ImagePlaceholder.prototype, "errorMessage");
+__decorateClass([
+  fastElement.attr({ attribute: "icon" })
+], ImagePlaceholder.prototype, "icon");
+
+const getClasses = (_) => fastWebUtilities.classNames("base");
+const getIconName = ({ icon }) => {
+  if (!icon) {
+    return "clear-file-solid";
+  }
+  return `file-${icon}-solid`;
+};
+const getFileSuffix = (x) => {
+  return x.fileName?.split(".").pop() || "";
+};
+const getFileName = (x) => {
+  return x.fileName?.replace(/\.[^/.]+$/, "") || "";
+};
+const ImagePlaceholderTemplate = (context) => {
+  const iconTag = context.tagFor(icon_definition.VwcIconElement);
+  return fastElement.html`<template class="${getClasses}">
+		<div class="image-placeholder">
+			<div class="icon">
+				<${iconTag} name="${getIconName}" size="-5"></${iconTag}>
+			</div>
+			<div class="info">
+				<div class="filename" title="${(x) => x.fileName}">
+					<div class="name">${getFileName}</div>
+					<div class="suffix">${getFileSuffix}</div>
+				</div>
+				${fastElement.when(
+    (x) => x.errorMessage,
+    fastElement.html`<div class="error">
+					<span class="error-icon"><${iconTag} name="error-solid" size="-6"></${iconTag}></span>
+					<span class="error-text">${(x) => x.errorMessage}</span>
+				</div>`
+  )}
+			</div>
+		</div>
+	</template>`;
+};
+
+const imagePlaceholderDefinition = vividElement.defineVividComponent(
+  "text-editor-image-placeholder",
+  ImagePlaceholder,
+  ImagePlaceholderTemplate,
+  [icon_definition.iconDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
+  }
+);
+
+const richTextEditorDefinition = vividElement.defineVividComponent(
+  "rich-text-editor",
+  RichTextEditor,
+  RichTextEditorTemplate,
+  [menubarDefinition, divider_definition.dividerDefinition, imagePlaceholderDefinition],
+  {
+    styles: styles$2,
+    shadowOptions: {
+      delegatesFocus: true
+    }
+  }
+);
+const registerRichTextEditor = vividElement.createRegisterFunction(
+  richTextEditorDefinition
+);
+
+exports.VwcRichTextEditorElement = RichTextEditor;
+exports.registerRichTextEditor = registerRichTextEditor;
+exports.richTextEditorDefinition = richTextEditorDefinition;