editor: enable preview attachment button on desktop

packages/editor/src/extensions/attachment/component.tsx

@@ -87,7 +87,11 @@ export function AttachmentComponent(
           {selected && (
             <ToolbarGroup
               editor={editor}
-              tools={["removeAttachment", "downloadAttachment"]}
+              tools={[
+                "removeAttachment",
+                "downloadAttachment",
+                "previewAttachment"
+              ]}
               sx={{
                 boxShadow: "menu",
                 borderRadius: "default",

packages/editor/src/toolbar/tool-definitions.ts

@@ -351,6 +351,7 @@ export function getDefaultPresets() {
   return defaultPresets;
 }
 
+export const MOBILE_ONLY_TOOLS: ToolbarDefinition = [["previewAttachment"]];
 export const STATIC_TOOLBAR_GROUPS: ToolbarDefinition = [
   [
     "insertBlock",
@@ -358,7 +359,6 @@ export const STATIC_TOOLBAR_GROUPS: ToolbarDefinition = [
     "cellProperties",
     "imageSettings",
     "embedSettings",
-    "previewAttachment",
     "attachmentSettings",
     "linkSettings",
     "codeRemove",

packages/editor/src/toolbar/toolbar.tsx

@@ -22,7 +22,11 @@ import { Editor } from "../types";
 import { Flex, FlexProps } from "@theme-ui/components";
 import { ThemeProvider } from "@emotion/react";
 import { EditorFloatingMenus } from "./floating-menus";
-import { getDefaultPresets, STATIC_TOOLBAR_GROUPS } from "./tool-definitions";
+import {
+  getDefaultPresets,
+  STATIC_TOOLBAR_GROUPS,
+  MOBILE_ONLY_TOOLS
+} from "./tool-definitions";
 import { useEffect, useMemo } from "react";
 import {
   ToolbarLocation,
@@ -56,12 +60,14 @@ export function Toolbar(props: ToolbarProps) {
     sx,
     ...flexProps
   } = props;
-  const toolbarTools = useMemo(
-    () => [...STATIC_TOOLBAR_GROUPS, ...tools],
-    [tools]
-  );
-
   const isMobile = useIsMobile();
+  const toolbarTools = useMemo(
+    () =>
+      isMobile
+        ? [...STATIC_TOOLBAR_GROUPS, ...MOBILE_ONLY_TOOLS, ...tools]
+        : [...STATIC_TOOLBAR_GROUPS, ...tools],
+    [tools, isMobile]
+  );
 
   const setToolbarLocation = useToolbarStore(
     (store) => store.setToolbarLocation