@dxos/react-ui-editor 0.3.10-main.cbe7692 → 0.3.10-main.dcfebef

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

@@ -3,11 +3,9 @@
 //
 
 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';
 
@@ -26,18 +24,17 @@ import {
   type TooltipOptions,
   type LinkOptions,
   comments,
-  table,
-  image,
-  mention,
-  blast,
-  demo,
-  defaultOptions,
 } from './extensions';
 import { useTextModel } from '../../hooks';
 
-const str = (...lines: string[]) => lines.join('\n');
+// TODO(burdon): Read-only render mode (presentation).
+// TODO(burdon): Slides.
+// TODO(burdon): Autocomplete.
+// TODO(burdon): Block quote.
+// TODO(burdon): Images.
+// TODO(burdon): Tables.
 
-const num = () => faker.number.int({ min: 0, max: 9999 }).toLocaleString();
+const str = (...lines: string[]) => lines.join('\n');
 
 // prettier-ignore
 const text = {
@@ -80,7 +77,6 @@ const text = {
     '  const x = 100;',
     '  return () => <div>Test</div>;',
     '};',
-    '',
     '```'
   ),
 
@@ -97,20 +93,7 @@ const text = {
     ...[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()),
-
-  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)'),
+  paragraphs: str(...faker.helpers.multiple(() => [faker.lorem.paragraph(), ''], { count: 3 }).flat())
 };
 
 const document = str(
@@ -120,7 +103,9 @@ const document = str(
   '',
   'This is all about https://dxos.org and related technologies.',
   '',
-  'This this is **bold**, ~~strikethrough~~, _italic_, and `f(INLINE)`.',
+  'This this is **bold**, __underlined__, _italic_, and `f(INLINE)`.',
+  '',
+  '__NOTE__: Fenced code uses the base font.',
   '',
   '---',
   text.links,
@@ -134,10 +119,6 @@ const document = str(
   text.code,
   '---',
   text.headings,
-  '---',
-  text.table,
-  '---',
-  text.image,
 );
 
 const links = [
@@ -177,7 +158,7 @@ const Story = ({
   text,
   automerge,
   ...props
-}: { text?: string; automerge?: boolean } & Pick<TextEditorProps, 'readonly' | 'extensions' | 'slots'>) => {
+}: { text?: string; automerge?: boolean } & Pick<TextEditorProps, 'extensions' | 'slots'>) => {
   const ref = useRef<TextEditorRef>(null);
   const [item] = useState({ text: new TextObject(text, undefined, undefined, { useAutomergeBackend: automerge }) });
   const model = useTextModel({ text: item.text });
@@ -204,23 +185,20 @@ 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={extensions} />,
-};
-
-export const Readonly = {
-  render: () => <Story text={document} extensions={extensions} readonly />,
+  render: () => (
+    <Story
+      text={document}
+      extensions={[
+        link({ onRender }),
+        tooltip({ onHover }),
+        tasklist(),
+        autocomplete({
+          onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
+        }),
+      ]}
+    />
+  ),
 };
 
 export const Simple = {
@@ -235,16 +213,6 @@ export const Links = {
   render: () => <Story text={text.links} extensions={[link({ onRender })]} />,
 };
 
-export const Table = {
-  render: () => (
-    <Story text={str('This is a table', '', text.table, '', text.table, '', '')} readonly extensions={[table()]} />
-  ),
-};
-
-export const Image = {
-  render: () => <Story text={str('This is an image', '', text.image, '', '')} readonly extensions={[image()]} />,
-};
-
 export const TaskList = {
   render: () => (
     <Story
@@ -275,21 +243,6 @@ 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: () => (
@@ -320,29 +273,3 @@ 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={[
-        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

@@ -56,10 +56,9 @@ export type TextEditorSlots = {
 
 export type TextEditorProps = {
   model: EditorModel;
-  readonly?: boolean;
-  editorMode?: EditorMode;
   extensions?: Extension[];
   slots?: TextEditorSlots;
+  editorMode?: EditorMode;
 };
 
 /**
@@ -67,7 +66,7 @@ export type TextEditorProps = {
  * NOTE: Rather than adding properties, try to create extensions that can be reused.
  */
 export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ model, readonly, editorMode, extensions = [], slots = defaultSlots }, forwardedRef) => {
+  ({ model, extensions = [], slots = defaultSlots, editorMode }, forwardedRef) => {
     const { themeMode } = useThemeContext();
     const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
 
@@ -96,8 +95,6 @@ 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(),
 
@@ -127,7 +124,7 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
         setView(undefined);
         setState(undefined);
       };
-    }, [root, model, themeMode, readonly, editorMode]);
+    }, [root, model, themeMode, editorMode]);
 
     const handleKeyUp = useCallback(
       (event: KeyboardEvent) => {
@@ -172,18 +169,13 @@ const maybeDebug = (): Extension => {
 };
 
 export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
+  ({ extensions = [], slots: _slots, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
     const slots = defaultsDeep({}, _slots, defaultTextSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
-        readonly={readonly}
-        extensions={[
-          basicBundle({ readonly, themeMode, placeholder: slots?.editor?.placeholder }),
-          maybeDebug(),
-          ...extensions,
-        ]}
+        extensions={[basicBundle({ themeMode, placeholder: slots?.editor?.placeholder }), maybeDebug(), ...extensions]}
         slots={slots}
         {...props}
       />
@@ -192,15 +184,14 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
 );
 
 export const MarkdownEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
+  ({ extensions = [], slots: _slots, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
     const slots = defaultsDeep({}, _slots, defaultMarkdownSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
-        readonly={readonly}
         extensions={[
-          markdownBundle({ readonly, themeMode, placeholder: slots?.editor?.placeholder }),
+          markdownBundle({ themeMode, placeholder: slots?.editor?.placeholder }),
           maybeDebug(),
           ...extensions,
         ]}

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

@@ -2,15 +2,23 @@
 // 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';
@@ -43,14 +51,21 @@ export const autocomplete = ({ onSearch }: AutocompleteOptions) => {
       // TODO(burdon): Optional decoration via addToOptions
       override: [
         (context: CompletionContext): CompletionResult | null => {
-          const match = context.matchBefore(/\w*/);
-          if (!match || (match.from === match.to && !context.explicit)) {
+          const word = context.matchBefore(/\w*/);
+          if (!word || (word.from === word.to && !context.explicit)) {
             return null;
           }
 
+          // TODO(burdon): Option to convert to links?
           return {
-            from: match.from,
-            options: onSearch(match.text.toLowerCase()),
+            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' },
+            // ],
           };
         },
       ],

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

@@ -11,12 +11,11 @@ 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 = ({ readonly, themeMode, placeholder: _placeholder }: BasicBundleOptions): Extension[] =>
+export const basicBundle = ({ themeMode, placeholder: _placeholder }: BasicBundleOptions): Extension[] =>
   [
     // TODO(burdon): Compare with minimalSetup.
     // https://codemirror.net/docs/ref/#codemirror.minimalSetup

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

@@ -2,11 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Extension } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
 
-// TODO(burdon): Review https://github.com/sergeche/codemirror-movie?tab=readme-ov-file
-
 export type DemoOptions = {
   delay?: number;
   items?: string[];
@@ -18,7 +15,7 @@ const defaultItems = ['hello world!', 'this is a test.', 'this is [DXOS](https:/
  * Demo script.
  * Configurable plugin that let's user cycle through pre-configured input script.
  */
-export const demo = ({ delay = 75, items = defaultItems }: DemoOptions = {}): Extension => {
+export const demo = ({ delay = 75, items = defaultItems }: DemoOptions = {}) => {
   let t: any;
   let idx = 0;
 

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

@@ -4,14 +4,10 @@
 
 export * from './autocomplete';
 export * from './basic';
-export * from './blast';
 export * from './demo';
 export * from './comments';
-export * from './image';
 export * from './link';
 export * from './listener';
 export * from './markdown';
-export * from './mention';
-export * from './table';
 export * from './tasklist';
 export * from './tooltip';

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

@@ -18,22 +18,13 @@ import { Decoration, EditorView, WidgetType } from '@codemirror/view';
 // https://codemirror.net/try/?c=aW1wb3J0IHsgYmFzaWNTZXR1cCwgRWRpdG9yVmlldyB9IGZyb20gImNvZGVtaXJyb3IiCmltcG9ydCB7IG1hcmtkb3duIH0gZnJvbSAiQGNvZGVtaXJyb3IvbGFuZy1tYXJrZG93biIKaW1wb3J0IHsgc3ludGF4VHJlZSB9IGZyb20gIkBjb2RlbWlycm9yL2xhbmd1YWdlIjsKaW1wb3J0IHsgRWRpdG9yU3RhdGUsIFJhbmdlU2V0QnVpbGRlciwgU3RhdGVGaWVsZCB9IGZyb20gIkBjb2RlbWlycm9yL3N0YXRlIjsKaW1wb3J0IHsgRGVjb3JhdGlvbiwgV2lkZ2V0VHlwZSB9IGZyb20gIkBjb2RlbWlycm9yL3ZpZXciOwoKY2xhc3MgTGluayBleHRlbmRzIFdpZGdldFR5cGUgewogIGNvbnN0cnVjdG9yKHRleHQsIHVybCkgewogICAgc3VwZXIoKQogICAgdGhpcy50ZXh0ID0gdGV4dAogICAgdGhpcy51cmwgPSB1cmwKICB9CiAgZXEob3RoZXIpIHsgcmV0dXJuIHRoaXMudGV4dCA9PSBvdGhlci50ZXh0ICYmIHRoaXMudXJsID09IG90aGVyLnVybCB9CiAgdG9ET00oKSB7CiAgICBsZXQgbGluayA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoImEiKQogICAgbGluay50ZXh0Q29udGVudCA9IHRoaXMudGV4dAogICAgbGluay5ocmVmID0gdGhpcy51cmwKICAgIHJldHVybiBsaW5rOwogIH0KfQoKbGV0IGRlY29yYXRpb25zRmllbGQgPSBTdGF0ZUZpZWxkLmRlZmluZSh7CiAgY3JlYXRlKCkgewogICAgcmV0dXJuIERlY29yYXRpb24ubm9uZTsKICB9LAogIHVwZGF0ZShfLCB0cikgewogICAgY29uc3QgYnVpbGRlciA9IG5ldyBSYW5nZVNldEJ1aWxkZXIoKTsKICAgIGxldCBjdXJzb3IgPSB0ci5zdGF0ZS5zZWxlY3Rpb24ubWFpbi5oZWFkOwogICAgc3ludGF4VHJlZSh0ci5zdGF0ZSkuaXRlcmF0ZSh7CiAgICAgIGVudGVyOiAobm9kZSkgPT4gewogICAgICAgIGlmICgoY3Vyc29yIDwgbm9kZS5mcm9tIHx8IGN1cnNvciA+IG5vZGUudG8pICYmIG5vZGUubmFtZSA9PSAiTGluayIpIHsKICAgICAgICAgIGxldCBtYXJrcyA9IG5vZGUubm9kZS5nZXRDaGlsZHJlbigiTGlua01hcmsiKTsKICAgICAgICAgIGxldCB0ZXh0ID0gbWFya3MubGVuZ3RoID49IDIgPyB0ci5zdGF0ZS5zbGljZURvYyhtYXJrc1swXS50bywgbWFya3NbMV0uZnJvbSkgOiAiIgoKICAgICAgICAgIGxldCB1cmxOb2RlID0gbm9kZS5ub2RlLmdldENoaWxkKCJVUkwiKTsKICAgICAgICAgIGxldCB1cmwgPSB1cmxOb2RlID8gdHIuc3RhdGUuc2xpY2VEb2ModXJsTm9kZS5mcm9tLCB1cmxOb2RlLnRvKSA6ICIiCiAgICAgICAgICBidWlsZGVyLmFkZChub2RlLmZyb20sIG5vZGUudG8sIERlY29yYXRpb24ucmVwbGFjZSh7CiAgICAgICAgICAgIHdpZGdldDogbmV3IExpbmsodGV4dCwgdXJsKSwKICAgICAgICAgIH0pLAogICAgICAgICAgICAgICAgICAgICApOwogICAgICAgICAgcmV0dXJuIGZhbHNlOwogICAgICAgIH0KICAgICAgICByZXR1cm4gdHJ1ZTsKICAgICAgfSwKICAgIH0pOwogICAgcmV0dXJuIGJ1aWxkZXIuZmluaXNoKCk7CiAgfSwKICBwcm92aWRlOiAoZikgPT4gRWRpdG9yVmlldy5kZWNvcmF0aW9ucy5mcm9tKGYpLAp9KTsKCmxldCB2aWV3ID0gbmV3IEVkaXRvclZpZXcoewogIGRvYzogIiMgSGVsbG8gV29ybGRcblxuW1Rlc3RdKGh0dHBzOi8vZXhhbXBsZS5jb20pXG5cblxuIiwKICBleHRlbnNpb25zOiBbZGVjb3JhdGlvbnNGaWVsZCwgbWFya2Rvd24oKV0sCiAgcGFyZW50OiBkb2N1bWVudC5ib2R5LAp9KTsKCnZpZXcuZm9jdXMoKTs=
 // https://discuss.codemirror.net/t/link-widget-is-clicked-only-if-editor-is-out-of-focus/7433
 
-export type LinkOptions = {
-  link?: boolean;
-  onRender?: (el: Element, url: string) => void;
-};
+// TODO(burdon): Adapt to make all markdown editable?
 
-/**
- * Creates a state field to replace AST elements with a hyperlink widget.
- * https://codemirror.net/docs/ref/#state.StateField
- */
-export const link = (options: LinkOptions = {}): Extension => {
-  return StateField.define<RangeSet<any>>({
-    create: (state) => update(state, options),
-    update: (_: RangeSet<any>, tr: Transaction) => update(tr.state, options),
-    provide: (field) => EditorView.decorations.from(field),
-  });
-};
+// TODO(burdon): Research overlays.
+//  https://stackoverflow.com/questions/26933344/codemirror-detect-and-create-links-inside-editor
+//  https://codemirror.net/5/doc/manual.html#addOverlay
+//  https://codemirror.net/5/demo/simplemode.html
+//  https://codemirror.net/5/demo/search.html (Search dialog).
 
 class LinkButton extends WidgetType {
   constructor(
@@ -134,3 +125,20 @@ const update = (state: EditorState, options: LinkOptions) => {
 
   return builder.finish();
 };
+
+export type LinkOptions = {
+  link?: boolean;
+  onRender?: (el: Element, url: string) => void;
+};
+
+/**
+ * Creates a state field to replace AST elements with a hyperlink widget.
+ * https://codemirror.net/docs/ref/#state.StateField
+ */
+export const link = (options: LinkOptions = {}): Extension => {
+  return StateField.define<RangeSet<any>>({
+    create: (state) => update(state, options),
+    update: (_: RangeSet<any>, tr: Transaction) => update(tr.state, options),
+    provide: (field) => EditorView.decorations.from(field),
+  });
+};

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

@@ -9,8 +9,9 @@ export type ListenerOptions = { onChange: (text: string) => void };
 /**
  * Based on https://github.com/codemirror/dev/issues/44#issuecomment-789093799
  */
-export const listener = ({ onChange }: ListenerOptions) => {
-  return StateField.define({
+// TODO(burdon): Expose options.
+export const listener = ({ onChange }: ListenerOptions) =>
+  StateField.define({
     create: () => null,
     update: (_value, transaction) => {
       if (transaction.docChanged && onChange) {
@@ -20,4 +21,3 @@ export const listener = ({ onChange }: ListenerOptions) => {
       return null;
     },
   });
-};

package/src/components/TextEditor/extensions/markdown/bundle.ts

@@ -28,16 +28,11 @@ import type { ThemeMode } from '@dxos/react-ui';
 import { markdownHighlightStyle, markdownTagsExtension } from './highlight';
 
 export type MarkdownBundleOptions = {
-  readonly?: boolean;
   themeMode?: ThemeMode;
   placeholder?: string;
 };
 
-export const markdownBundle = ({
-  readonly,
-  themeMode,
-  placeholder: _placeholder,
-}: MarkdownBundleOptions): Extension[] => {
+export const markdownBundle = ({ themeMode, placeholder: _placeholder }: MarkdownBundleOptions): Extension[] => {
   // All of https://github.com/codemirror/basic-setup minus line numbers and fold gutter.
   // https://codemirror.net/docs/ref/#codemirror.basicSetup
   return [
@@ -94,10 +89,10 @@ export const markdownBundle = ({
       ],
     }),
 
-    // https://github.com/codemirror/theme-one-dark
-    themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
-
     // Custom styles.
-    syntaxHighlighting(markdownHighlightStyle(readonly)),
+    syntaxHighlighting(markdownHighlightStyle),
+
+    // TODO(thure): All but one rule here apply to both themes; rename or refactor.
+    themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
   ].filter(Boolean) as Extension[];
 };