JSON Viewer for Notable.app | Custom | JS | Editor

customCSSEditor.css

.json-skin { font-family: monospace,'Courier'; }
.json-skin ul { padding-left: 0; display: inline; list-style: none; }
.json-skin .elm-arbol { display:  inline; }
.json-skin li { padding-left: 20px; }
.json-skin ul.elm-object::before { content: '{'; font-weight: bold; }
.json-skin ul.elm-object::after { content: '}'; font-weight: bold; }
.json-skin ul.elm-array::before { content: '['; font-weight: bold; }
.json-skin ul.elm-array::after { content: ']'; font-weight: bold; }
.json-skin span.elm-more {cursor: pointer; }
.json-skin span.elm-more::before { content: '...'; font-weight: bold; color: gray; }
.json-skin .elm-label { color: #008000; font-weight: bold; }
.json-skin .elm-label::after { content: ':'; color: #000; }
.json-skin .elm-str { color: #BA2121; }
.json-skin .elm-undefined, .json-skin .elm-boolean, .json-skin .elm-null,
.json-skin .elm-number { color: darkblue; }
.json-skin .elm-func { color: gray; }
.json-skin .elm-array >li >span.elm-label { display: none; }
.json-skin .elm-arbol >span { cursor: pointer; font-weight: bold; }
.json-skin .elm-arbol.expanded >span::before { content: ' - '; font-weight: bold; }
.json-skin .elm-arbol.collapsed >span::before { content: ' + '; font-weight: bold; }

customJSEDITOR.js

const require = (url) => {
	const head = document.getElementsByTagName('head')[0];
	const script = document.createElement('script');
	script.type = 'text/javascript';
	script.src = url;
	head.appendChild(script);
}


require("https://unpkg.com/react@17/umd/react.development.js");
require("https://unpkg.com/react-dom@17/umd/react-dom.development.js");

$(document).on ( 'preview:render', ()=>{
	var el = document.querySelectorAll('.JSON');
	if (!el[0]) return;
	el.forEach((current)=>{
		if(current.querySelector('.json-skin')) return;
		eval('var source='+current.innerHTML);

		const Tree = React.createElement(
			'div',
			{className: 'json-skin'},
			React.createElement(Arbol, { data: source })
		);
		ReactDOM.unmountComponentAtNode(current)
		ReactDOM.render(Tree, current);
	});
	
} );

'use strict';

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
var _react, _react2;
setTimeout(()=>{
_react = React;

_react2 = _interopRequireDefault(_react);
},900)


function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

var Trunk = function Trunk(props) {
  var _useState = (0, _react.useState)(true),
      _useState2 = _slicedToArray(_useState, 2),
      toggle = _useState2[0],
      setToggle = _useState2[1];

  var togglePanel = function togglePanel(e) {
    e.stopPropagation();
    setToggle(!toggle);
  };
  return _react2.default.createElement(
    'div',
    { className: 'elm-arbol ' + (toggle ? ' expanded' : ' collapsed') },
    _react2.default.createElement('span', { onClick: togglePanel }),
    _react2.default.createElement(
      'ul',
      props,
      toggle ? props.children : _react2.default.createElement('span', { className: 'elm-more', onClick: togglePanel })
    )
  );
};

var Branch = function Branch(props) {
  return _react2.default.createElement(
    'li',
    props,
    props.children
  );
};
var Key = function Key(props) {
  return _react2.default.createElement(
    'span',
    props,
    props.children
  );
};
var Value = function Value(props) {
  return _react2.default.createElement(
    'span',
    props,
    props.children
  );
};

var getValue = function getValue(value) {
  switch (typeof value === 'undefined' ? 'undefined' : _typeof(value)) {
    case 'object':
      return value === null ? _react2.default.createElement(
        Value,
        { className: 'elm-null' },
        'null'
      ) : _react2.default.createElement(Arbol, { data: value });
    case 'string':
      return _react2.default.createElement(
        Value,
        { className: 'elm-str' },
        '"',
        value,
        '"'
      );
    case 'function':
    case 'symbol':
      return _react2.default.createElement(
        Value,
        { className: 'elm-func' },
        String(value)
      );
    case 'boolean':
    case 'undefined':
    case 'number':
    default:
      return _react2.default.createElement(
        Value,
        { className: 'elm-' + (typeof value === 'undefined' ? 'undefined' : _typeof(value)) },
        String(value)
      );
  }
};

var Arbol = function Arbol(_ref) {
  var data = _ref.data;
  return _react2.default.createElement(
    Trunk,
    { className: 'json-skin elm-' + (Array.isArray(data) ? 'array' : 'object') },
    [].concat(_toConsumableArray(Object.keys(data).map(function (k, i) {
      return _react2.default.createElement(
        Branch,
        { key: i },
        _react2.default.createElement(
          Key,
          { className: 'elm-label' },
          '"' + k + '"'
        ),
        getValue(data[k]),
        Object.keys(data)[i + 1] !== undefined ? ',' : null
      );
    })))
  );
};