CKEditor behavior buggy inside layout

Created on 26 July 2021, almost 3 years ago
Updated 13 June 2024, 11 days ago

Problem/Motivation

After inserting a layout, the behavior when trying to edit content inside the layout doesn't work as I expect. For example, if I hit the Enter key, instead of creating a new paragraph within the layout region the code for the region itself gets duplicated.

Steps to reproduce

  1. Install the module as directed
  2. Configure the module to use a core layout (I expect custom layouts would also be affected, but I've only tried on the core layouts).
  3. Insert a layout in a text field then inside a region press the Enter key.

Proposed resolution

Looking at other modules, including "ckeditor_responsive_plugin", which served as an inspiration for this module. I believe CKEditor needs a child element (like a p tag) to act on, instead of acting on the layout region tag itself.

Remaining tasks

Change line 152 in Layouts.php to render a p tag instead of empty markup.

User interface changes

NA

API changes

NA

Data model changes

NA

πŸ› Bug report
Status

Fixed

Version

1.0

Component

Code

Created by

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.

  • πŸ‡³πŸ‡±Netherlands ricovandevin

    This seems to work already. CKeditor is already adding a paragraph by default (either for an empty field or when pressing enter at the end of the content in an existing field). I have not other option than to add a layout in the paragraph. When I do so, CKeditor replaces the paragraph by the markup for the layout and adds a paragraph inside the columns.

    Maybe this issue has been fixed by changes in core?

  • Status changed to Fixed 24 days ago
  • πŸ‡³πŸ‡±Netherlands ricovandevin

    The CKEditor 5 plugin for CKEditor Layouts has been rewritten in 2.1.0. We now explicitly add a P tag in every region of the layout when converting the layout markup to the CKEditor 5 model.

  • We are testing version 2.1 of CKEditor Layouts and we ran into in something that I would describe as buggy behavior.
    The focus for layout columns is not what you expect. When clicking on a column the column seems to become draggable for a short instance and then the editor decides what element it should place the cursor in. If it is the first column in a layout, this sort of works. If you click on the second column, the cursor jumps to the first 'editable' element. If there isn't any, again it sort of works and the cursor is placed inside the clicked column. If there is an editable element, the cursor jumps to that element.

    To reproduce, add a paragraph with some text and then add a layout with multiple columns and try clicking on a second or third column inside the layout.

    The fix seems simple though, just make the column an editable element instead of a container.

  • πŸ‡ΊπŸ‡ΈUnited States Helianthropy

    This might need to be a different issue, but I’ve tested the patch from comment #7 and it resolves the issue I had where text was not selectable by mouse pointer nor keyboard. Reporting that here as a review of the patch because it totally salvaged my use of the module.

Production build 0.69.0 2024