ianstormtaylor / slate-plugins

A set of my personal Slate editor plugins, in a monorepo.
https://slate-plugins.netlify.com
Other
248 stars 68 forks source link

slate-soft-break: Newline inserted just after a mark misplace the cursor #43

Open gracicot opened 5 years ago

gracicot commented 5 years ago

Do you want to request a feature or report a bug?

A bug

What's the current behavior?

When pressing Enter, the cursor stays on the same line when a leaf with a mark is just before the cursor.

OS:

Darwin xyz.local 17.7.0 Darwin Kernel Version 17.7.0: Thu Jun 21 22:53:14 PDT 2018; root:xnu-4570.71.2~1/RELEASE_X86_64 x86_64

Browser Identification:

Firefox 65.0.1 20190211233335 release Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:65.0) Gecko/20100101 Firefox/65.0 Darwin 17.7.0

Live example gif recording

What's the expected behavior?

The cursor is expected to be on the newline

zaunermax commented 5 years ago

Firefox generally seems to have a problem with cursor placement and focus. Autofocus does not work in general with slate on firefox (newest version), and with soft wrap, the cursor placement is wrong, but once I start typing, the cursor jumps to the correct space, very weird...

schnuderl commented 2 years ago

I use a very ugly hack to get around that by adding an invisible character if the softbreak is the last character in the text, and remove it when if find that softbreak-workaround within my text

        const SoftbreakString = '\n\u200c';

        editor.normalizeNode = entry => {
            const [node, nodePath] = entry;
            if (Text.isText(node)) {
                if (node.text[node.text.length - 1] === '\n') {
                    Transforms.insertText(editor, `${node.text}\u200c`, { at: nodePath });
                }
                // filter u200c softbreaks as soon as they are within the string
                if (node.text.substring(1, node.text.length - 1).includes(SoftbreakString)) {
                    const replaced = node.text.replaceAll(SoftbreakString, '\n');
                    Transforms.insertText(editor, replaced, { at: nodePath });
                }
            }
        }