feat(editor): add command list example

copied from 252acb32d2/demos/src/Experiments/Commands/Vue

src/components/input/editor/CommandsList.vue

@@ -0,0 +1,118 @@
+<template>
+	<div class="items">
+		<template v-if="items.length">
+			<button
+				class="item"
+				:class="{ 'is-selected': index === selectedIndex }"
+				v-for="(item, index) in items"
+				:key="index"
+				@click="selectItem(index)"
+			>
+				{{ item }}
+			</button>
+		</template>
+		<div class="item" v-else>
+			No result
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		items: {
+			type: Array,
+			required: true,
+		},
+
+		command: {
+			type: Function,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			selectedIndex: 0,
+		}
+	},
+
+	watch: {
+		items() {
+			this.selectedIndex = 0
+		},
+	},
+
+	methods: {
+		onKeyDown({ event }) {
+			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() {
+			this.selectedIndex = ((this.selectedIndex + this.items.length) - 1) % this.items.length
+		},
+
+		downHandler() {
+			this.selectedIndex = (this.selectedIndex + 1) % this.items.length
+		},
+
+		enterHandler() {
+			this.selectItem(this.selectedIndex)
+		},
+
+		selectItem(index) {
+			const item = this.items[index]
+
+			if (item) {
+				this.command(item)
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss">
+.items {
+	padding: 0.2rem;
+	position: relative;
+	border-radius: 0.5rem;
+	background: #FFF;
+	color: rgba(0, 0, 0, 0.8);
+	overflow: hidden;
+	font-size: 0.9rem;
+	box-shadow:
+		0 0 0 1px rgba(0, 0, 0, 0.05),
+		0px 10px 20px rgba(0, 0, 0, 0.1),
+;
+}
+
+.item {
+	display: block;
+	margin: 0;
+	width: 100%;
+	text-align: left;
+	background: transparent;
+	border-radius: 0.4rem;
+	border: 1px solid transparent;
+	padding: 0.2rem 0.4rem;
+
+	&.is-selected {
+		border-color: #000;
+	}
+}
+</style>

src/components/input/editor/commands.js

@@ -0,0 +1,26 @@
+import { Extension } from '@tiptap/core'
+import Suggestion from '@tiptap/suggestion'
+
+export default Extension.create({
+	name: 'commands',
+
+	addOptions() {
+		return {
+			suggestion: {
+				char: '/',
+				command: ({ editor, range, props }) => {
+					props.command({ editor, range })
+				},
+			},
+		}
+	},
+
+	addProseMirrorPlugins() {
+		return [
+			Suggestion({
+				editor: this.editor,
+				...this.options.suggestion,
+			}),
+		]
+	},
+})

src/components/input/editor/suggestion.js

@@ -0,0 +1,113 @@
+import { VueRenderer } from '@tiptap/vue-3'
+import tippy from 'tippy.js'
+
+import CommandsList from './CommandsList.vue'
+
+export default {
+	items: ({ query }) => {
+		return [
+			{
+				title: 'H1',
+				command: ({ editor, range }) => {
+					editor
+						.chain()
+						.focus()
+						.deleteRange(range)
+						.setNode('heading', { level: 1 })
+						.run()
+				},
+			},
+			{
+				title: 'H2',
+				command: ({ editor, range }) => {
+					editor
+						.chain()
+						.focus()
+						.deleteRange(range)
+						.setNode('heading', { level: 2 })
+						.run()
+				},
+			},
+			{
+				title: 'bold',
+				command: ({ editor, range }) => {
+					editor
+						.chain()
+						.focus()
+						.deleteRange(range)
+						.setMark('bold')
+						.run()
+				},
+			},
+			{
+				title: 'italic',
+				command: ({ editor, range }) => {
+					editor
+						.chain()
+						.focus()
+						.deleteRange(range)
+						.setMark('italic')
+						.run()
+				},
+			},
+		].filter(item => item.title.toLowerCase().startsWith(query.toLowerCase())).slice(0, 10)
+	},
+
+	render: () => {
+		let component
+		let popup
+
+		return {
+			onStart: props => {
+				component = new VueRenderer(CommandsList, {
+					// using vue 2:
+					// parent: this,
+					// propsData: props,
+					props,
+					editor: props.editor,
+				})
+
+				if (!props.clientRect) {
+					return
+				}
+
+				popup = tippy('body', {
+					getReferenceClientRect: props.clientRect,
+					appendTo: () => document.body,
+					content: component.element,
+					showOnCreate: true,
+					interactive: true,
+					trigger: 'manual',
+					placement: 'bottom-start',
+				})
+			},
+
+			onUpdate(props) {
+				component.updateProps(props)
+
+				if (!props.clientRect) {
+					return
+				}
+
+				popup[0].setProps({
+					getReferenceClientRect: props.clientRect,
+				})
+			},
+
+			onKeyDown(props) {
+				if (props.event.key === 'Escape') {
+					popup[0].hide()
+
+					return true
+				}
+
+				return component.ref?.onKeyDown(props)
+			},
+
+			onExit() {
+				popup[0].destroy()
+				component.destroy()
+			},
+		}
+	},
+}