Merge pull request #12 from paramander/fix/overlapping-marks

Bug: overlapping marks not rendering correctly

Author: tolgap

src/index.js

@@ -17,10 +17,10 @@ const defaultInline = (type, node, key, h) => {
 };
 
 const defaultMarkRenderers = {
-    [MARKS.BOLD]: (text, key, h) => h('strong', { key }, text),
-    [MARKS.ITALIC]: (text, key, h) => h('em', { key }, text),
-    [MARKS.UNDERLINE]: (text, key, h) => h('u', { key }, text),
-    [MARKS.CODE]: (text, key, h) => h('code', { key }, text)
+    [MARKS.BOLD]: (children, key, h) => h('strong', { key }, children),
+    [MARKS.ITALIC]: (children, key, h) => h('em', { key }, children),
+    [MARKS.UNDERLINE]: (children, key, h) => h('u', { key }, children),
+    [MARKS.CODE]: (children, key, h) => h('code', { key }, children)
 };
 
 const defaultNodeRenderers = {
@@ -80,13 +80,14 @@ const defaultNodeRenderers = {
         )
     },
     text: ({ marks, value }, key, h, markRenderer) => {
-        return marks.length
-            ? marks.reduce(
-                  (aggregate, mark, i) =>
-                      markRenderer[mark.type](aggregate, `${key}-${i}`, h),
-                  value
-              )
-            : value;
+        if (!marks.length) {
+            return value;
+        }
+
+        const marksReversed = [...marks].reverse();
+        return marksReversed.reduce((aggregate, mark, i) => (
+            markRenderer[mark.type]([aggregate], `${key}-${i}`, h)
+        ), value)
     }
 };
 

src/index.test.js

@@ -13,39 +13,58 @@ const withDocument = content => {
 
 describe("RichText", () => {
   describe("MARKS", () => {
-    const document = withDocument([
-      {
-        nodeType: BLOCKS.PARAGRAPH,
-        content: [
-          {
-            nodeType: 'text',
-            value: 'Hello',
-            marks: [{ type: MARKS.BOLD }],
-          },
-          {
-            nodeType: 'text',
-            value: ' world!',
-            marks: [{ type: MARKS.ITALIC }],
-          },
-          {
-            nodeType: 'text',
-            value: 'console.log("yo");',
-            marks: [{ type: MARKS.CODE }],
-          },
-          {
-            nodeType: 'text',
-            value: 'Greetings!',
-            marks: [{ type: MARKS.UNDERLINE }],
-          }
-        ],
-      }
-    ]);
-    const rendered = mount(RichText, { propsData: { document } });
+    describe("consecutive marks", () => {
+      const document = withDocument([
+        {
+          nodeType: BLOCKS.PARAGRAPH,
+          content: [
+            {
+              nodeType: 'text',
+              value: 'Hello',
+              marks: [{ type: MARKS.BOLD }],
+            },
+            {
+              nodeType: 'text',
+              value: ' world!',
+              marks: [{ type: MARKS.ITALIC }],
+            },
+            {
+              nodeType: 'text',
+              value: 'console.log("yo");',
+              marks: [{ type: MARKS.CODE }],
+            },
+            {
+              nodeType: 'text',
+              value: 'Greetings!',
+              marks: [{ type: MARKS.UNDERLINE }],
+            }
+          ],
+        }
+      ]);
+      const rendered = mount(RichText, { propsData: { document } });
 
-    it("multimark hello world", () => {
-      expect(rendered.html()).toBe(
-        '<p><strong>Hello</strong><em> world!</em><code>console.log("yo");</code><u>Greetings!</u></p>'
-      );
+      it("renders them all in a single paragraph", () => {
+        expect(rendered.html()).toBe(
+          '<p><strong>Hello</strong><em> world!</em><code>console.log("yo");</code><u>Greetings!</u></p>'
+        );
+      });
+    });
+
+    describe("overlapping marks", () => {
+      const document = withDocument([
+        {
+          nodeType: 'text',
+          value: 'Hello',
+          marks: [{ type: MARKS.BOLD }, { type: MARKS.ITALIC }, { type: MARKS.UNDERLINE }],
+        }
+      ]);
+      const rendered = mount(RichText, { propsData: { document } });
+
+      it("renders all overlapping marks in order", () => {
+        expect(rendered.html()).toBe(
+          '<strong><em><u>Hello</u></em></strong>'
+        );
+      });
     });
   });