feeles-ide/lib/jsx/MDReactComponent.js

The hackable and serializable IDE to make learning material

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.mdReact = mdReactFactory;
exports.default = void 0;

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _markdownIt = _interopRequireDefault(require("markdown-it"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _typestyle = require("typestyle");

var _lodash = require("lodash");

// Copied from https://github.com/endaaman/markdown-react-js
// import React, { PropTypes } from 'react'
// import isPlainObject from 'lodash/isPlainObject'
// import assign from 'lodash/assign'
// import reduce from 'lodash/reduce'
// import zipObject from 'lodash/zipObject'
// import sortBy from 'lodash/sortBy'
// import compact from 'lodash/compact'
// import camelCase from 'lodash/camelCase'
// import isString from 'lodash/isString'
// import fromPairs from 'lodash/fromPairs'
var DEFAULT_TAGS = {
  html: 'span'
};
var DEFAULT_RULES = {
  image: function image(token, attrs, children) {
    if (children.length) {
      attrs = (0, _lodash.assign)({}, attrs, {
        alt: children[0]
      });
    }

    return [[token.tag, attrs]];
  },
  codeInline: function codeInline(token, attrs) {
    return [(0, _lodash.compact)([token.tag, attrs, token.content])];
  },
  codeBlock: function codeBlock(token, attrs) {
    return [['pre', (0, _lodash.compact)([token.tag, attrs, token.content])]];
  },
  fence: function fence(token, attrs) {
    if (token.info) {
      var langName = token.info.trim().split(/\s+/g)[0];
      attrs = (0, _lodash.assign)({}, attrs, {
        'data-language': langName
      });
    }

    return [['pre', (0, _lodash.compact)([token.tag, attrs, token.content])]];
  },
  hardbreak: function hardbreak() {
    return [['br']];
  },
  softbreak: function softbreak(token, attrs, children, options) {
    return options.breaks ? [['br']] : '\n';
  },
  text: function text(token) {
    return token.content;
  },
  htmlBlock: function htmlBlock(token) {
    return token.content;
  },
  htmlInline: function htmlInline(token) {
    return token.content;
  },
  inline: function inline(token, attrs, children) {
    return children;
  },
  default: function _default(token, attrs, children, options, getNext) {
    if (token.nesting === 1 && token.hidden) {
      return getNext();
    }
    /* plugin-related */


    if (!token.tag) {
      return token.content;
    }

    if (token.info) {
      attrs = (0, _lodash.assign)({}, attrs, {
        'data-info': token.info.trim()
      });
    }
    /* plugin-related */


    return [(0, _lodash.compact)([token.tag, attrs].concat(token.nesting === 1 && getNext()))];
  }
};

function convertTree(tokens, convertRules, options) {
  function convertBranch(tkns, nested) {
    var branch = [];

    if (!nested) {
      branch.push('html');
    }

    function getNext() {
      return convertBranch(tkns, true);
    }

    var token = tkns.shift();

    while (token && token.nesting !== -1) {
      var attrs = token.attrs && (0, _lodash.fromPairs)((0, _lodash.sortBy)(token.attrs, 0));
      var children = token.children && convertBranch(token.children.slice(), true);
      var rule = convertRules[(0, _lodash.camelCase)(token.type)] || convertRules.default;
      branch = branch.concat(rule(token, attrs, children, options, getNext));
      token = tkns.shift();
    }

    return branch;
  }

  return convertBranch(tokens, false);
}

function mdReactFactory() {
  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var onIterate = options.onIterate,
      _options$tags = options.tags,
      tags = _options$tags === void 0 ? DEFAULT_TAGS : _options$tags,
      presetName = options.presetName,
      markdownOptions = options.markdownOptions,
      _options$enableRules = options.enableRules,
      enableRules = _options$enableRules === void 0 ? [] : _options$enableRules,
      _options$disableRules = options.disableRules,
      disableRules = _options$disableRules === void 0 ? [] : _options$disableRules,
      _options$plugins = options.plugins,
      plugins = _options$plugins === void 0 ? [] : _options$plugins,
      _options$onGenerateKe = options.onGenerateKey,
      onGenerateKey = _options$onGenerateKe === void 0 ? function (tag, index) {
    return "mdrct-".concat(tag, "-").concat(index);
  } : _options$onGenerateKe,
      rootElementProps = (0, _objectWithoutProperties2.default)(options, ["onIterate", "tags", "presetName", "markdownOptions", "enableRules", "disableRules", "plugins", "onGenerateKey"]);
  var md = (0, _markdownIt.default)(markdownOptions || presetName).enable(enableRules).disable(disableRules);
  var convertRules = (0, _lodash.assign)({}, DEFAULT_RULES, options.convertRules);
  md = (0, _lodash.reduce)(plugins, function (m, plugin) {
    return plugin.plugin ? m.use.apply(m, [plugin.plugin].concat((0, _toConsumableArray2.default)(plugin.args))) : m.use(plugin);
  }, md);

  function renderChildren(tag) {
    return ['img', 'hr', 'br'].indexOf(tag) < 0;
  }

  function iterateTree(tree) {
    var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
    var index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
    var tag = tree.shift();
    var key = onGenerateKey(tag, index);
    var props = tree.length && (0, _lodash.isPlainObject)(tree[0]) ? (0, _lodash.assign)(tree.shift(), {
      key: key
    }) : {
      key: key
    };

    if (level === 0) {
      props = (0, _objectSpread2.default)({}, props, rootElementProps);
    }

    var children = tree.map(function (branch, idx) {
      return Array.isArray(branch) ? iterateTree(branch, level + 1, idx) : branch;
    });
    tag = tags[tag] || tag;

    if ((0, _lodash.isString)(props.style)) {
      props.style = (0, _lodash.zipObject)(props.style.split(';').map(function (prop) {
        return prop.split(':');
      }).map(function (keyVal) {
        return [(0, _lodash.camelCase)(keyVal[0].trim()), keyVal[1].trim()];
      }));
    }

    if (typeof onIterate === 'function') {
      var element = onIterate(tag, props, children, level);

      if (element) {
        return element;
      }
    }

    return _react.default.createElement(tag, props, renderChildren(tag) ? children : undefined);
  }

  return function (text) {
    var tree = convertTree(md.parse(text, {}), convertRules, md.options);
    return iterateTree(tree);
  };
}

var MDReactComponent = function MDReactComponent(props) {
  var text = props.text,
      propsWithoutText = (0, _objectWithoutProperties2.default)(props, ["text"]);
  return mdReactFactory(propsWithoutText)(text);
};

MDReactComponent.propTypes = {
  text: _propTypes.default.string.isRequired,
  onIterate: _propTypes.default.func,
  onGenerateKey: _propTypes.default.func,
  tags: _propTypes.default.object,
  presetName: _propTypes.default.string,
  markdownOptions: _propTypes.default.object,
  enableRules: _propTypes.default.array,
  disableRules: _propTypes.default.array,
  convertRules: _propTypes.default.object,
  plugins: _propTypes.default.array,
  className: _propTypes.default.string
};
var _default2 = MDReactComponent;
exports.default = _default2;