style(json-crdt-peritext-ui): 💄 fix linter issues

Author: streamich

src/json-crdt-peritext-ui/events/defaults/ui/UiHandle.ts

@@ -28,7 +28,8 @@ export class UiHandle {
   public getPointRect(pos: number | Point<string>, right = true): Rect | undefined {
     const txt = this.txt;
     const point = typeof pos === 'number' ? txt.pointAt(pos) : pos.clone();
-    if (right) point.refBefore(); else point.refAfter();
+    if (right) point.refBefore();
+    else point.refAfter();
     return this.api.getCharRect?.(point.id);
   }
 

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

@@ -12,11 +12,10 @@ 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});
+  public readonly peritext: PeritextPlugin['peritext'] = (children, ctx) => h(RenderPeritext, {children, ctx});
 }

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

@@ -75,6 +75,8 @@ export const RenderCaret: React.FC<RenderCaretProps> = ({italic, point, children
   const focus = useSyncStoreOpt(dom?.cursor.focus) || false;
   const plugin = useCursorPlugin();
   const ref = React.useRef<HTMLSpanElement>(null);
+
+  // Place caret at the end of line wrap.
   React.useEffect(() => {
     const el = ref.current;
     if (!el) return;
@@ -85,7 +87,7 @@ export const RenderCaret: React.FC<RenderCaretProps> = ({italic, point, children
       if (point.isAbs()) return;
       const rect = ctx.dom.getCharRect(point.id);
       if (!rect) return;
-      const nextPoint = point.copy(p => p.refBefore());
+      const nextPoint = point.copy((p) => p.refBefore());
       if (nextPoint.isAbs()) return;
       const rect2 = ctx.dom.getCharRect(nextPoint.id);
       if (!rect2) return;
@@ -96,7 +98,7 @@ export const RenderCaret: React.FC<RenderCaretProps> = ({italic, point, children
         style.left = dx + 'px';
       }
     }
-  }, [point]);
+  }, [point, ctx.dom.getCharRect]);
 
   const anchorForward = point.anchor === Anchor.Before;
 

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {CursorState} from './state';
+import type {CursorState} from './state';
 
 export const context = React.createContext<CursorState>(null!);
 export const useCursorPlugin = () => React.useContext(context);

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

@@ -5,16 +5,14 @@ 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,
-  ) {}
+
+  constructor(public readonly ctx: PeritextSurfaceState) {}
 
   /** -------------------------------------------------- {@link UiLifeCycles} */
   public start(): () => void {

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {Chrome} from './Chrome';
 import {context, type ToolbarPluginContextValue} from './context';
 import {ToolbarState} from './state';
-import type {PeritextSurfaceState, } from '../../web';
+import type {PeritextSurfaceState} from '../../web';
 import type {ToolbarPluginOpts} from './ToolbarPlugin';
 
 export interface RenderPeritextProps {

src/json-crdt-peritext-ui/plugins/toolbar/ToolbarPlugin.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {RenderInline} from './RenderInline';
-import {RenderPeritext, RenderPeritextProps} from './RenderPeritext';
+import {RenderPeritext, type RenderPeritextProps} from './RenderPeritext';
 import {text} from '../minimal/text';
 import {RenderBlock} from './RenderBlock';
 import {RenderCaret} from './RenderCaret';

src/json-crdt-peritext-ui/web/dom/DomController.ts

@@ -1,5 +1,5 @@
 import {printTree, type Printable} from 'tree-dump';
-import {AvlMap} from "sonic-forest/lib/avl/AvlMap";
+import {AvlMap} from 'sonic-forest/lib/avl/AvlMap';
 import {InputController} from './InputController';
 import {CursorController} from './CursorController';
 import {RichTextController} from './RichTextController';

src/json-crdt-peritext-ui/web/dom/RichTextController.ts

@@ -47,7 +47,6 @@ export class RichTextController implements UiLifeCycles {
     el.addEventListener('keydown', onKeyDown);
     return () => {
       el.removeEventListener('keydown', onKeyDown);
-
     };
   }
 }

src/json-crdt-peritext-ui/web/react/BlockView.tsx

@@ -75,15 +75,18 @@ export const BlockView: React.FC<BlockViewProps> = React.memo(
     }
 
     let children: React.ReactNode = (
-      <span ref={(element) => {
-        el?.(element);
-        if (block instanceof LeafBlock) {
-          const blockId = block.start.id;
-          const blocks = dom.blocks;
-          if (element) blocks.set(blockId, element);
-          else blocks.del(blockId);
-        }
-      }} style={{position: 'relative', display: 'block'}}>
+      <span
+        ref={(element) => {
+          el?.(element);
+          if (block instanceof LeafBlock) {
+            const blockId = block.start.id;
+            const blocks = dom.blocks;
+            if (element) blocks.set(blockId, element);
+            else blocks.del(blockId);
+          }
+        }}
+        style={{position: 'relative', display: 'block'}}
+      >
         {elements.length ? elements : Char.ZeroLengthSpace}
       </span>
     );