vrr/supermemory
2
0
Fork 0
mirror of https://github.com/supermemoryai/supermemory.git synced 2026-05-19 16:13:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

popover ruining my day again

Browse source
This commit is contained in:
codetorso 2024-08-17 05:50:16 +05:30
parent 73c5480fac
commit 58dae2ef69
2 changed files with 20 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

9
apps/web/components/editor/advanced-editor.tsx
View file

@ -45,6 +45,7 @@ type tContent = {
isActive: boolean;
itemIndex: number;
isScrolledOver: boolean;
pos: number;
};
const TailwindAdvancedEditor = memo(
@ -60,18 +61,20 @@ const TailwindAdvancedEditor = memo(
TableOfContents.configure({
getIndex: getHierarchicalIndexes,
onUpdate(content) {
console.log(content);
setItems(content);
},
}),
];
return (
<div className="relative w-full h-full">
<div className="relative w-full h-full bg-[#171B1F]">
<EditorRoot>
<EditorContent
autofocus
initialContent={defaultEditorContent}
extensions={extensions}
className="relative max-w-[98vw] h-[98vh] overflow-auto w-full bg-[#171B1F] sm:rounded-lg sm:shadow-lg"
className="relative w-full h-full py-10 max-w-5xl m-auto overflow-auto bg-transparent sm:rounded-lg sm:shadow-lg"
editorProps={{
handleDOMEvents: {
keydown: (_view, event) => handleCommandNavigation(event),
@ -103,7 +106,7 @@ const TailwindAdvancedEditor = memo(
className="flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-[#21303D] group aria-selected:bg-[#21303D]"
key={item.title}
>
<div className="flex h-10 w-10 items-center justify-center rounded-md bg-[#2D343A] group-hover:bg-[#369DFD33] group-aria-selected:bg-[#369DFD33]">
<div className="flex h-12 w-12 items-center justify-center rounded-md bg-[#2D343A] group-hover:bg-[#369DFD33] group-aria-selected:bg-[#369DFD33]">
{item.icon}
</div>
<div>

49
apps/web/components/editor/toc.tsx
View file

@ -1,6 +1,6 @@
import { TextSelection } from "@tiptap/pm/state";
import { useEditor } from "novel";
import { motion } from "framer-motion";
type tContent = {
id: string;
textContent: string;
@ -8,6 +8,7 @@ type tContent = {
isActive: boolean;
itemIndex: number;
isScrolledOver: boolean;
pos: number;
};
export const ToCItem = ({
@ -15,7 +16,7 @@ export const ToCItem = ({
onItemClick,
}: {
item: tContent;
onItemClick: (e: MouseEvent, id: string) => void;
onItemClick: (pos: number) => void;
}) => {
return (
<div
@ -23,24 +24,23 @@ export const ToCItem = ({
item.level === 2 ? "pl-2" : item.level === 3 ? "pl-4" : "pl-0"
}`}
>
<a
href={`#${item.id}`}
onClick={(e) => onItemClick(e, item.id)}
data-item-index={item.itemIndex}
<div
onClick={() => onItemClick(item.pos)}
className={`cursor-pointer text-base font-medium py-1 px-2 w-full hover:bg-[#2b3238] transition-colors rounded-sm ${item.isActive && "text-blue-500"}`}
>
{item.textContent}
</a>
</div>
</div>
);
};
export const ToC = ({ items }: { items: tContent[] }) => {
if (items.length === 0) {
if (items.length < 2) {
return;
}
return (
<div className="fixed w-40 right-0 top-1/2 -translate-y-1/2 mr-12">
<div className="fixed right-0 top-1/4 -translate-y-1/2 mr-12">
<div className="items-end space-y-3 py-2 max-h-[60vh] overflow-hidden">
{items.map((item, i) => (
<ToCItemStick key={item.id} item={item} />
@ -50,7 +50,7 @@ export const ToC = ({ items }: { items: tContent[] }) => {
initial={{ x: 15, opacity: 0 }}
whileHover={{ x: 5, opacity: 1 }}
transition={{ ease: "easeOut", duration: 0.15 }}
className="absolute top-0 right-0 space-y-3"
className="absolute top-0 right-0 space-y-3 min-w-72 max-w-72"
>
<Container items={items} />
</motion.div>
@ -61,36 +61,15 @@ export const ToC = ({ items }: { items: tContent[] }) => {
function Container({ items }: { items: tContent[] }) {
const { editor } = useEditor();
const onItemClick = (e, id) => {
e.preventDefault();
const onItemClick = (pos: number) => {
console.log(pos);
if (editor) {
const element = editor.view.dom.querySelector(`[data-toc-id="${id}"`);
const pos = editor.view.posAtDOM(element, 0);
// set focus
const tr = editor.view.state.tr;
tr.setSelection(new TextSelection(tr.doc.resolve(pos)));
editor.view.dispatch(tr);
editor.view.focus();
if (history.pushState) {
// eslint-disable-line
history.pushState(null, null, `#${id}`); // eslint-disable-line
}
window.scrollTo({
top: element.getBoundingClientRect().top + window.scrollY,
behavior: "smooth",
});
editor.commands.focus(pos ? pos : 1, { scrollIntoView: true });
}
};
return (
<div className="bg-[#1F2428] rounded-xl overflow-auto max-h-[60vh] px-4">
<div className="bg-[#1F2428] rounded-xl overflow-auto max-h-[60vh] px-4 py-6">
{items.map((item, i) => (
<ToCItem onItemClick={onItemClick} key={item.id} item={item} />
))}