@dxos/react-ui-editor 0.4.7-main.85d9ee7 → 0.4.7-main.aa6dc1f

package/src/extensions/markdown/decorate.ts

@@ -114,7 +114,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
               break;
             }
             const first = block.from <= node.from;
-            const last = block.to >= node.to;
+            const last = block.to >= node.to && /^(\s>)*```$/.test(state.doc.sliceString(block.from, block.to));
             deco.add(block.from, block.from, first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine);
             if (!editing && (first || last)) {
               atomicDeco.add(block.from, block.to, hide);
@@ -186,6 +186,9 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
 
 export interface DecorateOptions {
   renderLinkButton?: (el: Element, url: string) => void;
+  /**
+   * Prevents triggering decorations as the cursor moves through the document.
+   */
   selectionChangeDelay?: number;
 }
 
@@ -195,9 +198,9 @@ export const decorateMarkdown = (options: DecorateOptions = {}) => {
   return [
     ViewPlugin.fromClass(
       class {
-        pendingUpdate = -1;
         deco: DecorationSet;
         atomicDeco: DecorationSet;
+        pendingUpdate?: NodeJS.Timeout;
 
         constructor(view: EditorView) {
           ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations(view, options, view.hasFocus));
@@ -208,31 +211,35 @@ export const decorateMarkdown = (options: DecorateOptions = {}) => {
             update.docChanged ||
             update.viewportChanged ||
             update.focusChanged ||
-            update.transactions.some((tr) => tr.effects.some((e) => e.is(forceUpdate)))
+            update.transactions.some((tr) => tr.effects.some((e) => e.is(forceUpdate))) ||
+            (update.selectionSet && !options.selectionChangeDelay)
           ) {
             ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations(
               update.view,
               options,
               update.view.hasFocus,
             ));
+
             this.clearUpdate();
           } else if (update.selectionSet) {
             this.scheduleUpdate(update.view);
           }
         }
 
-        clearUpdate() {
-          if (this.pendingUpdate > -1) {
-            window.clearTimeout(this.pendingUpdate);
-            this.pendingUpdate = -1;
-          }
-        }
-
+        // TODO(burdon): BUG: If the cursor is at the end of a link at the end of a line,
+        //  the cursor will float in space or be in the wrong position after the decoration is applied.
         scheduleUpdate(view: EditorView) {
           this.clearUpdate();
-          this.pendingUpdate = window.setTimeout(() => {
+          this.pendingUpdate = setTimeout(() => {
             view.dispatch({ effects: forceUpdate.of(null) });
-          }, options.selectionChangeDelay ?? 400);
+          }, options.selectionChangeDelay);
+        }
+
+        clearUpdate() {
+          if (this.pendingUpdate) {
+            clearTimeout(this.pendingUpdate);
+            this.pendingUpdate = undefined;
+          }
         }
 
         destroy() {
@@ -242,8 +249,8 @@ export const decorateMarkdown = (options: DecorateOptions = {}) => {
       {
         provide: (plugin) => [
           EditorView.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration.none),
-          EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration.none),
           EditorView.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration.none),
+          EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration.none),
         ],
       },
     ),

package/src/hooks/defs.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type Extension, StateField } from '@codemirror/state';
+import { type Extension } from '@codemirror/state';
 
 import { type DocAccessor } from '@dxos/echo-schema';
 
@@ -18,27 +18,13 @@ export type Comment = {
   cursor?: string;
 };
 
+/**
+ * @deprecated
+ */
+// TODO(burdon): Remove.
 export type EditorModel = {
   id: string;
   text: () => string;
-  extension?: Extension;
-
-  // TODO(burdon): Remove.
   content: string | DocAccessor;
-
-  // TODO(burdon): Remove.
-  peer?: {
-    id: string;
-    name?: string;
-  };
+  extension?: Extension;
 };
-
-/**
- * State field makes the model available to other extensions.
- * @deprecated
- */
-// TODO(burdon): Remove.
-export const modelState = StateField.define<EditorModel | undefined>({
-  create: () => undefined,
-  update: (model) => model,
-});

package/src/hooks/useActionHandler.ts

@@ -6,23 +6,23 @@ import type { EditorView } from '@codemirror/view';
 
 import type { ToolbarProps } from '../components';
 import {
-  createComment,
-  insertTable,
-  setHeading,
-  setStyle,
-  toggleStyle,
-  addLink,
-  removeLink,
   Inline,
   List,
-  addList,
-  removeList,
-  toggleList,
   addBlockquote,
-  removeBlockquote,
   addCodeblock,
+  addLink,
+  addList,
+  createComment,
+  insertTable,
+  removeBlockquote,
   removeCodeblock,
+  removeLink,
+  removeList,
+  setHeading,
+  setStyle,
   toggleBlockquote,
+  toggleList,
+  toggleStyle,
 } from '../extensions';
 
 export const useActionHandler = (view?: EditorView | null): ToolbarProps['onAction'] => {

package/src/hooks/useEditorView.ts

@@ -21,7 +21,6 @@ import { type MutableRefObject, useRef, useState } from 'react';
  * };
  * ```
  */
-// TODO(burdon): Replace with useTextEditor.
 export const useEditorView = (id: string): [MutableRefObject<EditorView | null>, boolean] => {
   const editorRef = useRef<EditorView | null>(null);
   const [prev, setPrev] = useState<[EditorView | null, string]>([null, '']);

package/src/{components/TextEditor/hooks.stories.tsx → hooks/useTextEditor.stories.tsx}

@@ -10,7 +10,9 @@ import { Toolbar as NaturalToolbar, Select, useThemeContext, Tooltip } from '@dx
 import { attentionSurface, mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { TextEditor } from './TextEditor';
+import { useActionHandler } from './useActionHandler';
+import { createBasicExtensions, createThemeExtensions, useTextEditor } from './useTextEditor';
+import { Toolbar } from '../components';
 import {
   type EditorMode,
   EditorModes,
@@ -20,11 +22,9 @@ import {
   image,
   table,
   useFormattingState,
-} from '../../extensions';
-import { createDataExtensions, createThemeExtensions, useActionHandler, useTextEditor } from '../../hooks';
-import { markdownTheme } from '../../themes';
-import translations from '../../translations';
-import { Toolbar } from '../Toolbar';
+} from '../extensions';
+import { markdownTheme } from '../themes';
+import translations from '../translations';
 
 // TODO(burdon): Demo toolbar with hooks.
 // TODO(burdon): Build components from hooks and adapters for model/extensions, etc.
@@ -46,7 +46,7 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
   const extensions = useMemo(
     () => [
       editorMode ? EditorModes[editorMode] : [],
-      createDataExtensions({ readonly }),
+      createBasicExtensions({ readonly }),
       createThemeExtensions({
         themeMode,
         theme: markdownTheme,
@@ -116,7 +116,7 @@ const EditorModeToolbar = ({
 
 export default {
   title: 'react-ui-editor/useTextEditor',
-  component: TextEditor,
+  // component: TextEditor,
   decorators: [withTheme],
   render: (args: StoryProps) => (
     <Tooltip.Provider>

package/src/hooks/useTextEditor.ts

@@ -2,6 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
+import { closeBrackets } from '@codemirror/autocomplete';
+import { history } from '@codemirror/commands';
+import { bracketMatching } from '@codemirror/language';
 import {
   EditorSelection,
   EditorState,
@@ -9,7 +12,17 @@ import {
   type Extension,
   type StateEffect,
 } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
+import {
+  crosshairCursor,
+  drawSelection,
+  dropCursor,
+  EditorView,
+  highlightActiveLine,
+  lineNumbers,
+  placeholder,
+  scrollPastEnd,
+} from '@codemirror/view';
+import defaultsDeep from 'lodash.defaultsdeep';
 import { type DependencyList, type RefObject, useEffect, useRef, useState } from 'react';
 
 import { log } from '@dxos/log';
@@ -38,7 +51,7 @@ export type UseTextEditor = {
 // TODO(wittjosiah): Does not work in strict mode.
 export const useTextEditor = (
   { autoFocus, scrollTo, debug, doc, selection, extensions }: UseTextEditorOptions = {},
-  deps?: DependencyList,
+  deps: DependencyList = [],
 ): UseTextEditor => {
   const onUpdate = useRef<() => void>();
   const [view, setView] = useState<EditorView>();
@@ -114,23 +127,66 @@ export const useTextEditor = (
 
 // TODO(burdon): Factor out extension factories.
 
-export type DataExtensionsOptions = {
+/**
+ * https://codemirror.net/docs/extensions
+ * https://github.com/codemirror/basic-setup
+ */
+// TODO(burdon): Reconcile with createMarkdownExtensions.
+export type BasicExtensionsOptions = {
+  allowMultipleSelections?: boolean;
+  bracketMatching?: boolean;
+  closeBrackets?: boolean;
+  crosshairCursor?: boolean;
+  dropCursor?: boolean;
+  drawSelection?: boolean;
+  editable?: boolean;
+  highlightActiveLine?: boolean;
+  history?: boolean;
+  lineNumbers?: boolean;
+  lineWrapping?: boolean;
+  placeholder?: string;
   readonly?: boolean;
+  scrollPastEnd?: boolean;
+  tabSize?: number;
+};
+
+const defaults: BasicExtensionsOptions = {
+  bracketMatching: true,
+  closeBrackets: true,
+  drawSelection: true,
+  editable: true,
+  history: true,
+  lineWrapping: true,
 };
 
-// TODO(burdon): Pass in TextObject (remove model).
-export const createDataExtensions = ({ readonly = false } = {}): Extension => {
+export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extension => {
+  const props: BasicExtensionsOptions = defaultsDeep({}, _props, defaults);
   return [
-    //
-    EditorState.readOnly.of(readonly),
-    EditorView.editable.of(!readonly),
-  ];
+    // TODO(burdon): 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.crosshairCursor && crosshairCursor(),
+    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),
+  ].filter(isNotFalsy);
 };
 
 export type ThemeExtensionsOptions = {
   theme?: ThemeStyles;
   themeMode?: ThemeMode;
-  lineWrap?: boolean;
   slots?: {
     editor?: {
       className?: string;
@@ -143,11 +199,10 @@ export type ThemeExtensionsOptions = {
 
 export const createThemeExtensions = ({ theme, themeMode, slots }: ThemeExtensionsOptions = {}): Extension => {
   return [
-    //
     EditorView.baseTheme(defaultTheme),
-    theme && EditorView.theme(theme),
     EditorView.darkTheme.of(themeMode === 'dark'),
-    EditorView.editorAttributes.of({ class: slots?.editor?.className ?? '' }),
-    EditorView.contentAttributes.of({ class: slots?.content?.className ?? '' }),
+    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);
 };

package/src/hooks/useTextModel.ts

@@ -15,7 +15,7 @@ import { hueTokens } from '@dxos/react-ui-theme';
 import { hexToHue } from '@dxos/util';
 
 import { SpaceAwarenessProvider } from './awareness-provider';
-import { type EditorModel, modelState } from './defs';
+import { type EditorModel } from './defs';
 import { automerge, awareness } from '../extensions';
 import { type DocAccessor } from '../extensions/automerge/defs';
 
@@ -68,6 +68,7 @@ export const useTextModel = (props: UseTextModelProps): EditorModel | undefined
  * For use primarily in stories & tests so the dependence on TextObject can be avoided.
  * @deprecated
  */
+// TODO(burdon): Remove.
 export const useInMemoryTextModel = ({
   id,
   defaultContent,
@@ -76,10 +77,10 @@ export const useInMemoryTextModel = ({
   defaultContent?: string;
 }): EditorModel & { setContent: Dispatch<SetStateAction<string>> } => {
   const [content, setContent] = useState(defaultContent ?? '');
-  return { id, content, setContent, text: () => content };
+  return { id, content, text: () => content, setContent };
 };
 
-const createModel = ({ space, identity, text }: UseTextModelProps) => {
+const createModel = ({ space, identity, text }: UseTextModelProps): EditorModel | undefined => {
   if (!text) {
     return undefined;
   }
@@ -104,23 +105,15 @@ const createModel = ({ space, identity, text }: UseTextModelProps) => {
       peerId: identity?.identityKey.toHex() ?? 'Anonymous',
     });
 
-  const extensions = [modelState.init(() => model), automerge({ handle: doc.handle, path: doc.path })];
+  const extensions = [automerge({ handle: doc.handle, path: doc.path })];
   if (awarenessProvider) {
     extensions.push(awareness(awarenessProvider));
   }
 
-  const model: EditorModel = {
+  return {
     id: obj.id,
     content: doc,
     text: () => get(doc.handle.docSync(), doc.path),
     extension: extensions,
-    peer: identity
-      ? {
-          id: identity.identityKey.toHex(),
-          name: identity.profile?.displayName,
-        }
-      : undefined,
   };
-
-  return model;
 };

package/src/index.ts

@@ -1,10 +1,12 @@
 //
 // Copyright 2022 DXOS.org
 //
+
 import translations from './translations';
 
 export { type Extension, type EditorState } from '@codemirror/state';
 export { type EditorView, keymap } from '@codemirror/view';
+export { tags } from '@lezer/highlight';
 
 export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
 export { Doc, YText, YXmlFragment } from '@dxos/text-model';

package/src/themes/default.ts

@@ -153,6 +153,15 @@ export const defaultTheme: ThemeStyles = {
   '.cm-tooltip': {
     border: 'none',
   },
+  '&light .cm-tooltip': {
+    background: get(tokens, 'extend.colors.white'),
+  },
+  '&dark .cm-tooltip': {
+    background: get(tokens, 'extend.colors.black'),
+  },
+  '.cm-tooltip-hover': {
+    padding: '0 4px',
+  },
   '.cm-tooltip-below': {},
 
   //

package/dist/types/src/components/TextEditor/automerge.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"automerge.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/automerge.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAGpB,OAAO,uBAAuB,CAAC;AAc/B,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAW9D,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,WAAW,CAAC;CACrB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DF,wBAKE;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC;AAoB1B,eAAO,MAAM,QAAQ;;;CAmBpB,CAAC"}

package/dist/types/src/components/TextEditor/hooks.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hooks.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/hooks.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAEpB,OAAO,KAA4B,MAAM,OAAO,CAAC;AA4BjD,KAAK,UAAU,GAAG;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;;;;;mBAiFe,UAAU;;;;;;;;;;;;;;;;;;;;;;;;AAJ3B,wBAUE;AAEF,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC"}

package/dist/types/src/extensions/basic.d.ts

@@ -1,9 +0,0 @@
-import { type Extension } from '@codemirror/state';
-import { type ThemeMode } from '@dxos/react-ui';
-import { type TextEditorProps } from '../components';
-export type BasicBundleOptions = {
-    themeMode?: ThemeMode;
-    bracketMatching?: boolean;
-} & Pick<TextEditorProps, 'placeholder' | 'lineWrapping'>;
-export declare const createBasicBundle: ({ themeMode, placeholder: _placeholder, lineWrapping, bracketMatching: _bracketMatching, }?: BasicBundleOptions) => Extension[];
-//# sourceMappingURL=basic.d.ts.map

package/dist/types/src/extensions/basic.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"basic.d.ts","sourceRoot":"","sources":["../../../../src/extensions/basic.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAInD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAGhD,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,GAAG,IAAI,CAAC,eAAe,EAAE,aAAa,GAAG,cAAc,CAAC,CAAC;AAE1D,eAAO,MAAM,iBAAiB,gGAK3B,kBAAkB,KAAQ,SAAS,EAchB,CAAC"}

package/src/extensions/basic.ts

@@ -1,41 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { closeBrackets } from '@codemirror/autocomplete';
-import { history } from '@codemirror/commands';
-import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
-import { type Extension } from '@codemirror/state';
-import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
-import { drawSelection, EditorView, highlightActiveLine, placeholder } from '@codemirror/view';
-
-import { type ThemeMode } from '@dxos/react-ui';
-import { isNotFalsy } from '@dxos/util';
-
-import { type TextEditorProps } from '../components';
-
-export type BasicBundleOptions = {
-  themeMode?: ThemeMode;
-  bracketMatching?: boolean;
-} & Pick<TextEditorProps, 'placeholder' | 'lineWrapping'>;
-
-export const createBasicBundle = ({
-  themeMode,
-  placeholder: _placeholder,
-  lineWrapping = true,
-  bracketMatching: _bracketMatching = true,
-}: BasicBundleOptions = {}): Extension[] =>
-  [
-    lineWrapping && EditorView.lineWrapping,
-
-    // https://codemirror.net/docs/ref/#codemirror.minimalSetup
-    _bracketMatching && bracketMatching(),
-    closeBrackets(),
-    drawSelection(),
-    highlightActiveLine(),
-    history(),
-    _placeholder && placeholder(_placeholder),
-
-    // https://github.com/codemirror/theme-one-dark
-    themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
-  ].filter(isNotFalsy);