@dxos/react-ui-editor 0.6.12-main.15a606f → 0.6.12-main.568932b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.6.12-main.15a606f",
+  "version": "0.6.12-main.568932b",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -9,7 +9,19 @@
   "exports": {
     ".": {
       "browser": "./dist/lib/browser/index.mjs",
+      "node": {
+        "require": "./dist/lib/node/index.cjs",
+        "default": "./dist/lib/node-esm/index.mjs"
+      },
       "types": "./dist/types/src/index.d.ts"
+    },
+    "./state": {
+      "browser": "./dist/lib/browser/state/index.mjs",
+      "node": {
+        "require": "./dist/lib/node/state/index.cjs",
+        "default": "./dist/lib/node-esm/state/index.mjs"
+      },
+      "types": "./dist/types/src/state/index.d.ts"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -21,24 +33,24 @@
     "src"
   ],
   "dependencies": {
-    "@codemirror/autocomplete": "^6.18.0",
-    "@codemirror/commands": "^6.6.0",
+    "@codemirror/autocomplete": "^6.18.1",
+    "@codemirror/commands": "^6.6.2",
     "@codemirror/lang-javascript": "^6.2.2",
-    "@codemirror/lang-markdown": "^6.2.5",
-    "@codemirror/language": "^6.10.2",
+    "@codemirror/lang-markdown": "^6.3.0",
+    "@codemirror/language": "^6.10.3",
     "@codemirror/language-data": "^6.5.1",
-    "@codemirror/lint": "^6.8.1",
+    "@codemirror/lint": "^6.8.2",
     "@codemirror/search": "^6.5.6",
     "@codemirror/state": "^6.4.1",
     "@codemirror/theme-one-dark": "^6.1.2",
-    "@codemirror/view": "^6.29.1",
+    "@codemirror/view": "^6.34.1",
     "@fluentui/react-tabster": "^9.19.0",
-    "@lezer/common": "^1.2.1",
+    "@lezer/common": "^1.2.2",
     "@lezer/generator": "^1.7.1",
-    "@lezer/highlight": "^1.2.0",
-    "@lezer/markdown": "^1.3.0",
+    "@lezer/highlight": "^1.2.1",
+    "@lezer/markdown": "^1.3.1",
     "@radix-ui/react-context": "^1.0.0",
-    "@replit/codemirror-vim": "^6.0.14",
+    "@replit/codemirror-vim": "^6.2.1",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
     "codemirror": "^6.0.1",
     "lib0": "^0.2.65",
@@ -48,19 +60,19 @@
     "lodash.sortby": "^4.7.0",
     "react-dropzone": "^14.2.3",
     "style-mod": "^4.1.0",
-    "@dxos/async": "0.6.12-main.15a606f",
-    "@dxos/context": "0.6.12-main.15a606f",
-    "@dxos/debug": "0.6.12-main.15a606f",
-    "@dxos/automerge": "0.6.12-main.15a606f",
-    "@dxos/display-name": "0.6.12-main.15a606f",
-    "@dxos/log": "0.6.12-main.15a606f",
-    "@dxos/echo-schema": "0.6.12-main.15a606f",
-    "@dxos/invariant": "0.6.12-main.15a606f",
-    "@dxos/protocols": "0.6.12-main.15a606f",
-    "@dxos/react-ui-theme": "0.6.12-main.15a606f",
-    "@dxos/react-hooks": "0.6.12-main.15a606f",
-    "@dxos/util": "0.6.12-main.15a606f",
-    "@dxos/react-ui": "0.6.12-main.15a606f"
+    "@dxos/async": "0.6.12-main.568932b",
+    "@dxos/automerge": "0.6.12-main.568932b",
+    "@dxos/debug": "0.6.12-main.568932b",
+    "@dxos/context": "0.6.12-main.568932b",
+    "@dxos/display-name": "0.6.12-main.568932b",
+    "@dxos/invariant": "0.6.12-main.568932b",
+    "@dxos/echo-schema": "0.6.12-main.568932b",
+    "@dxos/log": "0.6.12-main.568932b",
+    "@dxos/protocols": "0.6.12-main.568932b",
+    "@dxos/react-hooks": "0.6.12-main.568932b",
+    "@dxos/react-ui-theme": "0.6.12-main.568932b",
+    "@dxos/react-ui": "0.6.12-main.568932b",
+    "@dxos/util": "0.6.12-main.568932b"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -88,20 +100,20 @@
     "vite": "5.4.7",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
-    "@dxos/automerge": "0.6.12-main.15a606f",
-    "@dxos/config": "0.6.12-main.15a606f",
-    "@dxos/echo-signals": "0.6.12-main.15a606f",
-    "@dxos/keyboard": "0.6.12-main.15a606f",
-    "@dxos/random": "0.6.12-main.15a606f",
-    "@dxos/react-client": "0.6.12-main.15a606f",
-    "@dxos/storybook-utils": "0.6.12-main.15a606f",
-    "@dxos/react-ui": "0.6.12-main.15a606f"
+    "@dxos/automerge": "0.6.12-main.568932b",
+    "@dxos/config": "0.6.12-main.568932b",
+    "@dxos/echo-signals": "0.6.12-main.568932b",
+    "@dxos/keyboard": "0.6.12-main.568932b",
+    "@dxos/random": "0.6.12-main.568932b",
+    "@dxos/react-client": "0.6.12-main.568932b",
+    "@dxos/storybook-utils": "0.6.12-main.568932b",
+    "@dxos/react-ui": "0.6.12-main.568932b"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-client": "0.6.12-main.15a606f"
+    "@dxos/react-client": "0.6.12-main.568932b"
   },
   "publishConfig": {
     "access": "public"

package/src/TextEditor.stories.tsx

@@ -47,18 +47,16 @@ import {
   linkTooltip,
   listener,
   mention,
-  state,
   table,
   typewriter,
   type CommandAction,
-  type Comment,
   type CommentsOptions,
-  type EditorSelectionState,
   debugTree,
   type DebugNode,
 } from './extensions';
 import { renderRoot } from './extensions/util';
 import { useTextEditor, type UseTextEditorProps } from './hooks';
+import { type Comment, type EditorSelectionState, state } from './state';
 import translations from './translations';
 
 faker.seed(101);
@@ -165,8 +163,8 @@ const content = {
     '> This is a long wrapping block quote. Neque reiciendis ullam quae error labore sit, at, et, nulla, aut at nostrum omnis quas nostrum, at consectetur vitae eos asperiores non omnis ullam in beatae at vitae deserunt asperiores sapiente.',
     '',
     '> This is ...',
-    '> ... a multi-line ...',
-    '> block quote.',
+    '... a multi-line ...',
+    'block quote.',
     '',
   ),
 
@@ -453,6 +451,12 @@ export const ScrollTo = {
 // Markdown
 //
 
+export const Blockquote = {
+  render: () => (
+    <Story text={str('> Blockquote', 'continuation', content.footer)} extensions={decorateMarkdown()} debug='raw' />
+  ),
+};
+
 export const Headings = {
   render: () => <Story text={headings} extensions={decorateMarkdown({ numberedHeadings: { from: 2, to: 4 } })} />,
 };

package/src/extensions/annotations.ts

@@ -7,7 +7,7 @@ import { Decoration, EditorView } from '@codemirror/view';
 
 import { isNotFalsy } from '@dxos/util';
 
-import { Cursor } from './cursor';
+import { Cursor } from '../state';
 
 type Annotation = {
   cursor: string;

package/src/extensions/autocomplete.ts

@@ -2,10 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-// https://codemirror.net/examples/autocompletion
-// https://codemirror.net/docs/ref/#autocomplete.autocompletion
-// https://codemirror.net/docs/ref/#autocomplete.Completion
-
 import {
   autocompletion,
   completionKeymap,
@@ -15,6 +11,7 @@ import {
   type CompletionResult,
 } from '@codemirror/autocomplete';
 import { markdownLanguage } from '@codemirror/lang-markdown';
+import { type Extension } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
 
 export type AutocompleteResult = Completion;
@@ -25,11 +22,15 @@ export type AutocompleteOptions = {
   onSearch?: (text: string) => Completion[];
 };
 
+// https://codemirror.net/examples/autocompletion
+// https://codemirror.net/docs/ref/#autocomplete.autocompletion
+// https://codemirror.net/docs/ref/#autocomplete.Completion
+
 /**
  * Autocomplete extension.
  */
-export const autocomplete = ({ activateOnTyping, override, onSearch }: AutocompleteOptions = {}) => {
-  const extentions = [
+export const autocomplete = ({ activateOnTyping, override, onSearch }: AutocompleteOptions = {}): Extension => {
+  const extensions: Extension[] = [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
     // TODO(burdon): Set custom keymap.
@@ -50,7 +51,7 @@ export const autocomplete = ({ activateOnTyping, override, onSearch }: Autocompl
   ];
 
   if (onSearch) {
-    extentions.push(
+    extensions.push(
       // TODO(burdon): Optional decoration via addToOptions
       markdownLanguage.data.of({
         autocomplete: (context: CompletionContext): CompletionResult | null => {
@@ -68,5 +69,5 @@ export const autocomplete = ({ activateOnTyping, override, onSearch }: Autocompl
     );
   }
 
-  return extentions;
+  return extensions;
 };

package/src/extensions/automerge/automerge.stories.tsx

@@ -129,7 +129,7 @@ export const WithEcho = {
         count={2}
         component={EchoStory}
         createSpace
-        onCreateSpace={async (space) => {
+        onSpaceCreated={async ({ space }) => {
           space.db.add(
             create({
               type: 'test',

package/src/extensions/automerge/automerge.ts

@@ -13,7 +13,7 @@ import { type DocAccessor } from '@dxos/react-client/echo';
 import { cursorConverter } from './cursor';
 import { updateHeadsEffect, isReconcile, type State } from './defs';
 import { Syncer } from './sync';
-import { Cursor } from '../cursor';
+import { Cursor } from '../../state';
 
 export const automerge = (accessor: DocAccessor): Extension => {
   const syncState = StateField.define<State>({

package/src/extensions/automerge/cursor.ts

@@ -5,7 +5,7 @@
 import { log } from '@dxos/log';
 import { type DocAccessor, fromCursor, toCursor } from '@dxos/react-client/echo';
 
-import { type CursorConverter } from '../cursor';
+import { type CursorConverter } from '../../state';
 
 export const cursorConverter = (accessor: DocAccessor): CursorConverter => ({
   toCursor: (pos, assoc) => {

package/src/extensions/awareness/awareness.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Annotation, Facet, type Extension, RangeSet, type Range } from '@codemirror/state';
+import { Annotation, type Extension, RangeSet, type Range } from '@codemirror/state';
 import {
   Decoration,
   type DecorationSet,
@@ -16,7 +16,7 @@ import {
 import { Event } from '@dxos/async';
 import { Context } from '@dxos/context';
 
-import { Cursor, type CursorConverter } from '../cursor';
+import { singleValueFacet, Cursor, type CursorConverter } from '../../state';
 
 export interface AwarenessProvider {
   remoteStateChange: Event<void>;
@@ -38,9 +38,7 @@ const dummyProvider: AwarenessProvider = {
   update: () => {},
 };
 
-export const awarenessProvider = Facet.define<AwarenessProvider, AwarenessProvider>({
-  combine: (providers) => providers[0] ?? dummyProvider,
-});
+export const awarenessProvider = singleValueFacet<AwarenessProvider>(dummyProvider);
 
 // TODO(dmaretskyi): Specify the users that actually changed. Currently, we recalculate positions for every user.
 const RemoteSelectionChangedAnnotation = Annotation.define();

package/src/extensions/command/state.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Facet, StateEffect, StateField } from '@codemirror/state';
+import { StateEffect, StateField } from '@codemirror/state';
 import {
   type Command,
   type EditorView,
@@ -13,14 +13,13 @@ import {
 } from '@codemirror/view';
 
 import { type CommandOptions } from './command';
+import { singleValueFacet } from '../../state';
 
 type CommandState = {
   tooltip?: Tooltip | null;
 };
 
-export const commandConfig = Facet.define<CommandOptions, Required<CommandOptions>>({
-  combine: (providers) => providers[0],
-});
+export const commandConfig = singleValueFacet<CommandOptions>();
 
 export const commandState = StateField.define<CommandState>({
   create: () => ({}),

package/src/extensions/comments.ts

@@ -5,7 +5,6 @@
 import { invertedEffects } from '@codemirror/commands';
 import {
   type Extension,
-  Facet,
   StateEffect,
   StateField,
   type Text,
@@ -29,18 +28,15 @@ import { debounce, type UnsubscribeCallback } from '@dxos/async';
 import { log } from '@dxos/log';
 import { nonNullable } from '@dxos/util';
 
-import { Cursor } from './cursor';
-import { type Comment, type Range } from './types';
 import { overlap } from './util';
+import { Cursor, documentId, singleValueFacet } from '../state';
+import { type Comment, type Range } from '../state';
 import { callbackWrapper } from '../util';
 
 //
 // State management.
 //
 
-// TODO(wittjosiah): Factor out, not comments-specific.
-const documentId = Facet.define<string | undefined, string | undefined>({ combine: (values) => values[0] });
-
 type CommentState = {
   comment: Comment;
   range: Range;
@@ -369,7 +365,7 @@ export type CommentsOptions = {
   onHover?: (el: Element, shortcut: string) => void;
 };
 
-const optionsFacet = Facet.define<CommentsOptions, CommentsOptions>({ combine: (providers) => providers[0] });
+const optionsFacet = singleValueFacet<CommentsOptions>();
 
 /**
  * Comment threads.
@@ -389,7 +385,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
 
   return [
     optionsFacet.of(options),
-    documentId.of(options.id),
+    options.id ? documentId.of(options.id) : undefined,
     commentsState,
     commentsDecorations,
     handleCommentClick,
@@ -398,45 +394,43 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     //
     // Keymap.
     //
-    options.onCreate
-      ? keymap.of([
-          {
-            key: shortcut,
-            run: callbackWrapper(createComment),
-          },
-        ])
-      : [],
+    options.onCreate &&
+      keymap.of([
+        {
+          key: shortcut,
+          run: callbackWrapper(createComment),
+        },
+      ]),
 
     //
     // Hover tooltip (for key shortcut hints, etc.)
     // TODO(burdon): Factor out to generic hints extension for current selection/line.
     //
-    options.onHover
-      ? hoverTooltip(
-          (view, pos) => {
-            const selection = view.state.selection.main;
-            if (selection && pos >= selection.from && pos <= selection.to) {
-              return {
-                pos: selection.from,
-                end: selection.to,
-                above: true,
-                create: () => {
-                  const el = document.createElement('div');
-                  options.onHover!(el, shortcut);
-                  return { dom: el, offset: { x: 0, y: 8 } };
-                },
-              };
-            }
+    options.onHover &&
+      hoverTooltip(
+        (view, pos) => {
+          const selection = view.state.selection.main;
+          if (selection && pos >= selection.from && pos <= selection.to) {
+            return {
+              pos: selection.from,
+              end: selection.to,
+              above: true,
+              create: () => {
+                const el = document.createElement('div');
+                options.onHover!(el, shortcut);
+                return { dom: el, offset: { x: 0, y: 8 } };
+              },
+            };
+          }
 
-            return null;
-          },
-          {
-            // TODO(burdon): Hide on change triggered immediately?
-            // hideOnChange: true,
-            hoverTime: 1_000,
-          },
-        )
-      : [],
+          return null;
+        },
+        {
+          // TODO(burdon): Hide on change triggered immediately?
+          // hideOnChange: true,
+          hoverTime: 1_000,
+        },
+      ),
 
     //
     // Track deleted ranges and update ranges for decorations.
@@ -511,8 +505,8 @@ export const comments = (options: CommentsOptions = {}): Extension => {
       }
     }),
 
-    options.onUpdate ? trackPastedComments(options.onUpdate) : [],
-  ];
+    options.onUpdate && trackPastedComments(options.onUpdate),
+  ].filter(nonNullable);
 };
 
 //

package/src/extensions/debug.ts

@@ -3,10 +3,10 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import { type EditorState, type RangeSet, StateField, type Transaction } from '@codemirror/state';
+import { type EditorState, type Extension, type RangeSet, StateField, type Transaction } from '@codemirror/state';
 
 // eslint-disable-next-line no-console
-export const debugNodeLogger = (log: (...args: any[]) => void = console.log) => {
+export const debugNodeLogger = (log: (...args: any[]) => void = console.log): Extension => {
   const logTokens = (state: EditorState) => syntaxTree(state).iterate({ enter: (node) => log(node.type) });
   return StateField.define<any>({
     create: (state) => logTokens(state),

package/src/extensions/folding.tsx

@@ -17,7 +17,7 @@ export type FoldingOptions = {};
 /**
  * https://codemirror.net/examples/gutter
  */
-// TODO(burdon): Remember folding state.
+// TODO(burdon): Remember folding state (to state).
 export const folding = (_props: FoldingOptions = {}): Extension => [
   codeFolding({
     placeholderDOM: () => {
@@ -26,8 +26,10 @@ export const folding = (_props: FoldingOptions = {}): Extension => [
   }),
   foldGutter({
     markerDOM: (open) => {
+      // TODO(burdon): Use sprite directly.
+      const el = createElement('div', { className: 'flex h-full items-center' });
       return renderRoot(
-        createElement('div', { className: 'flex h-full items-center' }),
+        el,
         <Icon icon='ph--caret-right--regular' classNames={[getSize(3), 'mx-3 cursor-pointer', open && 'rotate-90']} />,
       );
     },

package/src/extensions/index.ts

@@ -9,9 +9,7 @@ export * from './awareness';
 export * from './blast';
 export * from './command';
 export * from './comments';
-export * from './cursor';
 export * from './debug';
-export * from './doc';
 export * from './dnd';
 export * from './factories';
 export * from './folding';
@@ -19,6 +17,4 @@ export * from './listener';
 export * from './markdown';
 export * from './mention';
 export * from './modes';
-export * from './state';
-export * from './types';
 export * from './typewriter';

package/src/extensions/markdown/decorate.ts

@@ -45,7 +45,7 @@ class HorizontalRuleWidget extends WidgetType {
 class LinkButton extends WidgetType {
   constructor(
     private readonly url: string,
-    private readonly render: (el: Element, url: string) => void,
+    private readonly render: (el: HTMLElement, url: string) => void,
   ) {
     super();
   }
@@ -54,6 +54,7 @@ class LinkButton extends WidgetType {
     return this.url === other.url;
   }
 
+  // TODO(burdon): Create icon and link directly without react?
   override toDOM(view: EditorView) {
     const el = document.createElement('span');
     this.render(el, this.url);
@@ -127,6 +128,7 @@ class TextWidget extends WidgetType {
 }
 
 const hide = Decoration.replace({});
+const blockQuote = Decoration.line({ class: mx('cm-blockquote') });
 const fencedCodeLine = Decoration.line({ class: mx('cm-code cm-codeblock-line') });
 const fencedCodeLineFirst = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-first') });
 const fencedCodeLineLast = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-last') });
@@ -199,7 +201,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
     return listLevels[listLevels.length - 1];
   };
 
-  // const count = 0;
+  // let count = 0;
   const enterNode = (node: SyntaxNodeRef) => {
     // console.log(`[${count++}]`, { node: node.name, from: node.from, to: node.to });
     switch (node.name) {
@@ -329,7 +331,36 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
         break;
       }
 
+      //
+      // Blockquote > QuoteMark > Paragraph
+      //
+
+      case 'Blockquote': {
+        const editing = editingRange(state, node, focus);
+        const quoteMark = node.node.getChild('QuoteMark');
+        const paragraph = node.node.getChild('Paragraph');
+        if (!editing && quoteMark && paragraph) {
+          atomicDeco.add(quoteMark.from, paragraph.from, hide);
+        }
+
+        for (const block of view.viewportLineBlocks) {
+          if (block.to < node.from) {
+            continue;
+          }
+          if (block.from > node.to) {
+            break;
+          }
+
+          deco.add(block.from, block.from, blockQuote);
+        }
+
+        break;
+      }
+
+      //
       // CommentBlock
+      //
+
       case 'CommentBlock': {
         const editing = editingRange(state, node, focus);
         for (const block of view.viewportLineBlocks) {
@@ -339,21 +370,27 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
           if (block.from > node.to) {
             break;
           }
-          const first = block.from <= node.from;
-          const last = block.to >= node.to && /^(\s>)*-->$/.test(state.doc.sliceString(block.from, block.to));
+
+          const isFirst = block.from <= node.from;
+          const isLast = block.to >= node.to && /^(\s>)*-->$/.test(state.doc.sliceString(block.from, block.to));
+
           deco.add(
             block.from,
             block.from,
-            first ? commentBlockLineFirst : last ? commentBlockLineLast : commentBlockLine,
+            isFirst ? commentBlockLineFirst : isLast ? commentBlockLineLast : commentBlockLine,
           );
-          if (!editing && (first || last)) {
+
+          if (!editing && (isFirst || isLast)) {
             atomicDeco.add(block.from, block.to, hide);
           }
         }
         break;
       }
 
+      //
       // FencedCode > CodeMark > [CodeInfo] > CodeText > CodeMark
+      //
+
       case 'FencedCode': {
         for (const block of view.viewportLineBlocks) {
           if (block.to < node.from) {
@@ -375,7 +412,10 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
         return false;
       }
 
+      //
       // Link > [LinkMark, URL]
+      //
+
       case 'Link': {
         const marks = node.node.getChildren('LinkMark');
         const urlNode = node.node.getChild('URL');
@@ -412,7 +452,10 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
         break;
       }
 
+      //
       // HR
+      //
+
       case 'HorizontalRule': {
         if (!editingRange(state, node, focus)) {
           deco.add(node.from, node.to, horizontalRule);

package/src/extensions/markdown/highlight.ts

@@ -168,11 +168,6 @@ export const markdownHighlightStyle = (_options: HighlightOptions = {}) => {
         class: theme.code,
       },
 
-      {
-        tag: [markdownTags.QuoteMark],
-        class: theme.blockquote,
-      },
-
       {
         tag: [markdownTags.TableCell],
         class: 'font-mono',

package/src/extensions/markdown/link.ts

@@ -9,8 +9,8 @@ import { type SyntaxNode } from '@lezer/common';
 
 import { tooltipContent } from '@dxos/react-ui-theme';
 
-export const linkTooltip = (render: (el: Element, url: string) => void) =>
-  hoverTooltip((view, pos, side) => {
+export const linkTooltip = (render: (el: HTMLElement, url: string) => void) => {
+  return hoverTooltip((view, pos, side) => {
     const syntax = syntaxTree(view.state).resolveInner(pos, side);
     let link = null;
     for (let i = 0, node: SyntaxNode | null = syntax; !link && node && i < 5; node = node.parent, i++) {
@@ -35,3 +35,4 @@ export const linkTooltip = (render: (el: Element, url: string) => void) =>
       },
     };
   });
+};