@harbour-enterprises/superdoc 0.13.2-rev4 → 0.13.2-rev6

package/dist/chunks/{index-BtEUM3Lh.cjs → index-B0t3i_io.cjs}

@@ -1,6 +1,6 @@
 "use strict";
 const jszip = require("./jszip-BTAcmbVg.cjs");
-const index$2 = require("./index-CfHNUf7T.cjs");
+const index$2 = require("./index-Bk160jQ2.cjs");
 function _mergeNamespaces(n, m) {
   for (var i = 0; i < m.length; i++) {
     const e = m[i];

package/dist/chunks/{index-CfHNUf7T.cjs → index-Bk160jQ2.cjs}

@@ -1,8 +1,8 @@
 "use strict";
 const jszip = require("./jszip-BTAcmbVg.cjs");
 const vue = require("./vue-HIY1g7dm.cjs");
-const xmlJs = require("./xml-js-CioRgccm.cjs");
-const url = require("./url-DDjZQLix.cjs");
+const xmlJs = require("./xml-js-Bu1ZZzmb.cjs");
+const url = require("./url-CWyTQ-Xy.cjs");
 function _mergeNamespaces(n, m) {
   for (var i = 0; i < m.length; i++) {
     const e = m[i];

package/dist/chunks/{index-C9qTXaOd.es.js → index-D_HUrFWV.es.js}

@@ -1,7 +1,7 @@
 import { c as commonjsGlobal, B as Buffer, a as getAugmentedNamespace, g as getDefaultExportFromCjs } from "./jszip-DckFs3A7.es.js";
 import { p as process$1 } from "./vue-Bi1uWinj.es.js";
-import { e as eventsExports, r as require$$2, u as util, i as inherits_browserExports, b as browser$1, a as requireString_decoder } from "./xml-js-DpXPtkG0.es.js";
-import { u as url } from "./url-NHyWLplx.es.js";
+import { e as eventsExports, r as require$$2, u as util, i as inherits_browserExports, b as browser$1, a as requireString_decoder } from "./xml-js-CdiD26MJ.es.js";
+import { u as url } from "./url-DsBQArCl.es.js";
 function _mergeNamespaces(n, m) {
   for (var i = 0; i < m.length; i++) {
     const e = m[i];

package/dist/chunks/{index-B7eoQe4X.es.js → index-KzH9VKHh.es.js}

@@ -1,5 +1,5 @@
 import { g as getDefaultExportFromCjs } from "./jszip-DckFs3A7.es.js";
-import { s as streamHttp, r as require$$1 } from "./index-C9qTXaOd.es.js";
+import { s as streamHttp, r as require$$1 } from "./index-D_HUrFWV.es.js";
 function _mergeNamespaces(n, m) {
   for (var i = 0; i < m.length; i++) {
     const e = m[i];

package/dist/chunks/{super-editor.es-Dfr_PiLc.cjs → super-editor.es-BTxObl3D.cjs}

@@ -23989,7 +23989,7 @@ const _SuperConverter = class _SuperConverter2 {
       return;
     }
   }
-  static updateDocumentVersion(docx = this.convertedXml, version2 = "0.13.2-rev4") {
+  static updateDocumentVersion(docx = this.convertedXml, version2 = "0.13.2-rev6") {
     const customLocation = "docProps/custom.xml";
     if (!docx[customLocation]) {
       docx[customLocation] = generateCustomXml();
@@ -24456,7 +24456,7 @@ function storeSuperdocVersion(docx) {
 function generateCustomXml() {
   return DEFAULT_CUSTOM_XML;
 }
-function generateSuperdocVersion(pid = 2, version2 = "0.13.2-rev4") {
+function generateSuperdocVersion(pid = 2, version2 = "0.13.2-rev6") {
   return {
     type: "element",
     name: "property",
@@ -39252,6 +39252,7 @@ const createHeaderFooterEditor = ({
     mediaFiles: editor.storage.image.media,
     fonts: editor.options.fonts,
     isHeaderOrFooter: true,
+    isHeadless: editor.options.isHeadless,
     annotations: true,
     currentPageNumber,
     parentEditor: editor,
@@ -39259,13 +39260,15 @@ const createHeaderFooterEditor = ({
     onBlur: (evt) => onHeaderFooterDataUpdate(evt, editor, sectionId, type2)
   });
   const pm = editorContainer.querySelector(".ProseMirror");
-  pm.style.maxHeight = "100%";
-  pm.style.minHeight = "100%";
-  pm.style.outline = "none";
-  pm.style.border = "none";
-  pm.setAttribute("role", "textbox");
-  pm.setAttribute("aria-multiline", true);
-  pm.setAttribute("aria-label", `${type2} content area. Double click to start typing.`);
+  if (pm) {
+    pm.style.maxHeight = "100%";
+    pm.style.minHeight = "100%";
+    pm.style.outline = "none";
+    pm.style.border = "none";
+    pm.setAttribute("role", "textbox");
+    pm.setAttribute("aria-multiline", true);
+    pm.setAttribute("aria-label", `${type2} content area. Double click to start typing.`);
+  }
   return headerFooterEditor;
 };
 const broadcastEditorEvents = (editor, sectionEditor) => {
@@ -39284,14 +39287,16 @@ const broadcastEditorEvents = (editor, sectionEditor) => {
     });
   });
 };
-const toggleHeaderFooterEditMode = (editor, focusedSectionEditor, isEditMode) => {
+const toggleHeaderFooterEditMode = ({ editor, focusedSectionEditor, isEditMode, documentMode }) => {
   editor.converter.headerEditors.forEach((item) => {
     item.editor.setEditable(isEditMode, false);
     item.editor.view.dom.setAttribute("aria-readonly", !isEditMode);
+    item.editor.view.dom.setAttribute("documentmode", documentMode);
   });
   editor.converter.footerEditors.forEach((item) => {
     item.editor.setEditable(isEditMode, false);
     item.editor.view.dom.setAttribute("aria-readonly", !isEditMode);
+    item.editor.view.dom.setAttribute("documentmode", documentMode);
   });
   if (isEditMode) {
     const pm = document.querySelector(".ProseMirror");
@@ -40719,6 +40724,19 @@ const _Editor = class _Editor2 extends EventEmitter$1 {
     this.setHighContrastMode = setHighContrastMode;
     initMode();
   }
+  mount(el) {
+    __privateMethod$1(this, _Editor_instances, createView_fn).call(this, el);
+    window.setTimeout(() => {
+      if (this.isDestroyed) return;
+      this.emit("create", { editor: this });
+    }, 0);
+  }
+  unmount() {
+    if (this.view) {
+      this.view.destroy();
+    }
+    this.view = null;
+  }
   /**
    * Set the toolbar for this editor
    * @param {Object} toolbar - The toolbar instance
@@ -40767,7 +40785,7 @@ const _Editor = class _Editor2 extends EventEmitter$1 {
    * @returns {boolean}
    */
   get isDestroyed() {
-    return this.view.isDestroyed;
+    return this.view?.isDestroyed ?? true;
   }
   /**
    * Get the editor element
@@ -40810,7 +40828,12 @@ const _Editor = class _Editor2 extends EventEmitter$1 {
       this.commands.toggleTrackChangesShowOriginal();
       this.setEditable(false, false);
       this.setOptions({ documentMode: "viewing" });
-      toggleHeaderFooterEditMode(this, null, false);
+      toggleHeaderFooterEditMode({
+        editor: this,
+        focusedSectionEditor: null,
+        isEditMode: false,
+        documentMode: cleanedMode
+      });
     } else if (cleanedMode === "suggesting") {
       __privateMethod$1(this, _Editor_instances, registerPluginByNameIfNotExists_fn).call(this, "TrackChangesBase");
       this.commands.disableTrackChangesShowOriginal();
@@ -40823,7 +40846,12 @@ const _Editor = class _Editor2 extends EventEmitter$1 {
       this.commands.disableTrackChanges();
       this.setEditable(true, false);
       this.setOptions({ documentMode: "editing" });
-      toggleHeaderFooterEditMode(this, null, false);
+      toggleHeaderFooterEditMode({
+        editor: this,
+        focusedSectionEditor: null,
+        isEditMode: false,
+        documentMode: cleanedMode
+      });
     }
   }
   /**
@@ -41000,29 +41028,26 @@ const _Editor = class _Editor2 extends EventEmitter$1 {
     };
   }
   /**
-    * Initialize default styles for the editor container and ProseMirror.
-    * Get page size and margins from the converter.
-    * Set document default font and font size.
-    *
-    * @param {HTMLElement} [element=this.element] - The DOM element to apply styles to
-    * @returns {void}
-    */
-  initDefaultStyles(element = this.element) {
-    if (this.options.isHeadless || this.options.suppressDefaultDocxStyles) return;
-    const proseMirror = element?.querySelector(".ProseMirror");
+   * Attach styles and attributes to the editor element
+   */
+  updateEditorStyles(element, proseMirror) {
     const { pageSize, pageMargins } = this.converter.pageStyles ?? {};
-    if (!proseMirror || !pageSize || !pageMargins) {
+    if (!proseMirror || !element) {
       return;
     }
     proseMirror.setAttribute("role", "document");
     proseMirror.setAttribute("aria-multiline", true);
     proseMirror.setAttribute("aria-label", "Main content area, start typing to enter text.");
     proseMirror.setAttribute("aria-description", "");
-    element.style.width = pageSize.width + "in";
-    element.style.minWidth = pageSize.width + "in";
-    element.style.minHeight = pageSize.height + "in";
-    element.style.paddingLeft = pageMargins.left + "in";
-    element.style.paddingRight = pageMargins.right + "in";
+    if (pageSize) {
+      element.style.width = pageSize.width + "in";
+      element.style.minWidth = pageSize.width + "in";
+      element.style.minHeight = pageSize.height + "in";
+    }
+    if (pageMargins) {
+      element.style.paddingLeft = pageMargins.left + "in";
+      element.style.paddingRight = pageMargins.right + "in";
+    }
     element.style.boxSizing = "border-box";
     element.style.isolation = "isolate";
     proseMirror.style.outline = "none";
@@ -41043,6 +41068,19 @@ const _Editor = class _Editor2 extends EventEmitter$1 {
       proseMirror.style.paddingTop = "1in";
       proseMirror.style.paddingBottom = "1in";
     }
+  }
+  /**
+    * Initialize default styles for the editor container and ProseMirror.
+    * Get page size and margins from the converter.
+    * Set document default font and font size.
+    *
+    * @param {HTMLElement} [element=this.element] - The DOM element to apply styles to
+    * @returns {void}
+    */
+  initDefaultStyles(element = this.element) {
+    if (this.options.isHeadless || this.options.suppressDefaultDocxStyles) return;
+    const proseMirror = element?.querySelector(".ProseMirror");
+    this.updateEditorStyles(element, proseMirror);
     this.initMobileStyles(element);
   }
   /**
@@ -41254,10 +41292,22 @@ const _Editor = class _Editor2 extends EventEmitter$1 {
    */
   destroy() {
     this.emit("destroy");
-    if (this.view) this.view.destroy();
+    this.unmount();
+    this.destroyHeaderFooterEditors();
     __privateMethod$1(this, _Editor_instances, endCollaboration_fn).call(this);
     this.removeAllListeners();
   }
+  destroyHeaderFooterEditors() {
+    const editors = [
+      ...this.converter.headerEditors,
+      ...this.converter.footerEditors
+    ];
+    for (let editorData of editors) {
+      editorData.editor.destroy();
+    }
+    this.converter.headerEditors.length = 0;
+    this.converter.footerEditors.length = 0;
+  }
   /**
    * Check if migrations are needed for the data
    * @static
@@ -41275,7 +41325,7 @@ const _Editor = class _Editor2 extends EventEmitter$1 {
    * @returns {Object | void} Migration results
    */
   processCollaborationMigrations() {
-    console.debug("[checkVersionMigrations] Current editor version", "0.13.2-rev4");
+    console.debug("[checkVersionMigrations] Current editor version", "0.13.2-rev6");
     if (!this.options.ydoc) return;
     const metaMap = this.options.ydoc.getMap("meta");
     let docVersion = metaMap.get("version");
@@ -41471,7 +41521,7 @@ init_fn = function(options2) {
   this.emit("beforeCreate", { editor: this });
   this.on("contentError", this.options.onContentError);
   this.on("exception", this.options.onException);
-  __privateMethod$1(this, _Editor_instances, createView_fn).call(this);
+  this.mount(this.options.element);
   this.initDefaultStyles();
   this.setDocumentMode(options2.documentMode);
   if (this.options.isHeadless) return;
@@ -41495,10 +41545,6 @@ init_fn = function(options2) {
     __privateMethod$1(this, _Editor_instances, initPagination_fn).call(this);
     __privateMethod$1(this, _Editor_instances, initComments_fn).call(this);
   }
-  window.setTimeout(() => {
-    if (this.isDestroyed) return;
-    this.emit("create", { editor: this });
-  }, 0);
 };
 initRichText_fn = function(options2) {
   if (!options2.extensions || !options2.extensions.length) {
@@ -41510,7 +41556,7 @@ initRichText_fn = function(options2) {
   this.on("beforeCreate", this.options.onBeforeCreate);
   this.emit("beforeCreate", { editor: this });
   this.on("contentError", this.options.onContentError);
-  __privateMethod$1(this, _Editor_instances, createView_fn).call(this);
+  this.mount(this.options.element);
   this.on("create", this.options.onCreate);
   this.on("update", this.options.onUpdate);
   this.on("selectionUpdate", this.options.onSelectionUpdate);
@@ -41521,10 +41567,6 @@ initRichText_fn = function(options2) {
   this.on("commentsLoaded", this.options.onCommentsLoaded);
   this.on("commentClick", this.options.onCommentClicked);
   this.on("locked", this.options.onDocumentLocked);
-  window.setTimeout(() => {
-    if (this.isDestroyed) return;
-    this.emit("create", { editor: this });
-  }, 0);
 };
 onFocus_fn = function({ editor, event }) {
   this.toolbar?.setActiveEditor(editor);
@@ -41645,11 +41687,11 @@ createDocFromHTML_fn = function(content) {
   }
   return DOMParser$1.fromSchema(this.schema).parse(parsedContent);
 };
-createView_fn = function() {
+createView_fn = function(element) {
   let doc2 = __privateMethod$1(this, _Editor_instances, generatePmData_fn).call(this);
   const state2 = { schema: this.schema };
   if (!this.options.ydoc) state2.doc = doc2;
-  this.view = new EditorView(this.options.element, {
+  this.view = new EditorView(element, {
     ...this.options.editorProps,
     dispatchTransaction: __privateMethod$1(this, _Editor_instances, dispatchTransaction_fn).bind(this),
     state: EditorState.create(state2),
@@ -41666,7 +41708,12 @@ createView_fn = function() {
       event.stopPropagation();
       if (!this.options.editable) {
         this.setEditable(true, false);
-        toggleHeaderFooterEditMode(this, null, false);
+        toggleHeaderFooterEditMode({
+          editor: this,
+          focusedSectionEditor: null,
+          isEditMode: false,
+          documentMode: this.options.documentMode
+        });
         const pm = document.querySelector(".ProseMirror");
         pm.classList.remove("header-footer-edit");
         pm.setAttribute("aria-readonly", false);
@@ -41679,8 +41726,6 @@ createView_fn = function() {
   });
   this.view.updateState(newState);
   this.createNodeViews();
-  const dom = this.view.dom;
-  dom.editor = this;
   this.options.telemetry?.sendReport();
 };
 onCollaborationReady_fn = function({ editor, ydoc }) {
@@ -41707,7 +41752,9 @@ initComments_fn = function() {
   }, 50);
 };
 initPagination_fn = async function() {
-  if (this.options.isHeadless || !this.extensionService) return;
+  if (this.options.isHeadless || !this.extensionService || this.options.isHeaderOrFooter) {
+    return;
+  }
   const pagination = this.options.extensions.find((e) => e.name === "pagination");
   if (pagination && this.options.pagination) {
     console.debug("🔗 [super-editor] Initializing pagination");
@@ -41719,7 +41766,7 @@ initPagination_fn = async function() {
   }
 };
 dispatchTransaction_fn = function(transaction) {
-  if (this.view.isDestroyed) return;
+  if (this.isDestroyed) return;
   let state2;
   try {
     const trackChangesState = TrackChangesBasePluginKey.getState(this.view.state);
@@ -54287,7 +54334,8 @@ const Pagination = Extension.create({
   addStorage() {
     return {
       height: 0,
-      sectionData: null
+      sectionData: null,
+      headerFooterEditors: /* @__PURE__ */ new Map()
     };
   },
   addCommands() {
@@ -54330,6 +54378,10 @@ const Pagination = Extension.create({
             shouldUpdate = true;
             shouldInitialize = meta.isReadyToInit;
           }
+          const syncMeta = tr.getMeta("y-sync$");
+          if (syncMeta && syncMeta.isChangeOrigin) {
+            return { ...oldState };
+          }
           const imagePluginTransaction = tr.getMeta(ImagePlaceholderPluginKey);
           if (imagePluginTransaction) {
             if (imagePluginTransaction.type === "remove") {
@@ -54363,6 +54415,7 @@ const Pagination = Extension.create({
           if (isForceUpdate) shouldUpdate = true;
           return {
             ...oldState,
+            decorations: meta?.decorations?.map(tr.mapping, tr.doc) || DecorationSet.empty,
             isReadyToInit: shouldInitialize
           };
         }
@@ -54391,6 +54444,10 @@ const Pagination = Extension.create({
   },
   onDestroy() {
     cleanupFloatingSeparators();
+    const { headerFooterEditors } = this.editor.storage.pagination;
+    if (headerFooterEditors) {
+      headerFooterEditors.clear();
+    }
   }
 });
 const getHeaderFooterId = (currentPageNumber, sectionType, editor, node2 = null) => {
@@ -54451,6 +54508,7 @@ const performUpdate = (editor, view, previousDecorations) => {
 const calculatePageBreaks = (view, editor, sectionData) => {
   if (!editor.converter) return DecorationSet.empty;
   const pageSize = editor.converter.pageStyles?.pageSize;
+  if (!pageSize) return DecorationSet.empty;
   const { width, height } = pageSize;
   if (!width || !height) return DecorationSet.empty;
   const ignorePlugins = [CollaborationPluginKey, PaginationPluginKey];
@@ -54489,11 +54547,13 @@ function generateInternalPageBreaks(doc2, view, editor, sectionData) {
   let pageHeightThreshold = pageHeight;
   let footer = null, header = null;
   const firstHeaderId = getHeaderFooterId(currentPageNumber, "headerIds", editor);
-  const firstHeader = createHeader(pageMargins, pageSize, sectionData, firstHeaderId, editor, currentPageNumber);
+  const isFirstHeader = true;
+  const firstHeader = createHeader(pageMargins, pageSize, sectionData, firstHeaderId, editor, currentPageNumber, isFirstHeader);
   const pageBreak = createPageBreak({ editor, header: firstHeader, isFirstHeader: true });
   decorations.push(Decoration.widget(0, pageBreak, { key: "stable-key" }));
   const lastFooterId = getHeaderFooterId(currentPageNumber, "footerIds", editor);
-  const lastFooter = createFooter(pageMargins, pageSize, sectionData, lastFooterId, editor, currentPageNumber);
+  const isLastFooter = true;
+  const lastFooter = createFooter(pageMargins, pageSize, sectionData, lastFooterId, editor, currentPageNumber, isLastFooter);
   pageHeightThreshold -= firstHeader.headerHeight + lastFooter.footerHeight;
   let coords = view?.coordsAtPos(doc2.content.size);
   if (!coords) return [];
@@ -54512,7 +54572,8 @@ function generateInternalPageBreaks(doc2, view, editor, sectionData) {
       if (currentPageNumber === 1) {
         const headerId2 = getHeaderFooterId(currentPageNumber, "headerIds", editor, currentNode);
         decorations.pop();
-        const newFirstHeader = createHeader(pageMargins, pageSize, sectionData, headerId2, editor, currentPageNumber - 1);
+        const isFirstHeader2 = true;
+        const newFirstHeader = createHeader(pageMargins, pageSize, sectionData, headerId2, editor, currentPageNumber, isFirstHeader2);
         const pageBreak2 = createPageBreak({ editor, header: newFirstHeader, isFirstHeader: true });
         decorations.push(Decoration.widget(0, pageBreak2, { key: "stable-key" }));
       }
@@ -54586,15 +54647,15 @@ function createFinalPagePadding(bufferHeight) {
   div2.style.height = bufferHeight + "px";
   return { nodeHeight: bufferHeight, node: div2 };
 }
-function createHeader(pageMargins, pageSize, sectionData, headerId, editor, currentPageNumber) {
-  const headerDef = sectionData.headers?.[headerId];
+function createHeader(pageMargins, pageSize, sectionData, headerId, editor, currentPageNumber, isFirstHeader = false) {
+  const headerDef = sectionData?.headers?.[headerId];
   const minHeaderHeight = pageMargins.top * 96;
   const headerMargin = pageMargins.header * 96;
   const hasHeaderOffset = headerDef?.height > minHeaderHeight - headerMargin;
   const headerOffset = hasHeaderOffset ? headerMargin : 0;
   const headerHeight = Math.max(headerDef?.height || 0, minHeaderHeight) + headerOffset;
   const availableHeight = headerHeight - headerMargin;
-  const editorContainer = document.createElement("div");
+  let editorContainer = document.createElement("div");
   if (!headerId && !editor?.converter?.headerIds?.["default"]) {
     headerId = "rId" + generateDocxRandomId();
     editor.converter.headerIds["default"] = headerId;
@@ -54606,23 +54667,31 @@ function createHeader(pageMargins, pageSize, sectionData, headerId, editor, curr
     };
   }
   const data = editor.converter.headers[headerId];
-  const editorSection = createHeaderFooterEditor({
-    editor,
-    data,
-    editorContainer,
-    appendToBody: false,
-    sectionId: headerId,
-    type: "header",
-    availableHeight,
-    currentPageNumber
-  });
-  editor.converter.headerEditors.push({
-    id: headerId,
-    editor: editorSection
-  });
+  const pageNumberIndex = currentPageNumber - 1;
+  const editorKey = getHeaderFooterEditorKey({ pageNumber: pageNumberIndex, isHeader: true, isFirstHeader });
+  let editorSection = null;
+  const { headerFooterEditors } = editor.storage.pagination;
+  if (headerFooterEditors.has(editorKey) && editor.converter.headerEditors[pageNumberIndex]) {
+    const editorData = headerFooterEditors.get(editorKey);
+    editorSection = editorData.editor;
+    editorContainer = editorSection.element;
+  } else {
+    editorSection = createHeaderFooterEditor({
+      editor,
+      data,
+      editorContainer,
+      appendToBody: false,
+      sectionId: headerId,
+      type: "header",
+      availableHeight,
+      currentPageNumber
+    });
+    editor.converter.headerEditors.push({ id: headerId, editor: editorSection });
+    headerFooterEditors.set(editorKey, { editor: editorSection });
+    broadcastEditorEvents(editor, editorSection);
+  }
   editorSection.setEditable(false, false);
-  broadcastEditorEvents(editor, editorSection);
-  editorContainer.className = "pagination-section-header";
+  editorContainer.classList.add("pagination-section-header");
   editorContainer.style.paddingTop = headerMargin + "px";
   editorContainer.style.paddingLeft = pageMargins.left * 96 + "px";
   editorContainer.style.paddingRight = pageMargins.right * 96 + "px";
@@ -54635,12 +54704,12 @@ function createHeader(pageMargins, pageSize, sectionData, headerId, editor, curr
     headerHeight
   };
 }
-function createFooter(pageMargins, pageSize, sectionData, footerId, editor, currentPageNumber) {
-  const footerDef = sectionData.footers?.[footerId];
+function createFooter(pageMargins, pageSize, sectionData, footerId, editor, currentPageNumber, isLastFooter = false) {
+  const footerDef = sectionData?.footers?.[footerId];
   const minFooterHeight = pageMargins.bottom * 96;
   const footerPaddingFromEdge = pageMargins.footer * 96;
   const footerHeight = Math.max(footerDef?.height || 0, minFooterHeight - footerPaddingFromEdge);
-  const editorContainer = document.createElement("div");
+  let editorContainer = document.createElement("div");
   if (!footerId && !editor.converter.footerIds["default"]) {
     footerId = "rId" + generateDocxRandomId();
     editor.converter.footerIds["default"] = footerId;
@@ -54652,23 +54721,31 @@ function createFooter(pageMargins, pageSize, sectionData, footerId, editor, curr
     };
   }
   const data = editor.converter.footers[footerId];
-  const editorSection = createHeaderFooterEditor({
-    editor,
-    data,
-    editorContainer,
-    appendToBody: false,
-    sectionId: footerId,
-    type: "footer",
-    availableHeight: footerHeight,
-    currentPageNumber
-  });
-  editor.converter.footerEditors.push({
-    id: footerId,
-    editor: editorSection
-  });
+  const pageNumberIndex = currentPageNumber - 1;
+  const editorKey = getHeaderFooterEditorKey({ pageNumber: pageNumberIndex, isFooter: true, isLastFooter });
+  let editorSection = null;
+  const { headerFooterEditors } = editor.storage.pagination;
+  if (headerFooterEditors.has(editorKey) && editor.converter.footerEditors[pageNumberIndex]) {
+    const editorData = headerFooterEditors.get(editorKey);
+    editorSection = editorData.editor;
+    editorContainer = editorSection.element;
+  } else {
+    editorSection = createHeaderFooterEditor({
+      editor,
+      data,
+      editorContainer,
+      appendToBody: false,
+      sectionId: footerId,
+      type: "footer",
+      availableHeight: footerHeight,
+      currentPageNumber
+    });
+    editor.converter.footerEditors.push({ id: footerId, editor: editorSection });
+    headerFooterEditors.set(editorKey, { editor: editorSection });
+    broadcastEditorEvents(editor, editorSection);
+  }
   editorSection.setEditable(false, false);
-  broadcastEditorEvents(editor, editorSection);
-  editorContainer.className = "pagination-section-footer";
+  editorContainer.classList.add("pagination-section-footer");
   editorContainer.style.height = footerHeight + "px";
   editorContainer.style.marginBottom = footerPaddingFromEdge + "px";
   editorContainer.style.paddingLeft = pageMargins.left * 96 + "px";
@@ -54681,10 +54758,28 @@ function createFooter(pageMargins, pageSize, sectionData, footerId, editor, curr
     footerHeight: footerHeight + footerPaddingFromEdge
   };
 }
+const getHeaderFooterEditorKey = ({
+  pageNumber,
+  isHeader,
+  isFooter,
+  isFirstHeader = false,
+  isLastFooter = false
+}) => {
+  if (isFirstHeader) return `first-header-${pageNumber}`;
+  if (isLastFooter) return `last-footer-${pageNumber}`;
+  if (isHeader) return `header-${pageNumber}`;
+  if (isFooter) return `footer-${pageNumber}`;
+  return void 0;
+};
 const onHeaderFooterDblClick = (editor, currentFocusedSectionEditor) => {
   if (editor.options.documentMode !== "editing") return;
   editor.setEditable(false, false);
-  toggleHeaderFooterEditMode(editor, currentFocusedSectionEditor, true);
+  toggleHeaderFooterEditMode({
+    editor,
+    focusedSectionEditor: currentFocusedSectionEditor,
+    isEditMode: true,
+    documentMode: editor.options.documentMode
+  });
 };
 function createPageBreak({ editor, header, footer, footerBottom = null, isFirstHeader, isLastFooter, isInTable: isInTable2 = false }) {
   const { pageSize, pageMargins } = editor.converter.pageStyles;
@@ -64144,6 +64239,7 @@ const style$2 = cB("icon", `
  display: inline-block;
  position: relative;
  fill: currentColor;
+ transform: translateZ(0);
 `, [cM("color-transition", {
   transition: "color .3s var(--n-bezier)"
 }), cM("depth", {