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

package/src/components/Toolbar/Toolbar.tsx

@@ -13,7 +13,6 @@ import {
   ListChecks,
   ListNumbers,
   Paragraph,
-  Quotes,
   TextStrikethrough,
   Table,
   TextB,
@@ -24,6 +23,7 @@ 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 | undefined;
+    state: Formatting | null;
     onAction?: (action: Action) => void;
   }>
 >;
@@ -355,7 +355,6 @@ const MarkdownCustom = ({ onUpload }: MarkdownCustomOptions = {}) => {
       'image/*': ['.jpg', '.jpeg', '.png', '.gif'],
     },
   });
-
   useEffect(() => {
     if (onUpload && acceptedFiles.length) {
       setTimeout(async () => {
@@ -389,15 +388,9 @@ const MarkdownActions = () => {
   const { onAction } = useToolbarContext('MarkdownStyles');
   const { t } = useTranslation(translationKey);
   return (
-    <>
-      {/* TODO(burdon): Toggle readonly state. */}
-      {/* <ToolbarButton value='comment' Icon={BookOpenText} onClick={() => onAction?.({ type: 'comment' })}> */}
-      {/*  {t('comment label')} */}
-      {/* </ToolbarButton> */}
-      <ToolbarButton value='comment' Icon={ChatText} onClick={() => onAction?.({ type: 'comment' })}>
-        {t('comment label')}
-      </ToolbarButton>
-    </>
+    <ToolbarButton value='comment' Icon={ChatText} onClick={() => onAction?.({ type: 'comment' })}>
+      {t('comment label')}
+    </ToolbarButton>
   );
 };
 

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: comments ?? [] }),
+          effects: setComments.of({ id, comments }),
         });
       }
     }

package/src/extensions/markdown/formatting.ts

@@ -15,9 +15,7 @@ import {
 } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 import { type SyntaxNodeRef, type SyntaxNode } from '@lezer/common';
-import { useMemo } from 'react';
-
-import { useStateRef } from '@dxos/react-async';
+import { useState, useMemo } from 'react';
 
 // Markdown refs:
 // https://github.github.com/gfm
@@ -58,7 +56,7 @@ export type Formatting = {
   listStyle: null | 'ordered' | 'bullet' | 'task';
 };
 
-export const formattingEquals = (a: Formatting, b: Formatting) =>
+export const compareFormatting = (a: Formatting, b: Formatting) =>
   a.blockType === b.blockType &&
   a.strong === b.strong &&
   a.emphasis === b.emphasis &&
@@ -1063,7 +1061,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.
@@ -1222,18 +1220,16 @@ export const getFormatting = (state: EditorState): Formatting => {
 };
 
 /**
- * Hook provides an extension to compute the current formatting state.
+ * Hook computes the current formatting state.
  */
-export const useFormattingState = (): [Formatting | undefined, Extension] => {
-  const [state, setState, stateRef] = useStateRef<Formatting>();
+export const useFormattingState = (): [Formatting | null, Extension] => {
+  const [state, setState] = useState<Formatting | null>(null);
   const observer = useMemo(
     () =>
       EditorView.updateListener.of((update) => {
         if (update.docChanged || update.selectionSet) {
           const newState = getFormatting(update.state);
-          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
+          if (!state || !compareFormatting(state, newState)) {
             setState(newState);
           }
         }

package/src/hooks/useTextEditor.ts

@@ -33,8 +33,6 @@ 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,
@@ -71,7 +69,6 @@ export const useTextEditor = (cb: () => UseTextEditorProps = () => ({}), deps: D
     }
 
     return () => {
-      log('destroy', { id });
       view?.destroy();
     };
   }, deps);