The list bullet is not displayed properly

[zaqijr7]

1. Install Quil

npm install quill@2.0.2

3. Setup Quill in React

   
   import { forwardRef, useEffect, useLayoutEffect, useRef } from 'react';
   import Quill, { Range, Delta } from 'quill/core';
   import Toolbar from 'quill/modules/toolbar';
   import Snow from 'quill/themes/snow';
   import Bubble from 'quill/themes/bubble';
   import Bold from 'quill/formats/bold';
   import Italic from 'quill/formats/italic';
   import Header from 'quill/formats/header';
   import List from 'quill/formats/list';
   import Link from 'quill/formats/link';

import 'quill/dist/quill.snow.css'; import 'quill/dist/quill.core.css';

interface EditorProps { readOnly?: boolean; defaultValue?: Delta; onTextChange?: (_delta: Delta, _oldDelta: Delta, _source: string) => void; onSelectionChange?: ( _range: Range | null, _oldRange: Range | null, _source: string ) => void; }

Quill.register({ 'modules/toolbar': Toolbar, 'themes/snow': Snow, 'themes/bubble': Bubble, 'formats/bold': Bold, 'formats/italic': Italic, 'formats/header': Header, 'formats/list': List, 'formats/link': Link, });

const Editor = forwardRef<Quill | null, EditorProps>( ({ readOnly, defaultValue, onTextChange, onSelectionChange }, ref) => { const containerRef = useRef<HTMLDivElement | null>(null); const defaultValueRef = useRef<Delta | undefined>(defaultValue); const onTextChangeRef = useRef(onTextChange); const onSelectionChangeRef = useRef(onSelectionChange);

useLayoutEffect(() => {
  onTextChangeRef.current = onTextChange;
  onSelectionChangeRef.current = onSelectionChange;
}, [onTextChange, onSelectionChange]);

useEffect(() => {
  if (ref && typeof ref === 'object' && ref.current) {
    ref.current.enable(!readOnly);
  }
}, [ref, readOnly]);

useEffect(() => {
  const container = containerRef.current;
  if (!container) return;

  const editorContainer = container.appendChild(
    container.ownerDocument.createElement('div')
  );

  const quill = new Quill(editorContainer, {
    theme: 'snow',
    modules: {
      toolbar: [
        [{ header: [1, 2, false] }],
        ['bold', 'italic', 'underline'],
        [{ list: 'ordered' }, { list: 'bullet' }],
        ['link', 'image']
      ],
    }
  });

  if (ref && typeof ref === 'object') {
    ref.current = quill;
  }

  if (defaultValueRef.current) {
    quill.setContents(defaultValueRef.current);
  }

  quill.on(Quill.events.TEXT_CHANGE, (...args) => {
    if (onTextChangeRef.current) {
      onTextChangeRef.current(...args);
    }
  });

  quill.on(Quill.events.SELECTION_CHANGE, (...args) => {
    if (onSelectionChangeRef.current) {
      onSelectionChangeRef.current(...args);
    }
  });

  return () => {
    if (ref && typeof ref === 'object') {
      ref.current = null;
    }
    container.innerHTML = '';
  };
}, [ref]);

return <div ref={containerRef} id="editorku"></div>;

} );

Editor.displayName = 'Editor';

export default Editor;

Wrap in a component

import React, { useRef, useState } from 'react'; import Editor from './Editor'; import Quill, { Delta as Deltas, Range } from 'quill/core';

type RangeType = Range | null; type TextChangeType = { delta: Deltas; oldDelta: Deltas; source: string };

const Delta = Quill.import('delta');

const TextEditor: React.FC = () => { const [range, setRange] = useState(null); const [lastChange, setLastChange] = useState<TextChangeType | null>(null); const [readOnly, setReadOnly] = useState(false);

const quillRef = useRef<Quill | null>(null);

return (

setRange(range)} onTextChange={(delta: Deltas, oldDelta: Deltas, source: string) => setLastChange({ delta, oldDelta, source }) } />

); };

export default TextEditor;

5. Run code
7. Typing in quill text editor
8. Create list bullet

**Expected behavior**:
The expectation is show disc bullet in list

**Actual behavior**:
The displayed list contains both numbers and bullets.
<img width="763" alt="image" src="https://github.com/user-attachments/assets/4ba504de-de09-46e2-bfe6-9eafc2f67a20">

**Platforms**:
Chrome, Firefox, Mac Os Monterey

Include browser, operating system and respective versions

**Version**:

"quill": "2.0.2", "react": "^18.3.1",

[fipil]

Same here, using

    "ngx-quill": "^26.0.8",
    "quill": "^2.0.2",

in Angular 18 application.

[Z0dya]

same using: 

  "quill": "^2.0.2",
     "primevue": "^3.50.0",
        "vue": "^3.0.0"

[StanSkrivanek]

when click on <ul> in Quill editor is generated <ol>! How getSemanticHTML() will solve this wrong HTML tag? A bit confused with this. I have Svelte 5 project but IMO this issue is framework agnostic as it is IMO Quill core issue.