tiptap-extension-resizable

This is a Tiptap extension designed to enable resizing for your Tiptap content, including elements such as images and videos

---

Install

npm install tiptap-extension-resizable -S

Usage

import Resizable from "tiptap-extension-resizable";

const editor = new Editor({
  element: document.querySelector(".editor"),
  extensions: [StarterKit, Image.configure({ inline: true }), Resizable],
});

Options

You can configure extension options, which are optional.

  extensions: [
    StarterKit,
    Image.configure({ inline: true }),
    Resizable.configure({
      types: ["image", "video"], // resizable type
      handlerStyle: { // handler point style
        width: "8px",
        height: "8px",
        background: "#07c160",
      },
      layerStyle: { // layer mask style
        border: "2px solid #07c160",
      },
    }),
  ],

Relations

@tiptap/extension-image: https://github.com/ueberdosis/tiptap/tree/develop/packages/extension-image

tiptap-appmsg-editor: https://github.com/KID-1912/tiptap-appmsg-editor