@dxos/react-ui-editor 0.4.8-main.beadd4b → 0.4.8-main.c0be0d1

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -16,17 +16,17 @@ import { withTheme } from '@dxos/storybook-utils';
 import { Toolbar } from './Toolbar';
 import {
   type Comment,
-  decorateMarkdown,
   comments,
   createBasicExtensions,
   createDataExtensions,
+  createMarkdownExtensions,
   createThemeExtensions,
+  decorateMarkdown,
   formattingKeymap,
+  image,
   table,
   useComments,
   useFormattingState,
-  createMarkdownExtensions,
-  image,
 } from '../../extensions';
 import { useActionHandler, useDocAccessor, useTextEditor } from '../../hooks';
 import translations from '../../translations';
@@ -34,15 +34,17 @@ import translations from '../../translations';
 faker.seed(101);
 
 const Story: FC<{ content: string }> = ({ content }) => {
+  console.log('STORY');
   const { themeMode } = useThemeContext();
   const [item] = useState({ text: new TextObject(content) });
   const { id, doc, accessor } = useDocAccessor(item.text);
   const [formattingState, formattingObserver] = useFormattingState();
-  const { parentRef, view } = useTextEditor(
-    () => ({
+  const { parentRef, view } = useTextEditor(() => {
+    return {
       id,
       doc,
       extensions: [
+        formattingObserver,
         createBasicExtensions(),
         createMarkdownExtensions({ themeMode }),
         createThemeExtensions({ themeMode, slots: { editor: { className: 'p-2' } } }),
@@ -58,40 +60,36 @@ const Story: FC<{ content: string }> = ({ content }) => {
         formattingKeymap(),
         image(),
         table(),
-        formattingObserver,
       ],
-    }),
-    [id, accessor, themeMode],
-  );
+    };
+  }, [id, accessor, formattingObserver, themeMode]);
+
+  const handleAction = useActionHandler(view);
 
   const [_comments, setComments] = useState<Comment[]>([]);
   useComments(view, id, _comments);
 
-  const handleAction = useActionHandler(view);
-
   return (
-    <div role='none' className='fixed inset-0 flex flex-col'>
-      <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
-        <Toolbar.Markdown />
-        <Toolbar.Custom onUpload={async (file) => ({ url: file.name })} />
-        <Toolbar.Separator />
-        <Toolbar.Actions />
-      </Toolbar.Root>
-      <div ref={parentRef} className={textBlockWidth} />
-    </div>
+    <Tooltip.Provider>
+      <div role='none' className='fixed inset-0 flex flex-col'>
+        <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
+          <Toolbar.Markdown />
+          <Toolbar.Custom onUpload={async (file) => ({ url: file.name })} />
+          <Toolbar.Separator />
+          <Toolbar.Actions />
+        </Toolbar.Root>
+        <div ref={parentRef} className={textBlockWidth} />
+      </div>
+    </Tooltip.Provider>
   );
 };
 
 export default {
   title: 'react-ui-editor/Toolbar',
   component: Toolbar,
-  render: (args: any) => (
-    <Tooltip.Provider>
-      <Story {...args} />
-    </Tooltip.Provider>
-  ),
   decorators: [withTheme],
   parameters: { translations, layout: 'fullscreen' },
+  render: (args: any) => <Story {...args} />,
 };
 
 const content = [

package/src/components/Toolbar/Toolbar.tsx

@@ -13,6 +13,7 @@ import {
   ListChecks,
   ListNumbers,
   Paragraph,
+  Quotes,
   TextStrikethrough,
   Table,
   TextB,
@@ -23,7 +24,6 @@ import {
   TextHFive,
   TextHSix,
   TextItalic,
-  Quotes,
 } from '@phosphor-icons/react';
 import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren, useEffect, useRef, useState } from 'react';
@@ -33,9 +33,9 @@ import {
   DensityProvider,
   ElevationProvider,
   Select,
-  type ThemedClassName,
   Toolbar as NaturalToolbar,
   Tooltip,
+  type ThemedClassName,
   type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,
   type ToolbarButtonProps as NaturalToolbarButtonProps,
   useTranslation,
@@ -83,7 +83,7 @@ export type Action = {
 
 export type ToolbarProps = ThemedClassName<
   PropsWithChildren<{
-    state: Formatting | null;
+    state: Formatting | undefined;
     onAction?: (action: Action) => void;
   }>
 >;
@@ -355,6 +355,7 @@ const MarkdownCustom = ({ onUpload }: MarkdownCustomOptions = {}) => {
       'image/*': ['.jpg', '.jpeg', '.png', '.gif'],
     },
   });
+
   useEffect(() => {
     if (onUpload && acceptedFiles.length) {
       setTimeout(async () => {
@@ -388,9 +389,20 @@ const MarkdownActions = () => {
   const { onAction } = useToolbarContext('MarkdownStyles');
   const { t } = useTranslation(translationKey);
   return (
-    <ToolbarButton value='comment' Icon={ChatText} onClick={() => onAction?.({ type: 'comment' })}>
-      {t('comment label')}
-    </ToolbarButton>
+    <>
+      {/* TODO(burdon): Toggle readonly state. */}
+      {/* <ToolbarButton value='comment' Icon={BookOpenText} onClick={() => onAction?.({ type: 'comment' })}> */}
+      {/*  {t('comment label')} */}
+      {/* </ToolbarButton> */}
+      <ToolbarButton
+        value='comment'
+        Icon={ChatText}
+        data-testid='editor.toolbar.comment'
+        onClick={() => onAction?.({ type: 'comment' })}
+      >
+        {t('comment label')}
+      </ToolbarButton>
+    </>
   );
 };
 

package/src/extensions/automerge/automerge.ts

@@ -60,16 +60,16 @@ export const automerge = (accessor: DocAccessor): Extension => {
     ViewPlugin.fromClass(
       class {
         constructor(private readonly _view: EditorView) {
-          accessor.handle.addListener('change', this._handleChange.bind(this));
+          accessor.handle.addListener('change', this._handleChange);
         }
 
         destroy() {
-          accessor.handle.removeListener('change', this._handleChange.bind(this));
+          accessor.handle.removeListener('change', this._handleChange);
         }
 
-        _handleChange() {
+        readonly _handleChange = () => {
           syncer.reconcile(this._view, false);
-        }
+        };
       },
     ),
 

package/src/extensions/comments.ts

@@ -508,14 +508,14 @@ export const focusComment = (view: EditorView, id: string, center = true) => {
 /**
  * Update comments state field.
  */
-export const useComments = (view: EditorView | null | undefined, id: string, comments: Comment[] = []) => {
+export const useComments = (view: EditorView | null | undefined, id: string, comments?: Comment[]) => {
   useEffect(() => {
     if (view) {
       // Check same document.
       // NOTE: Hook might be called before editor state is updated.
       if (id === view.state.facet(documentId)) {
         view.dispatch({
-          effects: setComments.of({ id, comments }),
+          effects: setComments.of({ id, comments: comments ?? [] }),
         });
       }
     }

package/src/extensions/markdown/formatting.ts

@@ -15,7 +15,9 @@ import {
 } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 import { type SyntaxNodeRef, type SyntaxNode } from '@lezer/common';
-import { useState, useMemo } from 'react';
+import { useMemo } from 'react';
+
+import { useStateRef } from '@dxos/react-async';
 
 // Markdown refs:
 // https://github.github.com/gfm
@@ -56,7 +58,7 @@ export type Formatting = {
   listStyle: null | 'ordered' | 'bullet' | 'task';
 };
 
-export const compareFormatting = (a: Formatting, b: Formatting) =>
+export const formattingEquals = (a: Formatting, b: Formatting) =>
   a.blockType === b.blockType &&
   a.strong === b.strong &&
   a.emphasis === b.emphasis &&
@@ -1061,7 +1063,7 @@ export const getFormatting = (state: EditorState): Formatting => {
   const inline: (boolean | null)[] = [null, null, null, null];
   let link: boolean = false;
   let blockQuote: boolean | null = null;
-  // False indicates mixed list styles
+  // False indicates mixed list styles.
   let listStyle: Formatting['listStyle'] | null | false = null;
 
   // Track block context for list/blockquote handling.
@@ -1220,16 +1222,18 @@ export const getFormatting = (state: EditorState): Formatting => {
 };
 
 /**
- * Hook computes the current formatting state.
+ * Hook provides an extension to compute the current formatting state.
  */
-export const useFormattingState = (): [Formatting | null, Extension] => {
-  const [state, setState] = useState<Formatting | null>(null);
+export const useFormattingState = (): [Formatting | undefined, Extension] => {
+  const [state, setState, stateRef] = useStateRef<Formatting>();
   const observer = useMemo(
     () =>
       EditorView.updateListener.of((update) => {
         if (update.docChanged || update.selectionSet) {
           const newState = getFormatting(update.state);
-          if (!state || !compareFormatting(state, newState)) {
+          if (!stateRef.current || !formattingEquals(stateRef.current, newState)) {
+            // TODO(burdon): Error on first click on toolbar.
+            //  Warning: React has detected a change in the order of Hooks called by ForwardRef. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks
             setState(newState);
           }
         }

package/src/hooks/useDocAccessor.ts

@@ -4,11 +4,17 @@
 
 import { useMemo } from 'react';
 
-import { createDocAccessor, type DocAccessor, getTextContent, type TextObject } from '@dxos/echo-schema';
+import {
+  createDocAccessor,
+  type DocAccessor,
+  getTextContent,
+  type TextObject,
+  type EchoReactiveObject,
+} from '@dxos/echo-schema';
 
 // TODO(burdon): Factor out.
 export const useDocAccessor = <T = any>(
-  text: TextObject,
+  text: TextObject | EchoReactiveObject<{ content: string }>,
 ): { id: string; doc: string | undefined; accessor: DocAccessor<T> } => {
   return useMemo(
     () => ({

package/src/hooks/useTextEditor.ts

@@ -33,6 +33,8 @@ export const useTextEditor = (cb: () => UseTextEditorProps = () => ({}), deps: D
   useEffect(() => {
     let view: EditorView;
     if (parentRef.current) {
+      log('create', { id });
+
       // https://codemirror.net/docs/ref/#state.EditorStateConfig
       const state = EditorState.create({
         doc,
@@ -69,6 +71,7 @@ export const useTextEditor = (cb: () => UseTextEditorProps = () => ({}), deps: D
     }
 
     return () => {
+      log('destroy', { id });
       view?.destroy();
     };
   }, deps);