fix menus

This commit is contained in:
Philipinho
2025-09-28 20:51:57 +01:00
parent 3af1482a31
commit 1cbd2854bb
9 changed files with 30 additions and 12 deletions

View File

@ -50,6 +50,7 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
);
const getReferencedVirtualElement = useCallback(() => {
if (!editor) return;
const { selection } = editor.state;
const predicate = (node: PMNode) => node.type.name === "callout";
const parent = findParentNode(predicate)(selection);
@ -63,9 +64,6 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
};
}
console.log('callout')
const domRect = posToDOMRect(editor.view, selection.from, selection.to);
return {
getBoundingClientRect: () => domRect,
@ -117,7 +115,7 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
return (
<BaseBubbleMenu
editor={editor}
pluginKey={`callout-menu}`}
pluginKey={`callout-menu`}
updateDelay={0}
getReferencedVirtualElement={getReferencedVirtualElement}
options={{

View File

@ -36,6 +36,7 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
});
const getReferencedVirtualElement = useCallback(() => {
if (!editor) return;
const { selection } = editor.state;
const predicate = (node: PMNode) => node.type.name === "drawio";
const parent = findParentNode(predicate)(selection);

View File

@ -38,6 +38,7 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
});
const getReferencedVirtualElement = useCallback(() => {
if (!editor) return;
const { selection } = editor.state;
const predicate = (node: PMNode) => node.type.name === "excalidraw";
const parent = findParentNode(predicate)(selection);

View File

@ -49,6 +49,7 @@ export function ImageMenu({ editor }: EditorMenuProps) {
);
const getReferencedVirtualElement = useCallback(() => {
if (!editor) return;
const { selection } = editor.state;
const predicate = (node: PMNode) => node.type.name === "image";
const parent = findParentNode(predicate)(selection);

View File

@ -1,10 +1,10 @@
import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
import { offset } from "@floating-ui/dom";
import React, { useCallback, useState } from "react";
import { EditorMenuProps } from "@/features/editor/components/table/types/types.ts";
import { LinkEditorPanel } from "@/features/editor/components/link/link-editor-panel.tsx";
import { LinkPreviewPanel } from "@/features/editor/components/link/link-preview.tsx";
import { Card } from "@mantine/core";
import { useEditorState } from "@tiptap/react";
export function LinkMenu({ editor, appendTo }: EditorMenuProps) {
const [showEdit, setShowEdit] = useState(false);
@ -13,7 +13,19 @@ export function LinkMenu({ editor, appendTo }: EditorMenuProps) {
return editor.isActive("link");
}, [editor]);
const { href: link } = editor.getAttributes("link");
const editorState = useEditorState({
editor,
selector: (ctx) => {
if (!ctx.editor) {
return null;
}
const link = ctx.editor.getAttributes("link");
return {
href: link.href,
};
},
});
const handleEdit = useCallback(() => {
setShowEdit(true);
@ -49,7 +61,7 @@ export function LinkMenu({ editor, appendTo }: EditorMenuProps) {
return (
<BaseBubbleMenu
editor={editor}
pluginKey={`link-menu}`}
pluginKey={`link-menu`}
updateDelay={0}
options={{
onHide: () => {
@ -57,7 +69,7 @@ export function LinkMenu({ editor, appendTo }: EditorMenuProps) {
},
placement: "bottom",
offset: 5,
// zIndex: 101,
// zIndex: 101,
}}
shouldShow={shouldShow}
>
@ -68,11 +80,14 @@ export function LinkMenu({ editor, appendTo }: EditorMenuProps) {
padding="xs"
bg="var(--mantine-color-body)"
>
<LinkEditorPanel initialUrl={link} onSetLink={onSetLink} />
<LinkEditorPanel
initialUrl={editorState.href}
onSetLink={onSetLink}
/>
</Card>
) : (
<LinkPreviewPanel
url={link}
url={editorState.href}
onClear={onUnsetLink}
onEdit={handleEdit}
/>

View File

@ -34,6 +34,7 @@ export const LinkPreviewPanel = ({
rel="noopener noreferrer"
className={classes.link}
>
ss
{url}
</Anchor>
</Tooltip>

View File

@ -58,7 +58,7 @@ export const SubpagesMenu = React.memo(
return (
<BaseBubbleMenu
editor={editor}
pluginKey={`subpages-menu}`}
pluginKey={`subpages-menu`}
updateDelay={0}
/* tippyOptions={{
getReferenceClientRect,

View File

@ -49,6 +49,7 @@ export function VideoMenu({ editor }: EditorMenuProps) {
);
const getReferencedVirtualElement = useCallback(() => {
if (!editor) return;
const { selection } = editor.state;
const predicate = (node: PMNode) => node.type.name === "video";
const parent = findParentNode(predicate)(selection);