@zipify/wysiwyg 1.2.5 → 2.0.0-0

package/dist/wysiwyg.mjs

@@ -17,7 +17,11 @@ var __privateAdd = (obj, member, value) => {
     throw TypeError("Cannot add the same private member more than once");
   member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 };
-var _domParser;
+var __privateMethod = (obj, member, method) => {
+  __accessCheck(obj, member, "access private method");
+  return method;
+};
+var _domParser, _textBlock, textBlock_fn, _normalizeTextBlockArgs, normalizeTextBlockArgs_fn;
 import { computed, ref, watch, inject, onUnmounted, nextTick, provide, onMounted, toRef, unref, reactive } from "vue";
 import { ColorModel, ZipifyColorPicker } from "@zipify/colorpicker";
 function OrderedMap(content) {
@@ -14443,6 +14447,41 @@ function unmarkWysiwygContent({ __wswg__, ...content }) {
 function markWysiwygContent(content) {
   return { ...content, __wswg__: true };
 }
+function resolveNodePosition({ path, pos }, node, modifier) {
+  const index = path.indexOf(node);
+  const slice2 = path.slice(index).reverse().filter((step) => typeof step === "object");
+  return pos + modifier * slice2.length;
+}
+function resolveTextPosition($from, $to, node, position) {
+  return {
+    from: Math.max(position, $from.pos),
+    to: Math.min(position + node.nodeSize, $to.pos)
+  };
+}
+function isNodeFullySelected($from, $to, node, position) {
+  const fromPosition = resolveNodePosition($from, node, -1);
+  const toPosition = resolveNodePosition($to, node, 1);
+  const isFromMatch = fromPosition <= position;
+  const isToMatch = toPosition >= node.nodeSize + position;
+  return isFromMatch && isToMatch;
+}
+const DEFAULT_COMPARATOR = (parent, child) => child.eq(parent);
+function isMarkAppliedToParent({ doc: doc2 }, position, checkingMark, comparator = DEFAULT_COMPARATOR) {
+  const steps = doc2.resolve(position).path.reverse();
+  for (const step of steps) {
+    if (typeof step === "number")
+      continue;
+    for (const mark of step.marks) {
+      if (comparator(mark, checkingMark))
+        return true;
+    }
+  }
+  return false;
+}
+function findMarkByType(list, typeOrName) {
+  const name = typeof typeOrName === "string" ? typeOrName : typeOrName.name;
+  return list.find((mark) => mark.type.name === name);
+}
 var render$D = function __render__6() {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -19518,8 +19557,6 @@ const _ContentNormalizer = class {
     this.iterateNodes(this._normalizeBreakLines, (node) => node.tagName === "BR");
     this.iterateNodes(this._removeEmptyNodes, this._isBlockNode);
     this.iterateNodes(this._normalizeListItems, (node) => node.tagName === "LI");
-    this.iterateNodes(this._normalizeSettingsStructure, (node) => node.tagName === "SPAN");
-    this.iterateNodes(this._normalizeStyles, (node) => node.tagName !== "SPAN");
   }
   get normalizedHTML() {
     return this.dom.body.innerHTML;
@@ -19527,9 +19564,6 @@ const _ContentNormalizer = class {
   get _NodeFilter() {
     return this._parser.types.NodeFilter;
   }
-  get _Node() {
-    return this._parser.types.Node;
-  }
   _removeComments() {
     const iterator = this.createNodeIterator(this._NodeFilter.SHOW_COMMENT);
     this.runIterator(iterator, (node) => node.remove());
@@ -19595,78 +19629,17 @@ const _ContentNormalizer = class {
     itemEl.append(fragment);
     this._removeStyleProperties(itemEl, _ContentNormalizer.BLOCK_STYLES);
   }
-  _normalizeSettingsStructure(element) {
-    if (this._isOnlyTextContent(element))
-      return;
-    const cloned = element.cloneNode(true);
-    const migratingStyles = this._getMigratingStyles(element, { customProperties: true });
-    const content = [];
-    for (const node of cloned.childNodes) {
-      let child = node;
-      if (migratingStyles.length) {
-        child = this._wrapTextNode(cloned, node);
-        this._assignElementProperties(child, cloned, migratingStyles);
-      }
-      content.push(child);
-    }
-    element.replaceWith(...content);
-  }
-  _normalizeStyles(element) {
-    if (!this._isBlockNode(element) && this._isOnlyTextContent(element))
-      return;
-    const properties = this._getMigratingStyles(element);
-    if (!properties.length)
-      return;
-    for (const node of element.childNodes) {
-      const child = this._wrapTextNode(element, node);
-      this._assignElementProperties(child, element, properties);
-    }
-    this._removeStyleProperties(element, properties);
-  }
-  _isOnlyTextContent(node) {
-    return Array.from(node.childNodes).every((node2) => node2.nodeType === this._Node.TEXT_NODE);
-  }
   _isBlockNode(node) {
     return _ContentNormalizer.BLOCK_NODE_NAMES.includes(node.tagName);
   }
-  _getMigratingStyles(element, { customProperties } = {}) {
-    const blacklist = _ContentNormalizer.BLOCK_STYLES;
-    const properties = [];
-    for (let index = 0; index < element.style.length; index++) {
-      const property = element.style.item(index);
-      if (blacklist.includes(property))
-        continue;
-      if (!customProperties && property.startsWith("--"))
-        continue;
-      properties.push(property);
-    }
-    return properties;
-  }
-  _wrapTextNode(parent, node) {
-    if (node.nodeType !== this._Node.TEXT_NODE)
-      return node;
-    const span = this.dom.createElement("span");
-    span.append(node.cloneNode());
-    parent.replaceChild(span, node);
-    return span;
-  }
   _assignElementProperties(target, source, properties) {
     for (const property of properties) {
       const value = source.style.getPropertyValue(property);
-      if (value && this._canAssignElementProperty(target, source, property)) {
+      if (value && !target.style.getPropertyValue(property)) {
         target.style.setProperty(property, value);
       }
     }
   }
-  _canAssignElementProperty(target, source, property) {
-    if (target.style.getPropertyValue(property))
-      return false;
-    return _ContentNormalizer.ASSIGN_STYLE_RULES.every((rule) => {
-      if (!rule.tag.test(target.tagName.toLowerCase()))
-        return true;
-      return !rule.ignore.test(property);
-    });
-  }
   _removeStyleProperties(element, properties) {
     for (const property of properties) {
       element.style.removeProperty(property);
@@ -19712,20 +19685,6 @@ __publicField(ContentNormalizer, "BLOCK_STYLES", [
   "margin-left",
   "margin-right"
 ]);
-__publicField(ContentNormalizer, "ASSIGN_STYLE_RULES", [
-  {
-    tag: /^(b|strong)$/,
-    ignore: /font-weight/
-  },
-  {
-    tag: /^i$/,
-    ignore: /font-style/
-  },
-  {
-    tag: /^s$/,
-    ignore: /text-decoration(.+)?/
-  }
-]);
 class ContextWindow {
   static use(window2) {
     this.window = window2;
@@ -19766,7 +19725,7 @@ class NodeFactory {
   }
   static heading(level, ...args) {
     var _a;
-    const config = this._textBlock(args);
+    const config = __privateMethod(this, _textBlock, textBlock_fn).call(this, args);
     (_a = config.attrs) != null ? _a : config.attrs = {};
     config.attrs.level = level;
     return {
@@ -19777,16 +19736,7 @@ class NodeFactory {
   static paragraph(...args) {
     return {
       type: NodeTypes.PARAGRAPH,
-      ...this._textBlock(args)
-    };
-  }
-  static _textBlock(args) {
-    const attrs = args.length === 1 ? null : args[0];
-    const content = args.length === 1 ? args[0] : args[1];
-    const children = typeof content === "string" ? [this.text(content)] : content;
-    return {
-      content: children,
-      ...attrs ? { attrs } : {}
+      ...__privateMethod(this, _textBlock, textBlock_fn).call(this, args)
     };
   }
   static text(text2, marks) {
@@ -19803,6 +19753,28 @@ class NodeFactory {
     return { mobile: null, tablet: value, desktop: value };
   }
 }
+_textBlock = new WeakSet();
+textBlock_fn = function(args) {
+  const { attrs, content, marks } = __privateMethod(this, _normalizeTextBlockArgs, normalizeTextBlockArgs_fn).call(this, args);
+  const children = typeof content === "string" ? [this.text(content)] : content;
+  return {
+    content: children,
+    ...attrs ? { attrs } : {},
+    ...marks ? { marks } : {}
+  };
+};
+_normalizeTextBlockArgs = new WeakSet();
+normalizeTextBlockArgs_fn = function(args) {
+  if (args.length === 1) {
+    return { attrs: null, marks: null, content: args[0] };
+  }
+  if (args.length === 2) {
+    return { attrs: args[0], marks: null, content: args[1] };
+  }
+  return { attrs: args[0], marks: args[1], content: args[2] };
+};
+__privateAdd(NodeFactory, _textBlock);
+__privateAdd(NodeFactory, _normalizeTextBlockArgs);
 const dataStorage = /* @__PURE__ */ new WeakMap();
 function toggleListener(toEnable, onClick) {
   const args = ["click", onClick, { capture: true }];
@@ -21502,7 +21474,7 @@ const __vue2_script$f = {
   },
   setup() {
     const editor = inject(InjectionTokens$1.EDITOR);
-    const currentValue = computed(() => editor.isActive("superscript"));
+    const currentValue = editor.commands.isSuperscript();
     const apply2 = () => editor.chain().focus().toggleSuperscript().run();
     return {
       currentValue,
@@ -22957,6 +22929,7 @@ function useToolbar({ wrapperRef, offsets, isActiveRef, placementRef }) {
 }
 const FontFamily = Mark.create({
   name: TextSettings.FONT_FAMILY,
+  group: "settings",
   addOptions: () => ({
     fonts: []
   }),
@@ -22966,7 +22939,7 @@ const FontFamily = Mark.create({
   addCommands() {
     return {
       applyFontFamily: createCommand(({ commands: commands2 }, value) => {
-        commands2.setMark(this.name, { value });
+        commands2.applyMark(this.name, { value });
         const font = commands2.findFontByName(value);
         let fontWeight = unref(commands2.getFontWeight());
         if (!font.isWeightSupported(fontWeight)) {
@@ -22987,12 +22960,8 @@ const FontFamily = Mark.create({
       findFontByName: createCommand((_, name) => {
         return this.options.fonts.find((font) => font.name === name);
       }),
-      getFontFamily: createCommand(({ editor, commands: commands2 }) => {
-        const defaultValue = commands2.getDefaultFontFamily();
-        return computed(() => {
-          var _a, _b;
-          return (_b = (_a = editor.getAttributes(this.name)) == null ? void 0 : _a.value) != null ? _b : unref(defaultValue);
-        });
+      getFontFamily: createCommand(({ commands: commands2 }) => {
+        return commands2.getCommonSettingMark(this.name, commands2.getDefaultFontFamily());
       }),
       getDefaultFontFamily: createCommand(({ commands: commands2 }) => {
         const preset = commands2.getPreset();
@@ -23023,84 +22992,12 @@ const FontFamily = Mark.create({
     return renderMark({ font_family });
   }
 });
-const Heading = Node.create({
-  name: "heading",
-  addOptions() {
-    return {
-      levels: [1, 2, 3, 4, 5, 6],
-      HTMLAttributes: {}
-    };
-  },
-  content: "inline*",
-  group: "block",
-  defining: true,
-  addAttributes() {
-    return {
-      level: {
-        default: 1,
-        rendered: false
-      }
-    };
-  },
-  parseHTML() {
-    return this.options.levels.map((level) => ({
-      tag: `h${level}`,
-      attrs: { level }
-    }));
-  },
-  renderHTML({ node, HTMLAttributes }) {
-    const hasLevel = this.options.levels.includes(node.attrs.level);
-    const level = hasLevel ? node.attrs.level : this.options.levels[0];
-    return [`h${level}`, mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
-  },
-  addCommands() {
-    return {
-      setHeading: (attributes) => ({ commands: commands2 }) => {
-        if (!this.options.levels.includes(attributes.level)) {
-          return false;
-        }
-        return commands2.setNode(this.name, attributes);
-      },
-      toggleHeading: (attributes) => ({ commands: commands2 }) => {
-        if (!this.options.levels.includes(attributes.level)) {
-          return false;
-        }
-        return commands2.toggleNode(this.name, "paragraph", attributes);
-      }
-    };
-  },
-  addKeyboardShortcuts() {
-    return this.options.levels.reduce((items, level) => ({
-      ...items,
-      ...{
-        [`Mod-Alt-${level}`]: () => this.editor.commands.toggleHeading({ level })
-      }
-    }), {});
-  },
-  addInputRules() {
-    return this.options.levels.map((level) => {
-      return textblockTypeInputRule({
-        find: new RegExp(`^(#{1,${level}})\\s$`),
-        type: this.type,
-        getAttributes: {
-          level
-        }
-      });
-    });
-  }
-});
 function makePresetClass(base2, preset) {
   const baseClass = base2.split(" ").map((part) => `.${part}`).join("");
   return baseClass + preset.id;
 }
 const StylePreset = Extension.create({
   name: "style_preset",
-  addExtensions: () => [
-    Heading.configure({
-      levels: [1, 2, 3, 4],
-      HTMLAttributes: { class: "zw-style" }
-    })
-  ],
   addStorage: () => ({
     presetStyleEl: null
   }),
@@ -23256,13 +23153,14 @@ const StylePreset = Extension.create({
 });
 const FontWeight = Mark.create({
   name: TextSettings.FONT_WEIGHT,
+  group: "settings",
   addAttributes: () => ({
     value: { required: true }
   }),
   addCommands() {
     return {
       applyFontWeight: createCommand(({ commands: commands2 }, value) => {
-        commands2.setMark(this.name, { value });
+        commands2.applyMark(this.name, { value });
         const font = unref(commands2.getFont());
         if (!font.isItalicSupported(value)) {
           commands2.removeItalic();
@@ -23276,17 +23174,13 @@ const FontWeight = Mark.create({
         const nextWeight = currentFont.findClosestWeight(wantedWeight);
         commands2.applyFontWeight(nextWeight);
       }),
-      getFontWeight: createCommand(({ editor, commands: commands2 }) => {
-        const defaultValue = commands2.getDefaultFontWeight();
+      getFontWeight: createCommand(({ commands: commands2 }) => {
+        const selectionRef = commands2.getCommonSettingMark(this.name, commands2.getDefaultFontWeight());
         const fontRef = commands2.getFont();
         return computed(() => {
-          var _a, _b;
-          const weight = (_b = (_a = editor.getAttributes(this.name)) == null ? void 0 : _a.value) != null ? _b : unref(defaultValue);
+          const weight = unref(selectionRef);
           const font = unref(fontRef);
-          if (font.isWeightSupported(weight)) {
-            return weight;
-          }
-          return font.findClosestWeight(weight);
+          return font.isWeightSupported(weight) ? weight : font.findClosestWeight(weight);
         });
       }),
       getDefaultFontWeight: createCommand(({ commands: commands2 }) => {
@@ -23330,6 +23224,7 @@ const FontWeight = Mark.create({
 });
 const FontSize = Mark.create({
   name: TextSettings.FONT_SIZE,
+  group: "settings",
   addOptions: () => ({
     minSize: 1,
     maxSize: 100
@@ -23343,13 +23238,8 @@ const FontSize = Mark.create({
   },
   addCommands() {
     return {
-      getFontSize: createCommand(({ editor, commands: commands2 }) => {
-        const device = commands2.getDevice();
-        const defaultValue = commands2.getDefaultFontSize();
-        return computed(() => {
-          var _a, _b;
-          return (_b = (_a = editor.getAttributes(this.name)) == null ? void 0 : _a[unref(device)]) != null ? _b : unref(defaultValue);
-        });
+      getFontSize: createCommand(({ commands: commands2 }) => {
+        return commands2.getDeviceSettingMark(this.name, commands2.getDefaultFontSize());
       }),
       getDefaultFontSize: createCommand(({ commands: commands2 }) => {
         const device = commands2.getDevice();
@@ -23357,7 +23247,7 @@ const FontSize = Mark.create({
         return computed(() => unref(preset)[unref(device)].font_size.replace("px", ""));
       }),
       applyFontSize: createCommand(({ commands: commands2 }, value) => {
-        commands2.setMark(this.name, { desktop: value, tablet: value, mobile: null });
+        commands2.applyMark(this.name, { desktop: value, tablet: value, mobile: null });
       }),
       increaseFontSize: createCommand(({ commands: commands2 }) => {
         const size2 = Number(unref(commands2.getFontSize()));
@@ -23412,24 +23302,21 @@ const FontSize = Mark.create({
 });
 const FontColor = Mark.create({
   name: TextSettings.FONT_COLOR,
+  group: "settings",
   addAttributes: () => ({
     value: { required: true }
   }),
   addCommands() {
     return {
-      getFontColor: createCommand(({ commands: commands2, editor }) => {
-        const defaultValue = commands2.getDefaultFontColor();
-        return computed(() => {
-          var _a, _b;
-          return (_b = (_a = editor.getAttributes(this.name)) == null ? void 0 : _a.value) != null ? _b : unref(defaultValue);
-        });
+      getFontColor: createCommand(({ commands: commands2 }) => {
+        return commands2.getCommonSettingMark(this.name, commands2.getDefaultFontColor());
       }),
       getDefaultFontColor: createCommand(({ commands: commands2 }) => {
         const preset = commands2.getPreset();
         return computed(() => unref(preset).common.color);
       }),
       applyFontColor: createCommand(({ commands: commands2 }, value) => {
-        commands2.setMark(this.name, { value });
+        commands2.applyMark(this.name, { value });
       })
     };
   },
@@ -23452,19 +23339,17 @@ const FontColor = Mark.create({
 });
 const BackgroundColor = Mark.create({
   name: TextSettings.BACKGROUND_COLOR,
+  group: "settings",
   addAttributes: () => ({
     value: { required: true }
   }),
   addCommands() {
     return {
-      getBackgroundColor: createCommand(({ editor }) => {
-        return computed(() => {
-          var _a, _b;
-          return (_b = (_a = editor.getAttributes(this.name)) == null ? void 0 : _a.value) != null ? _b : "rgba(255, 255, 255, 0%)";
-        });
+      getBackgroundColor: createCommand(({ commands: commands2 }) => {
+        return commands2.getCommonSettingMark(this.name, "rgba(255, 255, 255, 0%)");
       }),
       applyBackgroundColor: createCommand(({ commands: commands2 }, value) => {
-        commands2.setMark(this.name, { value });
+        commands2.applyMark(this.name, { value });
       })
     };
   },
@@ -23495,16 +23380,18 @@ const DeviceManager = Extension.create({
 });
 const FontStyle = Mark.create({
   name: TextSettings.FONT_STYLE,
+  group: "settings",
   addAttributes: () => ({
     italic: { required: true }
   }),
   addCommands() {
     return {
-      isItalic: createCommand(({ editor, commands: commands2 }) => {
-        const defaultValue = commands2.getDefaultFontStyle();
+      isItalic: createCommand(({ commands: commands2 }) => {
+        const selectionRef = commands2.getMark(this.name);
+        const defaultValueRef = commands2.getDefaultFontStyle();
         return computed(() => {
           var _a, _b;
-          return (_b = (_a = editor.getAttributes(this.name)) == null ? void 0 : _a.italic) != null ? _b : unref(defaultValue).italic;
+          return (_b = (_a = unref(selectionRef)) == null ? void 0 : _a.italic) != null ? _b : unref(defaultValueRef).italic;
         });
       }),
       isItalicAvailable: createCommand(({ commands: commands2 }) => {
@@ -23519,16 +23406,16 @@ const FontStyle = Mark.create({
         }));
       }),
       toggleItalic: createCommand(({ commands: commands2 }) => {
-        const isItalicAvailable = unref(this.editor.commands.isItalicAvailable());
+        const isItalicAvailable = unref(commands2.isItalicAvailable());
         if (!isItalicAvailable)
           return;
         unref(commands2.isItalic()) ? commands2.removeItalic() : commands2.applyItalic();
       }),
       applyItalic: createCommand(({ commands: commands2 }) => {
-        commands2.setMark(this.name, { italic: true });
+        commands2.applyMark(this.name, { italic: true });
       }),
       removeItalic: createCommand(({ commands: commands2 }) => {
-        commands2.setMark(this.name, { italic: false });
+        commands2.applyMark(this.name, { italic: false });
       })
     };
   },
@@ -23537,8 +23424,12 @@ const FontStyle = Mark.create({
     "Mod-I": createKeyboardShortcut("toggleItalic")
   }),
   parseHTML() {
-    const getAttrs = (value) => value.includes("italic") && { italic: true };
+    const getAttrs = (value) => ({ italic: value.includes("italic") });
     return [
+      {
+        tag: "i",
+        attrs: { italic: true }
+      },
       {
         style: "--zw-font-style",
         getAttrs
@@ -23546,10 +23437,6 @@ const FontStyle = Mark.create({
       {
         style: "font-style",
         getAttrs
-      },
-      {
-        tag: "i",
-        attrs: { italic: true }
       }
     ];
   },
@@ -23561,6 +23448,7 @@ const FontStyle = Mark.create({
 const TextDecoration = Mark.create({
   name: TextSettings.TEXT_DECORATION,
   priority: 1e3,
+  group: "settings",
   addAttributes: () => ({
     underline: { default: false },
     strike_through: { default: false }
@@ -23575,15 +23463,14 @@ const TextDecoration = Mark.create({
         const decoration = commands2.getTextDecoration();
         return computed(() => unref(decoration).strike_through);
       }),
-      getTextDecoration: createCommand(({ editor, commands: commands2 }) => {
-        const defaultValue = commands2.getDefaultTextDecoration();
+      getTextDecoration: createCommand(({ commands: commands2 }) => {
+        const selectionRef = commands2.getMarks(this.name);
+        const defaultValueRef = commands2.getDefaultTextDecoration();
         return computed(() => {
-          var _a, _b, _c;
-          const attrs = (_a = editor.getAttributes(this.name)) != null ? _a : {};
-          return {
-            underline: (_b = attrs.underline) != null ? _b : unref(defaultValue).underline,
-            strike_through: (_c = attrs.strike_through) != null ? _c : unref(defaultValue).strike_through
-          };
+          return unref(selectionRef).reduceRight((collector, mark) => ({
+            underline: collector.underline || mark.underline,
+            strike_through: collector.strike_through || mark.strike_through
+          }), unref(defaultValueRef));
         });
       }),
       getDefaultTextDecoration: createCommand(({ commands: commands2 }) => {
@@ -23602,15 +23489,32 @@ const TextDecoration = Mark.create({
       toggleStrikeThrough: createCommand(({ commands: commands2 }) => {
         commands2.toggleTextDecoration("strike_through");
       }),
-      toggleTextDecoration: createCommand(({ commands: commands2 }, name) => {
-        const isEnabled = unref(commands2.getTextDecoration())[name];
-        isEnabled ? commands2.removeTextDecoration(name) : commands2.applyTextDecoration(name);
+      toggleTextDecoration: createCommand(({ commands: commands2 }, name, toEnable = null) => {
+        const value = unref(commands2.getTextDecoration());
+        const isEnabled = toEnable != null ? toEnable : !value[name];
+        commands2.applyMark(this.name, { [name]: isEnabled }, {
+          compareParentMark: (parent, child) => {
+            if (parent.type.name !== child.type.name)
+              return false;
+            return parent.attrs[name] || parent.eq(child);
+          },
+          onAppliedToParent: ({ tr, textPosition, initialMark, applyingMark }) => {
+            if (!initialMark)
+              return;
+            if (initialMark.eq(applyingMark)) {
+              tr.removeMark(textPosition.from, textPosition.to, applyingMark.type);
+              return;
+            }
+            const mark = applyingMark.type.create({ ...initialMark.attrs, [name]: isEnabled });
+            tr.addMark(textPosition.from, textPosition.to, mark);
+          }
+        });
       }),
       applyTextDecoration: createCommand(({ commands: commands2 }, name) => {
-        commands2.setMark(this.name, { [name]: true });
+        commands2.toggleTextDecoration(name, true);
       }),
       removeTextDecoration: createCommand(({ commands: commands2 }, name) => {
-        commands2.setMark(this.name, { ...unref(commands2.getTextDecoration()), [name]: false });
+        commands2.toggleTextDecoration(name, false);
       })
     };
   },
@@ -23852,6 +23756,10 @@ const ListItem$1 = Node.create({
 });
 const ListItem = ListItem$1.extend({
   name: NodeTypes.LIST_ITEM,
+  marks: "settings",
+  addOptions: () => ({
+    HTMLAttributes: { class: "zw-style" }
+  }),
   addKeyboardShortcuts() {
     const { Enter } = this.parent();
     return { Enter };
@@ -23861,6 +23769,7 @@ const List = Node.create({
   name: NodeTypes.LIST,
   content: `${NodeTypes.LIST_ITEM}+`,
   group: "block list",
+  marks: "settings",
   addExtensions: () => [
     ListItem
   ],
@@ -25032,44 +24941,22 @@ const Superscript$1 = Mark.create({
   }
 });
 const Superscript = Superscript$1.extend({
+  name: TextSettings.SUPERSCRIPT,
   addKeyboardShortcuts: null,
   addOptions: () => ({
     HTMLAttributes: { class: "zw-superscript" }
-  })
-});
-const Document = Node.create({
-  name: "doc",
-  topNode: true,
-  content: "block+"
-});
-const Paragraph = Node.create({
-  name: "paragraph",
-  priority: 1e3,
-  addOptions() {
-    return {
-      HTMLAttributes: {}
-    };
-  },
-  group: "block",
-  content: "inline*",
-  parseHTML() {
-    return [
-      { tag: "p" }
-    ];
-  },
-  renderHTML({ HTMLAttributes }) {
-    return ["p", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
-  },
+  }),
   addCommands() {
     return {
-      setParagraph: () => ({ commands: commands2 }) => {
-        return commands2.setNode(this.name);
-      }
-    };
-  },
-  addKeyboardShortcuts() {
-    return {
-      "Mod-Alt-0": () => this.editor.commands.setParagraph()
+      ...this.parent(),
+      toggleSuperscript: createCommand(({ commands: commands2 }) => {
+        const isActive2 = unref(commands2.isSuperscript());
+        isActive2 ? commands2.unsetSuperscript() : commands2.setSuperscript();
+      }),
+      isSuperscript: createCommand(({ commands: commands2 }) => {
+        const selectionRef = commands2.getMark(this.name);
+        return computed(() => !!unref(selectionRef));
+      })
     };
   }
 });
@@ -25683,6 +25570,85 @@ const History = Extension.create({
     };
   }
 });
+class RemoveNodeMarkStep extends Step {
+  static fromJSON(schema, json) {
+    if (typeof json.pos != "number") {
+      throw new RangeError("Invalid input for RemoveNodeMarkStep.fromJSON");
+    }
+    return new RemoveNodeMarkStep(json.pos, schema.markFromJSON(json.mark));
+  }
+  constructor(pos, mark) {
+    super();
+    this.pos = pos;
+    this.mark = mark;
+  }
+  apply(doc2) {
+    const node = doc2.nodeAt(this.pos);
+    if (!node)
+      return StepResult.fail("No node at mark step's position");
+    const updated = node.type.create(node.attrs, null, this.mark.removeFromSet(node.marks));
+    const slice2 = new Slice(Fragment.from(updated), 0, node.isLeaf ? 0 : 1);
+    return StepResult.fromReplace(doc2, this.pos, this.pos + 1, slice2);
+  }
+  invert(doc2) {
+    const node = doc2.nodeAt(this.pos);
+    if (!node || !this.mark.isInSet(node.marks))
+      return this;
+    return new AddNodeMarkStep(this.pos, this.mark);
+  }
+  map(mapping) {
+    const pos = mapping.mapResult(this.pos, 1);
+    return pos.deletedAfter ? null : new RemoveNodeMarkStep(pos.pos, this.mark);
+  }
+  toJSON() {
+    return { stepType: "removeNodeMark", pos: this.pos, mark: this.mark.toJSON() };
+  }
+}
+Step.jsonID("removeNodeMark", RemoveNodeMarkStep);
+class AddNodeMarkStep extends Step {
+  static fromJSON(schema, json) {
+    if (typeof json.pos != "number") {
+      throw new RangeError("Invalid input for AddNodeMarkStep.fromJSON");
+    }
+    return new AddNodeMarkStep(json.pos, schema.markFromJSON(json.mark));
+  }
+  constructor(pos, mark) {
+    super();
+    this.pos = pos;
+    this.mark = mark;
+  }
+  apply(doc2) {
+    const node = doc2.nodeAt(this.pos);
+    if (!node)
+      return StepResult.fail("No node at mark step's position");
+    const updated = node.type.create(node.attrs, null, this.mark.addToSet(node.marks));
+    const slice2 = new Slice(Fragment.from(updated), 0, node.isLeaf ? 0 : 1);
+    return StepResult.fromReplace(doc2, this.pos, this.pos + 1, slice2);
+  }
+  invert(doc2) {
+    const node = doc2.nodeAt(this.pos);
+    if (node) {
+      const newSet = this.mark.addToSet(node.marks);
+      if (newSet.length === node.marks.length) {
+        for (const mark of node.marks) {
+          if (!mark.isInSet(newSet)) {
+            return new AddNodeMarkStep(this.pos, mark);
+          }
+        }
+        return new AddNodeMarkStep(this.pos, this.mark);
+      }
+    }
+    return new RemoveNodeMarkStep(this.pos, this.mark);
+  }
+  map(mapping) {
+    const pos = mapping.mapResult(this.pos, 1);
+    return pos.deletedAfter ? null : new AddNodeMarkStep(pos.pos, this.mark);
+  }
+  toJSON() {
+    return { stepType: "addNodeMark", pos: this.pos, mark: this.mark.toJSON() };
+  }
+}
+Step.jsonID("addNodeMark", AddNodeMarkStep);
 const NodeProcessor = Extension.create({
   name: "node_processor",
   addCommands() {
@@ -25703,7 +25669,73 @@ const NodeProcessor = Extension.create({
           Object.assign(attrs, ((_a = editor.getAttributes(type)) == null ? void 0 : _a[name]) || {});
         }
         return Object.keys(attrs).length ? attrs : null;
-      }))
+      })),
+      applyMark: createCommand(({ state }, name, value, customizer = {}) => {
+        const { tr, doc: doc2, schema } = state;
+        const { $from, $to } = tr.selection;
+        const markType = getMarkType(name, schema);
+        const onAppliedToParent = customizer.onAppliedToParent || ((context) => {
+          const { tr: tr2, textPosition, applyingMark } = context;
+          tr2.removeMark(textPosition.from, textPosition.to, applyingMark.type);
+        });
+        if ($from.pos === $to.pos)
+          return;
+        doc2.nodesBetween($from.pos, $to.pos, (node, position) => {
+          if (node.type.name === NodeTypes.LIST)
+            return;
+          const initialMark = findMarkByType(node.marks, name);
+          const applyingMark = markType.create({ ...(initialMark == null ? void 0 : initialMark.attrs) || {}, ...value });
+          const textPosition = resolveTextPosition($from, $to, node, position);
+          if (isMarkAppliedToParent(tr, position, applyingMark, customizer.compareParentMark)) {
+            onAppliedToParent({ tr, textPosition, applyingMark, initialMark, node });
+            return;
+          }
+          if (node.isText) {
+            tr.addMark(textPosition.from, textPosition.to, applyingMark);
+            return;
+          }
+          if (isNodeFullySelected($from, $to, node, position)) {
+            tr.step(new AddNodeMarkStep(position, applyingMark));
+          }
+        });
+      }),
+      getMarks: createCommand(({ editor }, name) => {
+        const stateRef = toRef(editor, "state");
+        return computed(() => {
+          const { selection, doc: doc2 } = unref(stateRef);
+          const { from: from2, to } = unref(selection);
+          const marks = [];
+          doc2.nodesBetween(from2, to, (node) => {
+            for (const mark of node.marks) {
+              if (mark.type.name === name)
+                marks.unshift(mark.attrs);
+            }
+          });
+          return marks;
+        });
+      }),
+      getMark: createCommand(({ commands: commands2 }, name) => {
+        const marksRef = commands2.getMarks(name);
+        return computed(() => {
+          var _a;
+          return (_a = unref(marksRef)[0]) != null ? _a : null;
+        });
+      }),
+      getCommonSettingMark: createCommand(({ commands: commands2 }, name, defaultRef) => {
+        const selectionRef = commands2.getMark(name);
+        return computed(() => {
+          var _a, _b;
+          return (_b = (_a = unref(selectionRef)) == null ? void 0 : _a.value) != null ? _b : unref(defaultRef);
+        });
+      }),
+      getDeviceSettingMark: createCommand(({ commands: commands2 }, name, defaultRef) => {
+        const selectionRef = commands2.getMark(name);
+        const deviceRef = commands2.getDevice();
+        return computed(() => {
+          var _a, _b;
+          return (_b = (_a = unref(selectionRef)) == null ? void 0 : _a[unref(deviceRef)]) != null ? _b : unref(defaultRef);
+        });
+      })
     };
   }
 });
@@ -25719,22 +25751,20 @@ const TextProcessor = Extension.create({
         marks.forEach((mark) => commands2.unsetMark(mark));
       }),
       transformText: createCommand(({ state }, transform) => {
-        const { selection } = state.tr;
-        if (selection.from === selection.to)
+        const { $from, $to } = state.tr.selection;
+        if ($from.pos === $to.pos)
           return;
-        state.doc.nodesBetween(selection.from, selection.to, (node, position) => {
+        state.doc.nodesBetween($from.pos, $to.pos, (node, position) => {
           if (!node.isText)
             return;
-          const startPosition = Math.max(position, selection.from);
-          const endPosition = Math.min(position + node.nodeSize, selection.to);
-          const substringFrom = Math.max(0, selection.from - position);
-          const substringTo = Math.max(0, selection.to - position);
+          const textPosition = resolveTextPosition($from, $to, node, position);
+          const substringFrom = Math.max(0, $from.pos - position);
+          const substringTo = Math.max(0, $to.pos - position);
           const updatedText = transform({
-            text: node.textContent.substring(substringFrom, substringTo),
-            position: { start: startPosition, end: endPosition }
+            text: node.textContent.substring(substringFrom, substringTo)
           });
           const updatedNode = state.schema.text(updatedText, node.marks);
-          state.tr.replaceWith(startPosition, endPosition, updatedNode);
+          state.tr.replaceWith(textPosition.from, textPosition.to, updatedNode);
         });
       })
     };
@@ -25843,15 +25873,132 @@ const CopyPasteProcessor = Extension.create({
     return [PastePlugin.create()];
   }
 });
+const Document$1 = Node.create({
+  name: "doc",
+  topNode: true,
+  content: "block+"
+});
+const Document = Document$1.extend({
+  marks: "settings"
+});
+const Paragraph$1 = Node.create({
+  name: "paragraph",
+  priority: 1e3,
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    };
+  },
+  group: "block",
+  content: "inline*",
+  parseHTML() {
+    return [
+      { tag: "p" }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["p", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+  addCommands() {
+    return {
+      setParagraph: () => ({ commands: commands2 }) => {
+        return commands2.setNode(this.name);
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Alt-0": () => this.editor.commands.setParagraph()
+    };
+  }
+});
+const Paragraph = Paragraph$1.extend({
+  marks: "_",
+  addOptions: () => ({
+    HTMLAttributes: { class: "zw-style" }
+  })
+});
+const Heading$1 = Node.create({
+  name: "heading",
+  addOptions() {
+    return {
+      levels: [1, 2, 3, 4, 5, 6],
+      HTMLAttributes: {}
+    };
+  },
+  content: "inline*",
+  group: "block",
+  defining: true,
+  addAttributes() {
+    return {
+      level: {
+        default: 1,
+        rendered: false
+      }
+    };
+  },
+  parseHTML() {
+    return this.options.levels.map((level) => ({
+      tag: `h${level}`,
+      attrs: { level }
+    }));
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    const hasLevel = this.options.levels.includes(node.attrs.level);
+    const level = hasLevel ? node.attrs.level : this.options.levels[0];
+    return [`h${level}`, mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+  addCommands() {
+    return {
+      setHeading: (attributes) => ({ commands: commands2 }) => {
+        if (!this.options.levels.includes(attributes.level)) {
+          return false;
+        }
+        return commands2.setNode(this.name, attributes);
+      },
+      toggleHeading: (attributes) => ({ commands: commands2 }) => {
+        if (!this.options.levels.includes(attributes.level)) {
+          return false;
+        }
+        return commands2.toggleNode(this.name, "paragraph", attributes);
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return this.options.levels.reduce((items, level) => ({
+      ...items,
+      ...{
+        [`Mod-Alt-${level}`]: () => this.editor.commands.toggleHeading({ level })
+      }
+    }), {});
+  },
+  addInputRules() {
+    return this.options.levels.map((level) => {
+      return textblockTypeInputRule({
+        find: new RegExp(`^(#{1,${level}})\\s$`),
+        type: this.type,
+        getAttributes: {
+          level
+        }
+      });
+    });
+  }
+});
+const Heading = Heading$1.extend({
+  marks: "_",
+  addOptions: () => ({
+    levels: [1, 2, 3, 4],
+    HTMLAttributes: { class: "zw-style" }
+  })
+});
 const buildCoreExtensions = () => [
   Document,
-  Paragraph.configure({
-    HTMLAttributes: { class: "zw-style" }
-  }),
   Placeholder.configure({
     placeholder: "Type your text here...",
     emptyNodeClass: "zw-wysiwyg__placeholder"
   }),
+  Paragraph,
+  Heading,
   Text,
   History,
   NodeProcessor,