Extensions

dragHandle

Behaviour takes options 1.01 kB gzipped

A grip that appears beside the block under the pointer, and drags it.

One element, moved, rather than a widget decoration per block. A decoration per block would put a handle in the document's decoration set for every paragraph — thousands on a long document, all recomputed whenever anything changes — to show one at a time.

The handle sits outside the editable element and is `contenteditable="false"` regardless, so it can never take the caret or become part of the document.

1 · Install

One package for every extension · there is no @matrajs/dragHandle 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, dragHandle } from '@matrajs/core'

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

3 · Use it

Nothing to call · this one works once it is in the array. A grip that appears beside the block under the pointer, and drags it.

Options

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

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 { dragHandleCSS } from '@matrajs/core'

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

← All 83 extensions

Edit this page on GitHub