@atlaskit/renderer
Version:
Renderer component
116 lines • 5.28 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { Doc, mergeTextNodes, isTextWrapper, isEmojiDoc, toReact, } from './nodes';
import { toReact as markToReact } from './marks';
import { getMarksByOrder, isSameMark, } from '@atlaskit/editor-common';
import { bigEmojiHeight } from '../utils';
var ReactSerializer = /** @class */ (function () {
function ReactSerializer(providers, eventHandlers, portal, objectContext) {
this.providers = providers;
this.eventHandlers = eventHandlers;
this.portal = portal;
this.rendererContext = objectContext;
}
ReactSerializer.prototype.serializeFragment = function (fragment, props, target, key) {
var _this = this;
if (props === void 0) { props = {}; }
if (target === void 0) { target = Doc; }
if (key === void 0) { key = 'root-0'; }
var emojiBlock = isEmojiDoc(fragment, props);
var content = ReactSerializer.getChildNodes(fragment).map(function (node, index) {
if (isTextWrapper(node.type.name)) {
return _this.serializeTextWrapper(node.content);
}
var props = emojiBlock
? _this.getEmojiBlockProps(node)
: _this.getProps(node);
return _this.serializeFragment(node.content, props, toReact(node), node.type.name + "-" + index);
});
return this.renderNode(target, props, key, content);
};
ReactSerializer.prototype.serializeTextWrapper = function (content) {
var _this = this;
return ReactSerializer.buildMarkStructure(content).map(function (mark, index) {
return _this.serializeMark(mark, index);
});
};
ReactSerializer.prototype.serializeMark = function (mark, index) {
var _this = this;
if (index === void 0) { index = 0; }
if (mark.type.name === 'text') {
return mark.text;
}
var content = (mark.content || []).map(function (child, index) {
return _this.serializeMark(child, index);
});
return this.renderMark(markToReact(mark), this.getMarkProps(mark), mark.type.name + "-" + index, content);
};
// tslint:disable-next-line:variable-name
ReactSerializer.prototype.renderNode = function (Node, props, key, content) {
return (React.createElement(Node, tslib_1.__assign({ key: key }, props), content));
};
// tslint:disable-next-line:variable-name
ReactSerializer.prototype.renderMark = function (Mark, props, key, content) {
return (React.createElement(Mark, tslib_1.__assign({ key: key }, props), content));
};
ReactSerializer.prototype.getEmojiBlockProps = function (node) {
return tslib_1.__assign({}, this.getProps(node), { fitToHeight: bigEmojiHeight });
};
ReactSerializer.prototype.getProps = function (node) {
return tslib_1.__assign({ text: node.text, providers: this.providers, eventHandlers: this.eventHandlers, portal: this.portal, rendererContext: this.rendererContext }, node.attrs);
};
ReactSerializer.prototype.getMarkProps = function (mark) {
return tslib_1.__assign({ eventHandlers: this.eventHandlers }, mark.attrs);
};
ReactSerializer.getChildNodes = function (fragment) {
var children = [];
fragment.forEach(function (node) {
children.push(node);
});
return mergeTextNodes(children);
};
ReactSerializer.getMarks = function (node) {
if (!node.marks || node.marks.length === 0) {
return [];
}
return getMarksByOrder(node.marks);
};
ReactSerializer.buildMarkStructure = function (content) {
var _this = this;
var currentMarkNode;
return content.reduce(function (acc, node, index) {
var nodeMarks = _this.getMarks(node);
if (nodeMarks.length === 0) {
currentMarkNode = node;
acc.push(currentMarkNode);
}
else {
nodeMarks.forEach(function (mark, markIndex) {
var isSameAsPrevious = isSameMark(mark, currentMarkNode);
var previousIsInMarks = markIndex > 0 &&
nodeMarks.some(function (m) { return isSameMark(m, currentMarkNode); });
if (!isSameAsPrevious) {
var newMarkNode = tslib_1.__assign({}, mark, { content: [] });
if (previousIsInMarks) {
currentMarkNode.content.push(newMarkNode);
currentMarkNode = newMarkNode;
}
else {
acc.push(newMarkNode);
currentMarkNode = newMarkNode;
}
}
});
currentMarkNode.content.push(node);
}
return acc;
}, []);
};
ReactSerializer.fromSchema = function (schema, providers, eventHandlers) {
// TODO: Do we actually need the schema here?
return new ReactSerializer(providers, eventHandlers);
};
return ReactSerializer;
}());
export default ReactSerializer;
//# sourceMappingURL=index.js.map