Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2026-02-23 19:49:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

web: fix editor & note title resizing when window resizes

Browse Source 
Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>
This commit is contained in:
Abdullah Atta
2026-01-01 11:19:23 +05:00
parent 09b12c6d7e
commit 6dce41a070
2 changed files with 14 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
apps/web/src/components/editor/index.tsx
View File

@@ -56,7 +56,7 @@ import { useEditorManager } from "./manager";
import { saveAttachment, downloadAttachment } from "../../common/attachments";
import { EV, EVENTS } from "@notesnook/core";
import { db } from "../../common/db";
import Titlebox from "./title-box";
import Titlebox, { resizeTextarea } from "./title-box";
import Config from "../../utils/config";
import { ScopedThemeProvider } from "../theme-provider";
import { Lightbox } from "../lightbox";
@@ -77,7 +77,6 @@ import { onPageVisibilityChanged } from "../../utils/page-visibility";
import { Pane, SplitPane } from "../split-pane";
import { TITLE_BAR_HEIGHT } from "../title-bar";
import { isMobile } from "../../hooks/use-mobile";
import { isTablet } from "../../hooks/use-tablet";
import { ConfirmDialog } from "../../dialogs/confirm";
const PDFPreview = React.lazy(() => import("../pdf-preview"));
@@ -711,19 +710,25 @@ function EditorChrome(props: PropsWithChildren<EditorProps>) {
const child = editorContainerRef.current?.getBoundingClientRect();
if (!parent || !child || !editor || entries.length <= 0) return;
const CONTAINER_MARGIN = isMobile() || isTablet() ? 10 : 30;
const CONTAINER_MARGIN = isMobile() ? 10 : 30;
const negativeSpace = Math.abs(
parent.left - child.left - CONTAINER_MARGIN
);
requestAnimationFrame(() => {
if (!isMobile() && !isTablet()) {
if (!isMobile()) {
editor.style.marginLeft = `-${negativeSpace}px`;
editor.style.marginRight = `-${negativeSpace}px`;
editor.style.paddingLeft = `${negativeSpace}px`;
editor.style.paddingRight = `${negativeSpace}px`;
}
editor.style.paddingLeft = `${negativeSpace}px`;
editor.style.paddingRight = `${negativeSpace}px`;
});
const editorTitle = document.querySelector("#editor-title");
if (editorTitle instanceof HTMLTextAreaElement) {
resizeTextarea(editorTitle);
}
}
const observer = new ResizeObserver(debounce(onResize, 500));
observer.observe(editorScrollRef.current);
@@ -761,8 +766,8 @@ function EditorChrome(props: PropsWithChildren<EditorProps>) {
maxWidth: editorMargins ? "min(100%, 850px)" : "auto",
width: "100%"
}}
pl={[2, 2, 6]}
pr={[2, 2, 6]}
pl={[2, 6]}
pr={[2, 6]}
onClick={onRequestFocus}
>
{children}

2
apps/web/src/components/editor/title-box.tsx
View File

@@ -155,7 +155,7 @@ export default React.memo(TitleBox, (prevProps, nextProps) => {
return prevProps.readonly === nextProps.readonly;
});
function resizeTextarea(input: HTMLTextAreaElement) {
export function resizeTextarea(input: HTMLTextAreaElement) {
input.style.height = "auto";
requestAnimationFrame(() => {
input.style.height = input.scrollHeight + "px";