/*
This file is part of the Notesnook project (https://notesnook.com/)
Copyright (C) 2023 Streetwriters (Private) Limited
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see .
*/
import "@notesnook/editor/styles/styles.css";
import { Monograph } from "./types";
import {
Box,
Button,
Flex,
Image,
Input,
Link,
Text
} from "@theme-ui/components";
import { ClientOnly } from "remix-utils/client-only";
import { Editor } from "./editor.client";
import { formatDate } from "@notesnook/core";
import { slugify } from "../../utils/slugify";
import { useCallback, useEffect, useRef, useState } from "react";
import { NNCrypto } from "../../utils/nncrypto.client";
import { hashNavigate } from "../../utils/use-hash-location";
import { Icon } from "@notesnook/ui";
import {
mdiAlertCircleOutline,
mdiArrowUp,
mdiClose,
mdiListBoxOutline,
mdiLockOutline
} from "@mdi/js";
import { Footer } from "../footer";
import ReportDialog from "./report-modal";
type TableOfContent = {
title: string;
id: string;
level: number;
node: HTMLElement;
};
const headings = ["h1", "h2", "h3", "h4", "h5", "h6"];
const levelsMap: Record = {
H1: 0,
H2: 1,
H3: 2,
H4: 3,
H5: 4,
H6: 5
};
const selector = headings.map((h) => `.ProseMirror ${h}`).join(",");
function generateTableOfContents() {
const toc: TableOfContent[] = [];
const headings = document.querySelectorAll(selector);
let level = -1;
let currentHeading = 0;
for (const heading of headings) {
const isCalloutHeading = heading.closest(".callout");
if (isCalloutHeading) {
continue;
}
const text = heading.textContent || "";
const nodeName = heading.nodeName;
const headingLevel = levelsMap[nodeName];
let id = "heading-" + slugify(text);
const count = toc.filter((n) => n.id === id).length;
if (count > 0) id = `${id}-${count}`;
heading.setAttribute("id", id);
level =
currentHeading < headingLevel
? level + 1
: currentHeading > headingLevel
? headingLevel
: level;
currentHeading = headingLevel;
toc.push({
title: text,
id,
level,
node: heading
});
}
return toc;
}
export const MonographPage = ({
monograph,
encodedKey,
apiHost
}: {
monograph: Monograph;
encodedKey?: string;
apiHost: string;
}) => {
const [reportDialogVisible, setReportDialogVisible] = useState(false);
const [tableOfContents, setTableOfContents] = useState([]);
const [content, setContent] = useState(monograph.content);
const [showTableOfContents, setShowTableOfContents] = useState(false);
const editorContainer = useRef(null);
if (!content && monograph.encryptedContent)
return (
}>
{() => (
setContent(content)}
encodedKey={encodedKey}
/>
)}
);
return (
{monograph.title}
{formatDate(monograph.datePublished, {
type: "date-time",
dateFormat: "YYYY-MM-DD",
timeFormat: "24-hour"
})}
{monograph.encryptedContent ? (
End-to-end encrypted
) : (
)}
"
}}
sx={{ color: "paragraph", cursor: "text" }}
/>
}
>
{() => (
"}
onLoad={() => {
const toc = generateTableOfContents();
setTableOfContents(toc);
}}
/>
)}
{showTableOfContents ? (
<>
CONTENTS
) : null}
{showTableOfContents ? (
{
setShowTableOfContents(false);
}}
>
CONTENTS
setShowTableOfContents(false)}
/>
) : null}
{reportDialogVisible ? (
{
setReportDialogVisible(visible);
}}
/>
) : null}
);
};
function MonographLockscreen({
monograph,
encodedKey,
onUnlock
}: {
monograph: Monograph;
encodedKey?: string;
onUnlock: (content: Monograph["content"]) => void;
}) {
const [error, setError] = useState();
const [loading, setLoading] = useState();
const password = useRef();
const unlock = useCallback(async () => {
if (!password.current) return;
setError(undefined);
setLoading(true);
try {
const result = await unlockMonograph(monograph, password.current).catch(
(e) => {
console.error(e);
setError(
`An error occurred while unlocking the monograph: ${e.message}`
);
}
);
if (result === false) {
setError("Incorrect password.");
return;
}
if (!result) return;
onUnlock(result);
hashNavigate(`key=${encode(password.current)}`, {
replace: true,
notify: false
});
} finally {
setLoading(false);
}
}, [monograph, onUnlock]);
useEffect(() => {
if (!encodedKey) return;
password.current = decode(encodedKey);
unlock();
}, [encodedKey, unlock]);
if (encodedKey && !error) return null;
return (
Monograph
{monograph.title}
{loading ? (
<>
Unlocking...
) : (
<>
(password.current = event.target.value)}
onKeyUp={(e) => (e.key === "Enter" ? unlock() : null)}
type="password"
placeholder="Enter password to continue"
/>
{error ? (
{error}
) : null}
)}
);
}
function ScrollToTopButton() {
const [showScrollToTop, setShowScrollToTop] = useState(false);
useEffect(() => {
function onScroll() {
const scrollTop = window.scrollY;
setShowScrollToTop(scrollTop > 120);
}
onScroll();
window.addEventListener("scroll", onScroll);
return () => {
window.removeEventListener("scroll", onScroll);
};
}, []);
if (!showScrollToTop) return null;
return (
{
window.scrollTo({
top: 0,
behavior: "smooth"
});
}}
sx={{
position: "fixed",
bottom: 20,
right: 10,
zIndex: 1,
bg: "background-secondary",
borderRadius: 100,
width: [50, 60, 60],
height: [50, 60, 60],
display: "flex",
justifyContent: "center",
alignItems: "center",
boxShadow: "0px 0px 15px 5px rgba(0,0,0,0.1)"
}}
>
);
}
function ResponsiveTitle({ title }: { title: string }) {
const [showTitle, setShowTitle] = useState(false);
useEffect(() => {
function onScroll() {
const scrollTop = window.scrollY;
setShowTitle(scrollTop > 120);
}
onScroll();
window.addEventListener("scroll", onScroll);
return () => {
window.removeEventListener("scroll", onScroll);
};
}, []);
return (
<>
{showTitle ? (
title
) : (
<>
Monograph
)}
);
}
function TableOfContents({
contents,
container,
onNavigate,
showActive
}: {
contents: TableOfContent[];
container: React.RefObject;
onNavigate?: (id: string) => void;
showActive?: boolean;
}) {
const [activeHeadings, setActiveHeadings] = useState();
useEffect(() => {
if (!showActive) return;
function onScroll() {
const scrollTop = window.scrollY;
const height = window.innerHeight || 0;
const viewportHeight = scrollTop + height - 30;
const documentOffset = container.current?.offsetTop || 0;
const active = contents.filter((t, i, array) => {
const next = array.at(i + 1);
const headingOffset =
documentOffset + t.node.offsetTop + t.node.clientHeight;
const lessThanNext = next
? scrollTop <=
next.node.offsetTop + documentOffset + next.node.clientHeight
: true;
const isInViewport =
headingOffset > scrollTop && headingOffset < viewportHeight;
const isActive = scrollTop >= headingOffset && lessThanNext;
return isInViewport || isActive;
});
setActiveHeadings(active.map((a) => a.id));
}
onScroll();
window.addEventListener("scroll", onScroll);
return () => {
window.removeEventListener("scroll", onScroll);
};
}, [contents, showActive]);
return (
<>
{contents.length === 0 ? (
<>
This monograph has no table of contents.
) : null}
{contents.map((item) => (
))}
);
}
function encode(input: string) {
return toBase64Url(Buffer.from(input).toString("base64"));
}
function decode(input: string) {
return Buffer.from(fromBase64Url(input), "base64").toString("utf-8");
}
function toBase64Url(base64: string) {
return base64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+/g, "");
}
function fromBase64Url(base64url: string) {
return (
base64url.replace(/-/g, "+").replace(/_/g, "/") +
"===".slice(0, (4 - (base64url.length % 4)) % 4)
);
}
async function unlockMonograph(
monograph: Monograph,
password: string
): Promise {
if (password === "") return false;
const { encryptedContent } = monograph;
if (!encryptedContent) return false;
try {
const decrypted = await NNCrypto.decrypt(
{ password, salt: encryptedContent.salt },
{
...encryptedContent,
format: "base64"
},
"text"
);
return JSON.parse(decrypted) as Monograph["content"];
} catch (e) {
const error = e as Error;
if (
error.message === "ciphertext cannot be decrypted using that key" ||
error.message === "Invalid input."
) {
return false;
}
throw e;
}
}