json-joy
Version:
Collection of libraries for building collaborative editing apps.
47 lines (46 loc) • 1.65 kB
JavaScript
import * as React from 'react';
import { Chrome } from './Chrome';
import { context } from './context';
import { ValueSyncStore } from '../../../util/events/sync-store';
export const RenderPeritext = ({ ctx, children }) => {
const value = React.useMemo(() => ({
ctx,
score: new ValueSyncStore(0),
scoreDelta: new ValueSyncStore(0),
lastVisScore: new ValueSyncStore(0),
}), [ctx]);
React.useEffect(() => {
const dom = ctx?.dom;
if (!dom || !value)
return;
let lastNow = 0;
const listener = (event) => {
const now = Date.now();
const timeDiff = now - lastNow;
let delta = 0;
switch (event.detail.ev?.type) {
case 'delete':
case 'insert':
case 'format':
case 'marker': {
delta = timeDiff < 30 ? 10 : timeDiff < 70 ? 5 : timeDiff < 150 ? 2 : timeDiff <= 1000 ? 1 : -1;
break;
}
default: {
delta = timeDiff <= 1000 ? 0 : -1;
break;
}
}
if (delta)
value.score.next(delta >= 0 ? value.score.value + delta : 0);
value.scoreDelta.next(delta);
lastNow = now;
};
dom.et.addEventListener('change', listener);
return () => {
dom.et.removeEventListener('change', listener);
};
}, [ctx?.dom, value]);
return (React.createElement(context.Provider, { value: value },
React.createElement(Chrome, null, children)));
};