From 2aae58ac4e2401ffc388ed960aa1aea22a75f36a Mon Sep 17 00:00:00 2001
From: thecodrr <thecodrr@protonmail.com>
Date: Mon, 20 Jun 2022 06:06:45 +0500
Subject: [PATCH] fix: don't move attachment toolbar with scroll

---
 .../dist/extensions/attachment/component.js   | 64 ++++++++-----------
 .../src/extensions/attachment/component.tsx   | 21 ++----
 2 files changed, 33 insertions(+), 52 deletions(-)

diff --git a/packages/editor/dist/extensions/attachment/component.js b/packages/editor/dist/extensions/attachment/component.js
index 787da5e06..124a6e090 100644
--- a/packages/editor/dist/extensions/attachment/component.js
+++ b/packages/editor/dist/extensions/attachment/component.js
@@ -16,46 +16,38 @@ import { useRef } from "react";
 // import { MenuPresenter } from "../../components/menu/menu";
 import { Icon } from "../../toolbar/components/icon";
 import { Icons } from "../../toolbar/icons";
-import { PopupPresenter } from "../../components/popup-presenter";
 export function AttachmentComponent(props) {
     var editor = props.editor, node = props.node, selected = props.selected;
     var _a = node.attrs, hash = _a.hash, filename = _a.filename, size = _a.size, progress = _a.progress;
     var elementRef = useRef();
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, __assign({ ref: elementRef, as: "span", contentEditable: false, variant: "body", sx: {
-                    display: "inline-flex",
-                    overflow: "hidden",
-                    position: "relative",
-                    justifyContent: "center",
-                    userSelect: "none",
-                    alignItems: "center",
-                    backgroundColor: "bgSecondary",
-                    px: 1,
-                    borderRadius: "default",
-                    border: "1px solid var(--border)",
-                    cursor: "pointer",
-                    maxWidth: 250,
-                    borderColor: selected ? "primary" : "border",
-                    ":hover": {
-                        bg: "hover",
-                    },
-                }, title: filename }, { children: [_jsx(Icon, { path: Icons.attachment, size: 14 }), _jsx(Text, __assign({ as: "span", sx: {
-                            ml: "small",
-                            fontSize: "body",
-                            whiteSpace: "nowrap",
-                            textOverflow: "ellipsis",
-                            overflow: "hidden",
-                        } }, { children: filename })), _jsx(Text, __assign({ as: "span", sx: {
-                            ml: 1,
-                            fontSize: "0.65rem",
-                            color: "fontTertiary",
-                            flexShrink: 0,
-                        } }, { children: progress ? "".concat(progress, "%") : formatBytes(size) }))] })), _jsx(PopupPresenter, __assign({ isOpen: selected, onClose: function () { }, blocking: false, focusOnRender: false, position: {
-                    target: elementRef.current || undefined,
-                    align: "center",
-                    location: "top",
-                    yOffset: 5,
-                    isTargetAbsolute: true,
-                } }, { children: _jsx(AttachmentToolbar, { editor: editor }) }))] }));
+    return (_jsx(_Fragment, { children: _jsxs(Box, __assign({ ref: elementRef, as: "span", contentEditable: false, variant: "body", sx: {
+                display: "inline-flex",
+                position: "relative",
+                justifyContent: "center",
+                userSelect: "none",
+                alignItems: "center",
+                backgroundColor: "bgSecondary",
+                px: 1,
+                borderRadius: "default",
+                border: "1px solid var(--border)",
+                cursor: "pointer",
+                maxWidth: 250,
+                borderColor: selected ? "primary" : "border",
+                ":hover": {
+                    bg: "hover",
+                },
+            }, title: filename }, { children: [_jsx(Icon, { path: Icons.attachment, size: 14 }), _jsx(Text, __assign({ as: "span", sx: {
+                        ml: "small",
+                        fontSize: "body",
+                        whiteSpace: "nowrap",
+                        textOverflow: "ellipsis",
+                        overflow: "hidden",
+                    } }, { children: filename })), _jsx(Text, __assign({ as: "span", sx: {
+                        ml: 1,
+                        fontSize: "0.65rem",
+                        color: "fontTertiary",
+                        flexShrink: 0,
+                    } }, { children: progress ? "".concat(progress, "%") : formatBytes(size) })), selected && (_jsx(Flex, __assign({ sx: { position: "absolute", top: -35 } }, { children: _jsx(AttachmentToolbar, { editor: editor }) })))] })) }));
 }
 function formatBytes(bytes, decimals) {
     if (decimals === void 0) { decimals = 1; }
diff --git a/packages/editor/src/extensions/attachment/component.tsx b/packages/editor/src/extensions/attachment/component.tsx
index dfd86f8e1..27ecb2bc5 100644
--- a/packages/editor/src/extensions/attachment/component.tsx
+++ b/packages/editor/src/extensions/attachment/component.tsx
@@ -25,7 +25,6 @@ export function AttachmentComponent(
         variant={"body"}
         sx={{
           display: "inline-flex",
-          overflow: "hidden",
           position: "relative",
           justifyContent: "center",
           userSelect: "none",
@@ -67,22 +66,12 @@ export function AttachmentComponent(
         >
           {progress ? `${progress}%` : formatBytes(size)}
         </Text>
+        {selected && (
+          <Flex sx={{ position: "absolute", top: -35 }}>
+            <AttachmentToolbar editor={editor} />
+          </Flex>
+        )}
       </Box>
-      <PopupPresenter
-        isOpen={selected}
-        onClose={() => {}}
-        blocking={false}
-        focusOnRender={false}
-        position={{
-          target: elementRef.current || undefined,
-          align: "center",
-          location: "top",
-          yOffset: 5,
-          isTargetAbsolute: true,
-        }}
-      >
-        <AttachmentToolbar editor={editor} />
-      </PopupPresenter>
     </>
   );
 }