[Feature Request] Apply granular updates without recreating all blocks

[r-Larch]

Motivation for the change

Look at ChatGPT and how it writes answers letter by letter. It does so by using Server-sent events (SSE) where small text parts are transmitted one by one.

It would be nice to be able to render such a SSE stream into the editor without seeing it flickering all over the place.

You see the it working, without flickering, because of overwrites in BlockTools and a custom render function!

Editorjs-granular-updates.mp4

Current APIs:

1. Calling editor.render({ blocks: [..] }) results in recreating all blocks in the editor, so calling it over and over again lets the editor flicker where the contents of the editor become invisible because of too much rerendering.

2. Trying to only update or insert blocks that have changed
   Doing so results in less flickering, but to update a block, it needs to be recreated and this lets the block flicker equally as in option 1.

See the example Code

async function render(editor: EditorJS, value: OutputBlockData[]) {
    await editor.isReady

    const { blocks: lastValue } = await editor.save()

    let i = 0
    for (let len = value.length; i < len; i++) {
        const block = value[i]
        const currentBlock = lastValue[i]
        if (!blockEqual(block, currentBlock)) {
            if (currentBlock === undefined) {
                // insert new block
                insertBlock(editor, block, i, false)
            }
            else {
                // replace changed block
                insertBlock(editor, block, i, true)
            }
        }
    }

    for (let j = i, len = lastValue.length; j < len; j++) {
        editor.blocks.delete(i)
    }
}

function insertBlock(editor: EditorJS, block: OutputBlockData, index?: number, replace?: boolean) {
    editor.blocks.insert(
        block.type,
        block.data,
        undefined,
        index,
        false,
        replace,
    )
}

function blockEqual(a: OutputBlockData, b: OutputBlockData) {
    return (
        a === b ||
        typeof a === typeof b &&
        a.type === b.type &&
        objectEqual(a.data, b.data)
    )
}

function objectEqual(a: object, b: object) {
    if (a === b) return true
    if (typeof a !== typeof b) return false
    const keysA = Object.keys(a)
    const keysB = Object.keys(b)
    if (keysA.length !== keysB.length) return false
    for (let i = 0, len = keysA.length; i < len; i++) {
        const key = keysA[i] as keyof object
        if (!objectEqual(a[key], b[key])) {
            return false
        }
    }
    return true
}

How I solved it with current APIs

Thanks to the Paragraph, Header, List, and Code block tools having a set data(value) property it is possible to just change the block data without recreating the whole block.

Sadly the set data(value) property is not standard API and can not be called through BlockAPI because BlockAPI only exposes a call method to call functions, not property setters!

So I had to overwrite these tools to add a setData(value) method where I call the data setter to apply granular data changes.

NOTE Only the aforementioned BlockTools have this setter, other BlockTools like Table doesn't have such a setter and it would be necessary to implement the set data functionality with a heavy overwrite and this would be difficult to maintain.

See the example Code

import Paragraph from '@editorjs/paragraph'
import Header from '@editorjs/header'
import List from '@editorjs/list'
import Code from '@editorjs/code'

class MyParagraph extends Paragraph {
    setData(data: any) {
        this.data = data;
    }
}
class MyHeader extends Header {
    setData(data: any) {
        this.data = data;
    }
}
class MyList extends List {
    setData(data: any) {
        this.data = data;
    }
}
class MyCode extends Code {
    setData(data: any) {
        this.data = data;
    }
}

// ....

const editor = new EditorJS({
    holder: id,
    tools: {
        // block tools:
        paragraph: MyParagraph,
        header: MyHeader,
        list: MyList,
        code: MyCode,
    },
})

// ....

async function render(editor: EditorJS, value: OutputBlockData[]) {
    await editor.isReady

    const { blocks: lastValue } = await editor.save()

    let i = 0
    for (let len = value.length; i < len; i++) {
        const block = value[i]
        const currentBlock = lastValue[i]
        if (!blockEqual(block, currentBlock)) {
            if (currentBlock === undefined) {
                // insert new block
                insertBlock(editor, block, i, false)
            }
            else if (block.type === currentBlock.type) {
                // if the block is of the same type, only set data without recreating the block!
                const api = editor.blocks.getBlockByIndex(i)!
                api.call('setData', block.data)
            }
            else {
                // replace changed block
                insertBlock(editor, block, i, true)
            }
        }
    }

    for (let j = i, len = lastValue.length; j < len; j++) {
        editor.blocks.delete(i)
    }
}

function insertBlock(editor: EditorJS, block: OutputBlockData, index?: number, replace?: boolean) {
    editor.blocks.insert(
        block.type,
        block.data,
        undefined,
        index,
        false,
        replace,
    )
}

function blockEqual(a: OutputBlockData, b: OutputBlockData) {
    return (
        a === b ||
        typeof a === typeof b &&
        a.type === b.type &&
        objectEqual(a.data, b.data)
    )
}

function objectEqual(a: object, b: object) {
    if (a === b) return true
    if (typeof a !== typeof b) return false
    const keysA = Object.keys(a)
    const keysB = Object.keys(b)
    if (keysA.length !== keysB.length) return false
    for (let i = 0, len = keysA.length; i < len; i++) {
        const key = keysA[i] as keyof object
        if (!objectEqual(a[key], b[key])) {
            return false
        }
    }
    return true
}

Possible improvements for Editor API and Block API

1. Add a optional setData(value) method to BlockTool interface.
2. Add a setBlockData(value) method to BlockAPI
   • requires a legacy fallback to recreate the block if it doesn't implement the setData(value) method.
3. (optional) refactor editor.render(data) to natively perform granular update.
4. update all @editorjs/*** packages to implement the new setData(value) method.

[neSpecc]

Nice idea, thanks. We'll discuss it and probably include it in one of the next releases.

[DystopianDisco]

@r-Larch appreciate you sharing this.

@neSpecc was this included in a recent release?

Struggling to run openai api streaming directly into the editor letter by letter/word by word etc - it can/will update upon competition, but that can take anywhere from 10-20 seconds leaving the end user confused.

Alternatively if this feature is not included, are there any other leads on streaming directly into editor.js via the openai api? Thanks.

[r-Larch]

Hi @DystopianDisco

I was trying to accomplish this using editor.js but inthe end I couldn't get it stable enough for production.
I had to overwrite almost all block tools but then I run into problems with editor undo history and lots of other difficulties.
It was especially difficult to realize AI writing into the middle of the text.
It was not possible to realize a professional user experience although I had written hundreds of lines of custom code and had overwritten almost all parts of the editor, that were accessable to overwrite.

In the end I went to an alternative editor.
By the time now I use quill, because its data model allows diffing new content to the current content and applying only chances, although its abstract model "delta" is terrible.

In future I will migrate to slate, because all big apps use it under the hood and it seems to be the best choice.

Kind regards
René

[DystopianDisco]

Hi @r-Larch super appreciate your reply. I managed to get the openai api text streaming into the editor without any flickering based on your code, but have found myself exactly where you were prior to moving on - non-stop problems/bugs with editor.js, resulting in tons of additional code/plugins attempting to get the editor to work as an production ready AI text editor. While researching alternative solutions - Tiptap, Novel (based on Tiptap), Plate all look promising, and now based on your recommendation, I'll explore Slate too. Thanks again René - wish you well with your project!

[r-Larch]

Hi @DystopianDisco
I did not know about Tiptap and Novel
these look relay promising.
Thank you for sharing