Quantcast
Channel: Issues for Drupal core
Viewing all articles
Browse latest Browse all 295389

Add ckeditor5-code-block package and CodeBlock plugin

$
0
0

Problem/Motivation

CKEditor 5 currently supports inline <code>…< /code> thanks to:

ckeditor5_code:
  ckeditor5:
    plugins: [basicStyles.Code]
  drupal:
    label: Code
    library: core/ckeditor5.basic
    admin_library: ckeditor5/admin.basic
    toolbar_items:
      code:
        label: Code
    elements:
      - <code>

But we do not yet have support for code blocks: <pre><code>…< /code></pre>. That's where https://ckeditor.com/docs/ckeditor5/latest/features/code-blocks.html comes in.

We did support this in CKEditor 4 too, thanks to the Format dropdown:

The full list of tags supported by that:

  • <p>
  • <h1>
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>
  • <pre>

All of those are already supported (thanks to ckeditor5_paragraph and ckeditor5_heading), with the exception of the last one: <pre>.

For that, we need this additional plugin. Right now, you're forced to use "view source" to create such content, which is a regression compared to CKEditor 4.

Steps to reproduce

N/A

Proposed resolution

Add https://ckeditor.com/docs/ckeditor5/latest/features/code-blocks.html to provide an equivalent UX in CKEditor 5.

Remaining tasks

  1. Add package to core/package.json and build the JS.
  2. Add definition to core/modules/ckeditor5.ckeditor5.yml.
  3. Expand update path test coverage in \Drupal\Tests\ckeditor5\Kernel\SmartDefaultSettingsTest
  4. Expand update path for Format button in \Drupal\ckeditor5\Plugin\CKEditor4To5Upgrade\Core::mapCKEditor4ToolbarButtonToCKEditor5ToolbarItem(). Note that this is tricky because Format now needs to be mapped to multiple toolbar buttons if<pre> is allowed in the text format. This is not yet supported by CKEditor4To5UpgradePluginInterface and will likely require an API addition.

User interface changes

Better UX for

API changes

TBD

Data model changes

None.

Release notes snippet

TBD


Viewing all articles
Browse latest Browse all 295389

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>