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).

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.

Fixes 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 ↩