@dxos/react-ui-editor 0.4.8-main.97e86fe → 0.4.8-main.a4c603b

package/src/extensions/cursor-line-margin.ts

@@ -5,26 +5,26 @@
 // Based upon @acheronfail’s implementation, fetched 16 Feb 2024
 // https://discuss.codemirror.net/t/cursorscrollmargin-for-v6/7448/5
 
-import { type EditorState, type Extension, Transaction } from '@codemirror/state';
+import { type EditorState, type Extension, Facet, Transaction } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 
 import { log } from '@dxos/log';
 
+/**
+ * Number of lines above/below the cursor to keep visible in the viewport.
+ * Defaults to 3.
+ */
+export const cursorLineMarginFacet = Facet.define<number, number>({
+  combine: (input) => input[0] ?? 3,
+});
+
 const annotation = 'cursorLineMargin';
 const lineAtPos = (s: EditorState, pos: number) => s.doc.lineAt(pos).number;
 
-type Options = {
-  lines?: number;
-};
-
-// TODO(burdon): Remove. Buggy and creates scrolling problems. Find better (more general) way to deal with HALO notch.
-export const cursorLineMargin = (options: Options = { lines: 3 }): Extension => {
-  const { lines } = options;
-  if (!lines || lines <= 0) {
-    return [];
-  }
-
-  return EditorView.updateListener.of(({ transactions, state, selectionSet, startState, view }) => {
+// Seems to the best approximation of CM5's `cursorScrollMargin`
+// https://discuss.codemirror.net/t/cursorscrollmargin-for-v6/7448
+export const cursorLineMargin: Extension = EditorView.updateListener.of(
+  ({ transactions, state, selectionSet, startState, view }) => {
     // make sure we don't trigger an infinite loop and ignore our own changes
     if (transactions.length < 1 || transactions.some((tr) => tr.isUserEvent(annotation))) {
       return;
@@ -32,6 +32,7 @@ export const cursorLineMargin = (options: Options = { lines: 3 }): Extension =>
 
     const s = state;
     const { main } = s.selection;
+    const cursorLineMargin = s.facet(cursorLineMarginFacet);
 
     // editor rect
     const rect = view.dom.getBoundingClientRect();
@@ -58,7 +59,7 @@ export const cursorLineMargin = (options: Options = { lines: 3 }): Extension =>
 
     // const needsScrollTop = mainLine <= visTopLine + cursorLineMargin;
     const needsScrollTop = false;
-    const needsScrollBot = mainLine >= visBotLine - lines;
+    const needsScrollBot = mainLine >= visBotLine - cursorLineMargin;
 
     // the scroll margins are overlapping
     if (needsScrollTop && needsScrollBot) {
@@ -87,8 +88,8 @@ export const cursorLineMargin = (options: Options = { lines: 3 }): Extension =>
       annotations: Transaction.userEvent.of(annotation),
       effects: EditorView.scrollIntoView(s.selection.main.head, {
         y: needsScrollTop ? 'start' : 'end',
-        yMargin: view.defaultLineHeight * lines,
+        yMargin: view.defaultLineHeight * cursorLineMargin,
       }),
     });
-  });
-};
+  },
+);

package/src/extensions/cursor.ts

@@ -4,7 +4,7 @@
 
 import { type EditorState, Facet } from '@codemirror/state';
 
-import type { Range } from './types';
+import type { Range } from '../hooks';
 
 /**
  * Converts indexes into the text document into stable peer-independent cursors.

package/src/extensions/index.ts

@@ -11,12 +11,10 @@ export * from './command';
 export * from './comments';
 export * from './cursor';
 export * from './cursor-line-margin';
-export * from './doc';
 export * from './dnd';
-export * from './factories';
 export * from './listener';
 export * from './markdown';
 export * from './mention';
 export * from './modes';
-export * from './types';
+export * from './outliner';
 export * from './typewriter';

package/src/extensions/markdown/bundle.ts

@@ -2,34 +2,51 @@
 // Copyright 2023 DXOS.org
 //
 
-import { closeBracketsKeymap } from '@codemirror/autocomplete';
-import { historyKeymap, indentWithTab, standardKeymap } from '@codemirror/commands';
+import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
+import { history, historyKeymap, indentWithTab, standardKeymap } from '@codemirror/commands';
 import { markdownLanguage, markdown } from '@codemirror/lang-markdown';
-import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { bracketMatching, defaultHighlightStyle, indentOnInput, syntaxHighlighting } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 import { searchKeymap } from '@codemirror/search';
-import { type Extension } from '@codemirror/state';
+import { EditorState, type Extension } from '@codemirror/state';
 import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
-import { keymap } from '@codemirror/view';
+import { EditorView, drawSelection, dropCursor, keymap, placeholder } from '@codemirror/view';
 
 import { type ThemeMode } from '@dxos/react-ui';
+import { isNotFalsy } from '@dxos/util';
 
 import { markdownHighlightStyle, markdownTagsExtensions } from './highlight';
+import { type TextEditorProps } from '../../components';
 
 export type MarkdownBundleOptions = {
   themeMode?: ThemeMode;
-};
+} & Pick<TextEditorProps, 'lineWrapping' | 'placeholder'>;
 
 /**
- * Creates markdown extensions.
- * To be used in conjunction with createBasicExtensions.
- *
+ * Markdown bundle.
  * Refs:
  * https://codemirror.net/docs/community
  * https://codemirror.net/docs/ref/#codemirror.basicSetup
  */
-export const createMarkdownExtensions = ({ themeMode }: MarkdownBundleOptions = {}): Extension[] => {
+export const createMarkdownExtensions = ({
+  themeMode,
+  placeholder: _placeholder,
+  lineWrapping = true,
+}: MarkdownBundleOptions = {}): Extension[] => {
   return [
+    // TODO(burdon): Reconcile with createBasicExtensions.
+    lineWrapping && EditorView.lineWrapping,
+    EditorState.allowMultipleSelections.of(true),
+    EditorState.tabSize.of(2),
+
+    bracketMatching(),
+    closeBrackets(),
+    dropCursor(),
+    drawSelection(),
+    history(),
+    indentOnInput(),
+    _placeholder && placeholder(_placeholder),
+
     // Main extension.
     // https://github.com/codemirror/lang-markdown
     // https://codemirror.net/5/mode/markdown/index.html (demo).
@@ -69,5 +86,5 @@ export const createMarkdownExtensions = ({ themeMode }: MarkdownBundleOptions =
       // https://codemirror.net/docs/ref/#commands.standardKeymap
       ...standardKeymap,
     ]),
-  ];
+  ].filter(isNotFalsy);
 };

package/src/extensions/markdown/decorate.ts

@@ -48,7 +48,7 @@ class CheckboxWidget extends WidgetType {
 
   override toDOM(view: EditorView) {
     const input = document.createElement('input');
-    input.className = 'cm-task-checkbox ch-checkbox ch-focus-ring -mbs-0.5';
+    input.className = 'cm-task-checkbox';
     input.type = 'checkbox';
     input.checked = this._checked;
     if (view.state.readOnly) {
@@ -148,7 +148,9 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
                 marks[1].from,
                 node.to,
                 options.renderLinkButton
-                  ? Decoration.replace({ widget: new LinkButton(url, options.renderLinkButton) })
+                  ? Decoration.replace({
+                      widget: new LinkButton(url, options.renderLinkButton),
+                    })
                   : hide,
               );
             }

package/src/extensions/markdown/formatting.ts

@@ -161,7 +161,7 @@ export const setStyle =
   ({ state, dispatch }) => {
     const marker = inlineMarkerText(type);
     const changes = state.changeByRange((range) => {
-      // Special case for markers directly around the cursor, which will often not be parsed as valid styling.
+      // Special case for markers directly around the cursor, which will often not be parsed as valid styling
       if (!enable && range.empty) {
         const after = state.doc.sliceString(range.head, range.head + 6);
         const found = after.indexOf(marker);
@@ -190,16 +190,16 @@ export const setStyle =
       let startCovered: boolean | { from: number; to: number } = false;
       let endCovered: boolean | { from: number; to: number } = false;
       let { from, to } = range;
-
-      // Iterate the selected range. For each textblock, determine a start and end position,
-      // the overlap of the selected range and the block's extent, that should be styled/unstyled.
+      // Iterate the selected range. For each textblock, determine a
+      // start and end position, the overlap of the selected range and
+      // the block's extent, that should be styled/unstyled.
       syntaxTree(state).iterate({
         from,
         to,
         enter: (node) => {
           const { name } = node;
           if (Object.hasOwn(Textblocks, name) && Textblocks[name] !== 'codeblock') {
-            // Set up for this textblock.
+            // Set up for this textblock
             blockStart = blockContentStart(node);
             blockEnd = blockContentEnd(node, state.doc);
             startCovered = endCovered = false;
@@ -243,7 +243,8 @@ export const setStyle =
                     : true;
               }
             }
-            // Marks of the same type in range, or any mark if we're adding code style, need to be removed.
+            // Marks of the same type in range, or any mark if we're
+            // adding code style, need to be removed.
             if (markType === type || (type === Inline.Code && enable)) {
               if (node.from >= from && openEnd <= to) {
                 changes.push({ from: node.from, to: openEnd });
@@ -270,7 +271,7 @@ export const setStyle =
         },
         leave: (node) => {
           if (Object.hasOwn(Textblocks, node.name) && Textblocks[node.name] !== 'codeblock') {
-            // Finish opening/closing the marks for this textblock.
+            // Finish opening/closing the marks for this textblock
             const rangeStart = Math.max(from, blockStart);
             const rangeEnd = Math.min(to, blockEnd);
             if (enable) {
@@ -295,14 +296,12 @@ export const setStyle =
           }
         },
       });
-
       if (blockStart < 0 && range.empty && enable && !/\S/.test(state.doc.lineAt(range.from).text)) {
         return {
           changes: { from: range.head, insert: marker + marker },
           range: EditorSelection.cursor(range.head + marker.length),
         };
       }
-
       const changeSet = state.changes(changes.concat(changesAtEnd));
       return {
         changes: changeSet,
@@ -314,12 +313,8 @@ export const setStyle =
     });
 
     dispatch(
-      state.update(changes, {
-        userEvent: enable ? 'format.style.add' : 'format.style.remove',
-        scrollIntoView: true,
-      }),
+      state.update(changes, { userEvent: enable ? 'format.style.add' : 'format.style.remove', scrollIntoView: true }),
     );
-
     return true;
   };
 
@@ -992,7 +987,7 @@ export const toggleCodeblock: StateCommand = (target) => {
 
 export type FormattingOptions = {};
 
-export const formattingKeymap = (options: FormattingOptions = {}): Extension => {
+export const formatting = (options: FormattingOptions = {}): Extension => {
   return [
     keymap.of([
       {

package/src/extensions/markdown/image.ts

@@ -61,7 +61,6 @@ const buildDecorations = (from: number, to: number, state: EditorState) => {
         if (urlNode) {
           const hide = state.readOnly || cursor < node.from || cursor > node.to;
           const url = state.sliceDoc(urlNode.from, urlNode.to);
-          // TODO(burdon): Doesn't load if scrolling with mouse.
           preloadImage(url);
           decorations.push(
             Decoration.replace({

package/src/extensions/markdown/table.ts

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

@@ -0,0 +1,12 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+
+export type OutlinerOptions = {};
+
+// TODO(burdon): Experimental component: multiple hierarchical draggable editor sections.
+export const outliner = (options: OutlinerOptions = {}): Extension => {
+  return [];
+};

package/src/{extensions/awareness → hooks}/awareness-provider.ts

@@ -9,7 +9,7 @@ import { log } from '@dxos/log';
 import { type Space } from '@dxos/react-client/echo';
 import { type GossipMessage } from '@dxos/react-client/mesh';
 
-import { type AwarenessInfo, type AwarenessPosition, type AwarenessProvider, type AwarenessState } from './awareness';
+import { type AwarenessInfo, type AwarenessPosition, type AwarenessProvider, type AwarenessState } from '../extensions';
 
 type ProtocolMessage =
   | {

package/src/hooks/defs.ts

@@ -0,0 +1,30 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+
+import { type DocAccessor } from '@dxos/echo-schema';
+
+// Runtime data structure.
+export type Range = {
+  from: number;
+  to: number;
+};
+
+// Persistent data structure.
+export type Comment = {
+  id: string;
+  cursor?: string;
+};
+
+/**
+ * @deprecated
+ */
+// TODO(burdon): Remove.
+export type EditorModel = {
+  id: string;
+  text: () => string;
+  content: string | DocAccessor;
+  extension?: Extension;
+};

package/src/hooks/index.ts

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

package/src/hooks/useEditorView.ts

@@ -0,0 +1,32 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import { type MutableRefObject, useRef, useState } from 'react';
+
+/**
+ * Hook for accessing the editor view.
+ * @deprecated
+ *
+ * ```tsx
+ * const Test = () => {
+ *   const [editorRef, viewInvalidated] = useEditorView();
+ *   useEffect(() => {
+ *     if (editorRef.current && !viewInvalidated) {
+ *       editorView?.focus();
+ *     }
+ *   }, [editorView]);
+ *   return <TextEditor ref={editorRef} />;
+ * };
+ * ```
+ */
+export const useEditorView = (id: string): [MutableRefObject<EditorView | null>, boolean] => {
+  const editorRef = useRef<EditorView | null>(null);
+  const [prev, setPrev] = useState<[EditorView | null, string]>([null, '']);
+  if (prev[0] !== editorRef.current) {
+    setPrev([editorRef.current, id]);
+  }
+
+  return [editorRef, prev[1] !== id];
+};

package/src/hooks/useTextEditor.stories.tsx

@@ -4,28 +4,34 @@
 
 import '@dxosTheme';
 
-import React, { useState } from 'react';
+import React, { useMemo, 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 { useTextEditor } from './useTextEditor';
+import { createBasicExtensions, createThemeExtensions, useTextEditor } from './useTextEditor';
 import { Toolbar } from '../components';
-import { createBasicExtensions, createThemeExtensions } from '../extensions';
 import {
   type EditorMode,
   EditorModes,
   decorateMarkdown,
   createMarkdownExtensions,
-  formattingKeymap,
+  formatting,
+  image,
   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;
@@ -37,24 +43,29 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
   const { themeMode } = useThemeContext();
   const [formattingState, trackFormatting] = useFormattingState();
   const [editorMode, setEditorMode] = useState<EditorMode>('default');
-  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 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 });
 
   const handleAction = useActionHandler(view);
 
@@ -105,6 +116,7 @@ const EditorModeToolbar = ({
 
 export default {
   title: 'react-ui-editor/useTextEditor',
+  // component: TextEditor,
   decorators: [withTheme],
   render: (args: StoryProps) => (
     <Tooltip.Provider>
@@ -115,23 +127,6 @@ export default {
 };
 
 export const Default = {
-  render: () => {
-    const { parentRef } = useTextEditor();
-    return <div role='textbox' 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 role='textbox' className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />;
-  },
-};
-
-export const Markdown = {
   args: {
     autoFocus: true,
     placeholder: 'Text...',