Static Site Editor: Allow to configure the number of sublist indent spaces

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/36756

app/assets/javascripts/vue_shared/components/rich_content_editor/services/build_html_to_markdown_renderer.js

-const buildHTMLToMarkdownRender = baseRenderer => {
+import { defaults, repeat } from 'lodash';
+
+const DEFAULTS = {
+  subListIndentSpaces: 4,
+};
+
+const countIndentSpaces = text => {
+  const matches = text.match(/^\s+/m);
+
+  return matches ? matches[0].length : 0;
+};
+
+const buildHTMLToMarkdownRender = (baseRenderer, formattingPreferences = {}) => {
+  const { subListIndentSpaces } = defaults(formattingPreferences, DEFAULTS);
+  // eslint-disable-next-line @gitlab/require-i18n-strings
+  const sublistNode = 'LI OL, LI UL';
+
   return {
     TEXT_NODE(node) {
       return baseRenderer.getSpaceControlled(
@@ -6,6 +22,31 @@ const buildHTMLToMarkdownRender = baseRenderer => {
         node,
       );
     },
+    /*
+     * This converter overwrites the default indented list converter
+     * to allow us to parameterize the number of indent spaces for
+     * sublists.
+     *
+     * See the original implementation in
+     * https://github.com/nhn/tui.editor/blob/master/libs/to-mark/src/renderer.basic.js#L161
+     */
+    [sublistNode](node, subContent) {
+      const baseResult = baseRenderer.convert(node, subContent);
+      // Default to 1 to prevent possible divide by 0
+      const firstLevelIndentSpacesCount = countIndentSpaces(baseResult) || 1;
+      const reindentedList = baseResult
+        .split('\n')
+        .map(line => {
+          const itemIndentSpacesCount = countIndentSpaces(line);
+          const nestingLevel = Math.ceil(itemIndentSpacesCount / firstLevelIndentSpacesCount);
+          const indentSpaces = repeat(' ', subListIndentSpaces * nestingLevel);
+
+          return line.replace(/^ +/, indentSpaces);
+        })
+        .join('\n');
+
+      return reindentedList;
+    },
   };
 };
 

changelogs/unreleased/227598-list-format-static-site-editor.yml

+---
+title: 'Static Site Editor: Set default sublist indent spaces to four space characters'
+merge_request: 36756
+author:
+type: changed

spec/frontend/vue_shared/components/rich_content_editor/services/build_html_to_markdown_renderer_spec.js

@@ -10,15 +10,41 @@ describe('HTMLToMarkdownRenderer', () => {
       trim: jest.fn(input => `trimmed ${input}`),
       getSpaceCollapsedText: jest.fn(input => `space collapsed ${input}`),
       getSpaceControlled: jest.fn(input => `space controlled ${input}`),
+      convert: jest.fn(),
     };
-    htmlToMarkdownRenderer = buildHTMLToMarkdownRenderer(baseRenderer);
   });
 
   describe('TEXT_NODE visitor', () => {
     it('composes getSpaceControlled, getSpaceCollapsedText, and trim services', () => {
+      htmlToMarkdownRenderer = buildHTMLToMarkdownRenderer(baseRenderer);
+
       expect(htmlToMarkdownRenderer.TEXT_NODE(NODE)).toBe(
         `space controlled trimmed space collapsed ${NODE.nodeValue}`,
       );
     });
   });
+
+  describe('LI OL, LI UL visitor', () => {
+    const oneLevelNestedList = '\n    * List item 1\n    * List item 2';
+    const twoLevelNestedList = '\n  * List item 1\n    * List item 2';
+    const spaceInContentList = '\n  * List    item 1\n  * List item 2';
+
+    it.each`
+      list                  | indentSpaces | result
+      ${oneLevelNestedList} | ${2}         | ${'\n  * List item 1\n  * List item 2'}
+      ${oneLevelNestedList} | ${3}         | ${'\n   * List item 1\n   * List item 2'}
+      ${oneLevelNestedList} | ${6}         | ${'\n      * List item 1\n      * List item 2'}
+      ${twoLevelNestedList} | ${4}         | ${'\n    * List item 1\n        * List item 2'}
+      ${spaceInContentList} | ${1}         | ${'\n * List    item 1\n * List item 2'}
+    `('changes the list indentation to $indentSpaces spaces', ({ list, indentSpaces, result }) => {
+      htmlToMarkdownRenderer = buildHTMLToMarkdownRenderer(baseRenderer, {
+        subListIndentSpaces: indentSpaces,
+      });
+
+      baseRenderer.convert.mockReturnValueOnce(list);
+
+      expect(htmlToMarkdownRenderer['LI OL, LI UL'](NODE, list)).toBe(result);
+      expect(baseRenderer.convert).toHaveBeenCalledWith(NODE, list);
+    });
+  });
 });