Allow <details> element to be placed without <div>

Created on 18 October 2021, about 3 years ago
Updated 13 February 2023, almost 2 years ago

Problem/Motivation

In our websites we don't want to allow site builders to insert <div> elements into the CKEditor. They often copy/paste text from text editor programs like Microsoft Word and most of the time it leads to formatting/styling issues.

Steps to reproduce

When you save the CKEditor configuration is add's the <div> element to the allowed formats.

Proposed resolution

We've seen that the last version of https://github.com/akilli/ckeditor4-detail/blob/master/plugin.js inserts a temporary <div> that get's removed in the downcast function. We have modified the plugin.js file to resemble that one and it seems to work. We also removed the drupal media references as they don't seem to be necessary.

Remaining tasks

Check if this still works for other use cases

Feature request
Status

RTBC

Version

2.0

Component

Code

Created by

🇳🇱Netherlands Gertlor

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇨🇦Canada mandclu

    The patch seems to change the indentation, which makes it difficult to see what code changes are actually being proposed. Can we get an updated patch that doesn't change the indentation? Also, it would be useful to know if the same changes are needed for the CKEditor5 version of the plugin introduced in the 2.1.x branch.

  • Status changed to Needs review 7 months ago
  • 🇳🇱Netherlands casey

    Patch for CKEditor 5 (only) support

  • 🇳🇱Netherlands nvandijk

    I've tested 3244311-6.patch, running into a few issues.

    The order of the elements changes on load of the editor.
    To reproduce:

    1. Place a details element in the editor
    2. Add multiple elements (<p>) to it
    3. Change to 'source editing'
    4. Add some characters
    5. Change back to normal editing
    6. See the order of your items has changed.

    Video demonstrating the issue (also attached)

    Some elements get stripped from the content of the details, such as heading elements.
    To reproduce:

    1. Place a details element in the editor
    2. Add a heading in the content of the editor
    3. Change to 'source editing'
    4. Add some characters
    5. Change back to normal editing
    6. See the heading has been converted to a <p>

    Video demonstrating the issue (also attached)

    Please note that this not only happens when switching from source editing to regular editing, also when re-opening the edit page after saving. Without switching in between the values in the database are 'correct' but get swapped when opening the editor again. Headings are still allowed, just disappear when opening the editor again.

  • Status changed to Needs work 6 months ago
  • Status changed to Needs review about 1 month ago
  • 🇨🇦Canada smulvih2 Canada 🍁

    I tested patch #6, was running into the same issues reported in #7. In my case, I have a large migration, and migrated <details> elements didn't have the contents wrapped in a <div>.

    My new patch extends #6 and fixes the reported issues in #7. Now the migrated content works as expected and the plugin handles the markup correctly.

    Outline of changes

    Upcast Converter

    Introduces explicit handling of <summary> using convertItem to differentiate between <summary> and other child elements. This ensures <summary> maps to detailSummary and all other children map to detailWrapper, maintaining the correct order.

    Data Downcast Converter

    Explicitly removes <div> from the serialized output by using createSlot for detailWrapper. Adds logic to serialize <summary> first and then process all other child elements of detailWrapper in their original order.

    Editing Downcast Converter

    My Patch: Dynamically appends child elements to the editable details-wrapper div in their original order, ensuring no reordering during editing.

    I just tested a complex details element containing

    tag,

    tags, and nested elements and the changes seem to be working as expected.
  • 🇳🇱Netherlands timohuisman Leiden, Netherlands

    I've tested #9 with drupal/core:10.3.7 and drupal/ckeditor_details:2.1.0-beta1.

    The issues mentioned in #7 are resolved. I've created a details element with a few different tags and they all stayed in the expected order after switching between the 'source editing' modus.

    Back to RTBC.

Production build 0.71.5 2024