fastmail / Squire

The rich text editor for arbitrary HTML.
MIT License
4.75k stars 406 forks source link

Can not make list for Chinese characters entered via input method on safari #458

Open shadowzeng opened 6 months ago

shadowzeng commented 6 months ago

My code (Vue component)

<template>
  <div>
    <div ref="editor"></div>
    <button @click="makeList">make list</button>
  </div>
</template>

<script>
import Squire from 'squire-rte';

export default {
  components: {},
  data () {
    return {
      editor: null
    };
  },
  mounted() {
    this.editor = new Squire(this.$refs.editor);
  },
  methods: {
    makeList() {
      this.editor.makeUnorderedList();
    }
  }
}
</script>

<style scoped>

</style>

it works on chrome CleanShot 2024-02-28 at 14 52 21

but not on safari CleanShot 2024-02-28 at 14 51 29

neilj commented 6 months ago

So the issue seems to be that Safari is stripping the <div> (or other block tag) around the content when it replaces the latin characters with the Chinese one. This means when we go to convert the block to a list, we can't find a block. Interestingly, it works fine if there's at least one other sibling block present. So if you hit Enter to create a new line and then tried, it works fine.

I'd say this is a Safari bug, and I don't really have a good solution right now, sorry.