@zipify/wysiwyg 2.5.5 → 2.5.6

package/dist/wysiwyg.mjs

@@ -14058,26 +14058,16 @@ const LinkDestinations = Object.freeze({
   URL: "url",
   BLOCK: "block"
 });
-const InjectionTokens$1 = Object.freeze({
-  FONTS: Symbol("fonts"),
-  FONT_SIZES: Symbol("fontSizes"),
-  EDITOR: Symbol("editor"),
-  LOCAL_STORAGE: Symbol("localStorage"),
-  FAVORITE_COLORS: Symbol("favoriteColors"),
-  PAGE_BLOCKS: Symbol("pageBlocks"),
-  POPUP_MODE: Symbol("popupMode")
-});
 var render$I = function __render__() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("div", {
-    staticClass: "zw-toolbar__divider",
-    "class": _vm.classes
-  });
+    staticClass: "zw-toolbar__group"
+  }, [_vm._t("default")], 2);
 };
 var staticRenderFns$I = [];
-const ToolbarDivider_vue_vue_type_style_index_0_scoped_true_lang = "";
+const ToolbarGroup_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;
   if (render2) {
@@ -14133,26 +14123,7 @@ function normalizeComponent(scriptExports, render2, staticRenderFns2, functional
   };
 }
 const __vue2_script$I = {
-  name: "ToolbarDivider",
-  props: {
-    vertical: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    horizontal: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  setup(props) {
-    const classes = computed(() => ({
-      "zw-toolbar__divider--vertical": props.vertical,
-      "zw-toolbar__divider--horizontal": props.horizontal
-    }));
-    return { classes };
-  }
+  name: "ToolbarGroup"
 };
 const __cssModules$I = {};
 var __component__$I = /* @__PURE__ */ normalizeComponent(
@@ -14161,7 +14132,7 @@ var __component__$I = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$I,
   false,
   __vue2_injectStyles$I,
-  "d9845d32",
+  "31a43dae",
   null,
   null
 );
@@ -14170,7 +14141,7 @@ function __vue2_injectStyles$I(context) {
     this[o] = __cssModules$I[o];
   }
 }
-const ToolbarDivider = /* @__PURE__ */ function() {
+const ToolbarGroup = /* @__PURE__ */ function() {
   return __component__$I.exports;
 }();
 var render$H = function __render__2() {
@@ -14178,13 +14149,33 @@ var render$H = function __render__2() {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("div", {
-    staticClass: "zw-toolbar__row"
-  }, [_vm._t("default")], 2);
+    staticClass: "zw-toolbar__divider",
+    "class": _vm.classes
+  });
 };
 var staticRenderFns$H = [];
-const ToolbarRow_vue_vue_type_style_index_0_scoped_true_lang = "";
+const ToolbarDivider_vue_vue_type_style_index_0_scoped_true_lang = "";
 const __vue2_script$H = {
-  name: "ToolbarRow"
+  name: "ToolbarDivider",
+  props: {
+    vertical: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    horizontal: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  setup(props) {
+    const classes = computed(() => ({
+      "zw-toolbar__divider--vertical": props.vertical,
+      "zw-toolbar__divider--horizontal": props.horizontal
+    }));
+    return { classes };
+  }
 };
 const __cssModules$H = {};
 var __component__$H = /* @__PURE__ */ normalizeComponent(
@@ -14193,7 +14184,7 @@ var __component__$H = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$H,
   false,
   __vue2_injectStyles$H,
-  "a6ed2ebe",
+  "3c490aa3",
   null,
   null
 );
@@ -14202,7 +14193,7 @@ function __vue2_injectStyles$H(context) {
     this[o] = __cssModules$H[o];
   }
 }
-const ToolbarRow = /* @__PURE__ */ function() {
+const ToolbarDivider = /* @__PURE__ */ function() {
   return __component__$H.exports;
 }();
 var render$G = function __render__3() {
@@ -14210,13 +14201,13 @@ var render$G = function __render__3() {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("div", {
-    staticClass: "zw-toolbar__group"
+    staticClass: "zw-toolbar__row"
   }, [_vm._t("default")], 2);
 };
 var staticRenderFns$G = [];
-const ToolbarGroup_vue_vue_type_style_index_0_scoped_true_lang = "";
+const ToolbarRow_vue_vue_type_style_index_0_scoped_true_lang = "";
 const __vue2_script$G = {
-  name: "ToolbarGroup"
+  name: "ToolbarRow"
 };
 const __cssModules$G = {};
 var __component__$G = /* @__PURE__ */ normalizeComponent(
@@ -14225,7 +14216,7 @@ var __component__$G = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$G,
   false,
   __vue2_injectStyles$G,
-  "25eee0ed",
+  "050f71dd",
   null,
   null
 );
@@ -14234,9 +14225,17 @@ function __vue2_injectStyles$G(context) {
     this[o] = __cssModules$G[o];
   }
 }
-const ToolbarGroup = /* @__PURE__ */ function() {
+const ToolbarRow = /* @__PURE__ */ function() {
   return __component__$G.exports;
 }();
+const InjectionTokens$1 = Object.freeze({
+  FONTS: Symbol("fonts"),
+  FONT_SIZES: Symbol("fontSizes"),
+  EDITOR: Symbol("editor"),
+  LOCAL_STORAGE: Symbol("localStorage"),
+  FAVORITE_COLORS: Symbol("favoriteColors"),
+  PAGE_BLOCKS: Symbol("pageBlocks")
+});
 var render$F = function __render__4() {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -23278,102 +23277,6 @@ const AlignmentControl = /* @__PURE__ */ function() {
   return __component__$d.exports;
 }();
 var render$c = function __render__33() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("div", {
-    ref: "wrapperRef",
-    staticClass: "zw-position--relative"
-  }, [_c("Button", {
-    directives: [{
-      name: "tooltip",
-      rawName: "v-tooltip",
-      value: "Alignment",
-      expression: "'Alignment'"
-    }],
-    attrs: {
-      "icon": "",
-      "skin": "toolbar",
-      "active": _vm.isOpened
-    },
-    on: {
-      "click": _vm.toggler.open
-    }
-  }, [_c("Icon", {
-    attrs: {
-      "name": _vm.icon,
-      "size": "28px",
-      "auto-color": ""
-    }
-  })], 1), _c("Modal", {
-    ref: "modalRef",
-    staticClass: "zw-alignment-control__modal",
-    attrs: {
-      "toggler": _vm.toggler
-    }
-  }, [_c("AlignmentControl", {
-    staticClass: "zw-alignment-control__toggle",
-    on: {
-      "applied": _vm.toggler.close
-    }
-  })], 1)], 1);
-};
-var staticRenderFns$c = [];
-const AlignmentDeviceControl_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$c = {
-  name: "AlignmentDeviceControl",
-  components: {
-    Button,
-    Icon,
-    Modal,
-    AlignmentControl
-  },
-  directives: {
-    tooltip
-  },
-  setup() {
-    const editor = inject(InjectionTokens$1.EDITOR);
-    const currentValue = editor.commands.getAlignment();
-    const wrapperRef = ref(null);
-    const modalRef = ref(null);
-    const toggler = useModalToggler({
-      wrapperRef,
-      modalRef
-    });
-    const icon = computed(() => {
-      const name = unref(currentValue) || Alignments.LEFT;
-      return `alignment-${name}`;
-    });
-    return {
-      wrapperRef,
-      modalRef,
-      currentValue,
-      icon,
-      toggler,
-      isOpened: toggler.isOpened
-    };
-  }
-};
-const __cssModules$c = {};
-var __component__$c = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$c,
-  render$c,
-  staticRenderFns$c,
-  false,
-  __vue2_injectStyles$c,
-  "4aefb465",
-  null,
-  null
-);
-function __vue2_injectStyles$c(context) {
-  for (let o in __cssModules$c) {
-    this[o] = __cssModules$c[o];
-  }
-}
-const AlignmentDeviceControl = /* @__PURE__ */ function() {
-  return __component__$c.exports;
-}();
-var render$b = function __render__34() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -23456,9 +23359,9 @@ var render$b = function __render__34() {
     }
   })], 1)], 1)], 1);
 };
-var staticRenderFns$b = [];
+var staticRenderFns$c = [];
 const LineHeightControl_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$b = {
+const __vue2_script$c = {
   name: "LineHeightControl",
   components: {
     Range,
@@ -23490,26 +23393,26 @@ const __vue2_script$b = {
     };
   }
 };
-const __cssModules$b = {};
-var __component__$b = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$b,
-  render$b,
-  staticRenderFns$b,
+const __cssModules$c = {};
+var __component__$c = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$c,
+  render$c,
+  staticRenderFns$c,
   false,
-  __vue2_injectStyles$b,
+  __vue2_injectStyles$c,
   "2f58c40f",
   null,
   null
 );
-function __vue2_injectStyles$b(context) {
-  for (let o in __cssModules$b) {
-    this[o] = __cssModules$b[o];
+function __vue2_injectStyles$c(context) {
+  for (let o in __cssModules$c) {
+    this[o] = __cssModules$c[o];
   }
 }
 const LineHeightControl = /* @__PURE__ */ function() {
-  return __component__$b.exports;
+  return __component__$c.exports;
 }();
-var render$a = function __render__35() {
+var render$b = function __render__34() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -23592,9 +23495,9 @@ var render$a = function __render__35() {
     }])
   })], 1);
 };
-var staticRenderFns$a = [];
+var staticRenderFns$b = [];
 const ListControl_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$a = {
+const __vue2_script$b = {
   name: "ListControl",
   listTypes: ListTypes.values.map((type) => ({
     id: type,
@@ -23632,26 +23535,26 @@ const __vue2_script$a = {
     };
   }
 };
-const __cssModules$a = {};
-var __component__$a = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$a,
-  render$a,
-  staticRenderFns$a,
+const __cssModules$b = {};
+var __component__$b = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$b,
+  render$b,
+  staticRenderFns$b,
   false,
-  __vue2_injectStyles$a,
+  __vue2_injectStyles$b,
   "2eeb2252",
   null,
   null
 );
-function __vue2_injectStyles$a(context) {
-  for (let o in __cssModules$a) {
-    this[o] = __cssModules$a[o];
+function __vue2_injectStyles$b(context) {
+  for (let o in __cssModules$b) {
+    this[o] = __cssModules$b[o];
   }
 }
 const ListControl = /* @__PURE__ */ function() {
-  return __component__$a.exports;
+  return __component__$b.exports;
 }();
-var render$9 = function __render__36() {
+var render$a = function __render__35() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -23677,8 +23580,8 @@ var render$9 = function __render__36() {
     }
   })], 1);
 };
-var staticRenderFns$9 = [];
-const __vue2_script$9 = {
+var staticRenderFns$a = [];
+const __vue2_script$a = {
   name: "RemoveFormatControl",
   components: {
     Icon,
@@ -23693,24 +23596,24 @@ const __vue2_script$9 = {
     return { apply: apply2 };
   }
 };
-const __cssModules$9 = {};
-var __component__$9 = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$9,
-  render$9,
-  staticRenderFns$9,
+const __cssModules$a = {};
+var __component__$a = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$a,
+  render$a,
+  staticRenderFns$a,
   false,
-  __vue2_injectStyles$9,
+  __vue2_injectStyles$a,
   null,
   null,
   null
 );
-function __vue2_injectStyles$9(context) {
-  for (let o in __cssModules$9) {
-    this[o] = __cssModules$9[o];
+function __vue2_injectStyles$a(context) {
+  for (let o in __cssModules$a) {
+    this[o] = __cssModules$a[o];
   }
 }
 const RemoveFormatControl = /* @__PURE__ */ function() {
-  return __component__$9.exports;
+  return __component__$a.exports;
 }();
 const RegExps = {
   URL: /^(https:\/\/www\.|https:\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,100}(:[0-9]{1,5})?(\/.*)?$/i,
@@ -23718,7 +23621,7 @@ const RegExps = {
   MAILTO_PROTOCOL: /^mailto:.+$/,
   TEL_PROTOCOL: /^tel:.+$/
 };
-var render$8 = function __render__37() {
+var render$9 = function __render__36() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -23744,9 +23647,9 @@ var render$8 = function __render__37() {
     }
   }), _vm._v(" Remove ")], 1)], 1);
 };
-var staticRenderFns$8 = [];
+var staticRenderFns$9 = [];
 const LinkControlHeader_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$8 = {
+const __vue2_script$9 = {
   name: "LinkControlHeader",
   components: { Icon, Button },
   setup(_, { emit }) {
@@ -23756,24 +23659,24 @@ const __vue2_script$8 = {
     return { isLink, removeLink };
   }
 };
-const __cssModules$8 = {};
-var __component__$8 = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$8,
-  render$8,
-  staticRenderFns$8,
+const __cssModules$9 = {};
+var __component__$9 = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$9,
+  render$9,
+  staticRenderFns$9,
   false,
-  __vue2_injectStyles$8,
+  __vue2_injectStyles$9,
   "0a0c67c1",
   null,
   null
 );
-function __vue2_injectStyles$8(context) {
-  for (let o in __cssModules$8) {
-    this[o] = __cssModules$8[o];
+function __vue2_injectStyles$9(context) {
+  for (let o in __cssModules$9) {
+    this[o] = __cssModules$9[o];
   }
 }
 const LinkControlHeader = /* @__PURE__ */ function() {
-  return __component__$8.exports;
+  return __component__$9.exports;
 }();
 function useLink() {
   const editor = inject(InjectionTokens$1.EDITOR);
@@ -23842,7 +23745,7 @@ function useLink() {
     updateText
   };
 }
-var render$7 = function __render__38() {
+var render$8 = function __render__37() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -23875,8 +23778,8 @@ var render$7 = function __render__38() {
     }])
   })], 1);
 };
-var staticRenderFns$7 = [];
-const __vue2_script$7 = {
+var staticRenderFns$8 = [];
+const __vue2_script$8 = {
   name: "LinkControlPageBlock",
   components: { DropdownOption, Dropdown, FieldLabel },
   props: {
@@ -23894,26 +23797,26 @@ const __vue2_script$7 = {
     return { pageBlocks, applyBlock };
   }
 };
-const __cssModules$7 = {};
-var __component__$7 = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$7,
-  render$7,
-  staticRenderFns$7,
+const __cssModules$8 = {};
+var __component__$8 = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$8,
+  render$8,
+  staticRenderFns$8,
   false,
-  __vue2_injectStyles$7,
+  __vue2_injectStyles$8,
   null,
   null,
   null
 );
-function __vue2_injectStyles$7(context) {
-  for (let o in __cssModules$7) {
-    this[o] = __cssModules$7[o];
+function __vue2_injectStyles$8(context) {
+  for (let o in __cssModules$8) {
+    this[o] = __cssModules$8[o];
   }
 }
 const LinkControlPageBlock = /* @__PURE__ */ function() {
-  return __component__$7.exports;
+  return __component__$8.exports;
 }();
-var render$6 = function __render__39() {
+var render$7 = function __render__38() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -23938,8 +23841,8 @@ var render$6 = function __render__39() {
     }
   })], 1);
 };
-var staticRenderFns$6 = [];
-const __vue2_script$6 = {
+var staticRenderFns$7 = [];
+const __vue2_script$7 = {
   name: "LinkControlUrl",
   components: { TextField, Checkbox },
   props: {
@@ -23962,26 +23865,26 @@ const __vue2_script$6 = {
     return { updateLink, updateTarget };
   }
 };
-const __cssModules$6 = {};
-var __component__$6 = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$6,
-  render$6,
-  staticRenderFns$6,
+const __cssModules$7 = {};
+var __component__$7 = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$7,
+  render$7,
+  staticRenderFns$7,
   false,
-  __vue2_injectStyles$6,
+  __vue2_injectStyles$7,
   null,
   null,
   null
 );
-function __vue2_injectStyles$6(context) {
-  for (let o in __cssModules$6) {
-    this[o] = __cssModules$6[o];
+function __vue2_injectStyles$7(context) {
+  for (let o in __cssModules$7) {
+    this[o] = __cssModules$7[o];
   }
 }
 const LinkControlUrl = /* @__PURE__ */ function() {
-  return __component__$6.exports;
+  return __component__$7.exports;
 }();
-var render$5 = function __render__40() {
+var render$6 = function __render__39() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -24030,8 +23933,8 @@ var render$5 = function __render__40() {
     }
   })], 1);
 };
-var staticRenderFns$5 = [];
-const __vue2_script$5 = {
+var staticRenderFns$6 = [];
+const __vue2_script$6 = {
   name: "LinkControlDestination",
   destinationTypes: [
     { id: LinkDestinations.URL, title: "URL" },
@@ -24077,26 +23980,26 @@ const __vue2_script$5 = {
     };
   }
 };
-const __cssModules$5 = {};
-var __component__$5 = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$5,
-  render$5,
-  staticRenderFns$5,
+const __cssModules$6 = {};
+var __component__$6 = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$6,
+  render$6,
+  staticRenderFns$6,
   false,
-  __vue2_injectStyles$5,
+  __vue2_injectStyles$6,
   null,
   null,
   null
 );
-function __vue2_injectStyles$5(context) {
-  for (let o in __cssModules$5) {
-    this[o] = __cssModules$5[o];
+function __vue2_injectStyles$6(context) {
+  for (let o in __cssModules$6) {
+    this[o] = __cssModules$6[o];
   }
 }
 const LinkControlDestination = /* @__PURE__ */ function() {
-  return __component__$5.exports;
+  return __component__$6.exports;
 }();
-var render$4 = function __render__41() {
+var render$5 = function __render__40() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -24183,9 +24086,9 @@ var render$4 = function __render__41() {
     }
   }, [_vm._v(" Save ")])], 1)], 1)], 1)], 1);
 };
-var staticRenderFns$4 = [];
+var staticRenderFns$5 = [];
 const LinkControl_vue_vue_type_style_index_0_scoped_true_lang = "";
-const __vue2_script$4 = {
+const __vue2_script$5 = {
   name: "LinkControl",
   components: {
     LinkControlDestination,
@@ -24272,6 +24175,92 @@ const __vue2_script$4 = {
     };
   }
 };
+const __cssModules$5 = {};
+var __component__$5 = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$5,
+  render$5,
+  staticRenderFns$5,
+  false,
+  __vue2_injectStyles$5,
+  "eea2f92a",
+  null,
+  null
+);
+function __vue2_injectStyles$5(context) {
+  for (let o in __cssModules$5) {
+    this[o] = __cssModules$5[o];
+  }
+}
+const LinkControl = /* @__PURE__ */ function() {
+  return __component__$5.exports;
+}();
+var render$4 = function __render__41() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", [_c("ToolbarRow", [_c("StylePresetControl"), _c("ToolbarDivider", {
+    attrs: {
+      "vertical": ""
+    }
+  }), _c("FontFamilyControl"), _c("ToolbarDivider", {
+    attrs: {
+      "vertical": ""
+    }
+  }), _c("FontWeightControl"), _c("ToolbarDivider", {
+    attrs: {
+      "vertical": ""
+    }
+  }), _c("FontSizeControl"), _c("ToolbarDivider", {
+    attrs: {
+      "vertical": ""
+    }
+  }), _c("ToolbarGroup", [_c("FontColorControl"), _c("BackgroundColorControl")], 1)], 1), _c("ToolbarDivider", {
+    attrs: {
+      "horizontal": ""
+    }
+  }), _c("ToolbarRow", [_c("ToolbarGroup", [_c("ItalicControl"), _c("UnderlineControl"), _c("StrikeThroughControl"), _c("SuperscriptControl"), _c("CaseStyleControl")], 1), _c("ToolbarDivider", {
+    attrs: {
+      "vertical": ""
+    }
+  }), _c("AlignmentControl"), _c("ToolbarDivider", {
+    attrs: {
+      "vertical": ""
+    }
+  }), _c("LineHeightControl"), _c("ToolbarDivider", {
+    attrs: {
+      "vertical": ""
+    }
+  }), _c("ListControl"), _c("ToolbarDivider", {
+    attrs: {
+      "vertical": ""
+    }
+  }), _c("ToolbarGroup", [_c("LinkControl"), _c("RemoveFormatControl")], 1)], 1)], 1);
+};
+var staticRenderFns$4 = [];
+const __vue2_script$4 = {
+  name: "ToolbarDesktop",
+  components: {
+    ToolbarRow,
+    ToolbarGroup,
+    ToolbarDivider,
+    StylePresetControl,
+    CaseStyleControl,
+    FontFamilyControl,
+    FontWeightControl,
+    FontSizeControl,
+    FontColorControl,
+    BackgroundColorControl,
+    ItalicControl,
+    UnderlineControl,
+    SuperscriptControl,
+    StrikeThroughControl,
+    AlignmentControl,
+    LineHeightControl,
+    ListControl,
+    RemoveFormatControl,
+    LinkControl
+  }
+};
 const __cssModules$4 = {};
 var __component__$4 = /* @__PURE__ */ normalizeComponent(
   __vue2_script$4,
@@ -24279,7 +24268,7 @@ var __component__$4 = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$4,
   false,
   __vue2_injectStyles$4,
-  "eea2f92a",
+  null,
   null,
   null
 );
@@ -24288,7 +24277,7 @@ function __vue2_injectStyles$4(context) {
     this[o] = __cssModules$4[o];
   }
 }
-const LinkControl = /* @__PURE__ */ function() {
+const ToolbarDesktop = /* @__PURE__ */ function() {
   return __component__$4.exports;
 }();
 var render$3 = function __render__42() {
@@ -24303,43 +24292,39 @@ var render$3 = function __render__42() {
     attrs: {
       "vertical": ""
     }
-  }), _c("FontWeightControl"), _c("ToolbarDivider", {
+  }), _c("FontWeightControl")], 1), _c("ToolbarDivider", {
     attrs: {
-      "vertical": ""
+      "horizontal": ""
     }
-  }), _c("FontSizeControl"), _c("ToolbarDivider", {
+  }), _c("ToolbarRow", [_c("FontSizeControl"), _c("ToolbarDivider", {
     attrs: {
       "vertical": ""
     }
-  }), _c("ToolbarGroup", [_c("FontColorControl"), _c("BackgroundColorControl")], 1), _vm.isPopupMode ? [_c("ToolbarDivider", {
+  }), _c("ToolbarGroup", [_c("FontColorControl"), _c("BackgroundColorControl")], 1), _c("ToolbarDivider", {
     attrs: {
       "vertical": ""
     }
-  }), _c("ToolbarGroup", [_c("ItalicControl"), _c("UnderlineControl"), _c("StrikeThroughControl"), _c("SuperscriptControl"), _c("CaseStyleControl")], 1)] : _vm._e()], 2), _c("ToolbarDivider", {
+  }), _c("ToolbarGroup", [_c("ItalicControl"), _c("UnderlineControl"), _c("StrikeThroughControl"), _c("SuperscriptControl"), _c("CaseStyleControl")], 1)], 1), _c("ToolbarDivider", {
     attrs: {
       "horizontal": ""
     }
-  }), _c("ToolbarRow", [!_vm.isPopupMode ? [_c("ToolbarGroup", [_c("ItalicControl"), _c("UnderlineControl"), _c("StrikeThroughControl"), _c("SuperscriptControl"), _c("CaseStyleControl")], 1), _c("ToolbarDivider", {
-    attrs: {
-      "vertical": ""
-    }
-  })] : _vm._e(), _c("AlignmentControl"), _c("ToolbarDivider", {
+  }), _c("ToolbarRow", [_c("AlignmentControl"), _c("ToolbarDivider", {
     attrs: {
       "vertical": ""
     }
-  }), _c("ToolbarGroup", [_c("LineHeightControl")], 1), _c("ToolbarDivider", {
+  }), _c("LineHeightControl"), _c("ToolbarDivider", {
     attrs: {
       "vertical": ""
     }
-  }), _c("ToolbarGroup", [_c("ListControl")], 1), _c("ToolbarDivider", {
+  }), _c("ListControl"), _c("ToolbarDivider", {
     attrs: {
       "vertical": ""
     }
-  }), _c("ToolbarGroup", [_c("LinkControl"), _c("RemoveFormatControl")], 1)], 2)], 1);
+  }), _c("ToolbarGroup", [_c("LinkControl"), _c("RemoveFormatControl")], 1)], 1)], 1);
 };
 var staticRenderFns$3 = [];
 const __vue2_script$3 = {
-  name: "ToolbarFull",
+  name: "ToolbarMobile",
   components: {
     ToolbarRow,
     ToolbarGroup,
@@ -24360,10 +24345,6 @@ const __vue2_script$3 = {
     ListControl,
     RemoveFormatControl,
     LinkControl
-  },
-  setup() {
-    const isPopupMode = inject(InjectionTokens$1.POPUP_MODE);
-    return { isPopupMode };
   }
 };
 const __cssModules$3 = {};
@@ -24382,18 +24363,22 @@ function __vue2_injectStyles$3(context) {
     this[o] = __cssModules$3[o];
   }
 }
-const ToolbarFull = /* @__PURE__ */ function() {
+const ToolbarMobile = /* @__PURE__ */ function() {
   return __component__$3.exports;
 }();
 var render$2 = function __render__43() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("ToolbarRow", [_c("StylePresetControl"), _c("ToolbarDivider", {
+  return _c("div", [_c("ToolbarRow", [_c("StylePresetControl"), _c("ToolbarDivider", {
     attrs: {
       "vertical": ""
     }
-  }), _c("AlignmentDeviceControl"), _c("ToolbarDivider", {
+  }), _c("FontFamilyControl"), _c("ToolbarDivider", {
+    attrs: {
+      "vertical": ""
+    }
+  }), _c("FontWeightControl"), _c("ToolbarDivider", {
     attrs: {
       "vertical": ""
     }
@@ -24401,18 +24386,51 @@ var render$2 = function __render__43() {
     attrs: {
       "vertical": ""
     }
-  }), _c("LineHeightControl")], 1);
+  }), _c("ToolbarGroup", [_c("FontColorControl"), _c("BackgroundColorControl")], 1), _c("ToolbarDivider", {
+    attrs: {
+      "vertical": ""
+    }
+  }), _c("ToolbarGroup", [_c("ItalicControl"), _c("UnderlineControl"), _c("StrikeThroughControl"), _c("SuperscriptControl"), _c("CaseStyleControl")], 1)], 1), _c("ToolbarDivider", {
+    attrs: {
+      "horizontal": ""
+    }
+  }), _c("ToolbarRow", [_c("AlignmentControl"), _c("ToolbarDivider", {
+    attrs: {
+      "vertical": ""
+    }
+  }), _c("LineHeightControl"), _c("ToolbarDivider", {
+    attrs: {
+      "vertical": ""
+    }
+  }), _c("ListControl"), _c("ToolbarDivider", {
+    attrs: {
+      "vertical": ""
+    }
+  }), _c("ToolbarGroup", [_c("LinkControl"), _c("RemoveFormatControl")], 1)], 1)], 1);
 };
 var staticRenderFns$2 = [];
 const __vue2_script$2 = {
-  name: "ToolbarDevice",
+  name: "ToolbarPopup",
   components: {
     ToolbarRow,
+    ToolbarGroup,
     ToolbarDivider,
     StylePresetControl,
-    AlignmentDeviceControl,
+    CaseStyleControl,
+    FontFamilyControl,
+    FontWeightControl,
     FontSizeControl,
-    LineHeightControl
+    FontColorControl,
+    BackgroundColorControl,
+    ItalicControl,
+    UnderlineControl,
+    SuperscriptControl,
+    StrikeThroughControl,
+    AlignmentControl,
+    LineHeightControl,
+    ListControl,
+    RemoveFormatControl,
+    LinkControl
   }
 };
 const __cssModules$2 = {};
@@ -24431,7 +24449,7 @@ function __vue2_injectStyles$2(context) {
     this[o] = __cssModules$2[o];
   }
 }
-const ToolbarDevice = /* @__PURE__ */ function() {
+const ToolbarPopup = /* @__PURE__ */ function() {
   return __component__$2.exports;
 }();
 var render$1 = function __render__44() {
@@ -24447,7 +24465,7 @@ var render$1 = function __render__44() {
     ref: "toolbarRef",
     staticClass: "zw-toolbar",
     style: _vm.toolbarStyles
-  }, [_c(_vm.toolbarComponent, {
+  }, [_c(_vm.layoutComponent, {
     tag: "component"
   })], 1) : _vm._e()])], 1);
 };
@@ -24463,11 +24481,17 @@ const __vue2_script$1 = {
     toolbar: {
       type: Object,
       required: true
+    },
+    popupMode: {
+      type: Boolean,
+      required: true
     }
   },
   setup(props) {
-    const toolbarComponent = computed(() => {
-      return props.device === Devices.DESKTOP ? ToolbarFull : ToolbarDevice;
+    const layoutComponent = computed(() => {
+      if (props.popupMode)
+        return ToolbarPopup;
+      return props.device === Devices.MOBILE ? ToolbarMobile : ToolbarDesktop;
     });
     const isVisible = computed(() => props.toolbar.isActiveRef.value);
     const toolbarRef = ref(null);
@@ -24478,7 +24502,7 @@ const __vue2_script$1 = {
       "--zw-toolbar-offset-y": `${props.toolbar.offsets[1]}px`
     }));
     return {
-      toolbarComponent,
+      layoutComponent,
       isVisible,
       toolbarRef,
       toolbarStyles
@@ -24492,7 +24516,7 @@ var __component__$1 = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$1,
   false,
   __vue2_injectStyles$1,
-  "a84e0da4",
+  "3ceb232a",
   null,
   null
 );
@@ -27916,7 +27940,8 @@ var render = function __render__45() {
     ref: "toolbarRef",
     attrs: {
       "toolbar": _vm.toolbar,
-      "device": _vm.device
+      "device": _vm.device,
+      "popup-mode": _vm.popupMode
     }
   }), _c("EditorContent", {
     attrs: {
@@ -28071,7 +28096,6 @@ const __vue2_script = {
     provide(InjectionTokens$1.LOCAL_STORAGE, new Storage(localStorage));
     provide(InjectionTokens$1.FAVORITE_COLORS, favoriteColors);
     provide(InjectionTokens$1.PAGE_BLOCKS, pageBlocks);
-    provide(InjectionTokens$1.POPUP_MODE, props.popupMode);
     return {
       editor,
       toolbarRef,