@atlaskit/editor-plugin-hyperlink
Version:
Hyperlink plugin for @atlaskit/editor-core
49 lines (48 loc) • 1.59 kB
JavaScript
import React from 'react';
import { render } from 'react-dom';
import { createRoot } from 'react-dom/client';
import { IntlProvider } from 'react-intl';
import { LinkAction, OverlayButton } from '@atlaskit/editor-common/link';
import { fg } from '@atlaskit/platform-feature-flags';
const reactRoots = new WeakMap();
/** Mounts `element` into `mountPoint`: uses the React 18/19 `createRoot` API when `nike_r19_render_unmount` is on, else the legacy render path. */
const renderToMountPoint = (element, mountPoint) => {
if (fg('nike_r19_render_unmount')) {
let root = reactRoots.get(mountPoint);
if (!root) {
root = createRoot(mountPoint);
reactRoots.set(mountPoint, root);
}
root.render(element);
} else {
render(element, mountPoint);
}
};
export const ButtonWrapper = ({
editorView,
pos,
stateKey,
intl,
onOpenLinkClick
}) => {
const wrapper = document.createElement('span');
wrapper.style.position = 'relative';
const nonBreakingCharacter = '\u2060';
const onDropdownChange = isOpen => {
editorView.dispatch(editorView.state.tr.setMeta(stateKey, {
type: LinkAction.SET_CONFIGURE_DROPDOWN_OPEN,
isOpen
}));
};
renderToMountPoint( /*#__PURE__*/React.createElement(IntlProvider, {
locale: intl.locale || 'en',
messages: intl.messages,
formats: intl.formats
}, /*#__PURE__*/React.createElement(OverlayButton, {
targetElementPos: pos,
editorView: editorView,
onDropdownChange: onDropdownChange,
onOpenLinkClick: onOpenLinkClick
}), nonBreakingCharacter), wrapper);
return wrapper;
};