Reuse the emoji picker for reactions (#7)

Fixes #6

Co-authored-by: FloatingGhost <hannah@coffee-and-dreams.uk>
Reviewed-on: http://akkoma.dev/AkkomaGang/pleroma-fe/pulls/7

.woodpecker.yml

@@ -0,0 +1,50 @@
+pipeline:
+  lint:
+    when:
+      event:
+      - push
+      - pull_request
+    image: node:16
+    commands:
+    - yarn
+    - yarn lint
+    - yarn stylelint
+
+  test:
+    when:
+      event:
+      - push
+      - pull_request
+    image: node:16
+    commands:
+    - apt update
+    - apt install firefox-esr -y --no-install-recommends
+    - yarn 
+    - yarn unit
+
+  build:
+    when:
+      event:
+      - tag
+    image: node:16
+    commands:
+    - yarn
+    - yarn build
+
+  release:
+    when:
+      event:
+      - tag
+    image: node:16
+    secrets:
+    - SCW_ACCESS_KEY
+    - SCW_SECRET_KEY
+    - SCW_DEFAULT_ORGANIZATION_ID
+    commands:
+      - apt-get update && apt-get install -y rclone wget zip
+      - wget https://github.com/scaleway/scaleway-cli/releases/download/v2.5.1/scaleway-cli_2.5.1_linux_amd64
+      - mv scaleway-cli_2.5.1_linux_amd64 scaleway-cli
+      - chmod +x scaleway-cli
+      - ./scaleway-cli object config install type=rclone
+      - zip akkoma-fe.zip -r dist
+      - rclone copyto akkoma-fe.zip scaleway:akkoma-updates/frontend/akkoma-fe.zip

src/components/react_button/react_button.js

@@ -1,4 +1,5 @@
 import Popover from '../popover/popover.vue'
+import EmojiPicker from '../emoji_picker/emoji_picker.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
 
@@ -12,10 +13,12 @@ const ReactButton = {
     }
   },
   components: {
-    Popover
+    Popover,
+    EmojiPicker
   },
   methods: {
-    addReaction (event, emoji, close) {
+    addReaction (event, close) {
+      const emoji = event.insertion
       const existingReaction = this.status.emoji_reactions.find(r => r.name === emoji)
       if (existingReaction && existingReaction.me) {
         this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
@@ -32,40 +35,6 @@ const ReactButton = {
     }
   },
   computed: {
-    commonEmojis () {
-      return [
-        { displayText: 'thumbsup', replacement: '👍' },
-        { displayText: 'angry', replacement: '😠' },
-        { displayText: 'eyes', replacement: '👀' },
-        { displayText: 'joy', replacement: '😂' },
-        { displayText: 'fire', replacement: '🔥' }
-      ]
-    },
-    emojis () {
-      if (this.filterWord !== '') {
-        const filterWordLowercase = this.filterWord.toLowerCase()
-        let orderedEmojiList = []
-        for (const emoji of [
-          ...this.$store.state.instance.emoji,
-          ...this.$store.state.instance.customEmoji
-        ]) {
-          if (emoji.replacement === this.filterWord) return [emoji]
-
-          const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase)
-          if (indexOfFilterWord > -1) {
-            if (!Array.isArray(orderedEmojiList[indexOfFilterWord])) {
-              orderedEmojiList[indexOfFilterWord] = []
-            }
-            orderedEmojiList[indexOfFilterWord].push(emoji)
-          }
-        }
-        return orderedEmojiList.flat()
-      }
-      return [
-        ...this.$store.state.instance.emoji,
-        ...this.$store.state.instance.customEmoji
-      ] || []
-    },
     mergedConfig () {
       return this.$store.getters.mergedConfig
     }

src/components/react_button/react_button.vue

@@ -9,43 +9,10 @@
     @show="focusInput"
   >
     <template v-slot:content="{close}">
-      <div class="reaction-picker-filter">
-        <input
-          v-model="filterWord"
-          size="1"
-          :placeholder="$t('emoji.search_emoji')"
-        >
-      </div>
-      <div class="reaction-picker">
-        <span
-          v-for="emoji in commonEmojis"
-          :key="emoji.replacement"
-          class="emoji-button"
-          :title="emoji.displayText"
-          @click="addReaction($event, emoji.replacement, close)"
-        >
-          {{ emoji.replacement }}
-        </span>
-        <div class="reaction-picker-divider" />
-        <span
-          v-for="(emoji, key) in emojis"
-          :key="key"
-          class="emoji-button"
-          :title="emoji.displayText"
-          @click="addReaction($event, emoji.replacement, close)"
-        >
-          <img
-            v-if="emoji.imageUrl !== false"
-            :src="emoji.imageUrl"
-            width="30px"
-            class="custom-reaction"
-          >
-          <span v-else>
-            {{ emoji.replacement }}
-          </span>
-        </span>
-        <div class="reaction-bottom-fader" />
-      </div>
+      <EmojiPicker
+        :enableStickerPicker="false"
+        @emoji="addReaction($event, close)"
+      />
     </template>
     <template v-slot:trigger>
       <button

src/components/rich_content/rich_content.jsx

@@ -112,23 +112,6 @@ export default {
       }
     }
 
-    const renderLink = (attrs, children) => {
-      const updatedLink = attrs['href'].replace(/&/g, '&')
-      const updatedChildren = children.map(child => {
-        if (typeof child === 'string') {
-          return child.replace(attrs['href'], updatedLink)
-        }
-        if (child[0] === '<span>') {
-          return <span>
-            { child[1] }
-          </span>
-        }
-        return child[1]
-      })
-      return <a {...{ attrs }} href={updatedLink}>
-        { ...updatedChildren }
-      </a>
-    }
     // Processor to use with html_tree_converter
     const processItem = (item, index, array, what) => {
       // Handle text nodes - just add emoji
@@ -193,9 +176,6 @@ export default {
               return renderMention(attrs, children)
             } else {
               currentMentions = null
-              if (attrs['href']) {
-                return renderLink(attrs, children)
-              }
               break
             }
           case 'span':

static/terms-of-service.html

@@ -1,45 +1,3 @@
 <h4>Terms of Service</h4>
 
-<p>It's mainly "be nice"</p>
-
-<ol>
-    <li>
-        <h3>Don't be a big meanie</h4>
-        <p>Arguments are cool and all but don't make them into flamewars. Try to act in good faith - we want to be at least on good terms with people. Please act with understanding towards others on this instance. Most people here are probably struggling with a lot, be mindful of that.</p>
-    </li>
-    <li>
-        <h3>Mark your lewds!</h3>
-	<p>Reminder that lewd is bad and nobody wants to be forced to see that. Just mark it sensitive, and post unlisted. That is to say, anything suggestive/ecchi upwards should be marked. If you wouldn't look at it with your parents/boss in the room, mark it. It goes without saying that if you're <em>going</em> to post lewd stuff, keep it sensible. Obviously nothing underaged or otherwise questionable. Or you could just not post lewd stuff. Either/or.</p>
-    </li>
-    <li>
-	    <h3>This is a <b>Kink Shame Zone</b></h3>
-	    <p>Being a lewdie will be met with many anime girl reaction images shaming you for your lewdness. Go think about icky things on someone else's webzone™</p>
-    </li>
-    <li>
-	   <h3>Keep it legal!</h3>
-	   <p>Server is hosted in france, keep content legal for there (+ wherever you're browsing from)</p>
-    </li>
-    <li>
-	    <h3>No ads/spambots</h3>
-	    <p>I didn't think I'd have to specify this, but please do not set up bots solely for trying to advertise.</h3>
-    </li>
-    <li>
-	    <h3>Non-TOS recommendations</h3>
-	    <p>This is stuff that'd I'd <em>like</em> you to do, but I won't outright ban you if you don't follow them</p>
-	    <ul>
-		    <li>If someone is sadposting, don't antagonise them - they probably just want to vent</li>
-		    <li>Put walls of text behind a subject (CW) - helps the timeline not get flooded with text</li>
-	    </ul>
-    </li>
-
-    <li>
-	    <h3>Other</h3>
-	    <p>If you're here and you happen to play minecraft, feel free to message me with your username and come play with us sometime!</p>
-   </li>
-
-</ol>
-
-<p>So I guess yeah, that's about it. Try to be nice, eh? We're probably all sad here.</p>
-
-<br>
-<img src="/static/logo.svg" style="display: block; margin: auto; max-width: 100%; height: 50px; object-fit: contain;" />
+<p>This is a placeholder, overwrite this by putting a file at <pre>instance/static/terms_of_service.html</pre><p>

test/unit/specs/components/rich_content.spec.js

@@ -44,12 +44,12 @@ describe('RichContent', () => {
     const html = [
       p('Testing 'em all'),
       'Testing 'em all',
-      '<a href="http://example.com?a=1&amp;b=2">http://example.com?a=1&b=2</a>'
+      '<a href="http://example.com?a=1">http://example.com?a=1</a>'
     ].join('')
     const expected = [
       p('Testing \'em all'),
       'Testing \'em all',
-      '<a href="http://example.com?a=1&b=2">http://example.com?a=1&b=2</a>'
+      '<a href="http://example.com?a=1" target="_blank">http://example.com?a=1</a>'
     ].join('')
     const wrapper = shallowMount(RichContent, {
       global,