Every extension

imageResize

Behaviour takes options 0.81 kB gzipped

A drag handle on every image, and a `width` attribute to remember it by.

The attribute is added to the stock image node from outside, and the node view replaces the image's rendering from outside too, so the image extension knows nothing about resizing and an editor without this one renders a plain `<img>`. Width is a whole number of pixels, written to the `width` attribute so the HTML carries it and a browser honours it before any CSS loads.

Adding it

import { createEditor, document, paragraph, text, imageResize } from '@matrajs/core'

const editor = createEditor({
  extensions: [document, paragraph, text, imageResize({ … })],
  element: document.querySelector('#editor'),
})

There is no separate package · imageResize is already in @matrajs/core, and an extension you do not import is not in your bundle. document, paragraph and text are the floor every document needs.

Options

Commands

• editor.commands.setImageWidth()

Styles

This one needs a stylesheet to look right, and ships the minimum as a string rather than a file · nothing is loaded unless you load it.

          import { imageResizeCSS } from '@matrajs/core'

const style = document.createElement('style')
style.textContent = imageResizeCSS
document.head.append(style)
        

← All 81 extensions

Edit this page on GitHub