style: 💄 fix linter issues

streamich · streamich · commit 41c75591f293 · 2025-05-15T15:24:07.000+02:00
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/components/UrlDisplayLayout.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/components/UrlDisplayLayout.tsx
@@ -79,7 +79,15 @@ export const UrlDisplayLayout: React.FC<UrlDisplayLayoutProps> = ({url, title})
                 <Favicon domain={domain} url={url} />
               </div>
             </div>
-            <div className={domainClass}>{title ? <><strong>{title}</strong> • {domainTruncated}</> : domainTruncated}</div>
+            <div className={domainClass}>
+              {title ? (
+                <>
+                  <strong>{title}</strong> • {domainTruncated}
+                </>
+              ) : (
+                domainTruncated
+              )}
+            </div>
           </FixedColumn>
           <div>
             <div className={linkClass}>
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/cursor/caret/CaretBottomOverlay/index.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/cursor/caret/CaretBottomOverlay/index.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import {FormattingsManagePane} from '../../../formatting/FormattingsManagePane';
 import {BottomPanePortal} from '../../util/BottomPanePortal';
 import {useToolbarPlugin} from '../../../context';
-import {PeritextEventDetailMap} from '../../../../../events';
+import type {PeritextEventDetailMap} from '../../../../../events';
 import type {CaretViewProps} from '../../../../../web/react/cursor/CaretView';
 
 const isDirectCaretPlacement = (event: PeritextEventDetailMap['change']['ev'] | undefined): boolean => {
@@ -12,7 +12,14 @@ const isDirectCaretPlacement = (event: PeritextEventDetailMap['change']['ev'] |
     const at = detail.at;
     if (Array.isArray(at) && at.length === 1 && typeof at[0] === 'number') return true;
     const move = detail.move;
-    if (Array.isArray(move) && move.length === 1 && Array.isArray(move[0]) && move[0][0] === 'focus' && typeof move[0][1] === 'number') return true;
+    if (
+      Array.isArray(move) &&
+      move.length === 1 &&
+      Array.isArray(move[0]) &&
+      move[0][0] === 'focus' &&
+      typeof move[0][1] === 'number'
+    )
+      return true;
   }
   return false;
 };
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/cursor/util/BottomPanePortal.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/cursor/util/BottomPanePortal.tsx
@@ -16,7 +16,13 @@ const position: EntangledPortalStateOpts['position'] = (base, dest) => {
   const {scrollY} = window;
   const body = document.body;
   const html = document.documentElement;
-  const pageHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
+  const pageHeight = Math.max(
+    body.scrollHeight,
+    body.offsetHeight,
+    html.clientHeight,
+    html.scrollHeight,
+    html.offsetHeight,
+  );
   if (base.y + dest.height + scrollY > pageHeight) y = base.y - (base.y + dest.height + scrollY - pageHeight);
   return [x, y];
 };
@@ -33,9 +39,5 @@ export interface BottomPanePortalProps {
 }
 
 export const BottomPanePortal: React.FC<BottomPanePortalProps> = ({children}) => {
-  return (
-    <EntangledPortal {...entangledProps}>
-      {children}
-    </EntangledPortal>
-  );
+  return <EntangledPortal {...entangledProps}>{children}</EntangledPortal>;
 };
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/cursor/util/TopPanePortal.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/cursor/util/TopPanePortal.tsx
@@ -10,7 +10,7 @@ const spanClass = rule({
 const gap = 4;
 const position: EntangledPortalStateOpts['position'] = (base, dest) => {
   let x = base.x - (dest.width >> 1);
-  let y = base.y - dest.height;
+  const y = base.y - dest.height;
   if (x < gap) x = gap;
   else if (x + dest.width + gap > window.innerWidth) x = window.innerWidth - dest.width - gap;
   return [x, y];
@@ -28,9 +28,5 @@ export interface TopPanePortalProps {
 }
 
 export const TopPanePortal: React.FC<TopPanePortalProps> = ({children}) => {
-  return (
-    <EntangledPortal {...entangledProps}>
-      {children}
-    </EntangledPortal>
-  );
+  return <EntangledPortal {...entangledProps}>{children}</EntangledPortal>;
 };
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/formatting/FormattingsManagePane/FormattingDisplay.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/formatting/FormattingsManagePane/FormattingDisplay.tsx
@@ -1,3 +1,4 @@
+// biome-ignore lint: lint/style/useImportType
 import * as React from 'react';
 import {useT} from 'use-t';
 import {BasicTooltip} from 'nice-ui/lib/4-card/BasicTooltip';
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/formatting/FormattingsManagePane/FormattingEditForm.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/formatting/FormattingsManagePane/FormattingEditForm.tsx
@@ -43,15 +43,7 @@ export const FormattingEditForm: React.FC<FormattingEditFormProps> = ({formattin
       <ContextSep line />
 
       <div style={{padding: '16px'}}>
-        <Button
-          small
-          lite={!valid}
-          positive={validation === 'good'}
-          block
-          disabled={!valid}
-          submit
-          onClick={() => {}}
-        >
+        <Button small lite={!valid} positive={validation === 'good'} block disabled={!valid} submit onClick={() => {}}>
           {t('Done')}
         </Button>
       </div>
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/formatting/FormattingsManagePane/context.ts b/src/json-crdt-peritext-ui/plugins/toolbar/formatting/FormattingsManagePane/context.ts
@@ -1,5 +1,5 @@
-import * as React from "react";
-import {FormattingManageState} from "./state";
+import * as React from 'react';
+import type {FormattingManageState} from './state';
 
 export const context = React.createContext<FormattingManageState>(null!);
 export const useFormattingPane = () => React.useContext(context);
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/formatting/FormattingsManagePane/index.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/formatting/FormattingsManagePane/index.tsx
@@ -16,6 +16,7 @@ export const FormattingsManagePane: React.FC<FormattingsManagePaneProps> = ({inl
   // biome-ignore lint: too many dependencies
   const state = React.useMemo(() => new FormattingManageState(toolbar, inline), [toolbar, inline?.key()]);
   const formattings = useBehaviorSubject(React.useMemo(() => state.getFormattings$(), [state]));
+  // biome-ignore lint: manually manage dependencies
   React.useLayoutEffect(() => {
     if (formattings.length === 1) {
       state.select(formattings[0]);
@@ -30,7 +31,7 @@ export const FormattingsManagePane: React.FC<FormattingsManagePaneProps> = ({inl
       <context.Provider value={state}>
         <FormattingDisplay
           formatting={selected || formattings[0]}
-          onClose={!selected || (formattings.length === 1) ? void 0 : () => state.select(null)}
+          onClose={!selected || formattings.length === 1 ? void 0 : () => state.select(null)}
         />
       </context.Provider>
     );
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/formatting/FormattingsManagePane/state.ts b/src/json-crdt-peritext-ui/plugins/toolbar/formatting/FormattingsManagePane/state.ts
@@ -3,11 +3,11 @@ import {SavedFormatting} from '../../state/formattings';
 import {PersistedSlice} from '../../../../../json-crdt-extensions/peritext/slice/PersistedSlice';
 import {subject} from '../../../../util/rx';
 import {toSchema} from '../../../../../json-crdt/schema/toSchema';
-import {Model, ObjApi} from '../../../../../json-crdt/model';
-import {ObjNode} from '../../../../../json-crdt/nodes';
+import {JsonCrdtDiff} from '../../../../../json-crdt-diff/JsonCrdtDiff';
+import {Model, type ObjApi} from '../../../../../json-crdt/model';
+import type {ObjNode} from '../../../../../json-crdt/nodes';
 import type {Inline} from '../../../../../json-crdt-extensions';
 import type {ToolbarState} from '../../state';
-import {JsonCrdtDiff} from '../../../../../json-crdt-diff/JsonCrdtDiff';
 
 export class FormattingManageState {
   public readonly selected$ = new BehaviorSubject<SavedFormatting | null>(null);
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/formatting/FormattingsNewPane.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/formatting/FormattingsNewPane.tsx
@@ -37,10 +37,7 @@ export const FormattingsNewPane: React.FC<FormattingsNewPaneProps> = ({formattin
 
   return (
     <FormattingPane onEsc={() => toolbar.newSlice.next(void 0)}>
-      <form
-        className={blockClass}
-        onSubmit={handleSave}
-      >
+      <form className={blockClass} onSubmit={handleSave}>
         <ContextPaneHeader short onCloseClick={() => toolbar.newSlice.next(void 0)}>
           <FormattingTitle formatting={formatting} />
         </ContextPaneHeader>
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/formatting/tags/a/Edit.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/formatting/tags/a/Edit.tsx
@@ -13,7 +13,7 @@ import {useT} from 'use-t';
 import type {EditableFormatting} from '../../../state/formattings';
 import type {CollaborativeStr} from 'collaborative-editor';
 
-type Data = {href: string, title?: string};
+type Data = {href: string; title?: string};
 
 export interface EditProps {
   formatting: EditableFormatting;
@@ -27,7 +27,7 @@ export const Edit: React.FC<EditProps> = ({formatting, onSave}) => {
   const [showTitle, setShowTitle] = React.useState(!!formatting.conf()?.view()?.title);
   const href = React.useMemo(() => () => formatting.conf()?.str(['href']), [formatting]);
   const titleStr = React.useMemo(() => () => formatting.conf()?.str(['title']), [formatting]);
-  const data: Data = useSyncStoreOpt(formatting.conf()!.events) as Data || {url: ''};
+  const data: Data = (useSyncStoreOpt(formatting.conf()!.events) as Data) || {url: ''};
 
   if (!href()) return null;
 
@@ -74,8 +74,8 @@ export const Edit: React.FC<EditProps> = ({formatting, onSave}) => {
             }, 20);
           }}
         >
-            {t('Title')}
-          </Button>
+          {t('Title')}
+        </Button>
       )}
     </div>
   );
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/formatting/tags/a/View.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/formatting/tags/a/View.tsx
@@ -4,7 +4,7 @@ import type {ViewProps} from '../../../types';
 import {UrlDisplayLayout} from '../../../components/UrlDisplayLayout';
 
 export const View: React.FC<ViewProps> = ({formatting}) => {
-  const data = formatting.range.data() as {href: string, title?: string};
+  const data = formatting.range.data() as {href: string; title?: string};
   if (!data || typeof data !== 'object') return;
   return <UrlDisplayLayout url={data.href ?? ''} title={data.title} />;
 };
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/formatting/views/new/FormattingNewGeneric.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/formatting/views/new/FormattingNewGeneric.tsx
@@ -5,8 +5,5 @@ import type {EditProps} from '../../../types';
 export interface FormattingNewGenericProps extends EditProps {}
 
 export const FormattingNewGeneric: React.FC<FormattingNewGenericProps> = ({formatting}) => {
-
-  return (
-    <div>Generic configurator</div>
-  );
+  return <div>Generic configurator</div>;
 };
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/inline/RenderInline.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/inline/RenderInline.tsx
@@ -18,7 +18,12 @@ export const RenderInline: React.FC<RenderInlineProps> = (props) => {
   const attrs = inline.attr();
   let element = children;
   const a = attrs[SliceTypeCon.a];
-  if (a) element = <Link layers={a.length} stack={a}>{element}</Link>;
+  if (a)
+    element = (
+      <Link layers={a.length} stack={a}>
+        {element}
+      </Link>
+    );
   if (attrs[SliceTypeCon.mark]) element = <mark>{element}</mark>;
   if (attrs[SliceTypeCon.sup]) element = <sup>{element}</sup>;
   if (attrs[SliceTypeCon.sub]) element = <sub>{element}</sub>;
diff --git a/src/json-crdt-peritext-ui/util/rect$.ts b/src/json-crdt-peritext-ui/util/rect$.ts
@@ -1,4 +1,4 @@
-import { defer, Observable, merge, fromEvent, map } from 'rxjs';
+import {defer, Observable, merge, fromEvent, map} from 'rxjs';
 
 export const resize$ = (el: HTMLElement): Observable<number> => {
   let cnt = 0;
@@ -16,5 +16,5 @@ export const rerender$ = (el: HTMLElement): Observable<void> =>
       fromEvent(window, 'resize'),
       fromEvent(window, 'scroll'),
       fromEvent(screen.orientation, 'change'),
-    )
+    ),
   ).pipe(map(() => void 0));

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+// biome-ignore lint: lint/style/useImportType`
`1`	`2`	`import * as React from 'react';`
`2`	`3`	`import {useT} from 'use-t';`
`3`	`4`	`import {BasicTooltip} from 'nice-ui/lib/4-card/BasicTooltip';`