mentions fix

labtests · Jul 19, 2019 · 64d8e13 · 64d8e13
1 parent fef3e06
commit 64d8e13
Showing 1 changed file with 65 additions and 64 deletions.
diff --git a/app/components/posts/PostEditor.tsx b/app/components/posts/PostEditor.tsx
@@ -129,76 +129,72 @@ class PostEditor extends React.Component<MyProps, MyState> {
           {htmlContent ? (
             <PostContent html={htmlContent} />
           ) : (
-              <MentionsInput
-                style={{
-                  input: {
-                    border: 'none',
-                    outline: 'none',
-                    font: '16px Roboto',
-                    color: isThemeDark ? '#fff' : '#000',
-                    fontWeight: 300,
-                    height: '100vh', // TODO: check on Mobile
-                    lineHeight: '1.5em',
-                    backgroundColor: content ? textareaBackgroundColor : 'transparent',
+            <MentionsInput
+              style={{
+                input: {
+                  border: 'none',
+                  outline: 'none',
+                  font: '16px Roboto',
+                  color: isThemeDark ? '#fff' : '#000',
+                  fontWeight: 300,
+                  height: '100vh', // TODO: check on Mobile
+                  lineHeight: '1.5em',
+                  backgroundColor: content ? textareaBackgroundColor : 'transparent',
+                },
+                suggestions: {
+                  list: {
+                    backgroundColor: '#222',
+                    color: '#fff',
                   },
-                  suggestions: {
-                    list: {
-                      backgroundColor: '#222',
-                      color: '#fff',
-                    },
 
-                    item: {
-                      padding: '5px 15px',
-                      borderBottom: '1px solid rgba(0,0,0,0.15)',
+                  item: {
+                    padding: '5px 15px',
+                    borderBottom: '1px solid rgba(0,0,0,0.15)',
 
-                      '&focused': {
-                        backgroundColor: 'rgba(255, 255, 255, 0.1)',
-                      },
+                    '&focused': {
+                      backgroundColor: 'rgba(255, 255, 255, 0.1)',
                     },
                   },
+                },
+              }}
+              autoFocus
+              value={content}
+              placeholder={this.props.placeholder ? this.props.placeholder : 'Compose new post'}
+              onChange={event => {
+                this.props.onChanged(event.target.value);
+              }}
+            >
+              <Mention
+                trigger="@"
+                data={membersMinusCurrentUser.map(u => ({
+                  id: u.avatarUrl,
+                  display: u.displayName,
+                  you: u._id === currentUser._id ? true : false,
+                }))}
+                markup={'[`@#__display__`](__id__)'}
+                displayTransform={(_, display) => {
+                  return `@${display}`;
                 }}
-                autoFocus
-                value={content}
-                placeholder={this.props.placeholder ? this.props.placeholder : 'Compose new post'}
-                markup={'[`__type__#__display__`](__id__)'}
-                displayTransform={(id, display, type) => {
-                  if (type === '@') {
-                    return `@${display}`;
-                  }
-
-                  return `[${display} ](${id})`;
-                }}
-                onChange={event => {
-                  this.props.onChanged(event.target.value);
-                }}
-              >
-                <Mention
-                  trigger="@"
-                  data={membersMinusCurrentUser.map(u => ({
-                    id: u.avatarUrl,
-                    display: u.displayName,
-                    you: u._id === currentUser._id ? true : false,
-                  }))}
-                  renderSuggestion={suggestion => (
-                    <React.Fragment>
-                      <Avatar
-                        role="presentation"
-                        src={suggestion.id}
-                        alt={suggestion.display}
-                        style={{
-                          width: '24px',
-                          height: '24px',
-                          marginRight: '10px',
-                          display: 'inline-flex',
-                          verticalAlign: 'middle',
-                        }}
-                      />
-                      <span style={{ marginRight: '5px' }}>{suggestion.display}</span>
-                    </React.Fragment>
-                  )}
-                />
-              </MentionsInput>
-            )}
+                renderSuggestion={suggestion => (
+                  <React.Fragment>
+                    <Avatar
+                      role="presentation"
+                      src={suggestion.id}
+                      alt={suggestion.display}
+                      style={{
+                        width: '24px',
+                        height: '24px',
+                        marginRight: '10px',
+                        display: 'inline-flex',
+                        verticalAlign: 'middle',
+                      }}
+                    />
+                    <span style={{ marginRight: '5px' }}>{suggestion.display}</span>
+                  </React.Fragment>
+                )}
+              />
+            </MentionsInput>
+          )}
         </div>
       </div>
     );
@@ -216,6 +212,11 @@ class PostEditor extends React.Component<MyProps, MyState> {
 
       renderer.link = (href, title, text) => {
         const t = title ? ` title="${title}"` : '';
+
+        if (text.startsWith('<code>@#')) {
+          return `${text.replace('<code>@#', '<code>@')} `;
+        }
+
         return `
           <a target="_blank" href="${href}" rel="noopener noreferrer"${t}>
             ${text}