@dxos/react-ui-editor 0.8.1 → 0.8.2-main.12df754

package/src/extensions/markdown/decorate.ts

@@ -15,6 +15,7 @@ import { image } from './image';
 import { formattingStyles, bulletListIndentationWidth, orderedListIndentationWidth } from './styles';
 import { table } from './table';
 import { theme, type HeadingLevel } from '../../styles';
+import { type RenderCallback } from '../../types';
 import { wrapWithCatch } from '../../util';
 
 /**
@@ -45,7 +46,7 @@ class HorizontalRuleWidget extends WidgetType {
 class LinkButton extends WidgetType {
   constructor(
     private readonly url: string,
-    private readonly render: (el: HTMLElement, url: string) => void,
+    private readonly render: RenderCallback<{ url: string }>,
   ) {
     super();
   }
@@ -57,7 +58,7 @@ class LinkButton extends WidgetType {
   // TODO(burdon): Create icon and link directly without react?
   override toDOM(view: EditorView) {
     const el = document.createElement('span');
-    this.render(el, this.url);
+    this.render(el, { url: this.url }, view);
     return el;
   }
 }
@@ -519,7 +520,7 @@ export interface DecorateOptions {
    */
   selectionChangeDelay?: number;
   numberedHeadings?: { from: number; to?: number };
-  renderLinkButton?: (el: Element, url: string) => void;
+  renderLinkButton?: RenderCallback<{ url: string }>;
 }
 
 export const decorateMarkdown = (options: DecorateOptions = {}) => {

package/src/extensions/markdown/formatting.ts

@@ -17,7 +17,7 @@ import { EditorView, keymap } from '@codemirror/view';
 import { type SyntaxNodeRef, type SyntaxNode } from '@lezer/common';
 import { useMemo } from 'react';
 
-import { type ReactiveObject } from '@dxos/live-object';
+import { type Live } from '@dxos/live-object';
 
 import { type EditorToolbarState } from '../../components';
 
@@ -1250,7 +1250,7 @@ export const getFormatting = (state: EditorState): Formatting => {
 /**
  * Hook provides an extension to compute the current formatting state.
  */
-export const useFormattingState = (state: ReactiveObject<EditorToolbarState>): Extension => {
+export const useFormattingState = (state: Live<EditorToolbarState>): Extension => {
   return useMemo(
     () =>
       EditorView.updateListener.of((update) => {

package/src/extensions/markdown/image.ts

@@ -51,16 +51,6 @@ export const image = (_options: ImageOptions = {}): Extension => {
   ];
 };
 
-const preloaded = new Set<string>();
-
-const preloadImage = (url: string) => {
-  if (!preloaded.has(url)) {
-    const img = document.createElement('img');
-    img.src = url;
-    preloaded.add(url);
-  }
-};
-
 const buildDecorations = (from: number, to: number, state: EditorState) => {
   const decorations: Range<Decoration>[] = [];
   const cursor = state.selection.main.head;
@@ -94,13 +84,23 @@ const buildDecorations = (from: number, to: number, state: EditorState) => {
   return decorations;
 };
 
+const preloaded = new Set<string>();
+
+const preloadImage = (url: string) => {
+  if (!preloaded.has(url)) {
+    const img = document.createElement('img');
+    img.src = url;
+    preloaded.add(url);
+  }
+};
+
 class ImageWidget extends WidgetType {
   constructor(readonly _url: string) {
     super();
   }
 
   override eq(other: this) {
-    return this._url === (other as any as ImageWidget)._url;
+    return this._url === other._url;
   }
 
   override toDOM(view: EditorView) {
@@ -113,6 +113,7 @@ class ImageWidget extends WidgetType {
     } else {
       img.classList.add('cm-loaded-image');
     }
+
     return img;
   }
 }

package/src/extensions/markdown/link.ts

@@ -9,30 +9,39 @@ import { type SyntaxNode } from '@lezer/common';
 
 import { tooltipContent } from '@dxos/react-ui-theme';
 
-export const linkTooltip = (render: (el: HTMLElement, url: string) => void) => {
-  return hoverTooltip((view, pos, side) => {
-    const syntax = syntaxTree(view.state).resolveInner(pos, side);
-    let link = null;
-    for (let i = 0, node: SyntaxNode | null = syntax; !link && node && i < 5; node = node.parent, i++) {
-      link = node.name === 'Link' ? node : null;
-    }
+import { type RenderCallback } from '../../types';
 
-    const url = link && link.getChild('URL');
-    if (!url || !link) {
-      return null;
-    }
+export const linkTooltip = (renderTooltip: RenderCallback<{ url: string }>) => {
+  return hoverTooltip(
+    (view, pos, side) => {
+      const syntax = syntaxTree(view.state).resolveInner(pos, side);
+      let link = null;
+      for (let i = 0, node: SyntaxNode | null = syntax; !link && node && i < 5; node = node.parent, i++) {
+        link = node.name === 'Link' ? node : null;
+      }
 
-    const urlText = view.state.sliceDoc(url.from, url.to);
-    return {
-      pos: link.from,
-      end: link.to,
-      above: true,
-      create: () => {
-        const el = document.createElement('div');
-        el.className = tooltipContent({}, 'pli-2 plb-1');
-        render(el, urlText);
-        return { dom: el, offset: { x: 0, y: 4 } };
-      },
-    };
-  });
+      const url = link && link.getChild('URL');
+      if (!url || !link) {
+        return null;
+      }
+
+      const urlText = view.state.sliceDoc(url.from, url.to);
+      return {
+        pos: link.from,
+        end: link.to,
+        // NOTE: Forcing above causes the tooltip to flicker.
+        // above: true,
+        create: () => {
+          const el = document.createElement('div');
+          el.className = tooltipContent({});
+          renderTooltip(el, { url: urlText }, view);
+          return { dom: el, offset: { x: 0, y: 4 } };
+        },
+      };
+    },
+    {
+      // NOTE: 0 = default of 300ms.
+      hoverTime: 1,
+    },
+  );
 };

package/src/extensions/preview/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './preview';

package/src/extensions/preview/preview.ts

@@ -0,0 +1,271 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos/lit-ui/dx-ref-tag.pcss';
+
+import { syntaxTree } from '@codemirror/language';
+import {
+  type EditorState,
+  type Extension,
+  type RangeSet,
+  RangeSetBuilder,
+  StateField,
+  type Transaction,
+} from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, WidgetType } from '@codemirror/view';
+import { type SyntaxNode } from '@lezer/common';
+
+import { type RenderCallback } from '../../types';
+
+export type PreviewLinkRef = {
+  suggest?: boolean;
+  block?: boolean;
+  label: string;
+  ref: string;
+};
+
+export type PreviewLinkTarget = {
+  label: string;
+  text?: string;
+  object?: any;
+};
+
+export type PreviewAction =
+  | {
+      type: 'insert';
+      link: PreviewLinkRef;
+      target: PreviewLinkTarget;
+    }
+  | {
+      type: 'delete';
+      link: PreviewLinkRef;
+    };
+
+// TODO(burdon): Handle error.
+export type PreviewLookup = (link: PreviewLinkRef) => Promise<PreviewLinkTarget | null | undefined>;
+
+export type PreviewActionHandler = (action: PreviewAction) => void;
+
+export type PreviewRenderProps = {
+  readonly: boolean;
+  link: PreviewLinkRef;
+  onAction: PreviewActionHandler;
+  onLookup?: PreviewLookup;
+};
+
+export type PreviewOptions = {
+  renderBlock?: RenderCallback<PreviewRenderProps>;
+  onLookup?: PreviewLookup;
+};
+
+/**
+ * Create preview decorations.
+ */
+export const preview = (options: PreviewOptions = {}): Extension => {
+  return [
+    // NOTE: Atomic block decorations must be created from a state field, now a widget, otherwise it results in the following error:
+    // "Block decorations may not be specified via plugins"
+    StateField.define<DecorationSet>({
+      create: (state) => buildDecorations(state, options),
+      update: (_: RangeSet<Decoration>, tr: Transaction) => buildDecorations(tr.state, options),
+      provide: (field) => [
+        EditorView.decorations.from(field),
+        EditorView.atomicRanges.of((view) => view.state.field(field)),
+      ],
+    }),
+
+    EditorView.theme({
+      '.cm-preview-block': {
+        marginLeft: '-1rem',
+        marginRight: '-1rem',
+        padding: '1rem',
+        borderRadius: '0.5rem',
+        background: 'var(--dx-modalSurface)',
+        border: '1px solid var(--dx-separator)',
+      },
+    }),
+  ];
+};
+
+/**
+ * Link references.
+ *
+ *  [Label][dxn:echo:123]    Inline reference
+ * ![Label][dxn:echo:123]    Block reference
+ * ![Label][?dxn:echo:123]   Suggestion
+ */
+const getLinkRef = (state: EditorState, node: SyntaxNode): PreviewLinkRef | undefined => {
+  const mark = node.getChild('LinkMark');
+  const label = node.getChild('LinkLabel');
+  if (mark && label) {
+    const ref = state.sliceDoc(label.from + 1, label.to - 1);
+    return {
+      suggest: ref.startsWith('?'),
+      block: state.sliceDoc(mark.from, mark.from + 1) === '!',
+      label: state.sliceDoc(mark.to, label.from - 1),
+      ref: ref.startsWith('?') ? ref.slice(1) : ref,
+    };
+  }
+};
+
+/**
+ * Echo references are represented as markdown reference links.
+ * https://www.markdownguide.org/basic-syntax/#reference-style-links
+ * [Label|block][dxn:echo:123]
+ * [Label|inline][dxn:echo:123]
+ */
+const buildDecorations = (state: EditorState, options: PreviewOptions) => {
+  const builder = new RangeSetBuilder<Decoration>();
+
+  syntaxTree(state).iterate({
+    enter: (node) => {
+      switch (node.name) {
+        //
+        // Decoration.
+        // [Label][dxn:echo:123]
+        //
+        case 'Link': {
+          const link = getLinkRef(state, node.node);
+          if (link) {
+            builder.add(
+              node.from,
+              node.to,
+              Decoration.replace({
+                widget: new PreviewInlineWidget(options, link),
+              }),
+            );
+          }
+          break;
+        }
+        //
+        // Block widget.
+        // ![Label][dxn:echo:123]
+        //
+        case 'Image': {
+          const link = getLinkRef(state, node.node);
+          if (options.renderBlock && link) {
+            builder.add(
+              node.from,
+              node.to,
+              Decoration.replace({
+                block: true,
+                // atomic: true,
+                widget: new PreviewBlockWidget(options, link),
+              }),
+            );
+          }
+          break;
+        }
+      }
+    },
+  });
+
+  return builder.finish();
+};
+
+/**
+ * Inline widget.
+ * [Label][dxn:echo:123]
+ */
+class PreviewInlineWidget extends WidgetType {
+  constructor(
+    readonly _options: PreviewOptions,
+    readonly _link: PreviewLinkRef,
+  ) {
+    super();
+  }
+
+  // override ignoreEvent() {
+  //   return false;
+  // }
+
+  override eq(other: this) {
+    return this._link.ref === other._link.ref && this._link.label === other._link.label;
+  }
+
+  override toDOM(view: EditorView) {
+    const root = document.createElement('dx-ref-tag');
+    root.setAttribute('label', this._link.label);
+    root.setAttribute('ref', this._link.ref);
+    return root;
+  }
+}
+
+/**
+ * Block widget.
+ * ![Label][dxn:echo:123]
+ */
+class PreviewBlockWidget extends WidgetType {
+  constructor(
+    readonly _options: PreviewOptions,
+    readonly _link: PreviewLinkRef,
+  ) {
+    super();
+  }
+
+  // override ignoreEvent() {
+  //   return true;
+  // }
+
+  override eq(other: this) {
+    return this._link.ref === other._link.ref;
+  }
+
+  override toDOM(view: EditorView) {
+    const root = document.createElement('div');
+    root.classList.add('cm-preview-block');
+
+    // TODO(burdon): Inject handler.
+    const handleAction: PreviewActionHandler = (action) => {
+      const pos = view.posAtDOM(root);
+      const node = syntaxTree(view.state).resolve(pos + 1).node.parent;
+      if (!node) {
+        return;
+      }
+
+      const link = getLinkRef(view.state, node);
+      if (link?.ref !== action.link.ref) {
+        return;
+      }
+
+      switch (action.type) {
+        // TODO(burdon): Should we dispatch to the view or mutate the document? (i.e., handle externally?)
+        // Insert ref text.
+        case 'insert': {
+          view.dispatch({
+            changes: {
+              from: node.from,
+              to: node.to,
+              insert: action.target.text,
+            },
+          });
+          break;
+        }
+        // Remove ref.
+        case 'delete': {
+          view.dispatch({
+            changes: {
+              from: node.from,
+              to: node.to,
+            },
+          });
+          break;
+        }
+      }
+    };
+
+    this._options.renderBlock!(
+      root,
+      {
+        readonly: view.state.readOnly,
+        link: this._link,
+        onAction: handleAction,
+        onLookup: this._options.onLookup,
+      },
+      view,
+    );
+
+    return root;
+  }
+}

package/src/hooks/useTextEditor.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { EditorState, type EditorStateConfig } from '@codemirror/state';
+import { EditorState, type EditorStateConfig, type Text } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { useFocusableGroup, type TabsterTypes } from '@fluentui/react-tabster';
 import {
@@ -43,6 +43,7 @@ export type CursorInfo = {
 
 export type UseTextEditorProps = Pick<EditorStateConfig, 'extensions'> & {
   id?: string;
+  doc?: Text;
   initialValue?: string;
   className?: string;
   autoFocus?: boolean;
@@ -61,7 +62,7 @@ export const useTextEditor = (
   props: MaybeProvider<UseTextEditorProps> = {},
   deps: DependencyList = [],
 ): UseTextEditor => {
-  const { id, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } =
+  const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } =
     useMemo<UseTextEditorProps>(() => getProviderValue(props), deps ?? []);
 
   // NOTE: Increments by 2 in strict mode.
@@ -87,7 +88,7 @@ export const useTextEditor = (
 
       // https://codemirror.net/docs/ref/#state.EditorStateConfig
       const state = EditorState.create({
-        doc: initialValue,
+        doc: doc ?? initialValue,
         // selection: initialSelection,
         extensions: [
           id && documentId.of(id),

package/src/{InputMode.stories.tsx → stories/InputMode.stories.tsx}

@@ -10,7 +10,7 @@ import { Toolbar as NaturalToolbar, Select, useThemeContext } from '@dxos/react-
 import { attentionSurface, mx } from '@dxos/react-ui-theme';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { EditorToolbar, useEditorToolbarState } from './components';
+import { EditorToolbar, useEditorToolbarState } from '../components';
 import {
   type EditorInputMode,
   decorateMarkdown,
@@ -20,9 +20,9 @@ import {
   createBasicExtensions,
   createThemeExtensions,
   InputModeExtensions,
-} from './extensions';
-import { useActionHandler, useTextEditor, type UseTextEditorProps } from './hooks';
-import translations from './translations';
+} from '../extensions';
+import { useActionHandler, useTextEditor, type UseTextEditorProps } from '../hooks';
+import translations from '../translations';
 
 type StoryProps = { placeholder?: string; readOnly?: boolean } & UseTextEditorProps;