Extensions

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.

1 · Install

One package for every extension · there is no @matrajs/imageResize to install.

npm i @matrajs/core

2 · Add it to the editor

Import it and put it in the extensions array. That array is the whole feature list: what is not in it is not in your bundle and not in the document's schema.

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

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

3 · Use it

Run a command, and give focus back · a click on a button takes it away.

editor.commands.setImageWidth(1)
editor.focus()

Wired to a button:

const button = document.querySelector('#setImageWidth')

button.addEventListener('click', () => {
  editor.commands.setImageWidth(1)
  editor.focus()
})

Options

imageResize is a function · call it with an options object.

Commands

Every one returns true if it changed the document and false if it could not · a command that does not apply where the caret is says so rather than throwing.

Styling

This one needs CSS to look right, and ships the minimum as a string rather than a file · nothing loads unless you load it, and you can ignore it and write your own.

import { imageResizeCSS } from '@matrajs/core'

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

← All 83 extensions

Edit this page on GitHub