Upgrade tiptap to version 2
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
@@ -6,16 +6,12 @@
|
||||
id="tiptab-editor"
|
||||
:data-actor-id="currentActor && currentActor.id"
|
||||
>
|
||||
<editor-menu-bar
|
||||
v-if="isDescriptionMode"
|
||||
:editor="editor"
|
||||
v-slot="{ commands, isActive, focused }"
|
||||
>
|
||||
<div class="menubar bar-is-hidden" :class="{ 'is-focused': focused }">
|
||||
<div v-if="isDescriptionMode" :editor="editor">
|
||||
<div class="menubar bar-is-hidden">
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': isActive.bold() }"
|
||||
@click="commands.bold"
|
||||
:class="{ 'is-active': editor.isActive('bold') }"
|
||||
@click="editor.chain().focus().toggleBold().focus().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-bold" />
|
||||
@@ -23,8 +19,8 @@
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': isActive.italic() }"
|
||||
@click="commands.italic"
|
||||
:class="{ 'is-active': editor.isActive('italic') }"
|
||||
@click="editor.chain().focus().toggleItalic().focus().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-italic" />
|
||||
@@ -32,8 +28,8 @@
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': isActive.underline() }"
|
||||
@click="commands.underline"
|
||||
:class="{ 'is-active': editor.isActive('underline') }"
|
||||
@click="editor.chain().focus().toggleUnderline().focus().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-underline" />
|
||||
@@ -42,8 +38,10 @@
|
||||
<button
|
||||
v-if="!isBasicMode"
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': isActive.heading({ level: 1 }) }"
|
||||
@click="commands.heading({ level: 1 })"
|
||||
: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" />
|
||||
@@ -52,8 +50,10 @@
|
||||
<button
|
||||
v-if="!isBasicMode"
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': isActive.heading({ level: 2 }) }"
|
||||
@click="commands.heading({ level: 2 })"
|
||||
: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" />
|
||||
@@ -62,8 +62,10 @@
|
||||
<button
|
||||
v-if="!isBasicMode"
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': isActive.heading({ level: 3 }) }"
|
||||
@click="commands.heading({ level: 3 })"
|
||||
: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" />
|
||||
@@ -71,17 +73,26 @@
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
@click="showLinkMenu(commands.link, isActive.link())"
|
||||
:class="{ 'is-active': isActive.link() }"
|
||||
@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
|
||||
class="menubar__button"
|
||||
v-if="!isBasicMode"
|
||||
@click="showImagePrompt(commands.image)"
|
||||
@click="showImagePrompt()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="image" />
|
||||
@@ -90,8 +101,8 @@
|
||||
<button
|
||||
class="menubar__button"
|
||||
v-if="!isBasicMode"
|
||||
:class="{ 'is-active': isActive.bullet_list() }"
|
||||
@click="commands.bullet_list"
|
||||
:class="{ 'is-active': editor.isActive('bulletList') }"
|
||||
@click="editor.chain().focus().toggleBulletList().focus().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-list-bulleted" />
|
||||
@@ -100,8 +111,8 @@
|
||||
<button
|
||||
v-if="!isBasicMode"
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': isActive.ordered_list() }"
|
||||
@click="commands.ordered_list"
|
||||
:class="{ 'is-active': editor.isActive('orderedList') }"
|
||||
@click="editor.chain().focus().toggleOrderedList().focus().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-list-numbered" />
|
||||
@@ -110,8 +121,8 @@
|
||||
<button
|
||||
v-if="!isBasicMode"
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': isActive.blockquote() }"
|
||||
@click="commands.blockquote"
|
||||
:class="{ 'is-active': editor.isActive('blockquote') }"
|
||||
@click="editor.chain().focus().toggleBlockquote().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-quote-close" />
|
||||
@@ -120,7 +131,7 @@
|
||||
<button
|
||||
v-if="!isBasicMode"
|
||||
class="menubar__button"
|
||||
@click="commands.undo"
|
||||
@click="editor.chain().focus().undo().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="undo" />
|
||||
@@ -129,19 +140,19 @@
|
||||
<button
|
||||
v-if="!isBasicMode"
|
||||
class="menubar__button"
|
||||
@click="commands.redo"
|
||||
@click="editor.chain().focus().redo().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="redo" />
|
||||
</button>
|
||||
</div>
|
||||
</editor-menu-bar>
|
||||
</div>
|
||||
|
||||
<editor-menu-bubble
|
||||
v-if="isCommentMode"
|
||||
<bubble-menu
|
||||
v-if="editor && isCommentMode"
|
||||
:editor="editor"
|
||||
:keep-in-bounds="true"
|
||||
v-slot="{ commands, isActive, menu }"
|
||||
v-slot="{ menu }"
|
||||
>
|
||||
<div
|
||||
class="menububble"
|
||||
@@ -150,8 +161,8 @@
|
||||
>
|
||||
<button
|
||||
class="menububble__button"
|
||||
:class="{ 'is-active': isActive.bold() }"
|
||||
@click="commands.bold"
|
||||
:class="{ 'is-active': editor.isActive('bold') }"
|
||||
@click="editor.chain().focus().toggleBold().focus().run()"
|
||||
type="button"
|
||||
>
|
||||
<b-icon icon="format-bold" />
|
||||
@@ -160,15 +171,15 @@
|
||||
|
||||
<button
|
||||
class="menububble__button"
|
||||
:class="{ 'is-active': isActive.italic() }"
|
||||
@click="commands.italic"
|
||||
: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>
|
||||
</editor-menu-bubble>
|
||||
</bubble-menu>
|
||||
|
||||
<editor-content class="editor__content" :editor="editor" />
|
||||
</div>
|
||||
@@ -200,37 +211,29 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
|
||||
import { Editor, EditorContent, EditorMenuBar, EditorMenuBubble } from "tiptap";
|
||||
import {
|
||||
Blockquote,
|
||||
HardBreak,
|
||||
Heading,
|
||||
OrderedList,
|
||||
BulletList,
|
||||
ListItem,
|
||||
TodoItem,
|
||||
TodoList,
|
||||
Bold,
|
||||
Code,
|
||||
Italic,
|
||||
Link,
|
||||
Underline,
|
||||
History,
|
||||
Placeholder,
|
||||
Mention,
|
||||
} from "tiptap-extensions";
|
||||
import { Editor, EditorContent, BubbleMenu } from "@tiptap/vue-2";
|
||||
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 { SEARCH_PERSONS } from "../graphql/search";
|
||||
import { Actor, IActor, IPerson } from "../types/actor";
|
||||
import Image from "./Editor/Image";
|
||||
import MaxSize from "./Editor/MaxSize";
|
||||
import CustomImage from "./Editor/Image";
|
||||
import { UPLOAD_MEDIA } from "../graphql/upload";
|
||||
import { listenFileUpload } from "../utils/upload";
|
||||
import { CURRENT_ACTOR_CLIENT } from "../graphql/actor";
|
||||
import { IComment } from "../types/comment.model";
|
||||
import Mention from "@tiptap/extension-mention";
|
||||
import MentionOptions from "./Editor/Mention";
|
||||
import OrderedList from "@tiptap/extension-ordered-list";
|
||||
import ListItem from "@tiptap/extension-list-item";
|
||||
import Underline from "@tiptap/extension-underline";
|
||||
import Link from "@tiptap/extension-link";
|
||||
import CharacterCount from "@tiptap/extension-character-count";
|
||||
|
||||
@Component({
|
||||
components: { EditorContent, EditorMenuBar, EditorMenuBubble },
|
||||
components: { EditorContent, BubbleMenu },
|
||||
apollo: {
|
||||
currentActor: {
|
||||
query: CURRENT_ACTOR_CLIENT,
|
||||
@@ -295,138 +298,37 @@ export default class EditorComponent extends Vue {
|
||||
mounted(): void {
|
||||
this.editor = new Editor({
|
||||
extensions: [
|
||||
new Blockquote(),
|
||||
new BulletList(),
|
||||
new HardBreak(),
|
||||
new Heading({ levels: [1, 2, 3] }),
|
||||
new Mention({
|
||||
items: () => [],
|
||||
onEnter: ({
|
||||
items,
|
||||
query,
|
||||
range,
|
||||
command,
|
||||
virtualNode,
|
||||
}: {
|
||||
items: any;
|
||||
query: any;
|
||||
range: any;
|
||||
command: any;
|
||||
virtualNode: any;
|
||||
}) => {
|
||||
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,
|
||||
}: {
|
||||
items: any;
|
||||
query: any;
|
||||
range: any;
|
||||
virtualNode: any;
|
||||
}) => {
|
||||
this.query = query;
|
||||
this.filteredActors = items;
|
||||
this.suggestionRange = range;
|
||||
this.navigatedActorIndex = 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.navigatedActorIndex = 0;
|
||||
this.destroyPopup();
|
||||
},
|
||||
|
||||
/**
|
||||
* is called on every keyDown event while a suggestion is active
|
||||
*/
|
||||
onKeyDown: ({ event }: { event: KeyboardEvent }) => {
|
||||
if (event.key === "ArrowUp") {
|
||||
this.upHandler();
|
||||
return true;
|
||||
}
|
||||
if (event.key === "ArrowDown") {
|
||||
this.downHandler();
|
||||
return true;
|
||||
}
|
||||
if (event.key === "Enter") {
|
||||
this.enterHandler();
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
onFilter: async (items: any, query: string) => {
|
||||
if (!query) {
|
||||
return items;
|
||||
}
|
||||
const result = await this.$apollo.query({
|
||||
query: SEARCH_PERSONS,
|
||||
variables: {
|
||||
searchText: query,
|
||||
},
|
||||
});
|
||||
// TipTap doesn't handle async for onFilter, hence the following line.
|
||||
this.filteredActors = result.data.searchPersons.elements;
|
||||
return this.filteredActors;
|
||||
},
|
||||
Document,
|
||||
Paragraph,
|
||||
Text,
|
||||
OrderedList,
|
||||
ListItem,
|
||||
Mention.configure(MentionOptions),
|
||||
CustomImage,
|
||||
Underline,
|
||||
Link,
|
||||
CharacterCount.configure({
|
||||
limit: this.maxSize,
|
||||
}),
|
||||
new ListItem(),
|
||||
new OrderedList(),
|
||||
new TodoItem(),
|
||||
new TodoList(),
|
||||
new Link(),
|
||||
new Bold(),
|
||||
new Code(),
|
||||
new Italic(),
|
||||
new Underline(),
|
||||
new History(),
|
||||
new Placeholder({
|
||||
emptyEditorClass: "is-empty",
|
||||
emptyNodeText: this.$t("Write something…") as string,
|
||||
showOnlyWhenEditable: false,
|
||||
}),
|
||||
new Image(),
|
||||
new MaxSize({ maxSize: this.maxSize }),
|
||||
...defaultExtensions(),
|
||||
],
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
onUpdate: ({ getHTML }: { getHTML: Function }) => {
|
||||
this.$emit("input", getHTML());
|
||||
onUpdate: ({ editor }) => {
|
||||
this.$emit("input", editor.getHTML());
|
||||
},
|
||||
});
|
||||
this.editor.setContent(this.value);
|
||||
this.editor.commands.setContent(this.value);
|
||||
}
|
||||
|
||||
@Watch("value")
|
||||
onValueChanged(val: string): void {
|
||||
if (!this.editor) return;
|
||||
if (val !== this.editor.getHTML()) {
|
||||
this.editor.setContent(val, false);
|
||||
this.editor.commands.setContent(val, false);
|
||||
}
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
showLinkMenu(command: Function, active: boolean): Function | undefined {
|
||||
if (!this.editor) return undefined;
|
||||
if (active) return command({ href: null });
|
||||
showLinkMenu(): Function | undefined {
|
||||
this.$buefy.dialog.prompt({
|
||||
message: this.$t("Enter the link URL") as string,
|
||||
inputAttrs: {
|
||||
@@ -434,9 +336,8 @@ export default class EditorComponent extends Vue {
|
||||
},
|
||||
trapFocus: true,
|
||||
onConfirm: (value) => {
|
||||
command({ href: value });
|
||||
if (!this.editor) return;
|
||||
this.editor.focus();
|
||||
if (!this.editor) return undefined;
|
||||
this.editor.chain().focus().setLink({ href: value }).run();
|
||||
},
|
||||
});
|
||||
return undefined;
|
||||
@@ -480,19 +381,19 @@ export default class EditorComponent extends Vue {
|
||||
},
|
||||
});
|
||||
if (!this.editor) return;
|
||||
this.editor.focus();
|
||||
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);
|
||||
// const actorModel = new Actor(comment.actor);
|
||||
if (!this.editor) return;
|
||||
this.editor.commands.mention({
|
||||
id: actorModel.id,
|
||||
label: actorModel.usernameWithDomain().substring(1),
|
||||
});
|
||||
this.editor.focus();
|
||||
// this.editor.commands.mention({
|
||||
// id: actorModel.id,
|
||||
// label: actorModel.usernameWithDomain().substring(1),
|
||||
// });
|
||||
this.editor.commands.focus();
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -539,7 +440,7 @@ export default class EditorComponent extends Vue {
|
||||
* @param command
|
||||
*/
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
async showImagePrompt(command: Function): Promise<void> {
|
||||
async showImagePrompt(): Promise<void> {
|
||||
const image = await listenFileUpload();
|
||||
try {
|
||||
const { data } = await this.$apollo.mutate({
|
||||
@@ -549,11 +450,17 @@ export default class EditorComponent extends Vue {
|
||||
name: image.name,
|
||||
},
|
||||
});
|
||||
if (data.uploadMedia && data.uploadMedia.url) {
|
||||
command({
|
||||
src: data.uploadMedia.url,
|
||||
"data-media-id": data.uploadMedia.id,
|
||||
});
|
||||
if (data.uploadMedia && data.uploadMedia.url && this.editor) {
|
||||
this.editor
|
||||
.chain()
|
||||
.focus()
|
||||
.setImage({
|
||||
src: data.uploadMedia.url,
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
"data-media-id": data.uploadMedia.id,
|
||||
})
|
||||
.run();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
|
||||
@@ -1,70 +1,32 @@
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-nocheck
|
||||
import { Node } from "tiptap";
|
||||
import { UPLOAD_MEDIA } from "@/graphql/upload";
|
||||
import apolloProvider from "@/vue-apollo";
|
||||
import ApolloClient from "apollo-client";
|
||||
import { NormalizedCacheObject } from "apollo-cache-inmemory";
|
||||
import { NodeType, NodeSpec } from "prosemirror-model";
|
||||
import { EditorState, Plugin, TextSelection } from "prosemirror-state";
|
||||
import { DispatchFn } from "tiptap-commands";
|
||||
import { Plugin } from "prosemirror-state";
|
||||
import { EditorView } from "prosemirror-view";
|
||||
import Image from "@tiptap/extension-image";
|
||||
|
||||
/* eslint-disable class-methods-use-this */
|
||||
|
||||
export default class Image extends Node {
|
||||
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
|
||||
get name() {
|
||||
return "image";
|
||||
}
|
||||
|
||||
get schema(): NodeSpec {
|
||||
const CustomImage = Image.extend({
|
||||
name: "image",
|
||||
addAttributes() {
|
||||
return {
|
||||
inline: true,
|
||||
attrs: {
|
||||
src: {},
|
||||
alt: {
|
||||
default: null,
|
||||
},
|
||||
title: {
|
||||
default: null,
|
||||
},
|
||||
"data-media-id": {},
|
||||
src: {
|
||||
default: null,
|
||||
},
|
||||
alt: {
|
||||
default: null,
|
||||
},
|
||||
title: {
|
||||
default: null,
|
||||
},
|
||||
"data-media-id": {
|
||||
default: null,
|
||||
},
|
||||
group: "inline",
|
||||
draggable: true,
|
||||
parseDOM: [
|
||||
{
|
||||
tag: "img",
|
||||
getAttrs: (dom: any) => ({
|
||||
src: dom.getAttribute("src"),
|
||||
title: dom.getAttribute("title"),
|
||||
alt: dom.getAttribute("alt"),
|
||||
"data-media-id": dom.getAttribute("data-media-id"),
|
||||
}),
|
||||
},
|
||||
],
|
||||
toDOM: (node: any) => ["img", node.attrs],
|
||||
};
|
||||
}
|
||||
|
||||
commands({ type }: { type: NodeType }): any {
|
||||
return (attrs: { [key: string]: string }) => (
|
||||
state: EditorState,
|
||||
dispatch: DispatchFn
|
||||
) => {
|
||||
const { selection }: { selection: TextSelection } = state;
|
||||
const position = selection.$cursor
|
||||
? selection.$cursor.pos
|
||||
: selection.$to.pos;
|
||||
const node = type.create(attrs);
|
||||
const transaction = state.tr.insert(position, node);
|
||||
dispatch(transaction);
|
||||
};
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
|
||||
get plugins() {
|
||||
},
|
||||
addProseMirrorPlugins() {
|
||||
return [
|
||||
new Plugin({
|
||||
props: {
|
||||
@@ -129,5 +91,7 @@ export default class Image extends Node {
|
||||
},
|
||||
}),
|
||||
];
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
export default CustomImage;
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-nocheck
|
||||
import { Extension, Plugin } from "tiptap";
|
||||
|
||||
export default class MaxSize extends Extension {
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
|
||||
get name() {
|
||||
return "maxSize";
|
||||
}
|
||||
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
|
||||
get defaultOptions() {
|
||||
return {
|
||||
maxSize: null,
|
||||
};
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
|
||||
get plugins() {
|
||||
return [
|
||||
new Plugin({
|
||||
appendTransaction: (transactions, oldState, newState) => {
|
||||
const max = this.options.maxSize;
|
||||
const oldLength = oldState.doc.content.size;
|
||||
const newLength = newState.doc.content.size;
|
||||
|
||||
if (newLength > max && newLength > oldLength) {
|
||||
const newTr = newState.tr;
|
||||
newTr.insertText("", max + 1, newLength);
|
||||
|
||||
return newTr;
|
||||
}
|
||||
},
|
||||
}),
|
||||
];
|
||||
}
|
||||
}
|
||||
66
js/src/components/Editor/Mention.ts
Normal file
66
js/src/components/Editor/Mention.ts
Normal file
@@ -0,0 +1,66 @@
|
||||
import { SEARCH_PERSONS } from "@/graphql/search";
|
||||
import { VueRenderer } from "@tiptap/vue-2";
|
||||
import tippy from "tippy.js";
|
||||
import MentionList from "./MentionList.vue";
|
||||
import ApolloClient from "apollo-client";
|
||||
import { NormalizedCacheObject } from "apollo-cache-inmemory";
|
||||
import apolloProvider from "@/vue-apollo";
|
||||
|
||||
const client = apolloProvider.defaultClient as ApolloClient<NormalizedCacheObject>;
|
||||
|
||||
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;
|
||||
},
|
||||
render: () => {
|
||||
let component: VueRenderer;
|
||||
let popup: any;
|
||||
|
||||
return {
|
||||
onStart: (props: any) => {
|
||||
component = new VueRenderer(MentionList, {
|
||||
parent: this,
|
||||
propsData: props,
|
||||
});
|
||||
|
||||
popup = tippy("body", {
|
||||
getReferenceClientRect: props.clientRect,
|
||||
appendTo: () => document.body,
|
||||
content: component.element,
|
||||
showOnCreate: true,
|
||||
interactive: true,
|
||||
trigger: "manual",
|
||||
placement: "bottom-start",
|
||||
});
|
||||
},
|
||||
onUpdate(props: any) {
|
||||
component.updateProps(props);
|
||||
|
||||
popup[0].setProps({
|
||||
getReferenceClientRect: props.clientRect,
|
||||
});
|
||||
},
|
||||
// onKeyDown(props: any) {
|
||||
// return component.ref?.onKeyDown(props);
|
||||
// },
|
||||
onExit() {
|
||||
popup[0].destroy();
|
||||
component.destroy();
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default mentionOptions;
|
||||
97
js/src/components/Editor/MentionList.vue
Normal file
97
js/src/components/Editor/MentionList.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div class="items">
|
||||
<button
|
||||
class="item"
|
||||
:class="{ 'is-selected': index === selectedIndex }"
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
@click="selectItem(index)"
|
||||
>
|
||||
{{ item }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
|
||||
|
||||
@Component
|
||||
export default class MentionList extends Vue {
|
||||
@Prop({ type: Array, required: true }) items!: Array<any>;
|
||||
@Prop({ type: Function, required: true }) command!: any;
|
||||
|
||||
selectedIndex = 0;
|
||||
|
||||
@Watch("items")
|
||||
watchItems(): void {
|
||||
this.selectedIndex = 0;
|
||||
}
|
||||
|
||||
onKeyDown({ event }: { event: KeyboardEvent }): boolean {
|
||||
if (event.key === "ArrowUp") {
|
||||
this.upHandler();
|
||||
return true;
|
||||
}
|
||||
|
||||
if (event.key === "ArrowDown") {
|
||||
this.downHandler();
|
||||
return true;
|
||||
}
|
||||
|
||||
if (event.key === "Enter") {
|
||||
this.enterHandler();
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
upHandler(): void {
|
||||
this.selectedIndex =
|
||||
(this.selectedIndex + this.items.length - 1) % this.items.length;
|
||||
}
|
||||
|
||||
downHandler(): void {
|
||||
this.selectedIndex = (this.selectedIndex + 1) % this.items.length;
|
||||
}
|
||||
|
||||
enterHandler(): void {
|
||||
this.selectItem(this.selectedIndex);
|
||||
}
|
||||
|
||||
selectItem(index: number): void {
|
||||
const item = this.items[index];
|
||||
|
||||
if (item) {
|
||||
this.command({ id: item });
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.items {
|
||||
position: relative;
|
||||
border-radius: 0.25rem;
|
||||
background: white;
|
||||
color: rgba(black, 0.8);
|
||||
overflow: hidden;
|
||||
font-size: 0.9rem;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0.2rem 0.5rem;
|
||||
|
||||
&.is-selected,
|
||||
&:hover {
|
||||
color: #a975ff;
|
||||
background: rgba(#a975ff, 0.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
42
js/src/typings/tiptap-commands.d.ts
vendored
42
js/src/typings/tiptap-commands.d.ts
vendored
@@ -1,42 +0,0 @@
|
||||
declare module "tiptap-commands" {
|
||||
import { EditorView } from "prosemirror-view";
|
||||
import { Transaction, EditorState, Plugin } from "prosemirror-state";
|
||||
import { InputRule } from "prosemirror-inputrules";
|
||||
import { NodeType, MarkType } from "prosemirror-model";
|
||||
|
||||
export interface DispatchFn {
|
||||
(tr: Transaction): boolean;
|
||||
}
|
||||
|
||||
export interface Command {
|
||||
(...params: any[]): CommandFunction;
|
||||
}
|
||||
|
||||
export interface CommandFunction {
|
||||
(
|
||||
state: EditorState,
|
||||
dispatch: DispatchFn | undefined,
|
||||
view: EditorView
|
||||
): boolean;
|
||||
}
|
||||
|
||||
export function toggleWrap(type: NodeType): Command;
|
||||
|
||||
export function wrappingInputRule(
|
||||
regexp: RegExp,
|
||||
nodeType: NodeType,
|
||||
getAttrs?: (arg: {} | string[]) => object | undefined,
|
||||
joinPredicate?: (strs: string[], node: Node) => boolean
|
||||
): InputRule;
|
||||
|
||||
export function toggleMark(
|
||||
type: MarkType,
|
||||
attrs?: { [key: string]: any }
|
||||
): Command;
|
||||
|
||||
export function pasteRule(
|
||||
regexp: RegExp,
|
||||
type: string,
|
||||
getAttrs: (() => { [key: string]: any }) | { [key: string]: any }
|
||||
): Plugin;
|
||||
}
|
||||
62
js/src/typings/tiptap-extensions.d.ts
vendored
62
js/src/typings/tiptap-extensions.d.ts
vendored
@@ -1,62 +0,0 @@
|
||||
declare module "tiptap-extensions" {
|
||||
import { Extension, Node, Mark } from "tiptap";
|
||||
|
||||
export interface PlaceholderOptions {
|
||||
emptyNodeClass?: string;
|
||||
emptyNodeText?: string;
|
||||
showOnlyWhenEditable?: boolean;
|
||||
showOnlyCurrent?: boolean;
|
||||
emptyEditorClass: string;
|
||||
}
|
||||
export class Placeholder extends Extension {
|
||||
constructor(options?: PlaceholderOptions);
|
||||
}
|
||||
|
||||
export interface TrailingNodeOptions {
|
||||
/**
|
||||
* Node to be at the end of the document
|
||||
*
|
||||
* defaults to 'paragraph'
|
||||
*/
|
||||
node: string;
|
||||
/**
|
||||
* The trailing node will not be displayed after these specified nodes.
|
||||
*/
|
||||
notAfter: string[];
|
||||
}
|
||||
export class TrailingNode extends Extension {
|
||||
constructor(options?: TrailingNodeOptions);
|
||||
}
|
||||
|
||||
export interface HeadingOptions {
|
||||
levels?: number[];
|
||||
}
|
||||
|
||||
export class History extends Extension {}
|
||||
export class Underline extends Mark {}
|
||||
export class Strike extends Mark {}
|
||||
export class Italic extends Mark {}
|
||||
export class Bold extends Mark {}
|
||||
export class BulletList extends Node {}
|
||||
export class ListItem extends Node {}
|
||||
export class OrderedList extends Node {}
|
||||
export class HardBreak extends Node {}
|
||||
export class Blockquote extends Node {}
|
||||
export class CodeBlock extends Node {}
|
||||
export class TodoItem extends Node {}
|
||||
export class Code extends Node {}
|
||||
export class HorizontalRule extends Node {}
|
||||
export class Link extends Node {}
|
||||
export class TodoList extends Node {}
|
||||
|
||||
export class Heading extends Node {
|
||||
constructor(options?: HeadingOptions);
|
||||
}
|
||||
|
||||
export class Table extends Node {}
|
||||
export class TableCell extends Node {}
|
||||
export class TableRow extends Node {}
|
||||
export class TableHeader extends Node {}
|
||||
|
||||
export class Mention extends Node {}
|
||||
}
|
||||
331
js/src/typings/tiptap.d.ts
vendored
331
js/src/typings/tiptap.d.ts
vendored
@@ -1,331 +0,0 @@
|
||||
declare module "tiptap" {
|
||||
import {
|
||||
MarkSpec,
|
||||
MarkType,
|
||||
Node as ProsemirrorNode,
|
||||
NodeSpec,
|
||||
NodeType,
|
||||
ParseOptions,
|
||||
Schema,
|
||||
} from "prosemirror-model";
|
||||
import { EditorState, Plugin, Transaction } from "prosemirror-state";
|
||||
import { Command, CommandFunction } from "tiptap-commands";
|
||||
import { EditorProps, EditorView } from "prosemirror-view";
|
||||
import { VueConstructor } from "vue";
|
||||
|
||||
export const EditorContent: VueConstructor;
|
||||
export const EditorMenuBubble: VueConstructor;
|
||||
export const EditorMenuBar: VueConstructor;
|
||||
export type ExtensionOption = Extension | Node | Mark;
|
||||
|
||||
// there are some props available
|
||||
// `node` is a Prosemirror Node Object
|
||||
// `updateAttrs` is a function to update attributes defined in `schema`
|
||||
// `view` is the ProseMirror view instance
|
||||
// `options` is an array of your extension options
|
||||
// `selected`
|
||||
export interface NodeView {
|
||||
/** A Prosemirror Node Object */
|
||||
node?: ProsemirrorNode;
|
||||
/** A function to update attributes defined in `schema` */
|
||||
updateAttrs?: (attrs: { [key: string]: any }) => any;
|
||||
/** The ProseMirror view instance */
|
||||
view?: EditorView;
|
||||
/** An array of your extension options */
|
||||
options?: { [key: string]: any };
|
||||
/** Whether the node view is selected */
|
||||
selected?: boolean;
|
||||
}
|
||||
|
||||
export type CommandGetter =
|
||||
| { [key: string]: (() => Command) | Command }
|
||||
| (() => Command)
|
||||
| Command
|
||||
| (() => Command)[];
|
||||
|
||||
export interface EditorUpdateEvent {
|
||||
state: EditorState;
|
||||
getHTML: () => string;
|
||||
getJSON: () => object;
|
||||
transaction: Transaction;
|
||||
}
|
||||
|
||||
export interface EditorOptions {
|
||||
editorProps?: EditorProps;
|
||||
/** defaults to true */
|
||||
editable?: boolean;
|
||||
/** defaults to false */
|
||||
autoFocus?: boolean;
|
||||
extensions?: ExtensionOption[];
|
||||
content?: Object | string;
|
||||
emptyDocument?: {
|
||||
type: "doc";
|
||||
content: [
|
||||
{
|
||||
type: "paragraph";
|
||||
}
|
||||
];
|
||||
};
|
||||
/** defaults to false */
|
||||
useBuiltInExtensions?: boolean;
|
||||
/** defaults to false */
|
||||
disableInputRules?: boolean;
|
||||
/** defaults to false */
|
||||
disablePasteRules?: boolean;
|
||||
dropCursor?: {};
|
||||
parseOptions?: ParseOptions;
|
||||
/** defaults to true */
|
||||
injectCSS?: boolean;
|
||||
onInit?: ({
|
||||
view,
|
||||
state,
|
||||
}: {
|
||||
view: EditorView;
|
||||
state: EditorState;
|
||||
}) => void;
|
||||
onTransaction?: (event: EditorUpdateEvent) => void;
|
||||
onUpdate?: (event: EditorUpdateEvent) => void;
|
||||
onFocus?: ({
|
||||
event,
|
||||
state,
|
||||
view,
|
||||
}: {
|
||||
event: FocusEvent;
|
||||
state: EditorState;
|
||||
view: EditorView;
|
||||
}) => void;
|
||||
onBlur?: ({
|
||||
event,
|
||||
state,
|
||||
view,
|
||||
}: {
|
||||
event: FocusEvent;
|
||||
state: EditorState;
|
||||
view: EditorView;
|
||||
}) => void;
|
||||
onPaste?: (...args: any) => void;
|
||||
onDrop?: (...args: any) => void;
|
||||
}
|
||||
|
||||
export class Editor {
|
||||
commands: { [key: string]: Command };
|
||||
defaultOptions: { [key: string]: any };
|
||||
element: Element;
|
||||
extensions: Extension[];
|
||||
inputRules: any[];
|
||||
keymaps: any[];
|
||||
marks: Mark[];
|
||||
nodes: Node[];
|
||||
pasteRules: any[];
|
||||
plugins: Plugin[];
|
||||
schema: Schema;
|
||||
state: EditorState;
|
||||
view: EditorView;
|
||||
activeMarks: { [markName: string]: () => boolean };
|
||||
activeNodes: { [nodeName: string]: () => boolean };
|
||||
activeMarkAttrs: { [markName: string]: { [attr: string]: any } };
|
||||
|
||||
/**
|
||||
* Creates an [Editor]
|
||||
* @param options - An object of Editor options.
|
||||
*/
|
||||
constructor(options?: EditorOptions);
|
||||
|
||||
/**
|
||||
* Replace the current content. You can pass an HTML string or a JSON document that matches the editor's schema.
|
||||
* @param content Defaults to {}.
|
||||
* @param emitUpdate Defaults to false.
|
||||
*/
|
||||
setContent(content?: string | object, emitUpdate?: boolean): void;
|
||||
|
||||
/**
|
||||
* Clears the current editor content.
|
||||
*
|
||||
* @param emitUpdate Whether or not the change should trigger the onUpdate callback.
|
||||
*/
|
||||
clearContent(emitUpdate?: boolean): void;
|
||||
|
||||
/**
|
||||
* Overwrites the current editor options.
|
||||
* @param options Options an object of Editor options
|
||||
*/
|
||||
setOptions(options: EditorOptions): void;
|
||||
|
||||
/**
|
||||
* Register a ProseMirror plugin.
|
||||
* @param plugin
|
||||
*/
|
||||
registerPlugin(plugin: Plugin): void;
|
||||
|
||||
/** Get the current content as JSON. */
|
||||
getJSON(): {};
|
||||
|
||||
/** Get the current content as HTML. */
|
||||
getHTML(): string;
|
||||
|
||||
/** Focus the editor */
|
||||
focus(): void;
|
||||
|
||||
/** Removes the focus from the editor. */
|
||||
blur(): void;
|
||||
|
||||
/** Destroy the editor and free all Prosemirror-related objects from memory.
|
||||
* You should always call this method on beforeDestroy() lifecycle hook of the Vue component wrapping the editor.
|
||||
*/
|
||||
destroy(): void;
|
||||
|
||||
on(event: string, callbackFn: (params: any) => void): void;
|
||||
|
||||
off(event: string, callbackFn: (params: any) => void): void;
|
||||
|
||||
getMarkAttrs(markName: string): { [attributeName: string]: any };
|
||||
}
|
||||
|
||||
export class Extension<Options = any> {
|
||||
/** Define a name for your extension */
|
||||
name?: string | null;
|
||||
/** Define some default options.The options are available as this.$options. */
|
||||
defaultOptions?: Options;
|
||||
/** Define a list of Prosemirror plugins. */
|
||||
plugins?: Plugin[];
|
||||
/** Called when options of extension are changed via editor.extensions.options */
|
||||
update?: (view: EditorView) => any;
|
||||
/** Options for that are either passed in from the extension constructor or set by defaultOptions() */
|
||||
options?: Options;
|
||||
|
||||
constructor(options?: Options);
|
||||
|
||||
/** Define some keybindings. */
|
||||
keys?({
|
||||
schema,
|
||||
}: {
|
||||
schema: Schema | NodeSpec | MarkSpec;
|
||||
}): { [keyCombo: string]: CommandFunction };
|
||||
|
||||
/** Define commands. */
|
||||
commands?({
|
||||
schema,
|
||||
attrs,
|
||||
}: {
|
||||
schema: Schema | NodeSpec | MarkSpec;
|
||||
attrs: { [key: string]: string };
|
||||
}): CommandGetter;
|
||||
|
||||
inputRules?({ schema }: { schema: Schema }): any[];
|
||||
|
||||
pasteRules?({ schema }: { schema: Schema }): Plugin[];
|
||||
}
|
||||
|
||||
export class Node<V extends NodeView = any> extends Extension {
|
||||
schema?: NodeSpec;
|
||||
/** Reference to a view component constructor
|
||||
* See https://stackoverflow.com/questions/38311672/generic-and-typeof-t-in-the-parameters
|
||||
*/
|
||||
view?: { new (): V };
|
||||
|
||||
commands?({
|
||||
type,
|
||||
schema,
|
||||
attrs,
|
||||
}: {
|
||||
type: NodeType;
|
||||
schema: NodeSpec;
|
||||
attrs: { [key: string]: string };
|
||||
}): CommandGetter;
|
||||
|
||||
keys?({
|
||||
type,
|
||||
schema,
|
||||
}: {
|
||||
type: NodeType;
|
||||
schema: NodeSpec;
|
||||
}): { [keyCombo: string]: CommandFunction };
|
||||
|
||||
inputRules?({ type, schema }: { type: NodeType; schema: Schema }): any[];
|
||||
|
||||
pasteRules?({ type, schema }: { type: NodeType; schema: Schema }): Plugin[];
|
||||
}
|
||||
|
||||
export class Mark<V extends NodeView = any> extends Extension {
|
||||
schema?: MarkSpec;
|
||||
/** Reference to a view component constructor
|
||||
* See https://stackoverflow.com/questions/38311672/generic-and-typeof-t-in-the-parameters
|
||||
*/
|
||||
view?: { new (): V };
|
||||
|
||||
commands?({
|
||||
type,
|
||||
schema,
|
||||
attrs,
|
||||
}: {
|
||||
type: MarkType;
|
||||
schema: MarkSpec;
|
||||
attrs: { [key: string]: string };
|
||||
}): CommandGetter;
|
||||
|
||||
keys?({
|
||||
type,
|
||||
schema,
|
||||
}: {
|
||||
type: MarkType;
|
||||
schema: MarkSpec;
|
||||
}): { [keyCombo: string]: CommandFunction };
|
||||
|
||||
inputRules?({ type, schema }: { type: MarkType; schema: Schema }): any[];
|
||||
|
||||
pasteRules?({ type, schema }: { type: MarkType; schema: Schema }): Plugin[];
|
||||
}
|
||||
|
||||
export class Text extends Node {}
|
||||
|
||||
export class Paragraph extends Node {}
|
||||
|
||||
export class Doc extends Node {}
|
||||
|
||||
/** A set of commands registered to the editor. */
|
||||
export interface EditorCommandSet {
|
||||
[key: string]: Command;
|
||||
}
|
||||
|
||||
/**
|
||||
* The properties passed into <editor-menu-bar /> component
|
||||
*/
|
||||
export interface MenuData {
|
||||
/** Whether the editor has focus. */
|
||||
focused: boolean;
|
||||
/** Function to focus the editor. */
|
||||
focus: () => void;
|
||||
/** A set of commands registered. */
|
||||
commands: EditorCommandSet;
|
||||
/** Check whether a node or mark is currently active. */
|
||||
isActive: IsActiveChecker;
|
||||
/** A function to get all mark attributes of the current selection. */
|
||||
getMarkAttrs: (markName: string) => { [attributeName: string]: any };
|
||||
}
|
||||
|
||||
export interface FloatingMenuData extends MenuData {
|
||||
/** An object for positioning the menu. */
|
||||
menu: MenuDisplayData;
|
||||
}
|
||||
|
||||
/**
|
||||
* A data object passed to a menu bubble to help it determine its position
|
||||
* and visibility.
|
||||
*/
|
||||
export interface MenuDisplayData {
|
||||
/** Left position of the cursor. */
|
||||
left: number;
|
||||
/** Bottom position of the cursor. */
|
||||
bottom: number;
|
||||
/** Whether or not there is an active selection. */
|
||||
isActive: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* A map containing functions to check if a node/mark is currently selected.
|
||||
* The name of the node/mark is used as the key.
|
||||
*/
|
||||
export interface IsActiveChecker {
|
||||
[name: string]: () => boolean;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user