diff --git a/src/sidebar/components/MarkdownEditor.tsx b/src/sidebar/components/MarkdownEditor.tsx index 63181dcaf95..811f01d382c 100644 --- a/src/sidebar/components/MarkdownEditor.tsx +++ b/src/sidebar/components/MarkdownEditor.tsx @@ -32,6 +32,7 @@ import { isMacOS } from '../../shared/user-agent'; import { getContainingMentionOffsets, termBeforePosition, + unwrapMentions, } from '../helpers/mentions'; import { LinkType, @@ -566,6 +567,8 @@ export default function MarkdownEditor({ // The input element where the user inputs their comment. const input = useRef(null); + const textWithoutMentionTags = useMemo(() => unwrapMentions(text), [text]); + useEffect(() => { if (!preview) { input.current?.focus(); @@ -624,7 +627,7 @@ export default function MarkdownEditor({ containerRef={input} onKeyDown={handleKeyDown} onEditText={onEditText} - value={text} + value={textWithoutMentionTags} style={textStyle} mentionsEnabled={mentionsEnabled} usersForMentions={usersForMentions} diff --git a/src/sidebar/components/test/MarkdownEditor-test.js b/src/sidebar/components/test/MarkdownEditor-test.js index 8fb3939e800..7fea49382b2 100644 --- a/src/sidebar/components/test/MarkdownEditor-test.js +++ b/src/sidebar/components/test/MarkdownEditor-test.js @@ -5,7 +5,9 @@ import { import { mount } from '@hypothesis/frontend-testing'; import { render } from 'preact'; import { act } from 'preact/test-utils'; +import sinon from 'sinon'; +import { wrapMentions } from '../../helpers/mentions'; import { LinkType } from '../../markdown-commands'; import MarkdownEditor, { $imports } from '../MarkdownEditor'; @@ -313,6 +315,14 @@ describe('MarkdownEditor', () => { assert.equal(inputField.prop('placeholder'), 'Enter comment'); }); + it('unwraps mention tags', () => { + const wrapper = createComponent({ + text: wrapMentions('Hello @bob', 'hypothes.is'), + }); + + assert.equal(wrapper.find('TextArea').prop('value'), 'Hello @bob'); + }); + describe('keyboard navigation', () => { let wrapper;