mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
107 lines
2.5 KiB
Vue
107 lines
2.5 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"
|
|
/>
|
|
|
|
<menu-legend class="legend-button" />
|
|
</div>
|
|
</editor-menu-bar-->
|
|
<div class="editor-menu-bar">
|
|
<button
|
|
@click="toggleBold"
|
|
:class="{ 'is-active': editor.isActive('bold') }"
|
|
>
|
|
<b>B</b>
|
|
</button>
|
|
<button
|
|
@click="toggleItalic"
|
|
:class="{ 'is-active': editor.isActive('italic') }"
|
|
>
|
|
<i>I</i>
|
|
</button>
|
|
<!-- Add more buttons for other formatting options -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import { EditorMenuBar } from '@tiptap/vue-2'
|
|
// import MenuBarButton from './MenuBarButton'
|
|
// import MenuLegend from './MenuLegend.vue'
|
|
|
|
export default {
|
|
components: {
|
|
// EditorMenuBar,
|
|
// MenuBarButton,
|
|
// MenuLegend,
|
|
},
|
|
props: {
|
|
editor: Object,
|
|
toggleLinkInput: Function,
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.legend-button {
|
|
display: inline;
|
|
position: relative;
|
|
}
|
|
</style>
|