Slow loading and copy/paste of big content

[PrimeObjects]

The issue is slow loading and copy/paste of big content. It actually freeze the browser and take 10s to even 1min if the content is so big. I think it is show stopper for user who want to use Slate as content editor for article.

It is very easy to reproduce
Step 1: go to https://www.slatejs.org/#/rich-text
Step 2: copy a big content e.g. the content of the whole article from the link below and try to paste to Slate editor
https://neilpatel.com/what-is-growth-hacking/

It will freeze your browser and take very long to have content ready in the editor.

[kierson]

I think it is slow because slate will generate insert_node operation per each row of pasting text.

In our editor we workaround this by implementing onPaste in a plugin.
We insert only one paragraph with soft new lines.

This reduces time needed for pasting big document from dozens of seconds to just a few milliseconds.

But I agree that this should be solved in slate by batch operation.

Another bad example is typing something inside marks.
This generates 6 operations instead of just insert_text inside a node where user has selection.
Clearly this is bug.

[PrimeObjects]

@kierson Thank you for the information. You said "In our editors we workaround this ..." does your walk around gain any better performance, do you mind to share more information about it?

Can anybody who contribute to Slate tell me whether you have a plan to solve this issue? To be honest, it is a show stopper IMO.

Cheers
Gary

[adjourn]

@PrimeObjects That's quite big article and there are so many marks in there (bold, hyperlinks, etc). Slate can handle impressive amount of blocks without marks but if you want them too, there's hope:

1. slow initial loading should be solved after we move away from ImmutableJS
2. sluggish interactions/scrolling (if present) could be solved with block-level windowing
3. slow paste should be solved by 1. point as well

1. and 3. will always have a hard limit though but if you feel kinky, explore Web Workers or other asynchronous possibilities and contribute ideas/code.

[PrimeObjects]

@adjourn Thank you for the update. I did not experience No.2. And I will wait for "move away from ImmutableJS", do you have any idea when this may happen?

Cheers
GAry

[kierson]

I don't think slow paste will be solved by moving away from immutableJS.
It is related to operations model and regenerating dirty paths, which is very slow.

[kierson]

@kierson Thank you for the information. You said "In our editors we workaround this ..." does your walk around gain any better performance, do you mind to share more information about it?

As I said previously:

In our editor we workaround this by implementing onPaste in a plugin.
We insert only one paragraph with soft new lines.

This reduces time needed for pasting big document from dozens of seconds to just a few milliseconds.

Do you need more info on that?

[PrimeObjects]

I am using slate-html-serializer with RULES, I thought it was the slate-html-serializer slow before I tried "paste" on your demo page.

<Editor ... onPaste={onPaste} ... />

import Html from 'slate-html-serializer'
const htmlProcessor = new Html({ rules: RULES })
const onPaste = (event, change, next) => {

        const transfer = getEventTransfer(event);
        const isText = !transfer.html && transfer.text;
        if (isText) return next();
        const { document } = htmlProcessor.deserialize(transfer.html);
        change.insertFragment(document);
}

[ianstormtaylor]

I believe that this may be fixed by #3093, which has changed a lot of the logic in Slate and slate-react especially. I'm going to close this out, but as always, feel free to open a new issue if it persists for you. Thanks for understanding.