example.vue

<template lang="html">
    <div class="chat-composer" id="chat-composer">
        <div class="columns">
            <div class="column">

                <editor :extensions="extensions" @update="onUpdate">
                    <div class="menubar" :class="{ 'is-focused': focused }" slot="menubar" slot-scope="{ nodes, marks, focused }">
                        <div v-if="nodes && marks">

                            <button
                                class="button is-white is-small"
                                :class="{ 'is-active': marks.bold.active() }"
                                @click="marks.bold.command"
                            >
                                <icon name="bold"/>
                            </button>

                            <button
                                class="button is-white is-small"
                                :class="{ 'is-active': marks.italic.active() }"
                                @click="marks.italic.command"
                            >
                                <icon name="italic"/>
                            </button>

                            <button
                                class="button is-white is-small"
                                :class="{ 'is-active': nodes.paragraph.active() }"
                                @click="nodes.paragraph.command"
                            >
                                <icon name="paragraph"/>
                            </button>

                            <button
                                class="button is-white is-small"
                                :class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
                                @click="nodes.heading.command({ level: 1 })"
                            >
                                H1
                            </button>

                            <button
                                class="button is-white is-small"
                                :class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
                                @click="nodes.heading.command({ level: 2 })"
                            >
                                H2
                            </button>

                            <button
                                class="button is-white is-small"
                                :class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
                                @click="nodes.heading.command({ level: 3 })"
                            >
                                H3
                            </button>

                            <button
                                class="button is-white is-small"
                                :class="{ 'is-active': nodes.bullet_list.active() }"
                                @click="nodes.bullet_list.command"
                            >
                                <icon name="list-ul"/>
                            </button>

                            <button
                                class="button is-white is-small"
                                :class="{ 'is-active': nodes.ordered_list.active() }"
                                @click="nodes.ordered_list.command"
                            >
                                <icon name="list-ol"/>
                            </button>


                        </div>
                    </div>
                    <div slot="content" slot-scope="props">
                        <p>Write your message here.</p>
                    </div>
                </editor>

                <!--<textarea v-model="messageText" placeholder="Type your message here" class="transparent"-->
                <[email protected]="sendMessage"></textarea>-->
                <div class="file has-name">
                    <label class="file-label">
                        <input type="file" class="file-input" id="file" multiple ref="file"
                               v-on:change="handleFileUpload()"/>
                        <span class="file-cta">
                          <span class="file-icon">
                            <i class="fal fa-upload"></i>
                          </span>
                          <span class="file-label">
                            Choose a file…
                          </span>
                        </span>
                        <span class="file-name">
                            {{ temp_filename }}
                        </span>
                    </label>
                </div>
            </div>
            <div class="column is-narrow">
                <a class="button is-large" @click="sendMessage">Send</a>
            </div>
        </div>
    </div>
</template>

<script>
    import {Editor} from 'tiptap'
    import {
        BlockquoteNode,
        BulletListNode,
        CodeBlockNode,
        HardBreakNode,
        HeadingNode,
        ImageNode,
        ListItemNode,
        OrderedListNode,
        TodoItemNode,
        TodoListNode,
        BoldMark,
        CodeMark,
        ItalicMark,
        LinkMark,
        HistoryExtension,
    } from 'tiptap-extensions'

    export default {
        data() {
            return {
                messageText: '',
                file: [],
                temp_filename: '',
                extensions: [
                    new BlockquoteNode(),
                    new BulletListNode(),
                    new CodeBlockNode(),
                    new HardBreakNode(),
                    new HeadingNode({maxLevel: 3}),
                    new ImageNode(),
                    new ListItemNode(),
                    new OrderedListNode(),
                    new TodoItemNode(),
                    new TodoListNode(),
                    new BoldMark(),
                    new CodeMark(),
                    new ItalicMark(),
                    new LinkMark(),
                    new HistoryExtension(),
                ],

            }
        },

        components: {
            Editor,
        },

        mounted() {

        },
        methods: {
            sendMessage() {
                this.$emit('messagesent', {
                    message: this.messageText,
                });
                console.log( this.messageText );
                this.messageText = '';
            },
            handleFileUpload() {
                this.file = this.$refs.file.files;
                if (this.file.length === 1) {
                    this.temp_filename = this.file[0].name;
                } else if (this.file.length > 1) {
                    this.temp_filename = this.file.length + ' files';
                } else {
                    this.temp_filename = '';
                }

                this.$emit('filesadded', {
                    files: this.file,
                });
            },
            onUpdate({getJSON, getHTML}){
                this.messageText = getHTML();
            }
        }
    }
</script>