json-joy
Version:
Collection of libraries for building collaborative editing apps.
74 lines (73 loc) • 4.62 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 context_1 = require("../context");
const TopToolbar = ({ ctx }) => {
const { toolbar } = (0, context_1.useToolbarPlugin)();
const peritext = ctx.peritext;
const editor = peritext.editor;
const pending = (0, hooks_1.useSyncStore)(editor.pending);
const isDebugMode = (0, hooks_1.useSyncStoreOpt)(toolbar.opts.debug?.enabled);
if (!ctx.dom)
return null;
const [complete] = editor.hasCursor() ? peritext.overlay.stat(editor.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, active) => (React.createElement(Button_1.Button, { active: active, onClick: onClick, onMouseDown: (e) => e.preventDefault() }, name));
const blockGroupButton = (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),
blockGroupButton(json_crdt_extensions_1.CommonSliceType.p, 'Paragraph'),
blockGroupButton(json_crdt_extensions_1.CommonSliceType.blockquote, 'Blockquote'),
blockGroupButton(json_crdt_extensions_1.CommonSliceType.codeblock, 'Code Block'),
React.createElement(ButtonSeparator_1.ButtonSeparator, null),
button('Undo', () => {
ctx.dom?.annals.undo();
}),
button('Redo', () => {
ctx.dom?.annals.redo();
}),
!!toolbar.opts.debug && (React.createElement(React.Fragment, null,
React.createElement(ButtonSeparator_1.ButtonSeparator, null),
button('Debug', () => {
const debug = toolbar.opts.debug;
debug.enabled.next(!debug.enabled.value);
}, !!isDebugMode)))));
};
exports.TopToolbar = TopToolbar;