export function createLinkDialog()

in packages/roosterjs-react-command-bar/lib/components/LinkDialog.tsx [108:146]


export function createLinkDialog(doc: Document, props: LinkDialogProps, calloutClassName?: string): () => void {
    const { editor, onDismiss } = props;

    let container = doc.createElement("div");
    doc.body.appendChild(container);
    const dispose = (): void => {
        if (container) {
            ReactDOM.unmountComponentAtNode(container);

            // hack to clear placeholder and also for Firefox, to get cursor visible again
            container.setAttribute("tabindex", "0");
            calloutClassName && container.setAttribute("class", calloutClassName);
            container.focus();
            editor && !editor.isDisposed() && editor.focus();

            container.parentElement.removeChild(container);
            container = null;
        }
    };

    // for the case that selection isn't tracked, we need to save the selection before bringing up the dialog
    // and from there, we need to restore it before converting the selected text into a link or restore
    // the selection if the dialog was cancelled
    const selectionRange = editor && !editor.isDisposed() ? editor.getSelectionRange() : null;
    ReactDOM.render(
        <LinkDialog
            {...props}
            selectionRange={selectionRange}
            onDismiss={(ev: React.FocusEvent<HTMLElement>): void => {
                dispose();
                onDismiss && onDismiss(ev);
            }}
            className={css(calloutClassName, props.className)}
        />,
        container
    );

    return dispose;
}