Opened 6 years ago

Last modified 6 years ago

#12177 confirmed New Feature

Create new paragraph inside of a list item

Reported by: Boris Lykah Owned by:
Priority: Normal Milestone:
Component: UI : Enter Key Version:
Keywords: Support Cc:


Now there is no way to create paragraph inside of a list item. When a user hits either enter or shift-enter, the <li> is split.

I suggest using shift-enter for changing contents within the same list element. It would insert br, split paragraph or division depending on the enter mode.

Attachments (1)

0001-Paragraph-in-list-on-shift-enter.patch (4.0 KB) - added by Piotr Jasiun 6 years ago.

Download all attachments as: .zip

Change History (6)

comment:1 Changed 6 years ago by Piotrek Koszuliński

Component: GeneralUI : Enter Key
Status: newconfirmed

I was investigating the same problem when working on description list plugin. Enter plugin could have special setting for lists that would force creation of new paragraph within the current list item on shift-enter. Perhaps it would be as easy as setting forceMode=true when executing enterBlock in a list item.

Although, when using blocks inside list items we risk having inconsistent structure - some list items will contain just text and some blocks. Styling has to be applied carefully to avoid inconsistent margins.

These two issues are strongly related and perhaps we would also need a setting forcing automatic blocks creation inside list items. It's a lot of work to do.

comment:2 Changed 6 years ago by Boris Lykah

It is not clear if handling of enter key for list item should be within enterkey plugin or list plugin.

In my code there is already some styling for block items within li that removes top margin of the top element and bottom margin of the bottom element. If CKEditor has styles too, that would lead to conflicts in my case. I could override CKEditor styles with my own but I cannot restore original browser styles. Maybe if having multiple block items is disabled by default, we can expect that a user supplies styles for margins along turning them on.

Having an option for automatic block creation would be a nice separate feature.

Changed 6 years ago by Piotr Jasiun

comment:3 Changed 6 years ago by Piotr Jasiun

I have pushed commits to the t/12177 branch and attached patch with the simple solution. Basic scenarios work fine: shift enter in the li element and in the p in li, at the begging, middle and the end of it. I have tested this feather in Chrome 37, Firefox 21, IE 11 and IE 8.

Because integration enterkey plugin with lists is complex (even the check if the element is list occured in 15 places, only in the enterkey plugin) there will be some scenarios in which patch does not behave properly, for example there is no support for nested lists. Also it will not be a part of the core, because it would need complex configuration options: create br, p or new item in the list and br, p or div outside lists on the shift enter. We can develop and support this feather as a custom development.

Version 0, edited 6 years ago by Piotr Jasiun (next)

comment:4 Changed 6 years ago by Piotrek Koszuliński

The hardest part here is testing and implementing the patch in a way that it will not break other scenarios - like nested lists. We tried some hacks in the branch:t/12177, but it proved us that the patch will require a lot of time, because the whole enterBlock function must be reviewed. Then come tests, which would need to be reviewed and completed as well, so we will be sure that there will be no regressions. Finally, adding the configuration means increasing complexity of this code and that means some serious code refactoring to keep it maintainable.

There could be two ways to ship this features - in enterkey plugin (but it would need an additional option) or in a separate plugin or patch. The first way is the longest while the latter is theoretically easier, because no changes will be done to the enterkey plugin, but still there's dozens scenarios to test.

comment:5 Changed 6 years ago by Wiktor Walc

Keywords: Support added
Note: See TracTickets for help on using tickets.
© 2003 – 2020 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy