Editor breaks when working with semantic HTML

[jtuchel]

Thanks for this awesome project, really helps a lot :)

I created a very small wrapper component to work with vue-quilly ( playground => https://stackblitz.com/edit/vitejs-vite-ebyuz3?file=src%2FRichTextField.vue )

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import type { QuillOptions } from 'quill';
import Quill from 'quill';
import { QuillyEditor } from 'vue-quilly';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';

const props = defineProps<{
  value: string;
}>();

const emit = defineEmits<{
  (e: 'change', value: string): void;
  (e: 'focus-change', isFocused: boolean): void;
}>();

const quillEditor = ref<InstanceType<typeof QuillyEditor>>();

let quill: Quill | null = null;

const quillEditorOptions = computed((): QuillOptions => {
  return {
    // other options based on props
    modules: {
      toolbar: [
        [
          'bold',
          'italic',
          'underline',
          { list: 'ordered' },
          { list: 'bullet' },
        ],
      ],
    },
    theme: 'snow',
  };
});

onMounted(() => {
  quill = quillEditor.value?.initialize(Quill)!;
});
</script>

<template>
  <!-- Other HTML e.g. Tooltip, Hint, ... -->
  <QuillyEditor
    ref="quillEditor"
    :model-value="value"
    :options="quillEditorOptions"
    @update:modelValue="
      (newContent) => {
        emit('change', newContent);
      }
    "
    @selection-change="() => { emit('focus-change', quill!.hasFocus()); }"
  />
</template>

Everything works as expected. But I need the semantic HTML so this issue targets

• the PR fix: use getSemanticHTML() instead of root.innerHTML #8
• the documentation commit 882bb9e#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R160

So when changing the update event to ( playground => https://stackblitz.com/edit/vitejs-vite-gej6nb?file=src%2FRichTextField.vue )

   @update:modelValue="
      (newContent) => {
        emit('change', quill!.getSemanticHTML());
      }
    "

the Editor breaks. Have a look at the playground, try to jump into a new line by pressing the enter key. You should see that the cursor jumps to the beginning of the line instead of inserting a new line.

Any chance to fix this?

[alekswebnet]

@jtuchel
The issue is fixed in the latest release: https://github.com/alekswebnet/vue-quilly/releases/tag/v1.1.0.
Now, you can choose the semantic HTML model with :is-semantic-html-model="true" property.
I've update the documentation.
Thanks for informing!