Extensions

fileHandler

Behaviour takes options 0.14 kB gzipped

Files dropped on or pasted into the editor.

The editor cannot know where a file should go — an upload endpoint, a data URL, a placeholder while the request runs — so it hands the files over with a position that survives the wait. A screenshot pasted from the clipboard arrives here as a file, the same as one dragged from the desktop.

fileHandler({
  accept: ['image/'],
  async onDrop({ editor, files, pos, marker }) {
    for (const file of files) {
      const src = await upload(file)
      editor.commands.insert({ type: 'image', attrs: { src } }, pos && marker.map(pos))
    }
  },
})

1 · Install

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

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

3 · Use it

Nothing to call · this one works once it is in the array. Files dropped on or pasted into the editor.

Options

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

← All 83 extensions

Edit this page on GitHub