ContentEditable теряет диапазон при попытке ввести цвет при вводе текста

Question

Я пытаюсь создать свой собственный редактор Wysiwyg (поскольку мне просто нужен параметр цвета, нет смысла использовать tinymce, trumbowyg или любую большую библиотеку).

Шаги для воспроизведения:

1. Открыть приложение здесь
2. Сначала выберите что-нибудь в редактируемом содержимом div
3. Нажать кнопку SetColor (выделенный текст меняет цвет)
4. Попробуйте ввести цвет в поле ввода, contenteditable теряет фокус, и нажатие кнопки теперь ничего не делает

Вот мой код (работает с использованием VueJs).

<template>
    <div>
        <div>
            Type color:
            <input type="text" v-model="color">
            <button class="btn btn-primary btn-sm" type="button" @click="setColor">SetColor</button>
        </div>

        <hr>

        <p>Select something below and click Setcolor button</p>
        <div class="card card-body" style="width:400px; height: 400px;" contenteditable="">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aspernatur, cupiditate dolorum ducimus earum excepturi
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                color: '#ff0000',
            }
        },
        methods: {
            setColor() {
                document.execCommand('styleWithCSS', false, true);
                document.execCommand('foreColor', false, this.color);
            }
        },
    }
</script>

Чтобы запустить код, перейдите по этой ссылке:

https://codesandbox.io/embed/my85v0kk59

Более раннее решение для SO заключается в«сохранить диапазон», а затем «восстановить диапазон».Проблема в том, что когда я делаю это, цветной ввод текста теряет фокус, а contenteditable получает фокус.Так что это тоже неосуществимо (потому что я хочу, чтобы цвет менялся, как только пользователь вводит что-то в цветной текстовый ввод).

Есть идеи, как это сделать?