Merge pull request #413 from nagisa77/codex/add-support-for-tieba-emojis-in-vditor

feat: add tieba emoji support

frontend/src/assets/global.css

@@ -71,6 +71,16 @@ body {
   top: var(--header-height) !important;
 }
 
+.vditor-panel {
+  min-width: 400px;
+}
+
+.emoji {
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+}
+
 /* .vditor {
   --textarea-background-color: transparent;
   border: none !important;
@@ -225,7 +235,7 @@ body {
   } 
 
   .vditor-toolbar {
-    display: none;
+    overflow-x: auto;
   }
 
   .about-content h1,
@@ -245,6 +255,11 @@ body {
     margin-bottom: 3px;
   }
 
+
+  .vditor-toolbar--pin {
+    top: 0 !important;
+  }
+
   .about-content li,
   .info-content-text li {
     font-size: 14px;

frontend/src/components/PostEditor.vue

@@ -123,7 +123,6 @@ export default {
 
 <style scoped>
 .post-editor-container {
-  border: 1px solid var(--normal-border-color);
   position: relative;
   min-height: 200px;
 }
@@ -141,4 +140,11 @@ export default {
   pointer-events: all;
   z-index: 10;
 }
+
+@media (max-width: 768px) {
+  .post-editor-container {
+    min-height: 100px;
+  }
+}
+
 </style>

frontend/src/utils/markdown.js

@@ -2,6 +2,7 @@ import MarkdownIt from 'markdown-it'
 import hljs from 'highlight.js'
 import 'highlight.js/styles/github.css'
 import { toast } from '../main'
+import { tiebaEmoji } from './tiebaEmoji'
 
 function mentionPlugin(md) {
   const mentionReg = /^@\[([^\]]+)\]/
@@ -27,6 +28,28 @@ function mentionPlugin(md) {
   md.inline.ruler.before('emphasis', 'mention', mention)
 }
 
+function tiebaEmojiPlugin(md) {
+  md.renderer.rules['tieba-emoji'] = (tokens, idx) => {
+    const name = tokens[idx].content
+    const file = tiebaEmoji[name]
+    return `<img class="emoji" src="${file}" alt="${name}">`
+  }
+  md.inline.ruler.before('emphasis', 'tieba-emoji', (state, silent) => {
+    const pos = state.pos
+    if (state.src.charCodeAt(pos) !== 0x3a) return false
+    const match = state.src.slice(pos).match(/^:tieba(\d+):/)
+    if (!match) return false
+    const key = `tieba${match[1]}`
+    if (!tiebaEmoji[key]) return false
+    if (!silent) {
+      const token = state.push('tieba-emoji', '', 0)
+      token.content = key
+    }
+    state.pos += match[0].length
+    return true
+  })
+}
+
 const md = new MarkdownIt({
   html: false,
   linkify: true,
@@ -43,6 +66,7 @@ const md = new MarkdownIt({
 })
 
 md.use(mentionPlugin)
+md.use(tiebaEmojiPlugin)
 
 export function renderMarkdown(text) {
   return md.render(text || '')

frontend/src/utils/tiebaEmoji.js

@@ -0,0 +1,11 @@
+export const TIEBA_EMOJI_CDN = 'https://cdn.jsdelivr.net/gh/microlong666/tieba_mobile_emotions@master/'
+// export const TIEBA_EMOJI_CDN = 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/vditor/dist/images/emoji/'
+
+export const tiebaEmoji = (() => {
+  const map = { tieba1: TIEBA_EMOJI_CDN + 'image_emoticon.png' }
+  for (let i = 2; i <= 124; i++) {
+    if (i > 50 && i < 62) continue
+    map[`tieba${i}`] = TIEBA_EMOJI_CDN + `image_emoticon${i}.png`
+  }
+  return map
+})()

frontend/src/utils/vditor.js

@@ -3,6 +3,7 @@ import 'vditor/dist/index.css'
 import { API_BASE_URL } from '../main'
 import { getToken, authState } from './auth'
 import { searchUsers, fetchFollowings, fetchAdmins } from './user'
+import { tiebaEmoji } from './tiebaEmoji'
 
 export function getEditorTheme() {
   return document.documentElement.dataset.theme === 'dark' ? 'dark' : 'classic'
@@ -37,13 +38,38 @@ export function createVditor(editorId, options = {}) {
     return searchUsers(value)
   }
 
+  const isMobile = window.innerWidth <= 768
+  const toolbar = isMobile
+    ? ['emoji', 'upload']
+    : [
+        'emoji',
+        'bold',
+        'italic',
+        'strike',
+        '|',
+        'list',
+        'line',
+        'quote',
+        'code',
+        'inline-code',
+        '|',
+        'undo',
+        'redo',
+        '|',
+        'link',
+        'upload'
+      ]
+
   let vditor
   vditor = new Vditor(editorId, {
     placeholder,
     height: 'auto',
     theme: getEditorTheme(),
-    preview: Object.assign({ theme: { current: getPreviewTheme() } }, preview),
+    preview: Object.assign({
+      theme: { current: getPreviewTheme() },
+    }, preview),
     hint: {
+      emoji: tiebaEmoji,
       extend: [
         {
           key: '@',
@@ -58,24 +84,7 @@ export function createVditor(editorId, options = {}) {
       ],
     },
     cdn: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/vditor',
-    toolbar: [
+    toolbar,
-      'emoji',
-      'bold',
-      'italic',
-      'strike',
-      '|',
-      'list',
-      'line',
-      'quote',
-      'code',
-      'inline-code',
-      '|',
-      'undo',
-      'redo',
-      '|',
-      'link',
-      'upload'
-    ],
     upload: {
       accept: 'image/*,video/*',
       multiple: false,