mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-12 23:35:58 +00:00
789c40c34e
We had tiptap's underline and never used it. A user has asked for it, so why not implement it right away? Suggested by `@raimundo@human-connection.social`: https://human-connection.social/post/612bf465-91ce-4be8-906e-3bde63617346/hcsocial-dein-netzwerk-news-mit-dennis-and-robert-1#commentId-b864d04f-1e8c-48c4-9ed0-98aefaed1c02
81 lines
1.9 KiB
Vue
81 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 :isActive="isActive.italic()" :onClick="commands.italic" icon="italic" />
|
|
|
|
<menu-bar-button
|
|
:isActive="isActive.underline()"
|
|
:onClick="commands.underline"
|
|
icon="underline"
|
|
/>
|
|
|
|
<menu-bar-button
|
|
ref="linkButton"
|
|
:isActive="isActive.link()"
|
|
:onClick="event => toggleLinkInput(getMarkAttrs('link'), event.currentTarget)"
|
|
icon="link"
|
|
/>
|
|
|
|
<menu-bar-button
|
|
:isActive="isActive.paragraph()"
|
|
:onClick="commands.paragraph"
|
|
icon="paragraph"
|
|
/>
|
|
|
|
<menu-bar-button
|
|
:isActive="isActive.heading({ level: 3 })"
|
|
:onClick="() => commands.heading({ level: 3 })"
|
|
label="H3"
|
|
/>
|
|
|
|
<menu-bar-button
|
|
:isActive="isActive.heading({ level: 4 })"
|
|
:onClick="() => commands.heading({ level: 4 })"
|
|
label="H4"
|
|
/>
|
|
|
|
<menu-bar-button
|
|
:isActive="isActive.bullet_list()"
|
|
:onClick="commands.bullet_list"
|
|
icon="list-ul"
|
|
/>
|
|
|
|
<menu-bar-button
|
|
:isActive="isActive.ordered_list()"
|
|
:onClick="commands.ordered_list"
|
|
icon="list-ol"
|
|
/>
|
|
|
|
<menu-bar-button
|
|
:isActive="isActive.blockquote()"
|
|
:onClick="commands.blockquote"
|
|
icon="quote-right"
|
|
/>
|
|
|
|
<menu-bar-button
|
|
:isActive="isActive.horizontal_rule()"
|
|
:onClick="commands.horizontal_rule"
|
|
icon="minus"
|
|
/>
|
|
</div>
|
|
</editor-menu-bar>
|
|
</template>
|
|
|
|
<script>
|
|
import { EditorMenuBar } from 'tiptap'
|
|
import MenuBarButton from './MenuBarButton'
|
|
|
|
export default {
|
|
components: {
|
|
EditorMenuBar,
|
|
MenuBarButton,
|
|
},
|
|
props: {
|
|
editor: Object,
|
|
toggleLinkInput: Function,
|
|
},
|
|
}
|
|
</script>
|