@dxos/react-ui-editor 0.4.5 → 0.4.6-main.20d1ec4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.4.5",
+  "version": "0.4.6-main.20d1ec4",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -15,6 +15,7 @@
   "dependencies": {
     "@codemirror/autocomplete": "^6.12.0",
     "@codemirror/commands": "^6.3.3",
+    "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-markdown": "^6.2.4",
     "@codemirror/language": "^6.10.1",
     "@codemirror/language-data": "^6.3.1",
@@ -29,27 +30,27 @@
     "@lezer/markdown": "^1.2.0",
     "@radix-ui/react-context": "^1.0.0",
     "@replit/codemirror-vim": "^6.0.14",
-    "codemirror": "6.0.1",
+    "codemirror": "^6.0.1",
     "lib0": "^0.2.65",
     "lodash.defaultsdeep": "^4.6.1",
     "lodash.get": "^4.4.2",
     "lodash.pick": "^4.4.0",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/async": "0.4.5",
-    "@dxos/debug": "0.4.5",
-    "@dxos/automerge": "0.4.5",
-    "@dxos/context": "0.4.5",
-    "@dxos/echo-schema": "0.4.5",
-    "@dxos/display-name": "0.4.5",
-    "@dxos/protocols": "0.4.5",
-    "@dxos/invariant": "0.4.5",
-    "@dxos/log": "0.4.5",
-    "@dxos/react-ui": "0.4.5",
-    "@dxos/react-async": "0.4.5",
-    "@dxos/react-ui-theme": "0.4.5",
-    "@dxos/text-model": "0.4.5",
-    "@dxos/util": "0.4.5"
+    "@dxos/async": "0.4.6-main.20d1ec4",
+    "@dxos/automerge": "0.4.6-main.20d1ec4",
+    "@dxos/context": "0.4.6-main.20d1ec4",
+    "@dxos/debug": "0.4.6-main.20d1ec4",
+    "@dxos/display-name": "0.4.6-main.20d1ec4",
+    "@dxos/invariant": "0.4.6-main.20d1ec4",
+    "@dxos/echo-schema": "0.4.6-main.20d1ec4",
+    "@dxos/log": "0.4.6-main.20d1ec4",
+    "@dxos/protocols": "0.4.6-main.20d1ec4",
+    "@dxos/react-async": "0.4.6-main.20d1ec4",
+    "@dxos/react-ui-theme": "0.4.6-main.20d1ec4",
+    "@dxos/react-ui": "0.4.6-main.20d1ec4",
+    "@dxos/util": "0.4.6-main.20d1ec4",
+    "@dxos/text-model": "0.4.6-main.20d1ec4"
   },
   "devDependencies": {
     "@automerge/automerge-repo-network-broadcastchannel": "^1.1.1",
@@ -77,14 +78,14 @@
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
     "vitest": "^1.2.2",
-    "@dxos/config": "0.4.5",
-    "@dxos/echo-signals": "0.4.5",
-    "@dxos/echo-typegen": "0.4.5",
-    "@dxos/keyboard": "0.4.5",
-    "@dxos/react-client": "0.4.5",
-    "@dxos/random": "0.4.5",
-    "@dxos/storybook-utils": "0.4.5",
-    "@dxos/react-ui": "0.4.5"
+    "@dxos/echo-typegen": "0.4.6-main.20d1ec4",
+    "@dxos/config": "0.4.6-main.20d1ec4",
+    "@dxos/echo-signals": "0.4.6-main.20d1ec4",
+    "@dxos/keyboard": "0.4.6-main.20d1ec4",
+    "@dxos/random": "0.4.6-main.20d1ec4",
+    "@dxos/react-ui": "0.4.6-main.20d1ec4",
+    "@dxos/storybook-utils": "0.4.6-main.20d1ec4",
+    "@dxos/react-client": "0.4.6-main.20d1ec4"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
@@ -92,7 +93,7 @@
     "@vitest/ui": "^1.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.4.5"
+    "@dxos/react-client": "0.4.6-main.20d1ec4"
   },
   "publishConfig": {
     "access": "public"

package/src/components/TextEditor/MarkdownEditor.stories.tsx

@@ -288,7 +288,7 @@ export const Empty = {
 };
 
 export const Scrolling = {
-  render: () => <Story text={str('# Large Document', '', large)} extensions={[]} />,
+  render: () => <Story text={str('# Large Document', '', large)} />,
 };
 
 export const ScrollingWithImages = {

package/src/components/TextEditor/TextEditor.tsx

@@ -3,13 +3,13 @@
 //
 
 import { EditorState, type Extension, type StateEffect } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
+import { EditorView, scrollPastEnd } from '@codemirror/view';
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import defaultsDeep from 'lodash.defaultsdeep';
 import React, {
   type ComponentProps,
-  forwardRef,
   type KeyboardEventHandler,
+  forwardRef,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -52,6 +52,8 @@ export type TextEditorProps = {
   model: EditorModel; // TODO(burdon): Optional (e.g., just provide content if readonly).
   readonly?: boolean; // TODO(burdon): Move into model.
   autoFocus?: boolean;
+  scrollPastEnd?: boolean;
+  moveToEndOfLine?: boolean;
   lineWrapping?: boolean;
   scrollTo?: StateEffect<any>; // TODO(burdon): Restore scroll position: scrollTo EditorView.scrollSnapshot().
   selection?: { anchor: number; head?: number };
@@ -68,7 +70,19 @@ export type TextEditorProps = {
 // TODO(burdon): Replace with useTextEditor.
 export const BaseTextEditor = forwardRef<EditorView | null, TextEditorProps>(
   (
-    { model, readonly, autoFocus, scrollTo, selection, theme, slots = defaultSlots, extensions = [], debug },
+    {
+      model,
+      readonly,
+      autoFocus,
+      scrollTo = EditorView.scrollIntoView(0),
+      moveToEndOfLine,
+      selection,
+      theme,
+      slots = defaultSlots,
+      extensions = [],
+      scrollPastEnd: _scrollPastEnd,
+      debug,
+    },
     forwardedRef,
   ) => {
     const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
@@ -83,12 +97,7 @@ export const BaseTextEditor = forwardRef<EditorView | null, TextEditorProps>(
 
     // Set focus.
     useEffect(() => {
-      if (autoFocus && !view?.hasFocus) {
-        if (view?.state.selection.main?.from === 0) {
-          // Start at end of line.
-          const { to } = view.state.doc.lineAt(0);
-          view?.dispatch({ selection: { anchor: to } });
-        }
+      if (autoFocus) {
         view?.focus();
       }
     }, [view, autoFocus]);
@@ -114,12 +123,15 @@ export const BaseTextEditor = forwardRef<EditorView | null, TextEditorProps>(
           }),
 
           // Theme.
-          // TODO(burdon): Make configurable.
+          // TODO(burdon): Make base theme configurable.
           EditorView.baseTheme(defaultTheme),
-          EditorView.theme(theme ?? {}),
+          theme && EditorView.theme(theme),
           EditorView.darkTheme.of(themeMode === 'dark'),
-          EditorView.editorAttributes.of({ class: slots.editor?.className ?? '' }),
-          EditorView.contentAttributes.of({ class: slots.content?.className ?? '' }),
+          slots.editor?.className && EditorView.editorAttributes.of({ class: slots.editor.className }),
+          slots.content?.className && EditorView.contentAttributes.of({ class: slots.content.className }),
+
+          // NOTE: Assumes default line height.
+          _scrollPastEnd && scrollPastEnd(),
 
           // Focus.
           EditorView.updateListener.of((update) => {
@@ -147,7 +159,7 @@ export const BaseTextEditor = forwardRef<EditorView | null, TextEditorProps>(
       // EditorView
       // https://codemirror.net/docs/ref/#view.EditorViewConfig
       //
-      const newView = new EditorView({
+      const view = new EditorView({
         state,
         parent: rootRef.current,
         scrollTo,
@@ -161,8 +173,12 @@ export const BaseTextEditor = forwardRef<EditorView | null, TextEditorProps>(
         },
       });
 
-      view?.destroy();
-      setView(newView);
+      setView(view);
+
+      if (moveToEndOfLine) {
+        const { to } = view.state.doc.lineAt(0);
+        view?.dispatch({ selection: { anchor: to } });
+      }
 
       // Remove tabster attribute (rely on custom keymap).
       if (state.facet(editorMode).noTabster) {
@@ -170,7 +186,7 @@ export const BaseTextEditor = forwardRef<EditorView | null, TextEditorProps>(
       }
 
       return () => {
-        newView?.destroy();
+        view?.destroy();
         setView(null);
       };
       // TODO(wittjosiah): Does `rootRef` ever change? Only `.current` changes?
@@ -215,6 +231,7 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
       () => [createBasicBundle({ themeMode, placeholder, lineWrapping }), ...(_extensions ?? [])],
       [themeMode, placeholder, lineWrapping, _extensions],
     );
+
     return (
       <BaseTextEditor
         ref={forwardedRef}
@@ -236,6 +253,7 @@ export const MarkdownEditor = forwardRef<EditorView | null, TextEditorProps>(
       () => [createMarkdownExtensions({ themeMode, placeholder }), ...(_extensions ?? [])],
       [themeMode, placeholder, _extensions],
     );
+
     return (
       <BaseTextEditor
         ref={forwardedRef}
@@ -254,7 +272,7 @@ export const defaultSlots: TextEditorSlots = {
     className: focusRing,
   },
   editor: {
-    className: 'min-bs-full',
+    className: 'bs-full',
   },
 };
 

package/src/components/TextEditor/automerge.stories.tsx

@@ -7,11 +7,9 @@ import '@dxosTheme';
 import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
 import '@preact/signals-react';
 import { EditorView } from '@codemirror/view'; // Register react integration.
-import get from 'lodash.get';
 import React, { useEffect, useMemo, useState } from 'react';
 
-import { type Prop } from '@dxos/automerge/automerge';
-import { Repo, type DocHandle } from '@dxos/automerge/automerge-repo';
+import { Repo } from '@dxos/automerge/automerge-repo';
 import { Filter } from '@dxos/echo-schema';
 import { type PublicKey } from '@dxos/keys';
 import { Expando, TextObject, useSpace } from '@dxos/react-client/echo';
@@ -20,7 +18,8 @@ import { ClientRepeater } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { MarkdownEditor } from './TextEditor';
-import { type IDocHandle, automerge, awareness, createBasicBundle } from '../../extensions';
+import { automerge, awareness, createBasicBundle } from '../../extensions';
+import { DocAccessor } from '../../extensions/automerge/defs';
 import { useTextEditor, useTextModel } from '../../hooks';
 import { defaultTheme } from '../../themes';
 import translations from '../../translations';
@@ -32,24 +31,24 @@ type TestObject = {
 };
 
 type EditorProps = {
-  handle: IDocHandle;
-  path?: Prop[];
+  source: DocAccessor;
 };
 
-const Editor = ({ handle, path = ['text'] }: EditorProps) => {
+const Editor = ({ source }: EditorProps) => {
   const extensions = useMemo(
     () => [
       EditorView.baseTheme(defaultTheme),
       EditorView.editorAttributes.of({ class: 'p-2 bg-white' }),
       createBasicBundle({ placeholder: 'Type here...' }),
-      automerge({ handle, path }),
+      automerge(source),
       awareness(),
     ],
-    [handle, path],
+    [source],
   );
+
   const { parentRef } = useTextEditor({
     autoFocus: true,
-    doc: get(handle.docSync()!, path),
+    doc: DocAccessor.getValue(source),
     extensions,
   });
 
@@ -57,8 +56,8 @@ const Editor = ({ handle, path = ['text'] }: EditorProps) => {
 };
 
 const Story = () => {
-  const [object1, setObject1] = useState<DocHandle<TestObject>>();
-  const [object2, setObject2] = useState<DocHandle<TestObject>>();
+  const [object1, setObject1] = useState<DocAccessor<TestObject>>();
+  const [object2, setObject2] = useState<DocAccessor<TestObject>>();
 
   useEffect(() => {
     queueMicrotask(async () => {
@@ -77,8 +76,8 @@ const Story = () => {
       const object2 = repo2.find(object1.url);
       await object2.whenReady();
 
-      setObject1(object1);
-      setObject2(object2);
+      setObject1({ handle: object1, path: ['text'] });
+      setObject2({ handle: object2, path: ['text'] });
     });
   }, []);
 
@@ -88,8 +87,8 @@ const Story = () => {
 
   return (
     <div role='none' className='grid grid-cols-2 bs-full is-full gap-2'>
-      <Editor handle={object1} path={['text']} />
-      <Editor handle={object2} path={['text']} />
+      <Editor source={object1} />
+      <Editor source={object2} />
     </div>
   );
 };

package/src/components/TextEditor/hooks.stories.tsx

@@ -6,7 +6,7 @@ import '@dxosTheme';
 
 import React, { useMemo, useState } from 'react';
 
-import { Toolbar as NaturalToolbar, Select, useThemeContext } from '@dxos/react-ui';
+import { Toolbar as NaturalToolbar, Select, useThemeContext, Tooltip } from '@dxos/react-ui';
 import { attentionSurface, mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
@@ -22,7 +22,6 @@ import {
   useFormattingState,
 } from '../../extensions';
 import { createDataExtensions, createThemeExtensions, useActionHandler, useTextEditor } from '../../hooks';
-import { editorFillLayoutEditor, editorWithToolbarLayout } from '../../styles';
 import { markdownTheme } from '../../themes';
 import translations from '../../translations';
 import { Toolbar } from '../Toolbar';
@@ -52,7 +51,7 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
         themeMode,
         theme: markdownTheme,
         slots: {
-          content: { className: '!p-4' },
+          editor: { className: 'p-2' },
         },
       }),
       // TODO(burdon): Move lineWrapping.
@@ -70,16 +69,16 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
 
   const handleAction = useActionHandler(view);
 
-  // TODO(marijn) This doesn't update the state on view changes.
+  // TODO(marijn): This doesn't update the state on view changes.
   //  Also not sure if view is even guaranteed to exist at this point.
   return (
-    <div role='none' className={mx('fixed inset-0', editorWithToolbarLayout)}>
+    <div role='none' className={mx('fixed inset-0 flex flex-col')}>
       <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
         <Toolbar.Markdown />
         <EditorModeToolbar editorMode={editorMode} setEditorMode={setEditorMode} />
       </Toolbar.Root>
-      <div role='none' className='overflow-y-auto'>
-        <div role='textbox' className={mx(textBlockWidth, attentionSurface, editorFillLayoutEditor)} ref={parentRef} />
+      <div role='none' className='grow overflow-hidden'>
+        <div role='textbox' className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />
       </div>
     </div>
   );
@@ -119,7 +118,11 @@ export default {
   title: 'react-ui-editor/useTextEditor',
   component: TextEditor,
   decorators: [withTheme],
-  render: (args: StoryProps) => <Story {...args} />,
+  render: (args: StoryProps) => (
+    <Tooltip.Provider>
+      <Story {...args} />
+    </Tooltip.Provider>
+  ),
   parameters: { translations, layout: 'fullscreen' },
 };
 

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -9,6 +9,7 @@ import React, { type FC, useMemo, useState } from 'react';
 import { TextObject } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
 import { faker } from '@dxos/random';
+import { Tooltip } from '@dxos/react-ui';
 import { mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
@@ -23,7 +24,6 @@ import {
   useFormattingState,
 } from '../../extensions';
 import { type Comment, useActionHandler, useEditorView, useTextModel } from '../../hooks';
-import { editorFillLayoutEditor, editorFillLayoutRoot, editorWithToolbarLayout } from '../../styles';
 import translations from '../../translations';
 import { MarkdownEditor } from '../TextEditor';
 
@@ -61,7 +61,7 @@ const Story: FC<{ id?: string; content: string }> = ({ id = 'test', content }) =
   }
 
   return (
-    <div role='none' className={mx('fixed inset-0', editorWithToolbarLayout)}>
+    <div role='none' className={mx('fixed inset-0 flex flex-col')}>
       <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
         <Toolbar.Markdown />
         <Toolbar.Separator />
@@ -72,9 +72,8 @@ const Story: FC<{ id?: string; content: string }> = ({ id = 'test', content }) =
         model={model}
         extensions={extensions}
         slots={{
-          root: { className: mx(textBlockWidth, editorFillLayoutRoot) },
-          editor: { className: editorFillLayoutEditor },
-          content: { className: '!pli-2' },
+          root: { className: mx(textBlockWidth) },
+          editor: { className: 'p-2' },
         }}
       />
     </div>
@@ -84,7 +83,11 @@ const Story: FC<{ id?: string; content: string }> = ({ id = 'test', content }) =
 export default {
   title: 'react-ui-editor/Toolbar',
   component: Toolbar,
-  render: (args: any) => <Story {...args} />,
+  render: (args: any) => (
+    <Tooltip.Provider>
+      <Story {...args} />
+    </Tooltip.Provider>
+  ),
   decorators: [withTheme],
   parameters: { translations, layout: 'fullscreen' },
 };

package/src/components/Toolbar/Toolbar.tsx

@@ -25,7 +25,7 @@ import {
   Quotes,
 } from '@phosphor-icons/react';
 import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren } from 'react';
+import React, { type PropsWithChildren, useRef, useState } from 'react';
 
 import {
   DensityProvider,
@@ -141,11 +141,31 @@ const MarkdownHeading = () => {
   const header = blockType && /heading(\d)/.exec(blockType);
   const value = header ? header[1] : blockType === 'paragraph' || !blockType ? '0' : undefined;
   const HeadingIcon = HeadingIcons[value ?? '0'];
+  const suppressNextTooltip = useRef<boolean>(false);
+  const [tooltipOpen, setTooltipOpen] = useState<boolean>(false);
+  const [selectOpen, setSelectOpen] = useState<boolean>(false);
   return (
-    <Tooltip.Root>
+    <Tooltip.Root
+      open={tooltipOpen}
+      onOpenChange={(nextOpen) => {
+        if (nextOpen && suppressNextTooltip.current) {
+          suppressNextTooltip.current = false;
+          return setTooltipOpen(false);
+        } else {
+          return setTooltipOpen(nextOpen);
+        }
+      }}
+    >
       <Select.Root
         disabled={value === null}
         value={value ?? '0'}
+        open={selectOpen}
+        onOpenChange={(nextOpen: boolean) => {
+          if (!nextOpen) {
+            suppressNextTooltip.current = true;
+          }
+          return setSelectOpen(nextOpen);
+        }}
         onValueChange={(value) => onAction?.({ type: 'heading', data: parseInt(value) })}
       >
         <Tooltip.Trigger asChild>

package/src/extensions/automerge/automerge.ts

@@ -7,29 +7,24 @@
 import { StateField, type Extension } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
 
-import { next as A, type Prop } from '@dxos/automerge/automerge';
+import { next as A } from '@dxos/automerge/automerge';
 
 import { cursorConverter } from './cursor';
-import { updateHeadsEffect, type IDocHandle, isReconcile, type State } from './defs';
+import { updateHeadsEffect, isReconcile, type State, type DocAccessor } from './defs';
 import { Syncer } from './sync';
 import { Cursor } from '../cursor';
 
-export type AutomergeOptions = {
-  handle: IDocHandle;
-  path: Prop[];
-};
-
-export const automerge = ({ handle, path }: AutomergeOptions): Extension => {
+export const automerge = (accessor: DocAccessor): Extension => {
   const syncState = StateField.define<State>({
     create: () => ({
-      path: path.slice(),
-      lastHeads: A.getHeads(handle.docSync()!),
+      path: accessor.path.slice(),
+      lastHeads: A.getHeads(accessor.handle.docSync()!),
       unreconciledTransactions: [],
     }),
 
     update: (value, tr) => {
       const result: State = {
-        path: path.slice(),
+        path: accessor.path.slice(),
         lastHeads: value.lastHeads,
         unreconciledTransactions: value.unreconciledTransactions.slice(),
       };
@@ -54,21 +49,21 @@ export const automerge = ({ handle, path }: AutomergeOptions): Extension => {
     },
   });
 
-  const syncer = new Syncer(handle, syncState);
+  const syncer = new Syncer(accessor.handle, syncState);
 
   return [
-    Cursor.converter.of(cursorConverter(handle, path)),
+    Cursor.converter.of(cursorConverter(accessor)),
     syncState,
 
     // Reconcile external updates.
     ViewPlugin.fromClass(
       class {
         constructor(private readonly _view: EditorView) {
-          handle.addListener('change', this._handleChange.bind(this));
+          accessor.handle.addListener('change', this._handleChange.bind(this));
         }
 
         destroy() {
-          handle.removeListener('change', this._handleChange.bind(this));
+          accessor.handle.removeListener('change', this._handleChange.bind(this));
         }
 
         _handleChange() {

package/src/extensions/automerge/cursor.ts

@@ -4,14 +4,13 @@
 
 import get from 'lodash.get';
 
-import type { Prop } from '@dxos/automerge/automerge';
 import { next as A } from '@dxos/automerge/automerge';
 import { log } from '@dxos/log';
 
-import { type IDocHandle } from './defs';
+import { type DocAccessor } from './defs';
 import { type CursorConverter } from '../cursor';
 
-export const cursorConverter = (handle: IDocHandle, path: Prop[]): CursorConverter => ({
+export const cursorConverter = ({ handle, path }: DocAccessor): CursorConverter => ({
   // TODO(burdon): Handle assoc to associate with a previous character.
   toCursor: (pos) => {
     const doc = handle.docSync();

package/src/extensions/automerge/defs.ts

@@ -5,6 +5,7 @@
 //
 
 import { Annotation, StateEffect, type StateField, type EditorState, type Transaction } from '@codemirror/state';
+import get from 'lodash.get';
 
 import { type ChangeFn, type ChangeOptions, type Doc, type Heads, type Prop } from '@dxos/automerge/automerge';
 
@@ -31,10 +32,22 @@ export const isReconcile = (tr: Transaction): boolean => {
   return !!tr.annotation(reconcileAnnotation);
 };
 
-export type IDocHandle<T = any> = {
+// TODO(burdon): Reconcile with echo.
+export interface DocAccessor<T = any> {
+  handle: IDocHandle<T>;
+  get path(): string[]; // TODO(burdon): Getter or prop?
+}
+
+// TODO(burdon): Reconcile with echo.
+export const DocAccessor = {
+  getValue: (accessor: DocAccessor) => get(accessor.handle, accessor.path),
+};
+
+// TODO(burdon): Reconcile with echo.
+export interface IDocHandle<T = any> {
   docSync(): Doc<T> | undefined;
   change(callback: ChangeFn<T>, options?: ChangeOptions<T>): void;
   changeAt(heads: Heads, callback: ChangeFn<T>, options?: ChangeOptions<T>): string[] | undefined;
   addListener(event: 'change', listener: () => void): void;
   removeListener(event: 'change', listener: () => void): void;
-};
+}