Vue WYSIWYG Editor using tip-tap library

ContentEditor.vue

<template>
	<!-- WYSIWYG Editor -->
	<div class="editor mb-4">
		<editor-menu-bar class="editor-bar" :editor="editor">
			<div slot-scope="{ commands, isActive, focused }">
				<!-- Bold -->
				<button
					type="button"
					class="btn btn-plain"
					:class="{ 'is-active': isActive.bold() }"
					@click="commands.bold">
					<i class="material-icons">format_bold</i>
				</button>

				<!-- Italic -->
				<button
					type="button"
					class="btn btn-plain"
					:class="{ 'is-active': isActive.italic() }"
					@click="commands.italic">
					<i class="material-icons">format_italic</i>
				</button>

				<!-- Underline -->
				<button
					type="button"
					class="btn btn-plain"
					:class="{ 'is-active': isActive.underline() }"
					@click="commands.underline">
					<i class="material-icons">format_underline</i>
				</button>

				<!-- P -->
				<button
					type="button"
					class="btn btn-plain"
					:class="{ 'is-active': focused && isActive.paragraph() }"
					@click="commands.paragraph()">
					<span class="text">P</span>
				</button>

				<!-- H1 -->
				<button
					type="button"
					class="btn btn-plain"
					:class="{ 'is-active': isActive.heading({ level: 1 }) }"
					@click="commands.heading({ level: 1 })">
					<span class="text">H1</span>
				</button>

				<!-- H2 -->
				<button
					type="button"
					class="btn btn-plain"
					:class="{ 'is-active': isActive.heading({ level: 2 }) }"
					@click="commands.heading({ level: 2 })">
					<span class="text">H2</span>
				</button>

				<!-- Bullet List -->
				<button
					type="button"
					class="btn btn-plain"
					:class="{ 'is-active': isActive.bullet_list() }"
					@click="commands.bullet_list()">
					<i class="material-icons">format_list_bulleted</i>
				</button>

				<!-- Bullet List -->
				<button
					type="button"
					class="btn btn-plain"
					:class="{ 'is-active': isActive.ordered_list() }"
					@click="commands.ordered_list()">
					<i class="material-icons">format_list_numbered</i>
				</button>
			</div>
		</editor-menu-bar>
		<editor-content class="editor-content" :editor="editor" />
	</div>
</template>

<script>
import {
	Editor,
	EditorContent,
	EditorMenuBar,
} from 'tiptap';

import {
	// Blockquote,
	// CodeBlock,
	// HardBreak,
	Heading,
	OrderedList,
	BulletList,
	ListItem,
	TodoItem,
	TodoList,
	Bold,
	Code,
	Italic,
	Link,
	Strike,
	Underline,
	History,
} from 'tiptap-extensions';

export default {
	name: 'ContentEditor',
	props: {
		value: {
			type: String,
			default: '',
		},
	},
	components: {
		EditorContent,
		EditorMenuBar,
	},
	data() {
		return {
			editor: null,
		};
	},
	methods: {
		initEditor() {
			const content = this.value;
			const extensions = [
				// new Blockquote(),
				// new CodeBlock(),
				// new HardBreak(),
				new Heading({ levels: [1, 2, 3] }),
				new BulletList(),
				new OrderedList(),
				new ListItem(),
				new TodoItem(),
				new TodoList(),
				new Bold(),
				new Code(),
				new Italic(),
				new Link(),
				new Strike(),
				new Underline(),
				new History(),
			];
			this.editor = new Editor({
				content,
				extensions,
				onUpdate: this.onUpdate,
			});
		},
		onUpdate(editor) {
			const content = editor.getHTML();
			this.$emit('input', content);
		},
	},
	mounted() {
		this.initEditor();
	},
	beforeDestroy() {
		this.editor.destroy();
	},
	watch: {
		// value(value) {
		// 	this.content = value;
		// 	if (this.editor) {
		// 		this.editor.setContent(value, false);
		// 	}
		// },
	},
};
</script>