Fix mentions
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
parent
e3753c041e
commit
3afc7c7feb
@ -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",
|
||||
|
||||
@ -6,206 +6,173 @@
|
||||
id="tiptab-editor"
|
||||
:data-actor-id="currentActor && currentActor.id"
|
||||
>
|
||||
<div v-if="isDescriptionMode" :editor="editor">
|
||||
<div class="menubar bar-is-hidden">
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': editor.isActive('bold') }"
|
||||
@click="editor.chain().focus().toggleBold().focus().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-bold" />
|
||||
</button>
|
||||
<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().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-bold" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': editor.isActive('italic') }"
|
||||
@click="editor.chain().focus().toggleItalic().focus().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-italic" />
|
||||
</button>
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': editor.isActive('italic') }"
|
||||
@click="editor.chain().focus().toggleItalic().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-italic" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': editor.isActive('underline') }"
|
||||
@click="editor.chain().focus().toggleUnderline().focus().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-underline" />
|
||||
</button>
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': editor.isActive('underline') }"
|
||||
@click="editor.chain().focus().toggleUnderline().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-underline" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="!isBasicMode"
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
|
||||
@click="
|
||||
editor.chain().focus().toggleHeading({ level: 1 }).focus().run()
|
||||
"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-header-1" />
|
||||
</button>
|
||||
<button
|
||||
v-if="!isBasicMode"
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-header-1" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="!isBasicMode"
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
|
||||
@click="
|
||||
editor.chain().focus().toggleHeading({ level: 2 }).focus().run()
|
||||
"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-header-2" />
|
||||
</button>
|
||||
<button
|
||||
v-if="!isBasicMode"
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-header-2" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="!isBasicMode"
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
|
||||
@click="
|
||||
editor.chain().focus().toggleHeading({ level: 3 }).focus().run()
|
||||
"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-header-3" />
|
||||
</button>
|
||||
<button
|
||||
v-if="!isBasicMode"
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-header-3" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
@click="showLinkMenu()"
|
||||
:class="{ 'is-active': editor.isActive('link') }"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="link" />
|
||||
</button>
|
||||
<button
|
||||
class="menubar__button"
|
||||
@click="showLinkMenu()"
|
||||
:class="{ 'is-active': editor.isActive('link') }"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="link" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="editor.isActive('link')"
|
||||
class="menubar__button"
|
||||
@click="editor.chain().focus().unsetLink().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="link-off" />
|
||||
</button>
|
||||
<button
|
||||
v-if="editor.isActive('link')"
|
||||
class="menubar__button"
|
||||
@click="editor.chain().focus().unsetLink().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="link-off" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
v-if="!isBasicMode"
|
||||
@click="showImagePrompt()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="image" />
|
||||
</button>
|
||||
<button
|
||||
class="menubar__button"
|
||||
v-if="!isBasicMode"
|
||||
@click="showImagePrompt()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="image" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
v-if="!isBasicMode"
|
||||
:class="{ 'is-active': editor.isActive('bulletList') }"
|
||||
@click="editor.chain().focus().toggleBulletList().focus().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-list-bulleted" />
|
||||
</button>
|
||||
<button
|
||||
class="menubar__button"
|
||||
v-if="!isBasicMode"
|
||||
:class="{ 'is-active': editor.isActive('bulletList') }"
|
||||
@click="editor.chain().focus().toggleBulletList().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-list-bulleted" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="!isBasicMode"
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': editor.isActive('orderedList') }"
|
||||
@click="editor.chain().focus().toggleOrderedList().focus().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-list-numbered" />
|
||||
</button>
|
||||
<button
|
||||
v-if="!isBasicMode"
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': editor.isActive('orderedList') }"
|
||||
@click="editor.chain().focus().toggleOrderedList().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-list-numbered" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="!isBasicMode"
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': editor.isActive('blockquote') }"
|
||||
@click="editor.chain().focus().toggleBlockquote().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-quote-close" />
|
||||
</button>
|
||||
<button
|
||||
v-if="!isBasicMode"
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': editor.isActive('blockquote') }"
|
||||
@click="editor.chain().focus().toggleBlockquote().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-quote-close" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="!isBasicMode"
|
||||
class="menubar__button"
|
||||
@click="editor.chain().focus().undo().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="undo" />
|
||||
</button>
|
||||
<button
|
||||
v-if="!isBasicMode"
|
||||
class="menubar__button"
|
||||
@click="editor.chain().focus().undo().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="undo" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="!isBasicMode"
|
||||
class="menubar__button"
|
||||
@click="editor.chain().focus().redo().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="redo" />
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
v-if="!isBasicMode"
|
||||
class="menubar__button"
|
||||
@click="editor.chain().focus().redo().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="redo" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<bubble-menu
|
||||
v-if="editor && isCommentMode"
|
||||
class="bubble-menu"
|
||||
:editor="editor"
|
||||
:keep-in-bounds="true"
|
||||
v-slot="{ menu }"
|
||||
:tippy-options="{ duration: 100 }"
|
||||
>
|
||||
<div
|
||||
class="menububble"
|
||||
:class="{ 'is-active': menu.isActive }"
|
||||
:style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
|
||||
<button
|
||||
class="menububble__button"
|
||||
:class="{ 'is-active': editor.isActive('bold') }"
|
||||
@click="editor.chain().focus().toggleBold().run()"
|
||||
type="button"
|
||||
>
|
||||
<button
|
||||
class="menububble__button"
|
||||
:class="{ 'is-active': editor.isActive('bold') }"
|
||||
@click="editor.chain().focus().toggleBold().focus().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-bold" />
|
||||
<span class="visually-hidden">{{ $t("Bold") }}</span>
|
||||
</button>
|
||||
<b-icon icon="format-bold" />
|
||||
<span class="visually-hidden">{{ $t("Bold") }}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="menububble__button"
|
||||
:class="{ 'is-active': editor.isActive('italic') }"
|
||||
@click="editor.chain().focus().toggleItalic().focus().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-italic" />
|
||||
<span class="visually-hidden">{{ $t("Italic") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="menububble__button"
|
||||
:class="{ 'is-active': editor.isActive('italic') }"
|
||||
@click="editor.chain().focus().toggleItalic().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-italic" />
|
||||
<span class="visually-hidden">{{ $t("Italic") }}</span>
|
||||
</button>
|
||||
</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 {
|
||||
|
||||
@ -5,23 +5,34 @@ 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 fetchItems = async (query: string): Promise<IPerson[]> => {
|
||||
const result = await client.query({
|
||||
query: SEARCH_PERSONS,
|
||||
variables: {
|
||||
searchText: query,
|
||||
},
|
||||
});
|
||||
// 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) => {
|
||||
const result = await client.query({
|
||||
query: SEARCH_PERSONS,
|
||||
variables: {
|
||||
searchText: query,
|
||||
},
|
||||
});
|
||||
// TipTap doesn't handle async for onFilter, hence the following line.
|
||||
return result.data.searchPersons.elements;
|
||||
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();
|
||||
|
||||
@ -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>
|
||||
|
||||
58
js/src/components/Editor/style.scss
Normal file
58
js/src/components/Editor/style.scss
Normal 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;
|
||||
}
|
||||
@ -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)})`;
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user