@dxos/react-ui-editor 0.6.8-main.3be982f → 0.6.8-staging.63bcb81

package/src/extensions/markdown/highlight.ts

@@ -7,7 +7,7 @@ import { HighlightStyle } from '@codemirror/language';
 import { tags, styleTags, Tag } from '@lezer/highlight';
 import { type MarkdownConfig, Table } from '@lezer/markdown';
 
-import { blockquote, bold, code, codeMark, getToken, heading, italic, mark, strikethrough } from '../../styles';
+import { getToken, theme } from '../../styles';
 
 /**
  * Custom tags defined and processed by the GFM lezer extension.
@@ -49,6 +49,8 @@ export const markdownTagsExtensions: MarkdownConfig[] = [
   },
 ];
 
+export type HighlightOptions = {};
+
 /**
  * Styling based on `lezer` parser tags.
  * https://codemirror.net/examples/styling
@@ -60,7 +62,7 @@ export const markdownTagsExtensions: MarkdownConfig[] = [
  * - https://github.com/codemirror/language/blob/main/src/highlight.ts#L194
  * - https://github.com/codemirror/theme-one-dark/blob/main/src/one-dark.ts#L115
  */
-export const markdownHighlightStyle = (readonly?: boolean) => {
+export const markdownHighlightStyle = (_options: HighlightOptions = {}) => {
   return HighlightStyle.define(
     [
       {
@@ -99,6 +101,7 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
           tags.inserted,
           tags.invalid,
         ],
+        // TODO(burdon): Explain.
         color: 'inherit !important',
       },
 
@@ -111,38 +114,49 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
           markdownTags.LinkReference,
           markdownTags.ListMark,
         ],
-        class: mark,
+        class: theme.mark,
       },
 
       // Markdown marks.
       {
-        tag: [markdownTags.CodeMark, markdownTags.HeaderMark, markdownTags.QuoteMark, markdownTags.EmphasisMark],
-        class: mark,
+        tag: [
+          //
+          markdownTags.CodeMark,
+          markdownTags.HeaderMark,
+          markdownTags.QuoteMark,
+          markdownTags.EmphasisMark,
+        ],
+        class: theme.mark,
       },
 
       // E.g., code block language (after ```).
       {
-        tag: [tags.function(tags.variableName), tags.labelName],
-        class: codeMark,
+        tag: [
+          //
+          tags.function(tags.variableName),
+          tags.labelName,
+        ],
+        class: theme.codeMark,
       },
 
+      // Fonts.
       {
         tag: [tags.monospace],
         class: 'font-mono',
       },
 
       // Headings.
-      { tag: tags.heading1, class: heading(1) },
-      { tag: tags.heading2, class: heading(2) },
-      { tag: tags.heading3, class: heading(3) },
-      { tag: tags.heading4, class: heading(4) },
-      { tag: tags.heading5, class: heading(5) },
-      { tag: tags.heading6, class: heading(6) },
+      { tag: tags.heading1, class: theme.heading(1) },
+      { tag: tags.heading2, class: theme.heading(2) },
+      { tag: tags.heading3, class: theme.heading(3) },
+      { tag: tags.heading4, class: theme.heading(4) },
+      { tag: tags.heading5, class: theme.heading(5) },
+      { tag: tags.heading6, class: theme.heading(6) },
 
       // Emphasis.
-      { tag: tags.emphasis, class: italic },
-      { tag: tags.strong, class: bold },
-      { tag: tags.strikethrough, class: strikethrough },
+      { tag: tags.emphasis, class: 'italic' },
+      { tag: tags.strong, class: 'font-bold' },
+      { tag: tags.strikethrough, class: 'line-through' },
 
       // NOTE: The `markdown` extension configures extensions for `lezer` to parse markdown tokens (incl. below).
       // However, since `codeLanguages` is also defined, the `lezer` will not parse fenced code blocks,
@@ -151,12 +165,12 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
       // IMPORTANT: Therefore, the fenced code block will use the base editor font unless changed by an extension.
       {
         tag: [markdownTags.CodeText, markdownTags.InlineCode],
-        class: code,
+        class: theme.code,
       },
 
       {
         tag: [markdownTags.QuoteMark],
-        class: blockquote,
+        class: theme.blockquote,
       },
 
       {
@@ -167,7 +181,7 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
     {
       scope: markdownLanguage,
       all: {
-        fontFamily: getToken('fontFamily.body', []).join(','),
+        fontFamily: getToken('fontFamily.body'),
       },
     },
   );

package/src/extensions/markdown/link-paste.ts

@@ -7,6 +7,9 @@ import { type EditorState, Transaction } from '@codemirror/state';
 import { ViewPlugin, type ViewUpdate, type PluginValue } from '@codemirror/view';
 import { type SyntaxNode } from '@lezer/common';
 
+/**
+ * Formats pasted URLs as markdown links and images.
+ */
 export const linkPastePlugin = ViewPlugin.fromClass(
   class implements PluginValue {
     update(update: ViewUpdate) {

package/src/extensions/state.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type Extension, Transaction } from '@codemirror/state';
+import { type Extension, Transaction, type TransactionSpec } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 
 import { debounce } from '@dxos/async';
@@ -11,76 +11,82 @@ import { isNotFalsy } from '@dxos/util';
 
 import { documentId } from './doc';
 
-const scrollAnnotation = 'dxos.org/cm/scrolling';
+const stateRestoreAnnotation = 'dxos.org/cm/state-restore';
 
-// NOTE: Serializable.
-export type SelectionState = {
-  scrollTo: {
-    from: number;
-  };
-  selection: {
-    anchor: number;
-    head?: number;
-  };
+export type EditorSelection = {
+  anchor: number;
+  head?: number;
+};
+
+export type EditorSelectionState = {
+  scrollTo?: number;
+  selection?: EditorSelection;
 };
 
-export type StateOptions = {
-  setState: (id: string, state: SelectionState) => void;
-  getState: (id: string) => SelectionState | undefined;
+export type EditorStateOptions = {
+  setState: (id: string, state: EditorSelectionState) => void;
+  getState: (id: string) => EditorSelectionState | 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));
-  },
+export const localStorageStateStoreAdapter: EditorStateOptions = {
   getState: (id) => {
     invariant(id);
     const state = localStorage.getItem(`${keyPrefix}/${id}`);
     return state ? JSON.parse(state) : undefined;
   },
+
+  setState: (id, state) => {
+    invariant(id);
+    localStorage.setItem(`${keyPrefix}/${id}`, JSON.stringify(state));
+  },
+};
+
+export const createEditorStateTransaction = ({ scrollTo, selection }: EditorSelectionState): TransactionSpec => {
+  return {
+    selection,
+    scrollIntoView: !scrollTo,
+    effects: scrollTo ? EditorView.scrollIntoView(scrollTo, { yMargin: 96 }) : undefined,
+    annotations: Transaction.userEvent.of(stateRestoreAnnotation),
+  };
 };
 
 /**
  * Track scrolling and selection state to be restored when switching to document.
  */
-export const state = ({ getState, setState }: Partial<StateOptions> = {}): Extension => {
+export const state = ({ getState, setState }: Partial<EditorStateOptions> = {}): 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.
+    // EditorView.domEventHandlers({
+    //   scroll: (event) => {
+    //     setStateDebounced(id, {});
+    //   },
+    // }),
+    EditorView.updateListener.of(({ view, transactions }) => {
       const id = view.state.facet(documentId);
-      if (!id || transactions.some((tr) => tr.isUserEvent(scrollAnnotation))) {
+      if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
         return;
       }
 
       if (setState) {
-        const { top } = view.dom.getBoundingClientRect();
-        const pos = view.posAtCoords({ x: 0, y: top });
+        const { scrollTop } = view.scrollDOM;
+        const pos = view.posAtCoords({ x: 0, y: scrollTop });
         if (pos !== null) {
           const { anchor, head } = view.state.selection.main;
-          setStateDebounced(id, {
-            scrollTo: { from: pos, yMargin: 0 },
-            selection: { anchor, head },
-          });
+          setStateDebounced(id, { scrollTo: pos, selection: { anchor, head } });
         }
       }
     }),
     getState &&
       keymap.of([
         {
-          key: 'ctrl-r', // TODO(burdon): Setting to jump back to bookmark.
+          key: 'ctrl-r', // TODO(burdon): Setting to jump back to selection.
           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),
-              });
+              view.dispatch(createEditorStateTransaction(state));
             }
             return true;
           },

package/src/extensions/util/react.tsx

@@ -8,8 +8,7 @@ import { createRoot } from 'react-dom/client';
 import { ThemeProvider } from '@dxos/react-ui';
 import { defaultTx } from '@dxos/react-ui-theme';
 
-export const renderRoot = (node: ReactNode) => {
-  const el = document.createElement('div');
-  createRoot(el).render(<ThemeProvider tx={defaultTx}>{node}</ThemeProvider>);
-  return el;
+export const renderRoot = (root: HTMLElement, node: ReactNode): HTMLElement => {
+  createRoot(root).render(<ThemeProvider tx={defaultTx}>{node}</ThemeProvider>);
+  return root;
 };

package/src/hooks/useTextEditor.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { EditorState, type EditorStateConfig, type StateEffect } from '@codemirror/state';
+import { EditorState, type EditorStateConfig } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import {
@@ -17,10 +17,9 @@ import {
 } from 'react';
 
 import { log } from '@dxos/log';
-import { useDefaultValue } from '@dxos/react-ui';
 import { isNotFalsy, type MaybeFunction } from '@dxos/util';
 
-import { documentId, editorInputMode } from '../extensions';
+import { createEditorStateTransaction, documentId, editorInputMode, type EditorSelection } from '../extensions';
 import { logChanges } from '../util';
 
 export type UseTextEditor = {
@@ -41,12 +40,13 @@ export type CursorInfo = {
   after?: string;
 };
 
-export type UseTextEditorProps = Pick<EditorStateConfig, 'selection' | 'extensions'> & {
+export type UseTextEditorProps = Pick<EditorStateConfig, 'extensions'> & {
   id?: string;
   initialValue?: string;
   className?: string;
   autoFocus?: boolean;
-  scrollTo?: StateEffect<unknown>;
+  scrollTo?: number;
+  selection?: EditorSelection;
   moveToEndOfLine?: boolean;
   debug?: boolean;
 };
@@ -60,22 +60,14 @@ export const useTextEditor = (
   props: MaybeFunction<UseTextEditorProps> = {},
   deps: DependencyList = [],
 ): UseTextEditor => {
-  const {
-    id,
-    initialValue,
-    selection,
-    extensions,
-    autoFocus,
-    scrollTo: _scrollTo,
-    moveToEndOfLine,
-    debug,
-  } = useMemo<UseTextEditorProps>(() => {
-    return typeof props === 'function' ? props() : props;
-  }, deps ?? []);
+  const { id, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } =
+    useMemo<UseTextEditorProps>(() => {
+      return typeof props === 'function' ? props() : props;
+    }, deps ?? []);
 
   // NOTE: Increments by 2 in strict mode.
   const [instanceId] = useState(() => `text-editor-${++instanceCount}`);
-  const scrollTo = useDefaultValue(_scrollTo, EditorView.scrollIntoView(0, { yMargin: 0 }));
+  // Callback once view is created.
   const onUpdate = useRef<() => void>();
   const [view, setView] = useState<EditorView>();
   const parentRef = useRef<HTMLDivElement>(null);
@@ -85,8 +77,12 @@ export const useTextEditor = (
     if (parentRef.current) {
       log('create', { id, instanceId, doc: initialValue?.length ?? 0 });
 
-      let initialSelection = selection;
-      if (moveToEndOfLine && selection === undefined) {
+      let initialSelection;
+      if (selection?.anchor && initialValue?.length) {
+        if (selection.anchor <= initialValue.length && (selection?.head ?? 0) <= initialValue.length) {
+          initialSelection = selection;
+        }
+      } else if (moveToEndOfLine && selection === undefined) {
         const index = initialValue?.indexOf('\n');
         const anchor = !index || index === -1 ? 0 : index;
         initialSelection = { anchor };
@@ -105,7 +101,9 @@ export const useTextEditor = (
           }),
           extensions,
           EditorView.updateListener.of(() => {
-            onUpdate.current?.();
+            setTimeout(() => {
+              onUpdate.current?.();
+            });
           }),
         ].filter(isNotFalsy),
       });
@@ -113,7 +111,6 @@ export const useTextEditor = (
       // https://codemirror.net/docs/ref/#view.EditorViewConfig
       view = new EditorView({
         parent: parentRef.current,
-        scrollTo,
         selection: initialSelection,
         state,
         // NOTE: Uncomment to debug/monitor all transactions.
@@ -143,13 +140,11 @@ export const useTextEditor = (
 
   useEffect(() => {
     if (view) {
-      // TODO(burdon): Set selection after first update (since content may rerender on focus)?
-      if (scrollTo) {
-        onUpdate.current = () => {
-          onUpdate.current = undefined;
-          view.dispatch({ effects: scrollTo && [scrollTo], scrollIntoView: !scrollTo });
-        };
-      }
+      // NOTE: Set selection after first update (since content may rerender on focus).
+      onUpdate.current = () => {
+        onUpdate.current = undefined;
+        view.dispatch(createEditorStateTransaction({ scrollTo, selection }));
+      };
 
       // Remove tabster attribute (rely on custom keymap).
       if (view.state.facet(editorInputMode).noTabster) {

package/src/index.ts

@@ -10,6 +10,8 @@ export { tags } from '@lezer/highlight';
 
 export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
 
+export { getToken } from './styles';
+
 export * from './components';
 export * from './defaults';
 export * from './extensions';

package/src/styles/markdown.ts

@@ -6,48 +6,25 @@ import { mx } from '@dxos/react-ui-theme';
 
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
-// TODO(burdon): Better way to align vertically than negative margin? Font-specific?
 // https://tailwindcss.com/docs/font-weight
 const headings: Record<HeadingLevel, string> = {
-  1: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-4xl',
-  2: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-3xl',
-  3: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-2xl',
-  4: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-xl',
-  5: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-lg',
-  6: 'mbs-4 mbe-2 font-medium text-inherit no-underline',
+  1: 'text-4xl',
+  2: 'text-3xl',
+  3: 'text-2xl',
+  4: 'text-xl',
+  5: 'text-lg',
+  6: 'text-md',
 };
 
-// TODO(burdon): Themes.
-export const heading = (level: HeadingLevel) => {
-  return mx(headings[level], 'dark:text-primary-400');
+// TODO(burdon): Define theme as facet (used in multiple extensions).
+// TODO(burdon): Organize theme styles for widgets.
+export const theme = {
+  mark: 'opacity-50',
+  code: 'font-mono !no-underline text-neutral-700 dark:text-neutral-300',
+  codeMark: 'font-mono text-primary-500',
+  // TODO(burdon): Replace with widget.
+  blockquote: 'pl-1 mr-1 border-is-4 border-orange-500 dark:border-orange-500 dark:text-neutral-500',
+  heading: (level: HeadingLevel) => {
+    return mx(headings[level], 'dark:text-primary-400');
+  },
 };
-
-export const text = 'text-neutral-800 dark:text-neutral-200';
-export const light = 'text-neutral-200 dark:text-neutral-800';
-
-export const mark = mx('!font-normal !no-underline !text-inherit opacity-40', light);
-
-export const paragraph = 'mlb-1';
-
-export const bold = 'font-bold';
-export const italic = 'italic';
-export const strikethrough = 'line-through';
-
-export const code = 'font-mono !no-underline text-neutral-700 dark:text-neutral-300';
-export const codeMark = 'font-mono text-primary-500';
-export const codeBlock = 'mlb-2 font-mono bg-neutral-500/10 p-3 rounded';
-
-export const inlineUrl = mx(code, 'px-1');
-
-export const blockquote = mx('pl-1 mr-1 border-is-4 border-orange-500 dark:border-orange-500 text-transparent');
-
-export const horizontalRule =
-  'flex mlb-4 border-b text-neutral-100 dark:text-neutral-900 border-neutral-200 dark:border-neutral-800';
-
-// TODO(thure): Tailwind was not seeing `[&>li:before]:content-["•"]` as a utility class, but it would work if instead of `"•"` it was `"X"`… why?
-export const unorderedList =
-  'mlb-2 grid grid-cols-[min-content_1fr] [&>li:before]:content-[attr(marker)] [&>li:before]:mlb-1 [&>li:before]:mie-2';
-export const orderedList =
-  'mlb-2 grid grid-cols-[min-content_1fr] [&>li:before]:content-[counters(section,_".")_"._"] [counter-reset:section] [&>li:before]:mlb-1';
-
-export const listItem = 'contents before:[counter-increment:section]';