@atlaskit/editor-plugin-emoji
Version:
Emoji plugin for @atlaskit/editor-core
65 lines (64 loc) • 2.01 kB
JavaScript
import { emoji, emojiWithLocalId } from '@atlaskit/adf-schema';
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
const isSSR = Boolean(process.env.REACT_SSR);
/**
* Wrapper for ADF emoji node spec to augment toDOM implementation
* with fallback UI for lazy node view rendering / window virtualization
* @nodeSpecException:toDOM patch
* @returns
*/
export const emojiNodeSpec = () => {
const emojiNode = fg('platform_editor_adf_with_localid') ? emojiWithLocalId : emoji;
if (isSSR) {
return emojiNode;
}
return {
...emojiNode,
toDOM: node => emojiToDom(node)
};
};
export function emojiToDom(node) {
// From packages/elements/emoji/src/components/common/EmojiPlaceholder.tsx
const {
shortName,
id,
text
} = node.attrs;
const isEmojiScalingEnabled = expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true);
const attrs = {
'data-emoji-short-name': shortName,
'data-emoji-id': id,
'data-emoji-text': text,
contenteditable: 'false',
style: convertToInlineCss({
content: "''",
fill: "var(--ds-background-neutral, #0515240F)",
...(isEmojiScalingEnabled ? {
minWidth: '16.25px',
minHeight: '16.25px'
} : {
minWidth: `20px`,
width: `20px`,
height: `20px`
}),
position: 'relative',
margin: '-1px 0',
display: 'inline-block',
background: "var(--ds-background-neutral, #0515240F)",
borderRadius: "var(--ds-radius-small, 3px)",
overflow: 'hidden',
verticalAlign: 'middle',
whiteSpace: 'nowrap',
textAlign: 'center'
}),
'aria-busy': 'true',
'aria-label': shortName,
class: 'emoji-common-placeholder'
};
if (fg('platform_editor_adf_with_localid')) {
attrs['data-local-id'] = node.attrs.localId;
}
return ['span', attrs];
}