Fix mentions

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-05-02 19:27:23 +02:00
parent e3753c041e
commit 3afc7c7feb
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
7 changed files with 291 additions and 374 deletions

View File

@ -48,6 +48,7 @@
"leaflet.locatecontrol": "^0.73.0",
"lodash": "^4.17.11",
"ngeohash": "^0.6.3",
"p-debounce": "^4.0.0",
"phoenix": "^1.4.11",
"register-service-worker": "^1.7.1",
"tippy.js": "^6.2.3",

View File

@ -6,12 +6,15 @@
id="tiptab-editor"
:data-actor-id="currentActor && currentActor.id"
>
<div v-if="isDescriptionMode" :editor="editor">
<div class="menubar bar-is-hidden">
<div
class="menubar bar-is-hidden"
v-if="isDescriptionMode"
:editor="editor"
>
<button
class="menubar__button"
:class="{ 'is-active': editor.isActive('bold') }"
@click="editor.chain().focus().toggleBold().focus().run()"
@click="editor.chain().focus().toggleBold().run()"
type="button"
>
<b-icon icon="format-bold" />
@ -20,7 +23,7 @@
<button
class="menubar__button"
:class="{ 'is-active': editor.isActive('italic') }"
@click="editor.chain().focus().toggleItalic().focus().run()"
@click="editor.chain().focus().toggleItalic().run()"
type="button"
>
<b-icon icon="format-italic" />
@ -29,7 +32,7 @@
<button
class="menubar__button"
:class="{ 'is-active': editor.isActive('underline') }"
@click="editor.chain().focus().toggleUnderline().focus().run()"
@click="editor.chain().focus().toggleUnderline().run()"
type="button"
>
<b-icon icon="format-underline" />
@ -39,9 +42,7 @@
v-if="!isBasicMode"
class="menubar__button"
:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
@click="
editor.chain().focus().toggleHeading({ level: 1 }).focus().run()
"
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
type="button"
>
<b-icon icon="format-header-1" />
@ -51,9 +52,7 @@
v-if="!isBasicMode"
class="menubar__button"
:class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
@click="
editor.chain().focus().toggleHeading({ level: 2 }).focus().run()
"
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
type="button"
>
<b-icon icon="format-header-2" />
@ -63,9 +62,7 @@
v-if="!isBasicMode"
class="menubar__button"
:class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
@click="
editor.chain().focus().toggleHeading({ level: 3 }).focus().run()
"
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
type="button"
>
<b-icon icon="format-header-3" />
@ -102,7 +99,7 @@
class="menubar__button"
v-if="!isBasicMode"
:class="{ 'is-active': editor.isActive('bulletList') }"
@click="editor.chain().focus().toggleBulletList().focus().run()"
@click="editor.chain().focus().toggleBulletList().run()"
type="button"
>
<b-icon icon="format-list-bulleted" />
@ -112,7 +109,7 @@
v-if="!isBasicMode"
class="menubar__button"
:class="{ 'is-active': editor.isActive('orderedList') }"
@click="editor.chain().focus().toggleOrderedList().focus().run()"
@click="editor.chain().focus().toggleOrderedList().run()"
type="button"
>
<b-icon icon="format-list-numbered" />
@ -146,23 +143,17 @@
<b-icon icon="redo" />
</button>
</div>
</div>
<bubble-menu
v-if="editor && isCommentMode"
class="bubble-menu"
:editor="editor"
:keep-in-bounds="true"
v-slot="{ menu }"
>
<div
class="menububble"
:class="{ 'is-active': menu.isActive }"
:style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
:tippy-options="{ duration: 100 }"
>
<button
class="menububble__button"
:class="{ 'is-active': editor.isActive('bold') }"
@click="editor.chain().focus().toggleBold().focus().run()"
@click="editor.chain().focus().toggleBold().run()"
type="button"
>
<b-icon icon="format-bold" />
@ -172,40 +163,16 @@
<button
class="menububble__button"
:class="{ 'is-active': editor.isActive('italic') }"
@click="editor.chain().focus().toggleItalic().focus().run()"
@click="editor.chain().focus().toggleItalic().run()"
type="button"
>
<b-icon icon="format-italic" />
<span class="visually-hidden">{{ $t("Italic") }}</span>
</button>
</div>
</bubble-menu>
<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="media suggestion-list__item"
:class="{ 'is-selected': navigatedActorIndex === index }"
@click="selectActor(actor)"
>
<div class="media-left">
<figure class="image is-16x16" v-if="actor.avatar">
<img :src="actor.avatar.url" alt="" />
</figure>
</div>
<div class="media-content">
{{ actor.name }}
</div>
</div>
</template>
<div v-else class="suggestion-list__item is-empty">
{{ $t("No profiles found") }}
</div>
</div>
</div>
</template>
@ -216,8 +183,6 @@ import { defaultExtensions } from "@tiptap/starter-kit";
import Document from "@tiptap/extension-document";
import Paragraph from "@tiptap/extension-paragraph";
import Text from "@tiptap/extension-text";
import tippy, { Instance, sticky } from "tippy.js";
// import { SEARCH_PERSONS } from "../graphql/search";
import { Actor, IActor, IPerson } from "../types/actor";
import CustomImage from "./Editor/Image";
import { UPLOAD_MEDIA } from "../graphql/upload";
@ -251,19 +216,6 @@ export default class EditorComponent extends Vue {
editor: Editor | null = null;
/**
* Editor Suggestions
*/
query!: string | null;
filteredActors: IActor[] = [];
suggestionRange!: Record<string, unknown> | null;
navigatedActorIndex = 0;
popup!: Instance[] | null;
get isDescriptionMode(): boolean {
return this.mode === "description" || this.isBasicMode;
}
@ -276,14 +228,6 @@ export default class EditorComponent extends Vue {
return this.isBasicMode;
}
get hasResults(): boolean {
return this.filteredActors.length > 0;
}
get showSuggestions(): boolean {
return (this.query || this.hasResults) as boolean;
}
get isBasicMode(): boolean {
return this.mode === "basic";
}
@ -312,11 +256,11 @@ export default class EditorComponent extends Vue {
}),
...defaultExtensions(),
],
onUpdate: ({ editor }) => {
this.$emit("input", editor.getHTML());
content: this.value,
onUpdate: () => {
this.$emit("input", this.editor?.getHTML());
},
});
this.editor.commands.setContent(this.value);
}
@Watch("value")
@ -327,8 +271,10 @@ export default class EditorComponent extends Vue {
}
}
// eslint-disable-next-line @typescript-eslint/ban-types
showLinkMenu(): Function | undefined {
/**
* Show a popup to get the link from the URL
*/
showLinkMenu(): void {
this.$buefy.dialog.prompt({
message: this.$t("Enter the link URL") as string,
inputAttrs: {
@ -340,106 +286,11 @@ export default class EditorComponent extends Vue {
this.editor.chain().focus().setLink({ href: value }).run();
},
});
return undefined;
}
upHandler(): void {
this.navigatedActorIndex =
(this.navigatedActorIndex + this.filteredActors.length - 1) %
this.filteredActors.length;
}
/**
* navigate to the next item
* if it's the last item, navigate to the first one
*/
downHandler(): void {
this.navigatedActorIndex =
(this.navigatedActorIndex + 1) % this.filteredActors.length;
}
enterHandler(): void {
const actor = this.filteredActors[this.navigatedActorIndex];
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): void {
const actorModel = new Actor(actor);
this.insertMention({
range: this.suggestionRange,
attrs: {
id: actorModel.id,
// usernameWithDomain returns with a @ prefix and tiptap adds one itself
label: actorModel.usernameWithDomain().substring(1),
},
});
if (!this.editor) return;
this.editor.commands.focus();
}
/** We use this to programatically insert an actor mention when creating a reply to comment */
replyToComment(comment: IComment): void {
if (!comment.actor) return;
// const actorModel = new Actor(comment.actor);
if (!this.editor) return;
// this.editor.commands.mention({
// id: actorModel.id,
// label: actorModel.usernameWithDomain().substring(1),
// });
this.editor.commands.focus();
}
/**
* renders a popup with suggestions
* tiptap provides a virtualNode object for using popper.js (or tippy.js) for popups
* @param node
*/
renderPopup(node: Element): void {
if (this.popup) {
return;
}
this.popup = tippy("#mobilizon", {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
getReferenceClientRect: node.getBoundingClientRect,
appendTo: () => document.body,
content: this.$refs.suggestions as HTMLElement,
trigger: "mouseenter",
interactive: true,
sticky: true, // make sure position of tippy is updated when content changes
plugins: [sticky],
showOnCreate: true,
theme: "dark",
placement: "top-start",
inertia: true,
duration: [400, 200],
}) as Instance[];
}
destroyPopup(): void {
if (this.popup) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
this.popup[0].destroy();
this.popup = null;
}
if (this.observer) {
this.observer.disconnect();
}
}
/**
* Show a file prompt, upload picture and insert it into editor
* @param command
*/
// eslint-disable-next-line @typescript-eslint/ban-types
async showImagePrompt(): Promise<void> {
const image = await listenFileUpload();
try {
@ -470,14 +321,28 @@ export default class EditorComponent extends Vue {
}
}
beforeDestroy(): void {
/**
* We use this to programatically insert an actor mention when creating a reply to comment
*/
replyToComment(comment: IComment): void {
if (!comment.actor) return;
// const actorModel = new Actor(comment.actor);
if (!this.editor) return;
this.destroyPopup();
this.editor.destroy();
// this.editor.commands.mention({
// id: actorModel.id,
// label: actorModel.usernameWithDomain().substring(1),
// });
this.editor.commands.focus();
}
beforeDestroy(): void {
this.editor?.destroy();
}
}
</script>
<style lang="scss">
@import "./Editor/style.scss";
$color-black: #000;
$color-white: #eee;
@ -550,8 +415,6 @@ $color-white: #eee;
}
}
word-wrap: break-word;
h1 {
font-size: 2em;
}
@ -564,10 +427,6 @@ $color-white: #eee;
font-size: 1.25em;
}
* {
caret-color: currentColor;
}
ul,
ol {
padding-left: 1rem;
@ -601,58 +460,27 @@ $color-white: #eee;
}
}
.menububble {
position: absolute;
.bubble-menu {
display: flex;
z-index: 20;
background: $color-black;
border-radius: 5px;
padding: 0.3rem;
margin-bottom: 0.5rem;
transform: translateX(-50%);
visibility: hidden;
opacity: 0;
transition: opacity 0.2s, visibility 0.2s;
background-color: #0d0d0d;
padding: 0.2rem;
border-radius: 0.5rem;
&.is-active {
opacity: 1;
visibility: visible;
}
&__button {
display: inline-flex;
background: transparent;
border: 0;
color: $color-white;
padding: 0.2rem 0.5rem;
margin-right: 0.2rem;
border-radius: 3px;
button {
border: none;
background: none;
color: #fff;
font-size: 0.85rem;
font-weight: 500;
padding: 0 0.2rem;
opacity: 0.6;
cursor: pointer;
&:last-child {
margin-right: 0;
}
&:hover {
background-color: rgba($color-white, 0.1);
}
&:hover,
&.is-active {
background-color: rgba($color-white, 0.2);
opacity: 1;
}
}
&__form {
display: flex;
align-items: center;
}
&__input {
font: inherit;
border: none;
background: transparent;
color: $color-white;
}
}
.suggestion-list {

View File

@ -5,15 +5,12 @@ import MentionList from "./MentionList.vue";
import ApolloClient from "apollo-client";
import { NormalizedCacheObject } from "apollo-cache-inmemory";
import apolloProvider from "@/vue-apollo";
import { IPerson } from "@/types/actor";
import pDebounce from "p-debounce";
const client = apolloProvider.defaultClient as ApolloClient<NormalizedCacheObject>;
const mentionOptions: Partial<any> = {
HTMLAttributes: {
class: "mention",
},
suggestion: {
items: async (query: string) => {
const fetchItems = async (query: string): Promise<IPerson[]> => {
const result = await client.query({
query: SEARCH_PERSONS,
variables: {
@ -22,6 +19,20 @@ const mentionOptions: Partial<any> = {
});
// TipTap doesn't handle async for onFilter, hence the following line.
return result.data.searchPersons.elements;
};
const debouncedFetchItems = pDebounce(fetchItems, 200);
const mentionOptions: Partial<any> = {
HTMLAttributes: {
class: "mention",
},
suggestion: {
items: async (query: string): Promise<IPerson[]> => {
if (query === "") {
return [];
}
return await debouncedFetchItems(query);
},
render: () => {
let component: VueRenderer;
@ -51,9 +62,10 @@ const mentionOptions: Partial<any> = {
getReferenceClientRect: props.clientRect,
});
},
// onKeyDown(props: any) {
// return component.ref?.onKeyDown(props);
// },
onKeyDown(props: any) {
const ref = component.ref as typeof MentionList;
return ref?.onKeyDown(props);
},
onExit() {
popup[0].destroy();
component.destroy();

View File

@ -7,21 +7,30 @@
:key="index"
@click="selectItem(index)"
>
{{ item }}
<actor-card :actor="item" />
</button>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import { displayName, usernameWithDomain } from "@/types/actor/actor.model";
import { IPerson } from "@/types/actor";
import ActorCard from "../../components/Account/ActorCard.vue";
@Component
@Component({
components: {
ActorCard,
},
})
export default class MentionList extends Vue {
@Prop({ type: Array, required: true }) items!: Array<any>;
@Prop({ type: Array, required: true }) items!: Array<IPerson>;
@Prop({ type: Function, required: true }) command!: any;
selectedIndex = 0;
displayName = displayName;
@Watch("items")
watchItems(): void {
this.selectedIndex = 0;
@ -63,7 +72,7 @@ export default class MentionList extends Vue {
const item = this.items[index];
if (item) {
this.command({ id: item });
this.command({ id: usernameWithDomain(item) });
}
}
}
@ -86,12 +95,12 @@ export default class MentionList extends Vue {
text-align: left;
background: transparent;
border: none;
padding: 0.2rem 0.5rem;
padding: 0.5rem 0.75rem;
&.is-selected,
&:hover {
color: #a975ff;
background: rgba(#a975ff, 0.1);
color: $background-color;
background: rgba($background-color, 0.1);
}
}
</style>

View File

@ -0,0 +1,58 @@
/**
* From https://www.tiptap.dev/api/editor/#inject-css
* https://github.com/ueberdosis/tiptap/blob/main/packages/core/src/style.ts
*/
.ProseMirror {
position: relative;
word-wrap: break-word;
white-space: pre-wrap;
-webkit-font-variant-ligatures: none;
font-variant-ligatures: none;
& [contenteditable="false"] {
white-space: normal;
}
& [contenteditable="false"] [contenteditable="true"] {
white-space: pre-wrap;
}
pre {
white-space: pre-wrap;
}
}
.ProseMirror-gapcursor {
display: none;
pointer-events: none;
position: absolute;
&:after {
content: "";
display: block;
position: absolute;
top: -2px;
width: 20px;
border-top: 1px solid black;
animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
}
}
@keyframes ProseMirror-cursor-blink {
to {
visibility: hidden;
}
}
.ProseMirror-hideselection * {
&::selection {
background: transparent;
}
&::-moz-selection {
background: transparent;
}
caret-color: transparent;
}
.ProseMirror-focused .ProseMirror-gapcursor {
display: block;
}
.tippy-box[data-animation="fade"][data-state="hidden"] {
opacity: 0;
}

View File

@ -52,9 +52,7 @@ export class Actor implements IActor {
}
public displayName(): string {
return this.name != null && this.name !== ""
? this.name
: this.usernameWithDomain();
return displayName(this);
}
}
@ -68,6 +66,12 @@ export function usernameWithDomain(actor: IActor, force = false): string {
return actor.preferredUsername;
}
export function displayName(actor: IActor): string {
return actor.name != null && actor.name !== ""
? actor.name
: usernameWithDomain(actor);
}
export function displayNameAndUsername(actor: IActor): string {
if (actor.name) {
return `${actor.name} (@${usernameWithDomain(actor)})`;

View File

@ -9445,6 +9445,11 @@ os-tmpdir@~1.0.2:
resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
p-debounce@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/p-debounce/-/p-debounce-4.0.0.tgz#348e3f44489baa9435cc7d807f17b3bb2fb16b24"
integrity sha512-4Ispi9I9qYGO4lueiLDhe4q4iK5ERK8reLsuzH6BPaXn53EGaua8H66PXIFGrW897hwjXp+pVLrm/DLxN0RF0A==
p-each-series@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-1.0.0.tgz#930f3d12dd1f50e7434457a22cd6f04ac6ad7f71"