gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-26 02:24:23 +01:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

fix(popup_editor): keep in DOM

Browse Source
This commit is contained in:
Elian Doran 2025-11-24 19:38:18 +02:00
parent 70a0b5c22f
commit 4cc545659b
No known key found for this signature in database
2 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/client/src/widgets/dialogs/PopupEditor.tsx
View File

@ -47,6 +47,7 @@ export default function PopupEditor() {
parentComponent?.handleEvent("focusOnDetail", { ntxId: noteContext.ntxId }); parentComponent?.handleEvent("focusOnDetail", { ntxId: noteContext.ntxId });
}} }}
onHidden={() => setShown(false)} onHidden={() => setShown(false)}
keepInDom // needed for faster loading
> >
<PromotedAttributes /> <PromotedAttributes />
<StandaloneRibbonAdapter component={FormattingToolbar} /> <StandaloneRibbonAdapter component={FormattingToolbar} />

8
apps/client/src/widgets/react/Modal.tsx
View File

@ -62,9 +62,13 @@ interface ModalProps {
* By default displaying a modal will close all existing modals. Set this to true to keep the existing modals open instead. This is useful for confirmation modals. * By default displaying a modal will close all existing modals. Set this to true to keep the existing modals open instead. This is useful for confirmation modals.
*/ */
stackable?: boolean; stackable?: boolean;
/**
* If true, the modal will remain in the DOM even when not shown. This can be useful for certain CSS transitions or when you want to avoid re-mounting the modal content.
*/
keepInDom?: boolean;
} }
export default function Modal({ children, className, size, title, header, footer, footerStyle, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden: onHidden, modalRef: externalModalRef, formRef, bodyStyle, show, stackable }: ModalProps) { export default function Modal({ children, className, size, title, header, footer, footerStyle, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden: onHidden, modalRef: externalModalRef, formRef, bodyStyle, show, stackable, keepInDom }: ModalProps) {
const modalRef = useSyncedRef<HTMLDivElement>(externalModalRef); const modalRef = useSyncedRef<HTMLDivElement>(externalModalRef);
const modalInstanceRef = useRef<BootstrapModal>(); const modalInstanceRef = useRef<BootstrapModal>();
const elementToFocus = useRef<Element | null>(); const elementToFocus = useRef<Element | null>();
@ -126,7 +130,7 @@ export default function Modal({ children, className, size, title, header, footer
return ( return (
<div className={`modal fade mx-auto ${className}`} tabIndex={-1} style={dialogStyle} role="dialog" ref={modalRef}> <div className={`modal fade mx-auto ${className}`} tabIndex={-1} style={dialogStyle} role="dialog" ref={modalRef}>
{show && <div className={`modal-dialog modal-${size} ${scrollable ? "modal-dialog-scrollable" : ""}`} style={documentStyle} role="document"> {(show || keepInDom) && <div className={`modal-dialog modal-${size} ${scrollable ? "modal-dialog-scrollable" : ""}`} style={documentStyle} role="document">
<div className="modal-content"> <div className="modal-content">
<div className="modal-header"> <div className="modal-header">
{!title || typeof title === "string" ? ( {!title || typeof title === "string" ? (