diff --git a/site/examples/mentions.tsx b/site/examples/mentions.tsx index bec39497a..f42324c2a 100644 --- a/site/examples/mentions.tsx +++ b/site/examples/mentions.tsx @@ -1,4 +1,11 @@ -import React, { useMemo, useCallback, useRef, useEffect, useState } from 'react' +import React, { + useMemo, + useCallback, + useRef, + useEffect, + useState, + Fragment, +} from 'react' import { Editor, Transforms, Range, createEditor, Descendant } from 'slate' import { withHistory } from 'slate-history' import { @@ -12,6 +19,7 @@ import { import { Portal } from '../components' import { MentionElement } from './custom-types.d' +import { IS_MAC } from '../utils/environment' const MentionExample = () => { const ref = useRef() @@ -133,6 +141,7 @@ const MentionExample = () => { style={{ padding: '1px 3px', borderRadius: '3px', + cursor: 'pointer', background: i === index ? '#B4D5FF' : 'transparent', }} > @@ -233,8 +242,18 @@ const Mention = ({ attributes, children, element }) => { data-cy={`mention-${element.character.replace(' ', '-')}`} style={style} > - @{element.character} - {children} + {IS_MAC ? ( + // Mac OS IME https://github.com/ianstormtaylor/slate/issues/3490 + + {children}@{element.character} + + ) : ( + // Others like Android https://github.com/ianstormtaylor/slate/pull/5360 + + @{element.character} + {children} + + )} ) } diff --git a/site/utils/environment.ts b/site/utils/environment.ts new file mode 100644 index 000000000..2c3f990b7 --- /dev/null +++ b/site/utils/environment.ts @@ -0,0 +1,5 @@ +export const IS_MAC = + typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent) + +export const IS_ANDROID = + typeof navigator !== 'undefined' && /Android/.test(navigator.userAgent)