Every extension

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))
    }
  },
})
          

Adding it

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

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

There is no separate package · fileHandler 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

Field Type
accept readonly string[] MIME types or prefixes to take: `['image/']`. Left off, every file.
onDrop (event: FileEvent) => void
onPaste (event: FileEvent) => void

← All 81 extensions

Edit this page on GitHub