@harbour-enterprises/superdoc 0.12.37-next.1 → 0.12.37-next.2

package/dist/chunks/{super-editor.es-DmBtUqwe.cjs → super-editor.es-3IGIxgjF.cjs}

@@ -1,6 +1,6 @@
 "use strict";
-const Y = require("yjs");
 const vue = require("./vue-HIY1g7dm.cjs");
+const Y = require("yjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -23410,7 +23410,7 @@ const _SuperConverter = class _SuperConverter2 {
       return;
     }
   }
-  static updateDocumentVersion(docx = this.convertedXml, version2 = "0.12.37-next.1") {
+  static updateDocumentVersion(docx = this.convertedXml, version2 = "0.12.37-next.2") {
     const customLocation = "docProps/custom.xml";
     if (!docx[customLocation]) {
       docx[customLocation] = generateCustomXml();
@@ -23877,7 +23877,7 @@ function storeSuperdocVersion(docx) {
 function generateCustomXml() {
   return DEFAULT_CUSTOM_XML;
 }
-function generateSuperdocVersion(pid = 2, version2 = "0.12.37-next.1") {
+function generateSuperdocVersion(pid = 2, version2 = "0.12.37-next.2") {
   return {
     type: "element",
     name: "property",
@@ -41254,7 +41254,7 @@ const _Editor = class _Editor2 extends EventEmitter$1 {
    * @returns {Object | void} Migration results
    */
   processCollaborationMigrations() {
-    console.debug("[checkVersionMigrations] Current editor version", "0.12.37-next.1");
+    console.debug("[checkVersionMigrations] Current editor version", "0.12.37-next.2");
     if (!this.options.ydoc) return;
     const metaMap = this.options.ydoc.getMap("meta");
     let docVersion = metaMap.get("version");
@@ -48637,10 +48637,7 @@ const ImagePositionPlugin = ({ editor }) => {
           if (shouldUpdate) {
             shouldUpdate = false;
             const decorations = getImagePositionDecorations(lastState, view3);
-            const updateTransaction = view3.state.tr.setMeta(
-              ImagePositionPluginKey,
-              { decorations }
-            );
+            const updateTransaction = view3.state.tr.setMeta(ImagePositionPluginKey, { decorations });
             view3.dispatch(updateTransaction);
           }
           if (pagination?.isReadyToInit) {
@@ -48772,16 +48769,16 @@ const Image = Node$1.create({
         default: {},
         renderDOM: ({ size: size2 }) => {
           let style2 = "";
-          let { width, height } = size2 ?? {};
+          const { width, height } = size2 ?? {};
           if (width) style2 += `width: ${width}px;`;
-          if (height) style2 += `height: auto;`;
+          if (height) style2 += "height: auto;";
           return { style: style2 };
         }
       },
       padding: {
         default: {},
         renderDOM: ({ padding, marginOffset }) => {
-          let { left: left2 = 0, top: top2 = 0, bottom: bottom2 = 0, right: right2 = 0 } = padding ?? {};
+          const { left: left2 = 0, top: top2 = 0, bottom: bottom2 = 0, right: right2 = 0 } = padding ?? {};
           let style2 = "";
           if (left2 && !marginOffset?.left) style2 += `margin-left: ${left2}px;`;
           if (top2 && !marginOffset?.top) style2 += `margin-top: ${top2}px;`;
@@ -48793,7 +48790,7 @@ const Image = Node$1.create({
       marginOffset: {
         default: {},
         renderDOM: ({ marginOffset }) => {
-          let { left: left2 = 0, top: top2 = 0 } = marginOffset ?? {};
+          const { left: left2 = 0, top: top2 = 0 } = marginOffset ?? {};
           let style2 = "";
           if (left2) style2 += `margin-left: ${left2}px;`;
           if (top2) style2 += `margin-top: ${top2}px;`;
@@ -48834,6 +48831,136 @@ const Image = Node$1.create({
     return [ImagePlaceholderPlugin(), ImagePositionPlugin({ editor: this.editor })];
   }
 });
+const ACCEPT_IMAGE_TYPES = [".jpg", ".jpeg", ".png", "image/jpeg", "image/png"];
+const getFileOpener = () => {
+  let fileInput = document.createElement("input");
+  fileInput.type = "file";
+  let acceptTypes = ACCEPT_IMAGE_TYPES;
+  fileInput.accept = acceptTypes.join(",");
+  const openFile = () => {
+    return new Promise((resolve, reject) => {
+      fileInput.onchange = async () => {
+        const files = fileInput.files;
+        if (!files) return resolve(null);
+        const file = files.item(0);
+        if (!file) return resolve(null);
+        return resolve({ file });
+      };
+      fileInput.oncancel = () => resolve(null);
+      fileInput.onerror = reject;
+      fileInput.click();
+    });
+  };
+  return openFile;
+};
+const handleImageUpload = (file) => {
+  return new Promise((resolve, reject) => {
+    let reader = new FileReader();
+    reader.onload = (event) => resolve(event.target.result);
+    reader.onerror = reject;
+    setTimeout(() => reader.readAsDataURL(file), 250);
+  });
+};
+const processUploadedImage = (fileData, editor) => {
+  return new Promise((resolve, reject) => {
+    const img = new window.Image();
+    img.onload = () => {
+      const canvas = document.createElement("canvas");
+      const { width, height } = getAllowedImageDimensions(img.width, img.height, editor);
+      canvas.width = width;
+      canvas.height = height;
+      const ctx2 = canvas.getContext("2d");
+      ctx2.drawImage(img, 0, 0, width, height);
+      if (typeof fileData === "string") {
+        const resizedBase64 = canvas.toDataURL();
+        resolve(resizedBase64);
+      } else {
+        canvas.toBlob((blob) => {
+          const updatedFile = new File([blob], fileData.name, {
+            type: fileData.type,
+            lastModified: Date.now()
+          });
+          resolve({ file: updatedFile, width, height });
+        });
+      }
+    };
+    img.onerror = (error) => reject(error);
+    img.src = typeof fileData === "string" ? fileData : URL.createObjectURL(fileData);
+  });
+};
+const getAllowedImageDimensions = (width, height, editor) => {
+  const { width: maxWidth, height: maxHeight } = editor.getMaxContentSize();
+  if (!maxWidth || !maxHeight) return { width, height };
+  let adjustedWidth = width;
+  let adjustedHeight = height;
+  const aspectRatio = width / height;
+  if (height > maxHeight) {
+    adjustedHeight = maxHeight;
+    adjustedWidth = Math.round(maxHeight * aspectRatio);
+  }
+  if (adjustedWidth > maxWidth) {
+    adjustedWidth = maxWidth;
+    adjustedHeight = Math.round(maxWidth / aspectRatio);
+  }
+  return { width: adjustedWidth, height: adjustedHeight };
+};
+const startImageUpload = async ({ editor, view, file }) => {
+  let imageUploadHandler = typeof editor.options.handleImageUpload === "function" ? editor.options.handleImageUpload : handleImageUpload;
+  let fileSizeMb = (file.size / (1024 * 1024)).toFixed(4);
+  if (fileSizeMb > 5) {
+    window.alert("Image size must be less than 5MB");
+    return;
+  }
+  let width;
+  let height;
+  try {
+    const processedImageResult = await processUploadedImage(file, editor);
+    width = processedImageResult.width;
+    height = processedImageResult.height;
+    file = processedImageResult.file;
+  } catch (err) {
+    console.warn("Error processing image:", err);
+    return;
+  }
+  let id = {};
+  let { tr, schema } = view.state;
+  if (!tr.selection.empty) {
+    tr.deleteSelection();
+  }
+  let imageMeta = {
+    type: "add",
+    pos: tr.selection.from,
+    id
+  };
+  tr.setMeta(ImagePlaceholderPluginKey, imageMeta);
+  view.dispatch(tr);
+  imageUploadHandler(file).then(
+    (url) => {
+      let fileName = file.name.replace(" ", "_");
+      let placeholderPos = findPlaceholder(view.state, id);
+      if (placeholderPos == null) {
+        return;
+      }
+      let removeMeta = { type: "remove", id };
+      let mediaPath = `word/media/${fileName}`;
+      let imageNode = schema.nodes.image.create({
+        src: mediaPath,
+        size: { width, height }
+      });
+      editor.storage.image.media = Object.assign(editor.storage.image.media, { [mediaPath]: url });
+      if (editor.options.ydoc) {
+        editor.commands.addImageToCollaboration({ mediaPath, fileData: url });
+      }
+      view.dispatch(
+        view.state.tr.replaceWith(placeholderPos, placeholderPos, imageNode).setMeta(ImagePlaceholderPluginKey, removeMeta)
+      );
+    },
+    () => {
+      let removeMeta = { type: "remove", id };
+      view.dispatch(tr.setMeta(ImagePlaceholderPluginKey, removeMeta));
+    }
+  );
+};
 const BookmarkStart = Node$1.create({
   name: "bookmarkStart",
   group: "inline",
@@ -55002,6 +55129,239 @@ const Search = Extension.create({
     };
   }
 });
+const NodeResizerKey = new PluginKey("node-resizer");
+const nodeResizer = (nodeNames = ["image"]) => {
+  let resizeState = {
+    dragging: false,
+    startX: 0,
+    startY: 0,
+    startWidth: 0,
+    handle: null,
+    pos: null,
+    resizableElement: null,
+    aspectRatio: 1
+  };
+  let resizeContainer = null;
+  let editorView = null;
+  let globalClickHandler = null;
+  let globalMousedownHandler = null;
+  return new Plugin({
+    key: NodeResizerKey,
+    state: {
+      init() {
+        return DecorationSet.empty;
+      },
+      apply(tr, oldState, _, newState) {
+        if (tr.getMeta(NodeResizerKey)) {
+          return oldState;
+        }
+        const decorations = [];
+        const { selection } = newState;
+        if (nodeNames.includes(selection.node?.type.name)) {
+          decorations.push(
+            Decoration.node(selection.from, selection.to, {
+              nodeName: "span",
+              class: "sd-editor-resizable-wrapper",
+              "data-pos": selection.from
+            })
+          );
+        }
+        return DecorationSet.create(newState.doc, decorations);
+      }
+    },
+    props: {
+      decorations(state2) {
+        return this.getState(state2);
+      }
+    },
+    view(view) {
+      editorView = view;
+      globalClickHandler = (event) => {
+        if (!event.target.closest(".sd-editor-resizable-wrapper") && !event.target.closest(".sd-editor-resize-container")) {
+          hideResizeHandles();
+        }
+      };
+      document.addEventListener("click", globalClickHandler);
+      globalMousedownHandler = (event) => {
+        if (event.target.closest(".sd-editor-resize-handle")) {
+          event.preventDefault();
+          event.stopPropagation();
+          startResize(editorView, event, event.target);
+          return true;
+        }
+      };
+      document.addEventListener("mousedown", globalMousedownHandler);
+      return {
+        update(view2, prevState) {
+          const { selection } = view2.state;
+          const prevSelection = prevState.selection;
+          if (selection.from !== prevSelection.from || selection.to !== prevSelection.to) {
+            setTimeout(() => {
+              const selectedResizableWrapper = document.querySelector(".sd-editor-resizable-wrapper");
+              if (selectedResizableWrapper) {
+                showResizeHandles(view2, selectedResizableWrapper);
+              } else {
+                hideResizeHandles();
+              }
+            }, 10);
+          }
+        },
+        destroy() {
+          hideResizeHandles();
+          cleanupEventListeners();
+          if (globalClickHandler) {
+            document.removeEventListener("click", globalClickHandler);
+            globalClickHandler = null;
+          }
+          if (globalMousedownHandler) {
+            document.removeEventListener("mousedown", globalMousedownHandler);
+            globalMousedownHandler = null;
+          }
+          editorView = null;
+        }
+      };
+    }
+  });
+  function showResizeHandles(view, wrapper) {
+    hideResizeHandles();
+    const pos = Number.parseInt(wrapper.getAttribute("data-pos"), 10);
+    const node2 = view.state.doc.nodeAt(pos);
+    if (!nodeNames.includes(node2?.type.name)) return;
+    resizeContainer = document.createElement("div");
+    resizeContainer.className = "sd-editor-resize-container";
+    resizeContainer.style.position = "absolute";
+    resizeContainer.style.pointerEvents = "none";
+    resizeContainer.style.zIndex = "1000";
+    const handles = ["nw", "ne", "sw", "se"];
+    for (const handle of handles) {
+      const handleEl = document.createElement("div");
+      handleEl.className = `sd-editor-resize-handle sd-editor-resize-handle-${handle}`;
+      handleEl.setAttribute("data-handle", handle);
+      handleEl.setAttribute("data-pos", pos);
+      handleEl.style.pointerEvents = "auto";
+      resizeContainer.appendChild(handleEl);
+    }
+    document.body.appendChild(resizeContainer);
+    updateHandlePositions(wrapper.firstElementChild);
+  }
+  function hideResizeHandles() {
+    if (resizeContainer?.parentNode) {
+      resizeContainer.parentNode.removeChild(resizeContainer);
+      resizeContainer = null;
+    }
+  }
+  function updateHandlePositions(resizableElement) {
+    if (!resizeContainer || !resizableElement) return;
+    const rect = resizableElement.getBoundingClientRect();
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+    resizeContainer.style.left = `${rect.left + scrollLeft}px`;
+    resizeContainer.style.top = `${rect.top + scrollTop}px`;
+    resizeContainer.style.width = `${rect.width}px`;
+    resizeContainer.style.height = `${rect.height}px`;
+  }
+  function startResize(view, event, handleElement) {
+    if (!view.hasFocus()) return;
+    const handle = handleElement.getAttribute("data-handle");
+    const pos = Number.parseInt(handleElement.getAttribute("data-pos"), 10);
+    if (view.state.selection.from !== pos || !nodeNames.includes(view.state.selection.node?.type.name)) return;
+    const resizableElement = view.nodeDOM(pos);
+    if (!resizableElement) return;
+    const rect = resizableElement.getBoundingClientRect();
+    resizeState = {
+      dragging: true,
+      startX: event.clientX,
+      startY: event.clientY,
+      startWidth: rect.width,
+      startHeight: rect.height,
+      handle,
+      pos,
+      resizableElement,
+      aspectRatio: rect.width / rect.height
+    };
+    document.addEventListener("mousemove", handleMouseMove2);
+    document.addEventListener("mouseup", handleMouseUp);
+    document.body.style.cursor = getResizeCursor(handle);
+    document.body.style.userSelect = "none";
+  }
+  function handleMouseMove2(event) {
+    if (!resizeState.dragging) return;
+    event.preventDefault();
+    event.stopPropagation();
+    let deltaX = event.clientX - resizeState.startX;
+    event.clientY - resizeState.startY;
+    if (resizeState.handle.includes("w")) deltaX = -deltaX;
+    if (resizeState.handle.includes("n")) ;
+    const newWidth = Math.max(20, resizeState.startWidth + deltaX);
+    if (resizeState.resizableElement) {
+      resizeState.resizableElement.style.width = `${newWidth}px`;
+      resizeState.resizableElement.style.height = "auto";
+      updateHandlePositions(resizeState.resizableElement);
+    }
+  }
+  function handleMouseUp(event) {
+    if (!resizeState.dragging) return;
+    cleanupEventListeners();
+    let deltaX = event.clientX - resizeState.startX;
+    event.clientY - resizeState.startY;
+    if (resizeState.handle.includes("w")) deltaX = -deltaX;
+    if (resizeState.handle.includes("n")) ;
+    const newWidth = Math.max(20, resizeState.startWidth + deltaX);
+    const newHeight = newWidth / resizeState.aspectRatio;
+    if (editorView && resizeState.pos < editorView.state.doc.content.size) {
+      const tr = editorView.state.tr;
+      const node2 = tr.doc.nodeAt(resizeState.pos);
+      if (nodeNames.includes(node2?.type.name)) {
+        const attrs = {
+          ...node2.attrs,
+          size: {
+            ...node2.attrs.size,
+            width: Math.round(newWidth),
+            height: Math.round(newHeight)
+          }
+        };
+        tr.setNodeMarkup(resizeState.pos, null, attrs);
+        tr.setMeta(NodeResizerKey, { action: "resize" });
+        editorView.dispatch(tr);
+      }
+    }
+    resizeState = {
+      dragging: false,
+      startX: 0,
+      startY: 0,
+      startWidth: 0,
+      startHeight: 0,
+      handle: null,
+      pos: null,
+      resizableElement: null,
+      aspectRatio: 1
+    };
+  }
+  function cleanupEventListeners() {
+    document.removeEventListener("mousemove", handleMouseMove2);
+    document.removeEventListener("mouseup", handleMouseUp);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }
+  function getResizeCursor(handle) {
+    switch (handle) {
+      case "nw":
+      case "se":
+        return "nwse-resize";
+      case "ne":
+      case "sw":
+        return "nesw-resize";
+      default:
+        return "default";
+    }
+  }
+};
+const NodeResizer = Extension.create({
+  name: "nodeResizer",
+  addPmPlugins() {
+    return [nodeResizer(["image"])];
+  }
+});
 const getRichTextExtensions = () => {
   return [
     Bold,
@@ -55039,7 +55399,8 @@ const getRichTextExtensions = () => {
     TrackDelete,
     TrackFormat,
     AiPlugin,
-    Image
+    Image,
+    NodeResizer
   ];
 };
 const getStarterExtensions = () => {
@@ -55103,7 +55464,8 @@ const getStarterExtensions = () => {
     ShapeTextbox,
     ContentBlock,
     Search,
-    StructuredContent
+    StructuredContent,
+    NodeResizer
   ];
 };
 const sanitizeNumber = (value, defaultNumber) => {
@@ -67813,140 +68175,6 @@ const makeDefaultItems = ({
     overflowItems: overflowItems.filter((item) => item.type !== "separator")
   };
 };
-const ACCEPT_IMAGE_TYPES = [".jpg", ".jpeg", ".png", "image/jpeg", "image/png"];
-const getFileOpener = () => {
-  let fileInput = document.createElement("input");
-  fileInput.type = "file";
-  let acceptTypes = ACCEPT_IMAGE_TYPES;
-  fileInput.accept = acceptTypes.join(",");
-  const openFile = () => {
-    return new Promise((resolve, reject) => {
-      fileInput.onchange = async () => {
-        const files = fileInput.files;
-        if (!files) return resolve(null);
-        const file = files.item(0);
-        if (!file) return resolve(null);
-        return resolve({ file });
-      };
-      fileInput.oncancel = () => resolve(null);
-      fileInput.onerror = reject;
-      fileInput.click();
-    });
-  };
-  return openFile;
-};
-const handleImageUpload = (file) => {
-  return new Promise((resolve, reject) => {
-    let reader = new FileReader();
-    reader.onload = (event) => resolve(event.target.result);
-    reader.onerror = reject;
-    setTimeout(() => reader.readAsDataURL(file), 250);
-  });
-};
-const processUploadedImage = (fileData, editor) => {
-  return new Promise((resolve, reject) => {
-    const img = new window.Image();
-    img.onload = () => {
-      const canvas = document.createElement("canvas");
-      const { width, height } = getAllowedImageDimensions(
-        img.width,
-        img.height,
-        editor
-      );
-      canvas.width = width;
-      canvas.height = height;
-      const ctx2 = canvas.getContext("2d");
-      ctx2.drawImage(img, 0, 0, width, height);
-      if (typeof fileData === "string") {
-        const resizedBase64 = canvas.toDataURL();
-        resolve(resizedBase64);
-      } else {
-        canvas.toBlob((blob) => {
-          const updatedFile = new File([blob], fileData.name, {
-            type: fileData.type,
-            lastModified: Date.now()
-          });
-          resolve({ file: updatedFile, width, height });
-        });
-      }
-    };
-    img.onerror = (error) => reject(error);
-    img.src = typeof fileData === "string" ? fileData : URL.createObjectURL(fileData);
-  });
-};
-const getAllowedImageDimensions = (width, height, editor) => {
-  const { width: maxWidth, height: maxHeight } = editor.getMaxContentSize();
-  if (!maxWidth || !maxHeight) return { width, height };
-  let adjustedWidth = width;
-  let adjustedHeight = height;
-  const aspectRatio = width / height;
-  if (height > maxHeight) {
-    adjustedHeight = maxHeight;
-    adjustedWidth = Math.round(maxHeight * aspectRatio);
-  }
-  if (adjustedWidth > maxWidth) {
-    adjustedWidth = maxWidth;
-    adjustedHeight = Math.round(maxWidth / aspectRatio);
-  }
-  return { width: adjustedWidth, height: adjustedHeight };
-};
-const startImageUpload = async ({ editor, view, file }) => {
-  let imageUploadHandler = typeof editor.options.handleImageUpload === "function" ? editor.options.handleImageUpload : handleImageUpload;
-  let fileSizeMb = (file.size / (1024 * 1024)).toFixed(4);
-  if (fileSizeMb > 5) {
-    window.alert("Image size must be less than 5MB");
-    return;
-  }
-  let width;
-  let height;
-  try {
-    const processedImageResult = await processUploadedImage(file, editor);
-    width = processedImageResult.width;
-    height = processedImageResult.height;
-    file = processedImageResult.file;
-  } catch (err) {
-    console.warn("Error processing image:", err);
-    return;
-  }
-  let id = {};
-  let { tr, schema } = view.state;
-  if (!tr.selection.empty) {
-    tr.deleteSelection();
-  }
-  let imageMeta = {
-    type: "add",
-    pos: tr.selection.from,
-    id
-  };
-  tr.setMeta(ImagePlaceholderPluginKey, imageMeta);
-  view.dispatch(tr);
-  imageUploadHandler(file).then(
-    (url) => {
-      let fileName = file.name.replace(" ", "_");
-      let placeholderPos = findPlaceholder(view.state, id);
-      if (placeholderPos == null) {
-        return;
-      }
-      let removeMeta = { type: "remove", id };
-      let mediaPath = `word/media/${fileName}`;
-      let imageNode = schema.nodes.image.create({
-        src: mediaPath,
-        size: { width, height }
-      });
-      editor.storage.image.media = Object.assign(editor.storage.image.media, { [mediaPath]: url });
-      if (editor.options.ydoc) {
-        editor.commands.addImageToCollaboration({ mediaPath, fileData: url });
-      }
-      view.dispatch(
-        view.state.tr.replaceWith(placeholderPos, placeholderPos, imageNode).setMeta(ImagePlaceholderPluginKey, removeMeta)
-      );
-    },
-    () => {
-      let removeMeta = { type: "remove", id };
-      view.dispatch(tr.setMeta(ImagePlaceholderPluginKey, removeMeta));
-    }
-  );
-};
 const toolbarTexts = {
   bold: "Bold",
   fontFamily: "Font",