Add img resize

example/package-lock.json

@@ -18,8 +18,7 @@
       }
     },
     "..": {
-      "name": "react-ag-qeditor",
-      "version": "1.0.23",
+      "version": "1.0.27",
       "license": "MIT",
       "dependencies": {
         "@tiptap/core": "^2.0.0-beta.176",

src/QEditor.jsx

@@ -37,6 +37,8 @@ import Audio from './extensions/Audio'
 import IframeModal from './modals/IframeModal'
 import IframeCustomModal from './modals/IframeCustomModal'
 import { isMobile } from 'react-device-detect'
+import  Resizable from './extensions/Resizing'
+import { isChangedAlignment } from './extensions/Resizing'
 
 const initialBubbleItems = [
   'bold',
@@ -294,6 +296,8 @@ const QEditor = ({
       onClick: () => {
         editor.commands.setTextAlign('center')
         editor.chain().focus()
+        
+        isChangedAlignment.set(true)
       }
     },
     alignRight: {
@@ -401,6 +405,17 @@ const QEditor = ({
       Image.configure({
         inline: true
       }),
+      Resizable.configure({
+        types: ["image"], // resizable type
+        handlerStyle: { // handler point style
+          width: "8px",
+          height: "8px",
+          background: "#07c160",
+        },
+        layerStyle: { // layer mask style
+          border: "2px solid #07c160",
+        },
+      }),
       // Link.configure({
       //     autolink: true,
       //     linkOnPaste: true,

src/extensions/Resizing.js

+import { Extension } from "@tiptap/core";
+
+export let isChangedAlignment = {
+  current: null,
+  get() {return this.current},
+  set(value) {this.current = value}
+};
+
+// loads with editor
+
+export default Extension.create({
+  name: "Resizable",
+  addOptions() {
+    return {
+      types: ["image", "video"],
+      handlerStyle: {
+        width: "8px",
+        height: "8px",
+        background: "#07c160",
+      },
+      layerStyle: {
+        border: "2px solid #07c160",
+      },
+    };
+  },
+  
+  addStorage() {
+    return {
+      resizeElement: null,
+    };
+  },
+
+  onCreate({ editor }) {
+    const element = editor.options.element;
+    element.style.position = "relative";
+    // resizeLayer
+    
+    const resizeLayer = document.createElement("div");
+    resizeLayer.className = "resize-layer";
+    resizeLayer.style.display = "none";
+    resizeLayer.style.position = "absolute";
+
+    
+
+    Object.entries(this.options.layerStyle).forEach(([key, value]) => {
+      resizeLayer.style[key] = value;
+    });
+    resizeLayer.addEventListener("mousedown", (e) => {
+      const resizeElement = this.storage.resizeElement;
+
+      if (!resizeElement) return;
+      if (/bottom/.test(e.target.className)) {
+        let startX = e.screenX;
+        const dir = e.target.classList.contains("bottom-left") ? -1 : 1;
+        const mousemoveHandle = (e) => {
+          e.preventDefault();
+          const width = resizeElement.clientWidth;
+          const distanceX = e.screenX - startX;
+          const total = width + dir * distanceX;
+          // resizeElement
+          resizeElement.style.width = total + "px";
+          const clientWidth = resizeElement.clientWidth;
+          const clientHeight = resizeElement.clientHeight;
+          resizeElement.style.width = clientWidth + "px"; // max width
+
+          
+
+          // resizeLayer
+          const pos = getRelativePosition(resizeElement, element);
+          resizeLayer.style.top = pos.top + "px";
+          resizeLayer.style.left = pos.left + "px";
+          resizeLayer.style.width = clientWidth + "px";
+          resizeLayer.style.height = clientHeight + "px";
+
+          startX = e.screenX;
+        };
+        document.addEventListener("mousemove", mousemoveHandle);
+        document.addEventListener("mouseup", () =>{
+          document.removeEventListener("mousemove", mousemoveHandle)
+      });
+      }
+    });
+
+    const handlers = ["top-left", "top-right", "bottom-left", "bottom-right"];
+    const fragment = document.createDocumentFragment();
+    for (let name of handlers) {
+      const item = document.createElement("div");
+      item.className = `handler ${name}`;
+      item.style.position = "absolute";
+      Object.entries(this.options.handlerStyle).forEach(([key, value]) => {
+        item.style[key] = value;
+      });
+      const dir = name.split("-");
+      item.style[dir[0]] = parseInt(item.style.width) / -2 + "px";
+      item.style[dir[1]] = parseInt(item.style.height) / -2 + "px";
+      if (name === "bottom-left") item.style.cursor = "sw-resize";
+      if (name === "bottom-right") item.style.cursor = "se-resize";
+      fragment.appendChild(item);
+    }
+    resizeLayer.appendChild(fragment);
+    editor.resizeLayer = resizeLayer;
+    element.appendChild(resizeLayer);
+    
+
+    
+  },
+  
+  onSelectionUpdate({ editor, transaction }) {
+    
+    const element = editor.options.element;
+    const node = transaction.curSelection.node;
+    const resizeLayer = editor.resizeLayer;
+    console.log("res layer",resizeLayer)
+    if (node && this.options.types.includes(node.type.name)) {
+      // resizeLayer位置大小
+      resizeLayer.style.display = "block";
+      let dom = editor.view.domAtPos(transaction.curSelection.from).node;
+
+      if (dom.getAttribute("src") !== node.attrs.src) {
+        dom = dom.querySelector(`[src="${node.attrs.src}"]`);
+      }
+      this.storage.resizeElement = dom;
+     
+    const pos = getRelativePosition(dom, element);
+        console.log("dom after src", dom)
+        console.log(pos)
+        resizeLayer.style.top = pos.top + "px";
+        resizeLayer.style.left = pos.left + "px";
+        resizeLayer.style.width = dom.width + "px";
+        resizeLayer.style.height = dom.height + "px";
+
+        
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        const currentPosition = entry.target.getBoundingClientRect();
+        if (currentPosition.x === 0) {
+          console.log("changed pos");
+          
+          resizeLayer.style.display = "none";
+        }
+        console.log(entry.target.parentNode)
+        console.log("target: ", entry.target)
+        console.log("bounding rect: ", currentPosition)
+      }
+    })
+    resizeObserver.observe(dom);
+  } else {
+      console.log("no node");
+      resizeLayer.style.display = "none";
+    }
+  },
+});
+
+
+
+// 计算相对位置
+function getRelativePosition(element, ancestor) {
+  const elementRect = element.getBoundingClientRect();
+  const ancestorRect = ancestor.getBoundingClientRect();
+  const relativePosition = {
+    top: parseInt(elementRect.top - ancestorRect.top + ancestor.scrollTop),
+    left: parseInt(elementRect.left - ancestorRect.left + ancestor.scrollLeft),
+  };
+  return relativePosition;
+}
\ No newline at end of file