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;
}