From cc9141c981eaa7165699d918ec3c26fc83b6f84a Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Wed, 24 May 2023 15:49:59 +0500
Subject: [PATCH] editor: enable preview attachment button on desktop

---
 .../src/extensions/attachment/component.tsx    |  6 +++++-
 .../editor/src/toolbar/tool-definitions.ts     |  2 +-
 packages/editor/src/toolbar/toolbar.tsx        | 18 ++++++++++++------
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/editor/src/extensions/attachment/component.tsx b/packages/editor/src/extensions/attachment/component.tsx
index bbf602590..75c28189f 100644
--- a/packages/editor/src/extensions/attachment/component.tsx
+++ b/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",
diff --git a/packages/editor/src/toolbar/tool-definitions.ts b/packages/editor/src/toolbar/tool-definitions.ts
index e30ad2382..8d6d3fd44 100644
--- a/packages/editor/src/toolbar/tool-definitions.ts
+++ b/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",
diff --git a/packages/editor/src/toolbar/toolbar.tsx b/packages/editor/src/toolbar/toolbar.tsx
index cfb654ef2..795caa410 100644
--- a/packages/editor/src/toolbar/toolbar.tsx
+++ b/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