@dxos/react-ui-editor 0.4.8-main.05fda5d → 0.4.8-main.06fa7e4

package/src/extensions/factories.ts

@@ -0,0 +1,193 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
+import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap } from '@codemirror/commands';
+import { bracketMatching } from '@codemirror/language';
+import { searchKeymap } from '@codemirror/search';
+import { EditorState, type Extension } from '@codemirror/state';
+import {
+  EditorView,
+  type KeyBinding,
+  drawSelection,
+  dropCursor,
+  highlightActiveLine,
+  keymap,
+  lineNumbers,
+  placeholder,
+  scrollPastEnd,
+} from '@codemirror/view';
+import defaultsDeep from 'lodash.defaultsdeep';
+
+import { generateName } from '@dxos/display-name';
+import { type DocAccessor } from '@dxos/echo-schema';
+import { log } from '@dxos/log';
+import { type Space } from '@dxos/react-client/echo';
+import { type Identity } from '@dxos/react-client/halo';
+import { type ThemeMode } from '@dxos/react-ui';
+import { type HuePalette, hueTokens } from '@dxos/react-ui-theme';
+import { hexToHue, isNotFalsy } from '@dxos/util';
+
+import { automerge } from './automerge';
+import { awareness, SpaceAwarenessProvider } from './awareness';
+import { type ThemeStyles } from '../styles';
+import { defaultTheme } from '../themes';
+
+//
+// Basic
+//
+
+/**
+ * https://codemirror.net/docs/extensions
+ * https://github.com/codemirror/basic-setup
+ * https://github.com/codemirror/basic-setup/blob/main/src/codemirror.ts
+ */
+export type BasicExtensionsOptions = {
+  allowMultipleSelections?: boolean;
+  bracketMatching?: boolean;
+  closeBrackets?: boolean;
+  dropCursor?: boolean;
+  drawSelection?: boolean;
+  editable?: boolean;
+  highlightActiveLine?: boolean;
+  history?: boolean;
+  indentWithTab?: boolean;
+  keymap?: null | 'default' | 'standard';
+  lineNumbers?: boolean;
+  lineWrapping?: boolean;
+  placeholder?: string;
+  readonly?: boolean;
+  search?: boolean;
+  scrollPastEnd?: boolean;
+  standardKeymap?: boolean;
+  tabSize?: number;
+};
+
+const defaultBasicOptions: BasicExtensionsOptions = {
+  allowMultipleSelections: true,
+  bracketMatching: true,
+  closeBrackets: true,
+  drawSelection: true,
+  editable: true,
+  history: true,
+  keymap: 'standard',
+  lineWrapping: true,
+  search: true,
+};
+
+const keymaps: { [key: string]: readonly KeyBinding[] } = {
+  // https://codemirror.net/docs/ref/#commands.standardKeymap
+  standard: standardKeymap,
+  // https://codemirror.net/docs/ref/#commands.defaultKeymap
+  default: defaultKeymap,
+};
+
+export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extension => {
+  const props: BasicExtensionsOptions = defaultsDeep({}, _props, defaultBasicOptions);
+  return [
+    // NOTE: Doesn't catch errors in keymap functions.
+    EditorView.exceptionSink.of((err) => {
+      log.catch(err);
+    }),
+
+    props.allowMultipleSelections && EditorState.allowMultipleSelections.of(true),
+    props.bracketMatching && bracketMatching(),
+    props.closeBrackets && closeBrackets(),
+    props.dropCursor && dropCursor(),
+    props.drawSelection && drawSelection(),
+    props.highlightActiveLine && highlightActiveLine(),
+    props.history && history(),
+    props.lineNumbers && lineNumbers(),
+    props.lineWrapping && EditorView.lineWrapping,
+    props.placeholder && placeholder(props.placeholder),
+    props.readonly && [EditorState.readOnly.of(true), EditorView.editable.of(false)],
+    props.scrollPastEnd && scrollPastEnd(),
+    props.tabSize && EditorState.tabSize.of(props.tabSize),
+
+    // https://codemirror.net/docs/ref/#view.KeyBinding
+    keymap.of(
+      [
+        ...((props.keymap && keymaps[props.keymap]) ?? []),
+        // https://codemirror.net/docs/ref/#commands.indentWithTab
+        ...(props.indentWithTab ? [indentWithTab] : []),
+        // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
+        ...(props.closeBrackets ? closeBracketsKeymap : []),
+        // https://codemirror.net/docs/ref/#commands.historyKeymap
+        ...(props.history ? historyKeymap : []),
+        // https://codemirror.net/docs/ref/#search.searchKeymap
+        ...(props.search ? searchKeymap : []),
+      ].filter(isNotFalsy),
+    ),
+  ].filter(isNotFalsy);
+};
+
+//
+// Theme
+//
+
+export type ThemeExtensionsOptions = {
+  theme?: ThemeStyles;
+  themeMode?: ThemeMode;
+  slots?: {
+    editor?: {
+      className?: string;
+    };
+    content?: {
+      className?: string;
+    };
+  };
+};
+
+const defaultThemeSlots = {
+  editor: {
+    className: 'w-full bs-full',
+  },
+};
+
+export const createThemeExtensions = ({ theme, themeMode, slots: _slots }: ThemeExtensionsOptions = {}): Extension => {
+  const slots = defaultsDeep({}, _slots, defaultThemeSlots);
+  return [
+    EditorView.baseTheme(defaultTheme),
+    EditorView.darkTheme.of(themeMode === 'dark'),
+    theme && EditorView.theme(theme),
+    slots.editor?.className && EditorView.editorAttributes.of({ class: slots.editor.className }),
+    slots.content?.className && EditorView.contentAttributes.of({ class: slots.content.className }),
+  ].filter(isNotFalsy);
+};
+
+//
+// Data
+//
+
+export type DataExtensionsProps = {
+  id: string;
+  text: DocAccessor;
+  space?: Space;
+  identity?: Identity | null;
+};
+
+// TODO(burdon): Move out of react-ui-editor (remove echo deps).
+export const createDataExtensions = ({ id, text, space, identity }: DataExtensionsProps): Extension[] => {
+  const extensions: Extension[] = [automerge(text)];
+
+  if (space && identity) {
+    const peerId = identity?.identityKey.toHex();
+    const { cursorLightValue, cursorDarkValue } =
+      hueTokens[(identity?.profile?.data?.hue as HuePalette | undefined) ?? hexToHue(peerId ?? '0')];
+    const awarenessProvider = new SpaceAwarenessProvider({
+      space,
+      channel: `awareness.${id}`,
+      peerId: identity.identityKey.toHex(),
+      info: {
+        displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
+        color: cursorDarkValue,
+        lightColor: cursorLightValue,
+      },
+    });
+
+    extensions.push(awareness(awarenessProvider));
+  }
+
+  return extensions;
+};

package/src/extensions/index.ts

@@ -10,11 +10,13 @@ export * from './blast';
 export * from './command';
 export * from './comments';
 export * from './cursor';
-export * from './cursor-line-margin';
+export * from './doc';
 export * from './dnd';
+export * from './factories';
 export * from './listener';
 export * from './markdown';
 export * from './mention';
 export * from './modes';
-export * from './outliner';
+export * from './state';
+export * from './types';
 export * from './typewriter';

package/src/extensions/markdown/action.ts

@@ -0,0 +1,112 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+
+import {
+  Inline,
+  List,
+  addBlockquote,
+  addCodeblock,
+  addLink,
+  addList,
+  insertTable,
+  removeBlockquote,
+  removeCodeblock,
+  removeLink,
+  removeList,
+  setHeading,
+  setStyle,
+  toggleBlockquote,
+  toggleList,
+  toggleStyle,
+} from './formatting';
+import { createComment } from '../comments';
+
+export type ActionType =
+  | 'blockquote'
+  | 'strong'
+  | 'codeblock'
+  | 'comment'
+  | 'heading'
+  | 'image'
+  | 'emphasis'
+  | 'code'
+  | 'link'
+  | 'list-bullet'
+  | 'list-ordered'
+  | 'list-task'
+  | 'mention'
+  | 'prompt'
+  | 'strikethrough'
+  | 'table';
+
+export type Action = {
+  type: ActionType;
+  data?: any;
+};
+
+export type ActionHandler = (view: EditorView, action: Action) => void;
+
+export const processAction: ActionHandler = (view, action) => {
+  let inlineType, listType;
+  switch (action.type) {
+    case 'heading':
+      setHeading(parseInt(action.data))(view);
+      break;
+
+    case 'strong':
+    case 'emphasis':
+    case 'strikethrough':
+    case 'code':
+      inlineType =
+        action.type === 'strong'
+          ? Inline.Strong
+          : action.type === 'emphasis'
+            ? Inline.Emphasis
+            : action.type === 'strikethrough'
+              ? Inline.Strikethrough
+              : Inline.Code;
+      (typeof action.data === 'boolean' ? setStyle(inlineType, action.data) : toggleStyle(inlineType))(view);
+      break;
+
+    case 'list-ordered':
+    case 'list-bullet':
+    case 'list-task':
+      listType =
+        action.type === 'list-ordered' ? List.Ordered : action.type === 'list-bullet' ? List.Bullet : List.Task;
+      (action.data === false ? removeList(listType) : action.data === true ? addList(listType) : toggleList(listType))(
+        view,
+      );
+      break;
+
+    case 'blockquote':
+      (action.data === false ? removeBlockquote : action.data === true ? addBlockquote : toggleBlockquote)(view);
+      break;
+    case 'codeblock':
+      (action.data === false ? removeCodeblock : addCodeblock)(view);
+      break;
+    case 'table':
+      insertTable(view);
+      break;
+
+    case 'link':
+      (action.data === false ? removeLink : addLink())(view);
+      break;
+
+    case 'image':
+      addLink({ url: action.data, image: true })(view);
+      break;
+
+    case 'comment':
+      createComment(view);
+      break;
+  }
+
+  requestAnimationFrame(() => {
+    if (!view.hasFocus) {
+      view.focus();
+    }
+  });
+};

package/src/extensions/markdown/bundle.ts

@@ -2,51 +2,34 @@
 // Copyright 2023 DXOS.org
 //
 
-import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
-import { history, historyKeymap, indentWithTab, standardKeymap } from '@codemirror/commands';
+import { completionKeymap } from '@codemirror/autocomplete';
+import { defaultKeymap, indentWithTab } from '@codemirror/commands';
 import { markdownLanguage, markdown } from '@codemirror/lang-markdown';
-import { bracketMatching, defaultHighlightStyle, indentOnInput, syntaxHighlighting } from '@codemirror/language';
+import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
-import { searchKeymap } from '@codemirror/search';
-import { EditorState, type Extension } from '@codemirror/state';
+import { lintKeymap } from '@codemirror/lint';
+import { type Extension } from '@codemirror/state';
 import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
-import { EditorView, drawSelection, dropCursor, keymap, placeholder } from '@codemirror/view';
+import { keymap } from '@codemirror/view';
 
 import { type ThemeMode } from '@dxos/react-ui';
-import { isNotFalsy } from '@dxos/util';
 
 import { markdownHighlightStyle, markdownTagsExtensions } from './highlight';
-import { type TextEditorProps } from '../../components';
 
 export type MarkdownBundleOptions = {
   themeMode?: ThemeMode;
-} & Pick<TextEditorProps, 'lineWrapping' | 'placeholder'>;
+};
 
 /**
- * Markdown bundle.
+ * Creates markdown extensions.
+ * To be used in conjunction with createBasicExtensions.
+ *
  * Refs:
  * https://codemirror.net/docs/community
  * https://codemirror.net/docs/ref/#codemirror.basicSetup
  */
-export const createMarkdownExtensions = ({
-  themeMode,
-  placeholder: _placeholder,
-  lineWrapping = true,
-}: MarkdownBundleOptions = {}): Extension[] => {
+export const createMarkdownExtensions = ({ themeMode }: MarkdownBundleOptions = {}): Extension[] => {
   return [
-    // TODO(burdon): Reconcile with createBasicExtensions.
-    lineWrapping && EditorView.lineWrapping,
-    EditorState.allowMultipleSelections.of(true),
-    EditorState.tabSize.of(2),
-
-    bracketMatching(),
-    closeBrackets(),
-    dropCursor(),
-    drawSelection(),
-    history(),
-    indentOnInput(),
-    _placeholder && placeholder(_placeholder),
-
     // Main extension.
     // https://github.com/codemirror/lang-markdown
     // https://codemirror.net/5/mode/markdown/index.html (demo).
@@ -77,14 +60,11 @@ export const createMarkdownExtensions = ({
     keymap.of([
       // https://codemirror.net/docs/ref/#commands.indentWithTab
       indentWithTab,
-      // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
-      ...closeBracketsKeymap,
-      // https://codemirror.net/docs/ref/#commands.historyKeymap
-      ...historyKeymap,
-      // https://codemirror.net/docs/ref/#search.searchKeymap
-      ...searchKeymap,
-      // https://codemirror.net/docs/ref/#commands.standardKeymap
-      ...standardKeymap,
+
+      // https://codemirror.net/docs/ref/#commands.defaultKeymap
+      ...defaultKeymap,
+      ...completionKeymap,
+      ...lintKeymap,
     ]),
-  ].filter(isNotFalsy);
+  ];
 };

package/src/extensions/markdown/decorate.ts

@@ -48,7 +48,7 @@ class CheckboxWidget extends WidgetType {
 
   override toDOM(view: EditorView) {
     const input = document.createElement('input');
-    input.className = 'cm-task-checkbox';
+    input.className = 'cm-task-checkbox ch-checkbox ch-focus-ring -mbs-0.5';
     input.type = 'checkbox';
     input.checked = this._checked;
     if (view.state.readOnly) {
@@ -148,9 +148,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
                 marks[1].from,
                 node.to,
                 options.renderLinkButton
-                  ? Decoration.replace({
-                      widget: new LinkButton(url, options.renderLinkButton),
-                    })
+                  ? Decoration.replace({ widget: new LinkButton(url, options.renderLinkButton) })
                   : hide,
               );
             }

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

@@ -9,20 +9,20 @@ import { expect } from 'chai';
 import { describe, test } from '@dxos/test';
 
 import {
-  setHeading,
+  addBlockquote,
+  addCodeblock,
+  addLink,
+  addList,
   addStyle,
+  getFormatting,
   removeStyle,
-  addLink,
   removeLink,
-  addList,
   removeList,
-  addBlockquote,
   removeBlockquote,
-  addCodeblock,
   removeCodeblock,
+  setHeading,
   Inline,
   List,
-  getFormatting,
   type Formatting,
 } from './formatting';
 
@@ -204,22 +204,22 @@ describe('removeStyle', () => {
 });
 
 describe('addLink', () => {
-  testCommand('adds a link', '{}', addLink, '[]({})');
+  testCommand('adds a link', '{}', addLink(), '[]({})');
 
-  testCommand('adds a link around text', 'hello {world}', addLink, 'hello [world]({})');
+  testCommand('adds a link around text', 'hello {world}', addLink(), 'hello [world]({})');
 
-  testCommand('clears existing links', '[hello {world}](foo)', addLink, 'hello [world]({})');
+  testCommand('clears existing links', '[hello {world}](foo)', addLink(), 'hello [world]({})');
 
-  testCommand('does nothing across blocks', '{one\n\ntwo}', addLink, null);
+  testCommand('does nothing across blocks', '{one\n\ntwo}', addLink(), null);
 
-  testCommand('does nothing in code blocks', '```\n{one}\n```', addLink, null);
+  testCommand('does nothing in code blocks', '```\n{one}\n```', addLink(), null);
 
-  testCommand('patches up overlapping styles before', '*foo {bar* baz}', addLink, '*foo* [*bar* baz]({})');
+  testCommand('patches up overlapping styles before', '*foo {bar* baz}', addLink(), '*foo* [*bar* baz]({})');
 
   testCommand(
     'patches up overlapping styles after',
     'one {two ~~three} four~~',
-    addLink,
+    addLink(),
     'one [two ~~three~~]({}) ~~four~~',
   );
 });