json-joy
Version:
Collection of libraries for building collaborative editing apps.
59 lines (58 loc) • 2.27 kB
JavaScript
import * as React from 'react';
import { drule, rule, useTheme } from 'nano-theme';
import { context } from './context';
import { Button } from '../../components/Button';
import { Console } from './Console';
import { ValueSyncStore } from '../../../util/events/sync-store';
import { useSyncStore } from '../../web/react/hooks';
import { DebugState } from './state';
const blockClass = rule({
pos: 'relative',
});
const btnClass = 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 = rule({
out: '1px dotted black !important',
});
export const RenderPeritext = ({ state: state_, ctx, button, children }) => {
const theme = useTheme();
const state = React.useMemo(() => state_ ?? new DebugState(), [state_]);
useSyncStore(state.enabled);
const value = React.useMemo(() => ({
state,
ctx,
flags: {
dom: new ValueSyncStore(true),
editor: new ValueSyncStore(true),
peritext: new ValueSyncStore(false),
model: new ValueSyncStore(false),
},
}), [state, ctx]);
return (React.createElement(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, { 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, null))));
};