json-joy
Version:
Collection of libraries for building collaborative editing apps.
96 lines (95 loc) • 4.83 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 react_1 = 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) {
let inline;
let prevInline;
for (const iterator = block.texts0(); (inline = iterator()); prevInline = inline) {
const k = inline.key();
const hasCursor = inline.hasCursor();
// Insert cursor before the inline text element.
if (hasCursor) {
const attr = inline.attr();
const italic = attr[json_crdt_extensions_1.CommonSliceType.i]?.[0];
const cursorStart = inline.cursorStart();
if (cursorStart) {
const key = k + '-a';
let element;
if (cursorStart.isStartFocused()) {
if (cursorStart.isCollapsed()) {
element = (React.createElement(CaretView_1.CaretView, { key: key, italic: !!italic, point: cursorStart.start, cursor: cursorStart, fwd: inline, bwd: prevInline }));
}
else {
const isItalic = italic instanceof Inline_1.InlineAttrEnd || italic instanceof Inline_1.InlineAttrPassing;
element = React.createElement(FocusView_1.FocusView, { key: key, italic: isItalic, cursor: cursorStart });
}
}
else
element = React.createElement(AnchorView_1.AnchorView, { key: key });
elements.push(element);
}
}
// Insert the inline text element itself.
const currInlineProps = { key: k, inline };
elements.push((0, react_1.createElement)(InlineView_1.InlineView, currInlineProps));
// Insert cursor after the inline text element.
if (hasCursor) {
const cursorEnd = inline.cursorEnd();
const attr = inline.attr();
const italic = attr[json_crdt_extensions_1.CommonSliceType.i]?.[0];
if (cursorEnd) {
const key = k + '-b';
let element;
if (cursorEnd.isEndFocused()) {
if (cursorEnd.isCollapsed()) {
element = (React.createElement(CaretView_1.CaretView, { key: key, italic: !!italic, point: cursorEnd.start, cursor: cursorEnd, bwd: inline }));
}
else
element = (React.createElement(FocusView_1.FocusView, { key: key, left: true, italic: italic instanceof Inline_1.InlineAttrStart || italic instanceof Inline_1.InlineAttrPassing, cursor: cursorEnd }));
}
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);