feat(chat): edit messages

components/interactables/Editable/Editable.vue

@@ -354,7 +354,6 @@ export default Editable
   position: relative;
   overflow-y: scroll;
   font-family: @secondary-font;
-  font-size: @text-size;
   &:extend(.font-primary);
 
   .placeholder {

components/views/chat/message/Markdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="message-row" v-html="text" />
+  <span ref="message-row" v-html="text" />
 </template>
 
 <script lang="ts">

components/views/chat/message/Message.html

@@ -3,7 +3,7 @@
   <div
     v-else
     class="chat-message"
-    :class="{ 'show-header': showHeader, 'is-replying-to': isReplyingTo }"
+    :class="{ 'show-header': showHeader, 'is-replying-to': isReplyingTo, 'is-editing': isEditing }"
   >
     <!-- todo - add user options context menu -->
     <template v-if="showHeader">
@@ -24,23 +24,26 @@
     <div class="timestamp">{{ timestamp }}</div>
     <UiContextMenu class="body" :items="contextMenuValues">
       <MessageMarkdown
-        v-if="message.body"
+        v-if="message.body && !isEditing"
         :text="markdownToHtml"
         class="markdown"
         :class="{ bigmoji: containsOnlyEmoji }"
         data-cy="chat-message"
       />
-      <MessageGlyph v-else-if="message.glyph" :glyph="message.glyph" />
-      <!-- <span class="status editing" v-if="message.editingAt">
-        <UiLoadersSpinner spinning />
-      </span>
+      <MessageEdit
+        v-if="isEditing"
+        :message="message"
+        @commitMessage="saveMessage"
+        @cancelMessage="cancelMessage"
+      />
       <span
+        v-else-if="message.lastEditedAt"
         class="status edited"
         data-cy="message-edited"
-        v-else-if="message.editedAt"
       >
         ({{$t('ui.edited')}})
-      </span> -->
+      </span>
+      <MessageGlyph v-else-if="message.glyph" :glyph="message.glyph" />
       <MessageActions
         :setReplyChatbarMessage="setReplyChatbarMessage"
         :emojiReaction="emojiReaction"

components/views/chat/message/Message.less

@@ -96,6 +96,37 @@
       animation-name: emoji-appear;
       animation-duration: 500ms;
     }
+
+    .status {
+      font-size: @font-size-xs;
+      color: @gray;
+      &.editing {
+        vertical-align: bottom;
+        margin-top: 0;
+      }
+    }
+
+    .markdown {
+      white-space: break-spaces;
+      word-wrap: break-word;
+      display: inline;
+      align-items: center;
+      strong {
+        &:extend(.font-secondary);
+      }
+      p {
+        font-size: @text-size;
+        display: inline;
+      }
+      a {
+        color: @satellite-color;
+        &:hover,
+        &:focus {
+          color: @satellite-color;
+          text-decoration: underline;
+        }
+      }
+    }
   }
 
   .footer {
@@ -104,7 +135,7 @@
     padding: 0;
   }
 
-  &:not(.is-replying-to):hover {
+  &:not(.is-replying-to):not(.is-editing):hover {
     > .body {
       &:extend(.background-semitransparent-light);
     }
@@ -115,105 +146,6 @@
   }
 }
 
-.is-message {
-  &:extend(.font-primary);
-  .pinned-message {
-    &:extend(.round-corners);
-    padding: @normal-spacing;
-    margin-top: @normal-spacing;
-    margin-bottom: @light-spacing;
-
-    .pinned-badge {
-      top: -(@light-spacing);
-      left: @light-spacing;
-      padding: 0 @light-spacing;
-      border-radius: @corner-rounding-smaller;
-      font-size: @mini-text-size;
-      position: absolute;
-    }
-  }
-  .sat-icon-container {
-    margin-right: @light-spacing;
-    margin-top: 0.3rem;
-    width: 20px;
-    height: 20px;
-  }
-  .inline-meta {
-    margin-bottom: @light-spacing;
-    display: flex;
-    .is-text {
-      opacity: 0.8;
-      margin-top: 0.3rem;
-      margin-left: @light-spacing;
-    }
-    .satellite-circle {
-      position: relative;
-      svg {
-        margin: -0.2rem;
-        width: 13px;
-        height: 13px;
-      }
-    }
-  }
-  .markdown {
-    white-space: break-spaces;
-    word-wrap: break-word;
-    display: inline;
-    align-items: center;
-    strong {
-      &:extend(.font-secondary);
-    }
-    p {
-      font-size: @text-size;
-      display: inline;
-    }
-    // override bulma link style
-    a {
-      color: @satellite-color;
-      &:hover,
-      &:focus {
-        color: @satellite-color;
-        text-decoration: underline;
-      }
-    }
-  }
-
-  .message-container {
-    position: relative;
-    word-break: break-word;
-    font-family: @secondary-font;
-    font-size: @text-size;
-  }
-  &:hover {
-    &:extend(.background-semitransparent-light);
-    .message-container > .message-actions {
-      display: flex;
-    }
-  }
-  .glyph {
-    width: 192px;
-    height: 192px;
-  }
-  .emoji {
-    font-size: 15pt;
-    font-style: initial;
-  }
-  .bigmoji {
-    .emoji {
-      font-size: 36pt;
-      animation-name: emoji-appear;
-      animation-duration: 500ms;
-    }
-  }
-  .status {
-    font-size: @micro-text-size;
-    &.editing {
-      vertical-align: bottom;
-      margin-top: 0;
-    }
-  }
-}
-
 // non-Retina-specific stuff here
 @media not screen and (-webkit-min-device-pixel-ratio: 2),
   not screen and (min--moz-device-pixel-ratio: 2),

components/views/chat/message/Message.vue

@@ -196,6 +196,28 @@ export default Vue.extend({
         from,
       })
     },
+    saveMessage(message: string) {
+      this.$store.commit('ui/setEditMessage', {
+        id: '',
+        payload: '',
+        from: '',
+      })
+
+      if (message !== this.message.body) {
+        iridium.chat.editMessage({
+          conversationId: this.message.conversationId,
+          messageId: this.message.id,
+          body: message,
+        })
+      }
+    },
+    cancelMessage() {
+      this.$store.commit('ui/setEditMessage', {
+        id: '',
+        payload: '',
+        from: '',
+      })
+    },
   },
 })
 </script>

components/views/chat/message/actions/Actions.html

@@ -18,24 +18,24 @@
     <corner-down-right-icon size="1x" :class="'control-icon'" />
   </div>
   <div
+    v-if="featureReadyToShow"
     class="reply-command"
     v-tooltip.top="$t('messaging.pin')"
-    v-if="featureReadyToShow"
   >
     <archive-icon size="1x" :class="'control-icon'" />
   </div>
   <div
-    class="reply-command coming-soon"
-    v-tooltip.top="$t('controls.edit')"
     v-if="isEditable"
-    @click="toggleModal(ModalWindows.CALL_TO_ACTION)"
+    class="reply-command"
+    v-tooltip.top="$t('controls.edit')"
+    @click="editMessage"
   >
     <edit-icon size="1x" :class="'control-icon'" />
   </div>
   <div
+    v-if="hasMoreSettings"
     class="reply-command"
     v-tooltip.top="$t('ui.more')"
-    v-if="hasMoreSettings"
   >
     <more-vertical-icon size="1x" :class="'control-icon'" />
   </div>

components/views/chat/message/actions/Actions.vue

@@ -10,10 +10,11 @@ import {
   MoreVerticalIcon,
 } from 'satellite-lucide-icons'
 import { mapState } from 'vuex'
-import { UIMessage } from '~/types/messaging'
-import { ModalWindows } from '~/store/ui/types'
 import { RootState } from '~/types/store/store'
-import { Conversation } from '~/libraries/Iridium/chat/types'
+import {
+  Conversation,
+  ConversationMessage,
+} from '~/libraries/Iridium/chat/types'
 import iridium from '~/libraries/Iridium/IridiumManager'
 
 export default Vue.extend({
@@ -43,14 +44,8 @@ export default Vue.extend({
       default: () => () => {},
     },
     message: {
-      type: Object as PropType<UIMessage>,
-      default: () => ({
-        id: '0',
-        at: 1620515543000,
-        type: 'text',
-        from: 'group',
-        payload: 'Invalid Message',
-      }),
+      type: Object as PropType<ConversationMessage>,
+      default: null,
     },
   },
   data() {
@@ -78,19 +73,8 @@ export default Vue.extend({
       return this.conversation?.type === 'group'
     },
     isEditable(): boolean {
-      return (
-        this.message.from === this.accounts.details?.textilePubkey &&
-        !(this.message.type === 'glyph' || this.message.type === 'file')
-      )
-    },
-    ModalWindows: () => ModalWindows,
-  },
-  methods: {
-    toggleModal(modalName: ModalWindows) {
-      this.$store.commit('ui/toggleModal', {
-        name: modalName,
-        state: !this.ui.modals[modalName],
-      })
+      // Only text messages atm
+      return this.message.from === iridium.id && this.message.type === 'text'
     },
   },
 })

components/views/chat/message/edit/Edit.html

@@ -1,24 +1,26 @@
 <div class="edit-message">
-  <div class="edit-message-body" :class="{'is-error': charlimit}">
+  <div class="edit-message-body" :class="{'is-error': isError}">
     <Editable
       v-model="content"
       class="edit-message-body-input"
       data-cy="edit-message-input"
       @keydown="handleInputKeydown"
     />
-    <div class="emoji-toggle">
-      <smile-icon class="edit-message-body-emoj" size="1.5x" />
-    </div>
+    <button v-tooltip.top="$t('ui.emoji')">
+      <smile-icon size="1x" />
+    </button>
   </div>
   <div class="edit-message-bottom">
     <div>
       <div>
         {{$t('messaging.edit.escape_to')}}
-        <a @click="cancelMessage">{{$t('messaging.edit.cancel')}}</a>
+        <a class="action" @click="cancelMessage"
+          >{{$t('messaging.edit.cancel')}}</a
+        >
       </div>
       <div>
         {{$t('messaging.edit.enter_to')}}
-        <a @click="saveMessage">{{$t('messaging.edit.save')}}</a>
+        <a class="action" @click="saveMessage">{{$t('messaging.edit.save')}}</a>
       </div>
     </div>
     <div>{{lengthCount}}/{{maxChars}}</div>