@vonage/vivid 4.22.0 → 4.24.0

package/shared/definition43.cjs

@@ -1,18 +1,20 @@
 'use strict';
 
 const vividElement = require('./vivid-element.cjs');
-const definition = require('./definition11.cjs');
-const definition$1 = require('./definition23.cjs');
-const definition$2 = require('./definition60.cjs');
-const definition$3 = require('./definition45.cjs');
+const localized = require('./localized.cjs');
+const definition$2 = require('./definition11.cjs');
+const definition = require('./definition23.cjs');
+const definition$3 = require('./definition60.cjs');
+const definition$4 = require('./definition45.cjs');
 const option = require('./option.cjs');
-const classNames = require('./class-names.cjs');
+const definition$1 = require('./definition30.cjs');
 const repeat = require('./repeat.cjs');
-const definition$4 = require('./definition36.cjs');
+const classNames = require('./class-names.cjs');
+const definition$5 = require('./definition36.cjs');
 
-const styles$1 = "@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}.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}.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)}";
+const styles$1 = "@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}.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)}";
 
-const styles = ":host{display:flex;align-items:center;padding:8px;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{align-self:stretch}";
+const styles = ":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}";
 
 var __defProp$1 = Object.defineProperty;
 var __decorateClass$1 = (decorators, target, key, kind) => {
@@ -23,7 +25,39 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
   if (result) __defProp$1(target, key, result);
   return result;
 };
-class MenuBar extends vividElement.VividElement {
+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$1([
   vividElement.attr({ attribute: "menu-items" })
@@ -60,76 +94,91 @@ const TEXT_DECORATION_ITEMS = [
     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 = {
-  /*textSize: function (context) {
-  	const buttonTag = context.tagFor(Button);
-  	const menuTag = context.tagFor(Menu);
-  	const menuItemTag = context.tagFor(MenuItem);
-  	const tooltipTag = context.tagFor(Tooltip);
-  	return html`
-  		<${menuTag}
-  			trigger="auto"
-  			id="text-block"
-  			aria-label="Text Block"
-  			placement="bottom-end"
-  		>
-  			<${tooltipTag} slot="anchor" text="Text Block Type" placement="top">
-  				<${buttonTag}
-  					slot="anchor"
-  					aria-label="Open text block menu"
-  					size="super-condensed"
-  					appearance="ghost-light"
-  					shape="pill"
-  					icon="text-size-line"
-  				></${buttonTag}>
-  			</${tooltipTag}>
-  			<${menuItemTag}
-  				text="Title"
-  				value="title"
-  				internal-part
-  				class="title"
-  				connotation="cta"
-  				@click="${(_, { parent }) =>
-  					notifyMenuBarChange(parent, 'text-block-selected', 'title')}"
-  			></${menuItemTag}>
-  			<${menuItemTag}
-  				text="Subtitle"
-  				value="subtitle"
-  				internal-part
-  				class="subtitle"
-  				connotation="cta"
-  				@click="${(_, { parent }) =>
-  					notifyMenuBarChange(parent, 'text-block-selected', 'subtitle')}"
-  			></${menuItemTag}>
-  			<${menuItemTag}
-  				text="Body"
-  				value="body"
-  				internal-part
-  				class="body"
-  				connotation="cta"
-  				@click="${(_, { parent }) =>
-  					notifyMenuBarChange(parent, 'text-block-selected', 'body')}"
-  			></${menuItemTag}>
-  		</${menuTag}>
-  	`;
-  },*/
-  textBlock: function(context) {
-    const selectTag = context.tagFor(definition$3.Select);
-    const optionTag = context.tagFor(option.ListboxOption);
-    const tooltipTag = context.tagFor(definition$2.Tooltip);
-    return vividElement.html`
-		<${tooltipTag} text="Text Block Type" placement="top">
+  textBlock: {
+    registerStateProperty: function(menuBar) {
+      menuBar.addEventListener("text-styles-changed", textBlockEventHandler);
+    },
+    render: function(context) {
+      const selectTag = context.tagFor(definition$4.Select);
+      const optionTag = context.tagFor(option.ListboxOption);
+      const tooltipTag = context.tagFor(definition$3.Tooltip);
+      return vividElement.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
-    )}"
+        parent,
+        "text-block-selected",
+        event.target.value
+      )}"
 			>
 				<${optionTag}
 					text="Title"
@@ -155,44 +204,115 @@ const MENU_BAR_ITEMS = {
 			</${selectTag}>
 		</${tooltipTag}>
 		`;
+    }
   },
-  textDecoration: function(context) {
-    const buttonTag = context.tagFor(definition.Button);
-    const dividerTag = context.tagFor(definition$1.Divider);
-    const tooltipTag = context.tagFor(definition$2.Tooltip);
-    return vividElement.html`
-			<${dividerTag} class="divider" orientation="vertical"></${dividerTag}>
-			${repeat.repeat(
-      (_) => TEXT_DECORATION_ITEMS,
-      vividElement.html`
-					<${tooltipTag} text="${(x) => x.text}" placement="top">
-						<${buttonTag}
-							slot="anchor"
-							aria-label="${(x) => x.text}"
-							size="super-condensed"
-							appearance="ghost-light"
-							shape="pill"
-							icon="${(x) => x.icon}"
-							@click="${(x, c) => notifyMenuBarChange(
-        c.parentContext.parent,
-        "text-decoration-selected",
-        x.value
-      )}"')}"
-						></${buttonTag}>
-					</${tooltipTag}>
+  textDecoration: {
+    registerStateProperty: function(menuBar) {
+      menuBar.addEventListener(
+        "text-styles-changed",
+        textDecorationEventHandler
+      );
+    },
+    render: function(context) {
+      const buttonTag = context.tagFor(definition$2.Button);
+      const tooltipTag = context.tagFor(definition$3.Tooltip);
+      return vividElement.html`
+				<span id="text-decoration">
+					${repeat.repeat(
+        (_) => TEXT_DECORATION_ITEMS,
+        vividElement.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}>
 				`
-    )}
-			<${dividerTag} class="divider" orientation="vertical"></${dividerTag}>
-		`;
+      )}
+				</span>
+			`;
+    }
+  },
+  textSize: {
+    registerStateProperty: function(menuBar) {
+      menuBar.addEventListener("text-styles-changed", textSizeEventHandler);
+    },
+    render: function(context) {
+      const menuTag = context.tagFor(definition$1.Menu);
+      const buttonTag = context.tagFor(definition$2.Button);
+      const tooltipTag = context.tagFor(definition$3.Tooltip);
+      const menuItemTag = context.tagFor(definition$1.MenuItem);
+      return vividElement.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}>
+						${repeat.repeat(
+        (_) => TEXT_SIZES,
+        vividElement.html`
+							<${menuItemTag}
+								check-appearance="tick-only"
+								role="menuitemcheckbox"
+								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(definition.Divider);
+      return vividElement.html`
+				<${dividerTag} class="divider" orientation="vertical"></${dividerTag}>
+			`;
+    }
   }
 };
+
 const getClasses$1 = (menuBar) => classNames.classNames("control", [
   "hide-menubar",
   getValidMenuItems(menuBar).length === 0
 ]);
-const validItems = ["textBlock", "textDecoration"];
+const validItems = ["textBlock", "textDecoration", "textSize", "divider"];
+function getPropertyStateRgistrationFunction(item) {
+  return MENU_BAR_ITEMS[item].registerStateProperty;
+}
 function createMenuItem(item) {
-  return MENU_BAR_ITEMS[item];
+  return MENU_BAR_ITEMS[item].render;
 }
 function getValidMenuItems({ menuItems }) {
   return menuItems ? menuItems.split(" ").filter((item) => validItems.includes(item)) : [];
@@ -200,7 +320,10 @@ function getValidMenuItems({ menuItems }) {
 function renderMenuItems(context) {
   return () => vividElement.html`${repeat.repeat(
     getValidMenuItems,
-    vividElement.html`${(menuItemName) => createMenuItem(menuItemName)(context)}`
+    vividElement.html`${(menuItemName, { parent }) => {
+      getPropertyStateRgistrationFunction(menuItemName)?.(parent);
+      return createMenuItem(menuItemName)(context);
+    }}`
   )}`;
 }
 const MenuBarTemplate = (context) => {
@@ -214,11 +337,13 @@ const menuBarDefinition = vividElement.defineVividComponent(
   MenuBar,
   MenuBarTemplate,
   [
-    definition.buttonDefinition,
-    definition$3.selectDefinition,
-    definition$4.listboxOptionDefinition,
-    definition$1.dividerDefinition,
-    definition$2.tooltipDefinition
+    definition$2.buttonDefinition,
+    definition$4.selectDefinition,
+    definition$5.listboxOptionDefinition,
+    definition.dividerDefinition,
+    definition$3.tooltipDefinition,
+    definition$1.menuDefinition,
+    definition$1.menuItemDefinition
   ],
   {
     styles,
@@ -3195,7 +3320,7 @@ class ParseContext {
                 value = value.replace(/\r\n?/g, "\n");
             }
             if (value)
-                this.insertNode(this.parser.schema.text(value), marks);
+                this.insertNode(this.parser.schema.text(value), marks, !/\S/.test(value));
             this.findInText(dom);
         }
         else {
@@ -3259,7 +3384,7 @@ class ParseContext {
     ignoreFallback(dom, marks) {
         // Ignored BR nodes should at least create an inline context
         if (dom.nodeName == "BR" && (!this.top.type || !this.top.type.inlineContent))
-            this.findPlace(this.parser.schema.text("-"), marks);
+            this.findPlace(this.parser.schema.text("-"), marks, true);
     }
     // Run any style parser associated with the node's styles. Either
     // return an updated array of marks, or null to indicate some of the
@@ -3307,7 +3432,7 @@ class ParseContext {
                     marks = inner;
                 }
             }
-            else if (!this.insertNode(nodeType.create(rule.attrs), marks)) {
+            else if (!this.insertNode(nodeType.create(rule.attrs), marks, dom.nodeName == "BR")) {
                 this.leafFallback(dom, marks);
             }
         }
@@ -3324,7 +3449,7 @@ class ParseContext {
         }
         else if (rule.getContent) {
             this.findInside(dom);
-            rule.getContent(dom, this.parser.schema).forEach(node => this.insertNode(node, marks));
+            rule.getContent(dom, this.parser.schema).forEach(node => this.insertNode(node, marks, false));
         }
         else {
             let contentDOM = dom;
@@ -3355,19 +3480,22 @@ class ParseContext {
     // Try to find a way to fit the given node type into the current
     // context. May add intermediate wrappers and/or leave non-solid
     // nodes that we're in.
-    findPlace(node, marks) {
+    findPlace(node, marks, cautious) {
         let route, sync;
-        for (let depth = this.open; depth >= 0; depth--) {
+        for (let depth = this.open, penalty = 0; depth >= 0; depth--) {
             let cx = this.nodes[depth];
             let found = cx.findWrapping(node);
-            if (found && (!route || route.length > found.length)) {
+            if (found && (!route || route.length > found.length + penalty)) {
                 route = found;
                 sync = cx;
                 if (!found.length)
                     break;
             }
-            if (cx.solid)
-                break;
+            if (cx.solid) {
+                if (cautious)
+                    break;
+                penalty += 2;
+            }
         }
         if (!route)
             return null;
@@ -3377,13 +3505,13 @@ class ParseContext {
         return marks;
     }
     // Try to insert the given node, adjusting the context when needed.
-    insertNode(node, marks) {
+    insertNode(node, marks, cautious) {
         if (node.isInline && this.needsBlock && !this.top.type) {
             let block = this.textblockFromContext();
             if (block)
                 marks = this.enterInner(block, null, marks);
         }
-        let innerMarks = this.findPlace(node, marks);
+        let innerMarks = this.findPlace(node, marks, cautious);
         if (innerMarks) {
             this.closeExtra();
             let top = this.top;
@@ -3401,7 +3529,7 @@ class ParseContext {
     // Try to start a node of the given type, adjusting the context when
     // necessary.
     enter(type, attrs, marks, preserveWS) {
-        let innerMarks = this.findPlace(type.create(attrs), marks);
+        let innerMarks = this.findPlace(type.create(attrs), marks, false);
         if (innerMarks)
             innerMarks = this.enterInner(type, attrs, marks, true, preserveWS);
         return innerMarks;
@@ -4535,7 +4663,7 @@ class ReplaceStep extends Step {
         let from = mapping.mapResult(this.from, 1), to = mapping.mapResult(this.to, -1);
         if (from.deletedAcross && to.deletedAcross)
             return null;
-        return new ReplaceStep(from.pos, Math.max(from.pos, to.pos), this.slice);
+        return new ReplaceStep(from.pos, Math.max(from.pos, to.pos), this.slice, this.structure);
     }
     merge(other) {
         if (!(other instanceof ReplaceStep) || other.structure || this.structure)
@@ -5843,19 +5971,26 @@ class Transform {
         return this;
     }
     /**
-    Remove a mark (or a mark of the given type) from the node at
+    Remove a mark (or all marks of the given type) from the node at
     position `pos`.
     */
     removeNodeMark(pos, mark) {
-        if (!(mark instanceof Mark)) {
-            let node = this.doc.nodeAt(pos);
-            if (!node)
-                throw new RangeError("No node at position " + pos);
-            mark = mark.isInSet(node.marks);
-            if (!mark)
-                return this;
+        let node = this.doc.nodeAt(pos);
+        if (!node)
+            throw new RangeError("No node at position " + pos);
+        if (mark instanceof Mark) {
+            if (mark.isInSet(node.marks))
+                this.step(new RemoveNodeMarkStep(pos, mark));
+        }
+        else {
+            let set = node.marks, found, steps = [];
+            while (found = mark.isInSet(set)) {
+                steps.push(new RemoveNodeMarkStep(pos, found));
+                set = found.removeFromSet(set);
+            }
+            for (let i = steps.length - 1; i >= 0; i--)
+                this.step(steps[i]);
         }
-        this.step(new RemoveNodeMarkStep(pos, mark));
         return this;
     }
     /**
@@ -6875,6 +7010,27 @@ function createKey(name) {
     keys[name] = 0;
     return name + "$";
 }
+/**
+A key is used to [tag](https://prosemirror.net/docs/ref/#state.PluginSpec.key) plugins in a way
+that makes it possible to find them, given an editor state.
+Assigning a key does mean only one plugin of that type can be
+active in a state.
+*/
+class PluginKey {
+    /**
+    Create a plugin key.
+    */
+    constructor(name = "key") { this.key = createKey(name); }
+    /**
+    Get the active plugin with this key, if any, from an editor
+    state.
+    */
+    get(state) { return state.config.pluginsByKey[this.key]; }
+    /**
+    Get the plugin's state from an editor state.
+    */
+    getState(state) { return state[this.key]; }
+}
 
 const domIndex = function (node) {
     for (var index = 0;; index++) {
@@ -9858,7 +10014,7 @@ function maybeWrapTrusted(html) {
     // innerHTML, even on a detached document. This wraps the string in
     // a way that makes the browser allow us to use its parser again.
     if (!_policy)
-        _policy = trustedTypes.createPolicy("ProseMirrorClipboard", { createHTML: (s) => s });
+        _policy = trustedTypes.defaultPolicy || trustedTypes.createPolicy("ProseMirrorClipboard", { createHTML: (s) => s });
     return _policy.createHTML(html);
 }
 function readHTML(html) {
@@ -10549,6 +10705,10 @@ class Dragging {
     }
 }
 const dragCopyModifier = mac$3 ? "altKey" : "ctrlKey";
+function dragMoves(view, event) {
+    let moves = view.someProp("dragCopies", test => !test(event));
+    return moves != null ? moves : !event[dragCopyModifier];
+}
 handlers.dragstart = (view, _event) => {
     let event = _event;
     let mouseDown = view.input.mouseDown;
@@ -10578,7 +10738,7 @@ handlers.dragstart = (view, _event) => {
     event.dataTransfer.effectAllowed = "copyMove";
     if (!brokenClipboardAPI)
         event.dataTransfer.setData("text/plain", text);
-    view.dragging = new Dragging(slice, !event[dragCopyModifier], node);
+    view.dragging = new Dragging(slice, dragMoves(view, event), node);
 };
 handlers.dragend = view => {
     let dragging = view.dragging;
@@ -10605,7 +10765,7 @@ editHandlers.drop = (view, _event) => {
     else {
         slice = parseFromClipboard(view, getText(event.dataTransfer), brokenClipboardAPI ? null : event.dataTransfer.getData("text/html"), false, $mouse);
     }
-    let move = !!(dragging && !event[dragCopyModifier]);
+    let move = !!(dragging && dragMoves(view, event));
     if (view.someProp("handleDrop", f => f(view, event, slice || Slice.empty, move))) {
         event.preventDefault();
         return;
@@ -11890,9 +12050,11 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
     // as being an iOS enter press), just dispatch an Enter key instead.
     if (((ios && view.input.lastIOSEnter > Date.now() - 225 &&
         (!inlineChange || addedNodes.some(n => n.nodeName == "DIV" || n.nodeName == "P"))) ||
-        (!inlineChange && $from.pos < parse.doc.content.size && !$from.sameParent($to) &&
+        (!inlineChange && $from.pos < parse.doc.content.size &&
+            (!$from.sameParent($to) || !$from.parent.inlineContent) &&
+            !/\S/.test(parse.doc.textBetween($from.pos, $to.pos, "", "")) &&
             (nextSel = Selection.findFrom(parse.doc.resolve($from.pos + 1), 1, true)) &&
-            nextSel.head == $to.pos)) &&
+            nextSel.head > $from.pos)) &&
         view.someProp("handleKeyDown", f => f(view, keyEvent(13, "Enter")))) {
         view.input.lastIOSEnter = 0;
         return;
@@ -13233,6 +13395,8 @@ function splitBlockAs(splitNode) {
             types[0] = deflt ? { type: deflt } : null;
             can = canSplit(tr.doc, splitPos, types.length, types);
         }
+        if (!can)
+            return false;
         tr.split(splitPos, types.length, types);
         if (!atEnd && atStart && $from.node(splitDepth).type != deflt) {
             let first = tr.mapping.map($from.before(splitDepth)), $first = tr.doc.resolve(first);
@@ -13656,6 +13820,15 @@ To reuse elements from this schema, extend or read from its
 */
 const schema = new Schema({ nodes, marks });
 
+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" }],
@@ -13674,6 +13847,26 @@ const customMarks = {
     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 extendedSchema = new Schema({
@@ -13708,6 +13901,57 @@ class TagToSchemaMap {
     };
   }
 }
+function setTextBlockType(styles, type) {
+  if (styles.textBlockType && styles.textBlockType !== type || styles.textBlockType === "") {
+    styles.textBlockType = "";
+  } else {
+    styles.textBlockType = type;
+  }
+}
+function createEnterKeymapPlugin() {
+  return 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 = 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(TextSelection.create(tr.doc, newParaStart + 1));
+      }
+      dispatch && dispatch(tr.scrollIntoView());
+      return true;
+    }
+  });
+}
 function createSelectionChangePlugin(onSelectionChange) {
   return new Plugin({
     view: () => ({
@@ -13730,6 +13974,30 @@ function convertSelectionToVividFormat({
     end: to
   };
 }
+const isEmptyParagraph = (node) => {
+  return node.type.name === "paragraph" && node.nodeSize === 2;
+};
+const DEFAULT_TEXT_EDITOR_PLACEHOLDER = "Start typing...";
+const placeholderPluginKey = new PluginKey("placeholderPlugin");
+const createPlaceholderPlugin = (placeholder = DEFAULT_TEXT_EDITOR_PLACEHOLDER) => {
+  return new Plugin({
+    key: placeholderPluginKey,
+    props: {
+      decorations(state) {
+        const { $from } = state.selection;
+        const decorations = [];
+        if (state.doc.childCount === 1 && isEmptyParagraph($from.parent)) {
+          const decoration = Decoration.node($from.before(), $from.after(), {
+            "data-placeholder": placeholder,
+            class: "placeholder"
+          });
+          decorations.push(decoration);
+        }
+        return DecorationSet.create(state.doc, decorations);
+      }
+    }
+  });
+};
 class ProseMirrorFacade {
   #userContentChange = false;
   #view;
@@ -13750,6 +14018,7 @@ class ProseMirrorFacade {
   };
   #handleChangeEvent = () => {
     if (!this.#userContentChange) {
+      this.#userContentChange = false;
       return;
     }
     this.#dispatchEvent("change");
@@ -13761,7 +14030,9 @@ class ProseMirrorFacade {
       );
     }
     const plugins = [
+      createPlaceholderPlugin(),
       createSelectionChangePlugin(this.#onSelectionChange),
+      createEnterKeymapPlugin(),
       keymap(baseKeymap)
     ];
     const state = EditorState.create({
@@ -13772,6 +14043,18 @@ class ProseMirrorFacade {
     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 = DOMParser.fromSchema(extendedSchema);
@@ -13822,6 +14105,7 @@ class ProseMirrorFacade {
     dispatch(tr);
   }
   setSelectionDecoration(decoration) {
+    this.#verifyViewInitiation();
     const SUPPORTED_DECORATIONS = {
       bold: "strong",
       italics: "em",
@@ -13829,7 +14113,6 @@ class ProseMirrorFacade {
       strikethrough: "s",
       monospace: "tt"
     };
-    this.#verifyViewInitiation();
     const { state, dispatch } = this.#view;
     const decorationKey = decoration;
     const markType = state.schema.marks[SUPPORTED_DECORATIONS[decorationKey]];
@@ -13837,6 +14120,121 @@ class ProseMirrorFacade {
       throw new Error(`${decoration} is not a supported decoration`);
     }
     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();
   }
 }
 
@@ -13917,6 +14315,9 @@ class RichTextEditor extends vividElement.VividElement {
     }
     this.#updateEditorSelection();
   }
+  placeholderChanged() {
+    this.#editor?.updatePlaceholder(this.placeholder);
+  }
   #handleSelectionChange;
   #handleChange;
   #handleInput;
@@ -13932,6 +14333,7 @@ class RichTextEditor extends vividElement.VividElement {
       this.#editor.addEventListener("change", this.#handleChange);
       this.#editor.addEventListener("input", this.#handleInput);
     }
+    this.placeholderChanged();
   }
   setTextBlock(blockType) {
     try {
@@ -13947,6 +14349,15 @@ class RichTextEditor extends vividElement.VividElement {
       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(() => {
@@ -13962,6 +14373,9 @@ __decorateClass([
 __decorateClass([
   vividElement.attr({ converter: vividElement.nullableNumberConverter, attribute: "selection-end" })
 ], RichTextEditor.prototype, "selectionEnd");
+__decorateClass([
+  vividElement.attr
+], RichTextEditor.prototype, "placeholder");
 
 const getClasses = (_) => classNames.classNames("control");
 const VALID_MENU_ELEMEMENT_SUFFIX = "menubar";
@@ -13978,6 +14392,12 @@ function selectionDecorationSelectedHandler(event) {
   );
   menuParent(event.target).focus();
 }
+function textSizeSelectedHandler(event) {
+  menuParent(event.target).setSelectionTextSize(
+    event.detail
+  );
+  menuParent(event.target).focus();
+}
 function handleMenuBarSlotChange(_, { event }) {
   const slot = event.target;
   const assignedElements = slot.assignedElements({ flatten: true });
@@ -14000,6 +14420,10 @@ function handleMenuBarSlotChange(_, { event }) {
       "text-decoration-selected",
       selectionDecorationSelectedHandler
     );
+    menuBar.addEventListener(
+      "text-size-selected",
+      textSizeSelectedHandler
+    );
   }
 }
 const RichTextEditorTemplate = (_) => {