SevicheCC/Seigwai
1
0
Fork 0
mirror of https://codeberg.org/Sevichecc/Seigwai.git synced 2025-04-30 07:49:30 +08:00
Code Issues Projects Releases Packages Wiki Activity

Refactor BubbleMenu

Browse source
This commit is contained in:
Seviche CC 2023-03-28 22:32:47 +08:00
parent 4cf8033568
commit d2f26c1f64
Signed by: SevicheCC
GPG key ID: C577000000000000
2 changed files with 65 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
src/components/Tiptap/BubbleMenu.vue Normal file
View file

@ -0,0 +1,59 @@
<script setup lang="ts">
import type { Editor
} from '@tiptap/vue-3';
import { BubbleMenu } from '@tiptap/vue-3'
const { editor } = defineProps<{ editor: Editor }>()
</script>
<template>
<BubbleMenu
:editor="editor"
:tippy-options="{ duration: 100 }"
class="flex text-gray-700 bg-white grass rounded-md p-[2px] shadow-xl border-slate-100 border"
>
<button
class="menu-btn"
placement="bold"
@click="editor.chain().focus().toggleBold().run()"
>
<span class="i-tabler-bold" />
</button>
<button
class="menu-btn"
@click="editor.chain().focus().toggleItalic().run()"
>
<span class="i-tabler-italic" />
</button>
<button
class="menu-btn"
@click="editor.chain().focus().toggleStrike().run()"
>
<span class="i-tabler-strikethrough" />
</button>
<button
class="menu-btn"
@click="editor.chain().focus().toggleCode().run()"
>
<span class="i-tabler-code" />
</button>
<button
class="menu-btn"
@click="editor.chain().focus().toggleBlockquote().run()"
>
<span class="i-tabler-quote" />
</button>
</BubbleMenu>
</template>
<style lang="pcss">
.menu-btn {
@apply btn btn-ghost btn-sm hover:bg-slate-200 rounded-md p-2;
}
.menu-btn > span {
@apply w-4;
}
</style>

52
src/components/Tiptap/Editor.vue
View file

@ -1,7 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { BubbleMenu, EditorContent, useEditor } from '@tiptap/vue-3' import { EditorContent, useEditor } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import Typography from '@tiptap/extension-typography' import Typography from '@tiptap/extension-typography'
import BubbleMenu from './BubbleMenu.vue'
const editor = useEditor({ const editor = useEditor({
content: '<p>I’m running Tiptap with Vue.js. 🎉</p>', content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
@ -12,55 +13,8 @@ const editor = useEditor({
</script> </script>
<template> <template>
<div>
<BubbleMenu <BubbleMenu
v-if="editor" v-if="editor"
:editor="editor" :editor="editor" />
:tippy-options="{ duration: 100 }"
class="flex text-gray-700 bg-white grass rounded-md p-[2px] shadow-xl border-slate-100 border"
>
<button
class="menu-btn"
placement="bold"
@click="editor?.chain().focus().toggleBold().run()"
>
<span class="i-tabler-bold" />
</button>
<button
class="menu-btn"
@click="editor?.chain().focus().toggleItalic().run()"
>
<span class="i-tabler-italic" />
</button>
<button
class="menu-btn"
@click="editor?.chain().focus().toggleStrike().run()"
>
<span class="i-tabler-strikethrough" />
</button>
<button
class="menu-btn"
@click="editor?.chain().focus().toggleCode().run()"
>
<span class="i-tabler-code" />
</button>
<button
class="menu-btn"
@click="editor?.chain().focus().toggleBlockquote().run()"
>
<span class="i-tabler-quote" />
</button>
</BubbleMenu>
<EditorContent :editor="editor" /> <EditorContent :editor="editor" />
</div>
</template> </template>
<style lang="pcss">
.menu-btn {
@apply btn btn-ghost btn-sm hover:bg-slate-200 rounded-md p-2;
}
.menu-btn > span {
@apply w-5;
}
</style>