Unwrap mention tags when entering annotation edit mode

hypothesis · Feb 10, 2025 · cadccc1 · cadccc1
1 parent cf33ef3
commit cadccc1
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git 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<HTMLTextAreaElement>(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
@@ -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;