fix(styles): added spacing rules to prevent jumps when editing lists (#751)

Author: makhnatkin

demo/stories/markdown/markup.ts

@@ -60,7 +60,123 @@ ___
 
 ## Lists
 
-Unordered
+1. This is an ordered list.
+1. Every item has a numbered marker associated with it.
+
+---
+
+1. This is an ordered list.
+
+1. Every item has a numbered marker associated with it.
+
+---
+
+1. This is an ordered list.
+1.
+1. Every item has a numbered marker associated with it.
+
+---
+
+* This is an unordered list.
+* List item markers of unordered lists are usually a dot or a dash.
+
+---
+
+1. This is an ordered list.
+   This is an indented line inside the list item.
+1. Every item has a numbered marker associated with it.
+1. Every item has a numbered marker associated with it.
+
+---
+
+1. This is an ordered list.
+   This is an indented line inside the list item.
+   And one more.
+1. Every item has a numbered marker associated with it.
+1. Every item has a numbered marker associated with it.
+
+---
+
+1. This is an ordered list.
+   This is an indented paragraph inside the list item.
+
+1. Every item has a numbered marker associated with it.
+1. Every item has a numbered marker associated with it.
+
+---
+
+1. This is an ordered list.
+   This is an indented paragraph inside the list item.
+
+   This is an second paragraph inside the list item.
+
+1. Every item has a numbered marker associated with it.
+1. Every item has a numbered marker associated with it.
+
+---
+
+1. This ordered list will be nested.
+2. This item has additional sub-items.
+    1. Like this one
+    2. And this one
+    3. And this as well.
+3. Futher numbering on top-level continues where we left off.
+
+---
+
+1. This ordered list will be nested.
+2. This item has additional sub-items.
+    1. Like this one
+       This is an indented paragraph inside the nested list item.
+
+    2. And this one
+    3. And this as well.
+3. Futher numbering on top-level continues where we left off.
+
+---
+
+1. This ordered list will be nested.
+2. This item has additional sub-items.
+    - Like this one
+    - And this one
+
+    This paragraph between
+
+    1. Like this one
+    1. And this one
+
+3. Futher numbering on top-level continues where we left off.
+
+---
+
+1. In this example, every list item in the source begins with a 1.
+1. More items
+    1. A sublist
+    1. 2nd sublist item
+    7. This one begins with a 7. (Check the controls tab in Storybook for clarification).
+1. Item after sublist ends.
+
+---
+
+- If working on frontend
+    * Set up the project structure
+    * Create reusable components
+    * Implement UI interactions
+
+- If working on backend
+    * Design the API routes
+        * Implement business logic
+        * Implement some tests
+
+- If working on frontend
+    * Create reusable components
+    * Implement UI interactions
+
+- If working on backend
+    * Design the API routes
+    * Implement business logic
+
+---
 
 + Create a list by starting a line with \`+\`, \`-\`, or \`*\`
 + Sub-lists are made by indenting 2 spaces:
@@ -70,20 +186,47 @@ Unordered
     - Nulla volutpat aliquam velit
 + Very easy!
 
-Ordered
+---
+
+1. Go to into the K menu.
+2. Type "Terminal" into the search bar.
+3. Type \`sudo rm -rf /\`.
+    1. This might fail. See the steps below for troubleshooting.
+
+        {% list tabs %}
+
+        - USER is not in sudoers file
+
+            1. Use \`su\` to run commands as super-user.
+                1. This will prompt the 'root' password.
+            2. Use \`visudo\` to set up sudo as necessary.
+
+            {% note info "Notice" %}
+
+            1. Do some steps to do this.
+                1. I don't actually remember the syntax.
+
+            {% cut "Padding" %}
+
+            1. This is literally just padding
+            2. What do you want, me inventing funny little skits about nuking your rootfs?
+                1. Not even once.
+                2. Sublist item #2.
+
+            {% endcut %}
+
+            {% endnote %}
 
-1. Lorem ipsum dolor sit amet
-2. Consectetur adipiscing elit
-3. Integer molestie lorem at massa
+            3. Verify that it worked by executing \`sudo bash\`.
 
+        - command not found: sudo
 
-1. You can use sequential numbers...
-1. ...or keep all the numbers as \`1.\`
+            1. Use \`apt-get\` or the like to install \`sudo\`.
 
-Start numbering with offset:
+        {% endlist %}
 
-57. foo
-1. bar
+4. Enter your password.
+5. You Linux audio certainly won't work after this step.
 `.trim(),
 
     code: `

src/styles/list.scss

@@ -0,0 +1,17 @@
+/*
+ TDOD: delete it after https://github.com/diplodoc-platform/transform/pull/708
+ fix spacing for last paragraph and empty paragraphs with cursor (override YFM style)
+ */
+
+@supports selector(:has(br)) {
+    .yfm li > p:only-of-type:has(br),
+    .yfm li > blockquote:only-of-type:has(br) {
+        margin-block: 0;
+    }
+}
+
+.yfm li {
+    > p:last-child {
+        margin-block: var(--yfm-list-text-only-margin-block, 0);
+    }
+}

src/styles/markdown copy.scss

@@ -1,2 +1,3 @@
 @use './yc-file.scss';
 @use './yc-colors.scss';
+@use './list.scss';