@dxos/react-ui-editor 0.4.8-main.e00e8f3 → 0.4.8-main.e23f3c5

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";
 
@@ -2797,8 +2797,7 @@ 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";
+import { useMemo, useState } from "react";
 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) {
@@ -3866,15 +3865,20 @@ var getFormatting = (state2) => {
   };
 };
 var useFormattingState = () => {
-  const [state2, setState, stateRef] = useStateRef();
+  const [state2, setState] = useState();
   const observer = useMemo(() => EditorView13.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
-      const newState = getFormatting(update2.state);
-      if (!stateRef.current || !formattingEquals(stateRef.current, newState)) {
-        setState(newState);
-      }
+      setState((prevState) => {
+        const newState = getFormatting(update2.state);
+        if (!prevState || !formattingEquals(prevState, newState)) {
+          return newState;
+        }
+        return prevState;
+      });
     }
-  }), []);
+  }), [
+    setState
+  ]);
   return [
     state2,
     observer
@@ -4316,12 +4320,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
   ]);
@@ -4435,7 +4439,7 @@ 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 { 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 +4512,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) => {
@@ -4821,14 +4825,14 @@ 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;