dededit/src/components/CharactersMenu.vue

<template>

        <div @hide="hideLinkMenu" class="menubar char-menubar">

            <div v-bind:key="opt.label" v-for="opt in environment.getCharacterOptions()" class="dropdown">
                <button class="dropbtn border-left">{{opt.label|capitalize}}</button>
                <div class="dropdown-content">
                    <a v-for="style in opt.styles" v-bind:key="style.label">
                        <button
                                class="menubar__button"
                                :class="{ 'is-active': slots.isActive.customstyle({ type: style.class }) }"
                                @click="slots.commands.customstyle({ type: style.class })">
                            {{style.label | capitalize}}
                        </button>
                    </a>
                </div>
            </div>


            <form class="menububble__form" v-if="linkMenuIsActive"
                  @submit.prevent="setLinkUrl(slots.commands.link, linkUrl)">
                <input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://"
                       ref="linkInput" @keydown.esc="hideLinkMenu"/>
                <button class="menububble__button" @click="setLinkUrl(slots.commands.link, null)" type="button">
                    Supprimer le lien
                </button>
            </form>

            <template v-else>
                <button id="link__button"
                        class="menububble__button"
                        @click="showLinkMenu(slots.getMarkAttrs('link'))"
                        :class="{ 'is-active': slots.isActive.link() }"
                >
                    <span>{{ slots.isActive.link() ? 'Modifier le lien' : 'Lien'}}</span>
                </button>
            </template>
        </div>

</template>

<script>


    export default {
        props: ["slots","environment"],
        components: {},
        data() {
            return {
                linkUrl: null,
                linkMenuIsActive: false,
            }
        },
        beforeDestroy() {

        },

        mounted() {

        },

        methods: {

            showLinkMenu(attrs) {
                this.linkUrl = attrs.href
                this.linkMenuIsActive = true
                this.$nextTick(() => {
                    this.$refs.linkInput.focus()
                })
            },
            hideLinkMenu() {
                this.linkUrl = null
                this.linkMenuIsActive = false
            },
            setLinkUrl(command, url) {
                command({href: url})
                this.hideLinkMenu()
            },

        }
    }
</script>