Merge pull request #136 from onebar/unstick-styles-in-the-beginning-of-line

correct how we unstick styles in the beginning of the line

Author: mxstbr

src/__test__/__snapshots__/plugin-new.test.js.snap

@@ -45,3 +45,35 @@ Object {
   "entityMap": Object {},
 }
 `;
+
+exports[`markdown should not have sticky inline styles after the line ending with styles 1`] = `
+Object {
+  "blocks": Array [
+    Object {
+      "data": Object {},
+      "depth": 0,
+      "entityRanges": Array [],
+      "inlineStyleRanges": Array [
+        Object {
+          "length": 4,
+          "offset": 5,
+          "style": "BOLD",
+        },
+      ],
+      "key": "item1",
+      "text": "Some text",
+      "type": "unstyled",
+    },
+    Object {
+      "data": Object {},
+      "depth": 0,
+      "entityRanges": Array [],
+      "inlineStyleRanges": Array [],
+      "key": "item2",
+      "text": "a",
+      "type": "unstyled",
+    },
+  ],
+  "entityMap": Object {},
+}
+`

src/__test__/plugin-new.test.js

@@ -111,4 +111,49 @@ describe("markdown", () => {
     expect(raw.blocks[0].inlineStyleRanges[0]).toEqual(boldInlineStyleRange);
     expect(raw).toMatchSnapshot();
   });
+
+  it("should not have sticky inline styles after the line ending with styles", () => {
+    const { handleBeforeInput } = createMarkdownPlugin();
+    const setEditorState = jest.fn();
+    const boldInlineStyleRange = {
+      length: 4,
+      offset: 5,
+      style: "BOLD",
+    };
+    const before = EditorState.moveSelectionToEnd(
+      EditorState.createWithContent(
+        Draft.convertFromRaw({
+          entityMap: {},
+          blocks: [
+            {
+              key: "item1",
+              text: "Some text",
+              type: "unstyled",
+              depth: 0,
+              inlineStyleRanges: [boldInlineStyleRange],
+              entityRanges: [],
+              data: {},
+            },
+            {
+              key: "item2",
+              text: "",
+              type: "unstyled",
+              depth: 0,
+              inlineStyleRanges: [],
+              entityRanges: [],
+              data: {},
+            },
+          ],
+        })
+      )
+    );
+    expect(handleBeforeInput("a", before, { setEditorState })).toEqual(
+      "handled"
+    );
+    const raw = convertToRaw(
+      setEditorState.mock.calls[0][0].getCurrentContent()
+    );
+    expect(raw.blocks[0].inlineStyleRanges[0]).toEqual(boldInlineStyleRange);
+    expect(raw).toMatchSnapshot();
+  });
 });

src/index.js

@@ -209,13 +209,22 @@ const unstickyInlineStyles = (character, editorState) => {
   const startOffset = selection.getStartOffset();
   const content = editorState.getCurrentContent();
   const block = content.getBlockForKey(selection.getStartKey());
+  const previousBlock = content.getBlockBefore(block.getKey());
   const entity = block.getEntityAt(startOffset - 1);
   if (entity !== null) return editorState;
 
   // If we're currently in a style, but the next character doesn't have a style (or doesn't exist)
   // we insert the characters manually without the inline style to "unsticky" them
-  const style = block.getInlineStyleAt(startOffset - 1);
-  if (style.size === 0) return editorState;
+  if (!startOffset && previousBlock) {
+    // If we're in the beginning of the line we have to check styles of the previous block
+    const previousBlockStyle = previousBlock.getInlineStyleAt(
+      previousBlock.getText().length - 1
+    );
+    if (previousBlockStyle.size === 0) return editorState;
+  } else {
+    const style = block.getInlineStyleAt(startOffset - 1);
+    if (style.size === 0) return editorState;
+  }
   const nextStyle = block.getInlineStyleAt(startOffset);
   if (nextStyle.size !== 0) return editorState;