gio
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

tiptap: fix get bubble menu render container

This commit is contained in:
fantasticit 2022-05-10 12:04:23 +08:00
parent 550467e2a8
commit 51fba869e1
4 changed files with 26 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/client/src/tiptap/editor/menus/callout/bubble.tsx
View File

@ -35,6 +35,12 @@ export const CalloutBubbleMenu: React.FC<{ editor: Editor }> = ({ editor }) => {
const shouldShow = useCallback(() => editor.isActive(Callout.name), [editor]);
const getRenderContainer = useCallback((node) => {
let container = node;
// 文本节点
if (!container.tag) {
container = node.parentElement;
}
while (container && container.id !== 'js-callout-container') {
container = container.parentElement;
}

7
packages/client/src/tiptap/editor/menus/code-block/bubble.tsx
View File

@ -11,9 +11,16 @@ export const CodeBlockBubbleMenu = ({ editor }) => {
const shouldShow = useCallback(() => editor.isActive(CodeBlock.name), [editor]);
const getRenderContainer = useCallback((node) => {
let container = node;
// 文本节点
if (!container.tag) {
container = node.parentElement;
}
while (container && container.classList && !container.classList.contains('node-codeBlock')) {
container = container.parentElement;
}
return container;
}, []);
const copyMe = useCallback(() => copyNode(CodeBlock.name, editor), [editor]);

4
packages/client/src/tiptap/editor/menus/table/bubble.tsx
View File

@ -27,6 +27,10 @@ export const TableBubbleMenu = ({ editor }) => {
}, [editor]);
const getRenderContainer = useCallback((node) => {
let container = node;
// 文本节点
if (!container.tag) {
container = node.parentElement;
}
while (container.tagName !== 'TABLE') {
container = container.parentElement;
}

54
packages/client/src/tiptap/editor/views/bubble-menu/bubble-menu-plugin.tsx
View File

@ -41,9 +41,8 @@ export class BubbleMenuView {
public tippyOptions?: Partial<Props>;
// public renderContainerSelector?: string;
// public matchRenderContainer?: BubbleMenuPluginProps['matchRenderContainer'];
public getRenderContainer?: BubbleMenuPluginProps['getRenderContainer'];
public shouldShow: Exclude<BubbleMenuPluginProps['shouldShow'], null> = ({ view, state, from, to }) => {
const { doc, selection } = state;
const { empty } = selection;
@ -60,22 +59,10 @@ export class BubbleMenuView {
return true;
};
constructor({
editor,
element,
view,
tippyOptions = {},
shouldShow,
// renderContainerSelector,
// matchRenderContainer,
getRenderContainer,
}: BubbleMenuViewProps) {
constructor({ editor, element, view, tippyOptions = {}, shouldShow, getRenderContainer }: BubbleMenuViewProps) {
this.editor = editor;
this.element = element;
this.view = view;
// this.renderContainerSelector = renderContainerSelector;
// this.matchRenderContainer = matchRenderContainer;
this.getRenderContainer = getRenderContainer;
if (shouldShow) {
@ -192,44 +179,21 @@ export class BubbleMenuView {
this.tippy?.setProps({
getReferenceClientRect: () => {
let toMountNode;
if (isNodeSelection(state.selection)) {
const node = view.nodeDOM(from) as HTMLElement;
if (this.getRenderContainer) {
return this.getRenderContainer(node).getBoundingClientRect();
toMountNode = this.getRenderContainer(node);
}
// if (this.matchRenderContainer) {
// while (node && !this.matchRenderContainer(node)) {
// node = node.firstElementChild as HTMLElement;
// }
// if (node) {
// return node.getBoundingClientRect();
// }
// }
// if (node) {
// return node.getBoundingClientRect();
// }
}
if (this.getRenderContainer) {
const node = view.domAtPos(from).node as HTMLElement;
return this.getRenderContainer(node).getBoundingClientRect();
toMountNode = this.getRenderContainer(node);
}
// if (this.matchRenderContainer) {
// let node = view.domAtPos(from).node as HTMLElement;
// while (node && !this.matchRenderContainer(node)) {
// node = node.parentElement;
// }
// if (node) {
// return node.getBoundingClientRect();
// }
// }
if (toMountNode && toMountNode.getBoundingClientRect) {
return toMountNode.getBoundingClientRect();
}
return posToDOMRect(view, from, to);
},