diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/EditorWrapper.vue | 3 | ||||
| -rw-r--r-- | src/components/MenuBar.vue | 22 | ||||
| -rw-r--r-- | src/extensions/Emoji.js | 36 | ||||
| -rw-r--r-- | src/extensions/index.js | 2 | ||||
| -rw-r--r-- | src/mixins/menubar.js | 8 |
5 files changed, 66 insertions, 5 deletions
diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue index 243117301..7d5b0d31d 100644 --- a/src/components/EditorWrapper.vue +++ b/src/components/EditorWrapper.vue @@ -82,7 +82,7 @@ import { createEditor, markdownit, createMarkdownSerializer, serializePlainText, import { EditorContent } from 'tiptap' import { Collaboration } from 'tiptap-extensions' -import { Keymap, UserColor } from './../extensions' +import { Emoji, Keymap, UserColor } from './../extensions' import isMobile from './../mixins/isMobile' import store from './../mixins/store' import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip' @@ -355,6 +355,7 @@ export default { return true }, }), + new Emoji(), ], enableRichEditing: this.isRichEditor, languages, diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue index 73b83a1da..0b9fcb069 100644 --- a/src/components/MenuBar.vue +++ b/src/components/MenuBar.vue @@ -25,7 +25,16 @@ <div class="menubar" :class="{ 'is-focused': focused, 'autohide': autohide }"> <div v-if="isRichEditor" ref="menubar" class="menubar-icons"> <template v-for="(icon, $index) in allIcons"> - <button v-if="icon.class" + <EmojiPicker v-if="icon.class === 'icon-emoji'" + :key="icon.label" + class="menuitem-emoji" + @select="emojiObject => addEmoji(commands, allIcons.find(i => i.class === 'icon-emoji'), emojiObject)"> + <button class="icon-emoji" + :title="t('text', 'Insert emoji')" + :aria-label="t('text', 'Insert emoji')" + :aria-haspopup="true" /> + </EmojiPicker> + <button v-else-if="icon.class" v-show="$index < iconCount" :key="icon.label" :title="icon.label" @@ -48,7 +57,7 @@ </template> <Actions> <template v-for="(icon, $index) in allIcons"> - <ActionButton v-if="icon.class && isHiddenInMenu($index)" + <ActionButton v-if="icon.class && isHiddenInMenu($index) && !(icon.class === 'icon-emoji')" :key="icon.class" :icon="icon.class" @click="clickIcon(commands, icon)"> @@ -81,6 +90,7 @@ import { optimalPath } from './../helpers/files' import Actions from '@nextcloud/vue/dist/Components/Actions' import ActionButton from '@nextcloud/vue/dist/Components/ActionButton' import PopoverMenu from '@nextcloud/vue/dist/Components/PopoverMenu' +import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker' import ClickOutside from 'vue-click-outside' import { getCurrentUser } from '@nextcloud/auth' @@ -91,6 +101,7 @@ export default { ActionButton, PopoverMenu, Actions, + EmojiPicker, }, directives: { Tooltip, @@ -208,7 +219,7 @@ export default { this.windowWidth // eslint-disable-line const menuBarWidth = this.$refs.menubar && this.$refs.menubar.clientWidth > 200 ? this.$refs.menubar.clientWidth : 200 const iconCount = Math.max((Math.floor(menuBarWidth / 44) - 2), 0) - return iconCount + return iconCount - 1 }, imagePath() { return this.lastImagePath @@ -318,6 +329,9 @@ export default { } return current.fill('..').concat(target).join('/') }, + addEmoji(commands, icon, emojiObject) { + return icon.action(commands, emojiObject) + }, }, } </script> @@ -407,7 +421,7 @@ export default { } } - .menubar .submenu { + .menubar .submenu, .menubar .menuitem-emoji { display: inline-block; width: 44px; height: 44px; diff --git a/src/extensions/Emoji.js b/src/extensions/Emoji.js new file mode 100644 index 000000000..5c95d5e04 --- /dev/null +++ b/src/extensions/Emoji.js @@ -0,0 +1,36 @@ +/* + * @copyright Copyright (c) 2021 Jonas Meurer <jonas@freesources.org> + * + * @author Jonas Meurer <jonas@freesources.org> + * + * @license GNU AGPL version 3 or any later version + * + * 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 { Extension } from 'tiptap' +import { insertText } from 'tiptap-commands' + +export default class Emoji extends Extension { + + get name() { + return 'emoji' + } + + commands() { + return emoji => insertText(emoji) + } + +} diff --git a/src/extensions/index.js b/src/extensions/index.js index 856c8bd4e..e94efd425 100644 --- a/src/extensions/index.js +++ b/src/extensions/index.js @@ -20,10 +20,12 @@ * */ +import Emoji from './Emoji' import Keymap from './Keymap' import UserColor from './UserColor' export { + Emoji, Keymap, UserColor, } diff --git a/src/mixins/menubar.js b/src/mixins/menubar.js index 6d18fce06..46d538f4e 100644 --- a/src/mixins/menubar.js +++ b/src/mixins/menubar.js @@ -151,4 +151,12 @@ export default [ return command.code_block() }, }, + { + label: t('text', 'Emoji picker'), + class: 'icon-emoji', + isActive: (isActive) => false, + action: (command, emojiObject) => { + return command.emoji(emojiObject) + }, + }, ] |