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

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 } from "react";
+import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState as useState2 } from "react";
 import { log as log9 } from "@dxos/log";
 import { isNotFalsy as isNotFalsy4 } from "@dxos/util";
 
@@ -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,9 +2797,8 @@ 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 { 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;
+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;
 var Inline;
 (function(Inline2) {
   Inline2[Inline2["Strong"] = 0] = "Strong";
@@ -3866,11 +3865,11 @@ var getFormatting = (state2) => {
   };
 };
 var useFormattingState = () => {
-  const [state2, setState, stateRef] = useStateRef();
+  const [state2, setState] = useState(null);
   const observer = useMemo(() => EditorView13.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       const newState = getFormatting(update2.state);
-      if (!stateRef.current || !formattingEquals(stateRef.current, newState)) {
+      if (!state2 || !compareFormatting(state2, newState)) {
         setState(newState);
       }
     }
@@ -4316,12 +4315,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] = useState(() => `text-editor-${++instanceCount}`);
+  const [instanceId] = useState2(() => `text-editor-${++instanceCount}`);
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
   });
   const rootRef = useRef(null);
-  const [view, setView] = useState(null);
+  const [view, setView] = useState2(null);
   useImperativeHandle(forwardedRef, () => view, [
     view
   ]);
@@ -4334,7 +4333,7 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, c
     autoFocus
   ]);
   useEffect2(() => {
-    log9("create", {
+    log9("updating", {
       id,
       instanceId
     }, {
@@ -4394,16 +4393,8 @@ 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,
@@ -4433,9 +4424,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, Quotes, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic } from "@phosphor-icons/react";
+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 { createContext } from "@radix-ui/react-context";
-import React2, { useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
+import React2, { useEffect as useEffect3, useRef as useRef2, useState as useState3 } 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";
@@ -4508,8 +4499,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] = useState2(false);
-  const [selectOpen, setSelectOpen] = useState2(false);
+  const [tooltipOpen, setTooltipOpen] = useState3(false);
+  const [selectOpen, setSelectOpen] = useState3(false);
   return /* @__PURE__ */ React2.createElement(Tooltip.Root, {
     open: tooltipOpen,
     onOpenChange: (nextOpen) => {
@@ -4733,13 +4724,13 @@ var MarkdownCustom = ({ onUpload } = {}) => {
 var MarkdownActions = () => {
   const { onAction } = useToolbarContext("MarkdownStyles");
   const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  return /* @__PURE__ */ React2.createElement(ToolbarButton, {
     value: "comment",
     Icon: ChatText,
     onClick: () => onAction?.({
       type: "comment"
     })
-  }, t("comment label")));
+  }, t("comment label"));
 };
 var Toolbar = {
   Root: ToolbarRoot,
@@ -4820,26 +4811,18 @@ 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 useState3 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState4 } 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] = useState3();
+  const [view, setView] = useState4();
   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,
@@ -4849,7 +4832,7 @@ var useTextEditor = (cb = () => ({}), deps = []) => {
           EditorView18.exceptionSink.of((err) => {
             log10.catch(err, void 0, {
               F: __dxlog_file13,
-              L: 46,
+              L: 44,
               S: void 0,
               C: (f, a) => f(...a)
             });
@@ -4876,14 +4859,6 @@ 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);
@@ -4946,6 +4921,7 @@ export {
   callbackWrapper,
   command,
   comments,
+  compareFormatting,
   createBasicExtensions,
   createComment,
   createDataExtensions,
@@ -4963,7 +4939,6 @@ export {
   editorWithToolbarLayout,
   focusComment,
   focusEvent,
-  formattingEquals,
   formattingKeymap,
   getFormatting,
   getToken,