json-joy
Version:
Collection of libraries for building collaborative editing apps.
59 lines (58 loc) • 3.88 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TopToolbar = void 0;
const tslib_1 = require("tslib");
// biome-ignore lint: React is used for JSX
const React = tslib_1.__importStar(require("react"));
const Button_1 = require("../../../components/Button");
const json_crdt_extensions_1 = require("../../../../json-crdt-extensions");
const ButtonGroup_1 = require("../../../components/ButtonGroup");
const hooks_1 = require("../../../web/react/hooks");
const ButtonSeparator_1 = require("../../../components/ButtonSeparator");
const TopToolbar = ({ ctx }) => {
const peritext = ctx.peritext;
const editor = peritext.editor;
const pending = (0, hooks_1.useSyncStore)(editor.pending);
if (!ctx.dom)
return null;
const cursor = editor.mainCursor();
const [complete] = cursor ? peritext.overlay.stat(cursor) : [new Set()];
const inlineGroupButton = (type, name) => (React.createElement(Button_1.Button, { onClick: () => ctx.dom?.et.format(type), onMouseDown: (e) => e.preventDefault(), active: (complete.has(type) && !pending.has(type)) || (!complete.has(type) && pending.has(type)) }, name));
const button = (name, onClick) => (React.createElement(Button_1.Button, { onClick: onClick, onMouseDown: (e) => e.preventDefault() }, name));
const blockGroupButtom = (type, name) => (React.createElement(Button_1.Button, { onClick: () => ctx.dom?.et.marker({ action: 'tog', type }), onMouseDown: (e) => e.preventDefault(), active: (complete.has(type) && !pending.has(type)) || (!complete.has(type) && pending.has(type)) }, name));
return (React.createElement(ButtonGroup_1.ButtonGroup, { style: { marginBottom: 8 } },
inlineGroupButton(json_crdt_extensions_1.CommonSliceType.b, 'Bold'),
inlineGroupButton(json_crdt_extensions_1.CommonSliceType.i, 'Italic'),
inlineGroupButton(json_crdt_extensions_1.CommonSliceType.u, 'Underline'),
inlineGroupButton(json_crdt_extensions_1.CommonSliceType.overline, 'Overline'),
inlineGroupButton(json_crdt_extensions_1.CommonSliceType.s, 'Strikethrough'),
inlineGroupButton(json_crdt_extensions_1.CommonSliceType.code, 'Code'),
inlineGroupButton(json_crdt_extensions_1.CommonSliceType.mark, 'Mark'),
inlineGroupButton(json_crdt_extensions_1.CommonSliceType.del, 'Deleted'),
inlineGroupButton(json_crdt_extensions_1.CommonSliceType.ins, 'Inserted'),
inlineGroupButton(json_crdt_extensions_1.CommonSliceType.sup, 'Superscript'),
inlineGroupButton(json_crdt_extensions_1.CommonSliceType.sub, 'Subscript'),
inlineGroupButton(json_crdt_extensions_1.CommonSliceType.math, 'Math'),
inlineGroupButton(json_crdt_extensions_1.CommonSliceType.kbd, 'Key'),
inlineGroupButton(json_crdt_extensions_1.CommonSliceType.spoiler, 'Spoiler'),
inlineGroupButton(json_crdt_extensions_1.CommonSliceType.bookmark, 'Bookmark'),
React.createElement(ButtonSeparator_1.ButtonSeparator, null),
button('Blue', () => {
ctx.dom?.et.format(json_crdt_extensions_1.CommonSliceType.col, 'one', '#07f');
}),
React.createElement(ButtonSeparator_1.ButtonSeparator, null),
button('Erase', () => {
ctx.dom?.et.format({ behavior: 'erase' });
}),
button('Clear', () => {
ctx.dom?.et.format({ behavior: 'clear' });
}),
button('Delete block split', () => {
ctx.dom?.et.marker({ action: 'del' });
}),
React.createElement(ButtonSeparator_1.ButtonSeparator, null),
blockGroupButtom(json_crdt_extensions_1.CommonSliceType.p, 'Paragraph'),
blockGroupButtom(json_crdt_extensions_1.CommonSliceType.blockquote, 'Blockquote'),
blockGroupButtom(json_crdt_extensions_1.CommonSliceType.codeblock, 'Code Block')));
};
exports.TopToolbar = TopToolbar;