feat(json-crdt-peritext-ui): 🎸 create formal cursor state

Author: streamich

src/json-crdt-peritext-ui/events/index.ts

@@ -4,6 +4,9 @@ import {DomClipboard} from './clipboard/DomClipboard';
 import {create as createDataTransfer} from '../../json-crdt-extensions/peritext/transfer/create';
 import type {Peritext} from '../../json-crdt-extensions';
 
+/**
+ * @todo Move into separately importable file.
+ */
 export const createEvents = (txt: Peritext) => {
   const et = new PeritextEventTarget();
   const clipboard: PeritextEventDefaultsOpts['clipboard'] =
@@ -15,3 +18,5 @@ export const createEvents = (txt: Peritext) => {
   et.defaults = defaults;
   return defaults;
 };
+
+export * from './types';

src/json-crdt-peritext-ui/plugins/cursor/CursorPlugin.ts

@@ -12,11 +12,11 @@ const h = React.createElement;
  * Plugin which renders the main cursor and all other current user local
  * cursors.
  */
-export class CursorPlugin implements PeritextPlugin {
+export class CursorPlugin implements PeritextPlugin {  
   public readonly caret: PeritextPlugin['caret'] = (props, children) => h(RenderCaret, <any>props, children);
   public readonly focus: PeritextPlugin['focus'] = (props, children) => h(RenderFocus, <any>props, children);
   public readonly anchor: PeritextPlugin['anchor'] = (props, children) => h(RenderAnchor, <any>props, children);
   public readonly inline: PeritextPlugin['inline'] = (props, children) => h(RenderInline, props as any, children);
   public readonly peritext: PeritextPlugin['peritext'] = (children, ctx) =>
-    h(RenderPeritext, {children, ctx, plugin: this});
+    h(RenderPeritext, {children, ctx});
 }

src/json-crdt-peritext-ui/plugins/cursor/RenderPeritext.tsx

@@ -1,59 +1,16 @@
 import * as React from 'react';
-import {context, type CursorPluginContextValue} from './context';
-import {ValueSyncStore} from '../../../util/events/sync-store';
-import type {ChangeDetail} from '../../events/types';
+import {context} from './context';
+import {CursorState} from './state';
 import type {PeritextSurfaceState} from '../../web';
-import type {CursorPlugin} from './CursorPlugin';
 
 export interface RenderPeritextProps {
   ctx: PeritextSurfaceState;
-  plugin: CursorPlugin;
   children?: React.ReactNode;
 }
 
-export const RenderPeritext: React.FC<RenderPeritextProps> = ({ctx, plugin, children}) => {
-  // biome-ignore lint: explicit dependency handling
-  const value: CursorPluginContextValue = React.useMemo(
-    () => ({
-      ctx,
-      plugin,
-      score: new ValueSyncStore(0),
-      scoreDelta: new ValueSyncStore(0),
-      lastVisScore: new ValueSyncStore(0),
-    }),
-    [ctx],
-  );
+export const RenderPeritext: React.FC<RenderPeritextProps> = ({ctx, children}) => {
+  const state = React.useMemo(() => new CursorState(ctx), [ctx]);
+  React.useEffect(() => state.start(), [state]);
 
-  React.useEffect(() => {
-    const dom = ctx?.dom;
-    if (!dom || !value) return;
-    let lastNow: number = 0;
-    const listener = (event: CustomEvent<ChangeDetail>) => {
-      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 <context.Provider value={value}>{children}</context.Provider>;
+  return <context.Provider value={state}>{children}</context.Provider>;
 };

src/json-crdt-peritext-ui/plugins/cursor/context.ts

@@ -1,23 +1,5 @@
 import * as React from 'react';
-import type {PeritextSurfaceState} from '../../web';
-import type {ValueSyncStore} from '../../../util/events/sync-store';
-import type {CursorPlugin} from './CursorPlugin';
-
-export interface CursorPluginContextValue {
-  ctx?: PeritextSurfaceState;
-
-  plugin: CursorPlugin;
-
-  /** Current score. */
-  score: ValueSyncStore<number>;
-
-  /** By how much the score changed. */
-  scoreDelta: ValueSyncStore<number>;
-
-  /** The last score that was shown to the user. */
-  lastVisScore: ValueSyncStore<number>;
-}
-
-export const context = React.createContext<CursorPluginContextValue>(null!);
+import {CursorState} from './state';
 
+export const context = React.createContext<CursorState>(null!);
 export const useCursorPlugin = () => React.useContext(context);

src/json-crdt-peritext-ui/plugins/cursor/index.ts

@@ -1 +1,2 @@
 export {CursorPlugin} from './CursorPlugin';
+export {useCursorPlugin} from './context';

src/json-crdt-peritext-ui/plugins/cursor/state.ts

@@ -0,0 +1,49 @@
+import {ValueSyncStore} from '../../../util/events/sync-store';
+import {ChangeDetail} from '../../events/types';
+import type {PeritextSurfaceState, UiLifeCycles} from '../../web';
+
+export class CursorState implements UiLifeCycles {
+  /** Current score. */
+  public readonly score: ValueSyncStore<number> = new ValueSyncStore(0);
+  
+  /** By how much the score changed. */
+  public readonly scoreDelta: ValueSyncStore<number> = new ValueSyncStore(0);
+  
+  /** The last score that was shown to the user. */
+  public readonly lastVisScore: ValueSyncStore<number> = new ValueSyncStore(0);
+  
+  constructor(
+    public readonly ctx: PeritextSurfaceState,
+  ) {}
+
+  /* --------------------------------------------------- {@link UiLifeCycles} */
+  public start(): () => void {
+    const dom = this.ctx.dom;
+    let lastNow: number = 0;
+    const listener = (event: CustomEvent<ChangeDetail>) => {
+      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) this.score.next(delta >= 0 ? this.score.value + delta : 0);
+      this.scoreDelta.next(delta);
+      lastNow = now;
+    };
+    dom.et.addEventListener('change', listener);
+    return () => {
+      dom.et.removeEventListener('change', listener);
+    };
+  }
+}

src/json-crdt-peritext-ui/web/index.ts

@@ -1,2 +1,3 @@
 export * from './react';
 export {PeritextSurfaceState} from './state';
+export {UiLifeCycles, Rect} from './types';