(Firefox) Custom buttons not working and any input prints an error

[g1lg1l]

Hi @antoniandre ,
First of all this is an amazing package, love it, keep up the good work!

I'm having some issues making this work as expected tho!

Here is my implementation in vue 3 RichEditor.vue

<script setup>
import { ref } from 'vue'

import Richer from 'richer-than-rich'
import 'richer-than-rich/dist/style.css'

const props = defineProps({
  placeholder: {
    type: String,
    default: 'Type anything...',
  },
})
const emit = defineEmits(['update:modelValue'])
const modelValue = defineModel()
const darkMode = ref(true)
const toggleDarkMode = (e) => {
  darkMode.value = !darkMode.value
}
</script>
<template>
  <Richer
    class="w-full"
    :placeholder="placeholder"
    :darkMode="darkMode"
    :buttons="[
      'bold',
      'italic',
      'underline',
      { name: 'dark', label: 'ToggleTheme', icon: 'i-moon', action: toggleDarkMode },
    ]"
  />
</template>

the custom buttons doen't work it breaks and gives this error as well

Uncaught TypeError: t is undefined
    B richer.es.js:33
    C richer.es.js:170
    w richer.es.js:165
    onClick richer.es.js:202
    callWithErrorHandling runtime-core.esm-bundler.js:195
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:202
    invoker runtime-dom.esm-bundler.js:693
    addEventListener runtime-dom.esm-bundler.js:644
    patchEvent runtime-dom.esm-bundler.js:662
    patchProp runtime-dom.esm-bundler.js:739

Also I get this error on every action i do ( focus, type, button clicks, the editor seems to work but the error is printed on every action)

Uncaught TypeError: i.baseNode is undefined
    highlightButtons richer.es.js:185
    highlightButtons richer.es.js:179
    M richer.es.js:283
    callWithErrorHandling runtime-core.esm-bundler.js:195
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:202
    invoker runtime-dom.esm-bundler.js:693
    addEventListener runtime-dom.esm-bundler.js:644
    patchEvent runtime-dom.esm-bundler.js:662
    patchProp runtime-dom.esm-bundler.js:739

Am I missing something here!?

Deps
"vue": "^3.4.30",
"vite": "^5.3.1",
"richer-than-rich": "^0.4.3"

[antoniandre]

Hi @gilnd thanks for the feedback.
Mmm interesting, I copied exactly the same code on a new Vue 3 + Vite project and it works all fine.
I'll spin up a Stackblitz for you shortly

[antoniandre]

Here https://stackblitz.com/edit/richer-than-rich?file=src%2Fcomponents%2FHelloWorld.vue.
Your deps look good too, so like this everything should work. do you have a brand new project or it alreadyhas lots of things that could potentially conflict?
I suggest you try in a new project with npm create vue@latest and paste the same code in, which is what the Stackblitz has.
If this works all fine, you can then try to comment some parts of the code and see
Let me know how it goes!

[g1lg1l]

Hey @antoniandre, ty for the response!
It appears to be the worst kind of issues, a browser compatibility issue, i tried your stackblitz and i have the same issue on firefox!
In chrome and safari however it just works fine!

Not sure why this is happening on firefox! (maybe its some of my extensions!?)
Currently using firefox 130.0 (64-bit)

• Safari (everything works fine)

Screen.Recording.2024-09-16.at.09.52.18.mov

• Chrome (some issue with other buttons but seems to work fine)

chrome.mov

• Firefox (doesn't work properly)

firefox.mov

Every recording is from the stackblitz!

Tell me if i can help in other ways!