@zipify/wysiwyg 1.2.1-0 → 1.2.1

package/dist/wysiwyg.mjs

@@ -9025,7 +9025,7 @@ const newlineInCode$1 = (state, dispatch) => {
     dispatch(state.tr.insertText("\n").scrollIntoView());
   return true;
 };
-function defaultBlockAt(match2) {
+function defaultBlockAt$1(match2) {
   for (let i = 0; i < match2.edgeCount; i++) {
     let { type } = match2.edge(i);
     if (type.isTextblock && !type.hasRequiredAttrs())
@@ -9037,7 +9037,7 @@ const exitCode$1 = (state, dispatch) => {
   let { $head, $anchor } = state.selection;
   if (!$head.parent.type.spec.code || !$head.sameParent($anchor))
     return false;
-  let above = $head.node(-1), after = $head.indexAfter(-1), type = defaultBlockAt(above.contentMatchAt(after));
+  let above = $head.node(-1), after = $head.indexAfter(-1), type = defaultBlockAt$1(above.contentMatchAt(after));
   if (!type || !above.canReplaceWith(after, after, type))
     return false;
   if (dispatch) {
@@ -9051,7 +9051,7 @@ const createParagraphNear$1 = (state, dispatch) => {
   let sel = state.selection, { $from, $to } = sel;
   if (sel instanceof AllSelection || $from.parent.inlineContent || $to.parent.inlineContent)
     return false;
-  let type = defaultBlockAt($to.parent.contentMatchAt($to.indexAfter()));
+  let type = defaultBlockAt$1($to.parent.contentMatchAt($to.indexAfter()));
   if (!type || !type.isTextblock)
     return false;
   if (dispatch) {
@@ -9410,11 +9410,11 @@ class CommandManager {
   }
   createCan(startTr) {
     const { rawCommands, state } = this;
-    const dispatch = void 0;
+    const dispatch = false;
     const tr = startTr || state.tr;
     const props = this.buildProps(tr, dispatch);
     const formattedCommands = Object.fromEntries(Object.entries(rawCommands).map(([name, command2]) => {
-      return [name, (...args) => command2(...args)({ ...props, dispatch })];
+      return [name, (...args) => command2(...args)({ ...props, dispatch: void 0 })];
     }));
     return {
       ...formattedCommands,
@@ -10071,7 +10071,7 @@ function pasteRulesPlugin(props) {
           editor,
           state: chainableState,
           from: Math.max(from2 - 1, 0),
-          to: to.b,
+          to: to.b - 1,
           rule
         });
         if (!handler || !tr.steps.length) {
@@ -10216,13 +10216,18 @@ class ExtensionManager {
       };
       const plugins = [];
       const addKeyboardShortcuts = getExtensionField(extension, "addKeyboardShortcuts", context);
+      let defaultBindings = {};
+      if (extension.type === "mark" && extension.config.exitable) {
+        defaultBindings.ArrowRight = () => Mark.handleExit({ editor, mark: extension });
+      }
       if (addKeyboardShortcuts) {
         const bindings = Object.fromEntries(Object.entries(addKeyboardShortcuts()).map(([shortcut, method]) => {
           return [shortcut, () => method({ editor })];
         }));
-        const keyMapPlugin = keymap(bindings);
-        plugins.push(keyMapPlugin);
+        defaultBindings = { ...defaultBindings, ...bindings };
       }
+      const keyMapPlugin = keymap(defaultBindings);
+      plugins.push(keyMapPlugin);
       const addInputRules = getExtensionField(extension, "addInputRules", context);
       if (isExtensionRulesEnabled(extension, editor.options.enableInputRules) && addInputRules) {
         inputRules.push(...addInputRules());
@@ -10597,18 +10602,8 @@ const first = (commands2) => (props) => {
   }
   return false;
 };
-function isClass(value) {
-  var _a;
-  if (((_a = value.constructor) === null || _a === void 0 ? void 0 : _a.toString().substring(0, 5)) !== "class") {
-    return false;
-  }
-  return true;
-}
-function isObject$g(value) {
-  return value && typeof value === "object" && !Array.isArray(value) && !isClass(value);
-}
 function isTextSelection(value) {
-  return isObject$g(value) && value instanceof TextSelection;
+  return value instanceof TextSelection;
 }
 function minMax(value = 0, min2 = 0, max2 = 0) {
   return Math.min(Math.max(value, min2), max2);
@@ -11068,10 +11063,8 @@ const setNode = (typeOrName, attributes = {}) => ({ state, dispatch, chain }) =>
 const setNodeSelection = (position) => ({ tr, dispatch }) => {
   if (dispatch) {
     const { doc: doc2 } = tr;
-    const minPos = Selection.atStart(doc2).from;
-    const maxPos = Selection.atEnd(doc2).to;
-    const resolvedPos = minMax(position, minPos, maxPos);
-    const selection = NodeSelection.create(doc2, resolvedPos);
+    const from2 = minMax(position, 0, doc2.content.size);
+    const selection = NodeSelection.create(doc2, from2);
     tr.setSelection(selection);
   }
   return true;
@@ -11093,6 +11086,15 @@ const sinkListItem = (typeOrName) => ({ state, dispatch }) => {
   const type = getNodeType(typeOrName, state.schema);
   return sinkListItem$1(type)(state, dispatch);
 };
+function defaultBlockAt(match2) {
+  for (let i = 0; i < match2.edgeCount; i += 1) {
+    const { type } = match2.edge(i);
+    if (type.isTextblock && !type.hasRequiredAttrs()) {
+      return type;
+    }
+  }
+  return null;
+}
 function getSplittedAttributes(extensionAttributes, typeName, attributes) {
   return Object.fromEntries(Object.entries(attributes).filter(([name]) => {
     const extensionAttribute = extensionAttributes.find((item) => {
@@ -11104,15 +11106,6 @@ function getSplittedAttributes(extensionAttributes, typeName, attributes) {
     return extensionAttribute.attribute.keepOnSplit;
   }));
 }
-function defaultBlockAt$1(match2) {
-  for (let i = 0; i < match2.edgeCount; i += 1) {
-    const { type } = match2.edge(i);
-    if (type.isTextblock && !type.hasRequiredAttrs()) {
-      return type;
-    }
-  }
-  return null;
-}
 function ensureMarks(state, splittableMarks) {
   const marks = state.storedMarks || state.selection.$to.parentOffset && state.selection.$from.marks();
   if (marks) {
@@ -11145,7 +11138,7 @@ const splitBlock = ({ keepMarks = true } = {}) => ({ tr, state, dispatch, editor
     if (selection instanceof TextSelection) {
       tr.deleteSelection();
     }
-    const deflt = $from.depth === 0 ? void 0 : defaultBlockAt$1($from.node(-1).contentMatchAt($from.indexAfter(-1)));
+    const deflt = $from.depth === 0 ? void 0 : defaultBlockAt($from.node(-1).contentMatchAt($from.indexAfter(-1)));
     let types = atEnd && deflt ? [{
       type: deflt,
       attrs: newAttributes
@@ -11964,6 +11957,7 @@ class Editor$1 extends EventEmitter {
   }
   setEditable(editable) {
     this.setOptions({ editable });
+    this.emit("update", { editor: this, transaction: this.state.tr });
   }
   get isEditable() {
     return this.options.editable && this.view && this.view.editable;
@@ -12313,6 +12307,26 @@ class Mark {
     }));
     return extension;
   }
+  static handleExit({ editor, mark }) {
+    const { tr } = editor.state;
+    const currentPos = editor.state.selection.$from;
+    const isAtEnd = currentPos.pos === currentPos.end();
+    if (isAtEnd) {
+      const currentMarks = currentPos.marks();
+      const isInMark = !!currentMarks.find((m) => (m === null || m === void 0 ? void 0 : m.type.name) === mark.name);
+      if (!isInMark) {
+        return false;
+      }
+      const removeMark2 = currentMarks.find((m) => (m === null || m === void 0 ? void 0 : m.type.name) === mark.name);
+      if (removeMark2) {
+        tr.removeStoredMark(removeMark2);
+      }
+      tr.insertText(" ", currentPos.pos);
+      editor.view.dispatch(tr);
+      return true;
+    }
+    return false;
+  }
 }
 class Node {
   constructor(config = {}) {
@@ -14025,7 +14039,7 @@ const InjectionTokens$1 = Object.freeze({
   PAGE_BLOCKS: Symbol("pageBlocks"),
   POPUP_MODE: Symbol("popupMode")
 });
-var render$J = function __render__() {
+var render$I = function __render__() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -14034,7 +14048,7 @@ var render$J = function __render__() {
     "class": _vm.classes
   });
 };
-var staticRenderFns$J = [];
+var staticRenderFns$I = [];
 const ToolbarDivider_vue_vue_type_style_index_0_scoped_true_lang = "";
 function normalizeComponent(scriptExports, render2, staticRenderFns2, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
   var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
@@ -14090,7 +14104,7 @@ function normalizeComponent(scriptExports, render2, staticRenderFns2, functional
     options
   };
 }
-const __vue2_script$J = {
+const __vue2_script$I = {
   name: "ToolbarDivider",
   props: {
     vertical: {
@@ -14112,26 +14126,26 @@ const __vue2_script$J = {
     return { classes };
   }
 };
-const __cssModules$J = {};
-var __component__$J = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$J,
-  render$J,
-  staticRenderFns$J,
+const __cssModules$I = {};
+var __component__$I = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$I,
+  render$I,
+  staticRenderFns$I,
   false,
-  __vue2_injectStyles$J,
+  __vue2_injectStyles$I,
   "d9845d32",
   null,
   null
 );
-function __vue2_injectStyles$J(context) {
-  for (let o in __cssModules$J) {
-    this[o] = __cssModules$J[o];
+function __vue2_injectStyles$I(context) {
+  for (let o in __cssModules$I) {
+    this[o] = __cssModules$I[o];
   }
 }
 const ToolbarDivider = /* @__PURE__ */ function() {
-  return __component__$J.exports;
+  return __component__$I.exports;
 }();
-var render$I = function __render__2() {
+var render$H = function __render__2() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -14139,31 +14153,31 @@ var render$I = function __render__2() {
     staticClass: "zw-toolbar__row"
   }, [_vm._t("default")], 2);
 };
-var staticRenderFns$I = [];
+var staticRenderFns$H = [];
 const ToolbarRow_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$I = {
+const __vue2_script$H = {
   name: "ToolbarRow"
 };
-const __cssModules$I = {};
-var __component__$I = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$I,
-  render$I,
-  staticRenderFns$I,
+const __cssModules$H = {};
+var __component__$H = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$H,
+  render$H,
+  staticRenderFns$H,
   false,
-  __vue2_injectStyles$I,
+  __vue2_injectStyles$H,
   "a6ed2ebe",
   null,
   null
 );
-function __vue2_injectStyles$I(context) {
-  for (let o in __cssModules$I) {
-    this[o] = __cssModules$I[o];
+function __vue2_injectStyles$H(context) {
+  for (let o in __cssModules$H) {
+    this[o] = __cssModules$H[o];
   }
 }
 const ToolbarRow = /* @__PURE__ */ function() {
-  return __component__$I.exports;
+  return __component__$H.exports;
 }();
-var render$H = function __render__3() {
+var render$G = function __render__3() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -14171,31 +14185,31 @@ var render$H = function __render__3() {
     staticClass: "zw-toolbar__group"
   }, [_vm._t("default")], 2);
 };
-var staticRenderFns$H = [];
+var staticRenderFns$G = [];
 const ToolbarGroup_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$H = {
+const __vue2_script$G = {
   name: "ToolbarGroup"
 };
-const __cssModules$H = {};
-var __component__$H = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$H,
-  render$H,
-  staticRenderFns$H,
+const __cssModules$G = {};
+var __component__$G = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$G,
+  render$G,
+  staticRenderFns$G,
   false,
-  __vue2_injectStyles$H,
+  __vue2_injectStyles$G,
   "25eee0ed",
   null,
   null
 );
-function __vue2_injectStyles$H(context) {
-  for (let o in __cssModules$H) {
-    this[o] = __cssModules$H[o];
+function __vue2_injectStyles$G(context) {
+  for (let o in __cssModules$G) {
+    this[o] = __cssModules$G[o];
   }
 }
 const ToolbarGroup = /* @__PURE__ */ function() {
-  return __component__$H.exports;
+  return __component__$G.exports;
 }();
-var render$G = function __render__4() {
+var render$F = function __render__4() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -14213,9 +14227,9 @@ var render$G = function __render__4() {
     }
   }, [_vm._t("default")], 2);
 };
-var staticRenderFns$G = [];
+var staticRenderFns$F = [];
 const Button_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$G = {
+const __vue2_script$F = {
   name: "Button",
   props: {
     skin: {
@@ -14249,26 +14263,26 @@ const __vue2_script$G = {
     return { classes };
   }
 };
-const __cssModules$G = {};
-var __component__$G = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$G,
-  render$G,
-  staticRenderFns$G,
+const __cssModules$F = {};
+var __component__$F = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$F,
+  render$F,
+  staticRenderFns$F,
   false,
-  __vue2_injectStyles$G,
+  __vue2_injectStyles$F,
   "562f4e4a",
   null,
   null
 );
-function __vue2_injectStyles$G(context) {
-  for (let o in __cssModules$G) {
-    this[o] = __cssModules$G[o];
+function __vue2_injectStyles$F(context) {
+  for (let o in __cssModules$F) {
+    this[o] = __cssModules$F[o];
   }
 }
 const Button = /* @__PURE__ */ function() {
-  return __component__$G.exports;
+  return __component__$F.exports;
 }();
-var render$F = function __render__5() {
+var render$E = function __render__5() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -14284,9 +14298,9 @@ var render$F = function __render__5() {
     });
   })], 2);
 };
-var staticRenderFns$F = [];
+var staticRenderFns$E = [];
 const ButtonToggle_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$F = {
+const __vue2_script$E = {
   name: "ButtonToggle",
   model: {
     event: "change"
@@ -14302,24 +14316,24 @@ const __vue2_script$F = {
     }
   }
 };
-const __cssModules$F = {};
-var __component__$F = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$F,
-  render$F,
-  staticRenderFns$F,
+const __cssModules$E = {};
+var __component__$E = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$E,
+  render$E,
+  staticRenderFns$E,
   false,
-  __vue2_injectStyles$F,
+  __vue2_injectStyles$E,
   "a02f12aa",
   null,
   null
 );
-function __vue2_injectStyles$F(context) {
-  for (let o in __cssModules$F) {
-    this[o] = __cssModules$F[o];
+function __vue2_injectStyles$E(context) {
+  for (let o in __cssModules$E) {
+    this[o] = __cssModules$E[o];
   }
 }
 const ButtonToggle = /* @__PURE__ */ function() {
-  return __component__$F.exports;
+  return __component__$E.exports;
 }();
 function createCommand(exec2) {
   return (...args) => (context) => exec2(context, ...args);
@@ -14400,7 +14414,7 @@ const __vite_glob_0_19 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" st
 const __vite_glob_0_20 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" d="M21.985 8.625h-1.75V9.5h2.625v.875h-3.5v-1.75c0-.481.394-.875.875-.875h1.75v-.875H19.36V6h2.625c.481 0 .875.394.875.875v.875a.878.878 0 0 1-.875.875ZM7.88 20h2.327l2.975-4.742h.105L16.262 20h2.328l-4.069-6.361L18.32 7.75h-2.345l-2.687 4.366h-.105L10.48 7.75H8.15l3.78 5.889L7.88 20Z"/>\n</svg>\n';
 const __vite_glob_0_21 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M15.4 16.06a3.3 3.3 0 0 1-1.4.29 3.12 3.12 0 0 1-1.39-.29 2.88 2.88 0 0 1-1.05-.81 3.711 3.711 0 0 1-.65-1.25 5.659 5.659 0 0 1-.22-1.6V7H9v5.41a6.89 6.89 0 0 0 .34 2.22 5.29 5.29 0 0 0 1 1.77c.437.501.975.904 1.58 1.18A5 5 0 0 0 14 18a5 5 0 0 0 2.08-.42 4.61 4.61 0 0 0 1.57-1.18 5.27 5.27 0 0 0 1-1.77 6.89 6.89 0 0 0 .35-2.22V7h-1.69v5.41a5.659 5.659 0 0 1-.22 1.59 3.71 3.71 0 0 1-.69 1.25c-.27.34-.61.617-1 .81ZM20 19H8v2h12v-2Z" clip-rule="evenodd"/>\n</svg>\n';
 const __vite_glob_0_22 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 20 20">\n    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M18.96 10a5 5 0 0 0-5-5h-2v1.5h2a3.49 3.49 0 0 1 1.58 6.61L13.43 11h.53V9h-2.53l-7-7-1.47 1.47L17.49 18l1.47-1.47-2.34-2.34A4.93 4.93 0 0 0 18.96 10Zm-13 1h1.59L5.96 9.41V11ZM3.81 7.26A3.47 3.47 0 0 0 2.46 10a3.5 3.5 0 0 0 3.5 3.5h2V15h-2a5 5 0 0 1-3.21-8.8l1.06 1.06Z" clip-rule="evenodd"/>\n</svg>\n';
-const modules = Object.assign({ "../assets/icons/alignment-center.svg": __vite_glob_0_0, "../assets/icons/alignment-justify.svg": __vite_glob_0_1, "../assets/icons/alignment-left.svg": __vite_glob_0_2, "../assets/icons/alignment-right.svg": __vite_glob_0_3, "../assets/icons/arrow.svg": __vite_glob_0_4, "../assets/icons/background-color.svg": __vite_glob_0_5, "../assets/icons/case-style.svg": __vite_glob_0_6, "../assets/icons/font-color.svg": __vite_glob_0_7, "../assets/icons/italic.svg": __vite_glob_0_8, "../assets/icons/line-height.svg": __vite_glob_0_9, "../assets/icons/link.svg": __vite_glob_0_10, "../assets/icons/list-circle.svg": __vite_glob_0_11, "../assets/icons/list-decimal.svg": __vite_glob_0_12, "../assets/icons/list-disc.svg": __vite_glob_0_13, "../assets/icons/list-latin.svg": __vite_glob_0_14, "../assets/icons/list-roman.svg": __vite_glob_0_15, "../assets/icons/list-square.svg": __vite_glob_0_16, "../assets/icons/remove-format.svg": __vite_glob_0_17, "../assets/icons/reset-styles.svg": __vite_glob_0_18, "../assets/icons/strike-through.svg": __vite_glob_0_19, "../assets/icons/superscript.svg": __vite_glob_0_20, "../assets/icons/underline.svg": __vite_glob_0_21, "../assets/icons/unlink.svg": __vite_glob_0_22 });
+const modules = /* @__PURE__ */ Object.assign({ "../assets/icons/alignment-center.svg": __vite_glob_0_0, "../assets/icons/alignment-justify.svg": __vite_glob_0_1, "../assets/icons/alignment-left.svg": __vite_glob_0_2, "../assets/icons/alignment-right.svg": __vite_glob_0_3, "../assets/icons/arrow.svg": __vite_glob_0_4, "../assets/icons/background-color.svg": __vite_glob_0_5, "../assets/icons/case-style.svg": __vite_glob_0_6, "../assets/icons/font-color.svg": __vite_glob_0_7, "../assets/icons/italic.svg": __vite_glob_0_8, "../assets/icons/line-height.svg": __vite_glob_0_9, "../assets/icons/link.svg": __vite_glob_0_10, "../assets/icons/list-circle.svg": __vite_glob_0_11, "../assets/icons/list-decimal.svg": __vite_glob_0_12, "../assets/icons/list-disc.svg": __vite_glob_0_13, "../assets/icons/list-latin.svg": __vite_glob_0_14, "../assets/icons/list-roman.svg": __vite_glob_0_15, "../assets/icons/list-square.svg": __vite_glob_0_16, "../assets/icons/remove-format.svg": __vite_glob_0_17, "../assets/icons/reset-styles.svg": __vite_glob_0_18, "../assets/icons/strike-through.svg": __vite_glob_0_19, "../assets/icons/superscript.svg": __vite_glob_0_20, "../assets/icons/underline.svg": __vite_glob_0_21, "../assets/icons/unlink.svg": __vite_glob_0_22 });
 function importIcon(name) {
   return modules[`../assets/icons/${name}.svg`] || "";
 }
@@ -14413,7 +14427,7 @@ function unmarkWysiwygContent({ __wswg__, ...content }) {
 function markWysiwygContent(content) {
   return { ...content, __wswg__: true };
 }
-var render$E = function __render__6() {
+var render$D = function __render__6() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -14426,9 +14440,9 @@ var render$E = function __render__6() {
     }
   });
 };
-var staticRenderFns$E = [];
+var staticRenderFns$D = [];
 const Icon_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$E = {
+const __vue2_script$D = {
   name: "Icon",
   props: {
     name: {
@@ -14471,24 +14485,24 @@ const __vue2_script$E = {
     };
   }
 };
-const __cssModules$E = {};
-var __component__$E = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$E,
-  render$E,
-  staticRenderFns$E,
+const __cssModules$D = {};
+var __component__$D = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$D,
+  render$D,
+  staticRenderFns$D,
   false,
-  __vue2_injectStyles$E,
+  __vue2_injectStyles$D,
   "366d6daa",
   null,
   null
 );
-function __vue2_injectStyles$E(context) {
-  for (let o in __cssModules$E) {
-    this[o] = __cssModules$E[o];
+function __vue2_injectStyles$D(context) {
+  for (let o in __cssModules$D) {
+    this[o] = __cssModules$D[o];
   }
 }
 const Icon = /* @__PURE__ */ function() {
-  return __component__$E.exports;
+  return __component__$D.exports;
 }();
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var check = function(it) {
@@ -19082,7 +19096,7 @@ function useScrollView() {
   }
   return { scrollToElement };
 }
-var render$D = function __render__7() {
+var render$C = function __render__7() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -19094,9 +19108,9 @@ var render$D = function __render__7() {
     }
   }, [_vm._t("default")], 2);
 };
-var staticRenderFns$D = [];
+var staticRenderFns$C = [];
 const ScrollView_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$D = {
+const __vue2_script$C = {
   name: "ScrollView",
   setup() {
     const hostRef = ref(null);
@@ -19110,26 +19124,26 @@ const __vue2_script$D = {
     return { hostRef };
   }
 };
-const __cssModules$D = {};
-var __component__$D = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$D,
-  render$D,
-  staticRenderFns$D,
+const __cssModules$C = {};
+var __component__$C = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$C,
+  render$C,
+  staticRenderFns$C,
   false,
-  __vue2_injectStyles$D,
+  __vue2_injectStyles$C,
   "95e8ad00",
   null,
   null
 );
-function __vue2_injectStyles$D(context) {
-  for (let o in __cssModules$D) {
-    this[o] = __cssModules$D[o];
+function __vue2_injectStyles$C(context) {
+  for (let o in __cssModules$C) {
+    this[o] = __cssModules$C[o];
   }
 }
 const ScrollView = /* @__PURE__ */ function() {
-  return __component__$D.exports;
+  return __component__$C.exports;
 }();
-var render$C = function __render__8() {
+var render$B = function __render__8() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -19140,9 +19154,9 @@ var render$C = function __render__8() {
     }
   }, [_vm._t("default")], 2);
 };
-var staticRenderFns$C = [];
+var staticRenderFns$B = [];
 const FieldLabel_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$C = {
+const __vue2_script$B = {
   name: "FieldLabel",
   props: {
     fieldId: {
@@ -19152,26 +19166,26 @@ const __vue2_script$C = {
     }
   }
 };
-const __cssModules$C = {};
-var __component__$C = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$C,
-  render$C,
-  staticRenderFns$C,
+const __cssModules$B = {};
+var __component__$B = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$B,
+  render$B,
+  staticRenderFns$B,
   false,
-  __vue2_injectStyles$C,
+  __vue2_injectStyles$B,
   "116650c2",
   null,
   null
 );
-function __vue2_injectStyles$C(context) {
-  for (let o in __cssModules$C) {
-    this[o] = __cssModules$C[o];
+function __vue2_injectStyles$B(context) {
+  for (let o in __cssModules$B) {
+    this[o] = __cssModules$B[o];
   }
 }
 const FieldLabel = /* @__PURE__ */ function() {
-  return __component__$C.exports;
+  return __component__$B.exports;
 }();
-var render$B = function __render__9() {
+var render$A = function __render__9() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -19195,9 +19209,9 @@ var render$B = function __render__9() {
     }
   });
 };
-var staticRenderFns$B = [];
+var staticRenderFns$A = [];
 const Range_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$B = {
+const __vue2_script$A = {
   name: "Range",
   props: {
     min: {
@@ -19246,26 +19260,26 @@ const __vue2_script$B = {
     };
   }
 };
-const __cssModules$B = {};
-var __component__$B = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$B,
-  render$B,
-  staticRenderFns$B,
+const __cssModules$A = {};
+var __component__$A = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$A,
+  render$A,
+  staticRenderFns$A,
   false,
-  __vue2_injectStyles$B,
+  __vue2_injectStyles$A,
   "15a6af30",
   null,
   null
 );
-function __vue2_injectStyles$B(context) {
-  for (let o in __cssModules$B) {
-    this[o] = __cssModules$B[o];
+function __vue2_injectStyles$A(context) {
+  for (let o in __cssModules$A) {
+    this[o] = __cssModules$A[o];
   }
 }
 const Range = /* @__PURE__ */ function() {
-  return __component__$B.exports;
+  return __component__$A.exports;
 }();
-var render$A = function __render__10() {
+var render$z = function __render__10() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -19313,9 +19327,9 @@ var render$A = function __render__10() {
     staticClass: "zw-number-field__units"
   }, [_vm._v(" " + _vm._s(_vm.units) + " ")]) : _vm._e()])]);
 };
-var staticRenderFns$A = [];
+var staticRenderFns$z = [];
 const NumberField_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$A = {
+const __vue2_script$z = {
   name: "NumberField",
   components: {
     Button
@@ -19385,24 +19399,24 @@ const __vue2_script$A = {
     };
   }
 };
-const __cssModules$A = {};
-var __component__$A = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$A,
-  render$A,
-  staticRenderFns$A,
+const __cssModules$z = {};
+var __component__$z = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$z,
+  render$z,
+  staticRenderFns$z,
   false,
-  __vue2_injectStyles$A,
+  __vue2_injectStyles$z,
   "2e210d91",
   null,
   null
 );
-function __vue2_injectStyles$A(context) {
-  for (let o in __cssModules$A) {
-    this[o] = __cssModules$A[o];
+function __vue2_injectStyles$z(context) {
+  for (let o in __cssModules$z) {
+    this[o] = __cssModules$z[o];
   }
 }
 const NumberField = /* @__PURE__ */ function() {
-  return __component__$A.exports;
+  return __component__$z.exports;
 }();
 class JsonSerializer {
   static decode(text2) {
@@ -19801,7 +19815,7 @@ function tooltip(el, { value }) {
   if (text2 && hotkey)
     el.dataset.tooltipHotkey = hotkey;
 }
-var render$z = function __render__11() {
+var render$y = function __render__11() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -19819,12 +19833,15 @@ var render$z = function __render__11() {
     }],
     ref: "hostRef",
     staticClass: "zw-modal",
-    style: _vm.modalStyles
+    style: _vm.modalStyles,
+    attrs: {
+      "tabindex": "-1"
+    }
   }, [_vm._t("default")], 2) : _vm._e()]);
 };
-var staticRenderFns$z = [];
+var staticRenderFns$y = [];
 const Modal_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$z = {
+const __vue2_script$y = {
   name: "Modal",
   transition: {
     enter: 200,
@@ -19848,11 +19865,17 @@ const __vue2_script$z = {
       type: [Number, String],
       required: false,
       default: 1e3
+    },
+    focusFirstControl: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   setup(props) {
     const toggler = props.toggler || useModalToggler();
     const hostRef = ref(null);
+    const hostEl = useElementRef(hostRef);
     const modalStyles = computed(() => ({
       "--zw-modal-max-height": `${props.maxHeight}px`,
       "--zw-modal-max-width": `${props.maxWidth}px`
@@ -19861,6 +19884,15 @@ const __vue2_script$z = {
       isActiveRef: toggler.isOpened,
       hostRef
     });
+    if (props.focusFirstControl) {
+      watch(toggler.isOpened, async (_, wasOpened) => {
+        if (wasOpened)
+          return;
+        await nextTick();
+        const focusableEl = hostEl.value.querySelector(':where(a, button, input):not(:disabled, [data-initial-focus="false"])');
+        (focusableEl || hostEl.value).focus();
+      });
+    }
     return {
       hostRef,
       modalStyles,
@@ -19869,26 +19901,26 @@ const __vue2_script$z = {
     };
   }
 };
-const __cssModules$z = {};
-var __component__$z = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$z,
-  render$z,
-  staticRenderFns$z,
+const __cssModules$y = {};
+var __component__$y = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$y,
+  render$y,
+  staticRenderFns$y,
   false,
-  __vue2_injectStyles$z,
-  "2c99ae29",
+  __vue2_injectStyles$y,
+  "3688537a",
   null,
   null
 );
-function __vue2_injectStyles$z(context) {
-  for (let o in __cssModules$z) {
-    this[o] = __cssModules$z[o];
+function __vue2_injectStyles$y(context) {
+  for (let o in __cssModules$y) {
+    this[o] = __cssModules$y[o];
   }
 }
 const Modal = /* @__PURE__ */ function() {
-  return __component__$z.exports;
+  return __component__$y.exports;
 }();
-var render$y = function __render__12() {
+var render$x = function __render__12() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -19921,9 +19953,9 @@ var render$y = function __render__12() {
     }
   }, [_vm._v(" " + _vm._s(_vm.error) + " ")]) : _vm._e()]);
 };
-var staticRenderFns$y = [];
+var staticRenderFns$x = [];
 const TextField_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$y = {
+const __vue2_script$x = {
   name: "TextField",
   props: {
     value: {
@@ -19953,26 +19985,26 @@ const __vue2_script$y = {
     return { onInput, fieldId };
   }
 };
-const __cssModules$y = {};
-var __component__$y = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$y,
-  render$y,
-  staticRenderFns$y,
+const __cssModules$x = {};
+var __component__$x = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$x,
+  render$x,
+  staticRenderFns$x,
   false,
-  __vue2_injectStyles$y,
+  __vue2_injectStyles$x,
   "20ee36c3",
   null,
   null
 );
-function __vue2_injectStyles$y(context) {
-  for (let o in __cssModules$y) {
-    this[o] = __cssModules$y[o];
+function __vue2_injectStyles$x(context) {
+  for (let o in __cssModules$x) {
+    this[o] = __cssModules$x[o];
   }
 }
 const TextField = /* @__PURE__ */ function() {
-  return __component__$y.exports;
+  return __component__$x.exports;
 }();
-var render$x = function __render__13() {
+var render$w = function __render__13() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -19995,9 +20027,9 @@ var render$x = function __render__13() {
     staticClass: "zw-checkbox__label"
   }, [_vm._v(_vm._s(_vm.label))])]);
 };
-var staticRenderFns$x = [];
+var staticRenderFns$w = [];
 const Checkbox_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$x = {
+const __vue2_script$w = {
   name: "Checkbox",
   props: {
     value: {
@@ -20015,24 +20047,24 @@ const __vue2_script$x = {
     return { onCheckedChanged };
   }
 };
-const __cssModules$x = {};
-var __component__$x = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$x,
-  render$x,
-  staticRenderFns$x,
+const __cssModules$w = {};
+var __component__$w = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$w,
+  render$w,
+  staticRenderFns$w,
   false,
-  __vue2_injectStyles$x,
+  __vue2_injectStyles$w,
   "c9d1da12",
   null,
   null
 );
-function __vue2_injectStyles$x(context) {
-  for (let o in __cssModules$x) {
-    this[o] = __cssModules$x[o];
+function __vue2_injectStyles$w(context) {
+  for (let o in __cssModules$w) {
+    this[o] = __cssModules$w[o];
   }
 }
 const Checkbox = /* @__PURE__ */ function() {
-  return __component__$x.exports;
+  return __component__$w.exports;
 }();
 const InjectionTokens = Object.freeze({
   ACTIVE_MANAGER: Symbol("dropdownActiveManager"),
@@ -20062,7 +20094,7 @@ function useDropdownEntityTitle(entityRef) {
     return ((_a = entityRef.value) == null ? void 0 : _a.title) || ((_b = entityRef.value) == null ? void 0 : _b.id) || "";
   });
 }
-var render$w = function __render__14() {
+var render$v = function __render__14() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -20092,9 +20124,9 @@ var render$w = function __render__14() {
     "isOpened": _vm.isOpened
   })], 2);
 };
-var staticRenderFns$w = [];
+var staticRenderFns$v = [];
 const DropdownActivator_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$w = {
+const __vue2_script$v = {
   name: "DropdownActivator",
   components: {
     Icon,
@@ -20127,26 +20159,26 @@ const __vue2_script$w = {
     };
   }
 };
-const __cssModules$w = {};
-var __component__$w = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$w,
-  render$w,
-  staticRenderFns$w,
+const __cssModules$v = {};
+var __component__$v = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$v,
+  render$v,
+  staticRenderFns$v,
   false,
-  __vue2_injectStyles$w,
+  __vue2_injectStyles$v,
   "021ac370",
   null,
   null
 );
-function __vue2_injectStyles$w(context) {
-  for (let o in __cssModules$w) {
-    this[o] = __cssModules$w[o];
+function __vue2_injectStyles$v(context) {
+  for (let o in __cssModules$v) {
+    this[o] = __cssModules$v[o];
   }
 }
 const DropdownActivator = /* @__PURE__ */ function() {
-  return __component__$w.exports;
+  return __component__$v.exports;
 }();
-var render$v = function __render__15() {
+var render$u = function __render__15() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -20161,9 +20193,9 @@ var render$v = function __render__15() {
     return [_vm._v(_vm._s(_vm.optionTitle))];
   })], 2);
 };
-var staticRenderFns$v = [];
+var staticRenderFns$u = [];
 const DropdownOption_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$v = {
+const __vue2_script$u = {
   name: "DropdownOption",
   components: {
     Button
@@ -20208,26 +20240,26 @@ const __vue2_script$v = {
     };
   }
 };
-const __cssModules$v = {};
-var __component__$v = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$v,
-  render$v,
-  staticRenderFns$v,
+const __cssModules$u = {};
+var __component__$u = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$u,
+  render$u,
+  staticRenderFns$u,
   false,
-  __vue2_injectStyles$v,
+  __vue2_injectStyles$u,
   "1355d08c",
   null,
   null
 );
-function __vue2_injectStyles$v(context) {
-  for (let o in __cssModules$v) {
-    this[o] = __cssModules$v[o];
+function __vue2_injectStyles$u(context) {
+  for (let o in __cssModules$u) {
+    this[o] = __cssModules$u[o];
   }
 }
 const DropdownOption = /* @__PURE__ */ function() {
-  return __component__$v.exports;
+  return __component__$u.exports;
 }();
-var render$u = function __render__16() {
+var render$t = function __render__16() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -20247,9 +20279,9 @@ var render$u = function __render__16() {
     });
   })], 2);
 };
-var staticRenderFns$u = [];
+var staticRenderFns$t = [];
 const DropdownGroup_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$u = {
+const __vue2_script$t = {
   name: "DropdownGroup",
   components: {
     DropdownOption
@@ -20265,26 +20297,26 @@ const __vue2_script$u = {
     return { groupTitle };
   }
 };
-const __cssModules$u = {};
-var __component__$u = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$u,
-  render$u,
-  staticRenderFns$u,
+const __cssModules$t = {};
+var __component__$t = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$t,
+  render$t,
+  staticRenderFns$t,
   false,
-  __vue2_injectStyles$u,
+  __vue2_injectStyles$t,
   "21efeb20",
   null,
   null
 );
-function __vue2_injectStyles$u(context) {
-  for (let o in __cssModules$u) {
-    this[o] = __cssModules$u[o];
+function __vue2_injectStyles$t(context) {
+  for (let o in __cssModules$t) {
+    this[o] = __cssModules$t[o];
   }
 }
 const DropdownGroup = /* @__PURE__ */ function() {
-  return __component__$u.exports;
+  return __component__$t.exports;
 }();
-var render$t = function __render__17() {
+var render$s = function __render__17() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -20292,31 +20324,31 @@ var render$t = function __render__17() {
     staticClass: "zw-dropdown__divider"
   });
 };
-var staticRenderFns$t = [];
+var staticRenderFns$s = [];
 const DropdownDivider_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$t = {
+const __vue2_script$s = {
   name: "DropdownDivider"
 };
-const __cssModules$t = {};
-var __component__$t = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$t,
-  render$t,
-  staticRenderFns$t,
+const __cssModules$s = {};
+var __component__$s = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$s,
+  render$s,
+  staticRenderFns$s,
   false,
-  __vue2_injectStyles$t,
+  __vue2_injectStyles$s,
   "1f5efb01",
   null,
   null
 );
-function __vue2_injectStyles$t(context) {
-  for (let o in __cssModules$t) {
-    this[o] = __cssModules$t[o];
+function __vue2_injectStyles$s(context) {
+  for (let o in __cssModules$s) {
+    this[o] = __cssModules$s[o];
   }
 }
 const DropdownDivider = /* @__PURE__ */ function() {
-  return __component__$t.exports;
+  return __component__$s.exports;
 }();
-var render$s = function __render__18() {
+var render$r = function __render__18() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -20350,9 +20382,9 @@ var render$s = function __render__18() {
     })];
   })], 2)]);
 };
-var staticRenderFns$s = [];
+var staticRenderFns$r = [];
 const DropdownMenu_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$s = {
+const __vue2_script$r = {
   name: "DropdownMenu",
   components: {
     ScrollView,
@@ -20370,26 +20402,26 @@ const __vue2_script$s = {
     provide(InjectionTokens.SESSION, {});
   }
 };
-const __cssModules$s = {};
-var __component__$s = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$s,
-  render$s,
-  staticRenderFns$s,
+const __cssModules$r = {};
+var __component__$r = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$r,
+  render$r,
+  staticRenderFns$r,
   false,
-  __vue2_injectStyles$s,
+  __vue2_injectStyles$r,
   null,
   null,
   null
 );
-function __vue2_injectStyles$s(context) {
-  for (let o in __cssModules$s) {
-    this[o] = __cssModules$s[o];
+function __vue2_injectStyles$r(context) {
+  for (let o in __cssModules$r) {
+    this[o] = __cssModules$r[o];
   }
 }
 const DropdownMenu = /* @__PURE__ */ function() {
-  return __component__$s.exports;
+  return __component__$r.exports;
 }();
-var render$r = function __render__19() {
+var render$q = function __render__19() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -20425,9 +20457,9 @@ var render$r = function __render__19() {
     }], null, true)
   })], 1)], 1);
 };
-var staticRenderFns$r = [];
+var staticRenderFns$q = [];
 const Dropdown_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$r = {
+const __vue2_script$q = {
   name: "Dropdown",
   components: {
     Modal,
@@ -20480,24 +20512,24 @@ const __vue2_script$r = {
     };
   }
 };
-const __cssModules$r = {};
-var __component__$r = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$r,
-  render$r,
-  staticRenderFns$r,
+const __cssModules$q = {};
+var __component__$q = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$q,
+  render$q,
+  staticRenderFns$q,
   false,
-  __vue2_injectStyles$r,
+  __vue2_injectStyles$q,
   "885109ea",
   null,
   null
 );
-function __vue2_injectStyles$r(context) {
-  for (let o in __cssModules$r) {
-    this[o] = __cssModules$r[o];
+function __vue2_injectStyles$q(context) {
+  for (let o in __cssModules$q) {
+    this[o] = __cssModules$q[o];
   }
 }
 const Dropdown = /* @__PURE__ */ function() {
-  return __component__$r.exports;
+  return __component__$q.exports;
 }();
 function usePickerApi({ pickerRef, colorRef, onChange, onClosed, onBeforeOpened }) {
   const isOpened = computed(() => {
@@ -20559,7 +20591,7 @@ function usePickerHotkeys({ isOpenedRef, onCancel, onApply }) {
     options: { capture: true }
   });
 }
-var render$q = function __render__20() {
+var render$p = function __render__20() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -20604,8 +20636,8 @@ var render$q = function __render__20() {
     }
   });
 };
-var staticRenderFns$q = [];
-const __vue2_script$q = {
+var staticRenderFns$p = [];
+const __vue2_script$p = {
   name: "ColorPicker",
   components: {
     ZipifyColorPicker
@@ -20658,26 +20690,26 @@ const __vue2_script$q = {
     };
   }
 };
-const __cssModules$q = {};
-var __component__$q = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$q,
-  render$q,
-  staticRenderFns$q,
+const __cssModules$p = {};
+var __component__$p = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$p,
+  render$p,
+  staticRenderFns$p,
   false,
-  __vue2_injectStyles$q,
+  __vue2_injectStyles$p,
   null,
   null,
   null
 );
-function __vue2_injectStyles$q(context) {
-  for (let o in __cssModules$q) {
-    this[o] = __cssModules$q[o];
+function __vue2_injectStyles$p(context) {
+  for (let o in __cssModules$p) {
+    this[o] = __cssModules$p[o];
   }
 }
 const ColorPicker = /* @__PURE__ */ function() {
-  return __component__$q.exports;
+  return __component__$p.exports;
 }();
-var render$p = function __render__21() {
+var render$o = function __render__21() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -20721,10 +20753,10 @@ var render$p = function __render__21() {
     }
   })], 1)], 1);
 };
-var staticRenderFns$p = [];
+var staticRenderFns$o = [];
 const StylePresetControl_vue_vue_type_style_index_0_scoped_true_lang = "";
 const CLEAR_MARKS = [TextSettings.FONT_SIZE, TextSettings.FONT_WEIGHT];
-const __vue2_script$p = {
+const __vue2_script$o = {
   name: "StylePresetControl",
   components: {
     Icon,
@@ -20762,24 +20794,24 @@ const __vue2_script$p = {
     };
   }
 };
-const __cssModules$p = {};
-var __component__$p = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$p,
-  render$p,
-  staticRenderFns$p,
+const __cssModules$o = {};
+var __component__$o = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$o,
+  render$o,
+  staticRenderFns$o,
   false,
-  __vue2_injectStyles$p,
+  __vue2_injectStyles$o,
   "2893d64e",
   null,
   null
 );
-function __vue2_injectStyles$p(context) {
-  for (let o in __cssModules$p) {
-    this[o] = __cssModules$p[o];
+function __vue2_injectStyles$o(context) {
+  for (let o in __cssModules$o) {
+    this[o] = __cssModules$o[o];
   }
 }
 const StylePresetControl = /* @__PURE__ */ function() {
-  return __component__$p.exports;
+  return __component__$o.exports;
 }();
 const STORAGE_KEY = "wswg.recently_used_fonts";
 function useRecentFonts({ limit }) {
@@ -20792,7 +20824,7 @@ function useRecentFonts({ limit }) {
   const isEmpty = computed(() => !fonts.value.length);
   return { fonts, isEmpty, add };
 }
-var render$o = function __render__22() {
+var render$n = function __render__22() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -20832,9 +20864,9 @@ var render$o = function __render__22() {
     }])
   });
 };
-var staticRenderFns$o = [];
+var staticRenderFns$n = [];
 const FontFamilyControl_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$o = {
+const __vue2_script$n = {
   name: "FontFamilyControl",
   components: {
     Dropdown,
@@ -20879,26 +20911,26 @@ const __vue2_script$o = {
     };
   }
 };
-const __cssModules$o = {};
-var __component__$o = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$o,
-  render$o,
-  staticRenderFns$o,
+const __cssModules$n = {};
+var __component__$n = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$n,
+  render$n,
+  staticRenderFns$n,
   false,
-  __vue2_injectStyles$o,
+  __vue2_injectStyles$n,
   "07a47462",
   null,
   null
 );
-function __vue2_injectStyles$o(context) {
-  for (let o in __cssModules$o) {
-    this[o] = __cssModules$o[o];
+function __vue2_injectStyles$n(context) {
+  for (let o in __cssModules$n) {
+    this[o] = __cssModules$n[o];
   }
 }
 const FontFamilyControl = /* @__PURE__ */ function() {
-  return __component__$o.exports;
+  return __component__$n.exports;
 }();
-var render$n = function __render__23() {
+var render$m = function __render__23() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -20921,8 +20953,8 @@ var render$n = function __render__23() {
     }
   });
 };
-var staticRenderFns$n = [];
-const __vue2_script$n = {
+var staticRenderFns$m = [];
+const __vue2_script$m = {
   name: "FontWeightControl",
   components: {
     Dropdown
@@ -20943,26 +20975,26 @@ const __vue2_script$n = {
     };
   }
 };
-const __cssModules$n = {};
-var __component__$n = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$n,
-  render$n,
-  staticRenderFns$n,
+const __cssModules$m = {};
+var __component__$m = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$m,
+  render$m,
+  staticRenderFns$m,
   false,
-  __vue2_injectStyles$n,
+  __vue2_injectStyles$m,
   null,
   null,
   null
 );
-function __vue2_injectStyles$n(context) {
-  for (let o in __cssModules$n) {
-    this[o] = __cssModules$n[o];
+function __vue2_injectStyles$m(context) {
+  for (let o in __cssModules$m) {
+    this[o] = __cssModules$m[o];
   }
 }
 const FontWeightControl = /* @__PURE__ */ function() {
-  return __component__$n.exports;
+  return __component__$m.exports;
 }();
-var render$m = function __render__24() {
+var render$l = function __render__24() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -20986,9 +21018,9 @@ var render$m = function __render__24() {
     }
   });
 };
-var staticRenderFns$m = [];
+var staticRenderFns$l = [];
 const FontSizeControl_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$m = {
+const __vue2_script$l = {
   name: "FontSizeControl",
   components: {
     Dropdown
@@ -21011,26 +21043,26 @@ const __vue2_script$m = {
     };
   }
 };
-const __cssModules$m = {};
-var __component__$m = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$m,
-  render$m,
-  staticRenderFns$m,
+const __cssModules$l = {};
+var __component__$l = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$l,
+  render$l,
+  staticRenderFns$l,
   false,
-  __vue2_injectStyles$m,
+  __vue2_injectStyles$l,
   "71dd7ffc",
   null,
   null
 );
-function __vue2_injectStyles$m(context) {
-  for (let o in __cssModules$m) {
-    this[o] = __cssModules$m[o];
+function __vue2_injectStyles$l(context) {
+  for (let o in __cssModules$l) {
+    this[o] = __cssModules$l[o];
   }
 }
 const FontSizeControl = /* @__PURE__ */ function() {
-  return __component__$m.exports;
+  return __component__$l.exports;
 }();
-var render$l = function __render__25() {
+var render$k = function __render__25() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -21071,8 +21103,8 @@ var render$l = function __render__25() {
     }])
   });
 };
-var staticRenderFns$l = [];
-const __vue2_script$l = {
+var staticRenderFns$k = [];
+const __vue2_script$k = {
   name: "FontColorControl",
   components: {
     ColorPicker,
@@ -21092,26 +21124,26 @@ const __vue2_script$l = {
     };
   }
 };
-const __cssModules$l = {};
-var __component__$l = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$l,
-  render$l,
-  staticRenderFns$l,
+const __cssModules$k = {};
+var __component__$k = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$k,
+  render$k,
+  staticRenderFns$k,
   false,
-  __vue2_injectStyles$l,
+  __vue2_injectStyles$k,
   null,
   null,
   null
 );
-function __vue2_injectStyles$l(context) {
-  for (let o in __cssModules$l) {
-    this[o] = __cssModules$l[o];
+function __vue2_injectStyles$k(context) {
+  for (let o in __cssModules$k) {
+    this[o] = __cssModules$k[o];
   }
 }
 const FontColorControl = /* @__PURE__ */ function() {
-  return __component__$l.exports;
+  return __component__$k.exports;
 }();
-var render$k = function __render__26() {
+var render$j = function __render__26() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -21152,8 +21184,8 @@ var render$k = function __render__26() {
     }])
   });
 };
-var staticRenderFns$k = [];
-const __vue2_script$k = {
+var staticRenderFns$j = [];
+const __vue2_script$j = {
   name: "BackgroundColorControl",
   components: {
     ColorPicker,
@@ -21173,26 +21205,26 @@ const __vue2_script$k = {
     };
   }
 };
-const __cssModules$k = {};
-var __component__$k = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$k,
-  render$k,
-  staticRenderFns$k,
+const __cssModules$j = {};
+var __component__$j = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$j,
+  render$j,
+  staticRenderFns$j,
   false,
-  __vue2_injectStyles$k,
+  __vue2_injectStyles$j,
   null,
   null,
   null
 );
-function __vue2_injectStyles$k(context) {
-  for (let o in __cssModules$k) {
-    this[o] = __cssModules$k[o];
+function __vue2_injectStyles$j(context) {
+  for (let o in __cssModules$j) {
+    this[o] = __cssModules$j[o];
   }
 }
 const BackgroundColorControl = /* @__PURE__ */ function() {
-  return __component__$k.exports;
+  return __component__$j.exports;
 }();
-var render$j = function __render__27() {
+var render$i = function __render__27() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -21223,8 +21255,8 @@ var render$j = function __render__27() {
     }
   })], 1);
 };
-var staticRenderFns$j = [];
-const __vue2_script$j = {
+var staticRenderFns$i = [];
+const __vue2_script$i = {
   name: "ItalicControl",
   components: {
     Button,
@@ -21245,26 +21277,26 @@ const __vue2_script$j = {
     };
   }
 };
-const __cssModules$j = {};
-var __component__$j = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$j,
-  render$j,
-  staticRenderFns$j,
+const __cssModules$i = {};
+var __component__$i = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$i,
+  render$i,
+  staticRenderFns$i,
   false,
-  __vue2_injectStyles$j,
+  __vue2_injectStyles$i,
   null,
   null,
   null
 );
-function __vue2_injectStyles$j(context) {
-  for (let o in __cssModules$j) {
-    this[o] = __cssModules$j[o];
+function __vue2_injectStyles$i(context) {
+  for (let o in __cssModules$i) {
+    this[o] = __cssModules$i[o];
   }
 }
 const ItalicControl = /* @__PURE__ */ function() {
-  return __component__$j.exports;
+  return __component__$i.exports;
 }();
-var render$i = function __render__28() {
+var render$h = function __render__28() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -21294,8 +21326,8 @@ var render$i = function __render__28() {
     }
   })], 1);
 };
-var staticRenderFns$i = [];
-const __vue2_script$i = {
+var staticRenderFns$h = [];
+const __vue2_script$h = {
   name: "UnderlineControl",
   components: {
     Button,
@@ -21314,26 +21346,26 @@ const __vue2_script$i = {
     };
   }
 };
-const __cssModules$i = {};
-var __component__$i = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$i,
-  render$i,
-  staticRenderFns$i,
+const __cssModules$h = {};
+var __component__$h = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$h,
+  render$h,
+  staticRenderFns$h,
   false,
-  __vue2_injectStyles$i,
+  __vue2_injectStyles$h,
   null,
   null,
   null
 );
-function __vue2_injectStyles$i(context) {
-  for (let o in __cssModules$i) {
-    this[o] = __cssModules$i[o];
+function __vue2_injectStyles$h(context) {
+  for (let o in __cssModules$h) {
+    this[o] = __cssModules$h[o];
   }
 }
 const UnderlineControl = /* @__PURE__ */ function() {
-  return __component__$i.exports;
+  return __component__$h.exports;
 }();
-var render$h = function __render__29() {
+var render$g = function __render__29() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -21360,8 +21392,8 @@ var render$h = function __render__29() {
     }
   })], 1);
 };
-var staticRenderFns$h = [];
-const __vue2_script$h = {
+var staticRenderFns$g = [];
+const __vue2_script$g = {
   name: "StrikeThroughControl",
   components: {
     Button,
@@ -21378,28 +21410,28 @@ const __vue2_script$h = {
       currentValue,
       apply: apply2
     };
-  }
-};
-const __cssModules$h = {};
-var __component__$h = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$h,
-  render$h,
-  staticRenderFns$h,
+  }
+};
+const __cssModules$g = {};
+var __component__$g = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$g,
+  render$g,
+  staticRenderFns$g,
   false,
-  __vue2_injectStyles$h,
+  __vue2_injectStyles$g,
   null,
   null,
   null
 );
-function __vue2_injectStyles$h(context) {
-  for (let o in __cssModules$h) {
-    this[o] = __cssModules$h[o];
+function __vue2_injectStyles$g(context) {
+  for (let o in __cssModules$g) {
+    this[o] = __cssModules$g[o];
   }
 }
 const StrikeThroughControl = /* @__PURE__ */ function() {
-  return __component__$h.exports;
+  return __component__$g.exports;
 }();
-var render$g = function __render__30() {
+var render$f = function __render__30() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -21426,8 +21458,8 @@ var render$g = function __render__30() {
     }
   })], 1);
 };
-var staticRenderFns$g = [];
-const __vue2_script$g = {
+var staticRenderFns$f = [];
+const __vue2_script$f = {
   name: "SuperscriptControl",
   components: {
     Button,
@@ -21446,26 +21478,26 @@ const __vue2_script$g = {
     };
   }
 };
-const __cssModules$g = {};
-var __component__$g = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$g,
-  render$g,
-  staticRenderFns$g,
+const __cssModules$f = {};
+var __component__$f = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$f,
+  render$f,
+  staticRenderFns$f,
   false,
-  __vue2_injectStyles$g,
+  __vue2_injectStyles$f,
   null,
   null,
   null
 );
-function __vue2_injectStyles$g(context) {
-  for (let o in __cssModules$g) {
-    this[o] = __cssModules$g[o];
+function __vue2_injectStyles$f(context) {
+  for (let o in __cssModules$f) {
+    this[o] = __cssModules$f[o];
   }
 }
 const SuperscriptControl = /* @__PURE__ */ function() {
-  return __component__$g.exports;
+  return __component__$f.exports;
 }();
-var render$f = function __render__31() {
+var render$e = function __render__31() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -21506,8 +21538,8 @@ var render$f = function __render__31() {
     }])
   });
 };
-var staticRenderFns$f = [];
-const __vue2_script$f = {
+var staticRenderFns$e = [];
+const __vue2_script$e = {
   name: "CaseStyleControl",
   components: {
     Dropdown,
@@ -21528,26 +21560,26 @@ const __vue2_script$f = {
     return { apply: apply2 };
   }
 };
-const __cssModules$f = {};
-var __component__$f = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$f,
-  render$f,
-  staticRenderFns$f,
+const __cssModules$e = {};
+var __component__$e = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$e,
+  render$e,
+  staticRenderFns$e,
   false,
-  __vue2_injectStyles$f,
+  __vue2_injectStyles$e,
   null,
   null,
   null
 );
-function __vue2_injectStyles$f(context) {
-  for (let o in __cssModules$f) {
-    this[o] = __cssModules$f[o];
+function __vue2_injectStyles$e(context) {
+  for (let o in __cssModules$e) {
+    this[o] = __cssModules$e[o];
   }
 }
 const CaseStyleControl = /* @__PURE__ */ function() {
-  return __component__$f.exports;
+  return __component__$e.exports;
 }();
-var render$e = function __render__32() {
+var render$d = function __render__32() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -21589,8 +21621,8 @@ var render$e = function __render__32() {
     }])
   });
 };
-var staticRenderFns$e = [];
-const __vue2_script$e = {
+var staticRenderFns$d = [];
+const __vue2_script$d = {
   name: "AlignmentControl",
   alignments: [
     {
@@ -21631,26 +21663,26 @@ const __vue2_script$e = {
     };
   }
 };
-const __cssModules$e = {};
-var __component__$e = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$e,
-  render$e,
-  staticRenderFns$e,
+const __cssModules$d = {};
+var __component__$d = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$d,
+  render$d,
+  staticRenderFns$d,
   false,
-  __vue2_injectStyles$e,
+  __vue2_injectStyles$d,
   null,
   null,
   null
 );
-function __vue2_injectStyles$e(context) {
-  for (let o in __cssModules$e) {
-    this[o] = __cssModules$e[o];
+function __vue2_injectStyles$d(context) {
+  for (let o in __cssModules$d) {
+    this[o] = __cssModules$d[o];
   }
 }
 const AlignmentControl = /* @__PURE__ */ function() {
-  return __component__$e.exports;
+  return __component__$d.exports;
 }();
-var render$d = function __render__33() {
+var render$c = function __render__33() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -21691,9 +21723,9 @@ var render$d = function __render__33() {
     }
   })], 1)], 1);
 };
-var staticRenderFns$d = [];
+var staticRenderFns$c = [];
 const AlignmentDeviceControl_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$d = {
+const __vue2_script$c = {
   name: "AlignmentDeviceControl",
   components: {
     Button,
@@ -21719,26 +21751,26 @@ const __vue2_script$d = {
     };
   }
 };
-const __cssModules$d = {};
-var __component__$d = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$d,
-  render$d,
-  staticRenderFns$d,
+const __cssModules$c = {};
+var __component__$c = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$c,
+  render$c,
+  staticRenderFns$c,
   false,
-  __vue2_injectStyles$d,
+  __vue2_injectStyles$c,
   "cef30e1a",
   null,
   null
 );
-function __vue2_injectStyles$d(context) {
-  for (let o in __cssModules$d) {
-    this[o] = __cssModules$d[o];
+function __vue2_injectStyles$c(context) {
+  for (let o in __cssModules$c) {
+    this[o] = __cssModules$c[o];
   }
 }
 const AlignmentDeviceControl = /* @__PURE__ */ function() {
-  return __component__$d.exports;
+  return __component__$c.exports;
 }();
-var render$c = function __render__34() {
+var render$b = function __render__34() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -21804,9 +21836,9 @@ var render$c = function __render__34() {
     }
   })], 1)], 1)], 1);
 };
-var staticRenderFns$c = [];
+var staticRenderFns$b = [];
 const LineHeightControl_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$c = {
+const __vue2_script$b = {
   name: "LineHeightControl",
   components: {
     Range,
@@ -21836,26 +21868,26 @@ const __vue2_script$c = {
     };
   }
 };
-const __cssModules$c = {};
-var __component__$c = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$c,
-  render$c,
-  staticRenderFns$c,
+const __cssModules$b = {};
+var __component__$b = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$b,
+  render$b,
+  staticRenderFns$b,
   false,
-  __vue2_injectStyles$c,
+  __vue2_injectStyles$b,
   "9ea28b80",
   null,
   null
 );
-function __vue2_injectStyles$c(context) {
-  for (let o in __cssModules$c) {
-    this[o] = __cssModules$c[o];
+function __vue2_injectStyles$b(context) {
+  for (let o in __cssModules$b) {
+    this[o] = __cssModules$b[o];
   }
 }
 const LineHeightControl = /* @__PURE__ */ function() {
-  return __component__$c.exports;
+  return __component__$b.exports;
 }();
-var render$b = function __render__35() {
+var render$a = function __render__35() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -21938,9 +21970,9 @@ var render$b = function __render__35() {
     }])
   })], 1);
 };
-var staticRenderFns$b = [];
+var staticRenderFns$a = [];
 const ListControl_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$b = {
+const __vue2_script$a = {
   name: "ListControl",
   listTypes: ListTypes.values.map((type) => ({
     id: type,
@@ -21978,26 +22010,26 @@ const __vue2_script$b = {
     };
   }
 };
-const __cssModules$b = {};
-var __component__$b = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$b,
-  render$b,
-  staticRenderFns$b,
+const __cssModules$a = {};
+var __component__$a = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$a,
+  render$a,
+  staticRenderFns$a,
   false,
-  __vue2_injectStyles$b,
+  __vue2_injectStyles$a,
   "2eeb2252",
   null,
   null
 );
-function __vue2_injectStyles$b(context) {
-  for (let o in __cssModules$b) {
-    this[o] = __cssModules$b[o];
+function __vue2_injectStyles$a(context) {
+  for (let o in __cssModules$a) {
+    this[o] = __cssModules$a[o];
   }
 }
 const ListControl = /* @__PURE__ */ function() {
-  return __component__$b.exports;
+  return __component__$a.exports;
 }();
-var render$a = function __render__36() {
+var render$9 = function __render__36() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -22023,8 +22055,8 @@ var render$a = function __render__36() {
     }
   })], 1);
 };
-var staticRenderFns$a = [];
-const __vue2_script$a = {
+var staticRenderFns$9 = [];
+const __vue2_script$9 = {
   name: "RemoveFormatControl",
   components: {
     Icon,
@@ -22039,26 +22071,26 @@ const __vue2_script$a = {
     return { apply: apply2 };
   }
 };
-const __cssModules$a = {};
-var __component__$a = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$a,
-  render$a,
-  staticRenderFns$a,
+const __cssModules$9 = {};
+var __component__$9 = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$9,
+  render$9,
+  staticRenderFns$9,
   false,
-  __vue2_injectStyles$a,
+  __vue2_injectStyles$9,
   null,
   null,
   null
 );
-function __vue2_injectStyles$a(context) {
-  for (let o in __cssModules$a) {
-    this[o] = __cssModules$a[o];
+function __vue2_injectStyles$9(context) {
+  for (let o in __cssModules$9) {
+    this[o] = __cssModules$9[o];
   }
 }
 const RemoveFormatControl = /* @__PURE__ */ function() {
-  return __component__$a.exports;
+  return __component__$9.exports;
 }();
-var render$9 = function __render__37() {
+var render$8 = function __render__37() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -22069,7 +22101,8 @@ var render$9 = function __render__37() {
   }, [_vm._v("Link")]), _c("Button", {
     staticClass: "zw-link-modal-header__unlink-button",
     attrs: {
-      "disabled": !_vm.isLink
+      "disabled": !_vm.isLink,
+      "data-initial-focus": "false"
     },
     on: {
       "click": _vm.removeLink
@@ -22083,9 +22116,9 @@ var render$9 = function __render__37() {
     }
   }), _vm._v(" Remove ")], 1)], 1);
 };
-var staticRenderFns$9 = [];
+var staticRenderFns$8 = [];
 const LinkControlHeader_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$9 = {
+const __vue2_script$8 = {
   name: "LinkControlHeader",
   components: { Icon, Button },
   setup(_, { emit }) {
@@ -22095,59 +22128,6 @@ const __vue2_script$9 = {
     return { isLink, removeLink };
   }
 };
-const __cssModules$9 = {};
-var __component__$9 = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$9,
-  render$9,
-  staticRenderFns$9,
-  false,
-  __vue2_injectStyles$9,
-  "aa42e2ce",
-  null,
-  null
-);
-function __vue2_injectStyles$9(context) {
-  for (let o in __cssModules$9) {
-    this[o] = __cssModules$9[o];
-  }
-}
-const LinkControlHeader = /* @__PURE__ */ function() {
-  return __component__$9.exports;
-}();
-var render$8 = function __render__38() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("div", {
-    staticClass: "zw-link-modal__apply"
-  }, [_c("Button", {
-    staticClass: "zw-margin-right--xs",
-    attrs: {
-      "skin": "secondary"
-    },
-    on: {
-      "click": _vm.cancel
-    }
-  }, [_vm._v(" Cancel ")]), _c("Button", {
-    attrs: {
-      "skin": "primary"
-    },
-    on: {
-      "click": _vm.apply
-    }
-  }, [_vm._v(" Save ")])], 1);
-};
-var staticRenderFns$8 = [];
-const LinkControlApply_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$8 = {
-  name: "LinkControlApply",
-  components: { Button },
-  setup(_, { emit }) {
-    const cancel = () => emit("cancel");
-    const apply2 = () => emit("apply");
-    return { cancel, apply: apply2 };
-  }
-};
 const __cssModules$8 = {};
 var __component__$8 = /* @__PURE__ */ normalizeComponent(
   __vue2_script$8,
@@ -22155,7 +22135,7 @@ var __component__$8 = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$8,
   false,
   __vue2_injectStyles$8,
-  "2ad47228",
+  "0a0c67c1",
   null,
   null
 );
@@ -22164,7 +22144,7 @@ function __vue2_injectStyles$8(context) {
     this[o] = __cssModules$8[o];
   }
 }
-const LinkControlApply = /* @__PURE__ */ function() {
+const LinkControlHeader = /* @__PURE__ */ function() {
   return __component__$8.exports;
 }();
 function useLink() {
@@ -22208,6 +22188,8 @@ function useLink() {
   }
   function removeLink() {
     editor.chain().focus().unsetLink().run();
+    resetDestinations();
+    updateTarget(false);
   }
   function updateLink(value) {
     destinationHrefs.value[currentDestination.value.id] = value;
@@ -22229,7 +22211,7 @@ function useLink() {
     updateText
   };
 }
-var render$7 = function __render__39() {
+var render$7 = function __render__38() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -22300,7 +22282,7 @@ function __vue2_injectStyles$7(context) {
 const LinkControlPageBlock = /* @__PURE__ */ function() {
   return __component__$7.exports;
 }();
-var render$6 = function __render__40() {
+var render$6 = function __render__39() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -22368,7 +22350,7 @@ function __vue2_injectStyles$6(context) {
 const LinkControlUrl = /* @__PURE__ */ function() {
   return __component__$6.exports;
 }();
-var render$5 = function __render__41() {
+var render$5 = function __render__40() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -22483,7 +22465,7 @@ function __vue2_injectStyles$5(context) {
 const LinkControlDestination = /* @__PURE__ */ function() {
   return __component__$5.exports;
 }();
-var render$4 = function __render__42() {
+var render$4 = function __render__41() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -22515,14 +22497,24 @@ var render$4 = function __render__42() {
     ref: "modalRef",
     staticClass: "zw-link-modal",
     attrs: {
-      "toggler": _vm.toggler
+      "toggler": _vm.toggler,
+      "focus-first-control": ""
     }
   }, [_c("LinkControlHeader", {
     on: {
       "remove-link": _vm.removeLink
     }
-  }), _c("div", {
-    staticClass: "zw-link-modal__body"
+  }), _c("form", {
+    staticClass: "zw-link-modal__body",
+    attrs: {
+      "data-test-selector": "form"
+    },
+    on: {
+      "submit": function submit($event) {
+        $event.preventDefault();
+        return _vm.applyLink.apply(null, arguments);
+      }
+    }
   }, [_c("TextField", {
     staticClass: "zw-margin-bottom--sm",
     attrs: {
@@ -22543,12 +22535,22 @@ var render$4 = function __render__42() {
     on: {
       "reset-errors": _vm.resetErrors
     }
-  }), _c("LinkControlApply", {
+  }), _c("div", {
+    staticClass: "zw-link-modal__actions"
+  }, [_c("Button", {
+    staticClass: "zw-margin-right--xs",
+    attrs: {
+      "skin": "secondary"
+    },
     on: {
-      "cancel": _vm.toggler.close,
-      "apply": _vm.applyLink
+      "click": _vm.toggler.close
     }
-  })], 1)], 1)], 1);
+  }, [_vm._v(" Cancel ")]), _c("Button", {
+    attrs: {
+      "type": "submit",
+      "skin": "primary"
+    }
+  }, [_vm._v(" Save ")])], 1)], 1)], 1)], 1);
 };
 var staticRenderFns$4 = [];
 const LinkControl_vue_vue_type_style_index_0_scoped_true_lang = "";
@@ -22556,7 +22558,6 @@ const __vue2_script$4 = {
   name: "LinkControl",
   components: {
     LinkControlDestination,
-    LinkControlApply,
     LinkControlHeader,
     TextField,
     Modal,
@@ -22603,7 +22604,7 @@ const __vue2_script$4 = {
       modalRef
     });
     const isLink = editor.commands.isLink();
-    const isActive2 = computed(() => toggler.isOpened.value || unref(isLink));
+    const isActive2 = computed(() => unref(toggler.isOpened) || unref(isLink));
     const updateLinkText = (value) => {
       resetErrors();
       link.updateText(value);
@@ -22643,7 +22644,7 @@ var __component__$4 = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$4,
   false,
   __vue2_injectStyles$4,
-  "74b3b43a",
+  "3db89308",
   null,
   null
 );
@@ -22655,7 +22656,7 @@ function __vue2_injectStyles$4(context) {
 const LinkControl = /* @__PURE__ */ function() {
   return __component__$4.exports;
 }();
-var render$3 = function __render__43() {
+var render$3 = function __render__42() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -22749,7 +22750,7 @@ function __vue2_injectStyles$3(context) {
 const ToolbarFull = /* @__PURE__ */ function() {
   return __component__$3.exports;
 }();
-var render$2 = function __render__44() {
+var render$2 = function __render__43() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -22798,7 +22799,7 @@ function __vue2_injectStyles$2(context) {
 const ToolbarDevice = /* @__PURE__ */ function() {
   return __component__$2.exports;
 }();
-var render$1 = function __render__45() {
+var render$1 = function __render__44() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -22873,7 +22874,8 @@ function useEditor({ content, onChange, extensions: extensions2, isReadonlyRef }
     content: ContentNormalizer.normalize(content.value),
     onUpdate: () => onChange(markWysiwygContent(editor.getJSON())),
     extensions: extensions2,
-    injectCSS: false
+    injectCSS: false,
+    editable: !unref(isReadonlyRef)
   }));
   onUnmounted(() => editor.destroy());
   watch(content, (value) => {
@@ -22884,7 +22886,7 @@ function useEditor({ content, onChange, extensions: extensions2, isReadonlyRef }
       editor.commands.setContent(content3, false);
     }
   });
-  watch(isReadonlyRef, (isReadonly) => editor.setEditable(!isReadonly), { immediate: true });
+  watch(isReadonlyRef, (isReadonly) => editor.setEditable(!isReadonly));
   return editor;
 }
 function useToolbar({ wrapperRef, offsets, isActiveRef, placementRef }) {
@@ -22924,8 +22926,7 @@ function useToolbar({ wrapperRef, offsets, isActiveRef, placementRef }) {
 const FontFamily = Mark.create({
   name: TextSettings.FONT_FAMILY,
   addOptions: () => ({
-    fonts: [],
-    defaultFont: ""
+    fonts: []
   }),
   addAttributes: () => ({
     value: { required: true }
@@ -22968,7 +22969,7 @@ const FontFamily = Mark.create({
     const getAttrs = (input) => {
       const parsed = input.replace(/"/g, "");
       const isExists = this.options.fonts.some((font) => font.name === parsed);
-      const value = isExists ? parsed : this.options.defaultFont;
+      const value = isExists ? parsed : unref(this.options.defaultPreset).common.font_family;
       return { value };
     };
     return [
@@ -23106,14 +23107,38 @@ const StylePreset = Extension.create({
     function findPresetById(presets, id2) {
       return presets.find((preset) => id2 === preset.id);
     }
+    function mergeSettings(source, target) {
+      const settings = {};
+      for (const name of Object.keys(source)) {
+        const sourceValue = source[name];
+        const targetValue = target[name];
+        const isInherit = !targetValue || targetValue.toLowerCase() === "inherit";
+        settings[name] = isInherit ? sourceValue : targetValue;
+      }
+      return settings;
+    }
     return {
       getPresetList: createCommand(() => computed(() => {
         return this.options.presets.filter((preset) => !preset.hidden);
       })),
       getPreset: createCommand(({ commands: commands2 }) => {
-        const selection = commands2.getBlockAttributes("preset", { id: this.options.defaultId });
-        const presets = commands2.getPresetList();
-        return computed(() => findPresetById(unref(presets), unref(selection).id));
+        const selectionRef = commands2.getBlockAttributes("preset", { id: this.options.defaultId });
+        const presetsRef = commands2.getPresetList();
+        const isLinkRef = commands2.isLink();
+        const linkPresetRef = commands2.getLinkPreset();
+        return computed(() => {
+          const preset = findPresetById(unref(presetsRef), unref(selectionRef).id);
+          if (!unref(isLinkRef))
+            return preset;
+          const linkPreset = unref(linkPresetRef);
+          return {
+            id: preset.id,
+            common: mergeSettings(preset.common, linkPreset.common),
+            mobile: mergeSettings(preset.mobile, linkPreset.mobile),
+            tablet: mergeSettings(preset.tablet, linkPreset.tablet),
+            desktop: mergeSettings(preset.desktop, linkPreset.desktop)
+          };
+        });
       }),
       applyPreset: createCommand(({ commands: commands2, chain }, presetId) => {
         var _a, _b;
@@ -23241,6 +23266,8 @@ const FontWeight = Mark.create({
   }),
   parseHTML() {
     const getAttrs = (value) => {
+      if (value === "bold")
+        return { value: "700" };
       return Number(value) ? { value } : false;
     };
     return [
@@ -23526,13 +23553,8 @@ const TextDecoration = Mark.create({
       }),
       getDefaultTextDecoration: createCommand(({ commands: commands2 }) => {
         const preset = commands2.getPreset();
-        const isLink = commands2.isLink();
-        const linkPreset = commands2.getLinkPreset();
         return computed(() => {
-          const decoration = [
-            unref(preset).common.text_decoration,
-            unref(isLink) ? unref(linkPreset).common.text_decoration : ""
-          ].join(" ");
+          const decoration = unref(preset).common.text_decoration;
           return {
             underline: decoration.includes("underline"),
             strike_through: decoration.includes("line-through")
@@ -25832,8 +25854,11 @@ const Margin = Extension.create({
 });
 function buildExtensions(options) {
   const getPresetById = (id2) => options.presetsRef.value.find((preset) => preset.id === id2);
-  const defaultPreset = getPresetById(options.defaultPresetId);
-  const linkPreset = getPresetById(options.linkPresetId);
+  const presetsMap = reactive({ default: null, link: null });
+  watch(options.presetsRef, () => {
+    presetsMap.default = getPresetById(options.defaultPresetId);
+    presetsMap.link = getPresetById(options.linkPresetId);
+  }, { immediate: true });
   return buildCoreExtensions().concat([
     StylePreset.configure({
       presets: options.presetsRef,
@@ -25854,7 +25879,7 @@ function buildExtensions(options) {
     }),
     FontFamily.configure({
       fonts: options.fonts,
-      defaultFont: defaultPreset.common.font_family
+      defaultPreset: toRef(presetsMap, "default")
     }),
     FontWeight,
     FontColor,
@@ -25868,7 +25893,7 @@ function buildExtensions(options) {
       wrapperRef: options.wrapperRef
     }),
     Link.configure({
-      preset: linkPreset,
+      preset: toRef(presetsMap, "link"),
       basePresetClass: options.basePresetClass,
       pageBlocks: options.pageBlocksRef
     }),
@@ -25904,7 +25929,7 @@ class Font {
     return String(closestWeight);
   }
 }
-var render = function __render__46() {
+var render = function __render__45() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;