2019-08-23 15:49:20 +01:00

79 lines
1.9 KiB
Vue

<template>
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive, getMarkAttrs }">
<div>
<menu-bar-button
:isActive="isActive.bold()"
:onClick="commands.bold"
icon="bold"
></menu-bar-button>
<menu-bar-button
:isActive="isActive.italic()"
:onClick="commands.italic"
icon="italic"
></menu-bar-button>
<!-- <menu-bar-button
:isActive="isActive.link()"
:onClick="() => showLinkMenu(getMarkAttrs('link'))"
icon="link"
></menu-bar-button>-->
<menu-bar-button
:isActive="isActive.paragraph()"
:onClick="commands.paragraph"
icon="paragraph"
></menu-bar-button>
<menu-bar-button
:isActive="isActive.heading({ level: 3 })"
:onClick="() => commands.heading({ level: 3 })"
label="H3"
></menu-bar-button>
<menu-bar-button
:isActive="isActive.heading({ level: 4 })"
:onClick="() => commands.heading({ level: 4 })"
label="H4"
></menu-bar-button>
<menu-bar-button
:isActive="isActive.bullet_list()"
:onClick="commands.bullet_list"
icon="list-ul"
></menu-bar-button>
<menu-bar-button
:isActive="isActive.ordered_list()"
:onClick="commands.ordered_list"
icon="list-ol"
></menu-bar-button>
<menu-bar-button
:isActive="isActive.blockquote()"
:onClick="commands.blockquote"
icon="quote-right"
></menu-bar-button>
<menu-bar-button
:isActive="isActive.horizontal_rule()"
:onClick="commands.horizontal_rule"
icon="minus"
></menu-bar-button>
</div>
</editor-menu-bar>
</template>
<script>
import { EditorMenuBar } from 'tiptap'
import MenuBarButton from './MenuBarButton'
export default {
components: {
EditorMenuBar,
MenuBarButton,
},
props: ['editor'],
}
</script>