UHF-8387 CKEditor5 styles

[teroelonen]

UHF-8387

What was done

• Added CKEditor specific stylesheet and applied all required styles that reflect the styles of a saved node.

How to install

• Make sure your instance is up and running on latest dev branch.
  • git pull origin dev
  • make fresh
• Update the helfi_platform_config
  • composer require drupal/helfi_platform_config:dev-ckeditor5
• Update the HDBT theme
  • composer require drupal/hdbt:dev-UHF-8387_ckeditor5_styles
• Run make drush-updb drush-cr
• Import translations
  • Run make shell and in shell: drush locale:check; drush locale:update; drush cr

How to test

• You should test that the CKEditor works correctly and that the styles it are not buggy.
• To test easily copy the html supplied at the end of this PR to a node and save it. Then open another tab and click edit and compare the two contents that they look similar.
• Check that code follows our standards

Designers review

• This PR does not need designers review
• This PR has been visually reviewed by a designer (Name of the designer)

<div>
    <h2>
        Heading 2
    </h2>
    <p>
        <strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </strong>Quisque vulputate eros purus, ut cursus mauris tempus eu. Donec ornare felis condimentum mi sollicitudin congue. Aenean lacinia eros et venenatis rhoncus. Nam eu quam leo. Aenean non lorem eget lectus blandit porttitor non vel purus. <s>Vestibulum id</s> tristique metus. Nunc at dignissim urna, ut aliquet magna. Praesent aliquet volutpat euismod. Ut lacinia purus eu ipsum convallis, nec congue massa aliquam. <span lang="la" dir="ltr">Sed sit amet consectetur</span> nisi, eget ultricies arcu. Nullam in eleifend metus, quis condimentum nunc. In non urna quis dolor interdum molestie in et leo. <em>Sed volutpat, orci vitae dapibus sagittis, enim ex fringilla urna, id aliquet arcu erat sed tellus<sup>2</sup>.</em>
    </p>
    <p>
        <a class="link" href="https://google.com">Link to external site</a>
    </p>
    <p>
        <a class="link" href="/node/276" data-entity-type="node" data-entity-uuid="1c6592cd-13e3-4a21-b224-b7f830910174" data-entity-substitution="canonical">Link to internal site</a>
    </p>
    <p>
        <a class="link" href="tel:01020304050">Phone number links</a>
    </p>
    <p>
        <a class="link" href="mailto:[email protected]">Mail link</a>
    </p>
    <h3>
        Heading 3
    </h3>
    <p>
        Proin eu quam dictum lacus interdum faucibus in id eros. Pellentesque quis suscipit mi. Mauris a dignissim nunc. Ut maximus sollicitudin enim. Sed est sapien, rutrum id sapien eu, maximus pharetra eros. Nulla nec ex fringilla, gravida sem ac, viverra elit.&nbsp;
    </p>
    <ul>
        <li>
            Bullet list item 1
            <ul>
                <li>
                    Bullet list ite 1.1
                    <ul>
                        <li>
                            Bullet list item 1.1.1
                            <ul>
                                <li>
                                    Bullet list item 1.1.1.1
                                    <ul>
                                        <li>
                                            Bullet list item 1.1.1.1.1
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            Bullet list item 2
        </li>
        <li>
            Bullet list item 3
        </li>
    </ul>
    <h4>
        Heading 4
    </h4>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec ante lorem. Donec enim lectus, pulvinar vitae aliquam non, suscipit quis ipsum. Curabitur consectetur pulvinar felis, et feugiat massa efficitur vel. Aliquam congue, arcu sit amet facilisis scelerisque, nisi enim ultrices velit, et venenatis eros lorem id est. Nunc consectetur blandit mauris, quis imperdiet dui iaculis a.
    </p>
    <table>
        <caption>Table caption here</caption>
        <thead>
            <tr>
                <th>
                    Animals
                </th>
                <th>
                    Dangerous
                </th>
                <th>
                    <p>
                        Type
                    </p>
                    <p>
                        Place to live
                    </p>
                </th>
                <th>
                    Seen
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>
                    Whale
                </th>
                <td>
                    No
                </td>
                <td>
                    <p>
                        Mammal
                    </p>
                    <p>
                        Lives in the ocean
                    </p>
                </td>
                <td>
                    No
                </td>
            </tr>
            <tr>
                <th>
                    Tiger
                </th>
                <td>
                    Yes
                </td>
                <td>
                    <p>
                        Mammal
                    </p>
                    <p>
                        Lives in India
                    </p>
                </td>
                <td>
                    Yes
                </td>
            </tr>
        </tbody>
    </table>
    <h5>
        Heading 5
    </h5>
    <p>
        Cras porttitor tempus ultrices. Nam sit amet justo leo. Phasellus mattis sapien fermentum condimentum convallis. Duis egestas magna euismod dapibus scelerisque. Pellentesque sed diam sagittis, faucibus tellus tristique, efficitur erat. Maecenas eu semper elit. Nullam rutrum commodo eros id pellentesque. Mauris ut volutpat dui. Suspendisse sed ligula vel sapien blandit dictum. Integer vel mi et erat porta finibus.&nbsp;
    </p>
    <blockquote class="quote">
        <p class="quote__text">
            Integer iaculis dolor vitae odio ornare ullamcorper.&nbsp;
        </p>
        <footer class="quote__author">
            <cite>Author</cite>
        </footer>
    </blockquote>
    <p>
        Cras non nisl id ante ornare mattis. Etiam sagittis, erat at interdum maximus, leo nisl finibus velit, non blandit mi est vitae enim. Donec risus lorem, porta fringilla fringilla et, tincidunt ut sem. Nunc ultrices interdum arcu non feugiat. Proin sagittis eros id dolor vulputate tempor.
    </p>
    <ol>
        <li>
            Numbered list item 1
            <ol>
                <li>
                    Numbered list item 1.1
                    <ol>
                        <li>
                            Numbered list item 1.1.1
                        </li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>
            Numbered list item 2
        </li>
        <li>
            Numbered list item 3
        </li>
    </ol>
    <h6>
        Heading 6
    </h6>
    <p>
        H<sub>2</sub>O is water. Vestibulum sodales sem arcu, id posuere dui iaculis quis. Morbi sit amet laoreet mauris. Sed quam elit, faucibus et lorem eu, facilisis elementum dui. Duis laoreet ex nec quam bibendum sagittis. Sed cursus urna in nulla bibendum vulputate. Duis a tellus aliquet, molestie eros non, porttitor dolor. Sed urna ex, tincidunt aliquet rutrum nec, eleifend at est. Mauris non nulla vestibulum, dapibus ipsum id, volutpat felis. Vestibulum vehicula interdum ligula non ornare. Vestibulum aliquet quis felis eu cursus. Aenean non eleifend risus. Phasellus at mi nulla. Fusce faucibus, turpis eget accumsan pellentesque, sapien odio consectetur dui, non fringilla libero leo id neque.
    </p>
    <p>
        Proin hendrerit eros non purus sagittis iaculis. Nam a quam at lacus ullamcorper molestie. Donec pharetra justo at eros lobortis fermentum. Maecenas congue tortor in sollicitudin mollis. Duis mollis, diam eu condimentum sollicitudin, eros nisi iaculis leo, a lacinia leo diam vitae enim. Donec vel placerat metus, non egestas lectus. Donec viverra at sapien at efficitur. Aliquam in semper purus. Quisque sed erat suscipit, volutpat mi sed, fermentum justo. Curabitur quis erat at massa interdum gravida a non nibh. Vestibulum tellus felis, semper eget interdum non, vulputate ac eros.
    </p>
</div>

[Jussiles]

Works nicely 👍 added a small comment on slack. Check that before merging.

[Arkkimaagi]

Looks good, but there are some things still to consider.

[Arkkimaagi]

How about http:// links?

[Arkkimaagi]

Also, having https:// in front of a link is not enough to detect it as an external link. This approach would mark links with https://www.hel.fi/fi as external.

We should run the actual script that checks if the link is external or not. Or if we really need to do it with css, we should check for our common urls like:

&:is([href^='http://'],[href^='https://']):not([href^='http://hel.fi/'],[href^='https://hel.fi/'],[href^='http://www.hel.fi/'],[href^='https://www.hel.fi/'])::after {

But I would recommend against it as then external teams using our HDBT code would be tied to these hardcoded values.

[teroelonen]

Yeah this is tricky - maybe we can add a script to run with the ckeditor and modify its dom but it would get this issue quite heavily out of estimate so I think its best if we just leave the external link styles away. This is an improvement already as it is compared to the current ckeditor interface.

[Arkkimaagi]

Why is this targeting > div and not > *?

Now paragraphs can be wider than they're allowed to be in content.

[teroelonen]

Its targeting the div directly under the ck-content and not the actual content yet. The div is a wrapping div for all the user edited content that will be written there. So the paragraphs can't be wider in this case. I will add a comment that explains this better.

[Arkkimaagi]

Otherwise great job, but the > * should be added due to the differences between our environments. The star selector is more "safe". Approved conditionally.