fix: в превью сообщений не выделялись ссылки и хештеги

Author: danyadev

Diff for: src/components/SnackbarsWrapper.vue

@@ -12,7 +12,7 @@
         />
 
         <div>
-          <VKText mention="attachment">{{ snackbar.text }}</VKText>
+          <VKText preview>{{ snackbar.text }}</VKText>
         </div>
 
         <Icon

Diff for: src/components/UI/VKText.vue

@@ -8,39 +8,32 @@ import domains from 'js/json/domains.json';
 
 export default {
   props: {
-    // Заменять ли <br> на пробел, чтобы получить однострочный текст
-    inline: {
-      type: Boolean,
-      default: true
-    },
-    // Парсить ли ссылки и хештеги
+    // true - оставляет переносы строк, false (по умолчанию) - удаляет переносы строк
+    multiline: Boolean,
+    // Парсит ссылки и хештеги
     link: Boolean,
-    // text - преобразовать упоминание в нормальный вид ([id|text] -> text)
-    // attachment - выделить упоминание синим цветом
-    // link - выделить синим цветом и сделать кликабельным
-    mention: String
+    // Парсит упоминания
+    mention: Boolean,
+    // Выделяет ссылки, хештеги и упоминания синим цветом, но не делает их кликабельными
+    preview: Boolean
   },
 
   setup(props, { slots }) {
     const text = computed(() => slots.default()[0].children);
 
     function parseBlock(block) {
       if (block.type === 'mention') {
-        if (!props.mention) {
+        if (!props.mention && !props.preview) {
           return [block.raw];
         }
 
         const mentionContent = block.value.reduce((blocks, mentionTextBlock) => (
           [...blocks, ...parseBlock(mentionTextBlock)]
         ), []);
 
-        if (props.mention === 'text') {
-          return mentionContent;
-        }
-
         let attrs;
 
-        if (props.mention === 'link') {
+        if (props.mention) {
           attrs = {
             class: 'link',
             onClick() {
@@ -49,7 +42,7 @@ export default {
             }
           };
         } else {
-          attrs = { class: 'mention_attachment' };
+          attrs = { class: 'message_preview' };
         }
 
         return [h('div', attrs, mentionContent)];
@@ -60,29 +53,27 @@ export default {
       }
 
       if (block.type === 'br') {
-        return [props.inline ? ' ' : h('br')];
+        return [props.multiline ? h('br') : ' '];
       }
 
-      if (block.type === 'link' && props.link) {
-        return [
-          h('div', {
-            class: 'link',
-            onClick: () => internalLinkResolver(block.link)
-          }, [block.value])
-        ];
+      if (block.type === 'link' && (props.link || props.preview)) {
+        const params = props.link
+          ? { class: 'link', onClick: () => internalLinkResolver(block.link) }
+          : { class: 'message_preview' };
+
+        return [h('div', params, [block.value])];
       }
 
-      if (block.type === 'hashtag' && props.link) {
-        return [
-          h('div', {
-            class: 'link'
-            // onClick() {}
-          }, [block.value])
-        ];
+      if (block.type === 'hashtag' && (props.link || props.preview)) {
+        const params = props.link
+          ? { class: 'link' }
+          : { class: 'message_preview' };
+
+        return [h('div', params, [block.value])];
       }
 
-      if (block.type === 'massMention' && props.mention && props.mention !== 'text') {
-        return [h('div', { class: 'mention_attachment' }, block.value)];
+      if (block.type === 'massMention' && (props.mention || props.preview)) {
+        return [h('div', { class: 'message_preview' }, block.value)];
       }
 
       return [block.value];
@@ -194,7 +185,7 @@ const mentionParser = createParser({
 </script>
 
 <style>
-.mention_attachment {
+.message_preview {
   display: inline;
   color: var(--text-blue);
 }

Diff for: src/components/messages/MessagesPeer.vue

@@ -54,7 +54,7 @@
                 :author="author"
                 :peer_id="peer.id"
               />
-              <VKText v-else mention="attachment">{{ message }}</VKText>
+              <VKText v-else preview>{{ message }}</VKText>
             </div>
           </div>
 

Diff for: src/components/messages/chat/Message.vue

@@ -44,7 +44,7 @@
               {{ l(msg.isExpired ? 'is_message_expired' : 'im_attachment_deleted') }}
             </div>
             <div v-else class="message_text">
-              <VKText :inline="false" link mention="link">{{ msg.text }}</VKText>
+              <VKText multiline mention link>{{ msg.text }}</VKText>
             </div>
 
             <Attachments :attachments="msg.attachments" />

Diff for: src/components/messages/chat/PinnedMessage.vue

@@ -8,7 +8,7 @@
         <div class="im_pinned_msg_time">{{ time }}</div>
       </div>
       <div :class="['im_pinned_msg_text text-overflow', { hasAttachment }]">
-        <VKText mention="attachment">{{ text }}</VKText>
+        <VKText preview>{{ text }}</VKText>
       </div>
     </div>
 

Diff for: src/components/messages/chat/attachments/ForwardedMessage.vue

@@ -20,7 +20,7 @@
       </div>
       <div v-else class="attach_fwd_msg_text">
         <ShortText>
-          <VKText :inline="false" mention="link" link>{{ msg.text }}</VKText>
+          <VKText multiline mention link>{{ msg.text }}</VKText>
         </ShortText>
       </div>
 

Diff for: src/components/messages/chat/attachments/Reply.vue

@@ -16,7 +16,7 @@
         {{ l(msg.isExpired ? 'is_message_expired' : 'im_attachment_deleted') }}
       </div>
       <div v-else :class="['attach_reply_text', { hasAttachment: msg.hasAttachment && !msg.text }]">
-        <VKText mention="attachment">{{ text }}</VKText>
+        <VKText preview>{{ text }}</VKText>
       </div>
     </div>
   </div>