@dxos/react-ui-editor 0.8.2-main.f11618f → 0.8.2-main.fbd8ed0

package/src/components/EditorToolbar/util.ts

@@ -2,21 +2,23 @@
 // Copyright 2025 DXOS.org
 //
 
+import { type EditorView } from '@codemirror/view';
 import { useMemo } from 'react';
 
+import { type Action } from '@dxos/app-graph';
 import { live, type Live } from '@dxos/live-object';
-import { type Label, type ThemedClassName } from '@dxos/react-ui';
+import { type ThemedClassName } from '@dxos/react-ui';
 import {
   type MenuSeparator,
   type MenuItemGroup,
   type ToolbarMenuActionGroupProperties,
-  type MenuActionProperties,
   createMenuAction,
   createMenuItemGroup,
   type ActionGraphProps,
+  type MenuActionProperties,
 } from '@dxos/react-ui-menu';
 
-import type { EditorAction, EditorActionPayload, EditorViewMode, Formatting } from '../../extensions';
+import type { EditorAction, EditorViewMode, Formatting } from '../../extensions';
 import { translationKey } from '../../translations';
 
 export type EditorToolbarState = Formatting &
@@ -31,16 +33,18 @@ export type EditorToolbarFeatureFlags = Partial<{
   formatting: boolean;
   lists: boolean;
   blocks: boolean;
-  comment: boolean;
   search: boolean;
-  viewMode: boolean;
+  // TODO(wittjosiah): Factor out. Depend on plugin-level capabilities.
+  comment: boolean;
+  image: () => void;
+  viewMode: (mode: EditorViewMode) => void;
 }>;
 
 export type EditorToolbarActionGraphProps = {
   state: Live<EditorToolbarState>;
+  getView: () => EditorView;
   // TODO(wittjosiah): Control positioning.
   customActions?: () => ActionGraphProps;
-  onAction: (action: EditorAction) => void;
 };
 
 export type EditorToolbarProps = ThemedClassName<
@@ -49,17 +53,13 @@ export type EditorToolbarProps = ThemedClassName<
 
 export type EditorToolbarItem = EditorAction | MenuItemGroup | MenuSeparator;
 
-export const createEditorAction = (
-  payload: EditorActionPayload & Partial<MenuActionProperties>,
-  icon: string,
-  label: Label = [`${payload.type} label`, { ns: translationKey }],
-  id: string = payload.type,
-) => createMenuAction(id, { icon, label, ...payload }) as EditorAction;
+export const createEditorAction = (id: string, invoke: () => void, properties: Partial<MenuActionProperties>) => {
+  const { label = [`${id} label`, { ns: translationKey }], ...rest } = properties;
+  return createMenuAction(id, invoke, { label, ...rest }) as Action<MenuActionProperties>;
+};
 
 export const createEditorActionGroup = (
   id: string,
   props: Omit<ToolbarMenuActionGroupProperties, 'icon'>,
   icon?: string,
 ) => createMenuItemGroup(id, { icon, iconOnly: true, ...props });
-
-export const editorToolbarSearch = createEditorAction({ type: 'search' }, 'ph--magnifying-glass--regular');

package/src/components/EditorToolbar/view-mode.ts

@@ -6,6 +6,7 @@ import { type NodeArg } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 
 import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
+import { type EditorViewMode } from '../../extensions';
 import { translationKey } from '../../translations';
 
 const createViewModeGroupAction = (value: string) =>
@@ -20,24 +21,24 @@ const createViewModeGroupAction = (value: string) =>
     'ph--eye--regular',
   );
 
-const createViewModeActions = (value: string) =>
+const createViewModeActions = (value: string, onViewModeChange: (mode: EditorViewMode) => void) =>
   Object.entries({
     preview: 'ph--eye--regular',
     source: 'ph--pencil-simple--regular',
     readonly: 'ph--pencil-slash--regular',
   }).map(([viewMode, icon]) => {
-    return createEditorAction(
-      { type: 'view-mode', data: viewMode, checked: viewMode === value },
+    const checked = viewMode === value;
+    return createEditorAction(`view-mode--${viewMode}`, () => onViewModeChange(viewMode as EditorViewMode), {
+      label: [`${viewMode} mode label`, { ns: translationKey }],
+      checked,
       icon,
-      [`${viewMode} mode label`, { ns: translationKey }],
-      `view-mode--${viewMode}`,
-    );
+    });
   });
 
-export const createViewMode = (state: EditorToolbarState) => {
+export const createViewMode = (state: EditorToolbarState, onViewModeChange: (mode: EditorViewMode) => void) => {
   const value = state.viewMode ?? 'source';
   const viewModeGroupAction = createViewModeGroupAction(value);
-  const viewModeActions = createViewModeActions(value);
+  const viewModeActions = createViewModeActions(value, onViewModeChange);
   return {
     nodes: [viewModeGroupAction as NodeArg<any>, ...viewModeActions],
     edges: [

package/src/defaults.ts

@@ -52,6 +52,6 @@ export const stackItemContentEditorClassNames = (role?: string) =>
 
 export const stackItemContentToolbarClassNames = (role?: string) =>
   mx(
-    'attention-surface is-full border-be !border-separator relative z-[1]',
+    'relative z-[1] flex is-full bg-toolbarSurface border-be border-separator',
     role === 'section' && 'sticky block-start-0 -mbe-px min-is-0',
   );

package/src/extensions/automerge/automerge.stories.tsx

@@ -5,12 +5,13 @@
 import '@dxos-theme';
 
 import '@preact/signals-react';
+
+import { Repo } from '@automerge/automerge-repo';
+import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
 import React, { useEffect, useState } from 'react';
 
-import { Repo } from '@dxos/automerge/automerge-repo';
-import { BroadcastChannelNetworkAdapter } from '@dxos/automerge/automerge-repo-network-broadcastchannel';
 import { Expando } from '@dxos/echo-schema';
-import { DocAccessor, Filter, live, createDocAccessor, useQuery, useSpace, type Space } from '@dxos/react-client/echo';
+import { DocAccessor, live, createDocAccessor, useQuery, useSpace, type Space, Query } from '@dxos/react-client/echo';
 import { useIdentity, type Identity } from '@dxos/react-client/halo';
 import { ClientRepeater, type ClientRepeatedComponentProps } from '@dxos/react-client/testing';
 import { useThemeContext } from '@dxos/react-ui';
@@ -71,11 +72,12 @@ const Story = () => {
         doc.text = initialContent;
       });
 
-      const object2 = repo2.find<TestObject>(object1.url);
+      const object2 = await repo2.find<TestObject>(object1.url);
       await object2.whenReady();
 
-      setObject1({ handle: object1, path: ['text'] });
-      setObject2({ handle: object2, path: ['text'] });
+      // TODO(mykola): Fix types.
+      setObject1({ handle: object1 as any, path: ['text'] });
+      setObject2({ handle: object2 as any, path: ['text'] });
     });
   }, []);
 
@@ -103,7 +105,7 @@ const EchoStory = ({ spaceKey }: ClientRepeatedComponentProps) => {
   const identity = useIdentity();
   const space = useSpace(spaceKey);
   const [source, setSource] = useState<DocAccessor>();
-  const objects = useQuery<Expando>(space, Filter.from({ type: 'test' }));
+  const objects = useQuery(space, Query.type(Expando, { type: 'test' }));
 
   useEffect(() => {
     if (!source && objects.length) {

package/src/extensions/automerge/automerge.test.tsx

@@ -2,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+import { type DocHandle, Repo } from '@automerge/automerge-repo';
 import { EditorState } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { render, screen } from '@testing-library/react';
@@ -12,8 +13,6 @@ import get from 'lodash.get';
 import React, { type FC, useEffect, useRef, useState } from 'react';
 import { describe, test } from 'vitest';
 
-import { type DocHandle, Repo } from '@dxos/automerge/automerge-repo';
-
 import { automerge } from './automerge';
 
 type TestObject = {
@@ -36,7 +35,8 @@ const Test: FC<{ handle: DocHandle<TestObject>; generator: Generator }> = ({ han
   const [view, setView] = useState<EditorView>();
   useEffect(() => {
     const extensions = [
-      automerge({ handle, path }),
+      // TODO(mykola): Fix types.
+      automerge({ handle: handle as any, path }),
       EditorView.updateListener.of((update) => {
         if (view.state.doc.toString() === 'hello!') {
           // Update editor.
@@ -46,7 +46,7 @@ const Test: FC<{ handle: DocHandle<TestObject>; generator: Generator }> = ({ han
     ];
 
     const view = new EditorView({
-      state: EditorState.create({ doc: get(handle.docSync()!, path), extensions }),
+      state: EditorState.create({ doc: get(handle.doc()!, path), extensions }),
       parent: ref.current!,
     });
 

package/src/extensions/automerge/automerge.ts

@@ -4,10 +4,10 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
+import { next as A } from '@automerge/automerge';
 import { StateField, type Extension } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
 
-import { next as A } from '@dxos/automerge/automerge';
 import { type DocAccessor } from '@dxos/react-client/echo';
 
 import { cursorConverter } from './cursor';
@@ -19,7 +19,7 @@ export const automerge = (accessor: DocAccessor): Extension => {
   const syncState = StateField.define<State>({
     create: () => ({
       path: accessor.path.slice(),
-      lastHeads: A.getHeads(accessor.handle.docSync()!),
+      lastHeads: A.getHeads(accessor.handle.doc()!),
       unreconciledTransactions: [],
     }),
 

package/src/extensions/automerge/defs.ts

@@ -4,10 +4,9 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
+import { type Heads, type Prop } from '@automerge/automerge';
 import { Annotation, StateEffect, type StateField, type EditorState, type Transaction } from '@codemirror/state';
 
-import { type Heads, type Prop } from '@dxos/automerge/automerge';
-
 export type State = {
   path: Prop[];
   lastHeads: Heads;

package/src/extensions/automerge/sync.ts

@@ -4,10 +4,10 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
+import { next as A } from '@automerge/automerge';
 import { type StateField } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
 
-import { next as A } from '@dxos/automerge/automerge';
 import { type IDocHandle } from '@dxos/react-client/echo';
 
 import { getLastHeads, getPath, isReconcile, reconcileAnnotation, type State, updateHeads } from './defs';
@@ -57,15 +57,15 @@ export class Syncer {
   onAutomergeChange(view: EditorView) {
     // Get the diff between the updated state of the document and the heads and apply that to the codemirror doc.
     const oldHeads = getLastHeads(view.state, this._state);
-    const newHeads = A.getHeads(this._handle.docSync()!);
-    const diff = A.equals(oldHeads, newHeads) ? [] : A.diff(this._handle.docSync()!, oldHeads, newHeads);
+    const newHeads = A.getHeads(this._handle.doc()!);
+    const diff = A.equals(oldHeads, newHeads) ? [] : A.diff(this._handle.doc()!, oldHeads, newHeads);
 
     const selection = view.state.selection;
     const path = getPath(view.state, this._state);
     updateCodeMirror(view, selection, path, diff);
 
     // TODO(burdon): Test conflicts?
-    // A.getConflicts(this._handle.docSync()!, path[0]);
+    // A.getConflicts(this._handle.doc()!, path[0]);
 
     view.dispatch({
       effects: updateHeads(newHeads),

package/src/extensions/automerge/update-automerge.ts

@@ -4,9 +4,9 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
+import { next as A, type Heads } from '@automerge/automerge';
 import { type EditorState, type StateField, type Transaction, type Text } from '@codemirror/state';
 
-import { next as A, type Heads } from '@dxos/automerge/automerge';
 import { type IDocHandle } from '@dxos/react-client/echo';
 
 import { type State } from './defs';

package/src/extensions/automerge/update-codemirror.ts

@@ -4,9 +4,6 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
-import { ChangeSet, type ChangeSpec, type EditorSelection, type EditorState } from '@codemirror/state';
-import { type EditorView } from '@codemirror/view';
-
 import {
   type DelPatch,
   type InsertPatch,
@@ -14,7 +11,9 @@ import {
   type Prop,
   type PutPatch,
   type SpliceTextPatch,
-} from '@dxos/automerge/automerge';
+} from '@automerge/automerge';
+import { ChangeSet, type ChangeSpec, type EditorSelection, type EditorState } from '@codemirror/state';
+import { type EditorView } from '@codemirror/view';
 
 import { reconcileAnnotation } from './defs';
 

package/src/extensions/markdown/changes.ts

@@ -56,8 +56,9 @@ export const adjustChanges = () => {
                 // Check for URL.
                 const url = getValidUrl(update.view.state.sliceDoc(fromB, toB));
                 if (url) {
+                  // Check if pasting inside existing link.
                   const node = tree.resolveInner(fromA, -1);
-                  const invalidPositions = new Set(['Link', 'LinkMark', 'Code', 'CodeText', 'FencedCode', 'URL']);
+                  const invalidPositions = new Set(['Code', 'CodeText', 'FencedCode', 'Link', 'LinkMark', 'URL']);
                   if (!invalidPositions.has(node?.name)) {
                     const replacedText = tr.startState.sliceDoc(fromA, toA);
                     adjustments.push({ from: fromA, to: toB, insert: createLink(url, replacedText) });
@@ -84,7 +85,7 @@ export const adjustChanges = () => {
           }
         }
 
-        // TODO(burdon): Is this the right way to augment changes?
+        // TODO(burdon): Is this the right way to augment changes? Alt: EditorState.transactionFilter
         if (adjustments.length) {
           setTimeout(() => {
             update.view.dispatch(

package/src/extensions/markdown/decorate.ts

@@ -129,10 +129,10 @@ class TextWidget extends WidgetType {
 }
 
 const hide = Decoration.replace({});
-const blockQuote = Decoration.line({ class: mx('cm-blockquote') });
-const fencedCodeLine = Decoration.line({ class: mx('cm-code cm-codeblock-line') });
-const fencedCodeLineFirst = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-first') });
-const fencedCodeLineLast = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-last') });
+const blockQuote = Decoration.line({ class: 'cm-blockquote' });
+const fencedCodeLine = Decoration.line({ class: 'cm-code cm-codeblock-line' });
+const fencedCodeLineFirst = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-start') });
+const fencedCodeLineLast = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-end') });
 const commentBlockLine = fencedCodeLine;
 const commentBlockLineFirst = fencedCodeLineFirst;
 const commentBlockLineLast = fencedCodeLineLast;
@@ -277,7 +277,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
         // Set indentation.
         const list = getCurrentListLevel();
         const width = list.type === 'OrderedList' ? orderedListIndentationWidth : bulletListIndentationWidth;
-        const offset = ((list.level ?? 0) + 1) * width;
+        const offset = (options?.listPaddingLeft ?? 0) + ((list.level ?? 0) + 1) * width;
         if (node.from === line.to - 1) {
           // Abort if only the hyphen is typed.
           return false;
@@ -285,7 +285,6 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
 
         // Add line decoration for the continuation indent.
         // TODO(burdon): Bug if indentation is more than one indentation unit (e.g., 4 spaces) from the previous line.
-
         deco.add(
           line.from,
           line.from,
@@ -406,7 +405,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
           }
 
           const first = block.from <= node.from;
-          const last = block.to >= node.to && /^(\s>)*```$/.test(state.doc.sliceString(block.from, block.to));
+          const last = block.to >= node.to && /```$/.test(state.doc.sliceString(block.from, block.to));
           deco.add(block.from, block.from, first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine);
 
           const editing = editingRange(state, node, focus);
@@ -521,6 +520,8 @@ export interface DecorateOptions {
   selectionChangeDelay?: number;
   numberedHeadings?: { from: number; to?: number };
   renderLinkButton?: RenderCallback<{ url: string }>;
+  // TODO(burdon): Additional padding for each line.
+  listPaddingLeft?: number;
 }
 
 export const decorateMarkdown = (options: DecorateOptions = {}) => {

package/src/extensions/markdown/formatting.ts

@@ -5,13 +5,13 @@
 import { snippet } from '@codemirror/autocomplete';
 import { syntaxTree } from '@codemirror/language';
 import {
-  type Extension,
-  type StateCommand,
-  type EditorState,
   type ChangeSpec,
-  type Text,
   EditorSelection,
+  type Extension,
+  type EditorState,
   type Line,
+  type StateCommand,
+  type Text,
 } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 import { type SyntaxNodeRef, type SyntaxNode } from '@lezer/common';

package/src/extensions/markdown/index.ts

@@ -10,4 +10,5 @@ export * from './formatting';
 export * from './highlight';
 export * from './image';
 export * from './link';
+export * from './outliner';
 export * from './table';

package/src/extensions/markdown/outliner.ts

@@ -0,0 +1,235 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import {
+  type ChangeSpec,
+  type Extension,
+  type Line,
+  StateField,
+  type Transaction,
+  EditorState,
+  type Range,
+} from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView } from '@codemirror/view';
+
+import { log } from '@dxos/log';
+import { mx } from '@dxos/react-ui-theme';
+
+// TODO(burdon): Cut-and-paste.
+// TODO(burdon): Toggle list/task mode (in gutter?)
+// TODO(burdon): Convert to task object and insert link (menu button).
+// TOOD(burdon): Continuation lines and rich formatting?
+
+const indentLevel = 2;
+const matchTaskMarker = /^\s*- (\[ \]|\[x\])? /;
+
+/**
+ * Get the starting position of text on the given line.
+ */
+const getLineInfo = (line: Line) => {
+  const match = line.text.match(matchTaskMarker);
+  const start = line.from + (match?.[0]?.length ?? 0);
+  return {
+    match, // TODO(burdon): Indicate task or list marker.
+    start,
+  };
+};
+
+/**
+ * Outliner extension.
+ * - Store outline as a standard markdown document with task and list markers.
+ * - Support continuation lines and rich formatting (with Shift+Enter).
+ * - Constrain editor to outline structure.
+ * - Support smart cut-and-paste.
+ * - Support extracted links.
+ * - Drag/drop lines or move them via shortcuts.
+ */
+export const outliner = (): Extension => [
+  EditorState.transactionFilter.of((tr) => {
+    // Don't allow cursor before marker.
+    if (!tr.docChanged) {
+      const pos = tr.selection?.ranges[tr.selection?.mainIndex]?.from;
+      if (pos != null) {
+        const { match, start } = getLineInfo(tr.startState.doc.lineAt(pos));
+        if (match) {
+          if (pos < start) {
+            return [{ selection: { anchor: start, head: start } }];
+          }
+        }
+      }
+
+      return tr;
+    }
+
+    const changes: ChangeSpec[] = [];
+    tr.changes.iterChanges((fromA, toA, fromB, toB, insert) => {
+      // NOTE: Task markers are atomic so will be deleted when backspace is pressed.
+      // NOTE: CM inserts 2 or 6 spaces when deleting a list or task marker to create a continuation.
+      // - [ ] <- backspace here deletes the task marker.
+      // - [ ] <- backspace here inserts 6 spaces (creates continuation).
+      //   - [ ] <- backspace here deletes the task marker.
+
+      const line = tr.startState.doc.lineAt(fromA);
+      const isTaskMarker = line.text.match(matchTaskMarker);
+      if (isTaskMarker) {
+        const { start } = getLineInfo(line);
+
+        // Detect and cancel replacement of task marker with continuation indent.
+        const replace = start === toA && toA - fromA === insert.length;
+        if (replace) {
+          log.info('delete line');
+          changes.push({ from: line.from - 1, to: toA });
+          return;
+        }
+
+        // Detect deletion of marker.
+        if (fromB === toB) {
+          if (toA === line.to) {
+            const line = tr.state.doc.lineAt(fromA);
+            if (line.text.match(/^\s*$/)) {
+              if (line.from === 0) {
+                // Don't delete first line.
+                log.info('skip');
+                changes.push({ from: 0, to: 0 });
+                return;
+              } else {
+                // Delete indent and marker.
+                log.info('delete line');
+                changes.push({ from: line.from - 1, to: toA });
+                return;
+              }
+            }
+          }
+          return;
+        }
+
+        // Check appropriate indentation relative to previous line.
+        if (insert.length === indentLevel) {
+          if (line.number === 1) {
+            log.info('skip');
+            changes.push({ from: 0, to: 0 });
+            return;
+          } else {
+            const getIndent = (text: string) => (text.match(/^\s*/)?.[0]?.length ?? 0) / indentLevel;
+            const currentIndent = getIndent(line.text);
+            const indentPrevious = getIndent(tr.state.doc.lineAt(fromA - 1).text);
+            if (currentIndent > indentPrevious) {
+              log.info('skip');
+              changes.push({ from: 0, to: 0 });
+              return;
+            }
+          }
+        }
+
+        // TODO(burdon): Detect pressing ENTER on empty line that is indented.
+        // Don't allow empty line.
+        // if (start === line.to && insert.toString() === '\n') {
+        //   log.info('skip');
+        //   changes.push({ from: 0, to: 0 });
+        //   return;
+        // }
+
+        log.info('change', {
+          line: { from: line.from, to: line.to },
+          start,
+          a: [fromA, toA],
+          b: [fromB, toB],
+          insert: { text: insert.toString(), length: insert.length },
+        });
+      }
+    });
+
+    if (changes.length > 0) {
+      return [{ changes }];
+    }
+
+    return tr;
+  }),
+
+  StateField.define<DecorationSet>({
+    create: (state) => {
+      return Decoration.set(buildDecorations(0, state.doc.length, state));
+    },
+    update: (value: DecorationSet, tr: Transaction) => {
+      const from = 0;
+      const to = tr.state.doc.length;
+      return value.map(tr.changes).update({
+        filterFrom: 0,
+        filterTo: tr.state.doc.length,
+        filter: () => false,
+        add: buildDecorations(from, to, tr.state),
+      });
+    },
+    provide: (field) => EditorView.decorations.from(field),
+  }),
+
+  // TODO(burdon): Increase indent padding by configuring decorate extension.
+  // TODO(burdon): Hover to select entire group.
+  EditorView.theme({
+    '.cm-list-item-start': {
+      borderTop: '1px solid var(--dx-separator)',
+      borderLeft: '1px solid var(--dx-separator)',
+      borderRight: '1px solid var(--dx-separator)',
+      borderTopLeftRadius: '4px',
+      borderTopRightRadius: '4px',
+      paddingTop: '4px',
+      marginTop: '8px',
+    },
+    '.cm-list-item-end': {
+      borderLeft: '1px solid var(--dx-separator)',
+      borderRight: '1px solid var(--dx-separator)',
+      borderBottom: '1px solid var(--dx-separator)',
+      borderBottomLeftRadius: '4px',
+      borderBottomRightRadius: '4px',
+      paddingBottom: '4px',
+      marginBottom: '8px',
+    },
+    '.cm-list-item-continuation': {
+      borderLeft: '1px solid var(--dx-separator)',
+      borderRight: '1px solid var(--dx-separator)',
+
+      // TODO(burdon): Should match parent indentation.
+      paddingLeft: '24px',
+    },
+
+    // TODO(burdon): Set via options to decorate extension.
+    '.cm-list-item-continuation.cm-codeblock-start': {
+      borderRadius: '0',
+    },
+  }),
+];
+
+/**
+ * Add line decorations.
+ */
+const buildDecorations = (from: number, to: number, state: EditorState) => {
+  const decorations: Range<Decoration>[] = [];
+  syntaxTree(state).iterate({
+    enter: (node) => {
+      if (node.name === 'ListItem') {
+        const sub = node.node.getChild('BulletList');
+        const lineStart = state.doc.lineAt(node.from);
+        const lineEnd = sub ? state.doc.lineAt(state.doc.lineAt(sub.from).from - 1) : state.doc.lineAt(node.to);
+
+        decorations.push(
+          Decoration.line({
+            class: mx('cm-list-item-start', lineStart.number === lineEnd.number && 'cm-list-item-end'),
+          }).range(lineStart.from, lineStart.from),
+        );
+
+        for (let i = lineStart.from + 1; i < lineEnd.from; i++) {
+          decorations.push(Decoration.line({ class: mx('cm-list-item-continuation') }).range(i, i));
+        }
+
+        // TODO(burdon): Need to sort.
+        if (lineStart.number !== lineEnd.number) {
+          decorations.push(Decoration.line({ class: mx('cm-list-item-end') }).range(lineEnd.from, lineEnd.from));
+        }
+      }
+    },
+  });
+
+  return decorations;
+};

package/src/extensions/markdown/styles.ts

@@ -59,11 +59,11 @@ export const formattingStyles = EditorView.theme({
     background: 'var(--dx-cmCodeblock)',
     paddingInline: '1rem !important',
   },
-  '& .cm-codeblock-first': {
+  '& .cm-codeblock-start': {
     borderTopLeftRadius: '.25rem',
     borderTopRightRadius: '.25rem',
   },
-  '& .cm-codeblock-last': {
+  '& .cm-codeblock-end': {
     borderBottomLeftRadius: '.25rem',
     borderBottomRightRadius: '.25rem',
   },

package/src/extensions/modes.ts

@@ -6,18 +6,17 @@ import { type Extension } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
 import { vim } from '@replit/codemirror-vim';
 import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
-
-import { S } from '@dxos/echo-schema';
+import { Schema } from 'effect';
 
 import { singleValueFacet } from '../util';
 
 export const EditorViewModes = ['preview', 'readonly', 'source'] as const;
-export const EditorViewMode = S.Union(...EditorViewModes.map((mode) => S.Literal(mode)));
-export type EditorViewMode = S.Schema.Type<typeof EditorViewMode>;
+export const EditorViewMode = Schema.Union(...EditorViewModes.map((mode) => Schema.Literal(mode)));
+export type EditorViewMode = Schema.Schema.Type<typeof EditorViewMode>;
 
 export const EditorInputModes = ['default', 'vim', 'vscode'] as const;
-export const EditorInputMode = S.Union(...EditorInputModes.map((mode) => S.Literal(mode)));
-export type EditorInputMode = S.Schema.Type<typeof EditorInputMode>;
+export const EditorInputMode = Schema.Union(...EditorInputModes.map((mode) => Schema.Literal(mode)));
+export type EditorInputMode = Schema.Schema.Type<typeof EditorInputMode>;
 
 export type EditorInputConfig = {
   type?: string;