Noiseless Praying Mantis

    prosemirror-resizable-view
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.8 • Public • Published

    prosemirror-resizable-view

    A ProseMirror node view that make your node resizable

    Version Weekly Downloads Bundled size Typed Codebase MIT License

    Installation

    # yarn
    yarn add prosemirror-resizable-view
    
    # pnpm
    pnpm add prosemirror-resizable-view
    
    # npm
    npm install prosemirror-resizable-view

    Usage

    The following code creates an resizable image node view.

    import { ResizableNodeView } from 'prosemirror-resizable-view';
    
    const createInnerImage = ({ node }: { node: ProsemirrorNode }) => {
      const inner = document.createElement('img');
      inner.setAttribute('src', node.attrs.src);
      inner.style.width = '100%';
      inner.style.minWidth = '50px';
      inner.style.objectFit = 'contain'; // maintain image's aspect ratio
      return inner;
    };
    
    /**
     * ResizableImageView is a NodeView for image. You can resize the image by
     * dragging the handle over the image.
     */
    export class ResizableImageView extends ResizableNodeView implements NodeView {
      constructor(node: ProsemirrorNode, view: EditorView, getPos: () => number) {
        super({ node, view, getPos, createElement: createInnerImage });
      }
    }

    Install

    npm i prosemirror-resizable-view

    DownloadsWeekly Downloads

    9,886

    Version

    2.0.8

    License

    MIT

    Unpacked Size

    124 kB

    Total Files

    12

    Last publish

    Collaborators

    • ifiokjr