Add quote decorator

Author: ngs

src/boldDecorator/Bold/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { bold as boldRE } from '../regexp';
+import { bold1, bold2 } from '../regexp';
 import replaceLeafContent from '../../utils/replaceLeafContent';
 
 export default class Bold extends React.Component {
@@ -12,6 +12,6 @@ export default class Bold extends React.Component {
       return React.createElement(component, this.props);
     }
     const leaf = children[0];
-    return <strong>{replaceLeafContent(leaf, (text) => text.replace(boldRE, '$2'))}</strong>;
+    return <strong>{replaceLeafContent(leaf, (text) => text.replace(bold1, '$1').replace(bold2, '$1'))}</strong>;
   }
 }

src/boldDecorator/boldStrategy.js

@@ -1,8 +1,9 @@
 import findWithRegex from 'find-with-regex';
-import { bold as boldRE } from './regexp';
+import { bold1, bold2 } from './regexp';
 
 const findBold = (contentBlock, callback) => {
-  findWithRegex(boldRE, contentBlock, callback);
+  findWithRegex(bold1, contentBlock, callback);
+  findWithRegex(bold2, contentBlock, callback);
 };
 
 export default findBold;

src/boldDecorator/regexp.js

@@ -1 +1,2 @@
-export const bold = /(\*\*|__)([^\1]+)\1/g;
+export const bold1 = /\*\*([^(?:**)]+)\*\*/g;
+export const bold2 = /__([^(?:__)]+)__/g;

src/emphasisDecorator/Emphasis/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { emphasis as emphasisRE } from '../regexp';
+import { emphasis1, emphasis2 } from '../regexp';
 import replaceLeafContent from '../../utils/replaceLeafContent';
 
 export default class Emphasis extends React.Component {
@@ -12,6 +12,6 @@ export default class Emphasis extends React.Component {
       return React.createElement(component, this.props);
     }
     const leaf = children[0];
-    return <em>{replaceLeafContent(leaf, (text) => text.replace(emphasisRE, '$2'))}</em>;
+    return <em>{replaceLeafContent(leaf, (text) => text.replace(emphasis1, '$1').replace(emphasis2, '$1'))}</em>;
   }
 }

src/emphasisDecorator/emphasisStrategy.js

@@ -1,8 +1,9 @@
 import findWithRegex from 'find-with-regex';
-import { emphasis as emphasisRE } from './regexp';
+import { emphasis1, emphasis2 } from './regexp';
 
 const findEmphasis = (contentBlock, callback) => {
-  findWithRegex(emphasisRE, contentBlock, callback);
+  findWithRegex(emphasis1, contentBlock, callback);
+  findWithRegex(emphasis2, contentBlock, callback);
 };
 
 export default findEmphasis;

src/emphasisDecorator/regexp.js

@@ -1 +1,2 @@
-export const emphasis = /(\*|_)([^\1]+)\1/g;
+export const emphasis1 = /\*([^*]+)\*/g;
+export const emphasis2 = /_([^_]+)_/g;

src/index.js

@@ -6,6 +6,7 @@ import createLinkDecorator from './linkDecorator';
 import createBoldDecorator from './boldDecorator';
 import createEmphasisDecorator from './emphasisDecorator';
 import createStriketroughDecorator from './strikethroughDecorator';
+import createQuoteDecorator from './quoteDecorator';
 
 const store = {};
 
@@ -15,6 +16,7 @@ const createMarkdownShortcutsPlugin = (config = {}) => ({
     createCheckboxDecorator(config, store),
     createLinkDecorator(config, store),
     createBoldDecorator(config, store),
+    createQuoteDecorator(config, store),
     createEmphasisDecorator(config, store),
     createStriketroughDecorator(config, store),
     createHeadingDecorator({ level: 1 }, store),
@@ -35,7 +37,8 @@ const createMarkdownShortcutsPlugin = (config = {}) => ({
     return 'not-handled';
   },
   onChange(editorState) {
-    console.info(editorState);
+    // console.info(editorState.toJS());
+    window.editorState = editorState;
     return editorState;
   }
 });

src/quoteDecorator/Quote/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { quote as quoteRE } from '../regexp';
+import replaceLeafContent from '../../utils/replaceLeafContent';
+
+export default class Quote extends React.Component {
+
+  static displayName = 'MarkdownQuote';
+
+  render() {
+    const { component, children } = this.props;
+    if (component) {
+      return React.createElement(component, this.props);
+    }
+    const leaf = children[0];
+    return <q>{replaceLeafContent(leaf, (text) => text.replace(quoteRE, '$1'))}</q>;
+  }
+}

src/quoteDecorator/index.js

@@ -0,0 +1,10 @@
+import decorateComponentWithProps from 'decorate-component-with-props';
+import strategy from './quoteStrategy';
+import Quote from './Quote';
+
+const createHeadingDecorator = () => {
+  const component = decorateComponentWithProps(Quote, {});
+  return { strategy, component };
+};
+
+export default createHeadingDecorator;

src/quoteDecorator/quoteStrategy.js

@@ -0,0 +1,8 @@
+import findWithRegex from 'find-with-regex';
+import { quote as quoteRE } from './regexp';
+
+const findStrikethrough = (contentBlock, callback) => {
+  findWithRegex(quoteRE, contentBlock, callback);
+};
+
+export default findStrikethrough;