Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-24 15:39:44 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: don't move attachment toolbar with scroll

Browse Source
This commit is contained in:
thecodrr
2022-06-20 06:06:45 +05:00
parent 18a5800652
commit 2aae58ac4e
2 changed files with 33 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
packages/editor/dist/extensions/attachment/component.js vendored
View File

@@ -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; }

21
packages/editor/src/extensions/attachment/component.tsx
View File

@@ -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>
</>
);
}