json-joy
Version:
Collection of libraries for building collaborative editing apps.
47 lines (46 loc) • 2.11 kB
JavaScript
// biome-ignore lint: React is used for JSX
import * as React from 'react';
import { usePeritext } from '../../../web/react';
import { useSyncStoreOpt } from '../../../web/react/hooks';
import { DefaultRendererColors } from '../constants';
import { CommonSliceType } from '../../../../json-crdt-extensions';
import { Spoiler } from './Spoiler';
const RenderInlineSelection = (props) => {
const { children, selection } = props;
const { dom } = usePeritext();
const focus = useSyncStoreOpt(dom?.cursor.focus) || false;
const [left, right] = selection;
const style = {
backgroundColor: focus ? DefaultRendererColors.ActiveSelection : DefaultRendererColors.InactiveSelection,
borderRadius: left === 'anchor' ? '.25em 1px 1px .25em' : right === 'anchor' ? '1px .25em .25em 1px' : '1px',
};
return React.createElement("span", { style: style }, children);
};
export const RenderInline = (props) => {
const { inline, children } = props;
const attr = inline.attr();
const selection = inline.selection();
let element = children;
if (attr[CommonSliceType.code])
element = React.createElement("code", null, element);
if (attr[CommonSliceType.mark])
element = React.createElement("mark", null, element);
if (attr[CommonSliceType.del])
element = React.createElement("del", null, element);
if (attr[CommonSliceType.ins])
element = React.createElement("ins", null, element);
if (attr[CommonSliceType.sup])
element = React.createElement("sup", null, element);
if (attr[CommonSliceType.sub])
element = React.createElement("sub", null, element);
if (attr[CommonSliceType.math])
element = React.createElement("code", null, element);
if (attr[CommonSliceType.kbd])
element = React.createElement("kbd", null, element);
if (attr[CommonSliceType.spoiler])
element = React.createElement(Spoiler, null, element);
if (selection) {
element = (React.createElement(RenderInlineSelection, { ...props, selection: selection }, element));
}
return element;
};