@dxos/react-ui-editor 0.6.1-main.ff751ec → 0.6.1

package/dist/lib/browser/index.mjs

@@ -35,7 +35,7 @@ import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 import { EditorState as EditorState2 } from "@codemirror/state";
 import { EditorView as EditorView16 } 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 as useState3 } from "react";
 import { log as log7 } from "@dxos/log";
 import { useDefaultValue } from "@dxos/react-ui";
 import { isNotFalsy as isNotFalsy4 } from "@dxos/util";
@@ -1350,11 +1350,14 @@ import { invertedEffects } from "@codemirror/commands";
 import { Facet as Facet4, StateEffect as StateEffect3, StateField as StateField4 } from "@codemirror/state";
 import { hoverTooltip, keymap as keymap4, Decoration as Decoration4, EditorView as EditorView7 } from "@codemirror/view";
 import sortBy from "lodash.sortby";
-import { useEffect } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { debounce } from "@dxos/async";
 import { log as log4 } from "@dxos/log";
 import { nonNullable } from "@dxos/util";
 
+// packages/ui/react-ui-editor/src/extensions/util/overlap.ts
+var overlap = (a, b) => a.from <= b.to && a.to >= b.from;
+
 // packages/ui/react-ui-editor/src/styles/markdown.ts
 import { mx } from "@dxos/react-ui-theme";
 var headings = {
@@ -1517,14 +1520,16 @@ var commentsDecorations = EditorView7.decorations.compute([
   const { selection: { current }, comments: comments2 } = state2.field(commentsState);
   const decorations = sortBy(comments2 ?? [], (range) => range.range.from)?.flatMap((comment) => {
     const range = comment.range;
-    if (!range || range.from === range.to) {
+    if (!range) {
       log4.warn("Invalid range:", range, {
         F: __dxlog_file6,
-        L: 132,
+        L: 141,
         S: void 0,
         C: (f, a) => f(...a)
       });
       return void 0;
+    } else if (range.from === range.to) {
+      return void 0;
     }
     if (comment.comment.id === current) {
       return commentCurrentMark.range(range.from, range.to);
@@ -1818,6 +1823,16 @@ var scrollThreadIntoView = (view, id, center = true) => {
     });
   }
 };
+var selectionOverlapsComment = (state2) => {
+  const { selection } = state2;
+  const commentState = state2.field(commentsState);
+  for (const range of selection.ranges) {
+    if (commentState.comments.some(({ range: commentRange }) => overlap(commentRange, range))) {
+      return true;
+    }
+  }
+  return false;
+};
 var useComments = (view, id, comments2) => {
   useEffect(() => {
     if (view) {
@@ -1836,6 +1851,18 @@ var useComments = (view, id, comments2) => {
     comments2
   ]);
 };
+var useCommentState = () => {
+  const [comment, setComment] = useState(false);
+  const observer = useMemo(() => EditorView7.updateListener.of((update2) => {
+    if (update2.docChanged || update2.selectionSet) {
+      setComment(() => selectionOverlapsComment(update2.state));
+    }
+  }), []);
+  return [
+    comment,
+    observer
+  ];
+};
 
 // packages/ui/react-ui-editor/src/extensions/doc.ts
 import { Facet as Facet5 } from "@codemirror/state";
@@ -2271,7 +2298,7 @@ import { snippet } from "@codemirror/autocomplete";
 import { syntaxTree } from "@codemirror/language";
 import { EditorSelection } from "@codemirror/state";
 import { EditorView as EditorView11, keymap as keymap6 } from "@codemirror/view";
-import { useMemo, useState } from "react";
+import { useMemo as useMemo2, useState as useState2 } 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) {
@@ -3360,8 +3387,8 @@ var getFormatting = (state2) => {
   };
 };
 var useFormattingState = () => {
-  const [state2, setState] = useState();
-  const observer = useMemo(() => EditorView11.updateListener.of((update2) => {
+  const [state2, setState] = useState2();
+  const observer = useMemo2(() => EditorView11.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       setState((prevState) => {
         const newState = getFormatting(update2.state);
@@ -4515,7 +4542,7 @@ var TextEditor = /* @__PURE__ */ forwardRef(({
   debug,
   dataTestId
 }, forwardedRef) => {
-  const [instanceId] = useState2(() => `text-editor-${++instanceCount}`);
+  const [instanceId] = useState3(() => `text-editor-${++instanceCount}`);
   const scrollTo = useDefaultValue(propsScrollTo, EditorView16.scrollIntoView(0, {
     yMargin: 0
   }));
@@ -4523,7 +4550,7 @@ var TextEditor = /* @__PURE__ */ forwardRef(({
     tabBehavior: "limited"
   });
   const rootRef = useRef(null);
-  const [view, setView] = useState2(null);
+  const [view, setView] = useState3(null);
   useImperativeHandle(forwardedRef, () => view, [
     view
   ]);
@@ -4638,7 +4665,7 @@ var TextEditor = /* @__PURE__ */ forwardRef(({
 // 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, CaretDown, Check } 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 useState4 } from "react";
 import { useDropzone } from "react-dropzone";
 import { DensityProvider, ElevationProvider, Toolbar as NaturalToolbar, Tooltip, useTranslation, DropdownMenu, Button } from "@dxos/react-ui";
 import { getSize } from "@dxos/react-ui-theme";
@@ -4711,8 +4738,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] = useState4(false);
+  const [selectOpen, setSelectOpen] = useState4(false);
   return /* @__PURE__ */ React2.createElement(Tooltip.Root, {
     open: tooltipOpen,
     onOpenChange: (nextOpen) => {
@@ -4924,7 +4951,7 @@ var MarkdownCustom = ({ onUpload } = {}) => {
   }, t("image label")));
 };
 var MarkdownActions = () => {
-  const { onAction } = useToolbarContext("MarkdownStyles");
+  const { onAction, state: state2 } = useToolbarContext("MarkdownStyles");
   const { t } = useTranslation(translationKey);
   return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ToolbarButton, {
     value: "comment",
@@ -4932,7 +4959,8 @@ var MarkdownActions = () => {
     "data-testid": "editor.toolbar.comment",
     onClick: () => onAction?.({
       type: "comment"
-    })
+    }),
+    disabled: !state2 || state2.comment
   }, t("comment label")));
 };
 var Toolbar = {
@@ -4953,14 +4981,14 @@ var useActionHandler = (view) => {
 import { EditorSelection as EditorSelection2, EditorState as EditorState3 } from "@codemirror/state";
 import { EditorView as EditorView17 } from "@codemirror/view";
 import { useFocusableGroup as useFocusableGroup2 } from "@fluentui/react-tabster";
-import { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef3, useState as useState4 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState5 } from "react";
 import { log as log8 } from "@dxos/log";
 import { isNotFalsy as isNotFalsy5 } from "@dxos/util";
 var __dxlog_file12 = "/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 } = useMemo2(cb, deps ?? []);
+  let { id, doc, selection, extensions, autoFocus, scrollTo, debug } = useMemo3(cb, deps ?? []);
   const onUpdate = useRef3();
-  const [view, setView] = useState4();
+  const [view, setView] = useState5();
   const parentRef = useRef3(null);
   useEffect4(() => {
     let view2;
@@ -5097,6 +5125,7 @@ export {
   callbackWrapper,
   command,
   comments,
+  commentsState,
   createBasicExtensions,
   createComment,
   createDataExtensions,
@@ -5135,6 +5164,7 @@ export {
   removeList,
   removeStyle,
   scrollThreadIntoView,
+  selectionOverlapsComment,
   setBlockquote,
   setComments,
   setHeading,
@@ -5154,6 +5184,7 @@ export {
   translations_default as translations,
   typewriter,
   useActionHandler,
+  useCommentState,
   useComments,
   useFormattingState,
   useTextEditor,