From d3176e2a8da7fc746ad7b0f96e6ccdeab196a6fb Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 29 May 2019 16:46:23 +0200
Subject: [PATCH] Add mentions
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
js/package.json | 1 +
js/src/components/Editor.vue | 280 +++++++++++++++++++++++++++++++++-
js/src/graphql/search.ts | 18 +++
js/src/types/search.model.ts | 7 +-
js/src/views/Event/Create.vue | 6 -
js/yarn.lock | 12 ++
6 files changed, 309 insertions(+), 15 deletions(-)
diff --git a/js/package.json b/js/package.json
index 27f0fedad..f0b61c7f3 100644
--- a/js/package.json
+++ b/js/package.json
@@ -27,6 +27,7 @@
"lodash": "^4.17.11",
"ngeohash": "^0.6.3",
"register-service-worker": "^1.6.2",
+ "tippy.js": "^4.3.1",
"tiptap": "^1.20.1",
"tiptap-extensions": "^1.20.1",
"typeface-signika": "0.0.72",
diff --git a/js/src/components/Editor.vue b/js/src/components/Editor.vue
index fe8b43044..b16b616f7 100644
--- a/js/src/components/Editor.vue
+++ b/js/src/components/Editor.vue
@@ -1,4 +1,5 @@
<template>
+ <div>
<div class="editor">
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive, focused }">
<div class="menubar bar-is-hidden" :class="{ 'is-focused': focused }">
@@ -122,6 +123,23 @@
<editor-content class="editor__content" :editor="editor" />
</div>
+ <div class="suggestion-list" v-show="showSuggestions" ref="suggestions">
+ <template v-if="hasResults">
+ <div
+ v-for="(actor, index) in filteredActors"
+ :key="actor.id"
+ class="suggestion-list__item"
+ :class="{ 'is-selected': navigatedUserIndex === index }"
+ @click="selectActor(actor)"
+ >
+ {{ actor.name }}
+ </div>
+ </template>
+ <div v-else class="suggestion-list__item is-empty">
+ No actors found
+ </div>
+ </div>
+ </div>
</template>
<script lang="ts">
@@ -142,8 +160,14 @@ import {
Link,
Underline,
History,
- Placeholder
+ Placeholder,
+ Mention,
+ Image,
} from 'tiptap-extensions';
+import tippy, { Instance } from 'tippy.js';
+import { SEARCH_PERSONS } from '@/graphql/search';
+import { IActor } from '@/types/actor';
+
@Component({
components: { EditorContent, EditorMenuBar, EditorMenuBubble },
@@ -151,9 +175,33 @@ import {
export default class CreateEvent extends Vue {
@Prop({ required: true }) value!: String;
editor: Editor = null;
- linkUrl: string|null = null;
+
+ /**
+ * Editor Link
+ */
+ linkUrl!: string|null;
linkMenuIsActive: boolean = false;
+ /**
+ * Editor Suggestions
+ */
+ query!: string|null;
+ filteredActors: IActor[] = [];
+ suggestionRange!: object|null;
+ navigatedUserIndex: number = 0;
+ popup!: Instance|null;
+
+ get hasResults() {
+ return this.filteredActors.length;
+ }
+ get showSuggestions() {
+ return this.query || this.hasResults;
+ }
+
+ insertMention: Function = () => {};
+ observer!: MutationObserver|null;
+
+
mounted() {
this.editor = new Editor({
extensions: [
@@ -161,6 +209,77 @@ export default class CreateEvent extends Vue {
new BulletList(),
new HardBreak(),
new Heading({ levels: [1, 2, 3] }),
+ new Mention({
+ items: () => [],
+ onEnter: ({ items, query, range, command, virtualNode }) => {
+ this.query = query;
+ this.filteredActors = items;
+ this.suggestionRange = range;
+ this.renderPopup(virtualNode);
+ // we save the command for inserting a selected mention
+ // this allows us to call it inside of our custom popup
+ // via keyboard navigation and on click
+ this.insertMention = command;
+ },
+ /**
+ * is called when a suggestion has changed
+ */
+ onChange: ({ items, query, range, virtualNode }) => {
+ this.query = query;
+ this.filteredActors = items;
+ this.suggestionRange = range;
+ this.navigatedUserIndex = 0;
+ this.renderPopup(virtualNode);
+ },
+
+ /**
+ * is called when a suggestion is cancelled
+ */
+ onExit: () => {
+ // reset all saved values
+ this.query = null;
+ this.filteredActors = [];
+ this.suggestionRange = null;
+ this.navigatedUserIndex = 0;
+ this.destroyPopup();
+ },
+
+ /**
+ * is called on every keyDown event while a suggestion is active
+ */
+ onKeyDown: ({ event }) => {
+ // pressing up arrow
+ if (event.keyCode === 38) {
+ this.upHandler();
+ return true;
+ }
+ // pressing down arrow
+ if (event.keyCode === 40) {
+ this.downHandler();
+ return true;
+ }
+ // pressing enter
+ if (event.keyCode === 13) {
+ this.enterHandler();
+ return true;
+ }
+ return false;
+ },
+ onFilter: async (items, query) => {
+ if (!query) {
+ return items;
+ }
+ const result = await this.$apollo.query({
+ query: SEARCH_PERSONS,
+ variables: {
+ searchText: query,
+ },
+ });
+ // TODO: TipTap doesn't handle async for onFilter, hence the following line.
+ this.filteredActors = result.data.searchPersons.elements;
+ return this.filteredActors;
+ },
+ }),
new ListItem(),
new OrderedList(),
new TodoItem(),
@@ -172,10 +291,11 @@ export default class CreateEvent extends Vue {
new Underline(),
new History(),
new Placeholder({
- emptyClass: 'is-empty',
- emptyNodeText: 'Write something …',
- showOnlyWhenEditable: false,
- })
+ emptyClass: 'is-empty',
+ emptyNodeText: 'Write something …',
+ showOnlyWhenEditable: false,
+ }),
+ new Image(),
],
onUpdate: ({ getHTML }) => {
this.$emit('input', getHTML());
@@ -191,7 +311,7 @@ export default class CreateEvent extends Vue {
}
}
- showLinkMenu(attrs) {
+ showLinkMenu(attrs: any) {
this.linkUrl = attrs.href;
this.linkMenuIsActive = true;
this.$nextTick(() => {
@@ -209,6 +329,87 @@ export default class CreateEvent extends Vue {
this.editor.focus();
}
+ upHandler() {
+ this.navigatedUserIndex = ((this.navigatedUserIndex + this.filteredActors.length) - 1) % this.filteredActors.length;
+ }
+
+ /**
+ * navigate to the next item
+ * if it's the last item, navigate to the first one
+ */
+ downHandler() {
+ this.navigatedUserIndex = (this.navigatedUserIndex + 1) % this.filteredActors.length;
+ }
+
+ enterHandler() {
+ const actor = this.filteredActors[this.navigatedUserIndex];
+ if (actor) {
+ this.selectActor(actor);
+ }
+ }
+
+ /**
+ * we have to replace our suggestion text with a mention
+ * so it's important to pass also the position of your suggestion text
+ * @param actor IActor
+ */
+ selectActor(actor: IActor) {
+ this.insertMention({
+ range: this.suggestionRange,
+ attrs: {
+ id: actor.id,
+ label: actor.name,
+ },
+ });
+ this.editor.focus();
+ }
+
+ /**
+ * renders a popup with suggestions
+ * tiptap provides a virtualNode object for using popper.js (or tippy.js) for popups
+ * @param node
+ */
+ renderPopup(node) {
+ if (this.popup) {
+ return;
+ }
+ this.popup = tippy(node, {
+ content: this.$refs.suggestions as HTMLElement,
+ trigger: 'mouseenter',
+ interactive: true,
+ theme: 'dark',
+ placement: 'top-start',
+ inertia: true,
+ duration: [400, 200],
+ showOnInit: true,
+ arrow: true,
+ arrowType: 'round',
+ }) as Instance;
+ // we have to update tippy whenever the DOM is updated
+ if (MutationObserver) {
+ this.observer = new MutationObserver(() => {
+ if (this.popup != null && this.popup.popperInstance) {
+ this.popup.popperInstance.scheduleUpdate();
+ }
+ });
+ this.observer.observe(this.$refs.suggestions as HTMLElement, {
+ childList: true,
+ subtree: true,
+ characterData: true,
+ });
+ }
+ }
+
+ destroyPopup() {
+ if (this.popup) {
+ this.popup.destroy();
+ this.popup = null;
+ }
+ if (this.observer) {
+ this.observer.disconnect();
+ }
+ }
+
beforeDestroy() {
this.editor.destroy();
}
@@ -272,11 +473,11 @@ export default class CreateEvent extends Vue {
&__content {
div.ProseMirror {
- background: #fff;
min-height: 10rem;
&:focus {
border-color: #3273dc;
+ background: #fff;
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
}
}
@@ -386,5 +587,68 @@ export default class CreateEvent extends Vue {
color: $color-white;
}
}
+ .mention {
+ background: rgba($color-black, 0.1);
+ color: rgba($color-black, 0.6);
+ font-size: 0.8rem;
+ font-weight: bold;
+ border-radius: 5px;
+ padding: 0.2rem 0.5rem;
+ white-space: nowrap;
+ }
+ .mention-suggestion {
+ color: rgba($color-black, 0.6);
+ }
+ .suggestion-list {
+ padding: 0.2rem;
+ border: 2px solid rgba($color-black, 0.1);
+ font-size: 0.8rem;
+ font-weight: bold;
+ &__no-results {
+ padding: 0.2rem 0.5rem;
+ }
+ &__item {
+ border-radius: 5px;
+ padding: 0.2rem 0.5rem;
+ margin-bottom: 0.2rem;
+ cursor: pointer;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ &.is-selected,
+ &:hover {
+ background-color: rgba($color-white, 0.2);
+ }
+ &.is-empty {
+ opacity: 0.5;
+ }
+ }
+ }
+ .tippy-tooltip.dark-theme {
+ background-color: $color-black;
+ padding: 0;
+ font-size: 1rem;
+ text-align: inherit;
+ color: $color-white;
+ border-radius: 5px;
+ .tippy-backdrop {
+ display: none;
+ }
+ .tippy-roundarrow {
+ fill: $color-black;
+ }
+ .tippy-popper[x-placement^=top] & .tippy-arrow {
+ border-top-color: $color-black;
+ }
+ .tippy-popper[x-placement^=bottom] & .tippy-arrow {
+ border-bottom-color: $color-black;
+ }
+ .tippy-popper[x-placement^=left] & .tippy-arrow {
+ border-left-color: $color-black;
+ }
+ .tippy-popper[x-placement^=right] & .tippy-arrow {
+ border-right-color: $color-black;
+ }
+ }
</style>
diff --git a/js/src/graphql/search.ts b/js/src/graphql/search.ts
index f5af5221b..562a8eab1 100644
--- a/js/src/graphql/search.ts
+++ b/js/src/graphql/search.ts
@@ -34,3 +34,21 @@ query SearchGroups($searchText: String!) {
}
}
`;
+
+export const SEARCH_PERSONS = gql`
+ query SearchPersons($searchText: String!) {
+ searchPersons(search: $searchText) {
+ total,
+ elements {
+ id,
+ avatar {
+ url
+ },
+ domain,
+ preferredUsername,
+ name,
+ __typename
+ }
+ }
+ }
+`;
diff --git a/js/src/types/search.model.ts b/js/src/types/search.model.ts
index 1bd731439..afe27ba7b 100644
--- a/js/src/types/search.model.ts
+++ b/js/src/types/search.model.ts
@@ -1,4 +1,4 @@
-import { IGroup } from '@/types/actor';
+import { IGroup, IPerson } from '@/types/actor';
import { IEvent } from '@/types/event.model';
export interface SearchEvent {
@@ -10,3 +10,8 @@ export interface SearchGroup {
total: number;
elements: IGroup[];
}
+
+export interface SearchPerson {
+ total: number;
+ elements: IPerson[];
+}
diff --git a/js/src/views/Event/Create.vue b/js/src/views/Event/Create.vue
index 414423877..4e3a8d08f 100644
--- a/js/src/views/Event/Create.vue
+++ b/js/src/views/Event/Create.vue
@@ -142,9 +142,3 @@ export default class CreateEvent extends Vue {
// }
}
</script>
-
-<style>
-.markdown-render h1 {
- font-size: 2em;
-}
-</style>
diff --git a/js/yarn.lock b/js/yarn.lock
index 41bd08b6b..0cd625ae1 100644
--- a/js/yarn.lock
+++ b/js/yarn.lock
@@ -7738,6 +7738,11 @@ pofile@^1.0.10:
resolved "https://registry.yarnpkg.com/pofile/-/pofile-1.0.11.tgz#35aff58c17491d127a07336d5522ebc9df57c954"
integrity sha512-Vy9eH1dRD9wHjYt/QqXcTz+RnX/zg53xK+KljFSX30PvdDMb2z+c6uDUeblUGqqJgz3QFsdlA0IJvHziPmWtQg==
+popper.js@^1.14.7:
+ version "1.15.0"
+ resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.15.0.tgz#5560b99bbad7647e9faa475c6b8056621f5a4ff2"
+ integrity sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==
+
portfinder@^1.0.20:
version "1.0.20"
resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.20.tgz#bea68632e54b2e13ab7b0c4775e9b41bf270e44a"
@@ -9903,6 +9908,13 @@ timsort@^0.3.0:
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
+tippy.js@^4.3.1:
+ version "4.3.1"
+ resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-4.3.1.tgz#ea38fa7e1a2e3448ac35faa5115ccbb8414f50aa"
+ integrity sha512-H09joePakSu6eDSL1wj5LjEWwvpEELyJQlgsts4wVH7223t4DlyzGCaZNDO8/MQAnSuic4JhKpXtgzSYGlobvg==
+ dependencies:
+ popper.js "^1.14.7"
+
tiptap-commands@^1.10.5:
version "1.10.5"
resolved "https://registry.yarnpkg.com/tiptap-commands/-/tiptap-commands-1.10.5.tgz#e897b59debdddcbc20f8289c92f9e39c5d22e19a"