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

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;

package/src/extensions/preview/preview.ts

@@ -186,7 +186,7 @@ class PreviewInlineWidget extends WidgetType {
 
   override toDOM(view: EditorView) {
     const root = document.createElement('dx-ref-tag');
-    root.setAttribute('label', this._link.label);
+    root.textContent = this._link.label;
     root.setAttribute('ref', this._link.ref);
     return root;
   }

package/src/hooks/index.ts

@@ -2,5 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './useActionHandler';
 export * from './useTextEditor';

package/src/stories/TextEditorBasic.stories.tsx

@@ -38,6 +38,7 @@ import {
   table,
   autocomplete,
   mention,
+  outliner,
 } from '../extensions';
 
 const meta: Meta<typeof DefaultStory> = {
@@ -188,20 +189,63 @@ export const Lists = {
   ),
 };
 
+//
+// Bullet List
+//
+
 export const BulletList = {
   render: () => <DefaultStory text={str(content.bullets, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
+//
+// Ordered List
+//
+
 export const OrderedList = {
   render: () => <DefaultStory text={str(content.numbered, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
+//
+// Task List
+//
+
 export const TaskList = {
   render: () => (
     <DefaultStory text={str(content.tasks, content.footer)} extensions={[decorateMarkdown()]} debug='raw+tree' />
   ),
 };
 
+//
+// Outliner
+//
+
+export const Outliner = {
+  render: () => (
+    <DefaultStory
+      // text={str(...content.tasks.split('\n').filter((line) => line.trim().startsWith('-')))}
+      text={str(
+        //
+        '- [ ] A',
+        '- [ ] B',
+        // Continuation lines.
+        '  ## Example',
+        '  Continuation line belonging to B.',
+        '  ```ts',
+        '  const x = 100',
+        '  ```',
+        '  - [ ] C',
+        '    - D Items can have links [like this](https://example.com).',
+      )}
+      extensions={[decorateMarkdown({ listPaddingLeft: 8 }), outliner()]}
+      debug='raw+tree'
+    />
+  ),
+};
+
+//
+// Table
+//
+
 export const Table = {
   render: () => <DefaultStory text={str(content.table, content.footer)} extensions={[decorateMarkdown(), table()]} />,
 };

package/src/stories/story-utils.tsx

@@ -17,21 +17,19 @@ import { mx } from '@dxos/react-ui-theme';
 
 import { editorContent, editorGutter } from '../defaults';
 import {
-  type EditorSelectionState,
   type DebugNode,
-  decorateMarkdown,
-  formattingKeymap,
-  linkTooltip,
-  image,
-  table,
-  folding,
-} from '../extensions';
-import {
+  type EditorSelectionState,
   createDataExtensions,
   createBasicExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
+  decorateMarkdown,
   debugTree,
+  folding,
+  formattingKeymap,
+  image,
+  linkTooltip,
+  table,
 } from '../extensions';
 import { useTextEditor, type UseTextEditorProps } from '../hooks';
 import { createRenderer } from '../util';

package/src/styles/theme.ts

@@ -119,6 +119,9 @@ export const defaultTheme: ThemeStyles = {
   '.cm-selectionBackground': {
     background: 'var(--dx-cmSelection)',
   },
+  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
+    background: 'var(--dx-cmFocusedSelection)',
+  },
 
   /**
    * Search.

package/src/testing/RefPopover.tsx

@@ -3,10 +3,10 @@
 //
 
 import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, useRef, useState, useEffect, useCallback } from 'react';
+import React, { type PropsWithChildren, useRef, useState, useEffect, useCallback, type RefObject } from 'react';
 
 import { addEventListener } from '@dxos/async';
-import { type DxRefTagActivate } from '@dxos/lit-ui';
+import { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';
 import { Popover } from '@dxos/react-ui';
 
 import { type PreviewLinkRef, type PreviewLinkTarget, type PreviewLookup } from '../extensions';
@@ -21,7 +21,7 @@ const [RefPopoverContextProvider, useRefPopover] = createContext<RefPopoverValue
 type RefPopoverProviderProps = PropsWithChildren<{ onLookup?: PreviewLookup }>;
 
 const RefPopoverProvider = ({ children, onLookup }: RefPopoverProviderProps) => {
-  const trigger = useRef<HTMLButtonElement | null>(null);
+  const trigger = useRef<DxRefTag | null>(null);
   const [value, setValue] = useState<RefPopoverValue>({});
   const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
   const [open, setOpen] = useState(false);
@@ -56,7 +56,7 @@ const RefPopoverProvider = ({ children, onLookup }: RefPopoverProviderProps) =>
   return (
     <RefPopoverContextProvider pending={value.pending} link={value.link} target={value.target}>
       <Popover.Root open={open} onOpenChange={setOpen}>
-        <Popover.VirtualTrigger virtualRef={trigger} />
+        <Popover.VirtualTrigger virtualRef={trigger as unknown as RefObject<HTMLButtonElement>} />
         <div role='none' className='contents' ref={setRootRef}>
           {children}
         </div>

package/dist/types/src/hooks/useActionHandler.d.ts

@@ -1,4 +0,0 @@
-import { type EditorView } from '@codemirror/view';
-import { type EditorAction } from '../extensions';
-export declare const useActionHandler: (view?: EditorView | null) => (action: EditorAction) => void | null | undefined;
-//# sourceMappingURL=useActionHandler.d.ts.map

package/dist/types/src/hooks/useActionHandler.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useActionHandler.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useActionHandler.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAAE,KAAK,YAAY,EAAwB,MAAM,eAAe,CAAC;AAExE,eAAO,MAAM,gBAAgB,UAAW,UAAU,GAAG,IAAI,cAC3B,YAAY,4BACzC,CAAC"}

package/dist/types/src/stories/InputMode.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InputMode.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/InputMode.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAmB,MAAM,OAAO,CAAC;AAiBxC,OAAO,EAAmC,KAAK,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAGpF,KAAK,UAAU,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,kBAAkB,CAAC;AAqEpF,eAAO,MAAM,OAAO;;CAanB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;CAMpB,CAAC;;;iEAxFwE,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FpF,wBAKE"}

package/src/hooks/useActionHandler.ts

@@ -1,12 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type EditorView } from '@codemirror/view';
-import { useCallback } from 'react';
-
-import { type EditorAction, processEditorPayload } from '../extensions';
-
-export const useActionHandler = (view?: EditorView | null) => {
-  return useCallback((action: EditorAction) => view && processEditorPayload(view, action.properties), [view]);
-};

package/src/stories/InputMode.stories.tsx

@@ -1,124 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import '@dxos-theme';
-
-import React, { useState } from 'react';
-
-import { Toolbar as NaturalToolbar, Select, useThemeContext } from '@dxos/react-ui';
-import { attentionSurface, mx } from '@dxos/react-ui-theme';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { EditorToolbar, useEditorToolbarState } from '../components';
-import {
-  type EditorInputMode,
-  decorateMarkdown,
-  createMarkdownExtensions,
-  formattingKeymap,
-  useFormattingState,
-  createBasicExtensions,
-  createThemeExtensions,
-  InputModeExtensions,
-} from '../extensions';
-import { useActionHandler, useTextEditor, type UseTextEditorProps } from '../hooks';
-import translations from '../translations';
-
-type StoryProps = { placeholder?: string; readOnly?: boolean } & UseTextEditorProps;
-
-const DefaultStory = ({ autoFocus, initialValue, placeholder, readOnly }: StoryProps) => {
-  const { themeMode } = useThemeContext();
-  const toolbarState = useEditorToolbarState({ viewMode: 'source' });
-  const trackFormatting = useFormattingState(toolbarState);
-  const [editorInputMode, _setEditorInputMode] = useState<EditorInputMode>('default');
-  const { parentRef, view } = useTextEditor(
-    () => ({
-      autoFocus,
-      initialValue,
-      moveToEndOfLine: true,
-      extensions: [
-        editorInputMode ? InputModeExtensions[editorInputMode] : [],
-        createBasicExtensions({ placeholder, lineWrapping: true, readOnly }),
-        createMarkdownExtensions({ themeMode }),
-        createThemeExtensions({ themeMode, syntaxHighlighting: true }),
-        decorateMarkdown(),
-        formattingKeymap(),
-        trackFormatting,
-      ],
-    }),
-    [editorInputMode, themeMode, placeholder, readOnly],
-  );
-
-  const handleAction = useActionHandler(view);
-
-  // TODO(marijn): This doesn't update the state on view changes.
-  //  Also not sure if view is even guaranteed to exist at this point.
-  return (
-    <div role='none' className={mx('fixed inset-0 flex flex-col')}>
-      {toolbarState && <EditorToolbar onAction={handleAction} state={toolbarState} />}
-      <div role='none' className='grow overflow-hidden'>
-        <div className={attentionSurface} ref={parentRef} />
-      </div>
-    </div>
-  );
-};
-
-const _EditorInputModeToolbar = ({
-  editorInputMode,
-  setEditorInputMode,
-}: {
-  editorInputMode: EditorInputMode;
-  setEditorInputMode: (mode: EditorInputMode) => void;
-}) => {
-  return (
-    <Select.Root value={editorInputMode} onValueChange={(value) => setEditorInputMode(value as EditorInputMode)}>
-      <NaturalToolbar.Button asChild>
-        <Select.TriggerButton variant='ghost'>{editorInputMode}</Select.TriggerButton>
-      </NaturalToolbar.Button>
-      <Select.Portal>
-        <Select.Content>
-          <Select.ScrollUpButton />
-          <Select.Viewport>
-            {['default', 'vim'].map((mode) => (
-              <Select.Option key={mode} value={mode}>
-                {mode}
-              </Select.Option>
-            ))}
-          </Select.Viewport>
-          <Select.ScrollDownButton />
-          <Select.Arrow />
-        </Select.Content>
-      </Select.Portal>
-    </Select.Root>
-  );
-};
-
-export const Default = {
-  render: () => {
-    const { themeMode } = useThemeContext();
-    const { parentRef } = useTextEditor({
-      extensions: [
-        //
-        createBasicExtensions({ placeholder: 'Enter text...' }),
-        createThemeExtensions({ themeMode }),
-      ],
-    });
-
-    return <div ref={parentRef} className={attentionSurface} />;
-  },
-};
-
-export const Markdown = {
-  args: {
-    autoFocus: true,
-    placeholder: 'Text...',
-    initialValue: '# Demo\n\nThis is a document.\n\n',
-  },
-};
-
-export default {
-  title: 'ui/react-ui-editor/InputMode',
-  render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true })],
-  parameters: { translations, layout: 'fullscreen' },
-};