json-joy
Version:
Collection of libraries for building collaborative editing apps.
86 lines (85 loc) • 4.41 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BlockView = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const LeafBlock_1 = require("../../../json-crdt-extensions/peritext/block/LeafBlock");
const InlineView_1 = require("./InlineView");
const constants_1 = require("../constants");
const context_1 = require("./context");
const json_crdt_extensions_1 = require("../../../json-crdt-extensions");
const CaretView_1 = require("./cursor/CaretView");
const FocusView_1 = require("./cursor/FocusView");
const Inline_1 = require("../../../json-crdt-extensions/peritext/block/Inline");
const AnchorView_1 = require("./cursor/AnchorView");
exports.BlockView = React.memo((props) => {
const { block, el } = props;
const { plugins, dom } = (0, context_1.usePeritext)();
const elements = [];
if (block instanceof LeafBlock_1.LeafBlock) {
for (const inline of block.texts()) {
const hasCursor = inline.hasCursor();
if (hasCursor) {
const attr = inline.attr();
const italic = attr[json_crdt_extensions_1.CommonSliceType.i] && attr[json_crdt_extensions_1.CommonSliceType.i][0];
const cursorStart = inline.cursorStart();
if (cursorStart) {
const key = cursorStart.start.key() + '-a';
let element;
if (cursorStart.isStartFocused()) {
if (cursorStart.isCollapsed())
element = React.createElement(CaretView_1.CaretView, { key: key, italic: !!italic, point: cursorStart.start });
else {
const isItalic = italic instanceof Inline_1.InlineAttrEnd || italic instanceof Inline_1.InlineAttrPassing;
element = React.createElement(FocusView_1.FocusView, { key: key, italic: isItalic });
}
}
else
element = React.createElement(AnchorView_1.AnchorView, { key: key });
elements.push(element);
}
}
elements.push(React.createElement(InlineView_1.InlineView, { key: inline.key(), inline: inline }));
if (hasCursor) {
const cursorEnd = inline.cursorEnd();
const attr = inline.attr();
const italic = attr[json_crdt_extensions_1.CommonSliceType.i] && attr[json_crdt_extensions_1.CommonSliceType.i][0];
if (cursorEnd) {
const key = cursorEnd.end.key() + '-b';
let element;
if (cursorEnd.isEndFocused()) {
if (cursorEnd.isCollapsed())
element = React.createElement(CaretView_1.CaretView, { key: key, italic: !!italic, point: cursorEnd.start });
else
element = (React.createElement(FocusView_1.FocusView, { key: key, left: true, italic: italic instanceof Inline_1.InlineAttrStart || italic instanceof Inline_1.InlineAttrPassing }));
}
else
element = React.createElement(AnchorView_1.AnchorView, { key: key });
elements.push(element);
}
}
}
}
else {
const children = block.children;
const length = children.length;
for (let i = 0; i < length; i++) {
const child = children[i];
elements.push(React.createElement(exports.BlockView, { key: child.key(), hash: child.hash, block: child }));
}
}
let children = (React.createElement("span", { ref: (element) => {
el?.(element);
if (block instanceof LeafBlock_1.LeafBlock) {
const blockId = block.start.id;
const blocks = dom.blocks;
if (element)
blocks.set(blockId, element);
else
blocks.del(blockId);
}
}, style: { position: 'relative', display: 'block' } }, elements.length ? elements : constants_1.Char.ZeroLengthSpace));
for (const map of plugins)
children = map.block?.(props, children) ?? children;
return children;
}, (prev, next) => prev.hash === next.hash);