Wrap content if it exceeds the editor width

[paescuj]

Long words can currently exceed the editor area - to be observed especially with rather small areas.
Instead, the content should always be wrapped at the end of the line (as it behaves in a native text field).
This can easily be achieved with word-break: break-word ¹ applied to all "contenteditable" elements.
With this, paragraph wrapping will still behave the same (see "Lorem Ipsum" example below) and, for example, content in tables becomes cleaner and better aligned automatically.

Some plugins appear to have recognized this issue and are addressing it individually at the moment, for example @editorjs/nested-list ².
However, this is something that should be addressed in core by default for all block tools.

Would also fix editor-js/paragraph#57 (external).

Repro

With repo demo (yarn dev), in "thin mode".

JSON

{
    "time" : 1712353636687,
    "blocks" : [
        {
            "id" : "zcKCF1S7X8",
            "type" : "header",
            "data" : {
                "text" : "Supercalifragilisticexpialidocious",
                "level" : 1
            }
        },
        {
            "id" : "FLD-mZIRX7",
            "type" : "paragraph",
            "data" : {
                "text" : "<b>Muvaffakiyetsizleştiricileştiriveremeyebileceklerimizdenmişsinizcesine</b>"
            }
        },
        {
            "id" : "w2bhqGcgbp",
            "type" : "table",
            "data" : {
                "withHeadings" : false,
                "content" : [
                    [
                        "Sünnipäevanädalalõpupeopärastlõunaväsimatus",
                        "Sünnipäevanädalalõpupeopärastlõunaväsimatus"
                    ]
                ]
            }
        },
        {
            "id" : "rkjqTuHxOZ",
            "type" : "list",
            "data" : {
                "style" : "unordered",
                "items" : [
                    {
                        "content" : "miinibaashkiminasiganibiitoosijiganibadagwiingweshiganibakwezhigan",
                        "items" : []
                    }
                ]
            }
        },
        {
            "id" : "dxDWr_Fqgf",
            "type" : "checklist",
            "data" : {
                "items" : [
                    {
                        "text" : "vaðlaheiðarvegavinnuverkfærageymsluskúraútidyralyklakippuhringur",
                        "checked" : false
                    }
                ]
            }
        },
        {
            "id" : "bwnFX5LoX7",
            "type" : "paragraph",
            "data" : {
                "text" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do \neiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad \nminim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip \nex ea commodo consequat. Duis aute irure dolor in reprehenderit in \nvoluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur \nsint occaecat cupidatat non proident, sunt in culpa qui officia deserunt\n mollit anim id est laborum."
            }
        }
    ],
    "version" : "2.30.0-rc.2"
}

Before

After

Footnotes

1. https://developer.mozilla.org/en-US/docs/Web/CSS/word-break ↩

2. https://github.com/editor-js/nested-list/blob/95b37462dc93c19b83f0481f509034a40d436cf2/styles/index.pcss#L27 ↩

[paescuj]

@neSpecc Sorry for the ping, but is there anything I can do to get this over the line? Would you like me to create an issue first? Seems like a pretty straightforward fix to me 😇 Thanks for your work! ❤️

[neSpecc]

Seems fine, thank you. Please, add a line to the docs/changelog.md

[paescuj]

Seems fine, thank you. Please, add a line to the docs/changelog.md

Awesome, thanks for your super fast response! Added to the changelog now 👍

[neSpecc]

I’ve tested your demo and wasn’t able to reproduce most of the problems, only in the Checklist tool. Is it reproducible for you when using yarn dev?

Screenshot from the next branch

[paescuj]

I’ve tested your demo and wasn’t able to reproduce most of the problems, only in the Checklist tool. Is it reproducible for you when using yarn dev?

Screenshot from the next branch

Oh, interesting! Turns out that it's mainly an issue in Firefox. Chrome and Safari seem to apply built-in browser styles that prevent the overflow. However, I guess it doesn't hurt to apply word-break: break-word in every case, especially since it fixes the overflow of the checklist in both Chrome and Safari. WDYT?