1 files changed, 43 insertions, 1 deletions
diff --git a/app/assets/javascripts/static_site_editor/services/formatter.js b/app/assets/javascripts/static_site_editor/services/formatter.js
index 92d5e8a5df8..9a5dcd307eb 100644
--- a/app/assets/javascripts/static_site_editor/services/formatter.js
+++ b/app/assets/javascripts/static_site_editor/services/formatter.js
@@ -1,3 +1,45 @@
+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;