Clicking on text triggers button

[jb-alvarado]

Hello, I have here a strange behaviour: When I click on a text, it triggers the first formatting button. When I add a empty button (<button></button>), nothing get triggered, but then the text window get no ProseMirror-focused class.

Do you have any idea what I'm doing wrong?

My component looks like:

<template>
    <div>
        <div v-if="editor">
            <div class="xl:join">
                <button
                    :title="$t('editor.bold')"
                    :disabled="!editor.can().chain().focus().toggleBold().run()"
                    class="join-item btn btn-sm"
                    :class="{ 'btn-accent': editor.isActive('bold') }"
                    @click="editor?.chain().focus().toggleBold().run()"
                >
                    <Icon name="bi:type-bold" />
                </button>
                <button
                    :title="$t('editor.italic')"
                    :disabled="!editor.can().chain().focus().toggleItalic().run()"
                    class="join-item btn btn-sm"
                    :class="{ 'btn-accent': editor.isActive('italic') }"
                    @click="editor?.chain().focus().toggleItalic().run()"
                >
                    <Icon name="bi:type-italic" />
                </button>
            </div>
        </div>
        <div class="w-full md:h-[calc(100vh-356px)] overflow-auto bg-base-200 textarea textarea-bordered">
            <TiptapEditorContent
                :editor="editor"
                class="w-full rounded bg-inherit min-h-[95%] prose max-w-none prose-img:!mt-1 prose-img:!mb-2 cursor-text"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import Link from '@tiptap/extension-link'
import { history } from '@tiptap/pm/history'
import Underline from '@tiptap/extension-underline'

Link.configure({
    openOnClick: 'whenNotEditable',
})

const emit = defineEmits(['updateContent'])

const props = defineProps({
    content: {
        type: String,
        default: '',
    },
})

const { content } = toRefs(props)

const editor = useEditor({
    content: content.value,
    extensions: [Link, TiptapStarterKit, Underline],
    onUpdate: () => {
        emit('updateContent', editor.value?.getHTML())
    },
})

watch([content], () => {
    if (editor.value?.getHTML() === content.value) {
        return
    }

    editor.value?.commands.setContent(content.value, false)
    editor.value?.unregisterPlugin('history')
    editor.value?.registerPlugin(history())
})

onBeforeUnmount(() => {
    unref(editor)?.destroy()
})
</script>

https://github.com/modbender/nuxt-tiptap-editor/assets/2212056/b56cfc65-156e-4fca-a04e-e1a0aa1337f9

[modbender]

So I'm guessing the problem here is the value of editor.isActive('bold') is flickering when you click on input (EditorContent).

I'll soon try it be myself and test it. Just not getting enough time.

[jb-alvarado]

Thanks @modbender for your quick response! But when I remove all :class="{ 'btn-accent': editor.isActive('...') }" the problem still exists. I don't know if you see it in the screen record, but when I click on a selected word, the selection become bold. When my buttons start not with the bold button, but with the italic, then the clicking on a selection makes the selection italic.

I wonder why clicking in the editor triggers any event from the buttons. Your example from stackblitz don't have this problem. But when I copy your component code to my code again I have this problem.

[modbender]

Could you try removing :disabled="!editor.can().chain().focus().toggleBold().run()"

[jb-alvarado]

No different. I will see if I can create a test project on codesandbox tomorrow.

[jb-alvarado]

Ok I find out the problem. My TiptapEditor component was surrounded by a label:

<label class="form-control w-full mt-4">
    <div class="label">
        <span class="label-text text-base font-bold">{{ $t('linkContent') }}</span>
    </div>
    <TiptapEditor :content="selectedPage.content" @update-content="updateContent" />
</label>

Removing the label fixed the issue.

Sorry for taking your time!

[modbender]

No problem!