Repository: withspectrum/draft-js-markdown-plugin
Pull request #76 (2018-05-15 08:27:49)

Don't auto-insert spaces, unsticky inline styles
This removes the functionality that would automatically insert a space. We needed that because otherwise the inline style would be "sticky", i.e. it would continue to type in e.g. bold if you made bold text.

I now found a proper solution that makes inline styles aren't sticky right after typing them, so I removed the auto-insertion of spaces. This feels soooo goooooood!

Demo: ![](https://i.imgur.com/tdjzP9c.gif)

Live demo to test: https://public-wiuohfhevw.now.sh


Patch:
diff --git a/package.json b/package.json
index 9104897..b0e7402 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "draft-js-markdown-plugin",
-  "version": "2.0.0",
+  "version": "2.0.1-0",
   "description": "A DraftJS plugin for supporting Markdown syntax shortcuts, fork of draft-js-markdown-shortcuts-plugin",
   "main": "lib/index.js",
   "scripts": {
diff --git a/src/modifiers/changeCurrentInlineStyle.js b/src/modifiers/changeCurrentInlineStyle.js
index 08edb2c..c611c76 100644
--- a/src/modifiers/changeCurrentInlineStyle.js
+++ b/src/modifiers/changeCurrentInlineStyle.js
@@ -1,3 +1,4 @@
+import { OrderedSet } from "immutable";
 import { EditorState, SelectionState, Modifier } from "draft-js";
 
 const changeCurrentInlineStyle = (editorState, matchArr, style) => {
@@ -60,7 +61,10 @@ const changeCurrentInlineStyle = (editorState, matchArr, style) => {
     "change-inline-style"
   );
 
-  return EditorState.forceSelection(newEditorState, afterSelection);
+  return EditorState.setInlineStyleOverride(
+    EditorState.forceSelection(newEditorState, afterSelection),
+    OrderedSet.of("")
+  );
 };
 
 export default changeCurrentInlineStyle;
diff --git a/src/modifiers/handleInlineStyle.js b/src/modifiers/handleInlineStyle.js
index 73ae3e3..f494425 100644
--- a/src/modifiers/handleInlineStyle.js
+++ b/src/modifiers/handleInlineStyle.js
@@ -52,8 +52,6 @@ const handleInlineStyle = (
 
     if (character === "\n") {
       newContentState = Modifier.splitBlock(newContentState, selection);
-    } else {
-      newContentState = Modifier.insertText(newContentState, selection, " ");
     }
 
     newEditorState = EditorState.push(


Test patch:
diff --git a/src/modifiers/__test__/handleInlineStyle-test.js b/src/modifiers/__test__/handleInlineStyle-test.js
index 9aaba55..a4f3bcd 100644
--- a/src/modifiers/__test__/handleInlineStyle-test.js
+++ b/src/modifiers/__test__/handleInlineStyle-test.js
@@ -68,7 +68,7 @@ describe("handleInlineStyle", () => {
         blocks: [
           {
             key: "item1",
-            text: "hello inline  style",
+            text: "hello inline style",
             type: "unstyled",
             depth: 0,
             inlineStyleRanges: [
@@ -129,7 +129,7 @@ describe("handleInlineStyle", () => {
         blocks: [
           {
             key: "item1",
-            text: "hello inline  style",
+            text: "hello inline style",
             type: "unstyled",
             depth: 0,
             inlineStyleRanges: [
@@ -174,7 +174,7 @@ describe("handleInlineStyle", () => {
         blocks: [
           {
             key: "item1",
-            text: "hello TL;DR:  style",
+            text: "hello TL;DR: style",
             type: "unstyled",
             depth: 0,
             inlineStyleRanges: [
@@ -219,7 +219,7 @@ describe("handleInlineStyle", () => {
         blocks: [
           {
             key: "item1",
-            text: "hello inline  style",
+            text: "hello inline style",
             type: "unstyled",
             depth: 0,
             inlineStyleRanges: [
@@ -270,7 +270,7 @@ describe("handleInlineStyle", () => {
         blocks: [
           {
             key: "item1",
-            text: "hello inline  style",
+            text: "hello inline style",
             type: "unstyled",
             depth: 0,
             inlineStyleRanges: [
@@ -320,7 +320,7 @@ describe("handleInlineStyle", () => {
         blocks: [
           {
             key: "item1",
-            text: "hello inline  style",
+            text: "hello inline style",
             type: "unstyled",
             depth: 0,
             inlineStyleRanges: [
@@ -365,7 +365,7 @@ describe("handleInlineStyle", () => {
         blocks: [
           {
             key: "item1",
-            text: "hello inline  style",
+            text: "hello inline style",
             type: "unstyled",
             depth: 0,
             inlineStyleRanges: [
@@ -419,7 +419,7 @@ describe("handleInlineStyle", () => {
         blocks: [
           {
             key: "item1",
-            text: "hello inline  style",
+            text: "hello inline style",
             type: "unstyled",
             depth: 0,
             inlineStyleRanges: [