json-joy
Version:
Collection of libraries for building collaborative editing apps.
41 lines (40 loc) • 2.02 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Console = void 0;
const tslib_1 = require("tslib");
// biome-ignore lint: React is used for JSX
const React = tslib_1.__importStar(require("react"));
const nano_theme_1 = require("nano-theme");
const context_1 = require("../context");
const ButtonGroup_1 = require("../../../components/ButtonGroup");
const Button_1 = require("../../../components/Button");
const hooks_1 = require("../../../web/react/hooks");
const consoleClass = (0, nano_theme_1.rule)({
bxz: 'border-box',
bg: '#fafafa',
fz: '8px',
mr: '8px 0',
pd: '8px 16px',
bdrad: '8px',
lh: '1.3em',
});
const Console = () => {
const { ctx, flags } = (0, context_1.useDebugCtx)();
const dom = (0, hooks_1.useSyncStore)(flags.dom);
const editor = (0, hooks_1.useSyncStore)(flags.editor);
const peritext = (0, hooks_1.useSyncStore)(flags.peritext);
const model = (0, hooks_1.useSyncStore)(flags.model);
if (!ctx)
return null;
return (React.createElement("div", { className: consoleClass },
React.createElement(ButtonGroup_1.ButtonGroup, null,
React.createElement(Button_1.Button, { small: true, active: dom, onClick: () => flags.dom.next(!dom) }, "DOM"),
React.createElement(Button_1.Button, { small: true, active: editor, onClick: () => flags.editor.next(!editor) }, "Editor"),
React.createElement(Button_1.Button, { small: true, active: peritext, onClick: () => flags.peritext.next(!peritext) }, "Peritext"),
React.createElement(Button_1.Button, { small: true, active: model, onClick: () => flags.model.next(!model) }, "Model")),
!!dom && React.createElement("pre", null, ctx.dom + ''),
!!editor && React.createElement("pre", null, ctx.peritext.editor + ''),
!!peritext && React.createElement("pre", null, ctx.peritext + ''),
!!model && React.createElement("pre", null, ctx.peritext.model + '')));
};
exports.Console = Console;