Class ProseMirrorImagePlugin

A class responsible for handle drag-and-drop and pasting of image content. Ensuring no base64 data is injected directly into the journal content and it is instead uploaded to the user's data directory.

Hierarchy (View Summary)

Constructors

constructor

Methods

_extractBase64Images _onDrop _onPaste _replaceBase64Images _uploadImages base64ToFile build

Constructors

constructor

  • new ProseMirrorImagePlugin(
        schema: Schema,
        options?: { document: ClientDocument },
    ): ProseMirrorImagePlugin

    Parameters

    • schema: Schema

      The ProseMirror schema.

    • options: { document: ClientDocument } = {}

      Additional options to configure the plugin's behaviour.

      • document: ClientDocument

        A related Document to store extract base64 images for.

    Returns ProseMirrorImagePlugin

Methods

Protected_extractBase64Images

  • _extractBase64Images(html: string): [full: string, mime: string, data: string][]
    Protected

    Detect base64 image data embedded in an HTML string and extract it.

    Parameters

    • html: string

      The HTML data as a string.

    Returns [full: string, mime: string, data: string][]

Protected_onDrop

  • _onDrop(
        view: EditorView,
        event: DragEvent,
        slice: Slice,
        moved: boolean,
    ): undefined | true
    Protected

    Handle a drop onto the editor.

    Parameters

    • view: EditorView

      The ProseMirror editor view.

    • event: DragEvent

      The drop event.

    • slice: Slice

      A slice of editor content.

    • moved: boolean

      Whether the slice has been moved from a different part of the editor.

    Returns undefined | true

Protected_onPaste

  • _onPaste(view: EditorView, event: ClipboardEvent): undefined | true
    Protected

    Handle a paste into the editor.

    Parameters

    • view: EditorView

      The ProseMirror editor view.

    • event: ClipboardEvent

      The paste event.

    Returns undefined | true

Protected_replaceBase64Images

  • _replaceBase64Images(
        view: EditorView,
        html: string,
        images: [full: string, mime: string, data: string][],
    ): Promise<void>
    Protected

    Capture any base64-encoded images embedded in the rich text paste and upload them.

    Parameters

    • view: EditorView

      The ProseMirror editor view.

    • html: string

      The HTML data as a string.

    • images: [full: string, mime: string, data: string][]

      An array of extracted base64 image data.

    Returns Promise<void>

Protected_uploadImages

  • _uploadImages(view: EditorView, files: FileList, pos?: number): Promise<void>
    Protected

    Upload any image files encountered in the drop.

    Parameters

    • view: EditorView

      The ProseMirror editor view.

    • files: FileList

      The files to upload.

    • Optionalpos: number

      The position in the document to insert at. If not provided, the current selection will be replaced instead.

    Returns Promise<void>

Staticbase64ToFile

  • base64ToFile(data: string, filename: string, mimetype: string): File

    Convert a base64 string into a File object.

    Parameters

    • data: string

      Base64 encoded data.

    • filename: string

      The filename.

    • mimetype: string

      The file's mimetype.

    Returns File

Staticbuild

  • build(schema: any, options?: {}): Plugin<any>

    Build the plugin.

    Parameters

    • schema: any

      The ProseMirror schema to build the plugin against.

    • options: {} = {}

      Additional options to pass to the plugin.

    Returns Plugin<any>

Settings

Member Visibility

On This Page

Constructors
Methods