Function withImage

packages/plugins/image/src/plugin/with-image.tsx:26–212

(editor: T, options: ImageOptions = {})

}

export const withImage = <T extends Editable>(editor: T, options: ImageOptions = {}) => {
  const newEditor = editor as T & ImageEditor

  setOptions(newEditor, options)

  const { isInline, isVoid } = newEditor
  const historyProtocol = withHistoryProtocol(newEditor)
  const { capture } = historyProtocol

  historyProtocol.capture = (op: Operation) => {
    if (op.type === 'set_node') {
      const { path, newProperties } = op
      if (Editor.hasPath(editor, path)) {
        const image = Editor.node(editor, path)
        if (Image.isImage(image[0])) {
          const prop = newProperties as Partial<Image>
          if (prop.url || prop.state || prop.percentage) {
            return false
          }
        }
      }
    }
    return capture(op)
  }

  const { locale: localeOptions = {} } = options
  Locale.setLocale(newEditor, locale, localeOptions)

  Slot.mount(newEditor, ImageViewer)

  newEditor.isInline = element => {
    return ImageEditor.isImage(newEditor, element) || isInline(element)
  }

  newEditor.isVoid = element => {
    return ImageEditor.isImage(newEditor, element) || isVoid(element)
  }

  const insertImages = (files: (File | string)[]) => {
    Promise.all(
      files.map(file =>
        typeof file === 'string' ? Promise.resolve(file) : readImageFileInfo(file),
      ),
    ).then(items => {
      items.forEach(item => {
        if (!item) return
        if (typeof item === 'string') return newEditor.insertImage({ file: item })
        const { url, file, width, height } = item
        const path = insertImage(newEditor, {
          url,
          width,
          height,
          name: file.name,
          state: 'uploading',
        })
        uploadImage(editor, path, file).then(() => {
          URL.revokeObjectURL(url)
        })