Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support adjacent lists (splitting, resetting numbering) #13945

Closed
1 task done
Witoso opened this issue Apr 24, 2023 · 5 comments
Closed
1 task done

Support adjacent lists (splitting, resetting numbering) #13945

Witoso opened this issue Apr 24, 2023 · 5 comments
Labels
Epic package:list squad:core Issue to be handled by the Core team. type:improvement This issue reports a possible enhancement of an existing feature.
Milestone
iteration 64 (v38...

Comments

@Witoso
Copy link
Member

Witoso commented Apr 24, 2023 •
edited
Loading

Use cases

As a user, I want to insert content (paste/import) that has two or more lists of the same type one after the other, and I want the editor to preserve this markup.

We don’t want to break the good UX of the lists. You rarely want to type in the editor two lists of the same type without indentation etc. That’s why we shouldn’t degrade the UX of the current solution. The editor will accept such data via Source, pasting, import but it will not be possible to type such lists. The problem may appear when someone by mistake deletes such lists (undo should work) or wants to tweak them.

Scope

  • When pasting content that has adjacent lists of the same time in the HTML markup, we preserve those to lists.
    • Paste from office.
    • Source editing.
  • Documentation refresh.

Out of scope

  • Ability to type/create such lists from the UI.
  • Handling this case in the basic Lists plugin. This will only be handled in the Document lists plugin.
  • Nested <ol>'s that created nested lists. 
    <ol style="margin-top:0in" start="1" type="1">
  <li class="MsoNormal" style="color:#4E444A;vertical-align:middle"><span style="font-size:11.0pt;font-family:&quot;Calibri&quot;,sans-serif">Item</span></li>
</ol>

<ol style="margin-top:0in" start="1" type="1">
  <ol style="margin-top:0in" start="1" type="a">
    <li class="MsoNormal" style="color:#4E444A;vertical-align:middle"><span style="font-size:11.0pt;font-family:&quot;Calibri&quot;,sans-serif">Subitem</span></li>
  </ol>
</ol>

Other thoughts

  • this should not be set by default. It should be enabled by some configuration or something similar.

Tasks

If you'd like to see this improvement implemented, add a 👍 reaction to this post.
@Witoso Witoso added type:improvement This issue reports a possible enhancement of an existing feature. Epic package:list squad:core Issue to be handled by the Core team. labels Apr 24, 2023
@Witoso
Copy link
Member Author

Witoso commented Apr 24, 2023

Example #1

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper lacinia
  metus et blandit. Morbi sed enim et dolor tincidunt ultricies non vel mi.
  Proin elementum sapien sit amet magna volutpat, nec cursus odio euismod.
  Suspendisse potenti. Nullam urna dolor, luctus in lectus ut, ultrices luctus
  ex. Vivamus sit amet eros nisl. Aliquam erat volutpat. Etiam fermentum mi vel
  congue mollis. Fusce blandit sem ut erat elementum gravida. Vivamus lorem
  diam, porta eu sodales sed, auctor ut dui..
</p>
<p>Lorem ipsum dolor sit amet, co.</p>
<p>WITNESSETH:</p>
<ol style="list-style-type: upper-latin">
  <li><p>Lorem ipsum dolor sit amet, co</p></li>
  <li><p>WHEREAS, Lorem ipsum dolor sit amet, co</p></li>
  <li><p>WHEREAS, Lorem ipsum dolor sit amet, co.</p></li>
</ol>
<p><strong>Lorem ipsum dolor sit amet, co:</strong></p>
<ol style="list-style-type: decimal">
  <li><p>SAMPLE 1</p></li>
</ol>
<ol style="list-style-type: lower-latin">
  <li><p>Lorem ipsum dolor sit amet, coLorem ipsum dolor sit amet, co</p></li>
</ol>
<ol start="2" style="list-style-type: decimal">
  <li><p>BASIC SERVICES</p></li>
</ol>
<ol style="list-style-type: lower-latin">
  <li>
    <p>
      Lorem ipsum dolor sit amet, co <strong>('Services')</strong> Lorem ipsum
      dolor sit amet, co
    </p>
  </li>
</ol>
<ol start="3" style="list-style-type: decimal">
  <li><p>Sample3</p></li>
</ol>

@Witoso
Copy link
Member Author

Witoso commented Apr 24, 2023

Example #2

<p class="MsoNormal"><span lang="EN-US" style="mso-fareast-font-family:" Times New Roman""> Lorem ipsum dolor sit amet, consectetur adipiscing elit.: <o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:18.0pt"><span lang="EN-US" style="mso-fareast-font-family:" Times New
        Roman""></span></p>
<ol>
    <li class="MsoListParagraphCxSpFirst"
        style="margin-left:18.0pt;mso-add-space:auto;mso-list:l3 level1 lfo1;text-indent:-18.0pt"><span lang="EN-US"
            style="mso-fareast-font-family:Calibri"></span><span lang="EN-US">The </span><span lang="EN-US"
            style="mso-fareast-font-family:" Times New Roman"">Redacted</span><span lang="EN-US"> </span><span
            lang="EN-US" style="mso-fareast-font-family:" Times New Roman"">Redacted</span><span lang="EN-US"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span><span lang="EN-US" style="mso-fareast-font-family:" Times New
            Roman"">Redacted</span><span lang="EN-US">. <o:p></o:p></span></li>
</ol>
<p class="MsoListParagraphCxSpMiddle" style="margin-left:18.0pt;mso-add-space:auto"><span lang="EN-US"></span></p>
<ol style="list-style-type:lower-alpha">
    <li class="MsoListParagraphCxSpMiddle"
        style="margin-left:54.0pt;mso-add-space:auto;mso-list:l1 level1 lfo2;text-indent:-18.0pt"><span lang="EN-US"
            style="mso-fareast-font-family:Calibri"></span><span lang="EN-US">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><span lang="EN-US" style="mso-fareast-font-family:" Times New Roman"">Redacted</span><span
            lang="EN-US">, Lorem ipsum dolor sit amet, consectetur adipiscing elit.<o:p></o:p></span></li>
    <li class="MsoListParagraphCxSpMiddle"
        style="margin-left:54.0pt;mso-add-space:auto;mso-list:l1 level1 lfo2;text-indent:-18.0pt"><span lang="EN-US"
            style="mso-fareast-font-family:Calibri"></span><span lang="EN-US">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span><span lang="EN-US" style="mso-fareast-font-family:" Times New
            Roman"">Redacted</span><span lang="EN-US">, Lorem ipsum dolor sit amet, consectetur adipiscing elit.<o:p></o:p></span></li>
</ol>
<ol>
    <li class="MsoListParagraphCxSpMiddle"
        style="margin-left:18.0pt;mso-add-space:auto;mso-list:l3 level1 lfo1;text-indent:-18.0pt"><span lang="EN-US"
            style="mso-fareast-font-family:Calibri"></span><span lang="EN-US">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><span lang="EN-US"
            style="mso-fareast-font-family:" Times New Roman"">Redacted Redacted</span><span lang="EN-US"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.<o:p></o:p></span></li>
    <li class="MsoListParagraphCxSpMiddle"
        style="margin-left:18.0pt;mso-add-space:auto;mso-list:l3 level1 lfo1;text-indent:-18.0pt"><span lang="EN-US"
            style="mso-fareast-font-family:Calibri"></span><b style="mso-bidi-font-weight:normal"><span lang="EN-US"
                style="mso-fareast-font-family:" Times New Roman"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                (R)</span></b><span lang="EN-US" style="mso-fareast-font-family:" Times New Roman"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><span lang="EN-US"> </span><span lang="EN-US"
            style="mso-fareast-font-family:" Times New Roman"">Redacted</span><span lang="EN-US"> </span><span
            lang="EN-US" style="mso-fareast-font-family:" Times New Roman"">will:<o:p></o:p></span></li>
</ol>

@Witoso
Copy link
Member Author

Witoso commented Apr 24, 2023 •
edited
Loading

If we go this way, a lot of current cases need to be written, e.g. when we want to join them and not.

  1. If we load a list for all ol/ul we need to have separate id's (model's attribute).
  2. If we remove something between lists of the same type, they should merge.
  3. If we change the block before/after lists to a list item, the lists should merge.
  4. (indet/outdent logic).
  5. ...and more...

@Witoso
Copy link
Member Author

Witoso commented Apr 24, 2023 •
edited
Loading

TBD: List separator idea.

The visual separator as a block widget, shown on the UI, between lists. No UI option for adding it.

@Witoso Witoso mentioned this issue May 5, 2023
Closed
@CKEditorBot CKEditorBot added the status:in-progress Set automatically when an issue lands in the "In progress" column. We are working on it. label May 10, 2023
@Witoso Witoso added this to the iteration 64 milestone Jun 6, 2023
@Witoso
Copy link
Member Author

Witoso commented Jun 6, 2023

We implemented a list separator in the model via the AdjacentListsSupport plugin (opt-in).

@Witoso Witoso closed this as completed Jun 6, 2023
@CKEditorBot CKEditorBot removed the status:in-progress Set automatically when an issue lands in the "In progress" column. We are working on it. label Jun 6, 2023
@star-szr star-szr mentioned this issue Sep 6, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Epic package:list squad:core Issue to be handled by the Core team. type:improvement This issue reports a possible enhancement of an existing feature.
Projects
None yet
Milestone
iteration 64 (v38.1.0)
Development

No branches or pull requests
2 participants
@Witoso @CKEditorBot