hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Upgrade tiptap to version 2

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2021-04-30 12:20:31 +02:00
parent cd70fd692a
commit fa9ddf8ce0
10 changed files with 595 additions and 843 deletions
Download Patch File Download Diff File Expand all files Collapse all files

297
js/src/components/Editor.vue
View File

@@ -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);

80
js/src/components/Editor/Image.ts
View File

@@ -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;

39
js/src/components/Editor/MaxSize.ts
View File

@@ -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
View 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
View 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>