mobiledoc renderer

components.doc-marker.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.doc-section.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.quack-atom.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'span'
});

controllers.application.js

import Ember from 'ember';
import { computed } from '@ember/object';

const mobiledoc = {
  "atoms": [["quack-atom", "string", {payload: 'payload'}]],
  "cards": [],
  "markups": [
    ["em"],
    ["strong", ["class", "custom-font-weight", "data-option", "700", "style", "font-weight: 700"]]
  ],
  "version": "0.3.1",
  "sections":  [
    [1, "h1", [[0, [1], 1, "Header "], [0, [0], 1, "num one"]]],
    [1, "h2", [[0, [0], 1, "Header num"], [0, [], 0, " two"]]],
    [1, "p", [[0, [], 0, "paragraph "], [0, [0], 0, "numero "], [0, [1], 2, "uno"]]],
    [1, "p", [[0, [0, 1], 2, "numero"], [0, [], 0, " dos"], [1, [], 0, 0]]]
  ]
};

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  renderableDoc: computed(function() {
    let doc = {};
    doc.markups = mobiledoc.markups;
    doc.sections = mobiledoc.sections.map(([type, tag, markers]) => {
      let rootMarker = {tag: '', children: []};
      let contextStack = [rootMarker];

      markers.forEach(([type, markups, closed, textOrIdx]) => {
        markups.forEach((index) => {
          let markup = mobiledoc.markups[index];
          let tag = markup[0];
          let attrs = markup[1] || [];
          let attrsHash = {};
          for(let i = 0; i < attrs.length; i += 2) {
            attrsHash[attrs[i]] = attrs[i + 1];
          }
          let node = {tag, attrs: attrsHash, children: []};
          contextStack.lastObject.children.pushObject(node);
          contextStack.pushObject(node);
          return node;
        });
        let contentNode;
        if(type === 0) {
          contentNode = {tag: '', content: textOrIdx};
        } else {
          let atomDef = mobiledoc.atoms[textOrIdx];
          contentNode = {component: atomDef[0], value: atomDef[1], payload: atomDef[2]}
        }
        contextStack.lastObject.children.pushObject(contentNode);

        for(let i = 0; i < closed; i += 1) {
          contextStack.popObject();
        }
      });
      return {type, tag, rootMarker};
    });
    console.log(doc);
    return doc;
  }),
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<style>
h1 { font-weight: normal; }
h2 { font-weight: normal; }
</style>
<br>
{{#each renderableDoc.sections as |section|}}
  {{#doc-section tagName=section.tag}}
    {{doc-marker tagName=section.rootMarker.tag marker=section.rootMarker}}
  {{/doc-section}}
{{/each}}

<br>
<br>

templates.components.doc-marker.hbs

{{#if marker.content}}
  {{marker.content}}
{{else if marker.component}}
  {{component marker.component}}
{{else}}
  {{#each marker.children as |childMarker|}}
    {{doc-marker tagName=childMarker.tag marker=childMarker}}
  {{/each}}
{{/if}}

templates.components.doc-section.hbs

{{yield}}

templates.components.quack-atom.hbs

QUACK!

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}