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",
|
"leaflet.locatecontrol": "^0.73.0",
|
||||||
"lodash": "^4.17.11",
|
"lodash": "^4.17.11",
|
||||||
"ngeohash": "^0.6.3",
|
"ngeohash": "^0.6.3",
|
||||||
|
"p-debounce": "^4.0.0",
|
||||||
"phoenix": "^1.4.11",
|
"phoenix": "^1.4.11",
|
||||||
"register-service-worker": "^1.7.1",
|
"register-service-worker": "^1.7.1",
|
||||||
"tippy.js": "^6.2.3",
|
"tippy.js": "^6.2.3",
|
||||||
|
|
|
||||||
|
|
@ -6,206 +6,173 @@
|
||||||
id="tiptab-editor"
|
id="tiptab-editor"
|
||||||
:data-actor-id="currentActor && currentActor.id"
|
:data-actor-id="currentActor && currentActor.id"
|
||||||
>
|
>
|
||||||
<div v-if="isDescriptionMode" :editor="editor">
|
<div
|
||||||
<div class="menubar bar-is-hidden">
|
class="menubar bar-is-hidden"
|
||||||
<button
|
v-if="isDescriptionMode"
|
||||||
class="menubar__button"
|
:editor="editor"
|
||||||
:class="{ 'is-active': editor.isActive('bold') }"
|
>
|
||||||
@click="editor.chain().focus().toggleBold().focus().run()"
|
<button
|
||||||
type="button"
|
class="menubar__button"
|
||||||
>
|
:class="{ 'is-active': editor.isActive('bold') }"
|
||||||
<b-icon icon="format-bold" />
|
@click="editor.chain().focus().toggleBold().run()"
|
||||||
</button>
|
type="button"
|
||||||
|
>
|
||||||
|
<b-icon icon="format-bold" />
|
||||||
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="menubar__button"
|
class="menubar__button"
|
||||||
:class="{ 'is-active': editor.isActive('italic') }"
|
:class="{ 'is-active': editor.isActive('italic') }"
|
||||||
@click="editor.chain().focus().toggleItalic().focus().run()"
|
@click="editor.chain().focus().toggleItalic().run()"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<b-icon icon="format-italic" />
|
<b-icon icon="format-italic" />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="menubar__button"
|
class="menubar__button"
|
||||||
:class="{ 'is-active': editor.isActive('underline') }"
|
:class="{ 'is-active': editor.isActive('underline') }"
|
||||||
@click="editor.chain().focus().toggleUnderline().focus().run()"
|
@click="editor.chain().focus().toggleUnderline().run()"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<b-icon icon="format-underline" />
|
<b-icon icon="format-underline" />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
v-if="!isBasicMode"
|
v-if="!isBasicMode"
|
||||||
class="menubar__button"
|
class="menubar__button"
|
||||||
:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
|
:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
|
||||||
@click="
|
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
|
||||||
editor.chain().focus().toggleHeading({ level: 1 }).focus().run()
|
type="button"
|
||||||
"
|
>
|
||||||
type="button"
|
<b-icon icon="format-header-1" />
|
||||||
>
|
</button>
|
||||||
<b-icon icon="format-header-1" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
<button
|
||||||
v-if="!isBasicMode"
|
v-if="!isBasicMode"
|
||||||
class="menubar__button"
|
class="menubar__button"
|
||||||
:class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
|
:class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
|
||||||
@click="
|
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
|
||||||
editor.chain().focus().toggleHeading({ level: 2 }).focus().run()
|
type="button"
|
||||||
"
|
>
|
||||||
type="button"
|
<b-icon icon="format-header-2" />
|
||||||
>
|
</button>
|
||||||
<b-icon icon="format-header-2" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
<button
|
||||||
v-if="!isBasicMode"
|
v-if="!isBasicMode"
|
||||||
class="menubar__button"
|
class="menubar__button"
|
||||||
:class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
|
:class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
|
||||||
@click="
|
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
|
||||||
editor.chain().focus().toggleHeading({ level: 3 }).focus().run()
|
type="button"
|
||||||
"
|
>
|
||||||
type="button"
|
<b-icon icon="format-header-3" />
|
||||||
>
|
</button>
|
||||||
<b-icon icon="format-header-3" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="menubar__button"
|
class="menubar__button"
|
||||||
@click="showLinkMenu()"
|
@click="showLinkMenu()"
|
||||||
:class="{ 'is-active': editor.isActive('link') }"
|
:class="{ 'is-active': editor.isActive('link') }"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<b-icon icon="link" />
|
<b-icon icon="link" />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
v-if="editor.isActive('link')"
|
v-if="editor.isActive('link')"
|
||||||
class="menubar__button"
|
class="menubar__button"
|
||||||
@click="editor.chain().focus().unsetLink().run()"
|
@click="editor.chain().focus().unsetLink().run()"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<b-icon icon="link-off" />
|
<b-icon icon="link-off" />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="menubar__button"
|
class="menubar__button"
|
||||||
v-if="!isBasicMode"
|
v-if="!isBasicMode"
|
||||||
@click="showImagePrompt()"
|
@click="showImagePrompt()"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<b-icon icon="image" />
|
<b-icon icon="image" />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="menubar__button"
|
class="menubar__button"
|
||||||
v-if="!isBasicMode"
|
v-if="!isBasicMode"
|
||||||
:class="{ 'is-active': editor.isActive('bulletList') }"
|
:class="{ 'is-active': editor.isActive('bulletList') }"
|
||||||
@click="editor.chain().focus().toggleBulletList().focus().run()"
|
@click="editor.chain().focus().toggleBulletList().run()"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<b-icon icon="format-list-bulleted" />
|
<b-icon icon="format-list-bulleted" />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
v-if="!isBasicMode"
|
v-if="!isBasicMode"
|
||||||
class="menubar__button"
|
class="menubar__button"
|
||||||
:class="{ 'is-active': editor.isActive('orderedList') }"
|
:class="{ 'is-active': editor.isActive('orderedList') }"
|
||||||
@click="editor.chain().focus().toggleOrderedList().focus().run()"
|
@click="editor.chain().focus().toggleOrderedList().run()"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<b-icon icon="format-list-numbered" />
|
<b-icon icon="format-list-numbered" />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
v-if="!isBasicMode"
|
v-if="!isBasicMode"
|
||||||
class="menubar__button"
|
class="menubar__button"
|
||||||
:class="{ 'is-active': editor.isActive('blockquote') }"
|
:class="{ 'is-active': editor.isActive('blockquote') }"
|
||||||
@click="editor.chain().focus().toggleBlockquote().run()"
|
@click="editor.chain().focus().toggleBlockquote().run()"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<b-icon icon="format-quote-close" />
|
<b-icon icon="format-quote-close" />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
v-if="!isBasicMode"
|
v-if="!isBasicMode"
|
||||||
class="menubar__button"
|
class="menubar__button"
|
||||||
@click="editor.chain().focus().undo().run()"
|
@click="editor.chain().focus().undo().run()"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<b-icon icon="undo" />
|
<b-icon icon="undo" />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
v-if="!isBasicMode"
|
v-if="!isBasicMode"
|
||||||
class="menubar__button"
|
class="menubar__button"
|
||||||
@click="editor.chain().focus().redo().run()"
|
@click="editor.chain().focus().redo().run()"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<b-icon icon="redo" />
|
<b-icon icon="redo" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<bubble-menu
|
<bubble-menu
|
||||||
v-if="editor && isCommentMode"
|
v-if="editor && isCommentMode"
|
||||||
|
class="bubble-menu"
|
||||||
:editor="editor"
|
:editor="editor"
|
||||||
:keep-in-bounds="true"
|
:tippy-options="{ duration: 100 }"
|
||||||
v-slot="{ menu }"
|
|
||||||
>
|
>
|
||||||
<div
|
<button
|
||||||
class="menububble"
|
class="menububble__button"
|
||||||
:class="{ 'is-active': menu.isActive }"
|
:class="{ 'is-active': editor.isActive('bold') }"
|
||||||
:style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
|
@click="editor.chain().focus().toggleBold().run()"
|
||||||
|
type="button"
|
||||||
>
|
>
|
||||||
<button
|
<b-icon icon="format-bold" />
|
||||||
class="menububble__button"
|
<span class="visually-hidden">{{ $t("Bold") }}</span>
|
||||||
:class="{ 'is-active': editor.isActive('bold') }"
|
</button>
|
||||||
@click="editor.chain().focus().toggleBold().focus().run()"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<b-icon icon="format-bold" />
|
|
||||||
<span class="visually-hidden">{{ $t("Bold") }}</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="menububble__button"
|
class="menububble__button"
|
||||||
:class="{ 'is-active': editor.isActive('italic') }"
|
:class="{ 'is-active': editor.isActive('italic') }"
|
||||||
@click="editor.chain().focus().toggleItalic().focus().run()"
|
@click="editor.chain().focus().toggleItalic().run()"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<b-icon icon="format-italic" />
|
<b-icon icon="format-italic" />
|
||||||
<span class="visually-hidden">{{ $t("Italic") }}</span>
|
<span class="visually-hidden">{{ $t("Italic") }}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
|
||||||
</bubble-menu>
|
</bubble-menu>
|
||||||
|
|
||||||
<editor-content class="editor__content" :editor="editor" />
|
<editor-content class="editor__content" :editor="editor" />
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -216,8 +183,6 @@ import { defaultExtensions } from "@tiptap/starter-kit";
|
||||||
import Document from "@tiptap/extension-document";
|
import Document from "@tiptap/extension-document";
|
||||||
import Paragraph from "@tiptap/extension-paragraph";
|
import Paragraph from "@tiptap/extension-paragraph";
|
||||||
import Text from "@tiptap/extension-text";
|
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 { Actor, IActor, IPerson } from "../types/actor";
|
||||||
import CustomImage from "./Editor/Image";
|
import CustomImage from "./Editor/Image";
|
||||||
import { UPLOAD_MEDIA } from "../graphql/upload";
|
import { UPLOAD_MEDIA } from "../graphql/upload";
|
||||||
|
|
@ -251,19 +216,6 @@ export default class EditorComponent extends Vue {
|
||||||
|
|
||||||
editor: Editor | null = null;
|
editor: Editor | null = null;
|
||||||
|
|
||||||
/**
|
|
||||||
* Editor Suggestions
|
|
||||||
*/
|
|
||||||
query!: string | null;
|
|
||||||
|
|
||||||
filteredActors: IActor[] = [];
|
|
||||||
|
|
||||||
suggestionRange!: Record<string, unknown> | null;
|
|
||||||
|
|
||||||
navigatedActorIndex = 0;
|
|
||||||
|
|
||||||
popup!: Instance[] | null;
|
|
||||||
|
|
||||||
get isDescriptionMode(): boolean {
|
get isDescriptionMode(): boolean {
|
||||||
return this.mode === "description" || this.isBasicMode;
|
return this.mode === "description" || this.isBasicMode;
|
||||||
}
|
}
|
||||||
|
|
@ -276,14 +228,6 @@ export default class EditorComponent extends Vue {
|
||||||
return this.isBasicMode;
|
return this.isBasicMode;
|
||||||
}
|
}
|
||||||
|
|
||||||
get hasResults(): boolean {
|
|
||||||
return this.filteredActors.length > 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
get showSuggestions(): boolean {
|
|
||||||
return (this.query || this.hasResults) as boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
get isBasicMode(): boolean {
|
get isBasicMode(): boolean {
|
||||||
return this.mode === "basic";
|
return this.mode === "basic";
|
||||||
}
|
}
|
||||||
|
|
@ -312,11 +256,11 @@ export default class EditorComponent extends Vue {
|
||||||
}),
|
}),
|
||||||
...defaultExtensions(),
|
...defaultExtensions(),
|
||||||
],
|
],
|
||||||
onUpdate: ({ editor }) => {
|
content: this.value,
|
||||||
this.$emit("input", editor.getHTML());
|
onUpdate: () => {
|
||||||
|
this.$emit("input", this.editor?.getHTML());
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
this.editor.commands.setContent(this.value);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Watch("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({
|
this.$buefy.dialog.prompt({
|
||||||
message: this.$t("Enter the link URL") as string,
|
message: this.$t("Enter the link URL") as string,
|
||||||
inputAttrs: {
|
inputAttrs: {
|
||||||
|
|
@ -340,106 +286,11 @@ export default class EditorComponent extends Vue {
|
||||||
this.editor.chain().focus().setLink({ href: value }).run();
|
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
|
* 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> {
|
async showImagePrompt(): Promise<void> {
|
||||||
const image = await listenFileUpload();
|
const image = await listenFileUpload();
|
||||||
try {
|
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;
|
if (!this.editor) return;
|
||||||
this.destroyPopup();
|
// this.editor.commands.mention({
|
||||||
this.editor.destroy();
|
// id: actorModel.id,
|
||||||
|
// label: actorModel.usernameWithDomain().substring(1),
|
||||||
|
// });
|
||||||
|
this.editor.commands.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
beforeDestroy(): void {
|
||||||
|
this.editor?.destroy();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "./Editor/style.scss";
|
||||||
|
|
||||||
$color-black: #000;
|
$color-black: #000;
|
||||||
$color-white: #eee;
|
$color-white: #eee;
|
||||||
|
|
||||||
|
|
@ -550,8 +415,6 @@ $color-white: #eee;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
word-wrap: break-word;
|
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
}
|
}
|
||||||
|
|
@ -564,10 +427,6 @@ $color-white: #eee;
|
||||||
font-size: 1.25em;
|
font-size: 1.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
|
||||||
caret-color: currentColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul,
|
ul,
|
||||||
ol {
|
ol {
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
|
|
@ -601,58 +460,27 @@ $color-white: #eee;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.menububble {
|
.bubble-menu {
|
||||||
position: absolute;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 20;
|
background-color: #0d0d0d;
|
||||||
background: $color-black;
|
padding: 0.2rem;
|
||||||
border-radius: 5px;
|
border-radius: 0.5rem;
|
||||||
padding: 0.3rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
visibility: hidden;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.2s, visibility 0.2s;
|
|
||||||
|
|
||||||
&.is-active {
|
button {
|
||||||
opacity: 1;
|
border: none;
|
||||||
visibility: visible;
|
background: none;
|
||||||
}
|
color: #fff;
|
||||||
|
font-size: 0.85rem;
|
||||||
&__button {
|
font-weight: 500;
|
||||||
display: inline-flex;
|
padding: 0 0.2rem;
|
||||||
background: transparent;
|
opacity: 0.6;
|
||||||
border: 0;
|
|
||||||
color: $color-white;
|
|
||||||
padding: 0.2rem 0.5rem;
|
|
||||||
margin-right: 0.2rem;
|
|
||||||
border-radius: 3px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:last-child {
|
&:hover,
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: rgba($color-white, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-active {
|
&.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 {
|
.suggestion-list {
|
||||||
|
|
|
||||||
|
|
@ -5,23 +5,34 @@ import MentionList from "./MentionList.vue";
|
||||||
import ApolloClient from "apollo-client";
|
import ApolloClient from "apollo-client";
|
||||||
import { NormalizedCacheObject } from "apollo-cache-inmemory";
|
import { NormalizedCacheObject } from "apollo-cache-inmemory";
|
||||||
import apolloProvider from "@/vue-apollo";
|
import apolloProvider from "@/vue-apollo";
|
||||||
|
import { IPerson } from "@/types/actor";
|
||||||
|
import pDebounce from "p-debounce";
|
||||||
|
|
||||||
const client = apolloProvider.defaultClient as ApolloClient<NormalizedCacheObject>;
|
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> = {
|
const mentionOptions: Partial<any> = {
|
||||||
HTMLAttributes: {
|
HTMLAttributes: {
|
||||||
class: "mention",
|
class: "mention",
|
||||||
},
|
},
|
||||||
suggestion: {
|
suggestion: {
|
||||||
items: async (query: string) => {
|
items: async (query: string): Promise<IPerson[]> => {
|
||||||
const result = await client.query({
|
if (query === "") {
|
||||||
query: SEARCH_PERSONS,
|
return [];
|
||||||
variables: {
|
}
|
||||||
searchText: query,
|
return await debouncedFetchItems(query);
|
||||||
},
|
|
||||||
});
|
|
||||||
// TipTap doesn't handle async for onFilter, hence the following line.
|
|
||||||
return result.data.searchPersons.elements;
|
|
||||||
},
|
},
|
||||||
render: () => {
|
render: () => {
|
||||||
let component: VueRenderer;
|
let component: VueRenderer;
|
||||||
|
|
@ -51,9 +62,10 @@ const mentionOptions: Partial<any> = {
|
||||||
getReferenceClientRect: props.clientRect,
|
getReferenceClientRect: props.clientRect,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// onKeyDown(props: any) {
|
onKeyDown(props: any) {
|
||||||
// return component.ref?.onKeyDown(props);
|
const ref = component.ref as typeof MentionList;
|
||||||
// },
|
return ref?.onKeyDown(props);
|
||||||
|
},
|
||||||
onExit() {
|
onExit() {
|
||||||
popup[0].destroy();
|
popup[0].destroy();
|
||||||
component.destroy();
|
component.destroy();
|
||||||
|
|
|
||||||
|
|
@ -7,21 +7,30 @@
|
||||||
:key="index"
|
:key="index"
|
||||||
@click="selectItem(index)"
|
@click="selectItem(index)"
|
||||||
>
|
>
|
||||||
{{ item }}
|
<actor-card :actor="item" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
|
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 {
|
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;
|
@Prop({ type: Function, required: true }) command!: any;
|
||||||
|
|
||||||
selectedIndex = 0;
|
selectedIndex = 0;
|
||||||
|
|
||||||
|
displayName = displayName;
|
||||||
|
|
||||||
@Watch("items")
|
@Watch("items")
|
||||||
watchItems(): void {
|
watchItems(): void {
|
||||||
this.selectedIndex = 0;
|
this.selectedIndex = 0;
|
||||||
|
|
@ -63,7 +72,7 @@ export default class MentionList extends Vue {
|
||||||
const item = this.items[index];
|
const item = this.items[index];
|
||||||
|
|
||||||
if (item) {
|
if (item) {
|
||||||
this.command({ id: item });
|
this.command({ id: usernameWithDomain(item) });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -86,12 +95,12 @@ export default class MentionList extends Vue {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 0.2rem 0.5rem;
|
padding: 0.5rem 0.75rem;
|
||||||
|
|
||||||
&.is-selected,
|
&.is-selected,
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #a975ff;
|
color: $background-color;
|
||||||
background: rgba(#a975ff, 0.1);
|
background: rgba($background-color, 0.1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</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 {
|
public displayName(): string {
|
||||||
return this.name != null && this.name !== ""
|
return displayName(this);
|
||||||
? this.name
|
|
||||||
: this.usernameWithDomain();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -68,6 +66,12 @@ export function usernameWithDomain(actor: IActor, force = false): string {
|
||||||
return actor.preferredUsername;
|
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 {
|
export function displayNameAndUsername(actor: IActor): string {
|
||||||
if (actor.name) {
|
if (actor.name) {
|
||||||
return `${actor.name} (@${usernameWithDomain(actor)})`;
|
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"
|
resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
|
||||||
integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
|
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:
|
p-each-series@^1.0.0:
|
||||||
version "1.0.0"
|
version "1.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-1.0.0.tgz#930f3d12dd1f50e7434457a22cd6f04ac6ad7f71"
|
resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-1.0.0.tgz#930f3d12dd1f50e7434457a22cd6f04ac6ad7f71"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue