style: 💄 run formatter

Author: streamich

src/json-crdt-extensions/peritext/editor/Editor.ts

@@ -630,7 +630,10 @@ export class Editor<T = string> implements Printable {
 
   // --------------------------------------------------------------- formatting
 
-  public eraseFormatting(store: EditorSlices<T> = this.saved, selection: Range<T>[] | IterableIterator<Range<T>> = this.cursors()): void {
+  public eraseFormatting(
+    store: EditorSlices<T> = this.saved,
+    selection: Range<T>[] | IterableIterator<Range<T>> = this.cursors(),
+  ): void {
     const overlay = this.txt.overlay;
     for (const range of selection) {
       overlay.refresh();
@@ -658,7 +661,10 @@ export class Editor<T = string> implements Printable {
     }
   }
 
-  public clearFormatting(store: EditorSlices<T> = this.saved, selection: Range<T>[] | IterableIterator<Range<T>> = this.cursors()): void {
+  public clearFormatting(
+    store: EditorSlices<T> = this.saved,
+    selection: Range<T>[] | IterableIterator<Range<T>> = this.cursors(),
+  ): void {
     const overlay = this.txt.overlay;
     overlay.refresh();
     for (const range of selection) {
@@ -853,7 +859,12 @@ export class Editor<T = string> implements Printable {
     return true;
   }
 
-  public split(type?: SliceType, data?: unknown, selection: Range<T>[] | IterableIterator<Range<T>> = this.cursors(), slices: EditorSlices<T> = this.saved): void {
+  public split(
+    type?: SliceType,
+    data?: unknown,
+    selection: Range<T>[] | IterableIterator<Range<T>> = this.cursors(),
+    slices: EditorSlices<T> = this.saved,
+  ): void {
     if (type === void 0) {
       for (const range of selection) {
         this.collapseCursor(range);
@@ -924,8 +935,7 @@ export class Editor<T = string> implements Printable {
     slices: EditorSlices<T> = this.saved,
     def: SliceTypeStep = SliceTypeCon.p,
   ): void {
-    for (const range of selection)
-      this.tglMarkerAt(range.start, type, data, slices, def);
+    for (const range of selection) this.tglMarkerAt(range.start, type, data, slices, def);
   }
 
   /**
@@ -936,9 +946,13 @@ export class Editor<T = string> implements Printable {
    * @param slices The slices set to use, if new marker is inserted at the start
    *     of the document.
    */
-  public updMarker(type: SliceType, data?: unknown, selection: Range<T>[] | IterableIterator<Range<T>> = this.cursors(), slices: EditorSlices<T> = this.saved): void {
-    for (const range of selection)
-      this.updMarkerAt(range.start, type, data, slices);
+  public updMarker(
+    type: SliceType,
+    data?: unknown,
+    selection: Range<T>[] | IterableIterator<Range<T>> = this.cursors(),
+    slices: EditorSlices<T> = this.saved,
+  ): void {
+    for (const range of selection) this.updMarkerAt(range.start, type, data, slices);
   }
 
   public delMarker(selection: Range<T>[] | IterableIterator<Range<T>> = this.cursors()): void {

src/json-crdt-extensions/peritext/editor/EditorSlices.ts

@@ -6,7 +6,10 @@ import type {Slices} from '../slice/Slices';
 import type {ITimestampStruct} from '../../../json-crdt-patch';
 import type {Range} from '../rga/Range';
 
-const forEachRange = <T, S extends PersistedSlice<T>>(selection: Range<T>[] | IterableIterator<Range<T>>, callback: (range: Range<T>) => S): S[] => {
+const forEachRange = <T, S extends PersistedSlice<T>>(
+  selection: Range<T>[] | IterableIterator<Range<T>>,
+  callback: (range: Range<T>) => S,
+): S[] => {
   const slices: S[] = [];
   for (const cursor of selection) {
     const slice = callback(cursor);
@@ -21,25 +24,42 @@ export class EditorSlices<T = string> {
     public readonly slices: Slices<T>,
   ) {}
 
-  public insStack(type: SliceType, data?: unknown | ITimestampStruct, selection?: Range<T>[] | IterableIterator<Range<T>>): PersistedSlice<T>[] {
+  public insStack(
+    type: SliceType,
+    data?: unknown | ITimestampStruct,
+    selection?: Range<T>[] | IterableIterator<Range<T>>,
+  ): PersistedSlice<T>[] {
     const {slices, txt} = this;
     selection ||= txt.editor.cursors();
     return forEachRange(selection, (range) => slices.insStack(range.range(), type, data));
   }
 
-  public insOne(type: SliceType, data?: unknown | ITimestampStruct, selection?: Range<T>[] | IterableIterator<Range<T>>): PersistedSlice<T>[] {
+  public insOne(
+    type: SliceType,
+    data?: unknown | ITimestampStruct,
+    selection?: Range<T>[] | IterableIterator<Range<T>>,
+  ): PersistedSlice<T>[] {
     const {slices, txt} = this;
     selection ||= txt.editor.cursors();
     return forEachRange(selection, (range) => slices.insOne(range.range(), type, data));
   }
 
-  public insErase(type: SliceType, data?: unknown | ITimestampStruct, selection?: Range<T>[] | IterableIterator<Range<T>>): PersistedSlice<T>[] {
+  public insErase(
+    type: SliceType,
+    data?: unknown | ITimestampStruct,
+    selection?: Range<T>[] | IterableIterator<Range<T>>,
+  ): PersistedSlice<T>[] {
     const {slices, txt} = this;
     selection ||= txt.editor.cursors();
     return forEachRange(selection, (range) => slices.insErase(range.range(), type, data));
   }
 
-  public insMarker(type: SliceType, data?: unknown, separator?: string, selection?: Range<T>[] | IterableIterator<Range<T>>): MarkerSlice<T>[] {
+  public insMarker(
+    type: SliceType,
+    data?: unknown,
+    separator?: string,
+    selection?: Range<T>[] | IterableIterator<Range<T>>,
+  ): MarkerSlice<T>[] {
     const {slices, txt} = this;
     const editor = txt.editor;
     selection ||= txt.editor.cursors();

src/json-crdt-peritext-ui/__demos__/components/App.tsx

@@ -19,7 +19,7 @@ const markdown =
   'This is code block:' +
   '\n\n' +
   '```\n' +
-  'console.log(123);\n' + 
+  'console.log(123);\n' +
   '```\n' +
   '\n\n' +
   'A `ClipboardEvent` is dispatched for copy, cut, and paste events, and it contains ' +

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

@@ -48,7 +48,7 @@ export class PeritextEventTarget extends SubscriptionEventTarget<PeritextEventMa
     edge: SelectionMoveInstruction[0],
     unit: SelectionMoveInstruction[1],
     len?: SelectionMoveInstruction[2],
-    collapse?: SelectionMoveInstruction[3]
+    collapse?: SelectionMoveInstruction[3],
   ): void;
   public delete(detail?: DeleteDetail): void;
   public delete(a: any = {}, b?: any, len?: any, collapse?: any): void {
@@ -68,7 +68,7 @@ export class PeritextEventTarget extends SubscriptionEventTarget<PeritextEventMa
     edge: SelectionMoveInstruction[0],
     unit: SelectionMoveInstruction[1],
     len?: SelectionMoveInstruction[2],
-    collapse?: SelectionMoveInstruction[3]
+    collapse?: SelectionMoveInstruction[3],
   ): void;
   public move(move?: CursorDetail['move'], at?: CursorDetail['at']): void;
   public move(a?: any, b?: any, len?: any, collapse?: any): void {

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

@@ -21,8 +21,12 @@ const getEdge = (start: Point, end: Point, anchor: CursorAnchor, edge: events.Se
     : edge === 'end'
       ? end
       : edge === 'focus'
-        ? anchor === CursorAnchor.Start ? end : start
-        : anchor === CursorAnchor.Start ? start : end;
+        ? anchor === CursorAnchor.Start
+          ? end
+          : start
+        : anchor === CursorAnchor.Start
+          ? start
+          : end;
 
 export interface PeritextEventDefaultsOpts {
   clipboard?: PeritextClipboard;
@@ -89,13 +93,18 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
       let anchor: CursorAnchor = selection instanceof Cursor ? selection.anchorSide : CursorAnchor.End;
       for (const [edge, to, len, collapse] of move) {
         const point = getEdge(start, end, anchor, edge);
-        const point2 = typeof to === 'string'
-          ? (len ? txt.editor.skip(point, len, to ?? 'char', editorUi) : point.clone())
-          : txt.editor.pos2point(to);
-        if (point === start) start = point2; else end = point2;
+        const point2 =
+          typeof to === 'string'
+            ? len
+              ? txt.editor.skip(point, len, to ?? 'char', editorUi)
+              : point.clone()
+            : txt.editor.pos2point(to);
+        if (point === start) start = point2;
+        else end = point2;
         if (collapse) {
           if (to !== 'point') point2.refAfter();
-          if (point === start) end = point2.clone(); else start = point2.clone();
+          if (point === start) end = point2.clone();
+          else start = point2.clone();
         }
       }
       if (start.cmpSpatial(end) > 0) {
@@ -408,10 +417,11 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
             }
             if (!data) data = await clipboard.readData();
             const inserted = transfer.fromClipboard(range, data);
-            if (inserted && editor.cursorCard() === 1) this.et.move([
-              ['start', 'char', inserted],
-              ['end', 'char', inserted],
-            ]);
+            if (inserted && editor.cursorCard() === 1)
+              this.et.move([
+                ['start', 'char', inserted],
+                ['end', 'char', inserted],
+              ]);
             this.et.change();
           }
         }

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

@@ -15,7 +15,7 @@ export interface ChangeDetail {
 /**
  * The {@link SelectionDetailPart} interface allows to specify a range of text
  * selection or a single caret position in the document.
- * 
+ *
  * If the `at` field is specified, the selection set will contain one selection,
  * the one created at the specified position. If the `at` field is not specified,
  * the selection set will contain all cursors in the document at their current
@@ -27,11 +27,11 @@ export interface SelectionDetailPart {
    * operation is applied over all cursors in the document at their current
    * positions. Or if operation is specified only for one cursor, it will be
    * applied to the first (main) cursor.
-   * 
+   *
    * If specified, a new temporary selection is created which is used to perform
    * the operation on. Then, if specified, this selection is used to create a
    * new main cursor, while all other cursors are removed.
-   * 
+   *
    * @default undefined
    */
   at?: Selection;
@@ -57,7 +57,7 @@ export interface SelectionMoveDetailPart {
 export type SelectionMoveInstruction = [
   /**
    * Specifies the selection edge to perform the operation on.
-   * 
+   *
    * - `'start'`: The start edge of the selection.
    * - `'end'`: The end edge of the selection.
    * - `'focus'`: The focus edge of the selection. If the selection does not have
@@ -66,11 +66,10 @@ export type SelectionMoveInstruction = [
    * - `'anchor'`: The anchor edge of the selection. If the selection does not
    *    have an anchor edge (i.e. it is a {@link Range}, not a {@link Cursor}), the
    *    anchor is assumed to be the `'start'` edge of the selection.
-   * 
+   *
    * @default 'focus'
    */
   edge: 'start' | 'end' | 'focus' | 'anchor',
-
   /**
    * Absolute position is specified using {@link Position} type. In which case
    * the next `len` field is ignored.
@@ -94,21 +93,19 @@ export type SelectionMoveInstruction = [
    * - `'block'`: Moves to the beginning or end of block, i.e. paragraph,
    *   blockquote, etc.
    * - `'all'`: Moves to the beginning or end of the document.
-   * 
+   *
    * @todo Introduce 'vline', "visual line" - soft line break.
    */
   to: Position | 'point' | 'char' | 'word' | 'line' | 'vline' | 'vert' | 'block' | 'all',
-
   /**
    * Specify the length of the movement (the number of steps) in units
    * specified by the `to` field. If not specified, the default value is `0`,
    * which results in no movement. If the value is negative, the movement will
    * be backwards. If positive, the movement will be forwards.
-   * 
+   *
    * @default 0
    */
   len?: number,
-
   /**
    * If `true`, the selection will be collapsed to a single point. The other
    * edge of the selection will be moved to the same position as the specified
@@ -122,11 +119,11 @@ export type SelectionMoveInstruction = [
  * which apply change to a range (selection) of text in the document. Usually,
  * the events will apply changes to all ranges in the selection, some event may
  * use only the first range in the selection (like the "buffer" event).
- * 
+ *
  * Selection-based events work by first constructing a *selection set*, which
  * is a list of {@link Range} or {@link Cursor} instances. They then apply the
  * event to each selection in the selection set.
- * 
+ *
  * The selection set is constructed by using the `at` field to specify a single
  * {@link Range} or, if not specified, all {@link Cursor} instances in the
  * document are used. Then the `move` field is used to specify one or more move
@@ -155,7 +152,7 @@ export interface DeleteDetail extends RangeEventDetail {}
  * The `cursor` event is emitted when caret or selection is changed. The event
  * is applied to all cursors in the document. If the `at` field is specified,
  * a new cursor is created at that position, and all other cursors are removed.
- * 
+ *
  * The `at` field allows to insert a new cursors at a specified location in the
  * document and remove all other cursors. The `move` fields allows to perform
  * one or more move operations to all cursors in the document.
@@ -197,10 +194,10 @@ export interface DeleteDetail extends RangeEventDetail {}
  * ```ts
  * {move: [['anchor', 'line', -1]]}
  * ```
- * 
+ *
  * Move *anchor* edge of the selection exactly to after the second character in
  * the document:
- * 
+ *
  * ```ts
  * {move: [['anchor', 2]]}
  * ```
@@ -216,9 +213,9 @@ export interface DeleteDetail extends RangeEventDetail {}
  * ```ts
  * {at: [0], move: [['focus', 'all', 1]]}
  * ```
- * 
+ *
  * or
- * 
+ *
  * ```ts
  * {move: [
  *   ['start', 'all', -1],
@@ -240,7 +237,7 @@ export interface CursorDetail extends RangeEventDetail {
    * a new cursor will be inserted at the specified position into the document.
    * Otherwise, the selection specified by the `at` field will be used to
    * replace all other cursors in the document.
-   * 
+   *
    * @default false
    */
   add?: boolean;

src/json-crdt-peritext-ui/plugins/blocks/RenderBlock/Codeblock.tsx

@@ -19,5 +19,9 @@ export interface CodeblockProps extends BlockViewProps {
 }
 
 export const Codeblock: React.FC<CodeblockProps> = ({block, children}) => {
-  return <pre className={blockClass}><code>{children}</code></pre>;
+  return (
+    <pre className={blockClass}>
+      <code>{children}</code>
+    </pre>
+  );
 };

src/json-crdt-peritext-ui/plugins/toolbar/block/LeafBlockFrame/AutoExpandableToolbar.tsx

@@ -9,7 +9,12 @@ export interface AutoExpandableToolbarProps extends ExpandableToolbarProps {
   onPopupClose?: () => void;
 }
 
-export const AutoExpandableToolbar: React.FC<AutoExpandableToolbarProps> = ({menu, disabled, onPopupClose, ...rest}) => {
+export const AutoExpandableToolbar: React.FC<AutoExpandableToolbarProps> = ({
+  menu,
+  disabled,
+  onPopupClose,
+  ...rest
+}) => {
   const expandPoint = React.useRef<AnchorPoint>({x: 32, y: 32, dx: 1, dy: 1});
 
   return (

src/json-crdt-peritext-ui/plugins/toolbar/block/LeafBlockFrame/ExpandableToolbar.tsx

@@ -46,7 +46,17 @@ export const ExpandableToolbar: React.FC<ExpandableToolbarProps> = (props) => {
     );
   }
 
-  return <ToolbarMenu {...rest} more={{...more, onClick: expandPoint ? (e) => {
-    setView('context');
-  } : undefined}} />;
+  return (
+    <ToolbarMenu
+      {...rest}
+      more={{
+        ...more,
+        onClick: expandPoint
+          ? (e) => {
+              setView('context');
+            }
+          : undefined,
+      }}
+    />
+  );
 };

src/json-crdt-peritext-ui/plugins/toolbar/block/LeafBlockFrame/index.tsx

@@ -25,15 +25,14 @@ const topRightOverlay = rule({
   r: '-16px',
 });
 
-export interface LeafBlockFrameProps extends RenderBlockProps {
-}
+export interface LeafBlockFrameProps extends RenderBlockProps {}
 
 export const LeafBlockFrame: React.FC<LeafBlockFrameProps> = ({block, children}) => {
   const {toolbar} = useToolbarPlugin();
   const activeLeafBlockId = useBehaviorSubject(toolbar.activeLeafBlockId$);
   const menu = React.useMemo(() => toolbar.leafBlockSmallMenu({block}), [toolbar, block]);
 
-  const isBlockActive = !!activeLeafBlockId && (compare(activeLeafBlockId, block.marker?.id ?? block.txt.str.id) === 0);
+  const isBlockActive = !!activeLeafBlockId && compare(activeLeafBlockId, block.marker?.id ?? block.txt.str.id) === 0;
 
   return (
     <div className={blockClass}>