Indent list content to four spaces

app/assets/javascripts/static_site_editor/services/formatter.js

+import { repeat } from 'lodash';
+
+const topLevelOrderedRegexp = /^\d{1,3}/;
+const nestedLineRegexp = /^\s+/;
+
+/**
+ * DISCLAIMER: This is a temporary fix that corrects the indentation
+ * spaces of list items. This workaround originates in the usage of
+ * the Static Site Editor to edit the Handbook. The Handbook uses a
+ * Markdown parser called Kramdown interprets lines indented
+ * with two spaces as content within a list. For example:
+ *
+ * 1. ordered list
+ *   - nested unordered list
+ *
+ * The Static Site Editor uses a different Markdown parser based on the
+ * CommonMark specification (official Markdown spec) called ToastMark.
+ * When the SSE encounters a nested list with only two spaces, it flattens
+ * the list:
+ *
+ * 1. ordered list
+ * - nested unordered list
+ *
+ * This function attempts to correct this problem before the content is loaded
+ * by Toast UI.
+ */
+const correctNestedContentIndenation = source => {
+  const lines = source.split('\n');
+  let topLevelOrderedListDetected = false;
+
+  return lines
+    .reduce((result, line) => {
+      if (topLevelOrderedListDetected && nestedLineRegexp.test(line)) {
+        return [...result, line.replace(nestedLineRegexp, repeat(' ', 4))];
+      }
+
+      topLevelOrderedListDetected = topLevelOrderedRegexp.test(line);
+      return [...result, line];
+    }, [])
+    .join('\n');
+};
+
 const removeOrphanedBrTags = source => {
   /* Until the underlying Squire editor of Toast UI Editor resolves duplicate `<br>` tags, this
     `replace` solution will clear out orphaned `<br>` tags that it generates. Additionally,
@@ -8,7 +50,7 @@ const removeOrphanedBrTags = source => {
 };
 
 const format = source => {
-  return removeOrphanedBrTags(source);
+  return correctNestedContentIndenation(removeOrphanedBrTags(source));
 };
 
 export default format;

spec/frontend/static_site_editor/services/formatter_spec.js

 import formatter from '~/static_site_editor/services/formatter';
 
-describe('formatter', () => {
+describe('static_site_editor/services/formatter', () => {
   const source = `Some text
 <br>
 
@@ -23,4 +23,17 @@ And even more text`;
   it('removes extraneous <br> tags', () => {
     expect(formatter(source)).toMatch(sourceWithoutBrTags);
   });
+
+  describe('ordered lists with incorrect content indentation', () => {
+    it.each`
+      input                                                   | result
+      ${'12. ordered list item\n13.Next ordered list item'}   | ${'12. ordered list item\n13.Next ordered list item'}
+      ${'12. ordered list item\n - Next ordered list item'}   | ${'12. ordered list item\n    - Next ordered list item'}
+      ${'12. ordered list item\n   - Next ordered list item'} | ${'12. ordered list item\n    - Next ordered list item'}
+      ${'12. ordered list item\n   Next ordered list item'}   | ${'12. ordered list item\n    Next ordered list item'}
+      ${'1. ordered list item\n   Next ordered list item'}    | ${'1. ordered list item\n    Next ordered list item'}
+    `('\ntransforms\n$input \nto\n$result', ({ input, result }) => {
+      expect(formatter(input)).toBe(result);
+    });
+  });
 });