@dxos/react-ui-editor 0.4.8-main.3a03fb7 → 0.4.8-main.4a229ac

package/dist/lib/browser/index.mjs

@@ -15,6 +15,7 @@ var translations_default = [
         "blockquote label": "Block quote",
         "codeblock label": "Code block",
         "comment label": "Create comment",
+        "image label": "Insert image",
         "heading label": "Heading level",
         "table label": "Create table"
       }
@@ -32,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";
 
@@ -1831,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 ?? []
           })
         });
       }
@@ -2796,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";
@@ -3163,7 +3165,7 @@ var removeLink = ({ state: state2, dispatch }) => {
   }));
   return true;
 };
-var addLink = ({ state: state2, dispatch }) => {
+var addLink = ({ url, image: image2 } = {}) => ({ state: state2, dispatch }) => {
   const changes = state2.changeByRange((range) => {
     let { from, to } = range;
     const cutStyles = [];
@@ -3234,15 +3236,15 @@ var addLink = ({ state: state2, dispatch }) => {
     }
     changes2.push({
       from,
-      insert: "["
+      insert: image2 ? "![" : "["
     }, {
       from: to,
-      insert: "]()"
+      insert: `](${url ?? ""})`
     });
     const changeSet = state2.changes(changes2.concat(changesAfter));
     return {
       changes: changeSet,
-      range: EditorSelection.cursor(changeSet.mapPos(to, 1) - cursorOffset)
+      range: EditorSelection.cursor(changeSet.mapPos(to, 1) - cursorOffset - (url ? url.length + 2 : 0))
     };
   });
   if (changes.changes.empty) {
@@ -3864,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);
       }
     }
@@ -3959,6 +3961,8 @@ var ImageWidget = class extends WidgetType4 {
     return img;
   }
 };
+var imageUpload = (options = {}) => {
+};
 
 // packages/ui/react-ui-editor/src/extensions/markdown/link.ts
 import { syntaxTree as syntaxTree4 } from "@codemirror/language";
@@ -4312,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
   ]);
@@ -4330,7 +4334,7 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, c
     autoFocus
   ]);
   useEffect2(() => {
-    log9("updating", {
+    log9("create", {
       id,
       instanceId
     }, {
@@ -4390,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,
@@ -4421,9 +4433,10 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, c
 });
 
 // packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
-import { ChatText, Code, CodeBlock, 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, { 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";
 var tooltipProps = {
@@ -4457,7 +4470,7 @@ var ToolbarRoot = ({ children, onAction, classNames, state: state2 }) => {
 };
 var buttonStyles = "min-bs-0 p-2";
 var iconStyles = getSize(5);
-var ToolbarButton = ({ Icon, children, ...props }) => {
+var ToolbarToggleButton = ({ Icon, children, ...props }) => {
   return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroupItem, {
@@ -4470,6 +4483,19 @@ var ToolbarButton = ({ Icon, children, ...props }) => {
     className: "sr-only"
   }, children))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
 };
+var ToolbarButton = ({ Icon, children, ...props }) => {
+  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
+    variant: "ghost",
+    ...props,
+    classNames: buttonStyles
+  }, /* @__PURE__ */ React2.createElement(Icon, {
+    className: iconStyles
+  }), /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, children))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
+};
 var ToolbarSeparator = () => /* @__PURE__ */ React2.createElement("div", {
   role: "separator",
   className: "grow"
@@ -4482,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) => {
@@ -4580,7 +4606,7 @@ var MarkdownStyles = () => {
   return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
     type: "multiple",
     value: markdownStyles.filter(({ getState }) => state2 && getState(state2)).map(({ type }) => type)
-  }, markdownStyles.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  }, markdownStyles.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarToggleButton, {
     key: type,
     value: type,
     Icon,
@@ -4614,7 +4640,7 @@ var MarkdownLists = () => {
   return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
     type: "single",
     value: state2?.listStyle ? `list-${state2.listStyle}` : ""
-  }, markdownLists.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  }, markdownLists.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarToggleButton, {
     key: type,
     value: type,
     Icon,
@@ -4649,7 +4675,7 @@ var MarkdownBlocks = () => {
   return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
     type: "single",
     value: value?.type ?? ""
-  }, markdownBlocks.map(({ type, disabled, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  }, markdownBlocks.map(({ type, disabled, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarToggleButton, {
     key: type,
     value: type,
     Icon,
@@ -4661,30 +4687,68 @@ var MarkdownBlocks = () => {
   }, t(`${type} label`))));
 };
 var MarkdownStandard = () => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(MarkdownHeading, null), /* @__PURE__ */ React2.createElement(MarkdownStyles, null), /* @__PURE__ */ React2.createElement(MarkdownLists, null), /* @__PURE__ */ React2.createElement(MarkdownBlocks, null));
-var MarkdownExtended = () => {
+var MarkdownCustom = ({ onUpload } = {}) => {
   const { onAction } = useToolbarContext("MarkdownStyles");
   const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
-    variant: "ghost",
+  const { acceptedFiles, getInputProps, open } = useDropzone({
+    multiple: false,
+    noDrag: true,
+    accept: {
+      "image/*": [
+        ".jpg",
+        ".jpeg",
+        ".png",
+        ".gif"
+      ]
+    }
+  });
+  useEffect3(() => {
+    if (onUpload && acceptedFiles.length) {
+      setTimeout(async () => {
+        const f = acceptedFiles[0];
+        const file = new File([
+          f
+        ], f.name, {
+          type: f.type,
+          lastModified: f.lastModified
+        });
+        const { url } = await onUpload(file);
+        if (url) {
+          onAction?.({
+            type: "image",
+            data: url
+          });
+        }
+      });
+    }
+  }, [
+    acceptedFiles
+  ]);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("input", getInputProps()), /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    value: "image",
+    Icon: Image,
+    onClick: () => open()
+  }, t("image label")));
+};
+var MarkdownActions = () => {
+  const { onAction } = useToolbarContext("MarkdownStyles");
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    value: "comment",
+    Icon: ChatText,
     "data-testid": "editor.toolbar.comment",
     onClick: () => onAction?.({
       type: "comment"
-    }),
-    classNames: buttonStyles
-  }, /* @__PURE__ */ React2.createElement(ChatText, {
-    className: iconStyles
-  }), /* @__PURE__ */ React2.createElement("span", {
-    className: "sr-only"
-  }, t("comment label")))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, t("comment label"), /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
+    })
+  }, t("comment label")));
 };
 var Toolbar = {
   Root: ToolbarRoot,
-  Button: ToolbarButton,
+  Button: ToolbarToggleButton,
   Separator: ToolbarSeparator,
   Markdown: MarkdownStandard,
-  Extended: MarkdownExtended
+  Custom: MarkdownCustom,
+  Actions: MarkdownActions
 };
 
 // packages/ui/react-ui-editor/src/hooks/useActionHandler.ts
@@ -4721,7 +4785,13 @@ var useActionHandler = (view) => {
         insertTable(view);
         break;
       case "link":
-        (action.data === false ? removeLink : addLink)(view);
+        (action.data === false ? removeLink : addLink())(view);
+        break;
+      case "image":
+        addLink({
+          url: action.data,
+          image: true
+        })(view);
         break;
       case "comment":
         createComment(view);
@@ -4751,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 useEffect3, 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);
-  useEffect3(() => {
+  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,
@@ -4772,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)
             });
@@ -4799,10 +4877,18 @@ 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);
-  useEffect3(() => {
+  useEffect4(() => {
     if (view) {
       if (!selection && !view.state.selection.main.anchor) {
         selection = EditorSelection2.single(view.state.doc.line(1).to);
@@ -4861,7 +4947,6 @@ export {
   callbackWrapper,
   command,
   comments,
-  compareFormatting,
   createBasicExtensions,
   createComment,
   createDataExtensions,
@@ -4879,10 +4964,12 @@ export {
   editorWithToolbarLayout,
   focusComment,
   focusEvent,
+  formattingEquals,
   formattingKeymap,
   getFormatting,
   getToken,
   image,
+  imageUpload,
   insertTable,
   keymap10 as keymap,
   linkTooltip,