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

package/dist/lib/browser/index.mjs

@@ -33,7 +33,7 @@ import { Doc, YText, YXmlFragment } from "@dxos/text-model";
 import { EditorState as EditorState2 } from "@codemirror/state";
 import { EditorView as EditorView17 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
-import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState as useState2 } from "react";
+import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState } from "react";
 import { log as log9 } from "@dxos/log";
 import { isNotFalsy as isNotFalsy4 } from "@dxos/util";
 
@@ -475,13 +475,13 @@ var automerge = (accessor) => {
     ViewPlugin.fromClass(class {
       constructor(_view) {
         this._view = _view;
-        accessor.handle.addListener("change", this._handleChange.bind(this));
+        this._handleChange = () => {
+          syncer.reconcile(this._view, false);
+        };
+        accessor.handle.addListener("change", this._handleChange);
       }
       destroy() {
-        accessor.handle.removeListener("change", this._handleChange.bind(this));
-      }
-      _handleChange() {
-        syncer.reconcile(this._view, false);
+        accessor.handle.removeListener("change", this._handleChange);
       }
     }),
     // Reconcile local updates.
@@ -1832,14 +1832,14 @@ var focusComment = (view, id, center = true) => {
     });
   }
 };
-var useComments = (view, id, comments2 = []) => {
+var useComments = (view, id, comments2) => {
   useEffect(() => {
     if (view) {
       if (id === view.state.facet(documentId)) {
         view.dispatch({
           effects: setComments.of({
             id,
-            comments: comments2
+            comments: comments2 ?? []
           })
         });
       }
@@ -2797,8 +2797,9 @@ import { snippet } from "@codemirror/autocomplete";
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { EditorSelection } from "@codemirror/state";
 import { EditorView as EditorView13, keymap as keymap6 } from "@codemirror/view";
-import { useState, useMemo } from "react";
-var compareFormatting = (a, b) => a.blockType === b.blockType && a.strong === b.strong && a.emphasis === b.emphasis && a.strikethrough === b.strikethrough && a.code === b.code && a.link === b.link && a.listStyle === b.listStyle && a.blockQuote === b.blockQuote;
+import { useMemo } from "react";
+import { useStateRef } from "@dxos/react-async";
+var formattingEquals = (a, b) => a.blockType === b.blockType && a.strong === b.strong && a.emphasis === b.emphasis && a.strikethrough === b.strikethrough && a.code === b.code && a.link === b.link && a.listStyle === b.listStyle && a.blockQuote === b.blockQuote;
 var Inline;
 (function(Inline2) {
   Inline2[Inline2["Strong"] = 0] = "Strong";
@@ -3865,11 +3866,11 @@ var getFormatting = (state2) => {
   };
 };
 var useFormattingState = () => {
-  const [state2, setState] = useState(null);
+  const [state2, setState, stateRef] = useStateRef();
   const observer = useMemo(() => EditorView13.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       const newState = getFormatting(update2.state);
-      if (!state2 || !compareFormatting(state2, newState)) {
+      if (!stateRef.current || !formattingEquals(stateRef.current, newState)) {
         setState(newState);
       }
     }
@@ -4315,12 +4316,12 @@ var instanceCount = 0;
 var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, className, autoFocus, scrollTo = EditorView17.scrollIntoView(0, {
   yMargin: 0
 }), moveToEndOfLine, debug, dataTestId }, forwardedRef) => {
-  const [instanceId] = useState2(() => `text-editor-${++instanceCount}`);
+  const [instanceId] = useState(() => `text-editor-${++instanceCount}`);
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
   });
   const rootRef = useRef(null);
-  const [view, setView] = useState2(null);
+  const [view, setView] = useState(null);
   useImperativeHandle(forwardedRef, () => view, [
     view
   ]);
@@ -4333,7 +4334,7 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, c
     autoFocus
   ]);
   useEffect2(() => {
-    log9("updating", {
+    log9("create", {
       id,
       instanceId
     }, {
@@ -4393,8 +4394,16 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, c
     }
     setView(view2);
     return () => {
+      log9("destroy", {
+        id,
+        instanceId
+      }, {
+        F: __dxlog_file12,
+        L: 150,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
       view2?.destroy();
-      setView(null);
     };
   }, [
     doc,
@@ -4424,9 +4433,9 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, c
 });
 
 // packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
-import { ChatText, Code, CodeBlock, Image, Link, ListBullets, ListChecks, ListNumbers, Paragraph, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic, Quotes } from "@phosphor-icons/react";
+import { ChatText, Code, CodeBlock, Image, Link, ListBullets, ListChecks, ListNumbers, Paragraph, Quotes, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic } from "@phosphor-icons/react";
 import { createContext } from "@radix-ui/react-context";
-import React2, { useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+import React2, { useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
 import { useDropzone } from "react-dropzone";
 import { DensityProvider, ElevationProvider, Select, Toolbar as NaturalToolbar, Tooltip, useTranslation } from "@dxos/react-ui";
 import { getSize } from "@dxos/react-ui-theme";
@@ -4499,8 +4508,8 @@ var MarkdownHeading = () => {
   const value = header ? header[1] : blockType === "paragraph" || !blockType ? "0" : void 0;
   const HeadingIcon = HeadingIcons[value ?? "0"];
   const suppressNextTooltip = useRef2(false);
-  const [tooltipOpen, setTooltipOpen] = useState3(false);
-  const [selectOpen, setSelectOpen] = useState3(false);
+  const [tooltipOpen, setTooltipOpen] = useState2(false);
+  const [selectOpen, setSelectOpen] = useState2(false);
   return /* @__PURE__ */ React2.createElement(Tooltip.Root, {
     open: tooltipOpen,
     onOpenChange: (nextOpen) => {
@@ -4724,13 +4733,14 @@ var MarkdownCustom = ({ onUpload } = {}) => {
 var MarkdownActions = () => {
   const { onAction } = useToolbarContext("MarkdownStyles");
   const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ToolbarButton, {
     value: "comment",
     Icon: ChatText,
+    "data-testid": "editor.toolbar.comment",
     onClick: () => onAction?.({
       type: "comment"
     })
-  }, t("comment label"));
+  }, t("comment label")));
 };
 var Toolbar = {
   Root: ToolbarRoot,
@@ -4811,18 +4821,26 @@ var useDocAccessor = (text) => {
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorSelection as EditorSelection2, EditorState as EditorState3 } from "@codemirror/state";
 import { EditorView as EditorView18 } from "@codemirror/view";
-import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
 import { log as log10 } from "@dxos/log";
 import { isNotFalsy as isNotFalsy5 } from "@dxos/util";
 var __dxlog_file13 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
 var useTextEditor = (cb = () => ({}), deps = []) => {
   let { id, doc, selection, extensions, autoFocus, scrollTo, debug } = useMemo3(cb, deps ?? []);
   const onUpdate = useRef3();
-  const [view, setView] = useState4();
+  const [view, setView] = useState3();
   const parentRef = useRef3(null);
   useEffect4(() => {
     let view2;
     if (parentRef.current) {
+      log10("create", {
+        id
+      }, {
+        F: __dxlog_file13,
+        L: 36,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
       const state2 = EditorState3.create({
         doc,
         selection,
@@ -4832,7 +4850,7 @@ var useTextEditor = (cb = () => ({}), deps = []) => {
           EditorView18.exceptionSink.of((err) => {
             log10.catch(err, void 0, {
               F: __dxlog_file13,
-              L: 44,
+              L: 46,
               S: void 0,
               C: (f, a) => f(...a)
             });
@@ -4859,6 +4877,14 @@ var useTextEditor = (cb = () => ({}), deps = []) => {
       setView(view2);
     }
     return () => {
+      log10("destroy", {
+        id
+      }, {
+        F: __dxlog_file13,
+        L: 74,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
       view2?.destroy();
     };
   }, deps);
@@ -4921,7 +4947,6 @@ export {
   callbackWrapper,
   command,
   comments,
-  compareFormatting,
   createBasicExtensions,
   createComment,
   createDataExtensions,
@@ -4939,6 +4964,7 @@ export {
   editorWithToolbarLayout,
   focusComment,
   focusEvent,
+  formattingEquals,
   formattingKeymap,
   getFormatting,
   getToken,