@dxos/react-ui-editor 0.8.1-staging.391c573 → 0.8.1-staging.9eaf14f

package/src/extensions/command/preview.ts

@@ -0,0 +1,79 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+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';
+
+export type PreviewOptions = {
+  onRenderPreview: (el: HTMLElement, props: { url: string; text: string }) => void;
+};
+
+/**
+ * Create image decorations.
+ */
+export const preview = (options: PreviewOptions): Extension => {
+  return [
+    StateField.define<DecorationSet>({
+      create: (state) => buildDecorations(state, options),
+      update: (_: RangeSet<Decoration>, tr: Transaction) => buildDecorations(tr.state, options),
+      // TODO(burdon): Make atomic.
+      provide: (field) => EditorView.decorations.from(field),
+    }),
+  ];
+};
+
+// TODO(burdon): Make atomic.
+const buildDecorations = (state: EditorState, options: PreviewOptions) => {
+  const builder = new RangeSetBuilder<Decoration>();
+  syntaxTree(state).iterate({
+    enter: (node) => {
+      if (node.name === 'Link') {
+        const urlNode = node.node.getChild('URL');
+        if (urlNode) {
+          const text = state.sliceDoc(node.from + 1, urlNode.from - 2);
+          const url = state.sliceDoc(urlNode.from, urlNode.to);
+          builder.add(
+            node.from,
+            node.to,
+            Decoration.replace({
+              block: true, // Prevent cursor from entering.
+              widget: new PreviewWidget(options.onRenderPreview, url, text),
+            }),
+          );
+        }
+      }
+    },
+  });
+
+  return builder.finish();
+};
+
+class PreviewWidget extends WidgetType {
+  constructor(
+    readonly _onRenderPreview: PreviewOptions['onRenderPreview'],
+    readonly _url: string,
+    readonly _text: string,
+  ) {
+    super();
+  }
+
+  override eq(other: this) {
+    return this._url === (other as any as PreviewWidget)._url;
+  }
+
+  override toDOM(view: EditorView) {
+    const root = document.createElement('div');
+    root.classList.add('cm-preview');
+    this._onRenderPreview(root, { url: this._url, text: this._text });
+    return root;
+  }
+}

package/src/extensions/command/state.ts

@@ -4,10 +4,10 @@
 
 import { StateEffect, StateField } from '@codemirror/state';
 import {
+  showTooltip,
   type Command,
   type EditorView,
   type KeyBinding,
-  showTooltip,
   type Tooltip,
   type TooltipView,
 } from '@codemirror/view';
@@ -50,14 +50,17 @@ export const commandState = StateField.define<CommandState>({
                 }
 
                 // Render react component.
-                options.onRender(dom, (action) => {
+                options.onRenderDialog(dom, (action) => {
                   view.dispatch({ effects: closeEffect.of(null) });
                   if (action?.insert?.length) {
+                    // Insert into editor.
+                    const text = action.insert + '\n';
                     view.dispatch({
-                      changes: { from: pos, insert: action.insert },
-                      selection: { anchor: pos + action.insert.length },
+                      changes: { from: pos, insert: text },
+                      selection: { anchor: pos + text.length },
                     });
                   }
+
                   // NOTE: Truncates text if set focus immediately.
                   requestAnimationFrame(() => view.focus());
                 });
@@ -88,6 +91,7 @@ export const openCommand: Command = (view: EditorView) => {
       return true;
     }
   }
+
   return false;
 };
 
@@ -96,6 +100,7 @@ export const closeCommand: Command = (view: EditorView) => {
     view.dispatch({ effects: closeEffect.of(null) });
     return true;
   }
+
   return false;
 };
 

package/src/extensions/comments.ts

@@ -4,12 +4,12 @@
 
 import { invertedEffects } from '@codemirror/commands';
 import {
+  type ChangeDesc,
+  type EditorState,
   type Extension,
   StateEffect,
   StateField,
   type Text,
-  type ChangeDesc,
-  type EditorState,
 } from '@codemirror/state';
 import {
   hoverTooltip,
@@ -24,7 +24,7 @@ import {
 import sortBy from 'lodash.sortby';
 import { useEffect, useMemo } from 'react';
 
-import { debounce, type UnsubscribeCallback } from '@dxos/async';
+import { debounce, type CleanupFn } from '@dxos/async';
 import { type ReactiveObject } from '@dxos/live-object';
 import { log } from '@dxos/log';
 import { isNonNullable } from '@dxos/util';
@@ -181,6 +181,7 @@ const handleCommentClick = EditorView.domEventHandlers({
     return false;
   },
 });
+
 //
 // Cut-and-paste.
 //
@@ -575,12 +576,7 @@ const hasActiveSelection = (state: EditorState): boolean => {
 class ExternalCommentSync implements PluginValue {
   private readonly unsubscribe: () => void;
 
-  constructor(
-    view: EditorView,
-    id: string,
-    subscribe: (sink: () => void) => UnsubscribeCallback,
-    getComments: () => Comment[],
-  ) {
+  constructor(view: EditorView, id: string, subscribe: (sink: () => void) => CleanupFn, getComments: () => Comment[]) {
     const updateComments = () => {
       const comments = getComments();
       if (id === view.state.facet(documentId)) {
@@ -599,7 +595,7 @@ class ExternalCommentSync implements PluginValue {
 // TODO(burdon): Needs comment.
 export const createExternalCommentSync = (
   id: string,
-  subscribe: (sink: () => void) => UnsubscribeCallback,
+  subscribe: (sink: () => void) => CleanupFn,
   getComments: () => Comment[],
 ): Extension =>
   ViewPlugin.fromClass(

package/src/extensions/factories.ts

@@ -61,7 +61,8 @@ export type BasicExtensionsOptions = {
   lineNumbers?: boolean;
   lineWrapping?: boolean;
   placeholder?: string;
-  readonly?: boolean;
+  /** If true user cannot edit the text, but they can still select and copy it. */
+  readOnly?: boolean;
   search?: boolean;
   scrollPastEnd?: boolean;
   standardKeymap?: boolean;
@@ -73,7 +74,6 @@ const defaultBasicOptions: BasicExtensionsOptions = {
   bracketMatching: true,
   closeBrackets: true,
   drawSelection: true,
-  editable: true,
   focus: true,
   history: true,
   keymap: 'standard',
@@ -101,13 +101,14 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
     props.closeBrackets && closeBrackets(),
     props.dropCursor && dropCursor(),
     props.drawSelection && drawSelection({ cursorBlinkRate: 1_200 }),
+    props.editable !== undefined && EditorView.editable.of(props.editable),
     props.focus && focus,
     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.readOnly !== undefined && EditorState.readOnly.of(props.readOnly),
     props.scrollPastEnd && scrollPastEnd(),
     props.tabSize && EditorState.tabSize.of(props.tabSize),
 

package/src/extensions/folding.tsx

@@ -2,88 +2,45 @@
 // Copyright 2024 DXOS.org
 //
 
-import { codeFolding, foldGutter, foldedRanges, foldEffect } from '@codemirror/language';
+import { codeFolding, foldGutter } from '@codemirror/language';
 import { type Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import React from 'react';
 
-import { debounce } from '@dxos/async';
 import { Icon } from '@dxos/react-ui';
 
-import { documentId } from './selection';
 import { createElement, renderRoot } from '../util';
 
-export type FoldRange = {
-  from: number;
-  to: number;
-};
-
-export type FoldState = {
-  foldedRanges: FoldRange[];
-};
+export type FoldingOptions = {};
 
 /**
  * https://codemirror.net/examples/gutter
  */
-export const folding = (state: Record<string, FoldState> = {}): Extension => {
-  const setState = (id: string, foldState: FoldState) => {
-    state[id] = foldState;
-  };
-  const setStateDebounced = debounce(setState, 1_000);
-  let initialized = false;
-
-  return [
-    codeFolding({
-      placeholderDOM: () => {
-        return document.createElement('span'); // Collapse content.
-      },
-    }),
-    foldGutter({
-      markerDOM: (open) => {
-        // TODO(burdon): Use sprite directly.
-        const el = createElement('div', { className: 'flex h-full items-center' });
-        return renderRoot(
-          el,
-          <Icon icon='ph--caret-right--regular' size={3} classNames={['mx-3 cursor-pointer', open && 'rotate-90']} />,
-        );
-      },
-    }),
-    EditorView.theme({
-      '.cm-foldGutter': {
-        opacity: 0.3,
-        transition: 'opacity 0.3s',
-        width: '32px',
-      },
-      '.cm-foldGutter:hover': {
-        opacity: 1,
-      },
-    }),
-    EditorView.updateListener.of(({ view }) => {
-      const id = view.state.facet(documentId);
-      if (!id) {
-        return;
-      }
-
-      // Handle initial state restoration only once
-      if (!initialized) {
-        initialized = true;
-        const foldState = state[id];
-        if (foldState?.foldedRanges?.length) {
-          view.dispatch({
-            effects: foldState.foldedRanges.map((range) => foldEffect.of({ from: range.from, to: range.to })),
-          });
-        }
-        return;
-      }
-
-      // Track fold changes for saving state
-      const decorations = foldedRanges(view.state);
-      const ranges: FoldRange[] = [];
-      decorations.between(0, view.state.doc.length, (from: number, to: number) => {
-        ranges.push({ from, to });
-      });
-      const foldState: FoldState = { foldedRanges: ranges };
-      setStateDebounced?.(id, foldState);
-    }),
-  ];
-};
+// TODO(burdon): Remember folding state (to state).
+export const folding = (_props: FoldingOptions = {}): Extension => [
+  codeFolding({
+    placeholderDOM: () => {
+      return document.createElement('span'); // Collapse content.
+    },
+  }),
+  foldGutter({
+    markerDOM: (open) => {
+      // TODO(burdon): Use sprite directly.
+      const el = createElement('div', { className: 'flex h-full items-center' });
+      return renderRoot(
+        el,
+        <Icon icon='ph--caret-right--regular' size={3} classNames={['mx-3 cursor-pointer', open && 'rotate-90']} />,
+      );
+    },
+  }),
+  EditorView.theme({
+    '.cm-foldGutter': {
+      opacity: 0.3,
+      transition: 'opacity 0.3s',
+      width: '32px',
+    },
+    '.cm-foldGutter:hover': {
+      opacity: 1,
+    },
+  }),
+];

package/src/extensions/selection.ts

@@ -6,6 +6,8 @@ import { type Extension, Transaction, type TransactionSpec } from '@codemirror/s
 import { EditorView, keymap } from '@codemirror/view';
 
 import { debounce } from '@dxos/async';
+import { invariant } from '@dxos/invariant';
+import { isNotFalsy } from '@dxos/util';
 
 import { singleValueFacet } from '../util';
 
@@ -24,6 +26,11 @@ export type EditorSelectionState = {
   selection?: EditorSelection;
 };
 
+export type EditorStateStore = {
+  setState: (id: string, state: EditorSelectionState) => void;
+  getState: (id: string) => EditorSelectionState | undefined;
+};
+
 const stateRestoreAnnotation = 'dxos.org/cm/state-restore';
 
 export const createEditorStateTransaction = ({ scrollTo, selection }: EditorSelectionState): TransactionSpec => {
@@ -35,13 +42,23 @@ export const createEditorStateTransaction = ({ scrollTo, selection }: EditorSele
   };
 };
 
+export const createEditorStateStore = (keyPrefix: string): EditorStateStore => ({
+  getState: (id) => {
+    invariant(id);
+    const state = localStorage.getItem(`${keyPrefix}/${id}`);
+    return state ? JSON.parse(state) : undefined;
+  },
+
+  setState: (id, state) => {
+    invariant(id);
+    localStorage.setItem(`${keyPrefix}/${id}`, JSON.stringify(state));
+  },
+});
+
 /**
  * Track scrolling and selection state to be restored when switching to document.
  */
-export const selectionState = (state: Record<string, EditorSelectionState> = {}): Extension => {
-  const setState = (id: string, selectionState: EditorSelectionState) => {
-    state[id] = selectionState;
-  };
+export const selectionState = ({ getState, setState }: Partial<EditorStateStore> = {}): Extension => {
   const setStateDebounced = debounce(setState!, 1_000);
 
   return [
@@ -57,24 +74,27 @@ export const selectionState = (state: Record<string, EditorSelectionState> = {})
         return;
       }
 
-      const { scrollTop } = view.scrollDOM;
-      const pos = view.posAtCoords({ x: 0, y: scrollTop });
-      if (pos !== null) {
-        const { anchor, head } = view.state.selection.main;
-        setStateDebounced(id, { scrollTo: pos, selection: { anchor, head } });
+      if (setState) {
+        const { scrollTop } = view.scrollDOM;
+        const pos = view.posAtCoords({ x: 0, y: scrollTop });
+        if (pos !== null) {
+          const { anchor, head } = view.state.selection.main;
+          setStateDebounced(id, { scrollTo: pos, selection: { anchor, head } });
+        }
       }
     }),
-    keymap.of([
-      {
-        key: 'ctrl-r', // TODO(burdon): Setting to jump back to selection.
-        run: (view) => {
-          const selection = state[view.state.facet(documentId)];
-          if (selection) {
-            view.dispatch(createEditorStateTransaction(selection));
-          }
-          return true;
+    getState &&
+      keymap.of([
+        {
+          key: 'ctrl-r', // TODO(burdon): Setting to jump back to selection.
+          run: (view) => {
+            const state = getState(view.state.facet(documentId));
+            if (state) {
+              view.dispatch(createEditorStateTransaction(state));
+            }
+            return true;
+          },
         },
-      },
-    ]),
-  ];
+      ]),
+  ].filter(isNotFalsy);
 };

package/src/{styles/stack-item-content-class-names.ts → fragments.ts}

@@ -4,10 +4,12 @@
 
 import { mx } from '@dxos/react-ui-theme';
 
+// TODO(burdon): Move this to a common plugin.
+
 export const stackItemContentEditorClassNames = (role?: string) =>
   mx(
-    'dx-focus-ring-inset data-[toolbar=disabled]:pbs-2 attention-surface',
-    role === 'article' ? 'min-bs-0' : '[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24',
+    'attention-surface dx-focus-ring-inset data-[toolbar=disabled]:pbs-2',
+    role === 'section' ? '[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24' : 'min-bs-0',
   );
 
 export const stackItemContentToolbarClassNames = (role?: string) =>

package/src/index.ts

@@ -14,10 +14,6 @@ export * from './components';
 export * from './defaults';
 export * from './extensions';
 export * from './hooks';
-export {
-  stackItemContentEditorClassNames,
-  stackItemContentToolbarClassNames,
-} from './styles/stack-item-content-class-names';
 export * from './types';
 export * from './util';
 

package/src/styles/theme.ts

@@ -77,6 +77,10 @@ export const defaultTheme: ThemeStyles = {
     background: 'transparent',
   },
   '.cm-gutter': {},
+  '.cm-gutter.cm-lineNumbers': {
+    paddingRight: '4px',
+    borderRight: '1px solid var(--dx-separator)',
+  },
   '.cm-gutter.cm-lineNumbers .cm-gutterElement': {
     minWidth: '40px',
     alignContent: 'center',
@@ -86,7 +90,7 @@ export const defaultTheme: ThemeStyles = {
    */
   '.cm-gutterElement': {
     alignItems: 'center',
-    fontSize: '16px',
+    fontSize: '12px',
   },
 
   /**
@@ -137,6 +141,7 @@ export const defaultTheme: ThemeStyles = {
   '.cm-link': {
     textDecorationLine: 'underline',
     textDecorationThickness: '1px',
+    textDecorationColor: 'var(--dx-separator)',
     textUnderlineOffset: '2px',
     borderRadius: '.125rem',
   },

package/src/util/debug.ts

@@ -59,6 +59,6 @@ export const logChanges = (trs: readonly Transaction[]) => {
     .filter(Boolean);
 
   if (changes.length) {
-    log.info('changes', { changes });
+    log('changes', { changes });
   }
 };

package/dist/types/src/styles/stack-item-content-class-names.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"stack-item-content-class-names.d.ts","sourceRoot":"","sources":["../../../../src/styles/stack-item-content-class-names.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,gCAAgC,UAAW,MAAM,WAI3D,CAAC;AAEJ,eAAO,MAAM,iCAAiC,UAAW,MAAM,WAI5D,CAAC"}