Merge pull request #73 from withspectrum/new-bold-and-italic

Trigger markdown on any character and change markdown implementation

Author: mxstbr

README.md

@@ -17,9 +17,64 @@ A [DraftJS] plugin for supporting Markdown syntax shortcuts in DraftJS. This plu
 npm i --save draft-js-markdown-plugin
 ```
 
+## Usage
+
+```js
+import React, { Component } from 'react';
+import Editor from 'draft-js-plugins-editor';
+import createMarkdownPlugin from 'draft-js-markdown-plugin';
+import { EditorState } from 'draft-js';
+
+export default class DemoEditor extends Component {
+
+  state = {
+    editorState: EditorState.createEmpty(),
+    plugins: [createMarkdownPlugin()]
+  };
+
+  onChange = (editorState) => {
+    this.setState({
+      editorState,
+    });
+  };
+
+  render() {
+    return (
+      <Editor
+        editorState={this.state.editorState}
+        onChange={this.onChange}
+        plugins={this.state.plugins}
+      />
+    );
+  }
+}
+```
+
+### Add code block syntax highlighting
+
+Using the [`draft-js-prism-plugin`](https://github.com/withspectrum/draft-js-prism-plugin) you can easily add syntax highlighting support to your code blocks!
+
+```JS
+// Install prismjs and draft-js-prism-plugin
+import Prism from 'prismjs';
+import createPrismPlugin from 'draft-js-prism-plugin';
+
+class Editor extends Component {
+  state = {
+    plugins: [
+      // Add the Prism plugin to the plugins array 
+      createPrismPlugin({
+        prism: Prism
+      }),
+      createMarkdownPlugin()
+    ]
+  }
+}
+```
+
 ## Options
-The `draft-js-markdown-plugin` is configurable. Just pass a config object. Here are the available options:
 
+The `draft-js-markdown-plugin` is configurable. Just pass a config object. Here are the available options:
 
 ### `renderLanguageSelect`
 
@@ -152,61 +207,6 @@ const markdownPlugin = createMarkdownPlugin({ entityType });
 const editorPlugins = [focusPlugin, imagePlugin, markdownPlugin];
 ```
 
-## Usage
-
-```js
-import React, { Component } from 'react';
-import Editor from 'draft-js-plugins-editor';
-import createMarkdownPlugin from 'draft-js-markdown-plugin';
-import { EditorState } from 'draft-js';
-
-export default class DemoEditor extends Component {
-
-  state = {
-    editorState: EditorState.createEmpty(),
-    plugins: [createMarkdownPlugin()]
-  };
-
-  onChange = (editorState) => {
-    this.setState({
-      editorState,
-    });
-  };
-
-  render() {
-    return (
-      <Editor
-        editorState={this.state.editorState}
-        onChange={this.onChange}
-        plugins={this.state.plugins}
-      />
-    );
-  }
-}
-```
-
-### Add code block syntax highlighting
-
-Using the [`draft-js-prism-plugin`](https://github.com/withspectrum/draft-js-prism-plugin) you can easily add syntax highlighting support to your code blocks!
-
-```JS
-// Install prismjs and draft-js-prism-plugin
-import Prism from 'prismjs';
-import createPrismPlugin from 'draft-js-prism-plugin';
-
-class Editor extends Component {
-  state = {
-    plugins: [
-      // Add the Prism plugin to the plugins array 
-      createPrismPlugin({
-        prism: Prism
-      }),
-      createMarkdownPlugin()
-    ]
-  }
-}
-```
-
 ## Why fork the `markdown-shortcuts-plugin`?
 
 Writing is a core part of our app, and while the `markdown-shortcuts-plugin` is awesome and battle-tested there are a few opinionated things we wanted to do differently. Rather than bother [@ngs](https://github.com/ngs) with tons of PRs, we figured it'd be better to own that core part of our experience fully. 

src/__test__/plugin.test.js

@@ -228,37 +228,6 @@ describe("draft-js-markdown-plugin", () => {
           expect(store.setEditorState).toHaveBeenCalledWith(newEditorState);
         });
 
-        it("adds list item and transforms markdown", () => {
-          // createMarkdownPlugin.__Rewire__("leaveList", modifierSpy); // eslint-disable-line no-underscore-dangle
-          currentRawContentState = {
-            entityMap: {},
-            blocks: [
-              {
-                key: "item1",
-                text: "**some bold text**",
-                type: "unordered-list-item",
-                depth: 0,
-                inlineStyleRanges: [],
-                entityRanges: [],
-                data: {},
-              },
-            ],
-          };
-          currentSelectionState = currentSelectionState.merge({
-            focusOffset: 18,
-            anchorOffset: 18,
-          });
-          expect(subject()).toBe("handled");
-          // expect(modifierSpy).toHaveBeenCalledTimes(1);
-          expect(store.setEditorState).toHaveBeenCalledTimes(1);
-          newEditorState = store.setEditorState.mock.calls[0][0];
-          const newRawContentState = Draft.convertToRaw(
-            newEditorState.getCurrentContent()
-          );
-          expect(newRawContentState.blocks.length).toBe(2);
-          expect(newEditorState.getCurrentInlineStyle().size).toBe(0);
-        });
-
         const emptyBlockTypes = [
           "blockquote",
           "header-one",

src/constants.js

@@ -3,10 +3,10 @@ import { CHECKABLE_LIST_ITEM } from "draft-js-checkable-list-item";
 export const CODE_BLOCK_REGEX = /^```([\w-]+)?\s*$/;
 
 export const inlineMatchers = {
-  BOLD: [/\*\*(.+)\*\*$/g, /__(.+)__$/g],
-  ITALIC: [/\*(.+)\*$/g, /_(.+)_$/g],
-  CODE: [/`(.+)`$/g],
-  STRIKETHROUGH: [/~~(.+)~~$/g],
+  BOLD: [/\*(.+)\*$/g],
+  ITALIC: [/_(.+)_$/g],
+  CODE: [/`([^`]+)`$/g],
+  STRIKETHROUGH: [/~(.+)~$/g],
 };
 
 export const CODE_BLOCK_TYPE = "code-block";

src/index.js

@@ -29,7 +29,7 @@ import insertText from "./modifiers/insertText";
 import changeCurrentBlockType from "./modifiers/changeCurrentBlockType";
 import createLinkDecorator from "./decorators/link";
 import createImageDecorator from "./decorators/image";
-import { replaceText } from "./utils";
+import { replaceText, getCurrentLine } from "./utils";
 import {
   CODE_BLOCK_REGEX,
   CODE_BLOCK_TYPE,
@@ -57,7 +57,7 @@ const defaultLanguages = {
   swift: "Swift",
 };
 
-const INLINE_STYLE_CHARACTERS = [" ", "*", "_"];
+const INLINE_STYLE_CHARACTERS = ["*", "_", "`", "~"];
 
 const defaultRenderSelect = ({ options, onChange, selectedValue }) => (
   <select value={selectedValue} onChange={onChange}>
@@ -341,16 +341,16 @@ const createMarkdownPlugin = (_config = {}) => {
       return "not-handled";
     },
     handleBeforeInput(character, editorState, { setEditorState }) {
-      if (character !== " ") {
-        return "not-handled";
-      }
-
       // If we're in a code block - don't transform markdown
       if (inCodeBlock(editorState)) return "not-handled";
 
       // If we're in a link - don't transform markdown
       if (inLink(editorState)) return "not-handled";
 
+      // Don't let users type two spaces after another
+      if (character === " " && getCurrentLine(editorState).slice(-1) === " ")
+        return "handled";
+
       const newEditorState = checkCharacterForState(
         config,
         editorState,