scriptoriumadmin/supermemory
1
0
Fork 0
mirror of https://github.com/supermemoryai/supermemory.git synced 2026-08-28 05:25:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

novel editor

Browse source
This commit is contained in:
Yash 2024-04-11 02:22:33 +00:00
parent e6fc9c4227
commit 4a90aaabf3
3 changed files with 100 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
apps/web/src/app/globals.css
View file

@ -57,14 +57,65 @@ body {
padding-bottom: 15dvh;
}
.chat-answer pre {
.chat-answer pre {
@apply bg-rgray-3 rounded-md border border-rgray-5 p-3 text-sm my-5;
}
.novel-editor pre {
@apply bg-rgray-3 rounded-md border border-rgray-5 p-4 text-sm text-rgray-11;
}
.chat-answer h1 {
@apply text-rgray-11 text-xl font-medium my-5;
}
.chat-answer img {
@apply rounded-md font-medium my-5;
}
}
.tippy-box {
@apply bg-rgray-3 text-rgray-11 border border-rgray-5 rounded-md py-0;
}
.tippy-content #slash-command {
@apply text-rgray-11 bg-transparent border-none;
}
#slash-command button {
@apply text-rgray-11 py-2;
}
#slash-command button div:first-child {
@apply text-rgray-11 bg-rgray-4 border-rgray-5 ;
}
#slash-command button.novel-bg-stone-100 {
@apply bg-rgray-1;
}
.novel-editor [data-type=taskList] > li {
@apply my-0;
}
.novel-editor input[type=checkbox] {
@apply accent-rgray-4 rounded-md;
background: var(--gray-4) !important;
border: 1px solid var(--gray-10) !important;
}
.novel-editor .is-editor-empty::before {
content: 'Press \'/\' for commands' !important;
}
.novel-editor h1 {
@apply text-2xl;
}
.novel-editor h2 {
@apply text-xl;
}
.novel-editor h3 {
@apply text-lg;
}

31
apps/web/src/components/Sidebar/AddMemoryDialog.tsx
View file

@ -1,4 +1,4 @@
import { useEffect, useRef } from "react";
import { Editor } from "novel";
import {
DialogClose,
DialogDescription,
@ -8,8 +8,9 @@ import {
} from "../ui/dialog";
import { Input } from "../ui/input";
import { Label } from "../ui/label";
import { useRef } from "react";
export default function AddMemoryPage() {
export function AddMemoryPage() {
return (
<>
<DialogHeader>
@ -23,7 +24,7 @@ export default function AddMemoryPage() {
<Input
placeholder="Enter the URL of the page"
type="url"
data-autofocus
data-modal-autofocus
className="bg-rgray-4 mt-2 w-full"
/>
<DialogFooter>
@ -37,3 +38,27 @@ export default function AddMemoryPage() {
</>
);
}
export function NoteAddPage() {
return (
<>
<Input
className="w-full border-none p-0 text-xl ring-0 placeholder:text-white/30 focus-visible:ring-0"
placeholder="Name of the note"
data-modal-autofocus
/>
<Editor
disableLocalStorage
className="novel-editor bg-rgray-4 border-rgray-7 dark mt-5 max-h-[60vh] min-h-[40vh] w-[50vw] overflow-y-auto rounded-lg border [&>div>div]:p-5"
/>
<DialogFooter>
<DialogClose className="bg-rgray-4 hover:bg-rgray-5 focus-visible:bg-rgray-5 focus-visible:ring-rgray-7 rounded-md px-4 py-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-2">
Add
</DialogClose>
<DialogClose className="hover:bg-rgray-4 focus-visible:bg-rgray-4 focus-visible:ring-rgray-7 rounded-md px-3 py-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-2">
Cancel
</DialogClose>
</DialogFooter>
</>
);
}

42
apps/web/src/components/Sidebar/MemoriesBar.tsx
View file

@ -5,9 +5,7 @@ import {
MemoryWithImages3,
MemoryWithImages2,
} from "@/assets/MemoryWithImages";
import { type CollectedSpaces }
from "../../../types/memory";
import { type CollectedSpaces } from "../../../types/memory";
import { Input, InputWithIcon } from "../ui/input";
import {
ArrowUpRight,
@ -42,7 +40,7 @@ import { Label } from "../ui/label";
import useViewport from "@/hooks/useViewport";
import useTouchHold from "@/hooks/useTouchHold";
import { DialogTrigger } from "@radix-ui/react-dialog";
import AddMemoryPage from "./AddMemoryDialog";
import { AddMemoryPage, NoteAddPage } from "./AddMemoryDialog";
export function MemoriesBar() {
const [parent, enableAnimations] = useAutoAnimate();
@ -319,32 +317,30 @@ export function AddMemoryModal({
<DialogContent
onOpenAutoFocus={(e) => {
e.preventDefault();
const novel = document.querySelector('[contenteditable="true"]') as
| HTMLDivElement
| undefined;
if (novel) {
novel.autofocus = false;
novel.onfocus = () => {
(
document.querySelector("[data-modal-autofocus]") as
| HTMLInputElement
| undefined
)?.focus();
novel.onfocus = null;
};
}
(
document.querySelector("[data-autofocus]") as
document.querySelector("[data-modal-autofocus]") as
| HTMLInputElement
| undefined
)?.focus();
}}
className="w-max max-w-[auto]"
>
{type === "page" && <AddMemoryPage />}
{type === "note" && (
<>
<Input
className="w-full border-none p-0 text-xl ring-0 placeholder:text-white/30 focus-visible:ring-0"
placeholder="Name of the note"
data-autofocus
/>
<Editor />
<DialogFooter>
<DialogClose className="bg-rgray-4 hover:bg-rgray-5 focus-visible:bg-rgray-5 focus-visible:ring-rgray-7 rounded-md px-4 py-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-2">
Add
</DialogClose>
<DialogClose className="hover:bg-rgray-4 focus-visible:bg-rgray-4 focus-visible:ring-rgray-7 rounded-md px-3 py-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-2">
Cancel
</DialogClose>
</DialogFooter>
</>
)}
{type === "note" && <NoteAddPage />}
</DialogContent>
</Dialog>
);