mirror of https://github.com/fantasticit/think.git
tiptap: fix get bubble menu render container
This commit is contained in:
parent
550467e2a8
commit
51fba869e1
|
@ -35,6 +35,12 @@ export const CalloutBubbleMenu: React.FC<{ editor: Editor }> = ({ editor }) => {
|
||||||
const shouldShow = useCallback(() => editor.isActive(Callout.name), [editor]);
|
const shouldShow = useCallback(() => editor.isActive(Callout.name), [editor]);
|
||||||
const getRenderContainer = useCallback((node) => {
|
const getRenderContainer = useCallback((node) => {
|
||||||
let container = node;
|
let container = node;
|
||||||
|
|
||||||
|
// 文本节点
|
||||||
|
if (!container.tag) {
|
||||||
|
container = node.parentElement;
|
||||||
|
}
|
||||||
|
|
||||||
while (container && container.id !== 'js-callout-container') {
|
while (container && container.id !== 'js-callout-container') {
|
||||||
container = container.parentElement;
|
container = container.parentElement;
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,9 +11,16 @@ export const CodeBlockBubbleMenu = ({ editor }) => {
|
||||||
const shouldShow = useCallback(() => editor.isActive(CodeBlock.name), [editor]);
|
const shouldShow = useCallback(() => editor.isActive(CodeBlock.name), [editor]);
|
||||||
const getRenderContainer = useCallback((node) => {
|
const getRenderContainer = useCallback((node) => {
|
||||||
let container = node;
|
let container = node;
|
||||||
|
|
||||||
|
// 文本节点
|
||||||
|
if (!container.tag) {
|
||||||
|
container = node.parentElement;
|
||||||
|
}
|
||||||
|
|
||||||
while (container && container.classList && !container.classList.contains('node-codeBlock')) {
|
while (container && container.classList && !container.classList.contains('node-codeBlock')) {
|
||||||
container = container.parentElement;
|
container = container.parentElement;
|
||||||
}
|
}
|
||||||
|
|
||||||
return container;
|
return container;
|
||||||
}, []);
|
}, []);
|
||||||
const copyMe = useCallback(() => copyNode(CodeBlock.name, editor), [editor]);
|
const copyMe = useCallback(() => copyNode(CodeBlock.name, editor), [editor]);
|
||||||
|
|
|
@ -27,6 +27,10 @@ export const TableBubbleMenu = ({ editor }) => {
|
||||||
}, [editor]);
|
}, [editor]);
|
||||||
const getRenderContainer = useCallback((node) => {
|
const getRenderContainer = useCallback((node) => {
|
||||||
let container = node;
|
let container = node;
|
||||||
|
// 文本节点
|
||||||
|
if (!container.tag) {
|
||||||
|
container = node.parentElement;
|
||||||
|
}
|
||||||
while (container.tagName !== 'TABLE') {
|
while (container.tagName !== 'TABLE') {
|
||||||
container = container.parentElement;
|
container = container.parentElement;
|
||||||
}
|
}
|
||||||
|
|
|
@ -41,9 +41,8 @@ export class BubbleMenuView {
|
||||||
|
|
||||||
public tippyOptions?: Partial<Props>;
|
public tippyOptions?: Partial<Props>;
|
||||||
|
|
||||||
// public renderContainerSelector?: string;
|
|
||||||
// public matchRenderContainer?: BubbleMenuPluginProps['matchRenderContainer'];
|
|
||||||
public getRenderContainer?: BubbleMenuPluginProps['getRenderContainer'];
|
public getRenderContainer?: BubbleMenuPluginProps['getRenderContainer'];
|
||||||
|
|
||||||
public shouldShow: Exclude<BubbleMenuPluginProps['shouldShow'], null> = ({ view, state, from, to }) => {
|
public shouldShow: Exclude<BubbleMenuPluginProps['shouldShow'], null> = ({ view, state, from, to }) => {
|
||||||
const { doc, selection } = state;
|
const { doc, selection } = state;
|
||||||
const { empty } = selection;
|
const { empty } = selection;
|
||||||
|
@ -60,22 +59,10 @@ export class BubbleMenuView {
|
||||||
return true;
|
return true;
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor({
|
constructor({ editor, element, view, tippyOptions = {}, shouldShow, getRenderContainer }: BubbleMenuViewProps) {
|
||||||
editor,
|
|
||||||
element,
|
|
||||||
view,
|
|
||||||
tippyOptions = {},
|
|
||||||
shouldShow,
|
|
||||||
// renderContainerSelector,
|
|
||||||
// matchRenderContainer,
|
|
||||||
getRenderContainer,
|
|
||||||
}: BubbleMenuViewProps) {
|
|
||||||
this.editor = editor;
|
this.editor = editor;
|
||||||
this.element = element;
|
this.element = element;
|
||||||
this.view = view;
|
this.view = view;
|
||||||
// this.renderContainerSelector = renderContainerSelector;
|
|
||||||
// this.matchRenderContainer = matchRenderContainer;
|
|
||||||
|
|
||||||
this.getRenderContainer = getRenderContainer;
|
this.getRenderContainer = getRenderContainer;
|
||||||
|
|
||||||
if (shouldShow) {
|
if (shouldShow) {
|
||||||
|
@ -192,44 +179,21 @@ export class BubbleMenuView {
|
||||||
|
|
||||||
this.tippy?.setProps({
|
this.tippy?.setProps({
|
||||||
getReferenceClientRect: () => {
|
getReferenceClientRect: () => {
|
||||||
|
let toMountNode;
|
||||||
|
|
||||||
if (isNodeSelection(state.selection)) {
|
if (isNodeSelection(state.selection)) {
|
||||||
const node = view.nodeDOM(from) as HTMLElement;
|
|
||||||
|
|
||||||
if (this.getRenderContainer) {
|
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) {
|
if (this.getRenderContainer) {
|
||||||
const node = view.domAtPos(from).node as HTMLElement;
|
toMountNode = this.getRenderContainer(node);
|
||||||
return this.getRenderContainer(node).getBoundingClientRect();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// if (this.matchRenderContainer) {
|
if (toMountNode && toMountNode.getBoundingClientRect) {
|
||||||
// let node = view.domAtPos(from).node as HTMLElement;
|
return toMountNode.getBoundingClientRect();
|
||||||
|
}
|
||||||
// while (node && !this.matchRenderContainer(node)) {
|
|
||||||
// node = node.parentElement;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// if (node) {
|
|
||||||
// return node.getBoundingClientRect();
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
return posToDOMRect(view, from, to);
|
return posToDOMRect(view, from, to);
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue