@dxos/react-ui-editor 0.6.8-main.046e6cf → 0.6.8-staging.77f93a3

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/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]';

package/src/styles/theme.ts

@@ -2,10 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import get from 'lodash.get';
+import { type StyleSpec } from 'style-mod';
 
-import { type ThemeStyles, tokens } from './tokens';
+import { getToken } from './tokens';
 
+export type ThemeStyles = Record<string, StyleSpec>;
+
+// TODO(burdon): Factor out theme.
 // TODO(burdon): Can we use @apply and import css file?
 //  https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply?
 
@@ -52,8 +55,6 @@ export const defaultTheme: ThemeStyles = {
   // NOTE: See https://codemirror.net/docs/guide (DOM Structure).
   '.cm-scroller': {
     overflowY: 'auto',
-    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
-    lineHeight: 1.5,
   },
 
   // Content.
@@ -61,12 +62,14 @@ export const defaultTheme: ThemeStyles = {
     padding: 'unset',
     // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
     fontSize: '16px',
+    fontFamily: getToken('fontFamily.body'),
+    lineHeight: 1.5,
   },
   '&light .cm-content': {
-    color: get(tokens, 'extend.semanticColors.base.fg.light', 'black'),
+    color: getToken('extend.semanticColors.base.fg.light', 'black'),
   },
   '&dark .cm-content': {
-    color: get(tokens, 'extend.semanticColors.base.fg.dark', 'red'),
+    color: getToken('extend.semanticColors.base.fg.dark', 'white'),
   },
 
   //
@@ -79,10 +82,10 @@ export const defaultTheme: ThemeStyles = {
     borderLeft: '2px solid white',
   },
   '&light .cm-placeholder': {
-    color: get(tokens, 'extend.semanticColors.description.light', 'rgba(0,0,0,.2)'),
+    color: getToken('extend.semanticColors.description.light', 'rgba(0,0,0,.2)'),
   },
   '&dark .cm-placeholder': {
-    color: get(tokens, 'extend.semanticColors.description.dark', 'rgba(255,255,255,.2)'),
+    color: getToken('extend.semanticColors.description.dark', 'rgba(255,255,255,.2)'),
   },
 
   //
@@ -107,16 +110,16 @@ export const defaultTheme: ThemeStyles = {
   //
 
   '&light .cm-selectionBackground': {
-    background: get(tokens, 'extend.colors.primary.100'),
+    background: getToken('extend.colors.primary.100'),
   },
   '&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
-    background: get(tokens, 'extend.colors.primary.200'),
+    background: getToken('extend.colors.primary.200'),
   },
   '&dark .cm-selectionBackground': {
-    background: get(tokens, 'extend.colors.primary.700'),
+    background: getToken('extend.colors.primary.700'),
   },
   '&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
-    background: get(tokens, 'extend.colors.primary.600'),
+    background: getToken('extend.colors.primary.600'),
   },
 
   //
@@ -124,22 +127,27 @@ export const defaultTheme: ThemeStyles = {
   //
 
   '&light .cm-searchMatch': {
-    backgroundColor: get(tokens, 'extend.colors.yellow.100'),
+    backgroundColor: getToken('extend.colors.yellow.100'),
   },
   '&dark .cm-searchMatch': {
-    backgroundColor: get(tokens, 'extend.colors.yellow.700'),
+    backgroundColor: getToken('extend.colors.yellow.700'),
   },
 
   //
   // link
   //
   '.cm-link': {
-    color: get(tokens, 'extend.colors.primary.500'),
     textDecorationLine: 'underline',
     textDecorationThickness: '1px',
     textUnderlineOffset: '2px',
     borderRadius: '.125rem',
-    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+    fontFamily: getToken('fontFamily.body'),
+  },
+  '&light .cm-link > span': {
+    color: getToken('extend.colors.primary.600'),
+  },
+  '&dark .cm-link > span': {
+    color: getToken('extend.colors.primary.400'),
   },
 
   //
@@ -147,10 +155,10 @@ export const defaultTheme: ThemeStyles = {
   //
   '.cm-tooltip': {},
   '&light .cm-tooltip': {
-    background: `${get(tokens, 'extend.colors.neutral.100')} !important`,
+    background: `${getToken('extend.colors.neutral.100')} !important`,
   },
   '&dark .cm-tooltip': {
-    background: `${get(tokens, 'extend.colors.neutral.900')} !important`,
+    background: `${getToken('extend.colors.neutral.900')} !important`,
   },
   '.cm-tooltip-below': {},
 
@@ -167,14 +175,13 @@ export const defaultTheme: ThemeStyles = {
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul > li': {},
   '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]': {},
-  // TODO(burdon): Can we add a class prefix to avoid adding !important?
   '.cm-tooltip.cm-tooltip-autocomplete > ul > completion-section': {
     paddingLeft: '4px !important',
     borderBottom: 'none !important',
-    color: get(tokens, 'extend.colors.primary.500'),
+    color: getToken('extend.colors.primary.500'),
   },
   '.cm-tooltip.cm-completionInfo': {
-    border: get(tokens, 'extend.colors.neutral.500'),
+    border: getToken('extend.colors.neutral.500'),
     width: '360px !important',
     margin: '-10px 1px 0 1px',
     padding: '8px !important',
@@ -183,7 +190,7 @@ export const defaultTheme: ThemeStyles = {
     display: 'none',
   },
   '.cm-completionLabel': {
-    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+    fontFamily: getToken('fontFamily.body'),
   },
   '.cm-completionMatchedText': {
     textDecoration: 'none !important',
@@ -194,14 +201,14 @@ export const defaultTheme: ThemeStyles = {
   // table
   //
   '.cm-table *': {
-    fontFamily: `${get(tokens, 'fontFamily.mono', []).join(',')} !important`,
+    fontFamily: `${getToken('fontFamily.mono')} !important`,
     textDecoration: 'none !important',
   },
   '.cm-table-head': {
     padding: '2px 16px 2px 0px',
     textAlign: 'left',
-    borderBottom: `1px solid ${get(tokens, 'extend.colors.primary.500')}`,
-    color: get(tokens, 'extend.colors.neutral.500'),
+    borderBottom: `1px solid ${getToken('extend.colors.primary.500')}`,
+    color: getToken('extend.colors.neutral.500'),
   },
   '.cm-table-cell': {
     padding: '2px 16px 2px 0px',
@@ -220,20 +227,6 @@ export const defaultTheme: ThemeStyles = {
     borderBottom: '0.5rem solid transparent',
   },
 
-  //
-  // font size
-  // TODO(thure): This appears to be the best or only way to set selection caret heights,
-  //  but it's far more verbose than it needs to be.
-  //
-  // ...Object.keys(get(tokens, 'extend.fontSize', {})).reduce((acc: Record<string, any>, fontSize) => {
-  //   const height = get(tokens, ['extend', 'fontSize', fontSize, 1, 'lineHeight']);
-  //
-  //   acc[`& .text-${fontSize} + .cm-ySelectionCaret`] = { height };
-  //   acc[`& .text-${fontSize} + .cm-ySelection + .cm-ySelectionCaret`] = { height };
-  //   acc[`& .text-${fontSize} + .cm-widgetBuffer + .cm-ySelectionCaret`] = { height };
-  //   return acc;
-  // }, {}),
-
   // TODO(burdon): Override vars --cm-background.
   //  https://www.npmjs.com/package/codemirror-theme-vars
 
@@ -262,20 +255,20 @@ export const defaultTheme: ThemeStyles = {
    */
   '.cm-panels': {},
   '.cm-panel': {
-    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+    fontFamily: getToken('fontFamily.body'),
   },
   '.cm-panel input[type=checkbox]': {
     marginRight: '0.4rem !important',
   },
   '&light .cm-panel': {
-    background: get(tokens, 'extend.colors.neutral.50'),
+    background: getToken('extend.colors.neutral.50'),
   },
   '&dark .cm-panel': {
-    background: get(tokens, 'extend.colors.neutral.850'),
+    background: getToken('extend.colors.neutral.850'),
   },
   '.cm-button': {
     margin: '4px',
-    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+    fontFamily: getToken('fontFamily.body'),
     backgroundImage: 'none',
     border: 'none',
     '&:active': {
@@ -283,21 +276,21 @@ export const defaultTheme: ThemeStyles = {
     },
   },
   '&light .cm-button': {
-    background: get(tokens, 'extend.colors.neutral.100'),
+    background: getToken('extend.colors.neutral.100'),
     '&:hover': {
-      background: get(tokens, 'extend.colors.neutral.200'),
+      background: getToken('extend.colors.neutral.200'),
     },
     '&:active': {
-      background: get(tokens, 'extend.colors.neutral.300'),
+      background: getToken('extend.colors.neutral.300'),
     },
   },
   '&dark .cm-button': {
-    background: get(tokens, 'extend.colors.neutral.800'),
+    background: getToken('extend.colors.neutral.800'),
     '&:hover': {
-      background: get(tokens, 'extend.colors.neutral.700'),
+      background: getToken('extend.colors.neutral.700'),
     },
     '&:active': {
-      background: get(tokens, 'extend.colors.neutral.600'),
+      background: getToken('extend.colors.neutral.600'),
     },
   },
 };

package/src/styles/tokens.ts

@@ -3,14 +3,16 @@
 //
 
 import get from 'lodash.get';
-import type { StyleSpec } from 'style-mod';
 
 import { tailwindConfig, type TailwindConfig } from '@dxos/react-ui-theme';
 
-export type ThemeStyles = {
-  [selector: string]: StyleSpec;
-};
-
-export const tokens: TailwindConfig['theme'] = tailwindConfig({}).theme;
+const tokens: TailwindConfig['theme'] = tailwindConfig({}).theme;
 
-export const getToken = (path: string, defaultValue: any = undefined) => get(tokens, path, defaultValue);
+/**
+ * @deprecated
+ * Replace with CSS vars.
+ */
+export const getToken = (path: string, defaultValue?: string | string[]): string => {
+  const value = get(tokens, path, defaultValue);
+  return value?.toString() ?? '';
+};