@vonage/vivid 5.20.0 → 5.20.1

package/rich-text-editor/index.js

@@ -6017,6 +6017,9 @@ var $s = Qs(!1, !0), ec = Qs(!0, !0), tc = (e) => typeof e == "function", nc = (
 	updateBindings() {
 		for (let e of this.bindings) e();
 	}
+	shouldReturnFocusToEditor() {
+		return this.evalProp(this.props.shouldReturnFocusToEditor);
+	}
 	bindToEl(e, t = {}, n = [], r = []) {
 		for (let n in t) this.bindProp(t[n], (t) => {
 			e[n] = t;
@@ -6066,7 +6069,7 @@ var $s = Qs(!1, !0), ec = Qs(!0, !0), tc = (e) => typeof e == "function", nc = (
 		pressed: () => !!e.evalProp(t.active),
 		ariaPressed: t.active === void 0 ? void 0 : () => e.evalProp(t.active) ? "true" : "false"
 	}, [nc("click", t.onClick, (t) => () => {
-		t() || e.view.focus();
+		!t() && e.shouldReturnFocusToEditor() && e.view.focus();
 	})]), sc(e, {
 		enabled: () => !!(e.evalProp(t.icon) && !e.evalProp(t.noTooltip) && !c()),
 		label: t.label,
@@ -6094,7 +6097,7 @@ var $s = Qs(!1, !0), ec = Qs(!0, !0), tc = (e) => typeof e == "function", nc = (
 		controlType: "radio",
 		checkedAppearance: "tick-only"
 	}, [nc("change", t.onSelect, (n) => () => {
-		r.checked && !r.disabled && e.evalProp(t.checked) !== r.checked && (n(), e.view.focus());
+		r.checked && !r.disabled && e.evalProp(t.checked) !== r.checked && (n(), e.shouldReturnFocusToEditor() && e.view.focus());
 	})]), r;
 }, uc = (e, t) => ic(e, {
 	slot: t.slot,
@@ -6129,7 +6132,7 @@ var fc = (e, t) => K(e, {
 		disabled: n
 	}, [nc("change", t.onSelect, (t) => () => {
 		let n = r.value;
-		n && (t(n), e.view.focus());
+		n && (t(n), e.shouldReturnFocusToEditor() && e.view.focus());
 	})], t.children), queueMicrotask(() => {
 		e.bindProp(t.value, (e) => r.value = e);
 	});
@@ -6180,7 +6183,7 @@ var fc = (e, t) => K(e, {
 		for (let [r, i] of Object.entries(t.assignedProps)) n[r] = e.evalProp(i);
 		for (let [r, a] of Object.entries(t.assignedEvents)) {
 			let t = (t) => {
-				a(t), e.view.focus();
+				a(t), e.shouldReturnFocusToEditor() && e.view.focus();
 			};
 			n.addEventListener(r, t), i.push({
 				el: n,
@@ -7531,26 +7534,33 @@ var ou = (e) => e.parent.textBetween(0, e.parentOffset, void 0, ""), su = cla
 		for (let t of _e(e.features.flatMap((t) => t.getToolbarItems(e)))) n.get(t.section).push(t);
 		let r = e.getFeature("RteCore");
 		return [this.contribution(this.hidden.plugin), this.contribution(new N({ view: (i) => {
-			let a = new rc(i, e, {
+			let a = !1, o = new rc(i, e, {
 				popupPlacement: this.config?.popupDirection === "outward" ? "bottom" : "top",
 				menuOffset: 8,
-				disabled: () => r.disabled.getValue(e)
-			}), o = i.dom.getRootNode().querySelector(".toolbar");
-			a.bindProp(() => this.hidden.getValue(e), (e) => {
-				o.classList.toggle("toolbar--hidden", e);
+				disabled: () => r.disabled.getValue(e),
+				shouldReturnFocusToEditor: () => a
+			}), s = i.dom.getRootNode().querySelector(".toolbar"), c = -Infinity, l = () => {
+				i.hasFocus() && (a = !0), c = Date.now();
+			}, u = () => {
+				Date.now() - c > 250 && (a = !1);
+			}, d = (e) => {
+				s.contains(e.relatedTarget) || (a = !1);
+			};
+			s.addEventListener("mousedown", l, { capture: !0 }), s.addEventListener("focusin", u), s.addEventListener("focusout", d), o.bindProp(() => this.hidden.getValue(e), (e) => {
+				s.classList.toggle("toolbar--hidden", e);
 			});
-			let s = !1;
+			let f = !1;
 			for (let e of t) {
 				let t = n.get(e);
-				t.length && s && (o.appendChild(hc(a)), s = !1);
-				for (let e of t) o.appendChild(e.render(a)), s = !0;
+				t.length && f && (s.appendChild(hc(o)), f = !1);
+				for (let e of t) s.appendChild(e.render(o)), f = !0;
 			}
 			return {
 				update() {
-					a.updateBindings();
+					o.updateBindings();
 				},
 				destroy() {
-					o.innerHTML = "";
+					s.innerHTML = "", s.removeEventListener("mousedown", l, { capture: !0 }), s.removeEventListener("focusin", u), s.removeEventListener("focusout", d), a = !1;
 				}
 			};
 		} }))];
@@ -8465,7 +8475,10 @@ var fd = y(class extends w {
 				return null;
 			} },
 			view: (t) => {
-				let r = new rc(t, e, { popupPlacement: "bottom" });
+				let r = new rc(t, e, {
+					popupPlacement: "bottom",
+					shouldReturnFocusToEditor: !0
+				});
 				n = e.createComponent(E), n.anchorId = "current-link";
 				let i = ic(r, {
 					className: "link-popover",
@@ -8571,7 +8584,7 @@ var fd = y(class extends w {
 					},
 					onClick: () => {
 						let { state: t, dispatch: n } = r.view;
-						this.insertLink(e, a.value, i.value)(t, n);
+						this.insertLink(e, a.value, i.value)(t, n), this.toolbarMenu.open = !1;
 					}
 				}), s = () => {
 					o.querySelector("[data-vvd-component=\"button\"]").disabled = !(i.value.length && n(a.value));
@@ -8744,7 +8757,10 @@ var fd = y(class extends w {
 		return [this.contribution(new N({
 			props: { nodeViews: { inlineImage: (e, t, n) => new _d(e, t, n, this.config) } },
 			view: (n) => {
-				let r = new rc(n, e, { popupPlacement: "bottom" });
+				let r = new rc(n, e, {
+					popupPlacement: "bottom",
+					shouldReturnFocusToEditor: !0
+				});
 				t = e.createComponent(E), t.offset = 4;
 				let i = ic(r, {
 					className: "inline-image-popover",
@@ -9167,7 +9183,10 @@ var Nd = (e, t, n) => {
 				return t ? t.loadingDecoration.add(e.doc, [ja.inline(t.match.start, t.match.end, { id: `suggest-anchor-${this.featureId}` })]) : null;
 			} },
 			view: (t) => {
-				let n = new rc(t, e, { popupPlacement: "bottom" }), r = e.createComponent(E);
+				let n = new rc(t, e, {
+					popupPlacement: "bottom",
+					shouldReturnFocusToEditor: !0
+				}), r = e.createComponent(E);
 				r.anchorId = `suggest-anchor-${this.featureId}`, r.kind = "autocomplete", r.offset = 4;
 				let i = ic(n, {
 					className: "suggest-popover",

package/unbundled/definition60.cjs

@@ -268,6 +268,9 @@ var UiCtx = class {
 	updateBindings() {
 		for (const binding of this.bindings) binding();
 	}
+	shouldReturnFocusToEditor() {
+		return this.evalProp(this.props.shouldReturnFocusToEditor);
+	}
 	bindToEl(target, props = {}, events = [], children = []) {
 		for (const name in props) this.bindProp(props[name], (value) => {
 			target[name] = value;
@@ -335,7 +338,7 @@ var createButton = (ctx, props) => {
 		pressed: () => Boolean(ctx.evalProp(props.active)),
 		ariaPressed: props.active !== void 0 ? () => ctx.evalProp(props.active) ? "true" : "false" : void 0
 	}, [on("click", props.onClick, (onClick) => () => {
-		if (!onClick()) ctx.view.focus();
+		if (!onClick() && ctx.shouldReturnFocusToEditor()) ctx.view.focus();
 	})]);
 	return createOptionalTooltip(ctx, {
 		enabled: () => Boolean(ctx.evalProp(props.icon) && !ctx.evalProp(props.noTooltip) && !disabled()),
@@ -372,7 +375,7 @@ var createMenuItem = (ctx, props) => {
 		if (item.checked && !item.disabled) {
 			if (ctx.evalProp(props.checked) !== item.checked) {
 				onSelect();
-				ctx.view.focus();
+				if (ctx.shouldReturnFocusToEditor()) ctx.view.focus();
 			}
 		}
 	})]);
@@ -420,7 +423,7 @@ var createSelect = (ctx, props) => {
 		const value = select.value;
 		if (value) {
 			onSelect(value);
-			ctx.view.focus();
+			if (ctx.shouldReturnFocusToEditor()) ctx.view.focus();
 		}
 	})], props.children);
 	queueMicrotask(() => {
@@ -487,7 +490,7 @@ var createSingleSlot = (ctx, props) => {
 		for (const [type, handler] of Object.entries(props.assignedEvents)) {
 			const listener = (e) => {
 				handler(e);
-				ctx.view.focus();
+				if (ctx.shouldReturnFocusToEditor()) ctx.view.focus();
 			};
 			el.addEventListener(type, listener);
 			listeners.push({
@@ -1423,12 +1426,28 @@ var RteToolbarFeatureImpl = class extends require_slottable_request.RteFeatureIm
 		for (const toolbarItem of require_slottable_request.sortedContributions(rte.features.flatMap((f) => f.getToolbarItems(rte)))) itemsBySection.get(toolbarItem.section).push(toolbarItem);
 		const core = rte.getFeature("RteCore");
 		return [this.contribution(this.hidden.plugin), this.contribution(new prosemirror_state.Plugin({ view: (view) => {
+			let focusCameFromEditorWithMouse = false;
 			const ctx = new UiCtx(view, rte, {
 				popupPlacement: this.config?.popupDirection === "outward" ? "bottom" : "top",
 				menuOffset: 8,
-				disabled: () => core.disabled.getValue(rte)
+				disabled: () => core.disabled.getValue(rte),
+				shouldReturnFocusToEditor: () => focusCameFromEditorWithMouse
 			});
 			const toolbar = view.dom.getRootNode().querySelector(".toolbar");
+			let mouseDownTime = -Infinity;
+			const onMouseDown = () => {
+				if (view.hasFocus()) focusCameFromEditorWithMouse = true;
+				mouseDownTime = Date.now();
+			};
+			const onFocusIn = () => {
+				if (Date.now() - mouseDownTime > 250) focusCameFromEditorWithMouse = false;
+			};
+			const onFocusOut = (e) => {
+				if (!toolbar.contains(e.relatedTarget)) focusCameFromEditorWithMouse = false;
+			};
+			toolbar.addEventListener("mousedown", onMouseDown, { capture: true });
+			toolbar.addEventListener("focusin", onFocusIn);
+			toolbar.addEventListener("focusout", onFocusOut);
 			ctx.bindProp(() => this.hidden.getValue(rte), (hidden) => {
 				toolbar.classList.toggle("toolbar--hidden", hidden);
 			});
@@ -1450,6 +1469,10 @@ var RteToolbarFeatureImpl = class extends require_slottable_request.RteFeatureIm
 				},
 				destroy() {
 					toolbar.innerHTML = "";
+					toolbar.removeEventListener("mousedown", onMouseDown, { capture: true });
+					toolbar.removeEventListener("focusin", onFocusIn);
+					toolbar.removeEventListener("focusout", onFocusOut);
+					focusCameFromEditorWithMouse = false;
 				}
 			};
 		} }))];
@@ -2402,7 +2425,10 @@ var RteLinkFeatureImpl = class extends require_slottable_request.RteFeatureImpl
 				return null;
 			} },
 			view: (view) => {
-				const ctx = new UiCtx(view, rte, { popupPlacement: "bottom" });
+				const ctx = new UiCtx(view, rte, {
+					popupPlacement: "bottom",
+					shouldReturnFocusToEditor: true
+				});
 				popup = rte.createComponent(Popover);
 				popup.anchorId = "current-link";
 				const content = createDiv(ctx, {
@@ -2527,6 +2553,7 @@ var RteLinkFeatureImpl = class extends require_slottable_request.RteFeatureImpl
 					onClick: () => {
 						const { state, dispatch } = ctx.view;
 						this.insertLink(rte, urlField.value, textField.value)(state, dispatch);
+						this.toolbarMenu.open = false;
 					}
 				});
 				const updateValidation = () => {
@@ -2777,7 +2804,10 @@ var RteInlineImageFeatureImpl = class extends require_slottable_request.RteFeatu
 		return [this.contribution(new prosemirror_state.Plugin({
 			props: { nodeViews: { inlineImage: (node, view, getPos) => new InlineImageView(node, view, getPos, this.config) } },
 			view: (view) => {
-				const ctx = new UiCtx(view, rte, { popupPlacement: "bottom" });
+				const ctx = new UiCtx(view, rte, {
+					popupPlacement: "bottom",
+					shouldReturnFocusToEditor: true
+				});
 				popover = rte.createComponent(Popover);
 				popover.offset = 4;
 				const content = createDiv(ctx, {
@@ -3358,7 +3388,10 @@ var RteSuggestFeatureImpl = class extends require_slottable_request.RteFeatureIm
 				return suggestState.loadingDecoration.add(state.doc, [prosemirror_view.Decoration.inline(suggestState.match.start, suggestState.match.end, { id: `suggest-anchor-${this.featureId}` })]);
 			} },
 			view: (view) => {
-				const ctx = new UiCtx(view, rte, { popupPlacement: "bottom" });
+				const ctx = new UiCtx(view, rte, {
+					popupPlacement: "bottom",
+					shouldReturnFocusToEditor: true
+				});
 				const popover = rte.createComponent(Popover);
 				popover.anchorId = `suggest-anchor-${this.featureId}`;
 				popover.kind = "autocomplete";

package/unbundled/definition60.js

@@ -266,6 +266,9 @@ var UiCtx = class {
 	updateBindings() {
 		for (const binding of this.bindings) binding();
 	}
+	shouldReturnFocusToEditor() {
+		return this.evalProp(this.props.shouldReturnFocusToEditor);
+	}
 	bindToEl(target, props = {}, events = [], children = []) {
 		for (const name in props) this.bindProp(props[name], (value) => {
 			target[name] = value;
@@ -333,7 +336,7 @@ var createButton = (ctx, props) => {
 		pressed: () => Boolean(ctx.evalProp(props.active)),
 		ariaPressed: props.active !== void 0 ? () => ctx.evalProp(props.active) ? "true" : "false" : void 0
 	}, [on("click", props.onClick, (onClick) => () => {
-		if (!onClick()) ctx.view.focus();
+		if (!onClick() && ctx.shouldReturnFocusToEditor()) ctx.view.focus();
 	})]);
 	return createOptionalTooltip(ctx, {
 		enabled: () => Boolean(ctx.evalProp(props.icon) && !ctx.evalProp(props.noTooltip) && !disabled()),
@@ -370,7 +373,7 @@ var createMenuItem = (ctx, props) => {
 		if (item.checked && !item.disabled) {
 			if (ctx.evalProp(props.checked) !== item.checked) {
 				onSelect();
-				ctx.view.focus();
+				if (ctx.shouldReturnFocusToEditor()) ctx.view.focus();
 			}
 		}
 	})]);
@@ -418,7 +421,7 @@ var createSelect = (ctx, props) => {
 		const value = select.value;
 		if (value) {
 			onSelect(value);
-			ctx.view.focus();
+			if (ctx.shouldReturnFocusToEditor()) ctx.view.focus();
 		}
 	})], props.children);
 	queueMicrotask(() => {
@@ -485,7 +488,7 @@ var createSingleSlot = (ctx, props) => {
 		for (const [type, handler] of Object.entries(props.assignedEvents)) {
 			const listener = (e) => {
 				handler(e);
-				ctx.view.focus();
+				if (ctx.shouldReturnFocusToEditor()) ctx.view.focus();
 			};
 			el.addEventListener(type, listener);
 			listeners.push({
@@ -1421,12 +1424,28 @@ var RteToolbarFeatureImpl = class extends RteFeatureImpl {
 		for (const toolbarItem of sortedContributions(rte.features.flatMap((f) => f.getToolbarItems(rte)))) itemsBySection.get(toolbarItem.section).push(toolbarItem);
 		const core = rte.getFeature("RteCore");
 		return [this.contribution(this.hidden.plugin), this.contribution(new Plugin({ view: (view) => {
+			let focusCameFromEditorWithMouse = false;
 			const ctx = new UiCtx(view, rte, {
 				popupPlacement: this.config?.popupDirection === "outward" ? "bottom" : "top",
 				menuOffset: 8,
-				disabled: () => core.disabled.getValue(rte)
+				disabled: () => core.disabled.getValue(rte),
+				shouldReturnFocusToEditor: () => focusCameFromEditorWithMouse
 			});
 			const toolbar = view.dom.getRootNode().querySelector(".toolbar");
+			let mouseDownTime = -Infinity;
+			const onMouseDown = () => {
+				if (view.hasFocus()) focusCameFromEditorWithMouse = true;
+				mouseDownTime = Date.now();
+			};
+			const onFocusIn = () => {
+				if (Date.now() - mouseDownTime > 250) focusCameFromEditorWithMouse = false;
+			};
+			const onFocusOut = (e) => {
+				if (!toolbar.contains(e.relatedTarget)) focusCameFromEditorWithMouse = false;
+			};
+			toolbar.addEventListener("mousedown", onMouseDown, { capture: true });
+			toolbar.addEventListener("focusin", onFocusIn);
+			toolbar.addEventListener("focusout", onFocusOut);
 			ctx.bindProp(() => this.hidden.getValue(rte), (hidden) => {
 				toolbar.classList.toggle("toolbar--hidden", hidden);
 			});
@@ -1448,6 +1467,10 @@ var RteToolbarFeatureImpl = class extends RteFeatureImpl {
 				},
 				destroy() {
 					toolbar.innerHTML = "";
+					toolbar.removeEventListener("mousedown", onMouseDown, { capture: true });
+					toolbar.removeEventListener("focusin", onFocusIn);
+					toolbar.removeEventListener("focusout", onFocusOut);
+					focusCameFromEditorWithMouse = false;
 				}
 			};
 		} }))];
@@ -2400,7 +2423,10 @@ var RteLinkFeatureImpl = class extends RteFeatureImpl {
 				return null;
 			} },
 			view: (view) => {
-				const ctx = new UiCtx(view, rte, { popupPlacement: "bottom" });
+				const ctx = new UiCtx(view, rte, {
+					popupPlacement: "bottom",
+					shouldReturnFocusToEditor: true
+				});
 				popup = rte.createComponent(Popover);
 				popup.anchorId = "current-link";
 				const content = createDiv(ctx, {
@@ -2525,6 +2551,7 @@ var RteLinkFeatureImpl = class extends RteFeatureImpl {
 					onClick: () => {
 						const { state, dispatch } = ctx.view;
 						this.insertLink(rte, urlField.value, textField.value)(state, dispatch);
+						this.toolbarMenu.open = false;
 					}
 				});
 				const updateValidation = () => {
@@ -2775,7 +2802,10 @@ var RteInlineImageFeatureImpl = class extends RteFeatureImpl {
 		return [this.contribution(new Plugin({
 			props: { nodeViews: { inlineImage: (node, view, getPos) => new InlineImageView(node, view, getPos, this.config) } },
 			view: (view) => {
-				const ctx = new UiCtx(view, rte, { popupPlacement: "bottom" });
+				const ctx = new UiCtx(view, rte, {
+					popupPlacement: "bottom",
+					shouldReturnFocusToEditor: true
+				});
 				popover = rte.createComponent(Popover);
 				popover.offset = 4;
 				const content = createDiv(ctx, {
@@ -3356,7 +3386,10 @@ var RteSuggestFeatureImpl = class extends RteFeatureImpl {
 				return suggestState.loadingDecoration.add(state.doc, [Decoration.inline(suggestState.match.start, suggestState.match.end, { id: `suggest-anchor-${this.featureId}` })]);
 			} },
 			view: (view) => {
-				const ctx = new UiCtx(view, rte, { popupPlacement: "bottom" });
+				const ctx = new UiCtx(view, rte, {
+					popupPlacement: "bottom",
+					shouldReturnFocusToEditor: true
+				});
 				const popover = rte.createComponent(Popover);
 				popover.anchorId = `suggest-anchor-${this.featureId}`;
 				popover.kind = "autocomplete";

package/unbundled/vivid-element.cjs

@@ -299,7 +299,7 @@ var ReplacedPropHandling = (Base) => {
 */
 var VividElement = class extends AriaMixin(ReplacedPropHandling(ReactiveControllerHostSupport(_microsoft_fast_element.FASTElement))) {
 	static {
-		this.VIVID_VERSION = "5.20.0";
+		this.VIVID_VERSION = "5.20.1";
 	}
 	/**
 	* Add data-vvd-component attribute with component name globally,

package/unbundled/vivid-element.js

@@ -298,7 +298,7 @@ var ReplacedPropHandling = (Base) => {
 */
 var VividElement = class extends AriaMixin(ReplacedPropHandling(ReactiveControllerHostSupport(FASTElement))) {
 	static {
-		this.VIVID_VERSION = "5.20.0";
+		this.VIVID_VERSION = "5.20.1";
 	}
 	/**
 	* Add data-vvd-component attribute with component name globally,