@dxos/react-ui-editor 0.4.8-main.eb5ae94 → 0.4.8-main.fff1521

package/src/extensions/markdown/table.ts

@@ -3,7 +3,14 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import { type EditorState, type RangeSet, RangeSetBuilder, StateField, type Transaction } from '@codemirror/state';
+import {
+  type EditorState,
+  type Extension,
+  type RangeSet,
+  RangeSetBuilder,
+  StateField,
+  type Transaction,
+} from '@codemirror/state';
 import { Decoration, EditorView, WidgetType } from '@codemirror/view';
 
 // TODO(burdon): Snippet to create basic table.
@@ -18,7 +25,7 @@ export type TableOptions = {};
  * GFM tables.
  * https://github.github.com/gfm/#tables-extension
  */
-export const table = (options: TableOptions = {}) => {
+export const table = (options: TableOptions = {}): Extension => {
   return StateField.define<RangeSet<any>>({
     create: (state) => update(state, options),
     update: (_: RangeSet<any>, tr: Transaction) => update(tr.state, options),
@@ -76,7 +83,7 @@ const update = (state: EditorState, options: TableOptions) => {
 
   tables.forEach((table) => {
     const hide = state.readOnly || cursor < table.from || cursor > table.to;
-    hide &&
+    if (hide) {
       builder.add(
         table.from,
         table.to,
@@ -84,6 +91,7 @@ const update = (state: EditorState, options: TableOptions) => {
           widget: new TableWidget(table),
         }),
       );
+    }
 
     // Add class for styling.
     builder.add(table.from, table.to, Decoration.mark({ class: 'cm-table' }));

package/src/extensions/modes.ts

@@ -6,6 +6,8 @@ import { type Extension, Facet } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
 import { vim } from '@replit/codemirror-vim';
 
+export const focusEvent = 'focus.container';
+
 export type EditorMode = 'default' | 'vim' | undefined;
 
 export type EditorConfig = {
@@ -27,7 +29,7 @@ export const EditorModes: { [mode: string]: Extension } = {
         key: 'Alt-Escape',
         run: (view) => {
           // Focus container for tab navigation.
-          view.dispatch({ userEvent: 'focus.container' });
+          view.dispatch({ userEvent: focusEvent });
           return true;
         },
       },

package/src/extensions/state.ts

@@ -0,0 +1,90 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Extension, Transaction } from '@codemirror/state';
+import { EditorView, keymap } from '@codemirror/view';
+
+import { debounce } from '@dxos/async';
+import { invariant } from '@dxos/invariant';
+import { isNotFalsy } from '@dxos/util';
+
+import { documentId } from './doc';
+
+const scrollAnnotation = 'dxos.org/cm/scrolling';
+
+// NOTE: Serializable.
+export type SelectionState = {
+  scrollTo: {
+    from: number;
+  };
+  selection: {
+    anchor: number;
+    head?: number;
+  };
+};
+
+export type StateOptions = {
+  setState: (id: string, state: SelectionState) => void;
+  getState: (id: string) => SelectionState | undefined;
+};
+
+const keyPrefix = 'dxos.org/react-ui-editor/state';
+export const localStorageStateStoreAdapter: StateOptions = {
+  setState: (id, state) => {
+    invariant(id);
+    localStorage.setItem(`${keyPrefix}/${id}`, JSON.stringify(state));
+  },
+  getState: (id) => {
+    invariant(id);
+    const state = localStorage.getItem(`${keyPrefix}/${id}`);
+    return state ? JSON.parse(state) : undefined;
+  },
+};
+
+/**
+ * Track scrolling and selection state to be restored when switching to document.
+ */
+export const state = ({ getState, setState }: Partial<StateOptions> = {}): Extension => {
+  const setStateDebounced = debounce(setState!, 1_000);
+
+  return [
+    // TODO(burdon): Track scrolling (currently only updates when cursor moves).
+    EditorView.updateListener.of(({ view, changes, transactions }) => {
+      // TODO(burdon): Don't react to initial scroll.
+      const id = view.state.facet(documentId);
+      if (!id || transactions.some((tr) => tr.isUserEvent(scrollAnnotation))) {
+        return;
+      }
+
+      if (setState) {
+        const { top } = view.dom.getBoundingClientRect();
+        const pos = view.posAtCoords({ x: 0, y: top });
+        if (pos !== null) {
+          const { anchor, head } = view.state.selection.main;
+          setStateDebounced(id, {
+            scrollTo: { from: pos, yMargin: 0 },
+            selection: { anchor, head },
+          });
+        }
+      }
+    }),
+    getState &&
+      keymap.of([
+        {
+          key: 'ctrl-r', // TODO(burdon): Setting to jump back to bookmark.
+          run: (view) => {
+            const state = getState(view.state.facet(documentId));
+            if (state) {
+              view.dispatch({
+                effects: EditorView.scrollIntoView(state.scrollTo.from, { yMargin: 0 }),
+                selection: state.selection,
+                annotations: Transaction.userEvent.of(scrollAnnotation),
+              });
+            }
+            return true;
+          },
+        },
+      ]),
+  ].filter(isNotFalsy);
+};

package/src/extensions/types.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// Runtime data structure.
+export type Range = {
+  from: number;
+  to: number;
+};
+
+// Persistent data structure.
+// TODO(burdon): Rename annotation?
+export type Comment = {
+  id: string;
+  cursor?: string;
+};

package/src/hooks/index.ts

@@ -2,10 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './awareness-provider';
-export * from './defs';
-
 export * from './useActionHandler';
-export * from './useEditorView';
+export * from './useDocAccessor';
 export * from './useTextEditor';
-export * from './useTextModel';

package/src/hooks/useActionHandler.ts

@@ -75,7 +75,11 @@ export const useActionHandler = (view?: EditorView | null): ToolbarProps['onActi
         break;
 
       case 'link':
-        (action.data === false ? removeLink : addLink)(view);
+        (action.data === false ? removeLink : addLink())(view);
+        break;
+
+      case 'image':
+        addLink({ url: action.data, image: true })(view);
         break;
 
       case 'comment':

package/src/hooks/useDocAccessor.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import { createDocAccessor, type DocAccessor, getTextContent, type TextObject } from '@dxos/echo-schema';
+
+// TODO(burdon): Factor out.
+export const useDocAccessor = <T = any>(
+  text: TextObject,
+): { id: string; doc: string | undefined; accessor: DocAccessor<T> } => {
+  return useMemo(
+    () => ({
+      id: text.id,
+      doc: getTextContent(text),
+      accessor: createDocAccessor<T>(text),
+    }),
+    [text],
+  );
+};

package/src/hooks/useTextEditor.stories.tsx

@@ -4,34 +4,28 @@
 
 import '@dxosTheme';
 
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 
 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';
 
 import { useActionHandler } from './useActionHandler';
-import { createBasicExtensions, createThemeExtensions, useTextEditor } from './useTextEditor';
+import { useTextEditor } from './useTextEditor';
 import { Toolbar } from '../components';
+import { createBasicExtensions, createThemeExtensions } from '../extensions';
 import {
   type EditorMode,
   EditorModes,
   decorateMarkdown,
   createMarkdownExtensions,
-  formatting,
-  image,
+  formattingKeymap,
   table,
   useFormattingState,
+  image,
 } from '../extensions';
-import { markdownTheme } from '../themes';
 import translations from '../translations';
 
-// TODO(burdon): Demo toolbar with hooks.
-// TODO(burdon): Build components from hooks and adapters for model/extensions, etc.
-// TODO(burdon): Remove BaseTextEditor.
-// TODO(burdon): Move scrolling container layout/logic into TextEditor/MarkdownEditor components.
-// TODO(burdon): Define keymap in composer framework format.
-
 type StoryProps = {
   autoFocus?: boolean;
   placeholder?: string;
@@ -43,29 +37,24 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
   const { themeMode } = useThemeContext();
   const [formattingState, trackFormatting] = useFormattingState();
   const [editorMode, setEditorMode] = useState<EditorMode>('default');
-  const extensions = useMemo(
-    () => [
-      editorMode ? EditorModes[editorMode] : [],
-      createBasicExtensions({ readonly }),
-      createThemeExtensions({
-        themeMode,
-        theme: markdownTheme,
-        slots: {
-          editor: { className: 'p-2' },
-        },
-      }),
-      // TODO(burdon): Move lineWrapping.
-      createMarkdownExtensions({ placeholder, lineWrapping: true }),
-      // TODO(burdon): Move into markdown bundle (with React callbacks).
-      decorateMarkdown(),
-      formatting(),
-      image(),
-      table(),
-      trackFormatting,
-    ],
-    [editorMode, themeMode, placeholder, trackFormatting, readonly],
+  const { parentRef, view } = useTextEditor(
+    () => ({
+      autoFocus,
+      doc,
+      extensions: [
+        editorMode ? EditorModes[editorMode] : [],
+        createBasicExtensions({ placeholder, lineWrapping: true, readonly }),
+        createMarkdownExtensions({ themeMode }),
+        createThemeExtensions({ themeMode }),
+        decorateMarkdown(),
+        formattingKeymap(),
+        image(),
+        table(),
+        trackFormatting,
+      ],
+    }),
+    [editorMode, themeMode, placeholder, readonly],
   );
-  const { parentRef, view } = useTextEditor({ autoFocus, doc, extensions });
 
   const handleAction = useActionHandler(view);
 
@@ -78,7 +67,7 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
         <EditorModeToolbar editorMode={editorMode} setEditorMode={setEditorMode} />
       </Toolbar.Root>
       <div role='none' className='grow overflow-hidden'>
-        <div role='textbox' className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />
+        <div className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />
       </div>
     </div>
   );
@@ -116,7 +105,6 @@ const EditorModeToolbar = ({
 
 export default {
   title: 'react-ui-editor/useTextEditor',
-  // component: TextEditor,
   decorators: [withTheme],
   render: (args: StoryProps) => (
     <Tooltip.Provider>
@@ -127,6 +115,23 @@ export default {
 };
 
 export const Default = {
+  render: () => {
+    const { parentRef } = useTextEditor();
+    return <div className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />;
+  },
+};
+
+export const Basic = {
+  render: () => {
+    const { themeMode } = useThemeContext();
+    const { parentRef } = useTextEditor(() => ({
+      extensions: [createBasicExtensions({ placeholder: 'Enter text...' }), createThemeExtensions({ themeMode })],
+    }));
+    return <div className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />;
+  },
+};
+
+export const Markdown = {
   args: {
     autoFocus: true,
     placeholder: 'Text...',

package/src/hooks/useTextEditor.ts

@@ -2,57 +2,30 @@
 // Copyright 2024 DXOS.org
 //
 
-import { closeBrackets } from '@codemirror/autocomplete';
-import { history } from '@codemirror/commands';
-import { bracketMatching } from '@codemirror/language';
-import {
-  EditorSelection,
-  EditorState,
-  type EditorStateConfig,
-  type Extension,
-  type StateEffect,
-} from '@codemirror/state';
-import {
-  crosshairCursor,
-  drawSelection,
-  dropCursor,
-  EditorView,
-  highlightActiveLine,
-  lineNumbers,
-  placeholder,
-  scrollPastEnd,
-} from '@codemirror/view';
-import defaultsDeep from 'lodash.defaultsdeep';
-import { type DependencyList, type RefObject, useEffect, useRef, useState } from 'react';
+import { EditorSelection, EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { type DependencyList, type RefObject, useEffect, useMemo, useRef, useState } from 'react';
 
 import { log } from '@dxos/log';
-import { type ThemeMode } from '@dxos/react-ui';
 import { isNotFalsy } from '@dxos/util';
 
-import { type ThemeStyles } from '../styles';
-import { defaultTheme } from '../themes';
+import { type TextEditorProps } from '../components';
+import { documentId } from '../extensions';
 import { logChanges } from '../util';
 
-export type UseTextEditorOptions = {
-  autoFocus?: boolean;
-  scrollTo?: StateEffect<any>;
-  debug?: boolean;
-} & EditorStateConfig;
-
-// TODO(burdon): Return tuple?
 export type UseTextEditor = {
   parentRef: RefObject<HTMLDivElement>;
   view?: EditorView;
 };
 
+export type UseTextEditorProps = Omit<TextEditorProps, 'moveToEndOfLine' | 'dataTestId'>;
+
 /**
  * Hook for creating editor.
  */
-// TODO(wittjosiah): Does not work in strict mode.
-export const useTextEditor = (
-  { autoFocus, scrollTo, debug, doc, selection, extensions }: UseTextEditorOptions = {},
-  deps: DependencyList = [],
-): UseTextEditor => {
+export const useTextEditor = (cb: () => UseTextEditorProps = () => ({}), deps: DependencyList = []): UseTextEditor => {
+  let { id, doc, selection, extensions, autoFocus, scrollTo, debug } = useMemo<UseTextEditorProps>(cb, deps ?? []);
+
   const onUpdate = useRef<() => void>();
   const [view, setView] = useState<EditorView>();
   const parentRef = useRef<HTMLDivElement>(null);
@@ -60,11 +33,14 @@ export const useTextEditor = (
   useEffect(() => {
     let view: EditorView;
     if (parentRef.current) {
+      log('create', { id });
+
       // https://codemirror.net/docs/ref/#state.EditorStateConfig
       const state = EditorState.create({
         doc,
         selection,
         extensions: [
+          id && documentId.of(id),
           // TODO(burdon): Doesn't catch errors in keymap functions.
           EditorView.exceptionSink.of((err) => {
             log.catch(err);
@@ -95,6 +71,7 @@ export const useTextEditor = (
     }
 
     return () => {
+      log('destroy', { id });
       view?.destroy();
     };
   }, deps);
@@ -107,7 +84,6 @@ export const useTextEditor = (
       }
 
       // Set selection after first update (since content may rerender on focus).
-      // TODO(burdon): BUG on first render may appear in middle of formatted heading.
       // TODO(burdon): Make invisible until first render?
       if (selection || scrollTo) {
         onUpdate.current = () => {
@@ -124,85 +100,3 @@ export const useTextEditor = (
 
   return { parentRef, view };
 };
-
-// TODO(burdon): Factor out extension factories.
-
-/**
- * https://codemirror.net/docs/extensions
- * https://github.com/codemirror/basic-setup
- */
-// TODO(burdon): Reconcile with createMarkdownExtensions.
-export type BasicExtensionsOptions = {
-  allowMultipleSelections?: boolean;
-  bracketMatching?: boolean;
-  closeBrackets?: boolean;
-  crosshairCursor?: boolean;
-  dropCursor?: boolean;
-  drawSelection?: boolean;
-  editable?: boolean;
-  highlightActiveLine?: boolean;
-  history?: boolean;
-  lineNumbers?: boolean;
-  lineWrapping?: boolean;
-  placeholder?: string;
-  readonly?: boolean;
-  scrollPastEnd?: boolean;
-  tabSize?: number;
-};
-
-const defaults: BasicExtensionsOptions = {
-  bracketMatching: true,
-  closeBrackets: true,
-  drawSelection: true,
-  editable: true,
-  history: true,
-  lineWrapping: true,
-};
-
-export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extension => {
-  const props: BasicExtensionsOptions = defaultsDeep({}, _props, defaults);
-  return [
-    // TODO(burdon): Doesn't catch errors in keymap functions.
-    EditorView.exceptionSink.of((err) => {
-      log.catch(err);
-    }),
-
-    props.allowMultipleSelections && EditorState.allowMultipleSelections.of(true),
-    props.bracketMatching && bracketMatching(),
-    props.closeBrackets && closeBrackets(),
-    props.crosshairCursor && crosshairCursor(),
-    props.dropCursor && dropCursor(),
-    props.drawSelection && drawSelection(),
-    props.highlightActiveLine && highlightActiveLine(),
-    props.history && history(),
-    props.lineNumbers && lineNumbers(),
-    props.lineWrapping && EditorView.lineWrapping,
-    props.placeholder && placeholder(props.placeholder),
-    props.readonly && [EditorState.readOnly.of(true), EditorView.editable.of(false)],
-    props.scrollPastEnd && scrollPastEnd(),
-    props.tabSize && EditorState.tabSize.of(props.tabSize),
-  ].filter(isNotFalsy);
-};
-
-export type ThemeExtensionsOptions = {
-  theme?: ThemeStyles;
-  themeMode?: ThemeMode;
-  slots?: {
-    editor?: {
-      className?: string;
-    };
-    content?: {
-      className?: string;
-    };
-  };
-};
-
-export const createThemeExtensions = ({ theme, themeMode, slots }: ThemeExtensionsOptions = {}): Extension => {
-  return [
-    EditorView.baseTheme(defaultTheme),
-    EditorView.darkTheme.of(themeMode === 'dark'),
-    theme && EditorView.theme(theme),
-    slots?.editor?.className && EditorView.editorAttributes.of({ class: slots.editor.className }),
-    slots?.content?.className && EditorView.contentAttributes.of({ class: slots.content.className }),
-  ].filter(isNotFalsy);
-};

package/src/index.ts

@@ -9,7 +9,7 @@ export { type EditorView, keymap } from '@codemirror/view';
 export { tags } from '@lezer/highlight';
 
 export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
-export { Doc, YText, YXmlFragment } from '@dxos/text-model';
+export { Doc, YText, YXmlFragment } from '@dxos/text-model'; // TODO(burdon): Remove.
 
 export * from './components';
 export * from './extensions';

package/src/themes/default.ts

@@ -55,7 +55,7 @@ export const defaultTheme: ThemeStyles = {
     // TODO(burdon): Reconcile with docs: https://codemirror.net/docs/guide
     //  Inside of that is the scroller element. If the editor has its own scrollbar, this one should be styled with overflow: auto. But it doesn't have to—the editor also supports growing to accomodate its content, or growing up to a certain max-height and then scrolling.
     overflowY: 'auto',
-    fontFamily: get(tokens, 'fontFamily.mono', []).join(','),
+    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
     lineHeight: 1.5,
   },
 
@@ -261,30 +261,3 @@ export const defaultTheme: ThemeStyles = {
     marginRight: '0.4rem !important',
   },
 };
-
-export const textTheme: ThemeStyles = {
-  '.cm-scroller': {
-    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
-  },
-  '.cm-placeholder': {
-    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
-  },
-};
-
-export const markdownTheme: ThemeStyles = {
-  '.cm-scroller': {
-    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
-  },
-  '.cm-placeholder': {
-    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
-  },
-};
-
-export const codeTheme: ThemeStyles = {
-  '.cm-scroller': {
-    fontFamily: get(tokens, 'fontFamily.mono', []).join(','),
-  },
-  '.cm-placeholder': {
-    fontFamily: get(tokens, 'fontFamily.mono', []).join(','),
-  },
-};

package/src/translations.ts

@@ -19,6 +19,7 @@ export default [
         'blockquote label': 'Block quote',
         'codeblock label': 'Code block',
         'comment label': 'Create comment',
+        'image label': 'Insert image',
         'heading label': 'Heading level',
         'table label': 'Create table',
       },

package/dist/types/src/components/TextEditor/MarkdownEditor.stories.d.ts

@@ -1,103 +0,0 @@
-import '@dxosTheme';
-import { type EditorView } from '@codemirror/view';
-import React from 'react';
-import { type TextEditorProps } from './TextEditor';
-import { type Comment } from '../../hooks';
-type StoryProps = {
-    id?: string;
-    text?: string;
-    comments?: Comment[];
-} & Pick<TextEditorProps, 'readonly' | 'placeholder' | 'extensions'>;
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<TextEditorProps & React.RefAttributes<EditorView | null>>;
-    decorators: import("@storybook/react").Decorator[];
-    render: ({ id, text, comments, placeholder, ...props }: StoryProps) => JSX.Element | null;
-    parameters: {
-        translations: {
-            'en-US': {
-                "react-ui-editor": {
-                    'strong label': string;
-                    'emphasis label': string;
-                    'strikethrough label': string;
-                    'code label': string;
-                    'link label': string;
-                    'list-bullet label': string;
-                    'list-ordered label': string;
-                    'list-task label': string;
-                    'blockquote label': string;
-                    'codeblock label': string;
-                    'comment label': string;
-                    'heading label': string;
-                    'table label': string;
-                };
-            };
-        }[];
-        layout: string;
-    };
-};
-export default _default;
-export declare const Default: {
-    render: () => JSX.Element;
-};
-export declare const Readonly: {
-    render: () => JSX.Element;
-};
-export declare const NoExtensions: {
-    render: () => JSX.Element;
-};
-export declare const Empty: {
-    render: () => JSX.Element;
-};
-export declare const Scrolling: {
-    render: () => JSX.Element;
-};
-export declare const ScrollingWithImages: {
-    render: () => JSX.Element;
-};
-export declare const Links: {
-    render: () => JSX.Element;
-};
-export declare const Image: {
-    render: () => JSX.Element;
-};
-export declare const Code: {
-    render: () => JSX.Element;
-};
-export declare const Lists: {
-    render: () => JSX.Element;
-};
-export declare const Table: {
-    render: () => JSX.Element;
-};
-export declare const Autocomplete: {
-    render: () => JSX.Element;
-};
-export declare const Mention: {
-    render: () => JSX.Element;
-};
-export declare const Command: {
-    render: () => JSX.Element;
-};
-export declare const Comments: {
-    render: () => JSX.Element;
-};
-export declare const Vim: {
-    render: () => JSX.Element;
-};
-export declare const Annotations: {
-    render: () => JSX.Element;
-};
-export declare const DND: {
-    render: () => JSX.Element;
-};
-export declare const Listener: {
-    render: () => JSX.Element;
-};
-export declare const Typewriter: {
-    render: () => JSX.Element;
-};
-export declare const Blast: {
-    render: () => JSX.Element;
-};
-//# sourceMappingURL=MarkdownEditor.stories.d.ts.map