@dxos/react-ui-editor 0.4.7-main.733903e → 0.4.7-main.76c1dea

package/src/extensions/markdown/decorate.ts

@@ -3,7 +3,7 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import { RangeSetBuilder, type EditorState } from '@codemirror/state';
+import { RangeSetBuilder, type EditorState, StateEffect } from '@codemirror/state';
 import { EditorView, Decoration, type DecorationSet, WidgetType, ViewPlugin, type ViewUpdate } from '@codemirror/view';
 
 import { mx } from '@dxos/react-ui-theme';
@@ -81,20 +81,21 @@ const horizontalRule = Decoration.replace({ widget: new HorizontalRuleWidget() }
 const checkedTask = Decoration.replace({ widget: new CheckboxWidget(true) });
 const uncheckedTask = Decoration.replace({ widget: new CheckboxWidget(false) });
 
-const editingRange = (state: EditorState, range: { from: number; to: number }) => {
+const editingRange = (state: EditorState, range: { from: number; to: number }, focus: boolean) => {
   const {
     readOnly,
     selection: {
       main: { head },
     },
   } = state;
-  return !readOnly && head >= range.from && head <= range.to;
+  return focus && !readOnly && head >= range.from && head <= range.to;
 };
 
 const MarksByParent = new Set(['CodeMark', 'EmphasisMark', 'StrikethroughMark', 'SubscriptMark', 'SuperscriptMark']);
 
-const buildDecorations = (view: EditorView, options: DecorateOptions): DecorationSet => {
-  const builder = new RangeSetBuilder<Decoration>();
+const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boolean) => {
+  const deco = new RangeSetBuilder<Decoration>();
+  const atomicDeco = new RangeSetBuilder<Decoration>();
   const { state } = view;
 
   for (const { from, to } of view.visibleRanges) {
@@ -103,7 +104,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions): Decoratio
       to,
       enter: (node) => {
         if (node.name === 'FencedCode') {
-          const editing = editingRange(state, node);
+          const editing = editingRange(state, node, focus);
           // FencedCode > CodeMark > [CodeInfo] > CodeText > CodeMark
           for (const block of view.viewportLineBlocks) {
             if (block.to < node.from) {
@@ -113,27 +114,23 @@ const buildDecorations = (view: EditorView, options: DecorateOptions): Decoratio
               break;
             }
             const first = block.from <= node.from;
-            const last = block.to >= node.to;
-            builder.add(
-              block.from,
-              block.from,
-              first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine,
-            );
+            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)) {
-              builder.add(block.from, block.to, hide);
+              atomicDeco.add(block.from, block.to, hide);
             }
           }
           return false;
         } else if (node.name === 'Link') {
           const marks = node.node.getChildren('LinkMark');
           const urlNode = node.node.getChild('URL');
-          const editing = editingRange(state, node);
+          const editing = editingRange(state, node, focus);
           if (urlNode && marks.length >= 2) {
             const url = state.sliceDoc(urlNode.from, urlNode.to);
             if (!editing) {
-              builder.add(node.from, marks[0].to, hide);
+              atomicDeco.add(node.from, marks[0].to, hide);
             }
-            builder.add(
+            deco.add(
               marks[0].to,
               marks[1].from,
               Decoration.mark({
@@ -147,7 +144,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions): Decoratio
               }),
             );
             if (!editing) {
-              builder.add(
+              atomicDeco.add(
                 marks[1].from,
                 node.to,
                 options.renderLinkButton
@@ -160,54 +157,101 @@ const buildDecorations = (view: EditorView, options: DecorateOptions): Decoratio
           }
         } else if (node.name === 'HeaderMark') {
           const parent = node.node.parent!;
-          if (/^ATX/.test(parent.name) && !editingRange(state, state.doc.lineAt(node.from))) {
+          if (/^ATX/.test(parent.name) && !editingRange(state, state.doc.lineAt(node.from), focus)) {
             const next = state.doc.sliceString(node.to, node.to + 1);
-            builder.add(node.from, node.to + (next === ' ' ? 1 : 0), hide);
+            atomicDeco.add(node.from, node.to + (next === ' ' ? 1 : 0), hide);
           }
         } else if (node.name === 'HorizontalRule') {
-          if (!editingRange(state, node)) {
-            builder.add(node.from, node.to, horizontalRule);
+          if (!editingRange(state, node, focus)) {
+            deco.add(node.from, node.to, horizontalRule);
           }
         } else if (node.name === 'TaskMarker') {
           // Check if cursor is inside text.
-          if (!editingRange(state, node)) {
+          if (!editingRange(state, node, focus)) {
             const checked = state.doc.sliceString(node.from + 1, node.to - 1) === 'x';
-            builder.add(node.from - 2, node.from - 1, Decoration.mark({ class: 'cm-task' }));
-            builder.add(node.from, node.to, checked ? checkedTask : uncheckedTask);
+            atomicDeco.add(node.from - 2, node.from - 1, Decoration.mark({ class: 'cm-task' }));
+            atomicDeco.add(node.from, node.to, checked ? checkedTask : uncheckedTask);
           }
         } else if (MarksByParent.has(node.name)) {
-          if (!editingRange(state, node.node.parent!)) {
-            builder.add(node.from, node.to, hide);
+          if (!editingRange(state, node.node.parent!, focus)) {
+            atomicDeco.add(node.from, node.to, hide);
           }
         }
       },
     });
   }
 
-  return builder.finish();
+  return { deco: deco.finish(), atomicDeco: atomicDeco.finish() };
 };
 
 export interface DecorateOptions {
   renderLinkButton?: (el: Element, url: string) => void;
+  /**
+   * Prevents triggering decorations as the cursor moves through the document.
+   */
+  selectionChangeDelay?: number;
 }
 
+const forceUpdate = StateEffect.define<null>();
+
 export const decorateMarkdown = (options: DecorateOptions = {}) => {
   return [
     ViewPlugin.fromClass(
       class {
-        decorations: DecorationSet;
+        deco: DecorationSet;
+        atomicDeco: DecorationSet;
+        pendingUpdate?: NodeJS.Timeout;
+
         constructor(view: EditorView) {
-          this.decorations = buildDecorations(view, options);
+          ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations(view, options, view.hasFocus));
         }
 
         update(update: ViewUpdate) {
-          if (update.docChanged || update.selectionSet || update.viewportChanged) {
-            this.decorations = buildDecorations(update.view, options);
+          if (
+            update.docChanged ||
+            update.viewportChanged ||
+            update.focusChanged ||
+            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);
           }
         }
+
+        // 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 = setTimeout(() => {
+            view.dispatch({ effects: forceUpdate.of(null) });
+          }, options.selectionChangeDelay);
+        }
+
+        clearUpdate() {
+          if (this.pendingUpdate) {
+            clearTimeout(this.pendingUpdate);
+            this.pendingUpdate = undefined;
+          }
+        }
+
+        destroy() {
+          this.clearUpdate();
+        }
       },
       {
-        decorations: (value) => value.decorations,
+        provide: (plugin) => [
+          EditorView.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration.none),
+          EditorView.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration.none),
+          EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration.none),
+        ],
       },
     ),
     formattingStyles,

package/src/extensions/mention.ts

@@ -5,6 +5,8 @@
 import { autocompletion, type CompletionContext, type CompletionResult } from '@codemirror/autocomplete';
 import type { Extension } from '@codemirror/state';
 
+import { log } from '@dxos/log';
+
 export type MentionOptions = {
   onSearch: (text: string) => string[];
 };
@@ -21,7 +23,7 @@ export const mention = ({ onSearch }: MentionOptions): Extension => {
     icons: false,
     override: [
       (context: CompletionContext): CompletionResult | null => {
-        console.log(context);
+        log.info('completion context', { context });
 
         const match = context.matchBefore(/@(\w+)?/);
         if (!match || (match.from === match.to && !context.explicit)) {

package/src/extensions/util/dom.ts

@@ -0,0 +1,36 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// Copied from @codemirror/view
+
+export interface Rect {
+  readonly left: number;
+  readonly right: number;
+  readonly top: number;
+  readonly bottom: number;
+}
+
+export const flattenRect = (rect: Rect, left: boolean) => {
+  const x = left ? rect.left : rect.right;
+  return { left: x, right: x, top: rect.top, bottom: rect.bottom };
+};
+
+let scratchRange: Range | null;
+
+export const textRange = (node: Text, from: number, to = from) => {
+  const range = scratchRange || (scratchRange = document.createRange());
+  range.setEnd(node, to);
+  range.setStart(node, from);
+  return range;
+};
+
+export const clientRectsFor = (dom: Node) => {
+  if (dom.nodeType === 3) {
+    return textRange(dom as Text, 0, dom.nodeValue!.length).getClientRects();
+  } else if (dom.nodeType === 1) {
+    return (dom as HTMLElement).getClientRects();
+  } else {
+    return [] as any as DOMRectList;
+  }
+};

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

@@ -11,12 +11,13 @@ import { type AutomergeTextCompat, getRawDoc } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { isAutomergeObject, type Space, type TextObject } from '@dxos/react-client/echo';
 import { type Identity } from '@dxos/react-client/halo';
+import { type HuePalette, 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';
-import { cursorColor } from '../styles';
 
 export type useTextExtensionsProps = {
   id: string;
@@ -29,6 +30,10 @@ export type useTextExtensionsProps = {
 export const useTextExtensions = ({ id, text, space, identity }: useTextExtensionsProps): Extension[] => {
   const extensions: Extension[] = [automerge(text)];
 
+  const peerId = identity?.identityKey.toHex();
+  const { cursorLightValue, cursorDarkValue } =
+    hueTokens[(identity?.profile?.data?.hue as HuePalette | undefined) ?? hexToHue(peerId ?? '0')];
+
   if (space && identity) {
     const awarenessProvider = new SpaceAwarenessProvider({
       space,
@@ -36,8 +41,8 @@ export const useTextExtensions = ({ id, text, space, identity }: useTextExtensio
       peerId: identity.identityKey.toHex(),
       info: {
         displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
-        color: cursorColor.color,
-        lightColor: cursorColor.light,
+        color: cursorDarkValue,
+        lightColor: cursorLightValue,
       },
     });
 
@@ -64,6 +69,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,
@@ -72,10 +78,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;
   }
@@ -84,6 +90,10 @@ const createModel = ({ space, identity, text }: UseTextModelProps) => {
   const obj = text as any as AutomergeTextCompat;
   const doc = getRawDoc(obj, [obj.field]);
 
+  const peerId = identity?.identityKey.toHex();
+  const { cursorLightValue, cursorDarkValue } =
+    hueTokens[(identity?.profile?.data?.hue as HuePalette | undefined) ?? hexToHue(peerId ?? '0')];
+
   const awarenessProvider =
     space &&
     new SpaceAwarenessProvider({
@@ -91,29 +101,21 @@ const createModel = ({ space, identity, text }: UseTextModelProps) => {
       channel: `automerge.awareness.${obj.id}`,
       info: {
         displayName: identity ? identity.profile?.displayName ?? generateName(identity.identityKey.toHex()) : undefined,
-        color: cursorColor.color,
-        lightColor: cursorColor.light,
+        color: cursorLightValue,
+        lightColor: cursorDarkValue,
       },
       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/styles/index.ts

@@ -2,7 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './cursors';
 export * from './markdown';
 export * from './tokens';
 export * from './layout';

package/src/themes/default.ts

@@ -152,6 +152,7 @@ export const defaultTheme: ThemeStyles = {
   //
   '.cm-tooltip': {
     border: 'none',
+    background: 'unset',
   },
   '.cm-tooltip-below': {},
 

package/src/util.ts

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

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"}