219 lines
10 KiB
JavaScript
219 lines
10 KiB
JavaScript
const ROOT_SELECTOR = '[data-testid="mnote-leptos-tiptap-island-editor-root"]';
|
|
|
|
export const activeEditorRootForSlashMenu = () => {
|
|
const selection = window.getSelection();
|
|
const anchorNode = selection?.anchorNode || null;
|
|
const anchorElement = anchorNode && anchorNode.nodeType === Node.ELEMENT_NODE
|
|
? anchorNode
|
|
: anchorNode?.parentElement || null;
|
|
const roots = Array.from(document.querySelectorAll(ROOT_SELECTOR)).filter((node) => (
|
|
node instanceof HTMLElement
|
|
&& node.offsetParent !== null
|
|
&& node.getAttribute('data-mnote-side-target-unsupported') !== 'true'
|
|
));
|
|
const intendedRoot = window.__mnoteIntendedSlashRoot instanceof HTMLElement
|
|
&& roots.includes(window.__mnoteIntendedSlashRoot)
|
|
? window.__mnoteIntendedSlashRoot
|
|
: null;
|
|
if (intendedRoot) return intendedRoot;
|
|
const focused = document.activeElement instanceof Element
|
|
? roots.find((root) => root.contains(document.activeElement))
|
|
: null;
|
|
if (focused) return focused;
|
|
if (anchorElement instanceof Element) {
|
|
const activeRoot = roots.find((root) => root.contains(anchorElement));
|
|
if (activeRoot) return activeRoot;
|
|
}
|
|
return roots.find((root) => root.querySelector('.ProseMirror:focus-within')) || roots[0] || null;
|
|
};
|
|
|
|
export const markIntendedSlashRoot = (entry) => {
|
|
const root = entry?.view?.runtimeDescriptor?.root;
|
|
if (!(root instanceof HTMLElement) || !root.isConnected) return;
|
|
window.__mnoteIntendedSlashRoot = root;
|
|
hideSlashMenusOutsideRoot(root);
|
|
scheduleSlashMenuPosition(root);
|
|
};
|
|
|
|
export const slashMenuAnchorFromSelection = (root) => {
|
|
const currentBlockFromSelection = () => {
|
|
try {
|
|
const selection = window.getSelection();
|
|
const anchorNode = selection?.anchorNode || null;
|
|
const editor = root.querySelector('.ProseMirror');
|
|
const anchorElement = anchorNode && anchorNode.nodeType === Node.ELEMENT_NODE
|
|
? anchorNode
|
|
: anchorNode?.parentElement || null;
|
|
if (!(editor instanceof HTMLElement) || !(anchorElement instanceof Element) || !editor.contains(anchorElement)) return null;
|
|
let current = anchorElement;
|
|
while (current && current.parentElement && current.parentElement !== editor) {
|
|
current = current.parentElement;
|
|
}
|
|
return current instanceof HTMLElement && current.parentElement === editor ? current : null;
|
|
} catch (_) {
|
|
return null;
|
|
}
|
|
};
|
|
const fallback = () => {
|
|
const editor = root.querySelector('.ProseMirror');
|
|
if (editor instanceof HTMLElement) {
|
|
const block = currentBlockFromSelection()
|
|
|| Array.from(editor.children).find((node) => node instanceof HTMLElement && node.matches(':focus-within, .ProseMirror-selectednode'))
|
|
|| Array.from(editor.children).find((node) => node instanceof HTMLElement && node.getBoundingClientRect().height > 0);
|
|
if (block instanceof HTMLElement) {
|
|
const rect = block.getBoundingClientRect();
|
|
return { top: rect.bottom + 8, left: rect.left, anchorTop: rect.top };
|
|
}
|
|
}
|
|
const rect = root.getBoundingClientRect();
|
|
return { top: rect.top + 24, left: rect.left + 24, anchorTop: rect.top + 24 };
|
|
};
|
|
try {
|
|
const selection = window.getSelection();
|
|
if (!selection || selection.rangeCount <= 0) return fallback();
|
|
const anchorNode = selection.anchorNode;
|
|
if (anchorNode && !root.contains(anchorNode.nodeType === Node.ELEMENT_NODE ? anchorNode : anchorNode.parentElement)) {
|
|
return fallback();
|
|
}
|
|
const rect = selection.getRangeAt(0).getBoundingClientRect();
|
|
if (rect && (rect.top > 0 || rect.left > 0 || rect.height > 0)) {
|
|
return { top: rect.bottom + 8, left: rect.left, anchorTop: rect.top };
|
|
}
|
|
} catch (_) {}
|
|
return fallback();
|
|
};
|
|
|
|
export const setSlashMenuInactive = (menu, inactive) => {
|
|
if (!(menu instanceof HTMLElement)) return;
|
|
if (inactive) {
|
|
if (menu.getAttribute('data-mnote-slash-inactive') !== 'true') {
|
|
menu.setAttribute('data-mnote-slash-inactive', 'true');
|
|
}
|
|
if (menu.style.display !== 'none') menu.style.display = 'none';
|
|
return;
|
|
}
|
|
if (menu.getAttribute('data-mnote-slash-inactive') === 'true') {
|
|
menu.removeAttribute('data-mnote-slash-inactive');
|
|
}
|
|
if (menu.style.display === 'none') menu.style.display = '';
|
|
};
|
|
|
|
export const setSlashMenuStyle = (menu, property, value) => {
|
|
if (!(menu instanceof HTMLElement)) return;
|
|
if (menu.style[property] !== value) menu.style[property] = value;
|
|
};
|
|
|
|
export const setSlashMenuAttribute = (menu, name, value) => {
|
|
if (!(menu instanceof HTMLElement)) return;
|
|
if (menu.getAttribute(name) !== value) menu.setAttribute(name, value);
|
|
};
|
|
|
|
export const hideSlashMenusOutsideRoot = (activeRoot) => {
|
|
document.querySelectorAll(`${ROOT_SELECTOR} [data-testid="mnote-leptos-tiptap-slash-menu"]`).forEach((menu) => {
|
|
const root = menu.closest(ROOT_SELECTOR);
|
|
if (root !== activeRoot) setSlashMenuInactive(menu, true);
|
|
});
|
|
};
|
|
|
|
export const positionSlashMenuForRoot = (root) => {
|
|
const activeRoot = activeEditorRootForSlashMenu();
|
|
if (!(root instanceof HTMLElement)) root = activeRoot;
|
|
if (!(root instanceof HTMLElement)) return;
|
|
if (activeRoot instanceof HTMLElement && root !== activeRoot) {
|
|
const inactiveMenu = root.querySelector('[data-testid="mnote-leptos-tiptap-slash-menu"]');
|
|
setSlashMenuInactive(inactiveMenu, true);
|
|
hideSlashMenusOutsideRoot(activeRoot);
|
|
return;
|
|
}
|
|
hideSlashMenusOutsideRoot(root);
|
|
const menu = root.querySelector('[data-testid="mnote-leptos-tiptap-slash-menu"]');
|
|
if (!(menu instanceof HTMLElement)) return;
|
|
setSlashMenuInactive(menu, false);
|
|
const anchor = slashMenuAnchorFromSelection(root);
|
|
const gap = 8;
|
|
const menuWidth = Math.min(316, Math.max(160, window.innerWidth - 16));
|
|
const menuHeight = Math.min(430, Math.max(120, window.innerHeight - 16));
|
|
const left = Math.min(Math.max(gap, anchor.left), Math.max(gap, window.innerWidth - menuWidth - gap));
|
|
const belowTop = Math.min(Math.max(gap, anchor.top), Math.max(gap, window.innerHeight - 120));
|
|
let top = belowTop + menuHeight > window.innerHeight - gap
|
|
? Math.min(Math.max(gap, anchor.anchorTop - menuHeight - gap), Math.max(gap, window.innerHeight - 120))
|
|
: belowTop;
|
|
const mindmap = document.querySelector('[data-testid="mnote-mindmap-editor-root"]');
|
|
if (mindmap instanceof HTMLElement) {
|
|
const mindmapRect = mindmap.getBoundingClientRect();
|
|
const overlapsMindmap = top < mindmapRect.bottom && top + menuHeight > mindmapRect.top;
|
|
if (overlapsMindmap && mindmapRect.bottom > window.innerHeight - 48) {
|
|
top = Math.max(top, Math.max(gap, window.innerHeight - menuHeight - gap));
|
|
} else if (overlapsMindmap && mindmapRect.bottom + menuHeight + gap <= window.innerHeight) {
|
|
top = mindmapRect.bottom + gap;
|
|
}
|
|
}
|
|
setSlashMenuStyle(menu, 'position', 'fixed');
|
|
setSlashMenuStyle(menu, 'zIndex', '130');
|
|
setSlashMenuStyle(menu, 'left', `${Math.round(left)}px`);
|
|
setSlashMenuStyle(menu, 'top', `${Math.round(top)}px`);
|
|
setSlashMenuStyle(menu, 'width', `min(316px, calc(100vw - 16px))`);
|
|
setSlashMenuStyle(menu, 'maxHeight', `min(430px, calc(100vh - 16px))`);
|
|
setSlashMenuAttribute(menu, 'data-mnote-slash-positioned', 'host');
|
|
};
|
|
|
|
export let pendingSlashMenuPositionFrame = 0;
|
|
export let pendingSlashMenuPositionRoot = null;
|
|
export const scheduleSlashMenuPosition = (root) => {
|
|
if (root instanceof HTMLElement) pendingSlashMenuPositionRoot = root;
|
|
if (pendingSlashMenuPositionFrame) return;
|
|
pendingSlashMenuPositionFrame = window.requestAnimationFrame(() => {
|
|
const targetRoot = pendingSlashMenuPositionRoot;
|
|
pendingSlashMenuPositionFrame = 0;
|
|
pendingSlashMenuPositionRoot = null;
|
|
positionSlashMenuForRoot(targetRoot);
|
|
});
|
|
};
|
|
|
|
export const shouldReactToSlashMenuMutation = (records, root) => {
|
|
if (!Array.isArray(records) || !(root instanceof HTMLElement)) return false;
|
|
return records.some((record) => {
|
|
const target = record && record.target instanceof HTMLElement ? record.target : null;
|
|
if (!target || !root.contains(target) && target !== root) return false;
|
|
if (record.type === 'attributes') {
|
|
return record.attributeName !== 'style' && record.attributeName !== 'data-mnote-slash-positioned' && record.attributeName !== 'data-mnote-slash-inactive';
|
|
}
|
|
if (record.type === 'childList') {
|
|
return Array.from(record.addedNodes || []).some((node) => node instanceof HTMLElement && node.closest('[data-testid="mnote-leptos-tiptap-slash-menu"]'))
|
|
|| Array.from(record.removedNodes || []).some((node) => node instanceof HTMLElement && node.closest('[data-testid="mnote-leptos-tiptap-slash-menu"]'));
|
|
}
|
|
return true;
|
|
});
|
|
};
|
|
|
|
export const scheduleGlobalSlashMenuPosition = () => {
|
|
scheduleSlashMenuPosition(activeEditorRootForSlashMenu());
|
|
};
|
|
|
|
export const installGlobalSlashMenuPositioning = () => {
|
|
if (window.__MNOTE_SLASH_MENU_POSITIONING_INSTALLED__) return;
|
|
window.__MNOTE_SLASH_MENU_POSITIONING_INSTALLED__ = true;
|
|
if (typeof MutationObserver === 'function' && document.body instanceof HTMLElement) {
|
|
const observer = new MutationObserver(() => scheduleGlobalSlashMenuPosition());
|
|
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class', 'hidden'] });
|
|
}
|
|
document.addEventListener('keydown', (event) => {
|
|
if (event.key === '/') scheduleGlobalSlashMenuPosition();
|
|
}, true);
|
|
document.addEventListener('selectionchange', () => scheduleGlobalSlashMenuPosition(), true);
|
|
window.addEventListener('resize', scheduleGlobalSlashMenuPosition);
|
|
window.addEventListener('scroll', scheduleGlobalSlashMenuPosition, true);
|
|
};
|
|
|
|
export const observeSlashMenuPosition = (view) => {
|
|
const root = view.runtimeDescriptor.root;
|
|
if (!(root instanceof HTMLElement) || typeof MutationObserver !== 'function') return;
|
|
const observer = new MutationObserver((records) => {
|
|
if (!view.disposed && shouldReactToSlashMenuMutation(records, root)) {
|
|
scheduleSlashMenuPosition(root);
|
|
}
|
|
});
|
|
observer.observe(root, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'hidden', 'class', 'data-mnote-slash-positioned', 'data-mnote-slash-inactive'] });
|
|
view.disconnectSlashObserver = () => observer.disconnect();
|
|
};
|