sinvo/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2026-05-17 06:44:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix bubble menu

Browse Source
This commit is contained in:
Philipinho
2025-09-27 14:50:27 +01:00
parent cc0146d0cd
commit d31d1f7bbd
14 changed files with 587 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/editor/components/bubble-menu/bubble-menu.tsx
+1 -1
View File
@@ -147,7 +147,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
};
return (
<BubbleMenu {...bubbleMenuProps}>
<BubbleMenu {...bubbleMenuProps} style={{ zIndex: 200, position: "relative"}}>
<div className={classes.bubbleMenu}>
<NodeSelector
editor={props.editor}
apps/client/src/features/editor/components/callout/callout-menu.tsx
+17 -15
View File
@@ -38,7 +38,6 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
},
});
const shouldShow = useCallback(
({ state }: ShouldShowProps) => {
if (!state) {
@@ -50,17 +49,28 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
[editor],
);
const getReferenceClientRect = useCallback(() => {
const getReferencedVirtualElement = useCallback(() => {
const { selection } = editor.state;
const predicate = (node: PMNode) => node.type.name === "callout";
const parent = findParentNode(predicate)(selection);
if (parent) {
const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
return dom.getBoundingClientRect();
const domRect = dom.getBoundingClientRect();
return {
getBoundingClientRect: () => domRect,
getClientRects: () => [domRect],
};
}
return posToDOMRect(editor.view, selection.from, selection.to);
console.log('callout')
const domRect = posToDOMRect(editor.view, selection.from, selection.to);
return {
getBoundingClientRect: () => domRect,
getClientRects: () => [domRect],
};
}, [editor]);
const setCalloutType = useCallback(
@@ -109,21 +119,13 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
editor={editor}
pluginKey={`callout-menu}`}
updateDelay={0}
getReferencedVirtualElement={getReferencedVirtualElement}
options={{
// getReferenceClientRect,
placement: "right-end",
// offset: 233,
placement: "bottom",
// offset: 233, // // offset: [0, 10],
// zIndex: 99,
flip: false,
}}
//tippyOptions={{
// getReferenceClientRect,
// offset: [0, 10],
// placement: "bottom",
// zIndex: 99,
// popperOptions: {
// modifiers: [{ name: "flip", enabled: false }],
// },
shouldShow={shouldShow}
>
<ActionIcon.Group className="actionIconGroup">
apps/client/src/features/editor/components/drawio/drawio-menu.tsx
+32 -22
View File
@@ -1,5 +1,5 @@
import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
import { findParentNode, posToDOMRect } from "@tiptap/react";
import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
import { useCallback } from "react";
import { Node as PMNode } from "prosemirror-model";
import {
@@ -20,17 +20,40 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
[editor],
);
const getReferenceClientRect = useCallback(() => {
const editorState = useEditorState({
editor,
selector: (ctx) => {
if (!ctx.editor) {
return null;
}
const drawioAttr = ctx.editor.getAttributes("drawio");
return {
isDrawio: ctx.editor.isActive("drawio"),
width: drawioAttr?.width ? parseInt(drawioAttr.width) : null,
};
},
});
const getReferencedVirtualElement = useCallback(() => {
const { selection } = editor.state;
const predicate = (node: PMNode) => node.type.name === "drawio";
const parent = findParentNode(predicate)(selection);
if (parent) {
const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
return dom.getBoundingClientRect();
const domRect = dom.getBoundingClientRect();
return {
getBoundingClientRect: () => domRect,
getClientRects: () => [domRect],
};
}
return posToDOMRect(editor.view, selection.from, selection.to);
const domRect = posToDOMRect(editor.view, selection.from, selection.to);
return {
getBoundingClientRect: () => domRect,
getClientRects: () => [domRect],
};
}, [editor]);
const onWidthChange = useCallback(
@@ -43,24 +66,14 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
return (
<BaseBubbleMenu
editor={editor}
pluginKey={`drawio-menu}`}
pluginKey={`drawio-menu`}
updateDelay={0}
getReferencedVirtualElement={getReferencedVirtualElement}
options={{
//getReferenceClientRect,
placement: "bottom",
placement: "top",
offset: 8,
// zIndex: 99,
flip: false,
}}
// tippyOptions={{
// getReferenceClientRect,
// offset: [0, 8],
// zIndex: 99,
// popperOptions: {
// modifiers: [{ name: 'flip', enabled: false }],
// },
// plugins: [sticky],
// sticky: 'popper',
shouldShow={shouldShow}
>
<div
@@ -70,11 +83,8 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
alignItems: "center",
}}
>
{editor.getAttributes("drawio")?.width && (
<NodeWidthResize
onChange={onWidthChange}
value={parseInt(editor.getAttributes("drawio").width)}
/>
{editorState?.width && (
<NodeWidthResize onChange={onWidthChange} value={editorState.width} />
)}
</div>
</BaseBubbleMenu>
apps/client/src/features/editor/components/excalidraw/excalidraw-menu.tsx
+32 -25
View File
@@ -1,5 +1,5 @@
import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
import { findParentNode, posToDOMRect } from "@tiptap/react";
import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
import { useCallback } from "react";
import { Node as PMNode } from "prosemirror-model";
import {
@@ -22,17 +22,40 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
[editor],
);
const getReferenceClientRect = useCallback(() => {
const editorState = useEditorState({
editor,
selector: (ctx) => {
if (!ctx.editor) {
return null;
}
const excalidrawAttr = ctx.editor.getAttributes("excalidraw");
return {
isExcalidraw: ctx.editor.isActive("excalidraw"),
width: excalidrawAttr?.width ? parseInt(excalidrawAttr.width) : null,
};
},
});
const getReferencedVirtualElement = useCallback(() => {
const { selection } = editor.state;
const predicate = (node: PMNode) => node.type.name === "excalidraw";
const parent = findParentNode(predicate)(selection);
if (parent) {
const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
return dom.getBoundingClientRect();
const domRect = dom.getBoundingClientRect();
return {
getBoundingClientRect: () => domRect,
getClientRects: () => [domRect],
};
}
return posToDOMRect(editor.view, selection.from, selection.to);
const domRect = posToDOMRect(editor.view, selection.from, selection.to);
return {
getBoundingClientRect: () => domRect,
getClientRects: () => [domRect],
};
}, [editor]);
const onWidthChange = useCallback(
@@ -45,27 +68,14 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
return (
<BaseBubbleMenu
editor={editor}
pluginKey={`excalidraw-menu}`}
pluginKey={`excalidraw-menu`}
updateDelay={0}
getReferencedVirtualElement={getReferencedVirtualElement}
options={{
//getReferenceClientRect,
placement: "bottom",
placement: "top",
offset: 8,
// zIndex: 99,
// plugins: [sticky],
// sticky: 'popper',
flip: false,
}}
// tippyOptions={{
// getReferenceClientRect,
// offset: [0, 8],
// zIndex: 99,
// popperOptions: {
// modifiers: [{ name: 'flip', enabled: false }],
// },
// plugins: [sticky],
// sticky: 'popper',
// }}
shouldShow={shouldShow}
>
<div
@@ -75,11 +85,8 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
alignItems: "center",
}}
>
{editor.getAttributes("excalidraw")?.width && (
<NodeWidthResize
onChange={onWidthChange}
value={parseInt(editor.getAttributes("excalidraw").width)}
/>
{editorState?.width && (
<NodeWidthResize onChange={onWidthChange} value={editorState.width} />
)}
</div>
</BaseBubbleMenu>
apps/client/src/features/editor/components/image/image-menu.tsx
+21 -33
View File
@@ -20,7 +20,7 @@ export function ImageMenu({ editor }: EditorMenuProps) {
const editorState = useEditorState({
editor,
selector: ctx => {
selector: (ctx) => {
if (!ctx.editor) {
return null;
}
@@ -32,7 +32,7 @@ export function ImageMenu({ editor }: EditorMenuProps) {
isAlignLeft: ctx.editor.isActive("image", { align: "left" }),
isAlignCenter: ctx.editor.isActive("image", { align: "center" }),
isAlignRight: ctx.editor.isActive("image", { align: "right" }),
imageWidth: imageAttrs?.width ? parseInt(imageAttrs.width) : null,
width: imageAttrs?.width ? parseInt(imageAttrs.width) : null,
};
},
});
@@ -48,17 +48,25 @@ export function ImageMenu({ editor }: EditorMenuProps) {
[editor],
);
const getReferenceClientRect = useCallback(() => {
const getReferencedVirtualElement = useCallback(() => {
const { selection } = editor.state;
const predicate = (node: PMNode) => node.type.name === "image";
const parent = findParentNode(predicate)(selection);
if (parent) {
const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
return dom.getBoundingClientRect();
const domRect = dom.getBoundingClientRect();
return {
getBoundingClientRect: () => domRect,
getClientRects: () => [domRect],
};
}
return posToDOMRect(editor.view, selection.from, selection.to);
const domRect = posToDOMRect(editor.view, selection.from, selection.to);
return {
getBoundingClientRect: () => domRect,
getClientRects: () => [domRect],
};
}, [editor]);
const alignImageLeft = useCallback(() => {
@@ -99,25 +107,14 @@ export function ImageMenu({ editor }: EditorMenuProps) {
return (
<BaseBubbleMenu
editor={editor}
pluginKey={`image-menu}`}
pluginKey={`image-menu`}
updateDelay={0}
getReferencedVirtualElement={getReferencedVirtualElement}
options={{
// getReferenceClientRect,
placement: "bottom",
placement: "top",
offset: 8,
//zIndex: 99,
flip: false,
}}
// tippyOptions={{
// getReferenceClientRect,
// offset: [0, 8],
// zIndex: 99,
// popperOptions: {
// modifiers: [{ name: "flip", enabled: false }],
// },
// plugins: [sticky],
// sticky: "popper",
// }}
shouldShow={shouldShow}
>
<ActionIcon.Group className="actionIconGroup">
@@ -126,9 +123,7 @@ export function ImageMenu({ editor }: EditorMenuProps) {
onClick={alignImageLeft}
size="lg"
aria-label={t("Align left")}
variant={
editorState?.isAlignLeft ? "light" : "default"
}
variant={editorState?.isAlignLeft ? "light" : "default"}
>
<IconLayoutAlignLeft size={18} />
</ActionIcon>
@@ -139,9 +134,7 @@ export function ImageMenu({ editor }: EditorMenuProps) {
onClick={alignImageCenter}
size="lg"
aria-label={t("Align center")}
variant={
editorState?.isAlignCenter ? "light" : "default"
}
variant={editorState?.isAlignCenter ? "light" : "default"}
>
<IconLayoutAlignCenter size={18} />
</ActionIcon>
@@ -152,20 +145,15 @@ export function ImageMenu({ editor }: EditorMenuProps) {
onClick={alignImageRight}
size="lg"
aria-label={t("Align right")}
variant={
editorState?.isAlignRight ? "light" : "default"
}
variant={editorState?.isAlignRight ? "light" : "default"}
>
<IconLayoutAlignRight size={18} />
</ActionIcon>
</Tooltip>
</ActionIcon.Group>
{editorState?.imageWidth && (
<NodeWidthResize
onChange={onWidthChange}
value={editorState.imageWidth}
/>
{editorState?.width && (
<NodeWidthResize onChange={onWidthChange} value={editorState.width} />
)}
</BaseBubbleMenu>
);
apps/client/src/features/editor/components/table/table-cell-menu.tsx
+9 -13
View File
@@ -1,11 +1,9 @@
import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
import React, { useCallback } from "react";
import {
EditorMenuProps,
ShouldShowProps,
} from "@/features/editor/components/table/types/types.ts";
import { isCellSelection } from "@docmost/editor-ext";
import { isCellSelection, TiptapTippyBubbleMenu } from '@docmost/editor-ext';
import { ActionIcon, Tooltip } from "@mantine/core";
import {
IconBoxMargin,
@@ -53,19 +51,17 @@ export const TableCellMenu = React.memo(
}, [editor]);
return (
<BaseBubbleMenu
<TiptapTippyBubbleMenu
editor={editor}
pluginKey="table-cell-menu"
updateDelay={0}
options={{
//appendTo: () => {
// return appendTo?.current;
// },
placement: "bottom",
offset: 15,
//zIndex: 99,
tippyOptions={{
appendTo: () => {
return appendTo?.current;
},
offset: [0, 15],
zIndex: 99,
}}
shouldShow={shouldShow}
>
<ActionIcon.Group>
@@ -127,7 +123,7 @@ export const TableCellMenu = React.memo(
</ActionIcon>
</Tooltip>
</ActionIcon.Group>
</BaseBubbleMenu>
</TiptapTippyBubbleMenu>
);
},
);
apps/client/src/features/editor/components/table/table-menu.tsx
+29 -36
View File
@@ -1,8 +1,6 @@
import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
import { posToDOMRect, findParentNode } from "@tiptap/react";
import { Node as PMNode } from "@tiptap/pm/model";
import React, { useCallback } from "react";
import {
EditorMenuProps,
ShouldShowProps,
@@ -19,7 +17,7 @@ import {
IconTableRow,
IconTrashX,
} from "@tabler/icons-react";
import { isCellSelection } from "@docmost/editor-ext";
import { isCellSelection, TiptapTippyBubbleMenu } from "@docmost/editor-ext";
import { useTranslation } from "react-i18next";
export const TableMenu = React.memo(
@@ -86,42 +84,37 @@ export const TableMenu = React.memo(
}, [editor]);
return (
<BaseBubbleMenu
<TiptapTippyBubbleMenu
editor={editor}
pluginKey="table-menu"
updateDelay={0}
options={{
placement: "bottom",
offset: 15,
//zIndex: 99,
tippyOptions={{
getReferenceClientRect: getReferenceClientRect,
offset: [0, 15],
zIndex: 99,
popperOptions: {
modifiers: [
{
name: "preventOverflow",
enabled: true,
options: {
altAxis: true,
boundary: "clippingParents",
padding: 8,
},
},
{
name: "flip",
enabled: true,
options: {
boundary: editor.options.element,
fallbackPlacements: ["top", "bottom"],
padding: { top: 35, left: 8, right: 8, bottom: -Infinity },
},
},
],
},
}}
//tippyOptions={{
// getReferenceClientRect: getReferenceClientRect,
// offset: [0, 15],
// zIndex: 99,
// popperOptions: {
// modifiers: [
// {
// name: "preventOverflow",
// enabled: true,
// options: {
// altAxis: true,
// boundary: "clippingParents",
// padding: 8,
// },
// },
// {
// name: "flip",
// enabled: true,
// options: {
// boundary: editor.options.element,
// fallbackPlacements: ["top", "bottom"],
// padding: { top: 35, left: 8, right: 8, bottom: -Infinity },
// },
// },
// ],
// },
// }}
shouldShow={shouldShow}
>
<ActionIcon.Group>
@@ -225,7 +218,7 @@ export const TableMenu = React.memo(
</ActionIcon>
</Tooltip>
</ActionIcon.Group>
</BaseBubbleMenu>
</TiptapTippyBubbleMenu>
);
},
);
apps/client/src/features/editor/components/video/video-menu.tsx
+21 -14
View File
@@ -17,26 +17,26 @@ import { useTranslation } from "react-i18next";
export function VideoMenu({ editor }: EditorMenuProps) {
const { t } = useTranslation();
const editorState = useEditorState({
editor,
selector: ctx => {
if (!ctx.editor) {
return null;
}
const videoAttrs = ctx.editor.getAttributes("video");
return {
isVideo: ctx.editor.isActive("video"),
isAlignLeft: ctx.editor.isActive("video", { align: "left" }),
isAlignCenter: ctx.editor.isActive("video", { align: "center" }),
isAlignRight: ctx.editor.isActive("video", { align: "right" }),
videoWidth: videoAttrs?.width ? parseInt(videoAttrs.width) : null,
width: videoAttrs?.width ? parseInt(videoAttrs.width) : null,
};
},
});
const shouldShow = useCallback(
({ state }: ShouldShowProps) => {
if (!state) {
@@ -48,17 +48,25 @@ export function VideoMenu({ editor }: EditorMenuProps) {
[editor],
);
const getReferenceClientRect = useCallback(() => {
const getReferencedVirtualElement = useCallback(() => {
const { selection } = editor.state;
const predicate = (node: PMNode) => node.type.name === "video";
const parent = findParentNode(predicate)(selection);
if (parent) {
const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
return dom.getBoundingClientRect();
const domRect = dom.getBoundingClientRect();
return {
getBoundingClientRect: () => domRect,
getClientRects: () => [domRect],
};
}
return posToDOMRect(editor.view, selection.from, selection.to);
const domRect = posToDOMRect(editor.view, selection.from, selection.to);
return {
getBoundingClientRect: () => domRect,
getClientRects: () => [domRect],
};
}, [editor]);
const alignVideoLeft = useCallback(() => {
@@ -99,13 +107,12 @@ export function VideoMenu({ editor }: EditorMenuProps) {
return (
<BaseBubbleMenu
editor={editor}
pluginKey={`video-menu}`}
pluginKey={`video-menu`}
updateDelay={0}
getReferencedVirtualElement={getReferencedVirtualElement}
options={{
//getReferenceClientRect,
placement: "bottom",
placement: "top",
offset: 8,
//zIndex: 99,
flip: false,
}}
shouldShow={shouldShow}
@@ -151,10 +158,10 @@ export function VideoMenu({ editor }: EditorMenuProps) {
</Tooltip>
</ActionIcon.Group>
{editorState?.videoWidth && (
{editorState?.width && (
<NodeWidthResize
onChange={onWidthChange}
value={editorState.videoWidth}
value={editorState.width}
/>
)}
</BaseBubbleMenu>
apps/client/src/features/editor/extensions/extensions.ts
+1
View File
@@ -197,6 +197,7 @@ export const mainExtensions = [
}),
CustomCodeBlock.configure({
view: CodeBlockView,
//@ts-ignore
lowlight,
HTMLAttributes: {
spellcheck: false,