@dxos/react-ui-editor 0.3.11-main.dafb7f2 → 0.3.11-main.e0dc42b

package/src/extensions/comments.ts

@@ -7,16 +7,15 @@ import {
   hoverTooltip,
   keymap,
   type Command,
-  type DecorationSet,
-  type ViewUpdate,
   Decoration,
+  type DecorationSet,
   EditorView,
   MatchDecorator,
+  type Rect,
+  type ViewUpdate,
   ViewPlugin,
   WidgetType,
-  type Rect,
 } from '@codemirror/view';
-import get from 'lodash.get';
 import sortBy from 'lodash.sortby';
 
 import { debounce } from '@dxos/async';
@@ -25,7 +24,7 @@ import { log } from '@dxos/log';
 import { nonNullable } from '@dxos/util';
 
 import { type CommentRange, type EditorModel, type Range } from '../hooks';
-import { tokens } from '../styles';
+import { getToken } from '../styles';
 import { callbackWrapper, CursorConverter } from '../util';
 
 // TODO(burdon): Handle delete, cut, copy, and paste (separately) text that includes comment range.
@@ -43,10 +42,10 @@ const styles = EditorView.baseTheme({
     backgroundColor: 'orange',
   },
   '& .cm-comment': {
-    backgroundColor: get(tokens, 'extend.colors.yellow.50'),
+    backgroundColor: getToken('extend.colors.yellow.50'),
   },
   '& .cm-comment-active': {
-    backgroundColor: get(tokens, 'extend.colors.yellow.100'),
+    backgroundColor: getToken('extend.colors.yellow.100'),
   },
 });
 
@@ -160,17 +159,13 @@ const highlightDecorations = EditorView.decorations.compute([commentsStateField]
  * May correspond to a markdown bookmark.
  */
 class BookmarkWidget extends WidgetType {
-  constructor(
-    private readonly _anchor: number,
-    private readonly _id: string,
-    private readonly _handleClick?: () => void,
-  ) {
+  constructor(private readonly _id: string, private readonly _handleClick?: () => void) {
     super();
     invariant(this._id);
   }
 
-  override eq(other: BookmarkWidget) {
-    return this._anchor === other._anchor && this._id === other._id;
+  override eq(other: this) {
+    return this._id === other._id;
   }
 
   override toDOM() {
@@ -198,7 +193,7 @@ export type CommentsOptions = {
   /**
    * Called to render tooltip.
    */
-  onHover?: (el: Element) => void;
+  onHover?: (el: Element, shortcut: string) => void;
 };
 
 /**
@@ -214,6 +209,8 @@ export type CommentsOptions = {
  * 6). Optionally, implements a hoverTooltip to show hints when creating a selection range.
  */
 export const comments = (options: CommentsOptions = {}): Extension => {
+  const { key: shortcut = "meta-'" } = options;
+
   const handleSelect = debounce((state: CommentsState) => options.onSelect?.(state), 200);
 
   /**
@@ -258,38 +255,37 @@ export const comments = (options: CommentsOptions = {}): Extension => {
   /**
    * Bookmark widget decoration.
    */
-  const bookmarksViewPlugin = ViewPlugin.fromClass(
-    class BookmarkViewPlugin {
-      // Match markdown footnotes (option).
-      // https://www.markdownguide.org/extended-syntax/#footnotes
-      static bookmarkMatcher = new MatchDecorator({
-        regexp: /\[\^(\w+)\]/g,
-        decoration: (match, view, pos) => {
-          const id = match[1];
-          return Decoration.replace({
-            id,
-            widget: new BookmarkWidget(pos, id),
+  const bookmarksViewPlugin = options.footnote
+    ? ViewPlugin.fromClass(
+        class BookmarkViewPlugin {
+          // Match markdown footnotes (option).
+          // https://www.markdownguide.org/extended-syntax/#footnotes
+          static bookmarkMatcher = new MatchDecorator({
+            regexp: /\[\^(\w+)\]/g,
+            decoration: (match) => {
+              const id = match[1];
+              return Decoration.replace({ id, widget: new BookmarkWidget(id) });
+            },
           });
-        },
-      });
 
-      bookmarks: DecorationSet;
-      constructor(view: EditorView) {
-        this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.createDeco(view);
-      }
+          bookmarks: DecorationSet;
+          constructor(view: EditorView) {
+            this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.createDeco(view);
+          }
 
-      update(update: ViewUpdate) {
-        this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.updateDeco(update, this.bookmarks);
-      }
-    },
-    {
-      decorations: (instance) => instance.bookmarks,
-      provide: (plugin) =>
-        EditorView.atomicRanges.of((view) => {
-          return view.plugin(plugin)?.bookmarks || Decoration.none;
-        }),
-    },
-  );
+          update(update: ViewUpdate) {
+            this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.updateDeco(update, this.bookmarks);
+          }
+        },
+        {
+          decorations: (instance) => instance.bookmarks,
+          provide: (plugin) =>
+            EditorView.atomicRanges.of((view) => {
+              return view.plugin(plugin)?.bookmarks || Decoration.none;
+            }),
+        },
+      )
+    : [];
 
   return [
     bookmarksViewPlugin,
@@ -303,7 +299,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     options.onCreate
       ? keymap.of([
           {
-            key: options?.key ?? "meta-'",
+            key: shortcut,
             run: callbackWrapper(createCommentThread),
           },
         ])
@@ -325,7 +321,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
                 create: () => {
                   // TODO(burdon): Dispatch to react callback to render (or use SSR)?
                   const el = document.createElement('div');
-                  options.onHover?.(el);
+                  options.onHover?.(el, shortcut);
                   return { dom: el, offset: { x: 0, y: 8 } };
                 },
               };
@@ -393,6 +389,8 @@ export const comments = (options: CommentsOptions = {}): Extension => {
           }
         });
 
+        // TODO(burdon): Fire debounced callback if range selected (to show hint).
+
         if (selected.active !== active || selected.closest !== closest) {
           view.dispatch({ effects: setSelection.of(selected) });
 
@@ -417,5 +415,5 @@ const getRangeFromCursor = (cursorConverter: CursorConverter, cursor: string) =>
   const parts = cursor.split(':');
   const from = cursorConverter.fromCursor(parts[0]);
   const to = cursorConverter.fromCursor(parts[1]);
-  return from && to ? { from, to } : undefined;
+  return from !== undefined && to !== undefined ? { from, to } : undefined;
 };

package/src/extensions/hr.ts

@@ -11,16 +11,15 @@ import {
   type ViewUpdate,
   WidgetType,
 } from '@codemirror/view';
-import get from 'lodash.get';
 
-import { tokens } from '../styles';
+import { getToken } from '../styles';
 
 // TODO(burdon): Reconcile with theme.
 const styles = EditorView.baseTheme({
   '& .cm-hr': {
     // TODO(burdon): ???
     // Note that block-level decorations should not have vertical margins,
-    borderBottom: `1px solid ${get(tokens, 'extend.colors.neutral.200')}`,
+    borderBottom: `1px solid ${getToken('extend.colors.neutral.200')}`,
   },
 });
 
@@ -29,11 +28,11 @@ class HorizontalRuleWidget extends WidgetType {
     super();
   }
 
-  override eq(other: WidgetType) {
+  override eq(other: this) {
     return this._pos === (other as any as HorizontalRuleWidget)._pos;
   }
 
-  toDOM(view: EditorView) {
+  override toDOM(view: EditorView) {
     // TODO(burdon): Create <hr> element? Does this clash with markdown parser?
     const el = document.createElement('div');
     el.className = 'cm-hr';

package/src/extensions/image.ts

@@ -72,11 +72,11 @@ class ImageWidget extends WidgetType {
     super();
   }
 
-  override eq(other: WidgetType) {
+  override eq(other: this) {
     return this._url === (other as any as ImageWidget)._url;
   }
 
-  toDOM(view: EditorView) {
+  override toDOM(view: EditorView) {
     const img = document.createElement('img');
     img.setAttribute('src', this._url);
     img.setAttribute('class', 'cm-image');

package/src/extensions/index.ts

@@ -15,7 +15,6 @@ export * from './link';
 export * from './listener';
 export * from './markdown';
 export * from './mention';
-export * from './mermaid';
 export * from './table';
 export * from './tasklist';
 export * from './typewriter';

package/src/extensions/link.ts

@@ -93,11 +93,11 @@ class LinkButton extends WidgetType {
     super();
   }
 
-  override eq(other: LinkButton) {
+  override eq(other: this) {
     return this._url === other._url;
   }
 
-  toDOM(view: EditorView) {
+  override toDOM(view: EditorView) {
     const el = document.createElement('span');
     this._onAttach!(el, this._url);
     return el;
@@ -109,11 +109,11 @@ class LinkText extends WidgetType {
     super();
   }
 
-  override eq(other: LinkText) {
+  override eq(other: this) {
     return this._url === other._url;
   }
 
-  toDOM(view: EditorView) {
+  override toDOM(view: EditorView) {
     const link = document.createElement('a');
     link.setAttribute('class', 'cm-link');
     link.textContent = this._text;
@@ -158,7 +158,7 @@ const buildDecorations = (view: EditorView, options: LinkOptions): DecorationSet
             return false;
           }
 
-          if (state.readOnly || cursor < node.from || cursor > node.to) {
+          if (!view.hasFocus || state.readOnly || cursor < node.from || cursor > node.to) {
             builder.add(
               node.from,
               node.to,

package/src/extensions/markdown/highlight.ts

@@ -6,19 +6,18 @@ import { markdownLanguage } from '@codemirror/lang-markdown';
 import { HighlightStyle } from '@codemirror/language';
 import { tags, styleTags, Tag } from '@lezer/highlight';
 import { type MarkdownConfig, Table } from '@lezer/markdown';
-import get from 'lodash.get';
 
 import {
   blockquote,
   bold,
   code,
   codeMark,
+  getToken,
   heading,
   inlineUrl,
   italic,
   mark,
   strikethrough,
-  tokens,
 } from '../../styles';
 
 /**
@@ -193,12 +192,12 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
       // Main content, paragraphs, etc.
       // {
       //   tag: [tags.content],
-      //   fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+      //   fontFamily: getToken('fontFamily.body', []).join(','),
       // },
     ],
     {
       scope: markdownLanguage,
-      all: { fontFamily: get(tokens, 'fontFamily.body', []).join(',') },
+      all: { fontFamily: getToken('fontFamily.body', []).join(',') },
     },
   );
 };

package/src/extensions/table.ts

@@ -81,7 +81,6 @@ const update = (state: EditorState, options: TableOptions) => {
         table.from,
         table.to,
         Decoration.replace({
-          block: true,
           widget: new TableWidget(table),
         }),
       );
@@ -98,14 +97,14 @@ class TableWidget extends WidgetType {
     super();
   }
 
-  override eq(other: TableWidget) {
+  override eq(other: this) {
     return (
       this._table.header?.join() === other._table.header?.join() &&
       this._table.rows?.join() === other._table.rows?.join()
     );
   }
 
-  toDOM(view: EditorView) {
+  override toDOM(view: EditorView) {
     const table = document.createElement('table');
 
     {
@@ -132,4 +131,8 @@ class TableWidget extends WidgetType {
 
     return table;
   }
+
+  override ignoreEvent(e: Event) {
+    return !/^mouse/.test(e.type);
+  }
 }

package/src/extensions/tasklist.ts

@@ -29,11 +29,11 @@ class CheckboxWidget extends WidgetType {
     super();
   }
 
-  override eq(other: CheckboxWidget) {
+  override eq(other: this) {
     return this._checked === other._checked && this._indent === other._indent;
   }
 
-  toDOM(view: EditorView) {
+  override toDOM(view: EditorView) {
     const wrap = document.createElement('span');
     wrap.className = 'cm-task-item';
     wrap.setAttribute('aria-hidden', 'true');

package/src/hooks/useTextModel.ts

@@ -66,7 +66,7 @@ export type UseTextModelProps = {
 // TODO(wittjosiah): Factor out to common package? @dxos/react-client?
 export const useTextModel = (props: UseTextModelProps): EditorModel | undefined => {
   const { identity, space, text } = props;
-  const [model, setModel] = useState<EditorModel | undefined>(() => createModel(props));
+  const [model, setModel] = useState<EditorModel | undefined>();
   useEffect(() => setModel(createModel(props)), [identity, space, text]);
   return model;
 };

package/src/index.ts

@@ -5,8 +5,11 @@
 export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
 export { Doc, YText, YXmlFragment } from '@dxos/text-model';
 export { type Extension } from '@codemirror/state';
+export { type EditorView } from '@codemirror/view';
 
 export * from './components';
 export * from './extensions';
 export * from './hooks';
+export { getToken } from './styles';
 export * from './themes';
+export * from './util';

package/src/styles/tokens.ts

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+import get from 'lodash.get';
 import type { StyleSpec } from 'style-mod';
 
 import { tailwindConfig, type TailwindConfig } from '@dxos/react-ui-theme';
@@ -12,3 +13,5 @@ export type ThemeStyles = {
 
 // TODO(thure): Why export the whole theme? Can this be done differently?
 export const tokens: TailwindConfig['theme'] = tailwindConfig({}).theme;
+
+export const getToken = (path: string, defaultValue: any = undefined) => get(tokens, path, defaultValue);

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

@@ -1,3 +0,0 @@
-import { type Extension } from '@codemirror/state';
-export declare const mermaid: () => Extension;
-//# sourceMappingURL=mermaid.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"mermaid.d.ts","sourceRoot":"","sources":["../../../../src/extensions/mermaid.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAInD,eAAO,MAAM,OAAO,QAAO,SAE1B,CAAC"}

package/src/extensions/mermaid.ts

@@ -1,11 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Extension } from '@codemirror/state';
-
-// TODO(burdon): How will this interact with the code extension?
-// TODO(burdon): Move to mermaid-plugin (which should contribute this extension).
-export const mermaid = (): Extension => {
-  return [];
-};