@dxos/react-ui-editor 0.6.11-staging.e6894a4 → 0.6.12-main.5cc132e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.6.11-staging.e6894a4",
+  "version": "0.6.12-main.5cc132e",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -34,6 +34,7 @@
     "@codemirror/view": "^6.29.1",
     "@fluentui/react-tabster": "^9.19.0",
     "@lezer/common": "^1.2.1",
+    "@lezer/generator": "^1.7.1",
     "@lezer/highlight": "^1.2.0",
     "@lezer/markdown": "^1.3.0",
     "@radix-ui/react-context": "^1.0.0",
@@ -47,19 +48,19 @@
     "lodash.sortby": "^4.7.0",
     "react-dropzone": "^14.2.3",
     "style-mod": "^4.1.0",
-    "@dxos/async": "0.6.11-staging.e6894a4",
-    "@dxos/automerge": "0.6.11-staging.e6894a4",
-    "@dxos/debug": "0.6.11-staging.e6894a4",
-    "@dxos/context": "0.6.11-staging.e6894a4",
-    "@dxos/display-name": "0.6.11-staging.e6894a4",
-    "@dxos/echo-schema": "0.6.11-staging.e6894a4",
-    "@dxos/invariant": "0.6.11-staging.e6894a4",
-    "@dxos/log": "0.6.11-staging.e6894a4",
-    "@dxos/protocols": "0.6.11-staging.e6894a4",
-    "@dxos/react-async": "0.6.11-staging.e6894a4",
-    "@dxos/util": "0.6.11-staging.e6894a4",
-    "@dxos/react-ui": "0.6.11-staging.e6894a4",
-    "@dxos/react-ui-theme": "0.6.11-staging.e6894a4"
+    "@dxos/async": "0.6.12-main.5cc132e",
+    "@dxos/context": "0.6.12-main.5cc132e",
+    "@dxos/debug": "0.6.12-main.5cc132e",
+    "@dxos/automerge": "0.6.12-main.5cc132e",
+    "@dxos/invariant": "0.6.12-main.5cc132e",
+    "@dxos/echo-schema": "0.6.12-main.5cc132e",
+    "@dxos/log": "0.6.12-main.5cc132e",
+    "@dxos/protocols": "0.6.12-main.5cc132e",
+    "@dxos/react-hooks": "0.6.12-main.5cc132e",
+    "@dxos/display-name": "0.6.12-main.5cc132e",
+    "@dxos/react-ui": "0.6.12-main.5cc132e",
+    "@dxos/react-ui-theme": "0.6.12-main.5cc132e",
+    "@dxos/util": "0.6.12-main.5cc132e"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -67,6 +68,8 @@
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
+    "@types/chai": "^4.2.15",
+    "@types/chai-dom": "^1.11.0",
     "@types/lodash.defaultsdeep": "^4.6.6",
     "@types/lodash.get": "^4.4.7",
     "@types/lodash.merge": "^4.6.6",
@@ -74,29 +77,31 @@
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
     "@types/react-test-renderer": "^17.0.2",
+    "chai": "^4.4.1",
+    "chai-dom": "^1.11.0",
     "happy-dom": "^13.3.1",
     "jsdom": "^24.0.0",
+    "mocha": "^10.6.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "react-test-renderer": "~18.2.0",
-    "vite": "^5.3.4",
+    "vite": "5.4.7",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
-    "@dxos/config": "0.6.11-staging.e6894a4",
-    "@dxos/automerge": "0.6.11-staging.e6894a4",
-    "@dxos/echo-signals": "0.6.11-staging.e6894a4",
-    "@dxos/echo-typegen": "0.6.11-staging.e6894a4",
-    "@dxos/keyboard": "0.6.11-staging.e6894a4",
-    "@dxos/random": "0.6.11-staging.e6894a4",
-    "@dxos/storybook-utils": "0.6.11-staging.e6894a4",
-    "@dxos/react-client": "0.6.11-staging.e6894a4",
-    "@dxos/react-ui": "0.6.11-staging.e6894a4"
+    "@dxos/automerge": "0.6.12-main.5cc132e",
+    "@dxos/config": "0.6.12-main.5cc132e",
+    "@dxos/echo-signals": "0.6.12-main.5cc132e",
+    "@dxos/keyboard": "0.6.12-main.5cc132e",
+    "@dxos/react-ui": "0.6.12-main.5cc132e",
+    "@dxos/random": "0.6.12-main.5cc132e",
+    "@dxos/react-client": "0.6.12-main.5cc132e",
+    "@dxos/storybook-utils": "0.6.12-main.5cc132e"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@dxos/react-client": "0.6.11-staging.e6894a4"
+    "@dxos/react-client": "0.6.12-main.5cc132e"
   },
   "publishConfig": {
     "access": "public"

package/src/InputMode.stories.tsx

@@ -6,9 +6,9 @@ import '@dxos-theme';
 
 import React, { useState } from 'react';
 
-import { Toolbar as NaturalToolbar, Select, useThemeContext, Tooltip } from '@dxos/react-ui';
+import { Toolbar as NaturalToolbar, Select, useThemeContext } from '@dxos/react-ui';
 import { attentionSurface, mx, textBlockWidth } from '@dxos/react-ui-theme';
-import { withFullscreen, withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { Toolbar } from './components';
 import {
@@ -39,7 +39,7 @@ const Story = ({ autoFocus, initialValue, placeholder, readonly }: StoryProps) =
         editorInputMode ? InputModeExtensions[editorInputMode] : [],
         createBasicExtensions({ placeholder, lineWrapping: true, readonly }),
         createMarkdownExtensions({ themeMode }),
-        createThemeExtensions({ themeMode }),
+        createThemeExtensions({ themeMode, syntaxHighlighting: true }),
         decorateMarkdown(),
         formattingKeymap(),
         trackFormatting,
@@ -54,12 +54,10 @@ const Story = ({ autoFocus, initialValue, placeholder, readonly }: StoryProps) =
   //  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')}>
-      <Tooltip.Provider>
-        <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
-          <Toolbar.Markdown />
-          <EditorInputModeToolbar editorInputMode={editorInputMode} setEditorInputMode={setEditorInputMode} />
-        </Toolbar.Root>
-      </Tooltip.Provider>
+      <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
+        <Toolbar.Markdown />
+        <EditorInputModeToolbar editorInputMode={editorInputMode} setEditorInputMode={setEditorInputMode} />
+      </Toolbar.Root>
 
       <div role='none' className='grow overflow-hidden'>
         <div className={attentionSurface} ref={parentRef} />
@@ -100,7 +98,7 @@ const EditorInputModeToolbar = ({
 
 export default {
   title: 'react-ui-editor/InputMode',
-  decorators: [withTheme, withFullscreen()],
+  decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true })],
   parameters: { translations, layout: 'fullscreen' },
   render: Story,
 };

package/src/TextEditor.stories.tsx

@@ -3,7 +3,7 @@
 //
 
 import '@dxos-theme';
-
+import { javascript } from '@codemirror/lang-javascript';
 import { markdown } from '@codemirror/lang-markdown';
 import { openSearchPanel } from '@codemirror/search';
 import { type Extension } from '@codemirror/state';
@@ -22,9 +22,9 @@ import { faker } from '@dxos/random';
 import { createDocAccessor, createEchoObject } from '@dxos/react-client/echo';
 import { Button, DensityProvider, Input, useThemeContext } from '@dxos/react-ui';
 import { baseSurface, mx, getSize } from '@dxos/react-ui-theme';
-import { withFullscreen, withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { editorContent, editorGutter } from './defaults';
+import { editorContent, editorGutter, editorMonospace } from './defaults';
 import {
   InputModeExtensions,
   annotations,
@@ -68,6 +68,15 @@ const num = () => faker.number.int({ min: 0, max: 9999 }).toLocaleString();
 
 const img = '![dxos](https://pbs.twimg.com/profile_banners/1268328127673044992/1684766689/1500x500)';
 
+const code = str(
+  '// Code',
+  'const Component = () => {',
+  '  const x = 100;',
+  '',
+  '  return () => <div>Test</div>;',
+  '};',
+);
+
 const content = {
   tasks: str(
     //
@@ -111,22 +120,9 @@ const content = {
     '',
   ),
 
-  code: str(
-    '### Code',
-    '',
-    '```bash',
-    '$ ls -las',
-    '```',
-    '',
-    '```tsx',
-    'const Component = () => {',
-    '  const x = 100;',
-    '',
-    '  return () => <div>Test</div>;',
-    '};',
-    '```',
-    '',
-  ),
+  typescript: code,
+
+  codeblocks: str('### Code', '', '```bash', '$ ls -las', '```', '', '```tsx', code, '```', ''),
 
   comment: str('<!--', 'A comment', '-->', '', 'No comment.', 'Partial comment. <!-- comment. -->'),
 
@@ -195,12 +191,9 @@ const text = str(
   content.tasks,
   content.numbered,
 
-  '---',
-  content.headings,
-
   '---',
   '## Misc',
-  content.code,
+  content.codeblocks,
   content.table,
   content.image,
   content.footer,
@@ -261,12 +254,15 @@ const renderLinkButton = (el: Element, url: string) => {
 // Story
 //
 
+type DebugMode = 'syntax' | 'raw';
+
 type StoryProps = {
   id?: string;
-  debug?: boolean;
+  debug?: DebugMode;
   text?: string;
   readonly?: boolean;
   placeholder?: string;
+  lineNumbers?: boolean;
   onReady?: (view: EditorView) => void;
 } & Pick<UseTextEditorProps, 'scrollTo' | 'selection' | 'extensions'>;
 
@@ -279,6 +275,7 @@ const Story = ({
   placeholder = 'New document.',
   scrollTo,
   selection,
+  lineNumbers,
   onReady,
 }: StoryProps) => {
   const [object] = useState(createEchoObject(create(Expando, { content: text ?? '' })));
@@ -290,16 +287,18 @@ const Story = ({
       initialValue: text,
       extensions: [
         createDataExtensions({ id, text: createDocAccessor(object, ['content']) }),
-        createBasicExtensions({ readonly, placeholder, scrollPastEnd: true }),
+        createBasicExtensions({ readonly, placeholder, lineNumbers, scrollPastEnd: true }),
         createMarkdownExtensions({ themeMode }),
         createThemeExtensions({
           themeMode,
+          syntaxHighlighting: true,
           slots: {
             content: {
               className: editorContent,
             },
           },
         }),
+        editorGutter,
         extensions || [],
         debug ? debugTree(setTree) : [],
       ],
@@ -318,7 +317,12 @@ const Story = ({
   return (
     <div className='flex w-full'>
       <div role='none' className='flex w-full overflow-hidden' ref={parentRef} {...focusAttributes} />
-      {debug && (
+      {debug === 'raw' && (
+        <div className='w-[800px] border-l border-separator overflow-auto'>
+          <pre className='p-1 font-mono text-xs text-green-800 dark:text-green-200'>{view?.state.doc.toString()}</pre>
+        </div>
+      )}
+      {debug === 'syntax' && (
         <div className='w-[800px] border-l border-separator overflow-auto'>
           <pre className='p-1 font-mono text-xs text-green-800 dark:text-green-200'>
             {JSON.stringify(tree, null, 2)}
@@ -331,7 +335,7 @@ const Story = ({
 
 export default {
   title: 'react-ui-editor/TextEditor',
-  decorators: [withTheme, withFullscreen()],
+  decorators: [withTheme, withLayout({ fullscreen: true })],
   render: Story,
   parameters: { translations, layout: 'fullscreen' },
 };
@@ -345,8 +349,24 @@ const defaultExtensions: Extension[] = [
   linkTooltip(renderLinkTooltip),
 ];
 
+const allExtensions: Extension[] = [
+  autocomplete({
+    onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
+  }),
+  decorateMarkdown({ numberedHeadings: { from: 2, to: 4 }, renderLinkButton, selectionChangeDelay: 100 }),
+  formattingKeymap(),
+  linkTooltip(renderLinkTooltip),
+  image(),
+  table(),
+  folding(),
+];
+
 export const Default = {
-  render: () => <Story text={text} extensions={defaultExtensions} selection={{ anchor: 99, head: 110 }} />,
+  render: () => <Story text={text} extensions={defaultExtensions} />,
+};
+
+export const Everything = {
+  render: () => <Story text={text} extensions={allExtensions} selection={{ anchor: 99, head: 110 }} />,
 };
 
 export const Empty = {
@@ -390,7 +410,7 @@ const headings = str(
 const global = new Map<string, EditorSelectionState>();
 
 export const Folding = {
-  render: () => <Story text={text} extensions={[editorGutter, folding()]} />,
+  render: () => <Story text={text} extensions={[folding()]} />,
 };
 
 export const Scrolling = {
@@ -445,7 +465,7 @@ export const Image = {
 };
 
 export const Code = {
-  render: () => <Story text={str(content.code, content.footer)} extensions={[decorateMarkdown()]} />,
+  render: () => <Story text={str(content.codeblocks, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
 export const Lists = {
@@ -466,7 +486,7 @@ export const OrderedList = {
 };
 
 export const TaskList = {
-  render: () => <Story text={str(content.tasks, content.footer)} extensions={[decorateMarkdown()]} debug />,
+  render: () => <Story text={str(content.tasks, content.footer)} extensions={[decorateMarkdown()]} debug='raw' />,
 };
 
 export const Table = {
@@ -486,6 +506,12 @@ export const CommentedOut = {
   ),
 };
 
+export const Typescript = {
+  render: () => (
+    <Story text={content.typescript} lineNumbers extensions={[editorMonospace, javascript({ typescript: true })]} />
+  ),
+};
+
 //
 // Custom
 //
@@ -669,7 +695,7 @@ export const Typewriter = {
 export const Blast = {
   render: () => (
     <Story
-      text={str('# Blast', '', content.paragraphs, content.code, content.paragraphs)}
+      text={str('# Blast', '', content.paragraphs, content.codeblocks, content.paragraphs)}
       extensions={[
         typewriter({ items: typewriterItems }),
         blast(

package/src/defaults.ts

@@ -8,7 +8,9 @@ import { mx } from '@dxos/react-ui-theme';
 
 import { fontMono } from './styles';
 
-const margin = '!mt-[16px]';
+// TODO(burdon): Define scrollMargins for fixed gutter?
+//  https://codemirror.net/docs/ref/#view.EditorView^scrollMargins
+const margin = '!mt-[1rem]';
 
 /**
  * CodeMirror content width.
@@ -20,16 +22,16 @@ export const editorContent = mx(margin, '!mli-auto w-full max-w-[min(50rem,100%-
 /**
  * Margin for numbers.
  */
-export const editorFullWidth = mx(margin, '!ml-[3rem]');
+export const editorFullWidth = mx(margin);
 
 export const editorWithToolbarLayout =
   'grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden';
 
-// TODO(burdon): Define scrollMargins for fixed gutter.
 export const editorGutter = EditorView.theme({
   // Match margin from content.
   '.cm-gutters': {
     marginTop: '16px',
+    paddingRight: '1rem',
   },
 });
 

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

@@ -10,12 +10,11 @@ import React, { useEffect, useState } from 'react';
 import { Repo } from '@dxos/automerge/automerge-repo';
 import { BroadcastChannelNetworkAdapter } from '@dxos/automerge/automerge-repo-network-broadcastchannel';
 import { Expando, create } from '@dxos/echo-schema';
-import { type PublicKey } from '@dxos/keys';
 import { Filter, DocAccessor, createDocAccessor, useSpace, useQuery, type Space } from '@dxos/react-client/echo';
 import { useIdentity, type Identity } from '@dxos/react-client/halo';
-import { ClientRepeater } from '@dxos/react-client/testing';
+import { type ClientRepeatedComponentProps, ClientRepeater } from '@dxos/react-client/testing';
 import { useThemeContext } from '@dxos/react-ui';
-import { withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { editorContent } from '../../defaults';
 import { useTextEditor } from '../../hooks';
@@ -95,12 +94,12 @@ const Story = () => {
 export default {
   title: 'react-ui-editor/Automerge',
   component: Editor,
-  decorators: [withTheme],
+  decorators: [withTheme, withLayout({ fullscreen: true })],
   render: () => <Story />,
-  parameters: { translations, layout: 'fullscreen' },
+  parameters: { translations },
 };
 
-const EchoStory = ({ spaceKey }: { spaceKey: PublicKey }) => {
+const EchoStory = ({ spaceKey }: ClientRepeatedComponentProps) => {
   const identity = useIdentity();
   const space = useSpace(spaceKey);
   const [source, setSource] = useState<DocAccessor>();

package/src/extensions/automerge/{automerge.spec.tsx → automerge.test.tsx}

@@ -5,6 +5,7 @@
 import { EditorState } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { render, screen } from '@testing-library/react';
+// TODO(wittjosiah): Move to vitest expect.
 import chai, { expect } from 'chai';
 import chaiDom from 'chai-dom';
 import get from 'lodash.get';

package/src/extensions/automerge/automerge.ts

@@ -1,5 +1,5 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2024 DXOS.org
 // Copyright 2024 Automerge
 // Ref: https://github.com/automerge/automerge-codemirror
 //

package/src/extensions/factories.ts

@@ -4,9 +4,10 @@
 
 import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
 import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap } from '@codemirror/commands';
-import { bracketMatching } from '@codemirror/language';
+import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { searchKeymap } from '@codemirror/search';
 import { EditorState, type Extension } from '@codemirror/state';
+import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
 import {
   EditorView,
   type KeyBinding,
@@ -131,6 +132,7 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
 export type ThemeExtensionsOptions = {
   themeMode?: ThemeMode;
   styles?: ThemeStyles;
+  syntaxHighlighting?: boolean;
   slots?: {
     editor?: {
       className?: string;
@@ -147,13 +149,22 @@ const defaultThemeSlots = {
   },
 };
 
-// TODO(burdon): Should only have one baseTheme?
-// https://codemirror.net/examples/styling
-export const createThemeExtensions = ({ themeMode, styles, slots: _slots }: ThemeExtensionsOptions = {}): Extension => {
+/**
+ * https://codemirror.net/examples/styling
+ */
+export const createThemeExtensions = ({
+  themeMode,
+  styles,
+  syntaxHighlighting: _syntaxHighlighting,
+  slots: _slots,
+}: ThemeExtensionsOptions = {}): Extension => {
   const slots = defaultsDeep({}, _slots, defaultThemeSlots);
   return [
     EditorView.darkTheme.of(themeMode === 'dark'),
     EditorView.baseTheme(styles ? merge({}, defaultTheme, styles) : defaultTheme),
+    // https://github.com/codemirror/theme-one-dark
+    _syntaxHighlighting &&
+      (themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)),
     slots.editor?.className && EditorView.editorAttributes.of({ class: slots.editor.className }),
     slots.content?.className && EditorView.contentAttributes.of({ class: slots.content.className }),
   ].filter(isNotFalsy);

package/src/extensions/folding.tsx

@@ -4,28 +4,41 @@
 
 import { codeFolding, foldGutter } from '@codemirror/language';
 import { type Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
 import React from 'react';
 
 import { Icon } from '@dxos/react-ui';
 import { getSize } from '@dxos/react-ui-theme';
 
-import { renderRoot } from './util';
+import { createElement, renderRoot } from './util';
 
 export type FoldingOptions = {};
 
 /**
  * https://codemirror.net/examples/gutter
  */
+// TODO(burdon): Remember folding state.
 export const folding = (_props: FoldingOptions = {}): Extension => [
   codeFolding({
-    placeholderDOM: () => document.createElement('div'),
+    placeholderDOM: () => {
+      return document.createElement('span'); // Collapse content.
+    },
   }),
   foldGutter({
     markerDOM: (open) => {
       return renderRoot(
-        document.createElement('div'),
-        <Icon icon='ph--caret-right--regular' classNames={[getSize(3), 'm-2 cursor-pointer', open && 'rotate-90']} />,
+        createElement('div', { className: 'flex h-full items-center' }),
+        <Icon icon='ph--caret-right--regular' classNames={[getSize(3), 'mx-3 cursor-pointer', open && 'rotate-90']} />,
       );
     },
   }),
+  EditorView.theme({
+    '.cm-foldGutter': {
+      opacity: 0.3,
+      transition: 'opacity 0.3s',
+    },
+    '.cm-foldGutter:hover': {
+      opacity: 1,
+    },
+  }),
 ];

package/src/extensions/markdown/bundle.ts

@@ -5,11 +5,10 @@
 import { completionKeymap } from '@codemirror/autocomplete';
 import { defaultKeymap, indentWithTab } from '@codemirror/commands';
 import { markdownLanguage, markdown } from '@codemirror/lang-markdown';
-import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { syntaxHighlighting } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 import { lintKeymap } from '@codemirror/lint';
 import { type Extension } from '@codemirror/state';
-import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
 import { keymap } from '@codemirror/view';
 
 import { type ThemeMode } from '@dxos/react-ui';
@@ -54,9 +53,6 @@ export const createMarkdownExtensions = ({ themeMode }: MarkdownBundleOptions =
       ],
     }),
 
-    // https://github.com/codemirror/theme-one-dark
-    themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
-
     // Custom styles.
     syntaxHighlighting(markdownHighlightStyle()),
 

package/src/extensions/markdown/changes.test.ts

@@ -2,9 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { expect } from 'chai';
-
-import { describe, test } from '@dxos/test';
+import { describe, expect, test } from 'vitest';
 
 import { createLinkLabel } from './changes';