@dxos/react-ui-editor 0.8.2-main.fbd8ed0 → 0.8.2-staging.4d6ad0f

package/src/stories/{story-utils.tsx → util.tsx}

@@ -5,7 +5,7 @@
 import { type Completion } from '@codemirror/autocomplete';
 import { type Extension } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
-import React, { useEffect, useState, type FC } from 'react';
+import React, { type ReactNode, useEffect, useState, type FC } from 'react';
 
 import { Expando } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
@@ -13,9 +13,10 @@ import { live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { createDocAccessor, createObject } from '@dxos/react-client/echo';
 import { useThemeContext, Icon } from '@dxos/react-ui';
+import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
 import { mx } from '@dxos/react-ui-theme';
 
-import { editorContent, editorGutter } from '../defaults';
+import { editorSlots, editorGutter } from '../defaults';
 import {
   type DebugNode,
   type EditorSelectionState,
@@ -30,13 +31,12 @@ import {
   image,
   linkTooltip,
   table,
+  type ThemeExtensionsOptions,
 } from '../extensions';
 import { useTextEditor, type UseTextEditorProps } from '../hooks';
+import { str } from '../testing';
 import { createRenderer } from '../util';
 
-// Utility functions
-export const str = (...lines: string[]) => lines.join('\n');
-
 export const num = () => faker.number.int({ min: 0, max: 9999 }).toLocaleString();
 
 export const img = '![dxos](https://dxos.network/dxos-logotype-blue.png)';
@@ -251,24 +251,28 @@ export type DebugMode = 'raw' | 'tree' | 'raw+tree';
 export type StoryProps = {
   id?: string;
   debug?: DebugMode;
+  debugCustom?: (view: EditorView) => ReactNode;
   text?: string;
   readOnly?: boolean;
   placeholder?: string;
   lineNumbers?: boolean;
   onReady?: (view: EditorView) => void;
-} & Pick<UseTextEditorProps, 'scrollTo' | 'selection' | 'extensions'>;
+} & Pick<UseTextEditorProps, 'scrollTo' | 'selection' | 'extensions'> &
+  Pick<ThemeExtensionsOptions, 'slots'>;
 
 // Default story component
-export const DefaultStory = ({
+export const EditorStory = ({
   id = 'editor-' + PublicKey.random().toHex().slice(0, 8),
   debug,
+  debugCustom,
   text,
-  extensions,
   readOnly,
   placeholder = 'New document.',
+  lineNumbers,
   scrollTo,
   selection,
-  lineNumbers,
+  extensions,
+  slots = editorSlots,
   onReady,
 }: StoryProps) => {
   const [object] = useState(createObject(live(Expando, { content: text ?? '' })));
@@ -285,11 +289,7 @@ export const DefaultStory = ({
         createThemeExtensions({
           themeMode,
           syntaxHighlighting: true,
-          slots: {
-            content: {
-              className: editorContent,
-            },
-          },
+          slots,
         }),
         editorGutter,
         extensions || [],
@@ -308,18 +308,17 @@ export const DefaultStory = ({
   }, [view]);
 
   return (
-    <div className='flex w-full'>
-      <div role='none' className='flex w-full overflow-hidden' ref={parentRef} {...focusAttributes} />
+    <div className={mx('w-full h-full grid overflow-hidden', debug && 'grid-cols-[1fr_600px]')}>
+      <div role='none' className='flex overflow-hidden' ref={parentRef} {...focusAttributes} />
       {debug && (
-        <div className='flex flex-col w-[800px] border-l border-separator divide-y divide-separator overflow-auto'>
+        <div className='grid h-full auto-rows-fr border-l border-separator divide-y divide-separator overflow-hidden'>
+          {view && debugCustom?.(view)}
           {(debug === 'raw' || debug === 'raw+tree') && (
-            <pre className='p-1 font-mono text-xs text-green-800 dark:text-green-200'>{view?.state.doc.toString()}</pre>
-          )}
-          {(debug === 'tree' || debug === 'raw+tree') && (
-            <pre className='p-1 font-mono text-xs text-green-800 dark:text-green-200'>
-              {JSON.stringify(tree, null, 2)}
+            <pre className='p-1 text-xs text-green-800 dark:text-green-200 overflow-auto'>
+              {view?.state.doc.toString()}
             </pre>
           )}
+          {(debug === 'tree' || debug === 'raw+tree') && <JsonFilter data={tree} classNames='p-1 text-xs' />}
         </div>
       )}
     </div>

package/src/styles/theme.ts

@@ -167,18 +167,25 @@ export const defaultTheme: ThemeStyles = {
   '.cm-tooltip.cm-tooltip-autocomplete': {
     marginTop: '4px',
     marginLeft: '-3px',
+    borderColor: 'var(--dx-separator)',
+    borderTop: 'none',
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul': {
     maxHeight: '20em',
   },
-  '.cm-tooltip.cm-tooltip-autocomplete > ul > li': {},
-  '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]': {},
+  '.cm-tooltip.cm-tooltip-autocomplete > ul > li': {
+    padding: '4px',
+  },
+  '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]': {
+    background: 'var(--dx-hoverSurface)',
+  },
   '.cm-tooltip.cm-tooltip-autocomplete > ul > completion-section': {
     paddingLeft: '4px !important',
     borderBottom: 'none !important',
     color: 'var(--dx-accentText)',
   },
-  '.cm-tooltip.cm-completionInfo': {
+
+  '.cm-completionInfo': {
     width: '360px !important',
     margin: '-10px 1px 0 1px',
     padding: '8px !important',
@@ -229,7 +236,7 @@ export const defaultTheme: ThemeStyles = {
     backgroundColor: 'var(--dx-input)',
   },
   '.cm-panel input:focus, .cm-panel button:focus': {
-    outline: '1px solid var(--dx-accentFocusIndicator)',
+    outline: '1px solid var(--dx-neutralFocusIndicator)',
   },
   '.cm-panel label': {
     display: 'inline-flex',
@@ -242,7 +249,7 @@ export const defaultTheme: ThemeStyles = {
     height: '8px',
     marginRight: '6px !important',
     padding: '2px !important',
-    color: 'var(--dx-accentFocusIndicator)',
+    color: 'var(--dx-neutralFocusIndicator)',
   },
   '.cm-panel button': {
     '&:hover': {

package/src/styles/tokens.ts

@@ -2,9 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import get from 'lodash.get';
-
 import { tokens } from '@dxos/react-ui-theme';
+import { get } from '@dxos/util';
 
 /**
  * Returns the tailwind token value.

package/src/testing/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2022 DXOS.org
 //
 
-export * from './RefPopover';
+export * from './util';

package/src/testing/util.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export const str = (...lines: string[]) => lines.join('\n');

package/dist/types/src/components/EditorToolbar/EditorToolbar.stories.d.ts

@@ -1,53 +0,0 @@
-import '@dxos-theme';
-import React from 'react';
-import { type UseTextEditorProps } from '../../hooks';
-type StoryProps = {
-    placeholder?: string;
-} & UseTextEditorProps;
-export declare const Default: {
-    args: {
-        autoFocus: boolean;
-        placeholder: string;
-        initialValue: string;
-    };
-};
-declare const _default: {
-    title: string;
-    render: ({ autoFocus, initialValue, placeholder }: StoryProps) => React.JSX.Element;
-    decorators: import("@storybook/react").Decorator[];
-    parameters: {
-        translations: {
-            'en-US': {
-                "react-ui-editor": {
-                    'strong label': string;
-                    'emphasis label': string;
-                    'strikethrough label': string;
-                    'code label': string;
-                    'link label': string;
-                    'list-bullet label': string;
-                    'list-ordered label': string;
-                    'list-task label': string;
-                    'blockquote label': string;
-                    'codeblock label': string;
-                    'comment label': string;
-                    'selection overlaps existing comment label': string;
-                    'select text to comment label': string;
-                    'image label': string;
-                    'heading label': string;
-                    'table label': string;
-                    'heading level label_zero': string;
-                    'heading level label_one': string;
-                    'heading level label_other': string;
-                    'view mode label': string;
-                    'preview mode label': string;
-                    'readonly mode label': string;
-                    'search label': string;
-                    'source mode label': string;
-                };
-            };
-        }[];
-        layout: string;
-    };
-};
-export default _default;
-//# sourceMappingURL=EditorToolbar.stories.d.ts.map

package/dist/types/src/components/EditorToolbar/EditorToolbar.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EditorToolbar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/EditorToolbar/EditorToolbar.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAgC,MAAM,OAAO,CAAC;AAmBrD,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGrE,KAAK,UAAU,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,kBAAkB,CAAC;AAgDhE,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC;;;uDApD8D,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsD1E,wBAKE"}

package/dist/types/src/components/EditorToolbar/comment.d.ts

@@ -1,18 +0,0 @@
-import { type EditorView } from '@codemirror/view';
-import { type EditorToolbarState } from './util';
-export declare const createComment: (state: EditorToolbarState, getView: () => EditorView) => {
-    nodes: Readonly<Omit<Readonly<{
-        id: string;
-        type: string;
-        cacheable?: string[];
-        properties: Readonly<import("@dxos/react-ui-menu").MenuActionProperties>;
-        data: import("@dxos/app-graph").ActionData;
-    }>, "properties"> & {
-        properties: Readonly<import("@dxos/react-ui-menu").MenuActionProperties>;
-    }>[];
-    edges: {
-        source: string;
-        target: string;
-    }[];
-};
-//# sourceMappingURL=comment.d.ts.map

package/dist/types/src/components/EditorToolbar/comment.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"comment.d.ts","sourceRoot":"","sources":["../../../../../src/components/EditorToolbar/comment.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAInD,OAAO,EAAsB,KAAK,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAkBrE,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,EAAE,SAAS,MAAM,UAAU;;;;;;;;;;;;;;CAGhF,CAAC"}

package/dist/types/src/extensions/markdown/editorAction.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"editorAction.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/editorAction.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAsBhE,MAAM,MAAM,WAAW,GACnB,WAAW,GACX,YAAY,GACZ,QAAQ,GACR,WAAW,GACX,SAAS,GACT,SAAS,GACT,OAAO,GACP,UAAU,GACV,MAAM,GACN,MAAM,GACN,aAAa,GACb,cAAc,GACd,WAAW,GACX,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,eAAe,GACf,OAAO,CAAC;AAEZ,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,WAAW,CAAC;IAClB,IAAI,CAAC,EAAE,GAAG,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,oBAAoB,GAAG,mBAAmB,CAAC,CAAC;AAE9E,MAAM,MAAM,oBAAoB,GAAG,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;AAE5F,eAAO,MAAM,oBAAoB,EAAE,oBAyDlC,CAAC"}

package/dist/types/src/extensions/markdown/outliner.d.ts

@@ -1,12 +0,0 @@
-import { type Extension } from '@codemirror/state';
-/**
- * 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 declare const outliner: () => Extension;
-//# sourceMappingURL=outliner.d.ts.map

package/dist/types/src/extensions/markdown/outliner.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"outliner.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/outliner.ts"],"names":[],"mappings":"AAKA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,mBAAmB,CAAC;AA0B3B;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,QAAO,SAyJ3B,CAAC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"TextEditorBasic.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/TextEditorBasic.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAKrB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAyB,KAAK,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,EACL,YAAY,EAcb,MAAM,eAAe,CAAC;AAevB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAKnC,CAAC;AAEF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO;;CAEnB,CAAC;AAMF,eAAO,MAAM,UAAU;;CAEtB,CAAC;AAMF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAMF,eAAO,MAAM,QAAQ;;CAEpB,CAAC;AAMF,eAAO,MAAM,YAAY;;CAExB,CAAC;AAMF,eAAO,MAAM,GAAG;;CAOf,CAAC;AAMF,eAAO,MAAM,OAAO;;CAEnB,CAAC;AAEF,eAAO,MAAM,SAAS;;CAUrB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;CAI/B,CAAC;AAEF,eAAO,MAAM,QAAQ;;CAepB,CAAC;AAMF,eAAO,MAAM,UAAU;;CAQtB,CAAC;AAEF,eAAO,MAAM,QAAQ;;CAIpB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAIjB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAEF,eAAO,MAAM,IAAI;;CAEhB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAOjB,CAAC;AAMF,eAAO,MAAM,UAAU;;CAEtB,CAAC;AAMF,eAAO,MAAM,WAAW;;CAEvB,CAAC;AAMF,eAAO,MAAM,QAAQ;;CAIpB,CAAC;AAMF,eAAO,MAAM,QAAQ;;CAqBpB,CAAC;AAMF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAMF,eAAO,MAAM,YAAY;;CAWxB,CAAC;AAMF,eAAO,MAAM,UAAU;;CAQtB,CAAC;AAMF,eAAO,MAAM,YAAY;;CAcxB,CAAC;AAMF,eAAO,MAAM,OAAO;;CAWnB,CAAC;AAMF,eAAO,MAAM,MAAM;;CAQlB,CAAC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"TextEditorComments.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/TextEditorComments.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAyB,KAAK,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,EAAE,YAAY,EAA0B,MAAM,eAAe,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAKnC,CAAC;AAEF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,QAAQ;;CAsCpB,CAAC;AAyBF,eAAO,MAAM,WAAW;;CAIvB,CAAC"}

package/dist/types/src/stories/TextEditorPreview.stories.d.ts

@@ -1,13 +0,0 @@
-import '@dxos-theme';
-import React from 'react';
-import { type Meta } from '@dxos/storybook-utils';
-import { DefaultStory } from './story-utils';
-declare const meta: Meta<typeof DefaultStory>;
-export default meta;
-export declare const Preview: {
-    render: () => React.JSX.Element;
-};
-export declare const Command: {
-    render: () => React.JSX.Element;
-};
-//# sourceMappingURL=TextEditorPreview.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"TextEditorPreview.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/TextEditorPreview.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAA2D,MAAM,OAAO,CAAC;AAKhF,OAAO,EAAyB,KAAK,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,EAAE,YAAY,EAAO,MAAM,eAAe,CAAC;AAelD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAKnC,CAAC;AAEF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO;;CA8BnB,CAAC;AAwFF,eAAO,MAAM,OAAO;;CAwBnB,CAAC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"TextEditorSpecial.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/TextEditorSpecial.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAyB,KAAK,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,EAAE,YAAY,EAAgB,MAAM,eAAe,CAAC;AAG3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAKnC,CAAC;AAEF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,QAAQ;;CAgBpB,CAAC;AAQF,eAAO,MAAM,UAAU;;CAOtB,CAAC;AAMF,eAAO,MAAM,KAAK;;CAqBjB,CAAC;AAMF,eAAO,MAAM,GAAG;;CAaf,CAAC"}

package/dist/types/src/stories/story-utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"story-utils.d.ts","sourceRoot":"","sources":["../../../../src/stories/story-utils.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAuC,MAAM,OAAO,CAAC;AAW5D,OAAO,EAEL,KAAK,oBAAoB,EAY1B,MAAM,eAAe,CAAC;AACvB,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAIlE,eAAO,MAAM,GAAG,GAAI,GAAG,OAAO,MAAM,EAAE,WAAqB,CAAC;AAE5D,eAAO,MAAM,GAAG,cAAiE,CAAC;AAElF,eAAO,MAAM,GAAG,yDAAyD,CAAC;AAE1E,eAAO,MAAM,IAAI,QAOhB,CAAC;AAGF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;CA+FnB,CAAC;AAGF,eAAO,MAAM,IAAI,QAwBhB,CAAC;AAGF,eAAO,MAAM,KAAK,EAAE,UAAU,EAM7B,CAAC;AAEF,eAAO,MAAM,KAAK,UAA4E,CAAC;AAe/F,eAAO,MAAM,iBAAiB;SAVD,MAAM;EAUyB,CAAC;AAU7D,eAAO,MAAM,gBAAgB;SARD,MAAM;EAQwB,CAAC;AAG3D,eAAO,MAAM,iBAAiB,EAAE,SAAS,EAIxC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAAS,EAOpC,CAAC;AAGF,eAAO,MAAM,QAAQ,QAEN,CAAC;AAEhB,eAAO,MAAM,eAAe,QAGb,CAAC;AAEhB,eAAO,MAAM,QAAQ,QAIpB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAA0C,CAAC;AAG9D,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,CAAC;AAEpD,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC,GAAG,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,WAAW,GAAG,YAAY,CAAC,CAAC;AAGtE,eAAO,MAAM,YAAY,GAAI,oGAW1B,UAAU,sBAsDZ,CAAC"}

package/dist/types/src/testing/RefPopover.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RefPopover.d.ts","sourceRoot":"","sources":["../../../../src/testing/RefPopover.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAA4D,MAAM,OAAO,CAAC;AAMhH,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAKhG,KAAK,eAAe,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,cAAc,CAAC;IAAC,MAAM,EAAE,iBAAiB,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAEtG,QAAA,MAAkC,aAAa;UAFR,cAAc;YAAU,iBAAiB;aAAW,OAAO;EAEA,CAAC;AAEnG,KAAK,uBAAuB,GAAG,iBAAiB,CAAC;IAAE,QAAQ,CAAC,EAAE,aAAa,CAAA;CAAE,CAAC,CAAC;AA+C/E,eAAO,MAAM,UAAU;uCA7C6B,uBAAuB;CA+C1E,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC;AAEzB,YAAY,EAAE,uBAAuB,EAAE,eAAe,EAAE,CAAC"}

package/src/components/EditorToolbar/comment.ts

@@ -1,30 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type EditorView } from '@codemirror/view';
-
-import { type Label } from '@dxos/react-ui';
-
-import { createEditorAction, type EditorToolbarState } from './util';
-import { createComment as nativeCreateComment } from '../../extensions';
-import { translationKey } from '../../translations';
-
-const commentLabel = (comment?: boolean, selection?: boolean) =>
-  comment
-    ? 'selection overlaps existing comment label'
-    : selection === false
-      ? 'select text to comment label'
-      : 'comment label';
-
-const createCommentAction = (label: Label, getView: () => EditorView) =>
-  createEditorAction('comment', () => nativeCreateComment(getView()), {
-    testId: 'editor.toolbar.comment',
-    icon: 'ph--chat-text--regular',
-    label,
-  });
-
-export const createComment = (state: EditorToolbarState, getView: () => EditorView) => ({
-  nodes: [createCommentAction([commentLabel(state.comment, state.selection), { ns: translationKey }], getView)],
-  edges: [{ source: 'root', target: 'comment' }],
-});

package/src/extensions/markdown/outliner.ts

@@ -1,235 +0,0 @@
-//
-// 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;
-};