Updated nav and page title for profiles

• Updated:
- nav and page title for profiles to be emojified

app/javascript/gabsocial/actions/importer/normalizer.js

@@ -17,6 +17,7 @@ export function normalizeAccount(account) {
   const displayName = account.display_name.trim().length === 0 ? account.username : account.display_name;
 
   account.display_name_html = emojify(escapeTextContentForBrowser(displayName), emojiMap);
+  account.display_name_plain = emojify(escapeTextContentForBrowser(displayName), emojiMap, true);
   account.note_emojified = emojify(account.note, emojiMap);
 
   if (account.fields) {

app/javascript/gabsocial/components/emoji/emoji.js

@@ -6,7 +6,7 @@ const trie = new Trie(Object.keys(unicodeMapping));
 
 const assetHost = process.env.CDN_HOST || '';
 
-const emojify = (str, customEmojis = {}) => {
+const emojify = (str, customEmojis = {}, plain = false) => {
   const tagCharsWithoutEmojis = '<&';
   const tagCharsWithEmojis = Object.keys(customEmojis).length ? '<&:' : '<&';
   let rtn = '', tagChars = tagCharsWithEmojis, invisible = 0;
@@ -34,7 +34,7 @@ const emojify = (str, customEmojis = {}) => {
         // if you want additional emoji handler, add statements below which set replacement and return true.
         if (shortname in customEmojis) {
           const filename = autoPlayGif ? customEmojis[shortname].url : customEmojis[shortname].static_url;
-          replacement = `<img draggable="false" style="height:${size}px;width:${size}px;margin:${mt}px 0 0;font-family:'object-fit:contain',inherit;vertical-align:middle;-o-object-fit:contain;object-fit:contain;" alt="${shortname}" title="${shortname}" src="${filename}" />`;
+          replacement = plain ? '' : `<img draggable="false" style="height:${size}px;width:${size}px;margin:${mt}px 0 0;font-family:'object-fit:contain',inherit;vertical-align:middle;-o-object-fit:contain;object-fit:contain;" alt="${shortname}" title="${shortname}" src="${filename}" />`;
           return true;
         }
         return false;
@@ -65,7 +65,7 @@ const emojify = (str, customEmojis = {}) => {
     } else { // matched to unicode emoji
       const { filename, shortCode } = unicodeMapping[match];
       const title = shortCode ? `:${shortCode}:` : '';
-      replacement = `<img draggable="false" style="height:${size}px;width:${size}px;margin:${mt}px 0 0;font-family:'object-fit:contain',inherit;vertical-align:middle;-o-object-fit:contain;object-fit:contain;" alt="${match}" title="${title}" src="${assetHost}/emoji/${filename}.svg" />`;
+      replacement = plain ? '' : `<img draggable="false" style="height:${size}px;width:${size}px;margin:${mt}px 0 0;font-family:'object-fit:contain',inherit;vertical-align:middle;-o-object-fit:contain;object-fit:contain;" alt="${match}" title="${title}" src="${assetHost}/emoji/${filename}.svg" />`;
       rend = i + match.length;
       // If the matched character was followed by VS15 (for selecting text presentation), skip it.
       if (str.codePointAt(rend) === 65038) {
@@ -75,7 +75,7 @@ const emojify = (str, customEmojis = {}) => {
     rtn += str.slice(0, i) + replacement;
     str = str.slice(rend);
   }
-  return rtn + str;
+  return `${rtn + str}`.trim();
 };
 
 export default emojify;
@@ -101,4 +101,4 @@ export const buildCustomEmojis = (customEmojis) => {
   });
 
   return emojis;
-};
+};

app/javascript/gabsocial/components/profile_navigation_bar.js

@@ -4,12 +4,12 @@ import Heading from './heading'
 export default class ProfileNavigationBar extends PureComponent {
 
   static propTypes = {
-    title: PropTypes.string,
+    titleHTML: PropTypes.string,
     showBackBtn: PropTypes.bool,
   }
 
   render() {
-    const { title } = this.props
+    const { titleHTML } = this.props
 
     return (
       <div className={[_s.default, _s.z4, _s.heightMin53PX, _s.width100PC].join(' ')}>
@@ -26,7 +26,7 @@ export default class ProfileNavigationBar extends PureComponent {
             <div className={[_s.default, _s.heightMin53PX, _s.justifyContentCenter, _s.mrAuto].join(' ')}>
               <Heading size='h1'>
                 <span className={[_s.textOverflowEllipsis, _s.colorNavigation].join(' ')}>
-                  {title}
+                  <div dangerouslySetInnerHTML={{ __html: titleHTML }} />
                 </span>
               </Heading>
             </div>

app/javascript/gabsocial/layouts/profile_layout.js

@@ -21,7 +21,7 @@ export default class ProfileLayout extends ImmutablePureComponent {
   static propTypes = {
     account: ImmutablePropTypes.map,
     children: PropTypes.node.isRequired,
-    title: PropTypes.string,
+    titleHTML: PropTypes.string,
     unavailable: PropTypes.bool,
   }
 
@@ -29,7 +29,7 @@ export default class ProfileLayout extends ImmutablePureComponent {
     const {
       account,
       children,
-      title,
+      titleHTML,
       unavailable,
     } = this.props
 
@@ -38,7 +38,7 @@ export default class ProfileLayout extends ImmutablePureComponent {
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
           {
             !!me &&
-            <ProfileNavigationBar title={title} />
+            <ProfileNavigationBar titleHTML={titleHTML} />
           }
           {
             !me &&

app/javascript/gabsocial/pages/profile_page.js

@@ -58,12 +58,13 @@ class ProfilePage extends ImmutablePureComponent {
       params: { username },
     } = this.props
 
-    const name = !!account ? account.get('display_name_html') : ''
-
+    const nameHTML = !!account ? account.get('display_name_html') : ''
+    const name = !!account ? account.get('display_name_plain') : ''
+    
     return (
       <ProfileLayout
         account={account}
-        title={name}
+        titleHTML={nameHTML}
         unavailable={unavailable}
       >
         <PageTitle path={`${name} (@${username})`} />