json-joy
Version:
Collection of libraries for building collaborative editing apps.
64 lines (63 loc) • 2.64 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.RenderPeritext = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const nano_theme_1 = require("nano-theme");
const context_1 = require("./context");
const Button_1 = require("../../components/Button");
const Console_1 = require("./Console");
const sync_store_1 = require("../../../util/events/sync-store");
const hooks_1 = require("../../web/react/hooks");
const state_1 = require("./state");
const blockClass = (0, nano_theme_1.rule)({
pos: 'relative',
});
const btnClass = (0, nano_theme_1.drule)({
d: 'flex',
alignItems: 'center',
justifyContent: 'center',
pos: 'absolute',
t: '-16px',
r: 0,
pd: '2px',
bdrad: '8px',
bxsh: '0 1px 8px #00000008,0 1px 4px #0000000a,0 4px 10px #0000000f',
});
const childrenDebugClass = (0, nano_theme_1.rule)({
out: '1px dotted black !important',
});
const RenderPeritext = ({ state: state_, ctx, button, children }) => {
const theme = (0, nano_theme_1.useTheme)();
const state = React.useMemo(() => state_ ?? new state_1.DebugState(), [state_]);
(0, hooks_1.useSyncStore)(state.enabled);
const value = React.useMemo(() => ({
state,
ctx,
flags: {
dom: new sync_store_1.ValueSyncStore(true),
editor: new sync_store_1.ValueSyncStore(true),
peritext: new sync_store_1.ValueSyncStore(false),
model: new sync_store_1.ValueSyncStore(false),
},
}), [state, ctx]);
return (React.createElement(context_1.context.Provider, { value: value },
React.createElement("div", { className: blockClass, onKeyDown: (event) => {
switch (event.key) {
case 'D': {
if (event.ctrlKey) {
event.preventDefault();
state.toggleDebugMode();
}
break;
}
}
} },
!!button && (React.createElement("div", { className: btnClass({
bg: theme.bg,
}) },
React.createElement(Button_1.Button, { small: true, active: state.enabled.getSnapshot(), onClick: () => state.enabled.next(!state.enabled.getSnapshot()) }, "Debug"))),
React.createElement("div", { className: state.enabled.getSnapshot() ? childrenDebugClass : undefined }, children),
state.enabled.getSnapshot() && React.createElement(Console_1.Console, null))));
};
exports.RenderPeritext = RenderPeritext;