@dxos/react-ui-editor 0.3.10-main.90b298e → 0.3.10-main.92d1f2c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.3.10-main.90b298e",
+  "version": "0.3.10-main.92d1f2c",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -36,19 +36,19 @@
     "y-codemirror.next": "^0.3.2",
     "y-protocols": "^1.0.5",
     "yjs": "^13.6.10",
-    "@dxos/automerge": "0.3.10-main.90b298e",
-    "@dxos/async": "0.3.10-main.90b298e",
-    "@dxos/display-name": "0.3.10-main.90b298e",
-    "@dxos/debug": "0.3.10-main.90b298e",
-    "@dxos/echo-schema": "0.3.10-main.90b298e",
-    "@dxos/invariant": "0.3.10-main.90b298e",
-    "@dxos/react-async": "0.3.10-main.90b298e",
-    "@dxos/log": "0.3.10-main.90b298e",
-    "@dxos/protocols": "0.3.10-main.90b298e",
-    "@dxos/react-ui": "0.3.10-main.90b298e",
-    "@dxos/react-ui-theme": "0.3.10-main.90b298e",
-    "@dxos/text-model": "0.3.10-main.90b298e",
-    "@dxos/util": "0.3.10-main.90b298e"
+    "@dxos/async": "0.3.10-main.92d1f2c",
+    "@dxos/debug": "0.3.10-main.92d1f2c",
+    "@dxos/echo-schema": "0.3.10-main.92d1f2c",
+    "@dxos/invariant": "0.3.10-main.92d1f2c",
+    "@dxos/log": "0.3.10-main.92d1f2c",
+    "@dxos/automerge": "0.3.10-main.92d1f2c",
+    "@dxos/display-name": "0.3.10-main.92d1f2c",
+    "@dxos/protocols": "0.3.10-main.92d1f2c",
+    "@dxos/react-async": "0.3.10-main.92d1f2c",
+    "@dxos/react-ui-theme": "0.3.10-main.92d1f2c",
+    "@dxos/react-ui": "0.3.10-main.92d1f2c",
+    "@dxos/text-model": "0.3.10-main.92d1f2c",
+    "@dxos/util": "0.3.10-main.92d1f2c"
   },
   "devDependencies": {
     "@automerge/automerge-repo-network-broadcastchannel": "^1.0.19",
@@ -61,17 +61,17 @@
     "@types/react-dom": "^18.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/config": "0.3.10-main.90b298e",
-    "@dxos/react-client": "0.3.10-main.90b298e",
-    "@dxos/echo-typegen": "0.3.10-main.90b298e",
-    "@dxos/storybook-utils": "0.3.10-main.90b298e",
-    "@dxos/react-ui": "0.3.10-main.90b298e"
+    "@dxos/config": "0.3.10-main.92d1f2c",
+    "@dxos/echo-typegen": "0.3.10-main.92d1f2c",
+    "@dxos/react-ui": "0.3.10-main.92d1f2c",
+    "@dxos/react-client": "0.3.10-main.92d1f2c",
+    "@dxos/storybook-utils": "0.3.10-main.92d1f2c"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.3.10-main.90b298e"
+    "@dxos/react-client": "0.3.10-main.92d1f2c"
   },
   "publishConfig": {
     "access": "public"

package/src/components/TextEditor/MarkdownEditor.stories.tsx

@@ -3,9 +3,11 @@
 //
 
 import '@dxosTheme';
+
 import { EditorView } from '@codemirror/view';
 import { faker } from '@faker-js/faker';
 import { ArrowSquareOut } from '@phosphor-icons/react';
+import defaultsDeep from 'lodash.defaultsdeep';
 import React, { StrictMode, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
@@ -24,18 +26,19 @@ import {
   type TooltipOptions,
   type LinkOptions,
   comments,
+  table,
+  image,
+  mention,
+  blast,
+  demo,
+  defaultOptions,
 } from './extensions';
 import { useTextModel } from '../../hooks';
 
-// TODO(burdon): Read-only render mode (presentation).
-// TODO(burdon): Slides.
-// TODO(burdon): Autocomplete.
-// TODO(burdon): Block quote.
-// TODO(burdon): Images.
-// TODO(burdon): Tables.
-
 const str = (...lines: string[]) => lines.join('\n');
 
+const num = () => faker.number.int({ min: 0, max: 9999 }).toLocaleString();
+
 // prettier-ignore
 const text = {
   tasks: str(
@@ -77,6 +80,7 @@ const text = {
     '  const x = 100;',
     '  return () => <div>Test</div>;',
     '};',
+    '',
     '```'
   ),
 
@@ -89,11 +93,24 @@ const text = {
     '',
   ),
 
+  table: str(
+    '# Table',
+    '',
+    `| ${faker.lorem.word()} | ${faker.lorem.word()} | ${faker.lorem.word()} |`,
+    '|---|---|---|',
+    `| ${num()} | ${num()} | ${num()} |`,
+    `| ${num()} | ${num()} | ${num()} |`,
+    `| ${num()} | ${num()} | ${num()} |`,
+    '', // TODO(burdon): Possible GFM parsing bug if no newline?
+  ),
+
+  image: str('# Image', '', '![dxos](https://pbs.twimg.com/profile_banners/1268328127673044992/1684766689/1500x500)'),
+
   headings: str(
     ...[1, 2, 3, 4, 5, 6].map((level) => ['#'.repeat(level) + ` Heading ${level}`, faker.lorem.sentences(), '']).flat(),
   ),
 
-  paragraphs: str(...faker.helpers.multiple(() => [faker.lorem.paragraph(), ''], { count: 3 }).flat())
+  paragraphs: str(...faker.helpers.multiple(() => [faker.lorem.paragraph(), ''], { count: 3 }).flat()),
 };
 
 const document = str(
@@ -103,9 +120,7 @@ const document = str(
   '',
   'This is all about https://dxos.org and related technologies.',
   '',
-  'This this is **bold**, __underlined__, _italic_, and `f(INLINE)`.',
-  '',
-  '__NOTE__: Fenced code uses the base font.',
+  'This this is **bold**, ~~strikethrough~~, _italic_, and `f(INLINE)`.',
   '',
   '---',
   text.links,
@@ -119,6 +134,11 @@ const document = str(
   text.code,
   '---',
   text.headings,
+  '---',
+  text.table,
+  '---',
+  text.image,
+  '',
 );
 
 const links = [
@@ -158,7 +178,7 @@ const Story = ({
   text,
   automerge,
   ...props
-}: { text?: string; automerge?: boolean } & Pick<TextEditorProps, 'extensions' | 'slots'>) => {
+}: { text?: string; automerge?: boolean } & Pick<TextEditorProps, 'readonly' | 'extensions' | 'slots'>) => {
   const ref = useRef<TextEditorRef>(null);
   const [item] = useState({ text: new TextObject(text, undefined, undefined, { useAutomergeBackend: automerge }) });
   const model = useTextModel({ text: item.text });
@@ -185,20 +205,23 @@ export default {
   render: Story,
 };
 
+const extensions = [
+  link({ onRender }),
+  tooltip({ onHover }),
+  tasklist(),
+  table(),
+  image(),
+  autocomplete({
+    onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
+  }),
+];
+
 export const Default = {
-  render: () => (
-    <Story
-      text={document}
-      extensions={[
-        link({ onRender }),
-        tooltip({ onHover }),
-        tasklist(),
-        autocomplete({
-          onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
-        }),
-      ]}
-    />
-  ),
+  render: () => <Story text={document} extensions={extensions} />,
+};
+
+export const Readonly = {
+  render: () => <Story text={document} extensions={extensions} readonly />,
 };
 
 export const Simple = {
@@ -206,11 +229,19 @@ export const Simple = {
 };
 
 export const Tooltips = {
-  render: () => <Story text={text.links} extensions={[tooltip({ onHover })]} />,
+  render: () => <Story text={str(text.links, '')} extensions={[tooltip({ onHover })]} />,
 };
 
 export const Links = {
-  render: () => <Story text={text.links} extensions={[link({ onRender })]} />,
+  render: () => <Story text={str(text.links, '')} extensions={[link({ onRender })]} />,
+};
+
+export const Table = {
+  render: () => <Story text={str(text.table, '')} extensions={[table()]} />,
+};
+
+export const Image = {
+  render: () => <Story text={str(text.image, '', '')} readonly extensions={[image()]} />,
 };
 
 export const TaskList = {
@@ -243,6 +274,21 @@ export const Autocomplete = {
   ),
 };
 
+const names = ['adam', 'alice', 'alison', 'bob', 'carol', 'charlie', 'sayuri', 'shoko'];
+
+export const Mention = {
+  render: () => (
+    <Story
+      text={str('# Mention', '', '', '', '', '', '')}
+      extensions={[
+        mention({
+          onSearch: (text) => names.filter((name) => name.toLowerCase().startsWith(text.toLowerCase())),
+        }),
+      ]}
+    />
+  ),
+};
+
 const mark = () => `[^${PublicKey.random().toHex()}]`;
 export const Comments = {
   render: () => (
@@ -273,3 +319,32 @@ export const Diagnostics = {
     />
   ),
 };
+
+export const Demo = {
+  render: () => <Story text={text.paragraphs} extensions={[demo()]} />,
+};
+
+export const Blast = {
+  render: () => (
+    <Story
+      text={str(text.paragraphs, text.code, text.paragraphs)}
+      extensions={[
+        demo({
+          items: localStorage.getItem('dxos.composer.extension.demo')?.split(','),
+        }),
+        blast(
+          defaultsDeep(
+            {
+              effect: 2,
+              particleGravity: 0.2,
+              particleShrinkRate: 0.995,
+              color: () => [faker.number.int({ min: 100, max: 200 }), 0, 0],
+              // color: () => [faker.number.int(256), faker.number.int(256), faker.number.int(256)],
+            },
+            defaultOptions,
+          ),
+        ),
+      ]}
+    />
+  ),
+};

package/src/components/TextEditor/TextEditor.tsx

@@ -21,7 +21,7 @@ import { generateName } from '@dxos/display-name';
 import { useThemeContext } from '@dxos/react-ui';
 import { getColorForValue, inputSurface, mx } from '@dxos/react-ui-theme';
 
-import { basicBundle, demo, markdownBundle } from './extensions';
+import { basicBundle, markdownBundle } from './extensions';
 import { defaultTheme, markdownTheme, textTheme } from './themes';
 import { type EditorModel } from '../../hooks';
 import { type ThemeStyles } from '../../styles';
@@ -56,9 +56,10 @@ export type TextEditorSlots = {
 
 export type TextEditorProps = {
   model: EditorModel;
+  readonly?: boolean;
+  editorMode?: EditorMode;
   extensions?: Extension[];
   slots?: TextEditorSlots;
-  editorMode?: EditorMode;
 };
 
 /**
@@ -66,7 +67,7 @@ export type TextEditorProps = {
  * NOTE: Rather than adding properties, try to create extensions that can be reused.
  */
 export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ model, extensions = [], slots = defaultSlots, editorMode }, forwardedRef) => {
+  ({ model, readonly, editorMode, extensions = [], slots = defaultSlots }, forwardedRef) => {
     const { themeMode } = useThemeContext();
     const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
 
@@ -95,6 +96,8 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
       const state = EditorState.create({
         doc: model.text(),
         extensions: [
+          readonly && EditorState.readOnly.of(readonly),
+
           // TODO(burdon): Factor out VIM mode?
           editorMode === 'vim' && vim(),
 
@@ -124,7 +127,7 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
         setView(undefined);
         setState(undefined);
       };
-    }, [root, model, themeMode, editorMode]);
+    }, [root, model, themeMode, readonly, editorMode]);
 
     const handleKeyUp = useCallback(
       (event: KeyboardEvent) => {
@@ -157,25 +160,15 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
   },
 );
 
-// TODO(burdon): Allow plugins to set extensions (factory).
-const maybeDebug = (): Extension => {
-  // TODO(burdon): Parse JSON script format (with key bindings?)
-  const items = localStorage.getItem('dxos.composer.demo');
-  if (items) {
-    return demo({ items: items.split(',') });
-  }
-
-  return [];
-};
-
 export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ extensions = [], slots: _slots, ...props }, forwardedRef) => {
+  ({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
     const slots = defaultsDeep({}, _slots, defaultTextSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
-        extensions={[basicBundle({ themeMode, placeholder: slots?.editor?.placeholder }), maybeDebug(), ...extensions]}
+        readonly={readonly}
+        extensions={[basicBundle({ readonly, themeMode, placeholder: slots?.editor?.placeholder }), ...extensions]}
         slots={slots}
         {...props}
       />
@@ -184,17 +177,14 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
 );
 
 export const MarkdownEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ extensions = [], slots: _slots, ...props }, forwardedRef) => {
+  ({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
     const slots = defaultsDeep({}, _slots, defaultMarkdownSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
-        extensions={[
-          markdownBundle({ themeMode, placeholder: slots?.editor?.placeholder }),
-          maybeDebug(),
-          ...extensions,
-        ]}
+        readonly={readonly}
+        extensions={[markdownBundle({ readonly, themeMode, placeholder: slots?.editor?.placeholder }), ...extensions]}
         slots={slots}
         {...props}
       />

package/src/components/TextEditor/extensions/autocomplete.ts

@@ -2,23 +2,15 @@
 // Copyright 2023 DXOS.org
 //
 
-// TODO(burdon): Automcomplete: https://codemirror.net/5/doc/manual.html#addon_runmode
-// TODO(burdon): Modes: parallel parsing and decoration (e.g., associated with language).
-// TODO(burdon): Add-on: runmode: run lexer over content (with rendering codemirror).
-//  https://codemirror.net/5/doc/manual.html#addon_runmode
-// TODO(burdon): Add-on: dialog.
-// TODO(burdon): Comments: https://codemirror.net/5/doc/manual.html#setBookmark
-// TODO(burdon): Split view: https://codemirror.net/examples/split
-
 // https://codemirror.net/examples/autocompletion
 // https://codemirror.net/docs/ref/#autocomplete.autocompletion
 // https://codemirror.net/docs/ref/#autocomplete.Completion
 
 import {
   autocompletion,
+  completionKeymap,
   type Completion,
   type CompletionContext,
-  completionKeymap,
   type CompletionResult,
 } from '@codemirror/autocomplete';
 import { keymap } from '@codemirror/view';
@@ -51,21 +43,14 @@ export const autocomplete = ({ onSearch }: AutocompleteOptions) => {
       // TODO(burdon): Optional decoration via addToOptions
       override: [
         (context: CompletionContext): CompletionResult | null => {
-          const word = context.matchBefore(/\w*/);
-          if (!word || (word.from === word.to && !context.explicit)) {
+          const match = context.matchBefore(/\w*/);
+          if (!match || (match.from === match.to && !context.explicit)) {
             return null;
           }
 
-          // TODO(burdon): Option to convert to links?
           return {
-            from: word.from,
-            options: onSearch(word.text.toLowerCase()),
-            // options: [
-            //   { label: 'apple', type: 'keyword' },
-            //   { label: 'amazon', type: 'keyword' },
-            //   { label: 'hello', type: 'variable', info: '(World)' },
-            //   { label: 'magic', type: 'text', apply: '⠁⭒*.✩.*⭒⠁', detail: 'macro' },
-            // ],
+            from: match.from,
+            options: onSearch(match.text.toLowerCase()),
           };
         },
       ],

package/src/components/TextEditor/extensions/basic.ts

@@ -11,11 +11,12 @@ import { EditorView, placeholder } from '@codemirror/view';
 import type { ThemeMode } from '@dxos/react-ui';
 
 export type BasicBundleOptions = {
+  readonly?: boolean;
   themeMode?: ThemeMode;
   placeholder?: string;
 };
 
-export const basicBundle = ({ themeMode, placeholder: _placeholder }: BasicBundleOptions): Extension[] =>
+export const basicBundle = ({ readonly, themeMode, placeholder: _placeholder }: BasicBundleOptions): Extension[] =>
   [
     // TODO(burdon): Compare with minimalSetup.
     // https://codemirror.net/docs/ref/#codemirror.minimalSetup