@progress/kendo-editor-common 1.6.0-dev.202110260916 → 1.6.1-dev.202111011001

package/dist/es/plugins/image-resize.js

@@ -0,0 +1,234 @@
+import * as tslib_1 from "tslib";
+import { NodeSelection, Plugin, PluginKey } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+import { changeStylesString } from "../utils";
+export var imageResizeKey = new PluginKey('image-resize');
+var directions = {
+    'southeast': { x: 1, y: 1 },
+    'east': { x: 1, y: 0 },
+    'south': { x: 0, y: 1 },
+    'north': { x: 0, y: -1 },
+    'west': { x: -1, y: 0 },
+    'southwest': { x: -1, y: 1 },
+    'northwest': { x: -1, y: -1 },
+    'northeast': { x: 1, y: -1 } // top right
+};
+var handles = Object.keys(directions);
+var setSize = function (domNode, sizeType, value) {
+    domNode.style[sizeType] = value + 'px';
+};
+var reSize = /[^\-]width:|[^\-]height:/;
+var reAnyValue = /^.+$/;
+var ResizeState = /** @class */ (function () {
+    function ResizeState(activeHandle, dragging, rect, nodePosition) {
+        this.activeHandle = activeHandle;
+        this.dragging = dragging;
+        this.rect = rect;
+        this.nodePosition = nodePosition;
+    }
+    ResizeState.prototype.apply = function (tr) {
+        var state = this, next = tr.getMeta(imageResizeKey);
+        if (next) {
+            return new ResizeState(next.activeHandle, next.setDragging, next.rect, next.nodePosition);
+        }
+        return state;
+    };
+    return ResizeState;
+}());
+var handleMouseMove = function (view, event, options) {
+    var state = imageResizeKey.getState(view.state);
+    var rect = state.rect, dragging = state.dragging, nodePosition = state.nodePosition, activeHandle = state.activeHandle;
+    if (!dragging || !rect) {
+        return;
+    }
+    var img = view.nodeDOM(nodePosition);
+    var dir = directions[activeHandle];
+    var diffX = (event.clientX - dragging.startX) * dir.x;
+    var diffY = (event.clientY - dragging.startY) * dir.y;
+    var width = dir.x ? diffX + img.width : rect.width;
+    var height = dir.y ? diffY + img.height : rect.height;
+    if (options.lockRatio && dir.x && dir.y) {
+        var ratio = Math.min(width / img.width, height / img.height);
+        var lockWidth = img.width * ratio;
+        var lockHeight = img.height * ratio;
+        dragging.startX = event.clientX - (width - lockWidth) * dir.x;
+        dragging.startY = event.clientY - (height - lockHeight) * dir.y;
+        width = lockWidth;
+        height = lockHeight;
+    }
+    else {
+        dragging.startX = dir.x ? event.clientX : dragging.startX;
+        dragging.startY = dir.y ? event.clientY : dragging.startY;
+    }
+    setSize(img, 'width', width);
+    setSize(img, 'height', height);
+    rect.top = img.offsetTop;
+    rect.left = img.offsetLeft;
+    rect.width = img.offsetWidth;
+    rect.height = img.offsetHeight;
+    var handlesWrapper = img.nextElementSibling;
+    handlesWrapper.style.width = rect.width + 'px';
+    handlesWrapper.style.height = rect.height + 'px';
+    handlesWrapper.style.top = rect.top + 'px';
+    handlesWrapper.style.left = rect.left + 'px';
+};
+var handleMouseUp = function (view) {
+    var _a = imageResizeKey.getState(view.state), rect = _a.rect, dragging = _a.dragging, nodePosition = _a.nodePosition;
+    if (dragging && rect) {
+        var selection = view.state.selection;
+        if (selection instanceof NodeSelection) {
+            var currAttrs = selection.node.attrs;
+            var width = rect.width;
+            var height = rect.height;
+            var attrs = void 0;
+            if (reSize.test(currAttrs.style || '')) {
+                var changedWidth = changeStylesString(currAttrs.style, { style: 'width', value: reAnyValue, newValue: width + 'px' });
+                var style = changeStylesString(changedWidth.style || '', { style: 'height', value: reAnyValue, newValue: height + 'px' }).style;
+                attrs = tslib_1.__assign({}, currAttrs, { style: style });
+            }
+            else {
+                attrs = tslib_1.__assign({}, currAttrs, { width: width, height: height });
+            }
+            var newImage = selection.node.type.createAndFill(attrs);
+            if (newImage) {
+                var tr = view.state.tr;
+                tr.replaceWith(nodePosition, nodePosition + 1, newImage);
+                tr.setSelection(NodeSelection.create(tr.doc, nodePosition));
+                tr.setMeta('commandName', 'image-resize');
+                tr.setMeta('args', attrs);
+                tr.setMeta(imageResizeKey, {
+                    setDragging: null,
+                    activeHandle: null,
+                    rect: rect,
+                    nodePosition: nodePosition
+                });
+                view.dispatch(tr);
+            }
+        }
+    }
+};
+var handleMouseDown = function (view, event, options) {
+    var target = event.target;
+    var activeHandle = target.getAttribute('data-direction');
+    if (!activeHandle) {
+        return false;
+    }
+    var resizeState = imageResizeKey.getState(view.state);
+    event.preventDefault();
+    var transaction = view.state.tr;
+    transaction.setMeta(imageResizeKey, {
+        setDragging: { startX: event.clientX, startY: event.clientY },
+        activeHandle: activeHandle,
+        rect: resizeState.rect,
+        nodePosition: resizeState.nodePosition
+    });
+    transaction.setMeta('addToHistory', false);
+    view.dispatch(transaction);
+    function move(e) {
+        handleMouseMove(view, e, options);
+    }
+    function finish(e) {
+        e.view.removeEventListener('mouseup', finish);
+        e.view.removeEventListener('mousemove', move);
+        handleMouseUp(view);
+    }
+    event.view.addEventListener('mouseup', finish);
+    event.view.addEventListener('mousemove', move);
+    return true;
+};
+export var imageResizing = function (options) {
+    if (options === void 0) { options = { node: 'image', lockRatio: true }; }
+    return new Plugin({
+        key: imageResizeKey,
+        view: function (viewObj) { return ({
+            resize: function () {
+                if (imageResizeKey.getState(viewObj.state).rect) {
+                    viewObj.dispatch(viewObj.state.tr.setMeta('resize', true));
+                }
+            },
+            get window() {
+                return viewObj.dom.ownerDocument && viewObj.dom.ownerDocument.defaultView;
+            },
+            attachResize: function () {
+                var win = this.window;
+                if (win) {
+                    win.removeEventListener('resize', this.resize);
+                    win.addEventListener('resize', this.resize);
+                }
+            },
+            removeResize: function () {
+                var win = this.window;
+                if (win) {
+                    win.removeEventListener('resize', this.resize);
+                }
+            },
+            update: function (view, prevState) {
+                var state = view.state;
+                var selection = state.selection;
+                var nodeType = state.schema.nodes[options.node];
+                var pluginState = imageResizeKey.getState(state);
+                var prevRect = pluginState.rect;
+                if (selection instanceof NodeSelection && nodeType === selection.node.type) {
+                    var img = view.nodeDOM(selection.from);
+                    var rect = {
+                        top: img.offsetTop,
+                        left: img.offsetLeft,
+                        width: img.offsetWidth,
+                        height: img.offsetHeight
+                    };
+                    if (!prevState.selection.eq(selection) ||
+                        (prevRect && (prevRect.width !== rect.width || prevRect.height !== rect.height ||
+                            prevRect.top !== rect.top || prevRect.left !== rect.left))) {
+                        var tr = state.tr;
+                        tr.setMeta(imageResizeKey, { rect: rect, nodePosition: selection.from });
+                        view.dispatch(tr);
+                        this.attachResize();
+                    }
+                }
+                else if (prevRect) {
+                    pluginState.rect = null;
+                    pluginState.nodePosition = -1;
+                }
+            },
+            destroy: function () {
+                this.removeResize();
+            }
+        }); },
+        state: {
+            init: function () {
+                return new ResizeState('', null, null, -1);
+            },
+            apply: function (tr, prev) {
+                return prev.apply(tr);
+            }
+        },
+        props: {
+            handleDOMEvents: {
+                mousedown: function (view, event) {
+                    return handleMouseDown(view, event, options);
+                }
+            },
+            decorations: function (state) {
+                var selection = state.selection;
+                var nodeType = state.schema.nodes[options.node];
+                var rect = imageResizeKey.getState(state).rect;
+                if (rect && selection instanceof NodeSelection && nodeType === selection.node.type) {
+                    var wrapper = document.createElement('div');
+                    wrapper.className = 'k-editor-resize-handles-wrapper';
+                    wrapper.style.width = rect.width + 'px';
+                    wrapper.style.height = rect.height + 'px';
+                    wrapper.style.top = rect.top + 'px';
+                    wrapper.style.left = rect.left + 'px';
+                    for (var i = 0; i < handles.length; i++) {
+                        var dom = document.createElement('div');
+                        dom.className = 'k-editor-resize-handle ' + handles[i];
+                        dom.setAttribute('data-direction', handles[i]);
+                        wrapper.appendChild(dom);
+                    }
+                    return DecorationSet.create(state.doc, [Decoration.widget(state.selection.from + 1, wrapper)]);
+                }
+                return DecorationSet.empty;
+            }
+        }
+    });
+};

package/dist/es2015/main.js

@@ -23,6 +23,7 @@ export { find, findAt, findAll, replace, replaceAll } from './find-replace';
 export { placeholder } from './plugins/placeholder';
 export { spacesFix } from './plugins/spaces-fix';
 export { textHighlight, textHighlightKey } from './plugins/highlight';
+export { imageResizing, imageResizeKey } from './plugins/image-resize';
 // ProseMirror re-exports
 export * from 'prosemirror-commands';
 export * from 'prosemirror-dropcursor';

package/dist/es2015/plugins/image-resize.js

@@ -0,0 +1,231 @@
+import { NodeSelection, Plugin, PluginKey } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+import { changeStylesString } from "../utils";
+export const imageResizeKey = new PluginKey('image-resize');
+const directions = {
+    'southeast': { x: 1, y: 1 },
+    'east': { x: 1, y: 0 },
+    'south': { x: 0, y: 1 },
+    'north': { x: 0, y: -1 },
+    'west': { x: -1, y: 0 },
+    'southwest': { x: -1, y: 1 },
+    'northwest': { x: -1, y: -1 },
+    'northeast': { x: 1, y: -1 } // top right
+};
+const handles = Object.keys(directions);
+const setSize = (domNode, sizeType, value) => {
+    domNode.style[sizeType] = value + 'px';
+};
+const reSize = /[^\-]width:|[^\-]height:/;
+const reAnyValue = /^.+$/;
+class ResizeState {
+    constructor(activeHandle, dragging, rect, nodePosition) {
+        this.activeHandle = activeHandle;
+        this.dragging = dragging;
+        this.rect = rect;
+        this.nodePosition = nodePosition;
+    }
+    apply(tr) {
+        let state = this, next = tr.getMeta(imageResizeKey);
+        if (next) {
+            return new ResizeState(next.activeHandle, next.setDragging, next.rect, next.nodePosition);
+        }
+        return state;
+    }
+}
+const handleMouseMove = (view, event, options) => {
+    const state = imageResizeKey.getState(view.state);
+    const { rect, dragging, nodePosition: nodePosition, activeHandle } = state;
+    if (!dragging || !rect) {
+        return;
+    }
+    const img = view.nodeDOM(nodePosition);
+    const dir = directions[activeHandle];
+    const diffX = (event.clientX - dragging.startX) * dir.x;
+    const diffY = (event.clientY - dragging.startY) * dir.y;
+    let width = dir.x ? diffX + img.width : rect.width;
+    let height = dir.y ? diffY + img.height : rect.height;
+    if (options.lockRatio && dir.x && dir.y) {
+        let ratio = Math.min(width / img.width, height / img.height);
+        let lockWidth = img.width * ratio;
+        let lockHeight = img.height * ratio;
+        dragging.startX = event.clientX - (width - lockWidth) * dir.x;
+        dragging.startY = event.clientY - (height - lockHeight) * dir.y;
+        width = lockWidth;
+        height = lockHeight;
+    }
+    else {
+        dragging.startX = dir.x ? event.clientX : dragging.startX;
+        dragging.startY = dir.y ? event.clientY : dragging.startY;
+    }
+    setSize(img, 'width', width);
+    setSize(img, 'height', height);
+    rect.top = img.offsetTop;
+    rect.left = img.offsetLeft;
+    rect.width = img.offsetWidth;
+    rect.height = img.offsetHeight;
+    const handlesWrapper = img.nextElementSibling;
+    handlesWrapper.style.width = rect.width + 'px';
+    handlesWrapper.style.height = rect.height + 'px';
+    handlesWrapper.style.top = rect.top + 'px';
+    handlesWrapper.style.left = rect.left + 'px';
+};
+const handleMouseUp = (view) => {
+    const { rect, dragging, nodePosition } = imageResizeKey.getState(view.state);
+    if (dragging && rect) {
+        const selection = view.state.selection;
+        if (selection instanceof NodeSelection) {
+            const currAttrs = selection.node.attrs;
+            const width = rect.width;
+            const height = rect.height;
+            let attrs;
+            if (reSize.test(currAttrs.style || '')) {
+                const changedWidth = changeStylesString(currAttrs.style, { style: 'width', value: reAnyValue, newValue: width + 'px' });
+                const { style } = changeStylesString(changedWidth.style || '', { style: 'height', value: reAnyValue, newValue: height + 'px' });
+                attrs = Object.assign({}, currAttrs, { style });
+            }
+            else {
+                attrs = Object.assign({}, currAttrs, { width, height });
+            }
+            const newImage = selection.node.type.createAndFill(attrs);
+            if (newImage) {
+                const tr = view.state.tr;
+                tr.replaceWith(nodePosition, nodePosition + 1, newImage);
+                tr.setSelection(NodeSelection.create(tr.doc, nodePosition));
+                tr.setMeta('commandName', 'image-resize');
+                tr.setMeta('args', attrs);
+                tr.setMeta(imageResizeKey, {
+                    setDragging: null,
+                    activeHandle: null,
+                    rect,
+                    nodePosition
+                });
+                view.dispatch(tr);
+            }
+        }
+    }
+};
+const handleMouseDown = (view, event, options) => {
+    const target = event.target;
+    const activeHandle = target.getAttribute('data-direction');
+    if (!activeHandle) {
+        return false;
+    }
+    const resizeState = imageResizeKey.getState(view.state);
+    event.preventDefault();
+    const transaction = view.state.tr;
+    transaction.setMeta(imageResizeKey, {
+        setDragging: { startX: event.clientX, startY: event.clientY },
+        activeHandle,
+        rect: resizeState.rect,
+        nodePosition: resizeState.nodePosition
+    });
+    transaction.setMeta('addToHistory', false);
+    view.dispatch(transaction);
+    function move(e) {
+        handleMouseMove(view, e, options);
+    }
+    function finish(e) {
+        e.view.removeEventListener('mouseup', finish);
+        e.view.removeEventListener('mousemove', move);
+        handleMouseUp(view);
+    }
+    event.view.addEventListener('mouseup', finish);
+    event.view.addEventListener('mousemove', move);
+    return true;
+};
+export const imageResizing = (options = { node: 'image', lockRatio: true }) => {
+    return new Plugin({
+        key: imageResizeKey,
+        view: (viewObj) => ({
+            resize() {
+                if (imageResizeKey.getState(viewObj.state).rect) {
+                    viewObj.dispatch(viewObj.state.tr.setMeta('resize', true));
+                }
+            },
+            get window() {
+                return viewObj.dom.ownerDocument && viewObj.dom.ownerDocument.defaultView;
+            },
+            attachResize() {
+                const win = this.window;
+                if (win) {
+                    win.removeEventListener('resize', this.resize);
+                    win.addEventListener('resize', this.resize);
+                }
+            },
+            removeResize() {
+                const win = this.window;
+                if (win) {
+                    win.removeEventListener('resize', this.resize);
+                }
+            },
+            update(view, prevState) {
+                const state = view.state;
+                const selection = state.selection;
+                const nodeType = state.schema.nodes[options.node];
+                const pluginState = imageResizeKey.getState(state);
+                const prevRect = pluginState.rect;
+                if (selection instanceof NodeSelection && nodeType === selection.node.type) {
+                    const img = view.nodeDOM(selection.from);
+                    const rect = {
+                        top: img.offsetTop,
+                        left: img.offsetLeft,
+                        width: img.offsetWidth,
+                        height: img.offsetHeight
+                    };
+                    if (!prevState.selection.eq(selection) ||
+                        (prevRect && (prevRect.width !== rect.width || prevRect.height !== rect.height ||
+                            prevRect.top !== rect.top || prevRect.left !== rect.left))) {
+                        const tr = state.tr;
+                        tr.setMeta(imageResizeKey, { rect, nodePosition: selection.from });
+                        view.dispatch(tr);
+                        this.attachResize();
+                    }
+                }
+                else if (prevRect) {
+                    pluginState.rect = null;
+                    pluginState.nodePosition = -1;
+                }
+            },
+            destroy() {
+                this.removeResize();
+            }
+        }),
+        state: {
+            init() {
+                return new ResizeState('', null, null, -1);
+            },
+            apply(tr, prev) {
+                return prev.apply(tr);
+            }
+        },
+        props: {
+            handleDOMEvents: {
+                mousedown(view, event) {
+                    return handleMouseDown(view, event, options);
+                }
+            },
+            decorations(state) {
+                const selection = state.selection;
+                const nodeType = state.schema.nodes[options.node];
+                const rect = imageResizeKey.getState(state).rect;
+                if (rect && selection instanceof NodeSelection && nodeType === selection.node.type) {
+                    const wrapper = document.createElement('div');
+                    wrapper.className = 'k-editor-resize-handles-wrapper';
+                    wrapper.style.width = rect.width + 'px';
+                    wrapper.style.height = rect.height + 'px';
+                    wrapper.style.top = rect.top + 'px';
+                    wrapper.style.left = rect.left + 'px';
+                    for (let i = 0; i < handles.length; i++) {
+                        let dom = document.createElement('div');
+                        dom.className = 'k-editor-resize-handle ' + handles[i];
+                        dom.setAttribute('data-direction', handles[i]);
+                        wrapper.appendChild(dom);
+                    }
+                    return DecorationSet.create(state.doc, [Decoration.widget(state.selection.from + 1, wrapper)]);
+                }
+                return DecorationSet.empty;
+            }
+        }
+    });
+};

package/dist/npm/main.d.ts

@@ -25,6 +25,7 @@ export { find, findAt, findAll, replace, replaceAll, SearchOptions } from './fin
 export { placeholder } from './plugins/placeholder';
 export { spacesFix } from './plugins/spaces-fix';
 export { textHighlight, textHighlightKey, InlineDecoration } from './plugins/highlight';
+export { imageResizing, imageResizeKey, ImageResizeOptions } from './plugins/image-resize';
 export * from 'prosemirror-commands';
 export * from 'prosemirror-dropcursor';
 export * from 'prosemirror-gapcursor';

package/dist/npm/main.js

@@ -115,6 +115,9 @@ exports.spacesFix = spaces_fix_1.spacesFix;
 var highlight_1 = require("./plugins/highlight");
 exports.textHighlight = highlight_1.textHighlight;
 exports.textHighlightKey = highlight_1.textHighlightKey;
+var image_resize_1 = require("./plugins/image-resize");
+exports.imageResizing = image_resize_1.imageResizing;
+exports.imageResizeKey = image_resize_1.imageResizeKey;
 // ProseMirror re-exports
 tslib_1.__exportStar(require("prosemirror-commands"), exports);
 tslib_1.__exportStar(require("prosemirror-dropcursor"), exports);

package/dist/npm/plugins/image-resize.d.ts

@@ -0,0 +1,7 @@
+import { Plugin, PluginKey } from "prosemirror-state";
+export declare const imageResizeKey: PluginKey<any, any>;
+export interface ImageResizeOptions {
+    node: string;
+    lockRatio: boolean;
+}
+export declare const imageResizing: (options?: ImageResizeOptions) => Plugin<any, any>;