@dxos/react-ui-editor 0.9.0 → 0.9.1-staging.ee54ba693a

package/dist/lib/browser/index.mjs

@@ -286,6 +286,30 @@ var popoverStateField = StateField.define({
 var getLastIndexOf = (str, delimiters) => Math.max(...delimiters.map((delim) => str.lastIndexOf(delim)));
 
 // src/components/EditorMenuProvider/menu-presets.ts
+var openLinkQuery = (view, insert) => {
+  requestAnimationFrame(() => {
+    const { head } = view.state.selection.main;
+    const to = head + insert.length;
+    view.dispatch({
+      changes: {
+        from: head,
+        insert
+      },
+      selection: {
+        anchor: to,
+        head: to
+      },
+      // The popover trigger is the single "@"; a second "@" lives in the query range and switches to block mode.
+      effects: popoverRangeEffect.of({
+        trigger: "@",
+        range: {
+          from: head,
+          to
+        }
+      })
+    });
+  });
+};
 var formattingCommands = {
   id: "markdown",
   label: "Markdown",
@@ -372,49 +396,13 @@ var linkSlashCommands = {
       id: "inline-link",
       label: "Inline link",
       icon: "ph--link--regular",
-      onSelect: ({ view, head }) => {
-        view.dispatch({
-          changes: {
-            from: head,
-            insert: "@"
-          },
-          selection: {
-            anchor: head + 1,
-            head: head + 1
-          },
-          effects: popoverRangeEffect.of({
-            trigger: "@",
-            range: {
-              from: head,
-              to: head + 1
-            }
-          })
-        });
-      }
+      onSelect: ({ view }) => openLinkQuery(view, "@")
     },
     {
-      id: "block-embed",
-      label: "Block embed",
+      id: "inline-object",
+      label: "Inline object",
       icon: "ph--lego--regular",
-      onSelect: ({ view, head }) => {
-        view.dispatch({
-          changes: {
-            from: head,
-            insert: "@@"
-          },
-          selection: {
-            anchor: head + 2,
-            head: head + 2
-          },
-          effects: popoverRangeEffect.of({
-            trigger: "@",
-            range: {
-              from: head,
-              to: head + 2
-            }
-          })
-        });
-      }
+      onSelect: ({ view }) => openLinkQuery(view, "@@")
     }
   ]
 };
@@ -1020,10 +1008,11 @@ var addViewMode = (state, onViewModeChange) => (builder) => {
 };
 
 // src/components/EditorToolbar/EditorToolbar.tsx
+var SECTION_ROLE = "org.dxos.role.section";
 var EditorToolbar = /* @__PURE__ */ memo(({ classNames, role, attendableId, onAction, ...props }) => {
   const menuActions = useMarkdownMenuActions(props);
   return /* @__PURE__ */ React2.createElement(ElevationProvider, {
-    elevation: role === "section" ? "positioned" : "base"
+    elevation: role === SECTION_ROLE ? "positioned" : "base"
   }, /* @__PURE__ */ React2.createElement(Menu2.Root, {
     ...menuActions,
     attendableId,
@@ -1070,11 +1059,12 @@ import { mx } from "@dxos/ui-theme";
 import { useMemo as useMemo3 } from "react";
 import { useThemeContext as useThemeContext2 } from "@dxos/react-ui";
 import { createBasicExtensions, createMarkdownExtensions, createThemeExtensions, decorateMarkdown } from "@dxos/ui-editor";
-var useBasicMarkdownExtensions = ({ placeholder: placeholder2, decorate = true, extensions } = {}) => {
+var useBasicMarkdownExtensions = ({ placeholder: placeholder2, decorate = true, readonly = false, extensions } = {}) => {
   const { themeMode } = useThemeContext2();
   return useMemo3(() => [
     createBasicExtensions({
-      placeholder: placeholder2
+      placeholder: placeholder2,
+      readOnly: readonly
     }),
     createThemeExtensions({
       syntaxHighlighting: true,
@@ -1089,6 +1079,7 @@ var useBasicMarkdownExtensions = ({ placeholder: placeholder2, decorate = true,
     placeholder2,
     themeMode,
     decorate,
+    readonly,
     extensions
   ]);
 };