@vonage/vivid 4.19.0 → 4.20.0

package/shared/definition43.cjs

@@ -2,13 +2,15 @@
 
 const vividElement = require('./vivid-element.cjs');
 const definition = require('./definition11.cjs');
-const definition$1 = require('./definition30.cjs');
+const definition$3 = require('./definition30.cjs');
+const definition$1 = require('./definition23.cjs');
+const definition$2 = require('./definition60.cjs');
 const classNames = require('./class-names.cjs');
 const repeat = require('./repeat.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 = ":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)}";
+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}";
 
 var __defProp$1 = Object.defineProperty;
 var __decorateClass$1 = (decorators, target, key, kind) => {
@@ -29,26 +31,56 @@ 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 MENU_BAR_ITEMS = {
   textSize: function(context) {
     const buttonTag = context.tagFor(definition.Button);
-    const menuTag = context.tagFor(definition$1.Menu);
-    const menuItemTag = context.tagFor(definition$1.MenuItem);
+    const menuTag = context.tagFor(definition$3.Menu);
+    const menuItemTag = context.tagFor(definition$3.MenuItem);
+    const tooltipTag = context.tagFor(definition$2.Tooltip);
     return vividElement.html`
 			<${menuTag}
 				trigger="auto"
 				id="text-size"
-				aria-label="Menu example"
+				aria-label="Text Size"
 				placement="bottom-end"
 			>
-				<${buttonTag}
-					slot="anchor"
-					aria-label="Open menu"
-					size="super-condensed"
-					appearance="ghost-light"
-					shape="pill"
-					icon="text-size-line"
-				></${buttonTag}>
+				<${tooltipTag} slot="anchor" text="Text Size" 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}>
 				<${menuItemTag}
 					text="Title"
 					value="title"
@@ -75,13 +107,42 @@ const MENU_BAR_ITEMS = {
 				></${menuItemTag}>
 			</${menuTag}>
 		`;
+  },
+  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}>
+				`
+    )}
+			<${dividerTag} class="divider" orientation="vertical"></${dividerTag}>
+		`;
   }
 };
 const getClasses$1 = (menuBar) => classNames.classNames("control", [
   "hide-menubar",
   getValidMenuItems(menuBar).length === 0
 ]);
-const validItems = ["textSize"];
+const validItems = ["textSize", "textDecoration"];
 function createMenuItem(item) {
   return MENU_BAR_ITEMS[item];
 }
@@ -104,7 +165,13 @@ const menuBarDefinition = vividElement.defineVividComponent(
   "menubar",
   MenuBar,
   MenuBarTemplate,
-  [definition.buttonDefinition, definition$1.menuDefinition, definition$1.menuItemDefinition],
+  [
+    definition.buttonDefinition,
+    definition$3.menuDefinition,
+    definition$3.menuItemDefinition,
+    definition$1.dividerDefinition,
+    definition$2.tooltipDefinition
+  ],
   {
     styles,
     shadowOptions: {
@@ -13235,6 +13302,68 @@ const selectTextblockStart = selectTextblockSide(-1);
 Moves the cursor to the end of current text block.
 */
 const selectTextblockEnd = selectTextblockSide(1);
+function markApplies(doc, ranges, type, enterAtoms) {
+    for (let i = 0; i < ranges.length; i++) {
+        let { $from, $to } = ranges[i];
+        let can = $from.depth == 0 ? doc.inlineContent && doc.type.allowsMarkType(type) : false;
+        doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
+            if (can || false)
+                return false;
+            can = node.inlineContent && node.type.allowsMarkType(type);
+        });
+        if (can)
+            return true;
+    }
+    return false;
+}
+/**
+Create a command function that toggles the given mark with the
+given attributes. Will return `false` when the current selection
+doesn't support that mark. This will remove the mark if any marks
+of that type exist in the selection, or add it otherwise. If the
+selection is empty, this applies to the [stored
+marks](https://prosemirror.net/docs/ref/#state.EditorState.storedMarks) instead of a range of the
+document.
+*/
+function toggleMark(markType, attrs = null, options) {
+    return function (state, dispatch) {
+        let { empty, $cursor, ranges } = state.selection;
+        if ((empty && !$cursor) || !markApplies(state.doc, ranges, markType))
+            return false;
+        if (dispatch) {
+            if ($cursor) {
+                if (markType.isInSet(state.storedMarks || $cursor.marks()))
+                    dispatch(state.tr.removeStoredMark(markType));
+                else
+                    dispatch(state.tr.addStoredMark(markType.create(attrs)));
+            }
+            else {
+                let add, tr = state.tr;
+                {
+                    add = !ranges.some(r => state.doc.rangeHasMark(r.$from.pos, r.$to.pos, markType));
+                }
+                for (let i = 0; i < ranges.length; i++) {
+                    let { $from, $to } = ranges[i];
+                    if (!add) {
+                        tr.removeMark($from.pos, $to.pos, markType);
+                    }
+                    else {
+                        let from = $from.pos, to = $to.pos, start = $from.nodeAfter, end = $to.nodeBefore;
+                        let spaceStart = start && start.isText ? /^\s*/.exec(start.text)[0].length : 0;
+                        let spaceEnd = end && end.isText ? /\s*$/.exec(end.text)[0].length : 0;
+                        if (from + spaceStart < to) {
+                            from += spaceStart;
+                            to -= spaceEnd;
+                        }
+                        tr.addMark(from, to, markType.create(attrs));
+                    }
+                }
+                dispatch(tr.scrollIntoView());
+            }
+        }
+        return true;
+    };
+}
 /**
 Combine a number of command functions into a single function (which
 calls them one by one until one returns true).
@@ -13479,6 +13608,34 @@ To reuse elements from this schema, extend or read from its
 */
 const schema = new Schema({ nodes, marks });
 
+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];
+    }
+  }
+};
+const extendedSchema = new Schema({
+  nodes: schema.spec.nodes,
+  marks: {
+    ...schema.spec.marks.toObject(),
+    ...customMarks
+  }
+});
+
 const NEGATIVE_SELECTION = {
   start: -1,
   end: -1
@@ -13528,6 +13685,13 @@ function convertSelectionToVividFormat({
 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");
   };
@@ -13553,7 +13717,7 @@ class ProseMirrorFacade {
       keymap(baseKeymap)
     ];
     const state = EditorState.create({
-      schema: schema,
+      schema: extendedSchema,
       plugins
     });
     this.#view = new EditorView(element, { state });
@@ -13561,12 +13725,8 @@ class ProseMirrorFacade {
     this.#view.dom.addEventListener("blur", this.#handleChangeEvent);
   }
   replaceContent(content) {
-    if (!this.#view) {
-      throw new Error(
-        "ProseMirror was not initiated. Please use the `init` method first."
-      );
-    }
-    const parser = DOMParser.fromSchema(schema);
+    this.#verifyViewInitiation();
+    const parser = DOMParser.fromSchema(extendedSchema);
     const doc = parser.parse(
       new window.DOMParser().parseFromString(content, "text/html").body
     );
@@ -13594,11 +13754,7 @@ class ProseMirrorFacade {
     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."
-      );
-    }
+    this.#verifyViewInitiation();
     const nodeDefinitions = TagToSchemaMap[tag] ?? {
       type: tag
     };
@@ -13617,6 +13773,23 @@ class ProseMirrorFacade {
     });
     dispatch(tr);
   }
+  setSelectionDecoration(decoration) {
+    const SUPPORTED_DECORATIONS = {
+      bold: "strong",
+      italics: "em",
+      underline: "u",
+      strikethrough: "s",
+      monospace: "tt"
+    };
+    this.#verifyViewInitiation();
+    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`);
+    }
+    toggleMark(markType)(state, dispatch);
+  }
 }
 
 var __defProp = Object.defineProperty;
@@ -13729,6 +13902,13 @@ class RichTextEditor extends vividElement.VividElement {
       console.warn(`Invalid text size: ${size}`);
     }
   }
+  setSelectionDecoration(decoration) {
+    try {
+      this.#editor?.setSelectionDecoration(decoration);
+    } catch (e) {
+      console.warn(`Invalid decoration: ${decoration}`);
+    }
+  }
 }
 __decorateClass([
   vividElement.attr({ converter: vividElement.nullableNumberConverter, attribute: "selection-start" })
@@ -13742,6 +13922,9 @@ const VALID_MENU_ELEMEMENT_SUFFIX = "menubar";
 function textSizeSelectedHandler(event) {
   this.setTextSize(event.detail);
 }
+function selectionDecorationSelectedHandler(event) {
+  this.setSelectionDecoration(event.detail);
+}
 function handleMenuBarSlotChange(richTextEditor, { event }) {
   const slot = event.target;
   const assignedElements = slot.assignedElements({ flatten: true });
@@ -13749,13 +13932,21 @@ function handleMenuBarSlotChange(richTextEditor, { event }) {
     (element) => element.tagName.toLowerCase().endsWith(VALID_MENU_ELEMEMENT_SUFFIX)
   );
   assignedElements.forEach((element) => {
-    element.style.display = element === menuBar ? "block" : "none";
+    if (element === menuBar) {
+      element.style.removeProperty("display");
+    } else {
+      element.style.display = "none";
+    }
   });
   if (menuBar) {
     menuBar.addEventListener(
       "text-size-selected",
       textSizeSelectedHandler.bind(richTextEditor)
     );
+    menuBar.addEventListener(
+      "text-decoration-selected",
+      selectionDecorationSelectedHandler.bind(richTextEditor)
+    );
   }
 }
 const RichTextEditorTemplate = (_) => {