First handling of templating blocks

6 files changed, 29 insertions, 98 deletions

diff --git a/packages/gitbook-core/package.json b/packages/gitbook-core/package.json
index c6cfeed..4e3974e 100644
--- a/packages/gitbook-core/package.json
+++ b/packages/gitbook-core/package.json
@@ -6,6 +6,7 @@
   "dependencies": {
     "bluebird": "^3.4.6",
     "classnames": "^2.2.5",
+    "entities": "^1.1.1",
     "history": "^4.3.0",
     "html-tags": "^1.1.1",
     "immutable": "^3.8.1",
diff --git a/packages/gitbook-core/src/components/HTMLContent.js b/packages/gitbook-core/src/components/HTMLContent.js
index 4ce41f6..338e745 100644
--- a/packages/gitbook-core/src/components/HTMLContent.js
+++ b/packages/gitbook-core/src/components/HTMLContent.js
@@ -1,6 +1,7 @@
 const React = require('react');
 const ReactSafeHtml = require('react-safe-html');
 const htmlTags = require('html-tags');
+const entities = require('entities');
 
 const { InjectedComponent } = require('./InjectedComponent');
 
@@ -27,11 +28,12 @@ function inject(injectedProps, Component) {
 }
 
 const COMPONENTS = {
-    // Templating blocks are exported as <template-block block="youtube" props="{}" />
-    'template-block': inject(
-        ({block, props}) => {
+    // Templating blocks are exported as <xblock name="youtube" props="{}" />
+    'xblock': inject(
+        ({name, props}) => {
+            props = entities.decodeHTML(props);
             return {
-                matching: { role: `block:${block}` },
+                matching: { role: `block:${name}` },
                 props: JSON.parse(props)
             };
         },
diff --git a/packages/gitbook-plugin-hints/index.js b/packages/gitbook-plugin-hints/index.js
index 55efd25..c762232 100644
--- a/packages/gitbook-plugin-hints/index.js
+++ b/packages/gitbook-plugin-hints/index.js
@@ -1,8 +1,9 @@
 
 module.exports = {
     blocks: {
-        hint: ({ kwargs }) => {
+        hint: ({ kwargs, children }) => {
             return {
+                children,
                 style: kwargs.style || 'info',
                 icon:  kwargs.icon
             };
diff --git a/packages/gitbook/package.json b/packages/gitbook/package.json
index 93264e9..12ca0ac 100644
--- a/packages/gitbook/package.json
+++ b/packages/gitbook/package.json
@@ -23,7 +23,7 @@
     "front-matter": "^2.1.0",
     "gitbook-asciidoc": "1.2.2",
     "gitbook-core": "*",
-    "gitbook-markdown": "2.0.1",
+    "gitbook-markdown": "1.3.2",
     "gitbook-plugin-fontsettings": "2.0.0",
     "gitbook-plugin-highlight": "2.0.2",
     "gitbook-plugin-livereload": "0.0.1",
diff --git a/packages/gitbook/src/constants/defaultBlocks.js b/packages/gitbook/src/constants/defaultBlocks.js
index 05c9b09..d1fe6ff 100644
--- a/packages/gitbook/src/constants/defaultBlocks.js
+++ b/packages/gitbook/src/constants/defaultBlocks.js
@@ -1,51 +1,5 @@
 const Immutable = require('immutable');
-const TemplateBlock = require('../models/templateBlock');
 
 module.exports = Immutable.Map({
-    html: TemplateBlock({
-        name: 'html',
-        process(blk) {
-            return blk;
-        }
-    }),
 
-    code: TemplateBlock({
-        name: 'code',
-        process(blk) {
-            return {
-                html: false,
-                body: blk.body
-            };
-        }
-    }),
-
-    markdown: TemplateBlock({
-        name: 'markdown',
-        process(blk) {
-            return this.book.renderInline('markdown', blk.body)
-            .then(function(out) {
-                return { body: out };
-            });
-        }
-    }),
-
-    asciidoc: TemplateBlock({
-        name: 'asciidoc',
-        process(blk) {
-            return this.book.renderInline('asciidoc', blk.body)
-            .then(function(out) {
-                return { body: out };
-            });
-        }
-    }),
-
-    markup: TemplateBlock({
-        name: 'markup',
-        process(blk) {
-            return this.book.renderInline(this.ctx.file.type, blk.body)
-            .then(function(out) {
-                return { body: out };
-            });
-        }
-    })
 });
diff --git a/packages/gitbook/src/models/templateBlock.js b/packages/gitbook/src/models/templateBlock.js
index 374bf71..e8d2aae 100644
--- a/packages/gitbook/src/models/templateBlock.js
+++ b/packages/gitbook/src/models/templateBlock.js
@@ -1,12 +1,13 @@
 const is = require('is');
 const extend = require('extend');
 const Immutable = require('immutable');
+const escape = require('escape-html');
 
 const Promise = require('../utils/promise');
-const genKey = require('../utils/genKey');
 const TemplateShortcut = require('./templateShortcut');
 
 const NODE_ENDARGS = '%%endargs%%';
+const HTML_TAGNAME = 'xblock';
 
 const TemplateBlock = Immutable.Record({
     // Name of block, also the start tag
@@ -156,7 +157,7 @@ TemplateBlock.prototype.toNunjucksExt = function(mainContext, blocksOutput) {
 
                 blocks.push({
                     name: blkName,
-                    body: blockBody(),
+                    children: blockBody(),
                     args: blockArgs,
                     kwargs: blockKwargs
                 });
@@ -173,8 +174,8 @@ TemplateBlock.prototype.toNunjucksExt = function(mainContext, blocksOutput) {
 
                 return that.applyBlock(mainBlock, ctx);
             })
-            .then(function(result) {
-                return that.blockResultToHtml(result, blocksOutput);
+            .then(function(props) {
+                return that.blockResultToHtml(props);
             })
             .nodeify(callback);
         };
@@ -184,10 +185,11 @@ TemplateBlock.prototype.toNunjucksExt = function(mainContext, blocksOutput) {
 };
 
 /**
- * Apply a block to a content
+ * Apply a block to a content.
+ *
  * @param {Object} inner
  * @param {Object} context
- * @return {Promise<String>|String}
+ * @return {Promise<Props>|Props}
  */
 TemplateBlock.prototype.applyBlock = function(inner, context) {
     const processFn = this.getProcess();
@@ -197,52 +199,23 @@ TemplateBlock.prototype.applyBlock = function(inner, context) {
     inner.kwargs = inner.kwargs || {};
     inner.blocks = inner.blocks || [];
 
-    const r = processFn.call(context, inner);
-
-    if (Promise.isPromiseAlike(r)) {
-        return r.then(this.normalizeBlockResult.bind(this));
-    } else {
-        return this.normalizeBlockResult(r);
-    }
-};
-
-/**
- * Normalize result from a block process function
- * @param {Object|String} result
- * @return {Object}
- */
-TemplateBlock.prototype.normalizeBlockResult = function(result) {
-    if (is.string(result)) {
-        result = { body: result };
-    }
-    result.name = this.getName();
-
-    return result;
+    return processFn.call(context, inner);
 };
 
 /**
- * Convert a block result to HTML
- * @param {Object} result
- * @param {Object} blocksOutput: stored post processing blocks in this object
+ * Convert a block props to HTML. This HTML is then being
+ * parsed by gitbook-core during rendering, and binded to the right react components.
+ *
+ * @param {Object} props
  * @return {String}
  */
-TemplateBlock.prototype.blockResultToHtml = function(result, blocksOutput) {
-    let indexedKey;
-    const toIndex = (!result.parse) || (result.post !== undefined);
-
-    if (toIndex) {
-        indexedKey = genKey();
-        blocksOutput[indexedKey] = result;
-    }
-
-    // Parsable block, just return it
-    if (result.parse) {
-        return result.body;
-    }
-
-    // Return it as a position marker
-    return '{{-%' + indexedKey + '%-}}';
+TemplateBlock.prototype.blockResultToHtml = function(props) {
+    const { children, ...innerProps } = props;
+    const payload = escape(JSON.stringify(innerProps));
 
+    return (
+        `<${HTML_TAGNAME} name="${this.name}" props="${payload}">${children}</${HTML_TAGNAME}>`
+    );
 };
 
 /**