From 77087158a90357d85d43cde28cc6be1f415fabb6 Mon Sep 17 00:00:00 2001
From: Jordan Knott <jordan@jordanthedev.com>
Date: Mon, 4 Jan 2021 16:09:14 -0600
Subject: [PATCH] fix: emoji remark plugin sets children type to html instead
 of parent

This fixes the issue where if a URL was added to the comment, the remark
plugin would break. Instead of changing the parent node to be html, it
now sets any 'text' type children to be 'html' instead.
---
 .../src/shared/components/TaskDetails/Styles.ts     |  2 +-
 .../src/shared/components/TaskDetails/remark.js     | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/src/shared/components/TaskDetails/Styles.ts b/frontend/src/shared/components/TaskDetails/Styles.ts
index 903d178..8b6763a 100644
--- a/frontend/src/shared/components/TaskDetails/Styles.ts
+++ b/frontend/src/shared/components/TaskDetails/Styles.ts
@@ -653,7 +653,7 @@ export const ActivityItemComment = styled.div<{ editable: boolean }>`
   ${props => props.editable && 'width: 100%;'}
 
   & span {
-    display: flex;
+    display: inline-flex;
     align-items: center;
   }
   & ul {
diff --git a/frontend/src/shared/components/TaskDetails/remark.js b/frontend/src/shared/components/TaskDetails/remark.js
index 16ebf60..01635fd 100644
--- a/frontend/src/shared/components/TaskDetails/remark.js
+++ b/frontend/src/shared/components/TaskDetails/remark.js
@@ -44,9 +44,16 @@ function plugin(options) {
     visit(tree, 'paragraph', function(node) {
       console.log(tree);
       // node.value = node.value.replace(RE_EMOJI, getEmoji);
-      node.type = 'html';
-      node.tagName = 'div';
-      node.value = node.children[0].value.replace(RE_EMOJI, getEmoji);
+      // jnode.type = 'html';
+      // jnode.tagName = 'div';
+      // jnode.value = '';
+      for (let nodeIdx = 0; nodeIdx < node.children.length; nodeIdx++) {
+        if (node.children[nodeIdx].type === 'text') {
+          node.children[nodeIdx].type = 'html';
+          node.children[nodeIdx].tagName = 'div';
+          node.children[nodeIdx].value = node.children[nodeIdx].value.replace(RE_EMOJI, getEmoji);
+        }
+      }
 
       if (emoticonEnable) {
         // node.value = node.value.replace(RE_SHORT, getEmojiByShortCode);