tiptap: fix get editor element clientWidth

This commit is contained in:
fantasticit 2022-04-27 21:35:17 +08:00
parent aac6238263
commit bf913734ea
1 changed files with 15 additions and 2 deletions

View File

@ -3,13 +3,26 @@ import { Editor } from '@tiptap/core';
const cache = new Map(); const cache = new Map();
export function getEditorContainerDOMSize(editor: Editor): { width: number } { export function getEditorContainerDOMSize(editor: Editor): { width: number } {
const targetNode = editor.options.element as HTMLElement;
if (!cache.has('width')) { if (!cache.has('width')) {
cache.set('width', (editor.options.element as HTMLElement).offsetWidth); cache.set('width', targetNode.clientWidth);
} }
if (cache.has('width') && cache.get('width') <= 0) { if (cache.has('width') && cache.get('width') <= 0) {
cache.set('width', (editor.options.element as HTMLElement).offsetWidth); cache.set('width', targetNode.clientWidth);
} }
const config = { attributes: true, childList: true, subtree: true };
const callback = function (mutationsList, observer) {
cache.set('width', targetNode.clientWidth);
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
editor.on('destroy', () => {
observer.disconnect();
});
return { width: cache.get('width') }; return { width: cache.get('width') };
} }