@harbour-enterprises/superdoc 0.24.0-next.2 → 0.24.0-next.4

package/dist/super-editor/chunks/{docx-zipper-B2uMUaj9.js → docx-zipper-6Kc95yG-.js}

@@ -1,4 +1,4 @@
-import { p as process$1, aw as commonjsGlobal, B as Buffer, ax as getDefaultExportFromCjs, ay as getContentTypesFromXml, az as xmljs } from "./converter-nWAUAQ83.js";
+import { p as process$1, ax as commonjsGlobal, B as Buffer, ay as getDefaultExportFromCjs, az as getContentTypesFromXml, aA as xmljs } from "./converter-DpPj67OW.js";
 function commonjsRequire(path) {
   throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
 }

package/dist/super-editor/chunks/{editor-DAyiX5AL.js → editor-Dx6AhT5N.js}

@@ -9,12 +9,12 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _Attribute_static, getGlobalAttributes_fn, getNodeAndMarksAttributes_fn, _Schema_static, createNodesSchema_fn, createMarksSchema_fn, _events, _ExtensionService_instances, setupExtensions_fn, attachEditorEvents_fn, _editor, _stateValidators, _xmlValidators, _requiredNodeTypes, _requiredMarkTypes, _SuperValidator_instances, initializeValidators_fn, collectValidatorRequirements_fn, analyzeDocument_fn, _commandService, _Editor_instances, initContainerElement_fn, init_fn, initRichText_fn, onFocus_fn, checkHeadless_fn, registerCopyHandler_fn, insertNewFileData_fn, registerPluginByNameIfNotExists_fn, createExtensionService_fn, createCommandService_fn, createConverter_fn, initMedia_fn, initFonts_fn, createSchema_fn, generatePmData_fn, createView_fn, onCollaborationReady_fn, initComments_fn, initPagination_fn, dispatchTransaction_fn, handleNodeSelection_fn, prepareDocumentForImport_fn, prepareDocumentForExport_fn, endCollaboration_fn, validateDocumentInit_fn, validateDocumentExport_fn, initDevTools_fn, _DocumentSectionView_instances, init_fn2, addToolTip_fn, _ListItemNodeView_instances, init_fn3, _FieldAnnotationView_instances, createAnnotation_fn, _AutoPageNumberNodeView_instances, renderDom_fn, scheduleUpdateNodeStyle_fn;
+var _Attribute_static, getGlobalAttributes_fn, getNodeAndMarksAttributes_fn, _Schema_static, createNodesSchema_fn, createMarksSchema_fn, _events, _ExtensionService_instances, setupExtensions_fn, attachEditorEvents_fn, _editor, _stateValidators, _xmlValidators, _requiredNodeTypes, _requiredMarkTypes, _SuperValidator_instances, initializeValidators_fn, collectValidatorRequirements_fn, analyzeDocument_fn, _commandService, _Editor_instances, initContainerElement_fn, init_fn, initRichText_fn, onFocus_fn, checkHeadless_fn, registerCopyHandler_fn, insertNewFileData_fn, registerPluginByNameIfNotExists_fn, createExtensionService_fn, createCommandService_fn, createConverter_fn, initMedia_fn, initFonts_fn, checkFonts_fn, determineUnsupportedFontsWithLocalFonts_fn, determineUnsupportedFontsWithCanvas_fn, createSchema_fn, generatePmData_fn, createView_fn, onCollaborationReady_fn, initComments_fn, initPagination_fn, dispatchTransaction_fn, handleNodeSelection_fn, prepareDocumentForImport_fn, prepareDocumentForExport_fn, endCollaboration_fn, validateDocumentInit_fn, validateDocumentExport_fn, initDevTools_fn, _DocumentSectionView_instances, init_fn2, addToolTip_fn, _ListItemNodeView_instances, init_fn3, _FieldAnnotationView_instances, createAnnotation_fn, _AutoPageNumberNodeView_instances, renderDom_fn, scheduleUpdateNodeStyle_fn;
 import * as Y from "yjs";
 import { UndoManager, Item as Item$1, ContentType, Text as Text$1, XmlElement, encodeStateAsUpdate } from "yjs";
-import { P as PluginKey, a as Plugin, M as Mapping, N as NodeSelection, S as Selection, T as TextSelection, b as Slice, D as DOMSerializer, F as Fragment, c as DOMParser$1, d as Mark$1, e as dropPoint, A as AllSelection, p as process$1, B as Buffer2, f as callOrGet, g as getExtensionConfigField, h as getMarkType, i as getMarksFromSelection, j as getNodeType, k as getSchemaTypeNameByName, l as Schema$1, m as cleanSchemaItem, n as canSplit, o as defaultBlockAt$1, q as liftTarget, r as canJoin, s as joinPoint, t as replaceStep$1, R as ReplaceAroundStep$1, u as isTextSelection, v as getMarkRange, w as isMarkActive, x as isNodeActive, y as deleteProps, z as processContent, C as ReplaceStep, E as NodeRange, G as findWrapping, L as ListHelpers, H as findParentNode, I as isMacOS, J as isIOS, K as getSchemaTypeByName, O as inputRulesPlugin, Q as TrackDeleteMarkName, U as TrackInsertMarkName, V as v4, W as TrackFormatMarkName, X as comments_module_events, Y as findMark, Z as objectIncludes, _ as AddMarkStep, $ as RemoveMarkStep, a0 as twipsToLines, a1 as pixelsToTwips, a2 as helpers, a3 as posToDOMRect, a4 as CommandService, a5 as SuperConverter, a6 as createDocument, a7 as createDocFromMarkdown, a8 as createDocFromHTML, a9 as EditorState, aa as hasSomeParentWithClass, ab as isActive, ac as unflattenListsInHtml, ad as parseSizeUnit, ae as minMax, af as getLineHeightValueString, ag as updateDOMAttributes, ah as findChildren$5, ai as htmlHandler, aj as generateRandomSigned32BitIntStrId, ak as InputRule, al as kebabCase, am as findParentNodeClosestToPos, an as getListItemStyleDefinitions, ao as docxNumberigHelpers, ap as parseIndentElement, aq as combineIndents, ar as SelectionRange, as as Transform, at as isInTable$1, au as generateDocxRandomId, av as insertNewRelationship } from "./converter-nWAUAQ83.js";
+import { P as PluginKey, a as Plugin, M as Mapping, N as NodeSelection, S as Selection, T as TextSelection, b as Slice, D as DOMSerializer, F as Fragment, c as DOMParser$1, d as Mark$1, e as dropPoint, A as AllSelection, p as process$1, B as Buffer2, f as callOrGet, g as getExtensionConfigField, h as getMarkType, i as getMarksFromSelection, j as getNodeType, k as getSchemaTypeNameByName, l as Schema$1, m as cleanSchemaItem, n as canSplit, o as defaultBlockAt$1, q as liftTarget, r as canJoin, s as joinPoint, t as replaceStep$1, R as ReplaceAroundStep$1, u as isTextSelection, v as getMarkRange, w as isMarkActive, x as isNodeActive, y as deleteProps, z as processContent, C as ReplaceStep, E as NodeRange, G as findWrapping, L as ListHelpers, H as findParentNode, I as isMacOS, J as isIOS, K as getSchemaTypeByName, O as inputRulesPlugin, Q as TrackDeleteMarkName, U as TrackInsertMarkName, V as v4, W as TrackFormatMarkName, X as comments_module_events, Y as findMark, Z as objectIncludes, _ as AddMarkStep, $ as RemoveMarkStep, a0 as twipsToLines, a1 as pixelsToTwips, a2 as helpers, a3 as posToDOMRect, a4 as CommandService, a5 as SuperConverter, a6 as createDocument, a7 as createDocFromMarkdown, a8 as createDocFromHTML, a9 as EditorState, aa as hasSomeParentWithClass, ab as isActive, ac as unflattenListsInHtml, ad as parseSizeUnit, ae as minMax, af as getLineHeightValueString, ag as updateDOMAttributes, ah as findChildren$5, ai as htmlHandler, aj as generateRandomSigned32BitIntStrId, ak as InputRule, al as kebabCase, am as findParentNodeClosestToPos, an as getListItemStyleDefinitions, ao as docxNumberigHelpers, ap as parseIndentElement, aq as combineIndents, ar as SelectionRange, as as Transform, at as isInTable$1, au as generateDocxRandomId, av as insertNewRelationship, aw as inchesToPixels } from "./converter-DpPj67OW.js";
 import { ref, computed, createElementBlock, openBlock, withModifiers, Fragment as Fragment$1, renderList, normalizeClass, createCommentVNode, toDisplayString, createElementVNode, createApp } from "vue";
-import { D as DocxZipper } from "./docx-zipper-B2uMUaj9.js";
+import { D as DocxZipper } from "./docx-zipper-6Kc95yG-.js";
 var GOOD_LEAF_SIZE = 200;
 var RopeSequence = function RopeSequence2() {
 };
@@ -13101,6 +13101,29 @@ const setImageNodeSelection = (view, pos) => {
   }
   return false;
 };
+function canRenderFont(fontName, fallbackFont = "sans-serif") {
+  const _canRenderFont = (fontName2, fallbackFont2) => {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    ctx.textBaseline = "top";
+    const text = "abcdefghijklmnopqrstuvwxyz0123456789";
+    ctx.font = `72px ${fallbackFont2}`;
+    const initialTextMeasurement = ctx.measureText(text);
+    const fallbackWidth = initialTextMeasurement.width;
+    const fallbackHeight = initialTextMeasurement.actualBoundingBoxDescent;
+    ctx.font = `72px "${fontName2}", ${fallbackFont2}`;
+    const customTextMeasurement = ctx.measureText(text);
+    const customFontWidth = customTextMeasurement.width;
+    const customFontHeight = customTextMeasurement.actualBoundingBoxDescent;
+    const isAvailable = customFontWidth !== fallbackWidth || customFontHeight !== fallbackHeight;
+    return isAvailable;
+  };
+  if (_canRenderFont(fontName, fallbackFont)) {
+    return true;
+  }
+  const oppositeFallbackFont = fallbackFont === "sans-serif" ? "serif" : "sans-serif";
+  return _canRenderFont(fontName, oppositeFallbackFont);
+}
 const { findChildren: findChildren$3 } = helpers;
 function getAllFieldAnnotations(state) {
   let fieldAnnotations = findChildren$3(state.doc, (node) => node.type.name === "fieldAnnotation");
@@ -14193,6 +14216,11 @@ const _Editor = class _Editor extends EventEmitter {
      * @type {boolean}
      */
     __publicField(this, "isFocused", false);
+    /**
+     * All the embedded fonts that were imported by the Editor
+     * @type {string[]}
+     */
+    __publicField(this, "fontsImported", []);
     __publicField(this, "options", {
       element: null,
       selector: null,
@@ -14253,6 +14281,7 @@ const _Editor = class _Editor extends EventEmitter {
       onPaginationUpdate: () => null,
       onException: () => null,
       onListDefinitionsChange: () => null,
+      onFontsResolved: null,
       // async (file) => url;
       handleImageUpload: null,
       // telemetry
@@ -15238,6 +15267,9 @@ init_fn = function() {
   this.emit("beforeCreate", { editor: this });
   this.on("contentError", this.options.onContentError);
   this.mount(this.options.element);
+  if (!this.options.isHeadless) {
+    __privateMethod(this, _Editor_instances, checkFonts_fn).call(this);
+  }
   this.on("create", this.options.onCreate);
   this.on("update", this.options.onUpdate);
   this.on("selectionUpdate", this.options.onSelectionUpdate);
@@ -15438,13 +15470,90 @@ initMedia_fn = function() {
  * @returns {void}
  */
 initFonts_fn = function() {
-  const styleString = this.converter.getDocumentFonts();
-  if (styleString?.length) {
+  const results = this.converter.getFontFaceImportString();
+  if (results?.styleString?.length) {
     const style = document.createElement("style");
-    style.textContent = styleString;
+    style.textContent = results.styleString;
     document.head.appendChild(style);
+    this.fontsImported = results.fontsImported;
   }
 };
+checkFonts_fn = async function() {
+  if (!this.options.onFontsResolved || typeof this.options.onFontsResolved !== "function") {
+    return;
+  }
+  if (this.options.isHeadless) {
+    return;
+  }
+  const fontsUsedInDocument = this.converter.getDocumentFonts();
+  if (!("queryLocalFonts" in window)) {
+    console.warn("[SuperDoc] Could not get access to local fonts. Using fallback solution.");
+    const unsupportedFonts = __privateMethod(this, _Editor_instances, determineUnsupportedFontsWithCanvas_fn).call(this, fontsUsedInDocument);
+    this.options.onFontsResolved({
+      documentFonts: fontsUsedInDocument,
+      unsupportedFonts
+    });
+    return;
+  }
+  const localFontAccess = await navigator.permissions.query({ name: "local-fonts" });
+  if (localFontAccess.state === "denied") {
+    console.warn("[SuperDoc] Could not get access to local fonts. Using fallback solution.");
+    const unsupportedFonts = __privateMethod(this, _Editor_instances, determineUnsupportedFontsWithCanvas_fn).call(this, fontsUsedInDocument);
+    this.options.onFontsResolved({
+      documentFonts: fontsUsedInDocument,
+      unsupportedFonts
+    });
+    return;
+  }
+  try {
+    const localFonts = await window.queryLocalFonts();
+    const uniqueLocalFonts = [...new Set(localFonts.map((font) => font.family))];
+    const unsupportedFonts = __privateMethod(this, _Editor_instances, determineUnsupportedFontsWithLocalFonts_fn).call(this, fontsUsedInDocument, uniqueLocalFonts);
+    this.options.onFontsResolved({
+      documentFonts: fontsUsedInDocument,
+      unsupportedFonts
+    });
+  } catch {
+    console.warn("[SuperDoc] Could not get access to local fonts. Using fallback solution.");
+    const unsupportedFonts = __privateMethod(this, _Editor_instances, determineUnsupportedFontsWithCanvas_fn).call(this, fontsUsedInDocument);
+    this.options.onFontsResolved({
+      documentFonts: fontsUsedInDocument,
+      unsupportedFonts
+    });
+  }
+};
+/**
+ * Determines which fonts used in the document are not available locally nor imported.
+ *
+ * @param {string[]} fonts - Array of font family names used in the document.
+ * @param {string[]} localFonts - Array of local font family names available on the system.
+ * @returns {string[]} Array of font names that are unsupported.
+ */
+determineUnsupportedFontsWithLocalFonts_fn = function(fonts, localFonts) {
+  const unsupportedFonts = fonts.filter((font) => {
+    const isLocalFont = localFonts.includes(font);
+    const isFontImported = this.fontsImported.includes(font);
+    return !isLocalFont && !isFontImported;
+  });
+  return unsupportedFonts;
+};
+/**
+ * Determines which fonts used in the document are not supported
+ * by attempting to render them on a canvas.
+ * Fonts are considered unsupported if they cannot be rendered
+ * and are not already imported in the document via @font-face.
+ *
+ * @param {string[]} fonts - Array of font family names used in the document.
+ * @returns {string[]} Array of unsupported font family names.
+ */
+determineUnsupportedFontsWithCanvas_fn = function(fonts) {
+  const unsupportedFonts = fonts.filter((font) => {
+    const canRender = canRenderFont(font);
+    const isFontImported = this.fontsImported.includes(font);
+    return !canRender && !isFontImported;
+  });
+  return unsupportedFonts;
+};
 /**
  * Creates document PM schema.
  * @returns {void}
@@ -24256,6 +24365,15 @@ const TableCell = Node$1.create({
       widthUnit: {
         default: "px",
         rendered: false
+      },
+      /**
+       * @category Attribute
+       * @param {TableCellProperties} tableCellProperties - Properties for the table cell.
+       * @see {@link https://ecma-international.org/publications-and-standards/standards/ecma-376/} "Fundamentals And Markup Language Reference", page 463
+       */
+      tableCellProperties: {
+        default: null,
+        rendered: false
       }
     };
   },
@@ -26415,6 +26533,58 @@ const registerImages = async (foundImages, editor, view) => {
     }
   });
 };
+const normalizeWrap = (attrs = {}) => {
+  const wrap = attrs.wrap;
+  if (wrap?.type && wrap.type !== "Inline") {
+    return {
+      type: wrap.type,
+      attrs: wrap.attrs ?? {}
+    };
+  }
+  if (wrap?.type === "Inline" && Object.keys(wrap.attrs ?? {}).length) {
+    return {
+      type: "Inline",
+      attrs: wrap.attrs
+    };
+  }
+  if (!wrap && attrs.wrapText) {
+    return {
+      type: "Square",
+      attrs: {
+        wrapText: attrs.wrapText
+      }
+    };
+  }
+  if (!wrap && attrs.wrapTopAndBottom) {
+    return {
+      type: "TopAndBottom",
+      attrs: {}
+    };
+  }
+  if (wrap?.type === "Inline") {
+    return {
+      type: "Inline",
+      attrs: wrap.attrs ?? {}
+    };
+  }
+  return {
+    type: "Inline",
+    attrs: {}
+  };
+};
+const normalizeMarginOffset = (marginOffset = {}) => {
+  const { left: left2, horizontal, ...rest } = marginOffset;
+  return {
+    ...rest,
+    horizontal: horizontal ?? left2
+  };
+};
+const getNormalizedImageAttrs = (attrs = {}) => {
+  return {
+    wrap: normalizeWrap(attrs),
+    marginOffset: normalizeMarginOffset(attrs.marginOffset ?? {})
+  };
+};
 const ImagePositionPluginKey = new PluginKey("ImagePosition");
 const ImagePositionPlugin = ({ editor }) => {
   const { view } = editor;
@@ -26462,7 +26632,8 @@ const getImagePositionDecorations = (state, view) => {
       let style = "";
       let className = "";
       const { vRelativeFrom, alignH } = node.attrs.anchorData;
-      const { size, padding, marginOffset } = node.attrs;
+      const { size, padding } = node.attrs;
+      const { marginOffset } = getNormalizedImageAttrs(node.attrs);
       const pageBreak = findPreviousDomNodeWithClass(view, pos, "pagination-break-wrapper");
       if (pageBreak) {
         switch (alignH) {
@@ -26579,7 +26750,24 @@ const Image = Node$1.create({
         rendered: false
       },
       originalAttributes: { rendered: false },
-      wrapTopAndBottom: { rendered: false },
+      /**
+       * @category Attribute
+       * @param {Object} wrap - Wrapping options
+       * @param {string} wrap.type - Wrap type: "None", "Square", "Through", "Tight", "TopAndBottom", "Inline"
+       * @param {Object} [wrap.attrs] - Wrap attributes (only allowed attributes for the given type will be accepted)
+       * @param {string} [wrap.attrs.wrapText] - Text wrapping mode for Square type: "bothSides", "largest", "left", "right"
+       * @param {number} [wrap.attrs.distTop] - Top distance in pixels
+       * @param {number} [wrap.attrs.distBottom] - Bottom distance in pixels
+       * @param {number} [wrap.attrs.distLeft] - Left distance in pixels
+       * @param {number} [wrap.attrs.distRight] - Right distance in pixels
+       * @param {Array} [wrap.attrs.polygon] - Polygon points for Through/Tight types: [[x1,y1], [x2,y2], ...]
+       * @param {boolean} [wrap.attrs.behindDoc] - Whether image should be behind document text (for wrapNone)
+       */
+      wrap: {
+        default: { type: "Inline" },
+        rendered: false
+        // Handled in main renderDOM
+      },
       anchorData: {
         default: null,
         rendered: false
@@ -26625,7 +26813,6 @@ const Image = Node$1.create({
        * @private
        */
       simplePos: { rendered: false },
-      wrapText: { rendered: false },
       extension: { rendered: false },
       size: {
         default: {},
@@ -26641,55 +26828,13 @@ const Image = Node$1.create({
       },
       padding: {
         default: {},
-        renderDOM: ({ size = {}, padding, marginOffset, transformData = {} }) => {
-          let { left: left2 = 0, top: top2 = 0, bottom: bottom2 = 0, right: right2 = 0 } = padding ?? {};
-          const { rotation } = transformData;
-          const { height, width } = size;
-          if (rotation && height && width) {
-            const { horizontal, vertical } = getRotationMargins(width, height, rotation);
-            left2 += horizontal;
-            right2 += horizontal;
-            top2 += vertical;
-            bottom2 += vertical;
-          }
-          let style = "";
-          if (left2 && marginOffset?.left == null) style += `margin-left: ${left2}px;`;
-          if (top2 && marginOffset?.top == null) style += `margin-top: ${top2}px;`;
-          if (bottom2) style += `margin-bottom: ${bottom2}px;`;
-          if (right2) style += `margin-right: ${right2}px;`;
-          return { style };
-        }
+        rendered: false
+        // Handled in main renderDOM
       },
       marginOffset: {
         default: {},
-        renderDOM: ({ marginOffset, anchorData, transformData, size }) => {
-          const hasAnchorData = Boolean(anchorData);
-          const hasMarginOffsets = marginOffset?.left != null || marginOffset?.top != null;
-          if (!hasAnchorData && !hasMarginOffsets) return {};
-          const relativeFromPageV = anchorData?.vRelativeFrom === "page";
-          const maxMarginV = 500;
-          const baseLeft = marginOffset?.left ?? 0;
-          const baseTop = marginOffset?.top ?? 0;
-          let rotationLeft = 0;
-          let rotationTop = 0;
-          const { rotation } = transformData ?? {};
-          const { height, width } = size ?? {};
-          if (rotation && height && width) {
-            const { horizontal, vertical } = getRotationMargins(width, height, rotation);
-            rotationLeft = horizontal;
-            rotationTop = vertical;
-          }
-          const left2 = baseLeft + rotationLeft;
-          const top2 = baseTop + rotationTop;
-          let style = "";
-          if (left2) style += `margin-left: ${left2}px;`;
-          if (top2) {
-            if (relativeFromPageV && top2 >= maxMarginV) style += `margin-top: ${maxMarginV}px;`;
-            else style += `margin-top: ${top2}px;`;
-          }
-          if (!style) return {};
-          return { style };
-        }
+        rendered: false
+        // Handled in main renderDOM
       },
       style: {
         default: null,
@@ -26708,8 +26853,181 @@ const Image = Node$1.create({
       }
     ];
   },
-  renderDOM({ htmlAttributes }) {
-    return ["img", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes)];
+  renderDOM({ node, htmlAttributes }) {
+    const { wrap, marginOffset } = getNormalizedImageAttrs(node.attrs);
+    const { anchorData, padding, transformData = {}, size = { width: 0, height: 0 } } = node.attrs;
+    const margin = {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    };
+    let centered = false;
+    let floatRight = false;
+    let baseHorizontal = marginOffset?.horizontal || 0;
+    let style = "";
+    if (padding) {
+      if (padding.left) margin.left += padding.left;
+      if (padding.right) margin.right += padding.right;
+      if (padding.top) margin.top += padding.top;
+      if (padding.bottom) margin.bottom += padding.bottom;
+    }
+    const { rotation } = transformData;
+    const { height, width } = size;
+    if (rotation && height && width) {
+      const { horizontal, vertical } = getRotationMargins(width, height, rotation);
+      margin.left += horizontal;
+      margin.right += horizontal;
+      margin.top += vertical;
+      margin.bottom += vertical;
+    }
+    if (wrap && wrap.type) {
+      const { type, attrs = {} } = wrap;
+      switch (type) {
+        case "None":
+          style += "position: absolute;";
+          if (attrs.behindDoc) {
+            style += "z-index: -1;";
+          } else {
+            style += "z-index: 1;";
+          }
+          break;
+        case "Square":
+          style += "shape-outside: border-box; clear: both;";
+          if (attrs.wrapText === "right") {
+            style += "float: left;";
+          } else if (attrs.wrapText === "left") {
+            style += "float: right;";
+            floatRight = true;
+          } else if (["largest", "bothSides"].includes(attrs.wrapText)) {
+            const pageStyles2 = this.editor?.converter?.pageStyles;
+            if (pageStyles2?.pageSize && pageStyles2?.pageMargins && size.width) {
+              const pageWidth = inchesToPixels(pageStyles2.pageSize.width);
+              const leftMargin = inchesToPixels(pageStyles2.pageMargins.left);
+              const rightMargin = inchesToPixels(pageStyles2.pageMargins.right);
+              const contentWidth = pageWidth - leftMargin - rightMargin;
+              const imageWidth = size.width + (attrs.distLeft || 0) + (attrs.distRight || 0);
+              const leftSpace = marginOffset.horizontal;
+              const rightSpace = contentWidth - leftSpace - imageWidth;
+              if (rightSpace < 0) {
+                style += "float: left;";
+              } else if (rightSpace > leftSpace) {
+                style += "float: left;";
+              } else {
+                style += "float: right;";
+                floatRight = true;
+                baseHorizontal = rightSpace;
+              }
+            } else {
+              style += "float: left;";
+            }
+          }
+          if (attrs.distTop) margin.top += attrs.distTop;
+          if (attrs.distBottom) margin.bottom += attrs.distBottom;
+          if (attrs.distLeft) margin.left += attrs.distLeft;
+          if (attrs.distRight) margin.right += attrs.distRight;
+          break;
+        case "Through":
+        case "Tight":
+          style += "clear: both;";
+          const pageStyles = this.editor?.converter?.pageStyles;
+          if (pageStyles?.pageSize && pageStyles?.pageMargins && size.width) {
+            const pageWidth = inchesToPixels(pageStyles.pageSize.width);
+            const leftMargin = inchesToPixels(pageStyles.pageMargins.left);
+            const rightMargin = inchesToPixels(pageStyles.pageMargins.right);
+            const contentWidth = pageWidth - leftMargin - rightMargin;
+            const imageWidth = size.width + (attrs.distLeft || 0) + (attrs.distRight || 0);
+            const leftSpace = marginOffset.horizontal;
+            const rightSpace = contentWidth - leftSpace - imageWidth;
+            if (rightSpace < 0) {
+              style += "float: left;";
+            } else if (rightSpace > leftSpace) {
+              style += "float: left;";
+            } else {
+              style += "float: right;";
+              floatRight = true;
+              baseHorizontal = rightSpace;
+            }
+          } else {
+            style += "float: left;";
+          }
+          if (attrs.distTop) margin.top += attrs.distTop;
+          if (attrs.distBottom) margin.bottom += attrs.distBottom;
+          if (attrs.distLeft) margin.left += attrs.distLeft;
+          if (attrs.distRight) margin.right += attrs.distRight;
+          if (attrs.polygon) {
+            let horizontalOffset = floatRight ? attrs.polygon[0][0] || 0 : marginOffset.horizontal + 15;
+            let maxX = 0;
+            let minX = 0;
+            let minY = 0;
+            let maxY = 0;
+            attrs.polygon.forEach(([x, y]) => {
+              if (floatRight && x < horizontalOffset) horizontalOffset = x;
+              if (x > maxX) maxX = x;
+              if (x < minX) minX = x;
+              if (y > maxY) maxY = y;
+              if (y < minY) minY = y;
+            });
+            const originalWidth = maxX - minX;
+            const originalHeight = maxY - minY;
+            const scaleWidth = Math.min(1, size.width / originalWidth);
+            const scaleHeight = Math.min(1, size.height / originalHeight);
+            const verticalOffset = Math.max(0, marginOffset.top);
+            const points = attrs.polygon.map(([x, y]) => `${horizontalOffset + x * scaleWidth}px ${verticalOffset + y * scaleHeight}px`).join(", ");
+            style += `shape-outside: polygon(${points});`;
+          }
+          break;
+        case "TopAndBottom":
+          style += "display: block; clear: both;";
+          if (attrs.distTop) margin.top += attrs.distTop;
+          if (attrs.distBottom) margin.bottom += attrs.distBottom;
+          centered = true;
+          break;
+      }
+    }
+    const hasAnchorData = Boolean(anchorData);
+    const hasMarginOffsets = marginOffset?.horizontal != null || marginOffset?.top != null;
+    if (hasAnchorData || hasMarginOffsets) {
+      const relativeFromPageV = anchorData?.vRelativeFrom === "page";
+      const maxMarginV = 500;
+      const baseTop = Math.max(0, marginOffset?.top ?? 0);
+      let rotationHorizontal = 0;
+      let rotationTop = 0;
+      const { rotation: rotation2 } = transformData ?? {};
+      const { height: height2, width: width2 } = size ?? {};
+      if (rotation2 && height2 && width2) {
+        const { horizontal: horizontal2, vertical } = getRotationMargins(width2, height2, rotation2);
+        rotationHorizontal = horizontal2;
+        rotationTop = vertical;
+      }
+      const horizontal = baseHorizontal + rotationHorizontal;
+      const top2 = baseTop + rotationTop;
+      if (horizontal) {
+        if (floatRight) {
+          margin.right += horizontal;
+        } else {
+          margin.left += horizontal;
+        }
+      }
+      if (top2) {
+        if (relativeFromPageV && top2 >= maxMarginV) margin.top += maxMarginV;
+        else margin.top += top2;
+      }
+    }
+    if (centered) {
+      style += "margin-left: auto; margin-right: auto;";
+    } else {
+      if (margin.left) style += `margin-left: ${margin.left}px;`;
+      if (margin.right) style += `margin-right: ${margin.right}px;`;
+    }
+    if (margin.top) style += `margin-top: ${margin.top}px;`;
+    if (margin.bottom) style += `margin-bottom: ${margin.bottom}px;`;
+    const finalAttributes = { ...htmlAttributes };
+    if (style) {
+      const existingStyle = finalAttributes.style || "";
+      finalAttributes.style = existingStyle + (existingStyle ? " " : "") + style;
+    }
+    return ["img", Attribute.mergeAttributes(this.options.htmlAttributes, finalAttributes)];
   },
   addCommands() {
     return {
@@ -26731,6 +27049,85 @@ const Image = Node$1.create({
           type: this.name,
           attrs: options
         });
+      },
+      /**
+       * Set the wrapping mode and attributes for the selected image
+       * @category Command
+       * @param {Object} options - Wrapping options
+       * @param {string} options.type - Wrap type: "None", "Square", "Through", "Tight", "TopAndBottom", "Inline"
+       * @param {Object} [options.attrs] - Wrap attributes (only allowed attributes for the given type will be accepted)
+       * @param {string} [options.attrs.wrapText] - Text wrapping mode for Square type: "bothSides", "largest", "left", "right"
+       * @param {number} [options.attrs.distTop] - Top distance in pixels
+       * @param {number} [options.attrs.distBottom] - Bottom distance in pixels
+       * @param {number} [options.attrs.distLeft] - Left distance in pixels
+       * @param {number} [options.attrs.distRight] - Right distance in pixels
+       * @param {Array} [options.attrs.polygon] - Polygon points for Through/Tight types: [[x1,y1], [x2,y2], ...]
+       * @param {boolean} [options.attrs.behindDoc] - Whether image should be behind document text (for wrapNone)
+       * @example
+       * // No wrapping, behind document
+       * editor.commands.setWrapping({ type: 'None', attrs: {behindDoc: true} })
+       *
+       * // Square wrapping on both sides with distances
+       * editor.commands.setWrapping({
+       *   type: 'Square',
+       *   attrs: {
+       *     wrapText: 'bothSides',
+       *     distTop: 10,
+       *     distBottom: 10,
+       *     distLeft: 10,
+       *     distRight: 10
+       *   }
+       * })
+       *
+       * // Tight wrapping with polygon
+       * editor.commands.setWrapping({
+       *   type: 'Tight',
+       *   attrs: {
+       *     polygon: [[0, 0], [100, 0], [100, 100], [0, 100]]
+       *   }
+       * })
+       *
+       * // Top and bottom wrapping
+       * editor.commands.setWrapping({
+       *   type: 'TopAndBottom',
+       *   attrs: {
+       *     distTop: 15,
+       *     distBottom: 15
+       *   }
+       * })
+       */
+      setWrapping: (options) => ({ chain, state }) => {
+        const { selection } = state;
+        const { $from } = selection;
+        const node = $from.nodeAfter;
+        if (!node || node.type.name !== this.name) {
+          return false;
+        }
+        const { type, attrs = {} } = options;
+        const allowedAttrs = {};
+        const allowedAttributes = {
+          None: ["behindDoc"],
+          Square: ["wrapText", "distTop", "distBottom", "distLeft", "distRight"],
+          Through: ["distTop", "distBottom", "distLeft", "distRight", "polygon"],
+          Tight: ["distTop", "distBottom", "distLeft", "distRight", "polygon"],
+          TopAndBottom: ["distTop", "distBottom"],
+          Inline: []
+        };
+        const allowedForType = allowedAttributes[type] || [];
+        Object.keys(attrs).forEach((key2) => {
+          if (allowedForType.includes(key2)) {
+            allowedAttrs[key2] = attrs[key2];
+          }
+        });
+        const updatedAttrs = {
+          ...node.attrs,
+          wrap: {
+            type,
+            attrs: allowedAttrs
+          },
+          isAnchor: type !== "Inline"
+        };
+        return chain().updateAttributes(this.name, updatedAttrs).run();
       }
     };
   },

package/dist/super-editor/chunks/{toolbar-LmzuO_YJ.js → toolbar-CXSg2lJ9.js}

@@ -1,6 +1,6 @@
 import { computed, createElementBlock, openBlock, createElementVNode, createCommentVNode, normalizeClass, normalizeStyle, ref, withKeys, unref, withModifiers, createBlock, toDisplayString, withDirectives, vModelText, nextTick, getCurrentInstance, createVNode, readonly, watch, onMounted, onBeforeUnmount, reactive, onBeforeMount, inject, onActivated, onDeactivated, createTextVNode, Fragment, Comment, defineComponent, provide, h, Teleport, toRef, renderSlot, isVNode, shallowRef, watchEffect, mergeProps, Transition, vShow, cloneVNode, Text, renderList, withCtx } from "vue";
-import { p as process$1 } from "./converter-nWAUAQ83.js";
-import { _ as _export_sfc, u as useHighContrastMode, g as global$1 } from "./editor-DAyiX5AL.js";
+import { p as process$1 } from "./converter-DpPj67OW.js";
+import { _ as _export_sfc, u as useHighContrastMode, g as global$1 } from "./editor-Dx6AhT5N.js";
 const sanitizeNumber = (value, defaultNumber) => {
   let sanitized = value.replace(/[^0-9.]/g, "");
   sanitized = parseFloat(sanitized);

package/dist/super-editor/converter.es.js

@@ -1,4 +1,4 @@
-import { a5 } from "./chunks/converter-nWAUAQ83.js";
+import { a5 } from "./chunks/converter-DpPj67OW.js";
 import "vue";
 export {
   a5 as SuperConverter

package/dist/super-editor/docx-zipper.es.js

@@ -1,5 +1,5 @@
-import "./chunks/converter-nWAUAQ83.js";
-import { D } from "./chunks/docx-zipper-B2uMUaj9.js";
+import "./chunks/converter-DpPj67OW.js";
+import { D } from "./chunks/docx-zipper-6Kc95yG-.js";
 export {
   D as default
 };

package/dist/super-editor/editor.es.js

@@ -1,6 +1,6 @@
-import { E } from "./chunks/editor-DAyiX5AL.js";
-import "./chunks/converter-nWAUAQ83.js";
-import "./chunks/docx-zipper-B2uMUaj9.js";
+import { E } from "./chunks/editor-Dx6AhT5N.js";
+import "./chunks/converter-DpPj67OW.js";
+import "./chunks/docx-zipper-6Kc95yG-.js";
 export {
   E as Editor
 };

package/dist/super-editor/file-zipper.es.js

@@ -1,4 +1,4 @@
-import { J as JSZip } from "./chunks/docx-zipper-B2uMUaj9.js";
+import { J as JSZip } from "./chunks/docx-zipper-6Kc95yG-.js";
 async function createZip(blobs, fileNames) {
   const zip = new JSZip();
   blobs.forEach((blob, index) => {