Add medium-draft-exporter build

.npmignore

@@ -12,7 +12,8 @@ wiki/
 coverage/
 
 .travis.yml
-dist/index.html
+dist/*.html
 dist/data.json
 dist/example.js
 test-js
+dist/basic.js

index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <title>Editor</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <style type="text/css">
     body {
       font-size: 18px;
@@ -16,18 +16,11 @@
 
     .md-RichEditor-editor {
         max-width: 700px;
-        /*padding: 0 10px;*/
         background: #fbffff;
-        /*border: 1px solid #eee;*/
-        /*border-radius: 4px;*/
-        /*box-shadow: inset 0px 0px 10px 2px #f7f7f7;*/
     }
     .md-block-atomic-wrapper {
         position: relative;
-        /*padding: 5px;*/
         border: 1px solid #f7f7f7;
-        /*background: #f7ffff;*/
-        /*border-radius: 2px;*/
     }
     .md-block-atomic-embed button {
         background: #fff;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "medium-draft",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "A medium like rich text editor built upon draft-js with an emphasis on eliminating mouse usage by adding relevant keyboard shortcuts",
   "main": "lib/index.js",
   "scripts": {
@@ -9,7 +9,8 @@
     "build": "npm run clean && npm run test && NODE_ENV=production webpack --progress --colors && mv dist/example.css dist/medium-draft.css",
     "babel": "./node_modules/.bin/babel ./src -d lib --ignore '*.spec.js,example.js'",
     "copyCss": "cp dist/medium-draft.css ./lib/index.css && cp dist/basic.css lib/",
-    "npm": "npm run build && npm run babel && npm run copyCss",
+    "buildExporter": "NODE_ENV=production APP_EXPORT_TYPE=exporter webpack --progress --colors",
+    "npm": "npm run build && npm run buildExporter && npm run babel && npm run copyCss",
     "prepublish": "npm run npm",
     "test:lint": "eslint ./src/ --ext .js --ext .jsx --ignore-path .gitignore --cache",
     "test:unit": "NODE_PATH=src babel-node ./node_modules/.bin/isparta cover _mocha -- --growl --compilers js:babel-core/register,css:test-js/css-null-compiler.js --require ./test-js/test_helper.js $(find src -path '*.spec.js')",
@@ -25,14 +26,14 @@
   "author": "Brijesh Bittu <[email protected]> (http://bitwiser.in/)",
   "license": "MIT",
   "dependencies": {
-    "draft-convert": "^1.3.3",
     "draft-js": "^0.9.1",
     "immutable": "^3.7.6",
     "react-addons-css-transition-group": "^15.0.0"
   },
   "peerDependencies": {
     "react": "^15.0.0",
-    "react-dom": "^15.0.0"
+    "react-dom": "^15.0.0",
+    "draft-convert": "^1.3.3"
   },
   "devDependencies": {
     "babel-cli": "^6.10.1",

src/basic.scss

@@ -70,6 +70,13 @@
     }
 }
 
+.md-block-atomic-break {
+    hr {
+        max-width: 100px;
+        border: 2px solid #ccc;
+    }
+}
+
 .md-inline-code {
     font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
     margin: 4px 0px;
@@ -96,6 +103,8 @@
 
 .md-inline-highlight {
     background: yellow;
+    display: inline;
+    padding: 2px 4px;
 }
 
 p {

src/example.js

@@ -71,7 +71,7 @@ const newBlockToHTML = (block) => {
         end: '</figure>',
       };
     } else if (block.text === '-') {
-      return <hr class="md-block-atomic-break" />;
+      return <div className="md-block-atomic md-block-atomic-break"><hr/></div>;
     }
   }
   return blockToHTML(block);

src/exporter.js

@@ -94,6 +94,9 @@ export const blockToHTML = (block) => {
         nest: <ul className={`md-block-${blockType.toLowerCase()}`} />,
       };
     case Block.UNSTYLED:
+      if (block.text.length < 1) {
+        return <p className={`md-block-${blockType.toLowerCase()}`}><br /></p>;
+      }
       return <p className={`md-block-${blockType.toLowerCase()}`} />;
     default: return null;
   }

webpack.config.js

@@ -214,4 +214,30 @@ if (isProd) {
   ];
 }
 
+var appExportType = process.env.APP_EXPORT_TYPE || '';
+
+if (appExportType === 'exporter') {
+  console.log('Building HTML Exporter');
+  options.entry = {
+    'medium-draft-exporter': './exporter',
+  };
+  options.output.library = 'MediumDraftExporter';
+  options.externals.push({
+    'react-dom/server': {
+      root: 'ReactDOMServer',
+      commonjs2: 'react-dom/server',
+      commonjs: 'react-dom/server',
+      amd: 'react-dom/server'
+    }
+  });
+  options.externals.push({
+    'draft-convert': {
+      root: 'DraftConvert',
+      commonjs2: 'draft-convert',
+      commonjs: 'draft-convert',
+      amd: 'draft-convert'
+    }
+  });
+}
+
 module.exports = options;