@bytedance/mona-client-web
Version:
web for mona
111 lines • 4.42 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import React, { useEffect, useRef } from 'react';
import { useHandlers } from '../hooks';
import { nodeMap } from './node';
function isTypeNode(node) {
return node.type !== 'text';
}
function isTypeText(node) {
return node.type === 'text';
}
function recursiveGenerateNode(cnode, nodes) {
var name = cnode.nodeName.toLowerCase();
var type = 'node';
if (name === '#text') {
type = 'text';
}
var rawAttrs = type === 'node' ? cnode.attributes : [];
var attrs = {};
for (var i = 0; i < rawAttrs.length; i++) {
attrs[rawAttrs[i].name] = rawAttrs[i].value;
}
var children = [];
if (cnode.childNodes.length > 0) {
cnode.childNodes.forEach(function (c) { return recursiveGenerateNode(c, children); });
}
var node = type === 'text' ? { text: cnode.textContent, type: type } : { name: name, type: type, attrs: attrs, children: children };
nodes.push(node);
}
function recursiveParseNode(node, container) {
if (isTypeNode(node)) {
var name_1 = node.name, _a = node.attrs, attrs_1 = _a === void 0 ? {} : _a, children = node.children;
var attrNames_1 = nodeMap[name_1];
if (attrNames_1) {
var ele_1 = document.createElement(name_1);
Object.keys(attrs_1).forEach(function (key) {
if (__spreadArray(__spreadArray([], attrNames_1, true), ['class', 'style'], false).includes(key)) {
ele_1.setAttribute(key, attrs_1[key]);
}
});
// recursive process children
if (children) {
children.forEach(function (child) { return recursiveParseNode(child, ele_1); });
}
container.appendChild(ele_1);
}
}
else if (isTypeText(node)) {
var text = node.text;
var ele = document.createTextNode(text);
container.appendChild(ele);
}
return container;
}
function renderAllNodes(container, nodes) {
var currentNodes = nodes;
if (typeof nodes == 'string') {
var temp = document.createElement('div');
temp.innerHTML = nodes;
var tempNodes_1 = [];
temp.childNodes.forEach(function (cnode) { return recursiveGenerateNode(cnode, tempNodes_1); });
currentNodes = tempNodes_1;
}
if (Array.isArray(currentNodes)) {
currentNodes.forEach(function (node) { return recursiveParseNode(node, container); });
}
}
var RichText = function (_a) {
var nodes = _a.nodes, children = _a.children, restProps = __rest(_a, ["nodes", "children"]);
var _b = useHandlers(restProps), handleClassName = _b.handleClassName, handlerProps = __rest(_b, ["handleClassName"]);
var containerRef = useRef(null);
useEffect(function () {
if (containerRef.current) {
// clear all nodes
containerRef.current.innerHTML = '';
renderAllNodes(containerRef.current, nodes);
}
}, [containerRef.current, nodes]);
return React.createElement("div", __assign({ ref: containerRef, className: handleClassName() }, handlerProps), children);
};
export default RichText;
//# sourceMappingURL=index.js.map