@vonage/vivid 4.19.0-preview.0 → 4.19.0

package/shared/definition43.js

@@ -1,7 +1,115 @@
-import { V as VividElement, a as attr, n as nullableNumberConverter, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, a as attr, h as html, f as defineVividComponent, n as nullableNumberConverter, d as createRegisterFunction } from './vivid-element.js';
+import { B as Button, b as buttonDefinition } from './definition11.js';
+import { e as Menu, M as MenuItem, c as menuDefinition, m as menuItemDefinition } from './definition30.js';
 import { c as classNames } from './class-names.js';
+import { r as repeat } from './repeat.js';
 
-const styles = "@charset \"UTF-8\";#editor,.editor{box-sizing:border-box;background:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);background-clip:padding-box;border:1px solid rgba(0,0,0,.2)}.ProseMirror{position:relative;word-wrap:break-word;white-space:pre-wrap;white-space:break-spaces;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;font-feature-settings:\"liga\" 0;font:var(--vvd-typography-base);padding:10px 16px;line-height:1.2;outline:none;min-height:120px;box-sizing:border-box}.ProseMirror pre{white-space:pre-wrap}.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}.ProseMirror p{margin-block:0 1em}.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}";
+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 = ":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)}";
+
+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;
+};
+class MenuBar extends VividElement {
+}
+__decorateClass$1([
+  attr({ attribute: "menu-items" })
+], MenuBar.prototype, "menuItems");
+
+function notifyMenuBarChange(menuBar, eventName, payload) {
+  menuBar.$emit(eventName, payload, { bubbles: false, composed: false });
+  return true;
+}
+const MENU_BAR_ITEMS = {
+  textSize: function(context) {
+    const buttonTag = context.tagFor(Button);
+    const menuTag = context.tagFor(Menu);
+    const menuItemTag = context.tagFor(MenuItem);
+    return html`
+			<${menuTag}
+				trigger="auto"
+				id="text-size"
+				aria-label="Menu example"
+				placement="bottom-end"
+			>
+				<${buttonTag}
+					slot="anchor"
+					aria-label="Open menu"
+					size="super-condensed"
+					appearance="ghost-light"
+					shape="pill"
+					icon="text-size-line"
+				></${buttonTag}>
+				<${menuItemTag}
+					text="Title"
+					value="title"
+					internal-part
+					class="title"
+					connotation="cta"
+					@click="${(_, { parent }) => notifyMenuBarChange(parent, "text-size-selected", "title")}"
+				></${menuItemTag}>
+				<${menuItemTag}
+					text="Subtitle"
+					value="subtitle"
+					internal-part
+					class="subtitle"
+					connotation="cta"
+					@click="${(_, { parent }) => notifyMenuBarChange(parent, "text-size-selected", "subtitle")}"
+				></${menuItemTag}>
+				<${menuItemTag}
+					text="Body"
+					value="body"
+					internal-part
+					class="body"
+					connotation="cta"
+					@click="${(_, { parent }) => notifyMenuBarChange(parent, "text-size-selected", "body")}"
+				></${menuItemTag}>
+			</${menuTag}>
+		`;
+  }
+};
+const getClasses$1 = (menuBar) => classNames("control", [
+  "hide-menubar",
+  getValidMenuItems(menuBar).length === 0
+]);
+const validItems = ["textSize"];
+function createMenuItem(item) {
+  return MENU_BAR_ITEMS[item];
+}
+function getValidMenuItems({ menuItems }) {
+  return menuItems ? menuItems.split(" ").filter((item) => validItems.includes(item)) : [];
+}
+function renderMenuItems(context) {
+  return () => html`${repeat(
+    getValidMenuItems,
+    html`${(menuItemName) => createMenuItem(menuItemName)(context)}`
+  )}`;
+}
+const MenuBarTemplate = (context) => {
+  return html`<template class="${getClasses$1}">
+		${renderMenuItems(context)}
+	</template>`;
+};
+
+const menuBarDefinition = defineVividComponent(
+  "menubar",
+  MenuBar,
+  MenuBarTemplate,
+  [buttonDefinition, menuDefinition, menuItemDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
+  }
+);
 
 // ::- Persistent data structure representing an ordered mapping from
 // strings to values, with some convenient update methods.
@@ -1289,7 +1397,7 @@ structure between the old and new data as much as possible, which a
 tree shape like this (without back pointers) makes easy.
 
 **Do not** directly mutate the properties of a `Node` object. See
-[the guide](/docs/guide/#doc) for more information.
+[the guide](https://prosemirror.net/docs/guide/#doc) for more information.
 */
 class Node {
     /**
@@ -1324,7 +1432,7 @@ class Node {
     get children() { return this.content.content; }
     /**
     The size of this node, as defined by the integer-based [indexing
-    scheme](/docs/guide/#doc.indexing). For text nodes, this is the
+    scheme](https://prosemirror.net/docs/guide/#doc.indexing). For text nodes, this is the
     amount of characters. For other leaf nodes, it is one. For
     non-leaf nodes, it is the size of the content plus two (the
     start and end token).
@@ -6850,11 +6958,13 @@ function clientRect(node) {
 function scrollRectIntoView(view, rect, startDOM) {
     let scrollThreshold = view.someProp("scrollThreshold") || 0, scrollMargin = view.someProp("scrollMargin") || 5;
     let doc = view.dom.ownerDocument;
-    for (let parent = startDOM || view.dom;; parent = parentNode(parent)) {
+    for (let parent = startDOM || view.dom;;) {
         if (!parent)
             break;
-        if (parent.nodeType != 1)
+        if (parent.nodeType != 1) {
+            parent = parentNode(parent);
             continue;
+        }
         let elt = parent;
         let atTop = elt == doc.body;
         let bounding = atTop ? windowRect(doc) : clientRect(elt);
@@ -6883,8 +6993,10 @@ function scrollRectIntoView(view, rect, startDOM) {
                 rect = { left: rect.left - dX, top: rect.top - dY, right: rect.right - dX, bottom: rect.bottom - dY };
             }
         }
-        if (atTop || /^(fixed|sticky)$/.test(getComputedStyle(parent).position))
+        let pos = atTop ? "fixed" : getComputedStyle(parent).position;
+        if (/^(fixed|sticky)$/.test(pos))
             break;
+        parent = pos == "absolute" ? parent.offsetParent : parentNode(parent);
     }
 }
 // Store the scroll position of the editor's parent nodes, along with
@@ -11353,6 +11465,7 @@ class DOMObserver {
             view.input.lastFocus = 0;
             selectionToDOM(view);
             this.currentSelection.set(sel);
+            view.scrollToSelection();
         }
         else if (from > -1 || newSel) {
             if (from > -1) {
@@ -13348,6 +13461,7 @@ const marks = {
     Code font mark. Represented as a `<code>` element.
     */
     code: {
+        code: true,
         parseDOM: [{ tag: "code" }],
         toDOM() { return codeDOM; }
     }
@@ -13367,6 +13481,26 @@ 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 createSelectionChangePlugin(onSelectionChange) {
   return new Plugin({
     view: () => ({
@@ -13395,10 +13529,12 @@ class ProseMirrorFacade {
   #onSelectionChange = () => {
     this.#dispatchEvent("selection-changed");
   };
-  #handleInputEvent = () => {
+  #handleInputEvent = (e) => {
+    e.stopPropagation();
     this.#userContentChange = true;
+    this.#dispatchEvent("input");
   };
-  #handleBlueEvent = () => {
+  #handleChangeEvent = () => {
     if (!this.#userContentChange) {
       return;
     }
@@ -13420,7 +13556,7 @@ class ProseMirrorFacade {
     });
     this.#view = new EditorView(element, { state });
     this.#view.dom.addEventListener("input", this.#handleInputEvent);
-    this.#view.dom.addEventListener("blur", this.#handleBlueEvent);
+    this.#view.dom.addEventListener("blur", this.#handleChangeEvent);
   }
   replaceContent(content) {
     if (!this.#view) {
@@ -13455,6 +13591,30 @@ class ProseMirrorFacade {
   #dispatchEvent = (eventName, detail) => {
     this.#eventHandler.dispatchEvent(new CustomEvent(eventName, { detail }));
   };
+  setSelectionTag(tag) {
+    if (!this.#view) {
+      throw new Error(
+        "ProseMirror was not initiated. Please use the `init` method first."
+      );
+    }
+    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);
+  }
 }
 
 var __defProp = Object.defineProperty;
@@ -13466,6 +13626,11 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
+const RichTextEditorTextSizes = {
+  title: "h2",
+  subtitle: "h3",
+  body: "p"
+};
 class RichTextEditor extends VividElement {
   constructor() {
     super();
@@ -13481,11 +13646,13 @@ class RichTextEditor extends VividElement {
       }
     };
     this.selectionEnd = null;
+    this.#selectionChangedByUser = false;
     this.#handleSelectionChange = () => {
       if (!this.#editor.selection()) {
         return;
       }
       const { start, end } = this.#editor.selection();
+      this.#selectionChangedByUser = true;
       this.selectionStart = start;
       this.selectionEnd = end;
       this.$emit("selection-changed");
@@ -13493,6 +13660,9 @@ class RichTextEditor extends VividElement {
     this.#handleChange = () => {
       this.$emit("change");
     };
+    this.#handleInput = () => {
+      this.$emit("input");
+    };
   }
   /**
    * Indicates the rich text editor's value.
@@ -13514,6 +13684,9 @@ class RichTextEditor extends VividElement {
     return this.shadowRoot.querySelector("#editor");
   }
   selectionStartChanged() {
+    if (this.#selectionChangedByUser) {
+      return;
+    }
     if (!this.selectionStart || this.selectionEnd && this.selectionStart > this.selectionEnd) {
       return;
     }
@@ -13521,13 +13694,19 @@ class RichTextEditor extends VividElement {
   }
   #updateEditorSelection;
   selectionEndChanged() {
+    if (this.#selectionChangedByUser) {
+      this.#selectionChangedByUser = false;
+      return;
+    }
     if (this.selectionEnd && !this.selectionStart) {
       this.selectionStart = 1;
     }
     this.#updateEditorSelection();
   }
+  #selectionChangedByUser;
   #handleSelectionChange;
   #handleChange;
+  #handleInput;
   connectedCallback() {
     super.connectedCallback();
     if (!this.#editor) {
@@ -13538,6 +13717,14 @@ class RichTextEditor extends VividElement {
         this.#handleSelectionChange
       );
       this.#editor.addEventListener("change", this.#handleChange);
+      this.#editor.addEventListener("input", this.#handleInput);
+    }
+  }
+  setTextSize(size) {
+    try {
+      this.#editor?.setSelectionTag(RichTextEditorTextSizes[size]);
+    } catch (e) {
+      console.warn(`Invalid text size: ${size}`);
     }
   }
 }
@@ -13549,9 +13736,30 @@ __decorateClass([
 ], RichTextEditor.prototype, "selectionEnd");
 
 const getClasses = (_) => classNames("control");
+const VALID_MENU_ELEMEMENT_SUFFIX = "menubar";
+function textSizeSelectedHandler(event) {
+  this.setTextSize(event.detail);
+}
+function handleMenuBarSlotChange(richTextEditor, { 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) => {
+    element.style.display = element === menuBar ? "block" : "none";
+  });
+  if (menuBar) {
+    menuBar.addEventListener(
+      "text-size-selected",
+      textSizeSelectedHandler.bind(richTextEditor)
+    );
+  }
+}
 const RichTextEditorTemplate = (_) => {
   return html`<template class="${getClasses}">
-		<div id="editor"></div>
+		<div id="editor" class="editor"></div>
+		<slot name="menu-bar" @slotchange="${handleMenuBarSlotChange}"></slot>
 	</template>`;
 };
 
@@ -13559,9 +13767,9 @@ const richTextEditorDefinition = defineVividComponent(
   "rich-text-editor",
   RichTextEditor,
   RichTextEditorTemplate,
-  [],
+  [menuBarDefinition],
   {
-    styles,
+    styles: styles$1,
     shadowOptions: {
       delegatesFocus: true
     }
@@ -13571,4 +13779,4 @@ const registerRichTextEditor = createRegisterFunction(
   richTextEditorDefinition
 );
 
-export { registerRichTextEditor as a, richTextEditorDefinition as r };
+export { RichTextEditor as R, registerRichTextEditor as a, richTextEditorDefinition as r };

package/shared/definition44.cjs

@@ -3,6 +3,7 @@
 const definition$1 = require('./definition11.cjs');
 const definition = require('./definition65.cjs');
 const definition$3 = require('./definition28.cjs');
+const definition$2 = require('./definition38.cjs');
 const vividElement = require('./vivid-element.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const scrollIntoView = require('./scrollIntoView.cjs');
@@ -10,9 +11,8 @@ const formAssociated = require('./form-associated.cjs');
 const affix = require('./affix.cjs');
 const localized = require('./localized.cjs');
 const formElements = require('./form-elements.cjs');
-const applyMixins = require('./apply-mixins.cjs');
 const option = require('./option.cjs');
-const definition$2 = require('./definition38.cjs');
+const applyMixins = require('./apply-mixins.cjs');
 const when = require('./when.cjs');
 const ref = require('./ref.cjs');
 const slotted = require('./slotted.cjs');
@@ -67,7 +67,7 @@ exports.SearchableSelect = class SearchableSelect extends FormAssociatedSearchab
     this.maxLines = null;
     this.values = [];
     this.initialValues = [];
-    this._internalSearchText = null;
+    this._currentSearchText = null;
     // --- Slotted options ---
     /**
      * @internal
@@ -181,29 +181,30 @@ exports.SearchableSelect = class SearchableSelect extends FormAssociatedSearchab
   /**
    * @internal
    */
-  _internalSearchTextChanged(newValue, oldValue) {
-    if (oldValue !== newValue) {
-      __privateMethod(this, _SearchableSelect_instances, updateFilteredOptions_fn).call(this);
-      this.$emit("input:search-text", void 0, {
-        bubbles: false,
-        composed: false
-      });
-    }
+  _currentSearchTextChanged() {
+    __privateMethod(this, _SearchableSelect_instances, updateFilteredOptions_fn).call(this);
+    this.$emit("search-text-change", void 0, {
+      bubbles: false,
+      composed: false
+    });
   }
+  /**
+   * The current search text of the component.
+   */
   get searchText() {
-    return this._internalSearchText ?? "";
+    return this._currentSearchText ?? "";
   }
   /**
    * @internal
    */
   get _inputValue() {
-    return this._internalSearchText ?? (!this.multiple && this.value !== "" ? __privateMethod(this, _SearchableSelect_instances, textForValue_fn).call(this, this.value) : "");
+    return this._currentSearchText ?? (!this.multiple && this.value !== "" ? __privateMethod(this, _SearchableSelect_instances, textForValue_fn).call(this, this.value) ?? "" : "");
   }
   /**
    * @internal
    */
   _onInputInput(event) {
-    this._internalSearchText = event.target.value;
+    this._currentSearchText = event.target.value;
   }
   /**
    * @internal
@@ -217,7 +218,7 @@ exports.SearchableSelect = class SearchableSelect extends FormAssociatedSearchab
    */
   _onInputBlur(_) {
     this.open = false;
-    this._internalSearchText = null;
+    this._currentSearchText = null;
     this._changeDescription = "";
   }
   /**
@@ -335,6 +336,12 @@ exports.SearchableSelect = class SearchableSelect extends FormAssociatedSearchab
   _tagIconSlotName(value) {
     return `_tag-icon-${this.values.indexOf(value)}`;
   }
+  /**
+   * @internal
+   */
+  optionFilterChanged() {
+    __privateMethod(this, _SearchableSelect_instances, updateFilteredOptions_fn).call(this);
+  }
   // --- Tags ---
   /**
    * @internal
@@ -494,9 +501,6 @@ updateValuesThroughUserInteraction_fn = function(newValues) {
 updateValuesWhileMaintainingOrder_fn = function(newValues) {
   const oldSet = new Set(this.values);
   const newSet = new Set(newValues);
-  if (oldSet.size === newSet.size && [...oldSet].every((v) => newSet.has(v))) {
-    return;
-  }
   this.values = [...this.values].filter((v) => newSet.has(v)).concat([...newValues].filter((v) => !oldSet.has(v)));
 };
 isValidValue_fn = function(value) {
@@ -533,7 +537,7 @@ handleOptionInteraction_fn = function(option) {
   this._changeDescription = isSelection ? this.locale.searchableSelect.optionSelectedMessage(option.text) : this.locale.searchableSelect.optionDeselectedMessage(option.text);
   __privateMethod(this, _SearchableSelect_instances, updateValuesThroughUserInteraction_fn).call(this, newValues);
   if (shouldClearSearchText) {
-    this._internalSearchText = null;
+    this._currentSearchText = null;
   }
 };
 _clonedTagIcons = new WeakMap();
@@ -559,17 +563,12 @@ updateClonedTagIconOfOption_fn = function(option) {
 };
 updateFilteredOptions_fn = function() {
   const newFilteredOptions = [];
-  const filterOption = this.filterOption ?? ((option, searchText) => option.text.toLowerCase().includes(searchText.toLowerCase()));
+  const optionFilter = this.optionFilter ?? ((option, searchText) => option.text.toLowerCase().includes(searchText.toLowerCase()));
   for (const option of this._slottedOptions ?? []) {
-    if (this.searchText === "") {
-      option._hidden = false;
-      option._internalHighlightText = "";
-    } else {
-      const matches = filterOption(option, this.searchText);
-      option._hidden = !matches;
-      option._internalHighlightText = matches ? this.searchText : "";
-    }
-    if (!option.hidden && !option._hidden) {
+    option._vvdSearchText = this.searchText;
+    const matches = !this.searchText || optionFilter(option, this.searchText);
+    option._isNotMatching = !matches;
+    if (!option.hidden && matches) {
       newFilteredOptions.push(option);
     }
   }
@@ -630,10 +629,7 @@ highlightNextOption_fn = function() {
   __privateMethod(this, _SearchableSelect_instances, transitionHighlightedOptionTo_fn).call(this, (this._highlightedOptionIndex ?? -1) + 1);
 };
 textForValue_fn = function(value) {
-  const option = this._slottedOptions.find(
-    (option2) => option2.value === value
-  );
-  return option.text;
+  return this._slottedOptions?.find((option) => option.value === value)?.text;
 };
 /**
  * @internal
@@ -801,19 +797,19 @@ __decorateClass$1([
 ], exports.SearchableSelect.prototype, "_input", 2);
 __decorateClass$1([
   vividElement.observable
-], exports.SearchableSelect.prototype, "_internalSearchText", 2);
+], exports.SearchableSelect.prototype, "_currentSearchText", 2);
 __decorateClass$1([
   vividElement.observable
 ], exports.SearchableSelect.prototype, "_slottedOptions", 2);
 __decorateClass$1([
   vividElement.observable
-], exports.SearchableSelect.prototype, "_filteredOptions", 2);
+], exports.SearchableSelect.prototype, "optionFilter", 2);
 __decorateClass$1([
   vividElement.observable
-], exports.SearchableSelect.prototype, "_filteredEnabledOptions", 2);
+], exports.SearchableSelect.prototype, "_filteredOptions", 2);
 __decorateClass$1([
   vividElement.observable
-], exports.SearchableSelect.prototype, "filterOption", 2);
+], exports.SearchableSelect.prototype, "_filteredEnabledOptions", 2);
 __decorateClass$1([
   vividElement.attr({
     mode: "boolean"
@@ -1084,8 +1080,8 @@ function renderControl(context) {
     vividElement.html`<div class="empty-message">
 								${when.when(
       (x) => x.loading,
-      vividElement.html` <slot name="loading-options">
-										Loading...
+      vividElement.html`<slot name="loading-options">
+										${(x) => x.locale.searchableSelect.loadingOptionsMessage}
 									</slot>`
     )}
 								${when.when(