enh: Provide `getCurrentSkinTone` and `setCurrentSkinTone` functions and use in `EmojiSearch`

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

src/components/NcEmojiPicker/NcEmojiPicker.vue

@@ -201,9 +201,9 @@ This component allows the user to pick an emoji.
 </template>
 
 <script>
-import { getBuilder } from '@nextcloud/browser-storage'
 import { Picker, Emoji, EmojiIndex } from 'emoji-mart-vue-fast'
 import { t } from '../../l10n.js'
+import { getCurrentSkinTone, setCurrentSkinTone } from '../../functions/emoji/emoji.ts'
 import { Color } from '../../utils/GenColors.js'
 
 import data from 'emoji-mart-vue-fast/data/all.json'
@@ -217,8 +217,6 @@ import NcTextField from '../NcTextField/index.js'
 // Will be initialized on the first NcEmojiPicker creating
 let emojiIndex
 
-const storage = getBuilder('nextcloud-vue').persist(true).build()
-
 const i18n = {
 	search: t('Search emoji'),
 	notfound: t('No emoji found'),
@@ -340,8 +338,7 @@ export default {
 	},
 
 	data() {
-		// sanizized value (skin tone is allowed from 1 to 6)
-		const currentSkinTone = Math.min(Math.max(Number.parseInt(storage.getItem('NcEmojiPicker::currentSkinTone') ?? '1'), 1), 6)
+		const currentSkinTone = getCurrentSkinTone()
 
 		return {
 			/**
@@ -384,7 +381,7 @@ export default {
 			if (index > -1) {
 				this.currentSkinTone = index + 1
 				this.currentColor = this.skinTonePalette[index]
-				storage.setItem('NcEmojiPicker::currentSkinTone', `${this.currentSkinTone}`)
+				setCurrentSkinTone(this.currentSkinTone)
 			}
 		},
 

src/components/NcRichContenteditable/NcRichContenteditable.vue

@@ -254,7 +254,7 @@ import { t } from '../../l10n.js'
 import NcAutoCompleteResult from './NcAutoCompleteResult.vue'
 import richEditor from '../../mixins/richEditor/index.js'
 import Tooltip from '../../directives/Tooltip/index.js'
-import { emojiSearch, emojiAddRecent } from '../../functions/emoji/index.js'
+import { emojiSearch, emojiAddRecent } from '../../functions/emoji/index.ts'
 import { searchProvider, getLinkWithPicker } from '../NcRichText/index.js'
 
 import Tribute from 'tributejs/dist/tribute.esm.js'

src/functions/emoji/emoji.js

@@ -1,50 +0,0 @@
-/**
- * @copyright Copyright (c) 2021 Jonas Meurer <jonas@freesources.org>
- *
- * @author Jonas Meurer <jonas@freesources.org>
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-
-import data from 'emoji-mart-vue-fast/data/all.json'
-import { EmojiIndex, frequently } from 'emoji-mart-vue-fast'
-
-// export const allEmojis = index.buildIndex()
-
-/**
- * @param {string} query Emoji search string
- * @param {number} maxResults Maximum of returned emojis
- * @return {Array} list of found emojis
- */
-export const emojiSearch = function(query, maxResults = 10) {
-	const index = new EmojiIndex(data)
-	if (query) {
-		let results = index.search(`:${query}`, maxResults)
-		if (results.length < maxResults) {
-			results = results.concat(index.search(query, maxResults - results.length))
-		}
-		return results
-	}
-
-	return frequently.get(maxResults).map((id) => index.emoji(id)) || []
-}
-
-export const emojiAddRecent = function(id) {
-	frequently.add(id)
-}
-
-export default { emojiSearch, emojiAddRecent }

src/functions/emoji/emoji.ts

@@ -0,0 +1,87 @@
+/**
+ * @copyright Copyright (c) 2021 Jonas Meurer <jonas@freesources.org>
+ *
+ * @author Jonas Meurer <jonas@freesources.org>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { getBuilder } from '@nextcloud/browser-storage'
+import { EmojiIndex, frequently } from 'emoji-mart-vue-fast'
+
+import data from 'emoji-mart-vue-fast/data/all.json'
+
+const storage = getBuilder('nextcloud-vue').persist(true).build()
+
+/**
+ * Skin tones supported by Unicode Emojis (Fitzpatrick scale)
+ * The numeric values align with `emoji-mart-vue`
+ */
+export enum EmojiSkinTone {
+	Neutral = 1,
+	Light = 2,
+	MediumLight = 3,
+	Medium = 4,
+	MediumDark = 5,
+	Dark = 6,
+}
+
+/**
+ * @param {string} query Emoji search string
+ * @param {number} maxResults Maximum of returned emojis
+ * @return {Array} list of found emojis
+ */
+export const emojiSearch = (query: string, maxResults: number = 10) => {
+	const index = new EmojiIndex(data)
+	const currentSkinTone = getCurrentSkinTone()
+
+	let results
+	if (query) {
+		results = index.search(`:${query}`, maxResults)
+		if (results.length < maxResults) {
+			results = results.concat(index.search(query, maxResults - results.length))
+		}
+	} else {
+		results = frequently.get(maxResults).map((id: number) => index.emoji(id)) || []
+	}
+
+	return results.map((emoji) => emoji.getSkin(currentSkinTone))
+}
+
+export const emojiAddRecent = function(id) {
+	frequently.add(id)
+}
+
+/**
+ * Get the current skin tone index used for emojis
+ * @return {EmojiSkinTone} The skin tone
+ */
+export const getCurrentSkinTone = () => {
+	const skinTone = Number.parseInt(storage.getItem('NcEmojiPicker::currentSkinTone') ?? '1')
+	// Clamp skinTone to valid ranges
+	return Math.min(Math.max(skinTone, EmojiSkinTone.Neutral), EmojiSkinTone.Dark)
+}
+
+/**
+ * Set the current active skin tone for emojis
+ * @param {EmojiSkinTone} skinTone Skin tone
+ */
+export const setCurrentSkinTone = (skinTone: EmojiSkinTone) => {
+	// Clamp skinTone to valid ranges
+	skinTone = Math.min(Math.max(skinTone, EmojiSkinTone.Neutral), EmojiSkinTone.Dark)
+	storage.setItem('NcEmojiPicker::currentSkinTone', skinTone.toString())
+}

src/functions/emoji/index.ts

@@ -20,6 +20,4 @@
  *
  */
 
-import { emojiSearch, emojiAddRecent } from './emoji.js'
-
-export { emojiSearch, emojiAddRecent }
+export * from './emoji'

src/functions/index.js

@@ -1,3 +1,3 @@
 export * from './a11y/index.ts'
-export * from './emoji/index.js'
+export * from './emoji/index.ts'
 export { default as usernameToColor } from './usernameToColor/index.js'

tsconfig.json

@@ -4,7 +4,7 @@
   "exclude": ["./src/**/*.cy.ts"],
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "target": "ESNext",
     "module": "esnext",
     "declaration": true,