Implemented html exporter

brijeshb42 · Jan 24, 2017 · 4ed6926 · 4ed6926
1 parent ba44067
commit 4ed6926
Show file tree

Hide file tree

Showing 8 changed files with 382 additions and 23 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -8,7 +8,8 @@
     "no-underscore-dangle": [0],
     "react/jsx-filename-extension": [0, { "extensions": [".js", ".jsx"] }],
     "new-cap": [0],
-    "react/require-extension": "off"
+    "react/require-extension": "off",
+    "max-len": [0]
   },
   "globals": {
     "describe": true,

diff --git a/index.html b/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;

diff --git a/package.json b/package.json
@@ -5,10 +5,10 @@
   "main": "lib/index.js",
   "scripts": {
     "clean": "rm -f dist/*.js && rm -f dist/*.css && rm -rf lib",
-    "dev": "mkdir -p dist && cp index.html dist/index.html && cp docs/data.json dist/data.json && NODE_ENV=development webpack-dev-server --host 0.0.0.0 --devtool eval --content-base dist/ --progress --colors --hot",
+    "dev": "mkdir -p dist && cp index.html dist/index.html && cp rendered.html dist/rendered.html && cp docs/data.json dist/data.json && NODE_ENV=development webpack-dev-server --host 0.0.0.0 --devtool eval --content-base dist/ --progress --colors --hot",
     "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,exporter.js'",
-    "copyCss": "cp dist/medium-draft.css ./lib/index.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",
     "prepublish": "npm run npm",
     "test:lint": "eslint ./src/ --ext .js --ext .jsx --ignore-path .gitignore --cache",
@@ -25,6 +25,7 @@
   "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"

diff --git a/rendered.html b/rendered.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Rendered Content | medium-draft</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    body {
+      font-family: CustomSerif,Georgia,Cambria,'Times New Roman',serif;
+      margin: 0;
+      padding: 0;
+      font-size: 16px;
+    }
+
+    #content {
+      max-width: 600px;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+<body>
+  <div id="content">Waiting for content</div>
+  <script src="/static/common.js"></script>
+  <script src="/static/vendor-react.js"></script>
+  <script src="/static/basic.js"></script>
+  <script>
+    function getScript() {
+      var script = document.createElement('script');
+      script.async = 1;
+      script.src = '//cdn.embedly.com/widgets/platform.js';
+      script.onload = () => {
+        window.embedly();
+      };
+      document.body.appendChild(script);
+    }
+
+    window.addEventListener('message', function(e) {
+      console.log(e);
+      if (e.data && e.data.type) {
+        return;
+      }
+      if (typeof e.data === 'string') {
+        try {
+          JSON.parse(e.data);
+          return;
+        } catch (ex) {
+          if (e.data.indexOf('webpackHot') === 0) {
+            return;
+          }
+          document.getElementById('content').innerHTML = e.data;
+          if (window.embedly) {
+            window.embedly();
+          } else {
+            getScript();
+          }
+        }
+      }
+    });
+  </script>
+</body>
+</html>
diff --git a/src/basic.scss b/src/basic.scss
@@ -0,0 +1,119 @@
+.md-block-header-one {
+    font-size: 2em;
+}
+.md-block-header-two {
+    font-size: 1.7em;
+}
+.md-block-header-three {
+    font-size: 1.3em;
+}
+.md-block-header-four {
+    font-size: 1em;
+}
+.md-block-header-five {
+    font-size: 0.8em;
+}
+.md-block-header-six {
+    font-size: 0.7em;
+}
+
+.md-block-header-one,
+.md-block-header-two,
+.md-block-header-three,
+.md-block-header-four,
+.md-block-header-five,
+.md-block-header-six {
+    margin-bottom: 5px;
+}
+
+.md-block-blockquote {
+    margin: 0;
+    padding-left: 15px;
+    border-left: 5px solid #4CA8DE;
+    padding: 10px 0 10px 20px;
+    background-color: #E2F2FF;
+    font-size: 1.1em;
+}
+
+.md-block-image {
+    margin: 0 0 10px 0;
+
+    img {
+        width: 100%;
+    }
+
+    figcaption {
+        text-align: center;
+        font-size: 0.9em;
+    }
+}
+
+.md-block-todo {
+    margin: 10px 0 10px 0;
+
+    input[type=checkbox] {
+        float: left;
+        position: relative;
+        top: 4px;
+        left: -4px;
+    }
+    p {
+        margin-left: 18px;
+    }
+}
+
+.md-block-unordered-list-item, .md-block-ordered-list-item {
+    padding-left: 20px;
+
+    li {
+        margin-bottom: 5px;
+    }
+}
+
+.md-inline-code {
+    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    margin: 4px 0px;
+    font-size: 0.9em;
+    padding: 1px 3px;
+    color: rgb(85, 85, 85);
+    background-color: rgb(252, 252, 252);
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(187, 187, 187);
+    border-image: initial;
+    border-radius: 3px;
+    box-shadow: rgb(187, 187, 187) 0px -1px 0px inset;
+}
+
+
+.md-inline-link {
+    color: #08c;
+
+    &:visited {
+        color: #08c;
+    }
+}
+
+.md-inline-highlight {
+    background: yellow;
+}
+
+p {
+    &.md-block-block-quote-caption {
+
+        &::before {
+            content: '\2013';
+            color: #999;
+            float: left;
+            font-weight: bold;
+            display: inline;
+            margin-right: 10px;
+        }
+        margin-top: 0;
+        font-size: 0.8em;
+        padding-top: 5px;
+        padding-bottom: 5px;
+        padding-left: 10px;
+        background: #fafafa;
+    }
+}
diff --git a/src/example.js b/src/example.js
@@ -40,6 +40,13 @@ import {
   NOT_HANDLED
 } from './index';
 
+import {
+  setRenderOptions,
+  blockToHTML,
+  entityToHTML,
+  styleToHTML,
+} from './exporter';
+
 
 const newTypeMap = StringToTypeMap;
 newTypeMap['2.'] = Block.OL;
@@ -55,6 +62,38 @@ const DQUOTE_END = '”';
 const SQUOTE_START = '‘';
 const SQUOTE_END = '’';
 
+const newBlockToHTML = (block) => {
+  const blockType = block.type;
+  if (block.type === Block.ATOMIC) {
+    if (block.text === 'E') {
+      return {
+        start: '<figure class="md-block-atomic md-block-atomic-embed">',
+        end: '</figure>',
+      };
+    } else if (block.text === '-') {
+      return <hr class="md-block-atomic-break" />;
+    }
+  }
+  return blockToHTML(block);
+};
+
+const newEntityToHTML = (entity, originalText) => {
+  if (entity.type === 'embed') {
+    return (
+      <div>
+        <a
+          className="embedly-card"
+          href={entity.data.url}
+          data-card-controls="0"
+          data-card-theme="dark"
+        >Embedded ― {entity.data.url}
+        </a>
+      </div>
+    );
+  }
+  return entityToHTML(entity, originalText);
+};
+
 const handleBeforeInput = (editorState, str, onChange) => {
   if (str === '"' || str === '\'') {
     const currentBlock = getCurrentBlock(editorState);
@@ -275,6 +314,12 @@ class App extends React.Component {
       component: SeparatorSideButton,
     }];
 
+    this.exporter = setRenderOptions({
+      styleToHTML,
+      blockToHTML: newBlockToHTML,
+      entityToHTML: newEntityToHTML,
+    });
+
     this.getEditorState = () => this.state.editorState;
 
     this.logData = this.logData.bind(this);
@@ -376,10 +421,15 @@ class App extends React.Component {
   }
 
   logData(e) {
-    const es = convertToRaw(this.state.editorState.getCurrentContent());
+    const currentContent = this.state.editorState.getCurrentContent();
+    const es = convertToRaw(currentContent);
     console.log(es);
     console.log(this.state.editorState.getSelection().toJS());
     window.ga('send', 'event', 'draftjs', 'log-data');
+    let eHTML = this.exporter(currentContent);
+    var newWin = open('/rendered.html','windowName','height=600,width=600');
+    setTimeout(() => newWin.postMessage(eHTML, window.location.origin), 2000);
+    window.newWin = newWin;
   }
 
   loadSavedData() {