prosemirror-resizable-view - npm Package Compare versions

Comparing version 2.0.14 to 3.0.0-beta.0

dist/prosemirror-resizable-view.d.ts

@@ -1,77 +0,6 @@
-import { Node } from 'prosemirror-model';
-import { NodeView, EditorView } from 'prosemirror-view';
-
-declare enum ResizableHandleType {
-    Right = 0,
-    Left = 1,
-    Bottom = 2,
-    BottomRight = 3,
-    BottomLeft = 4
-}
-declare class ResizableHandle {
-    #private;
-    dom: HTMLDivElement;
-    type: ResizableHandleType;
-    constructor(type: ResizableHandleType);
-    createHandle(type: ResizableHandleType): void;
-    setHandleVisibility(visible: boolean): void;
-    dataSetDragging(isDraging: boolean): void;
-}
-
-declare enum ResizableRatioType {
-    Fixed = 0,
-    Flexible = 1
-}
-interface OptionShape {
-    [key: string]: any;
-}
-/**
- * ResizableNodeView serves as a base NodeView for resizable element,
- * and cannot be directly instantiated.
- * With this base NodeView, you can resize the DOM element by dragging the handle over the image.
- *
- * @param node - the node which uses this nodeView. Must have `width` and `height` in the attrs.
- * @param view - the editor view used by this nodeView.
- * @param getPos - a utility method to get the absolute cursor position of the node.
- * @param aspectRatio? - to determine which type of aspect ratio should be used.
- * @param options? - extra options to pass to `createElement` method.
- * @param initialSize? - initial view size.
- */
-declare abstract class ResizableNodeView implements NodeView {
-    #private;
-    dom: HTMLElement;
-    readonly aspectRatio: ResizableRatioType;
-    constructor({ node, view, getPos, aspectRatio, options, initialSize, }: {
-        node: Node;
-        view: EditorView;
-        getPos: () => number;
-        aspectRatio?: ResizableRatioType;
-        options?: OptionShape;
-        initialSize?: {
-            width: number;
-            height: number;
-        };
-    });
-    /**
-     * `createElement` - a method to produce the element DOM element for this prosemirror node.
-     * The subclasses have to implement this abstract method.
-     */
-    abstract createElement(props: {
-        node: Node;
-        view: EditorView;
-        getPos: () => number;
-        options?: OptionShape;
-    }): HTMLElement;
-    createWrapper(node: Node, initialSize?: {
-        width: number;
-        height: number;
-    }): HTMLElement;
-    startResizing(e: MouseEvent, view: EditorView, getPos: () => number, handle: ResizableHandle): void;
-    /**
-     * `update` will be called by Prosemirror, when the view is updating itself.
-     */
-    update(node: Node): boolean;
-    destroy(): void;
-}
-
-export { ResizableNodeView, ResizableRatioType };
+export { leftCornerHandle } from './_tsup-dts-rollup';
+export { rightCornerHandle } from './_tsup-dts-rollup';
+export { ResizableRatioType } from './_tsup-dts-rollup';
+export { ResizableNodeView } from './_tsup-dts-rollup';
+export { ResizableHandleType } from './_tsup-dts-rollup';
+export { ResizableHandle } from './_tsup-dts-rollup';

dist/prosemirror-resizable-view.js

@@ -1,28 +0,9 @@
-var __accessCheck = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd = (obj, member, value) => {
-  if (member.has(obj))
-    throw 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);
-  return value;
-};
-
-// packages/prosemirror-resizable-view/src/prosemirror-resizable-view.ts
+// src/prosemirror-resizable-view.ts
 import { throttle } from "@remirror/core-helpers";
 import { setStyle as setStyle2 } from "@remirror/core-utils";
 
-// packages/prosemirror-resizable-view/src/resizable-view-handle.ts
+// src/resizable-view-handle.ts
 import { setStyle } from "@remirror/core-utils";
 
-// packages/prosemirror-resizable-view/src/corner-handle.ts
+// src/corner-handle.ts
 var leftCorner = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" width="22" height="22" fill="rgba(0, 0, 0, 0.65)" stroke="rgba(255, 255, 255, 0.5)" transform="rotate(90)" xmlns:v="https://vecta.io/nano"><path fill-rule="evenodd" d="M14 0a2 2 0 0 0-2 2v10H2a2 2 0 1 0 0 4h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/></svg>`;
@@ -33,11 +14,12 @@ var rightCorner = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" width="22" height="22" fill="rgba(0, 0, 0, 0.65)" stroke="rgba(255, 255, 255, 0.5)" transform="matrix(0 1 1 0 0 0)" xmlns:v="https://vecta.io/nano"><path fill-rule="evenodd" d="M14 0a2 2 0 0 0-2 2v10H2a2 2 0 1 0 0 4h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/></svg>`;
 
-// packages/prosemirror-resizable-view/src/resizable-view-handle.ts
-var _handle;
+// src/resizable-view-handle.ts
 var ResizableHandle = class {
+  dom;
+  #handle;
+  type;
   constructor(type) {
-    __privateAdd(this, _handle, void 0);
     const wrapper = document.createElement("div");
     const handle = document.createElement("div");
     this.dom = wrapper;
-    __privateSet(this, _handle, handle);
+    this.#handle = handle;
     this.type = type;
@@ -55,7 +37,7 @@ this.createHandle(type);
     });
-    setStyle(__privateGet(this, _handle), {
+    setStyle(this.#handle, {
       opacity: "0",
       transition: "opacity 300ms ease-in 0s"
     });
-    __privateGet(this, _handle).dataset.dragging = "";
+    this.#handle.dataset.dragging = "";
     switch (type) {
@@ -70,3 +52,3 @@ case 0 /* Right */:
         });
-        setStyle(__privateGet(this, _handle), {
+        setStyle(this.#handle, {
           width: " 4px",
@@ -89,3 +71,3 @@ height: "36px",
         });
-        setStyle(__privateGet(this, _handle), {
+        setStyle(this.#handle, {
           width: " 4px",
@@ -107,3 +89,3 @@ height: "36px",
         });
-        setStyle(__privateGet(this, _handle), {
+        setStyle(this.#handle, {
           width: " 42px",
@@ -127,3 +109,3 @@ height: "4px",
         });
-        setStyle(__privateGet(this, _handle), {
+        setStyle(this.#handle, {
           height: "22px",
@@ -144,3 +126,3 @@ width: "22px",
         });
-        setStyle(__privateGet(this, _handle), {
+        setStyle(this.#handle, {
           height: "22px",
@@ -153,17 +135,16 @@ width: "22px",
     }
-    this.dom.append(__privateGet(this, _handle));
+    this.dom.append(this.#handle);
   }
   setHandleVisibility(visible) {
-    const isVisible = visible || !!__privateGet(this, _handle).dataset.dragging;
-    __privateGet(this, _handle).style.opacity = isVisible ? "1" : "0";
+    const isVisible = visible || !!this.#handle.dataset.dragging;
+    this.#handle.style.opacity = isVisible ? "1" : "0";
   }
   dataSetDragging(isDraging) {
-    __privateGet(this, _handle).dataset.dragging = isDraging ? "true" : "";
+    this.#handle.dataset.dragging = isDraging ? "true" : "";
   }
 };
-_handle = new WeakMap();
 
-// packages/prosemirror-resizable-view/src/prosemirror-resizable-view.ts
+// src/prosemirror-resizable-view.ts
 var MIN_WIDTH = 50;
-var ResizableRatioType = /* @__PURE__ */ ((ResizableRatioType2) => {
+var ResizableRatioType = /* @__PURE__ */(ResizableRatioType2 => {
   ResizableRatioType2[ResizableRatioType2["Fixed"] = 0] = "Fixed";
@@ -173,4 +154,12 @@ ResizableRatioType2[ResizableRatioType2["Flexible"] = 1] = "Flexible";
 })(ResizableRatioType || {});
-var _element, _node, _destroyList, _width, _height;
 var ResizableNodeView = class {
+  dom;
+  #element;
+  #node;
+  #destroyList = [];
+  aspectRatio;
+  // cache the current element's size so that we can compare with new node's
+  // size when `update` method is called.
+  #width = void 0;
+  #height = void 0;
   constructor({
@@ -184,43 +173,32 @@ node,
   }) {
-    __privateAdd(this, _element, void 0);
-    __privateAdd(this, _node, void 0);
-    __privateAdd(this, _destroyList, []);
-    // cache the current element's size so that we can compare with new node's
-    // size when `update` method is called.
-    __privateAdd(this, _width, void 0);
-    __privateAdd(this, _height, void 0);
     const outer = this.createWrapper(node, initialSize);
-    const element = this.createElement({ node, view, getPos, options });
-    const types = aspectRatio === 1 /* Flexible */ ? [
-      0 /* Right */,
-      1 /* Left */,
-      2 /* Bottom */,
-      3 /* BottomRight */,
-      4 /* BottomLeft */
-    ] : [0 /* Right */, 1 /* Left */];
-    const handles = types.map((type) => new ResizableHandle(type));
+    const element = this.createElement({
+      node,
+      view,
+      getPos,
+      options
+    });
+    const types = aspectRatio === 1 /* Flexible */ ? [0 /* Right */, 1 /* Left */, 2 /* Bottom */, 3 /* BottomRight */, 4 /* BottomLeft */] : [0 /* Right */, 1 /* Left */];
+    const handles = types.map(type => new ResizableHandle(type));
     for (const handle of handles) {
-      const onMouseDown = (e) => {
+      const onMouseDown = e => {
         this.startResizing(e, view, getPos, handle);
       };
       handle.dom.addEventListener("mousedown", onMouseDown);
-      __privateGet(this, _destroyList).push(() => handle.dom.removeEventListener("mousedown", onMouseDown));
+      this.#destroyList.push(() => handle.dom.removeEventListener("mousedown", onMouseDown));
       outer.append(handle.dom);
     }
     const setHandleVisibe = () => {
-      handles.forEach((handle) => handle.setHandleVisibility(true));
+      handles.forEach(handle => handle.setHandleVisibility(true));
     };
     const setHandleInvisible = () => {
-      handles.forEach((handle) => handle.setHandleVisibility(false));
+      handles.forEach(handle => handle.setHandleVisibility(false));
     };
     outer.addEventListener("mouseover", setHandleVisibe);
     outer.addEventListener("mouseout", setHandleInvisible);
-    __privateGet(this, _destroyList).push(
-      () => outer.removeEventListener("mouseover", setHandleVisibe),
-      () => outer.removeEventListener("mouseout", setHandleInvisible)
-    );
+    this.#destroyList.push(() => outer.removeEventListener("mouseover", setHandleVisibe), () => outer.removeEventListener("mouseout", setHandleInvisible));
     outer.append(element);
     this.dom = outer;
-    __privateSet(this, _node, node);
-    __privateSet(this, _element, element);
+    this.#node = node;
+    this.#element = element;
     this.aspectRatio = aspectRatio;
@@ -259,11 +237,10 @@ }
   startResizing(e, view, getPos, handle) {
-    var _a, _b;
     e.preventDefault();
     handle.dataSetDragging(true);
-    __privateGet(this, _element).style.pointerEvents = "none";
+    this.#element.style.pointerEvents = "none";
     const startX = e.pageX;
     const startY = e.pageY;
-    const startWidth = ((_a = __privateGet(this, _element)) == null ? void 0 : _a.getBoundingClientRect().width) || 0;
-    const startHeight = ((_b = __privateGet(this, _element)) == null ? void 0 : _b.getBoundingClientRect().height) || 0;
-    const onMouseMove = throttle(100, false, (e2) => {
+    const startWidth = this.#element?.getBoundingClientRect().width || 0;
+    const startHeight = this.#element?.getBoundingClientRect().height || 0;
+    const onMouseMove = throttle(100, false, e2 => {
       const currentX = e2.pageX;
@@ -322,17 +299,17 @@ const currentY = e2.pageY;
       if (newWidth) {
-        __privateSet(this, _width, Math.round(newWidth));
-        this.dom.style.width = `${__privateGet(this, _width)}px`;
+        this.#width = Math.round(newWidth);
+        this.dom.style.width = `${this.#width}px`;
       }
       if (newHeight) {
-        __privateSet(this, _height, Math.round(newHeight));
+        this.#height = Math.round(newHeight);
       }
       if (newWidth || newHeight) {
-        this.dom.style.aspectRatio = `${__privateGet(this, _width)} / ${__privateGet(this, _height)}`;
+        this.dom.style.aspectRatio = `${this.#width} / ${this.#height}`;
       }
     });
-    const onMouseUp = (e2) => {
+    const onMouseUp = e2 => {
       e2.preventDefault();
       handle.dataSetDragging(false);
       handle.setHandleVisibility(false);
-      __privateGet(this, _element).style.pointerEvents = "auto";
+      this.#element.style.pointerEvents = "auto";
       document.removeEventListener("mousemove", onMouseMove);
@@ -342,5 +319,5 @@ document.removeEventListener("mouseup", onMouseUp);
       const tr = view.state.tr.setNodeMarkup(pos, void 0, {
-        ...__privateGet(this, _node).attrs,
-        width: __privateGet(this, _width),
-        height: __privateGet(this, _height)
+        ...this.#node.attrs,
+        width: this.#width,
+        height: this.#height
       });
@@ -351,4 +328,4 @@ view.dispatch(tr);
     document.addEventListener("mouseup", onMouseUp);
-    __privateGet(this, _destroyList).push(() => document.removeEventListener("mousemove", onMouseMove));
-    __privateGet(this, _destroyList).push(() => document.removeEventListener("mouseup", onMouseUp));
+    this.#destroyList.push(() => document.removeEventListener("mousemove", onMouseMove));
+    this.#destroyList.push(() => document.removeEventListener("mouseup", onMouseUp));
   }
@@ -359,28 +336,23 @@ /**
   update(node) {
-    if (node.type !== __privateGet(this, _node).type) {
+    if (node.type !== this.#node.type) {
       return false;
     }
-    if (this.aspectRatio === 0 /* Fixed */ && node.attrs.width && node.attrs.width !== __privateGet(this, _width)) {
+    if (this.aspectRatio === 0 /* Fixed */ && node.attrs.width && node.attrs.width !== this.#width) {
       return false;
     }
-    if (this.aspectRatio === 1 /* Flexible */ && node.attrs.width && node.attrs.height && node.attrs.width !== __privateGet(this, _width) && node.attrs.height !== __privateGet(this, _height)) {
+    if (this.aspectRatio === 1 /* Flexible */ && node.attrs.width && node.attrs.height && node.attrs.width !== this.#width && node.attrs.height !== this.#height) {
       return false;
     }
-    if (!isEqualWithoutAttrs(__privateGet(this, _node), node, ["width", "height"])) {
+    if (!isEqualWithoutAttrs(this.#node, node, ["width", "height"])) {
       return false;
     }
-    __privateSet(this, _node, node);
-    __privateSet(this, _width, node.attrs.width);
-    __privateSet(this, _height, node.attrs.height);
+    this.#node = node;
+    this.#width = node.attrs.width;
+    this.#height = node.attrs.height;
     return true;
   }
   destroy() {
-    __privateGet(this, _destroyList).forEach((removeEventListener) => removeEventListener());
+    this.#destroyList.forEach(removeEventListener => removeEventListener());
   }
 };
-_element = new WeakMap();
-_node = new WeakMap();
-_destroyList = new WeakMap();
-_width = new WeakMap();
-_height = new WeakMap();
 function isEqualWithoutAttrs(node1, node2, ignoreAttrs) {
@@ -396,4 +368,10 @@ return node1 === node2 || sameMarkup(node1, node2, ignoreAttrs) && node1.content.eq(node2.content);
   }
-  node1.attrs = { ...node1Attrs, ...deltaAttrs };
-  node2.attrs = { ...node2Attrs, ...deltaAttrs };
+  node1.attrs = {
+    ...node1Attrs,
+    ...deltaAttrs
+  };
+  node2.attrs = {
+    ...node2Attrs,
+    ...deltaAttrs
+  };
   const same = node1.sameMarkup(node2);
@@ -413,5 +391,2 @@ node1.attrs = node1Attrs;
 }
-export {
-  ResizableNodeView,
-  ResizableRatioType
-};
+export { ResizableNodeView, ResizableRatioType };

package.json

 {
   "name": "prosemirror-resizable-view",
-  "version": "2.0.14",
+  "version": "3.0.0-beta.0",
   "private": false,
@@ -39,7 +39,10 @@ "description": "A ProseMirror node view that make your node resizable",
     "@babel/runtime": "^7.22.3",
-    "@remirror/core-helpers": "^3.0.0",
-    "@remirror/core-utils": "^2.0.13",
+    "@remirror/core-helpers": "4.0.0-beta.0",
+    "@remirror/core-utils": "3.0.0-beta.0",
     "prosemirror-model": "^1.19.3",
     "prosemirror-view": "^1.31.7"
   },
+  "devDependencies": {
+    "@remirror/cli": "1.0.1"
+  },
   "publishConfig": {
@@ -49,4 +52,7 @@ "access": "public"
   "@remirror": {
-    "sizeLimit": "5 KB"
+    "sizeLimit": "10 KB"
+  },
+  "scripts": {
+    "build": "remirror-cli build"
   }
 }

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of package files

15

increased by25%

Worsened metrics

Total package byte prevSize

94951

decreased by-6.67%

Dev dependency count

1

increased byInfinity%

Lines of code

1349

decreased by-3.16%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@remirror/core-constants@3.0.0-beta.0(transitive)

• + Added@remirror/core-helpers@4.0.0-beta.0(transitive)

• + Added@remirror/core-types@3.0.0-beta.0(transitive)

• + Added@remirror/core-utils@3.0.0-beta.0(transitive)

• + Added@remirror/messages@3.0.0-beta.0(transitive)

• + Added@remirror/pm@3.0.0(transitive)

• + Added@remirror/types@2.0.0-beta.0(transitive)

• + Addedprosemirror-paste-rules@3.0.0(transitive)

• + Addedprosemirror-suggest@3.0.0(transitive)

• + Addedprosemirror-trailing-node@3.0.0(transitive)

• + Addedtype-fest@3.13.1(transitive)

• - Removed@lingui/core@4.14.1(transitive)

• - Removed@lingui/message-utils@4.14.1(transitive)

• - Removed@messageformat/parser@5.1.1(transitive)

• - Removed@remirror/core-constants@2.0.2(transitive)

• - Removed@remirror/core-helpers@3.0.0(transitive)

• - Removed@remirror/core-types@2.0.6(transitive)

• - Removed@remirror/core-utils@2.0.13(transitive)

• - Removed@remirror/messages@2.0.6(transitive)

• - Removed@remirror/pm@2.0.9(transitive)

• - Removed@remirror/types@1.0.1(transitive)

• - Removedjs-sha256@0.10.1(transitive)

• - Removedmoo@0.5.2(transitive)

• - Removedprosemirror-paste-rules@2.0.8(transitive)

• - Removedprosemirror-suggest@2.0.7(transitive)

• - Removedprosemirror-trailing-node@2.0.9(transitive)

• - Removedtype-fest@2.19.0(transitive)

• - Removedunraw@3.0.0(transitive)

• Updated@remirror/core-helpers@4.0.0-beta.0

• Updated@remirror/core-utils@3.0.0-beta.0