add tippyoptions for reference

This commit is contained in:
Philipinho
2025-08-18 13:45:41 -07:00
parent bf17289ab2
commit a0814ef49a
6 changed files with 71 additions and 4 deletions
@@ -82,6 +82,14 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
// 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">
@@ -52,6 +52,15 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
// zIndex: 99,
flip: false,
}}
// tippyOptions={{
// getReferenceClientRect,
// offset: [0, 8],
// zIndex: 99,
// popperOptions: {
// modifiers: [{ name: 'flip', enabled: false }],
// },
// plugins: [sticky],
// sticky: 'popper',
shouldShow={shouldShow}
>
<div
@@ -52,8 +52,20 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
placement: "bottom",
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
@@ -17,16 +17,16 @@ import { useTranslation } from "react-i18next";
export function ImageMenu({ editor }: EditorMenuProps) {
const { t } = useTranslation();
const editorState = useEditorState({
editor,
selector: ctx => {
if (!ctx.editor) {
return null;
}
const imageAttrs = ctx.editor.getAttributes("image");
return {
isImage: ctx.editor.isActive("image"),
isAlignLeft: ctx.editor.isActive("image", { align: "left" }),
@@ -36,7 +36,7 @@ export function ImageMenu({ editor }: EditorMenuProps) {
};
},
});
const shouldShow = useCallback(
({ state }: ShouldShowProps) => {
if (!state) {
@@ -108,6 +108,16 @@ export function ImageMenu({ editor }: EditorMenuProps) {
//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">
@@ -65,6 +65,7 @@ export const TableCellMenu = React.memo(
offset: 15,
//zIndex: 99,
}}
shouldShow={shouldShow}
>
<ActionIcon.Group>
@@ -95,6 +95,33 @@ export const TableMenu = React.memo(
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 },
// },
// },
// ],
// },
// }}
shouldShow={shouldShow}
>
<ActionIcon.Group>