Typing "2. " produces a numbered list starting with 1.

[poshest]

1. Put the caret on a new (empty) line
2. Ensure there's no numbered list in the paragraph immediately before the caret position
3. Type "2. "
   RESULT: get a new numbered list starting with 1.
   EXPECTED: not sure, but probably the easiest way is the Google docs and Word way... leave it as plain text and do not make it into a numbered list at all.

Possibly related to #829, #979 and #2221.

USE CASES: yes, I agree, MOST of the time you don't want a list to start with the number 2, but I come across this in the following cases

1. An existing numbered list is broken by some other block level element (often I want an image to show as part of my bulleted list, and because of Support for shift + enter #252 I can't use Shift + Enter I can't keep it as part of the same "block"... and I don't want the image to get its own number because it's part of the previous item)... so you go to continue the list below and quill keeps changing the numbering to "1. "

2. You have some plain text numbered list, that eg, you pasted into quill and it wasn't "auto-numbered" already, and you want to simply continue that list...

[chinanderm]

Just ran into this as well! I think you're proposal of "just leave it alone" is a good one.

[bjornhansen]

@poshest - I run into your first use case all the time. It'd be super helpful to have a way to put block-level elements between numbered list items.

[ghost]

Hi, there is any solution for this?

[vladislavkoz]

Any updates??

[poshest]

What do you suggest @jhchen?

[KhadeevKamil]

import Quill from 'quill';
import Delta from 'quill-delta';
import { get } from 'min-dash';

const GenericRichTextEditor = (props) => {
  const { field, editField, path } = props;
  const uniqueEditorId = `${field.id}-${path[0]}`;

  const quillRef = useRef(null);
  const quillInstanceRef = useRef(null);
  const fontSizeArr = [ '8px', '10px', '12px', '14px', '16px', '20px', '24px', '32px', '42px', '54px', '68px', '84px', '98px' ];
  var Size = Quill.import('attributors/style/size');
  Size.whitelist = fontSizeArr;
  Quill.register(Size, true);

  const handleSpaceKeyPress = useCallback((range, context) => {
    const quill = quillInstanceRef.current;
    if (!range || !quill) return true; // Proceed with Quill's default space handling

    const [ line, offset ] = quill.getLine(range.index);
    if (!line || !line.domNode.textContent) return true; // Proceed with Quill's default space handling

    const text = line.domNode.textContent.substring(0, offset);
    const match = text.match(/^(\d+)\.$/);
    if (match) { // User typed a number followed by a dot
      const number = parseInt(match[1], 10);

      // Prevent Quill's default list creation behavior
      quill.deleteText(range.index - text.length, text.length, 'user');
      quill.insertText(range.index - text.length, `${number}. `, 'user');
      quill.insertText(range.index + 1, ' ', 'user'); // insert space after the number
      quill.setSelection(range.index + 2); // Move cursor after the inserted space
      return false; // Prevent Quill's default handler
    }

    return true; // Proceed with Quill's default space handling
  }, []);


  const initiatQuill = useCallback(() => {
    if (!quillRef.current) return;

    if (!quillInstanceRef.current) {
      const quill = new Quill(quillRef.current, {
        theme: 'snow',
        modules: {
          toolbar: [
            [ { 'size': fontSizeArr } ],
            [ 'bold' ],
            [ 'italic' ],
            [ 'underline' ],
            [ { 'align': [] } ],
            [ { list: 'ordered' } ],
            [ { list: 'bullet' } ],
          ],
        },
      });

      quill.keyboard.bindings[32] = [ { // 32 is the key code for Space
        key: 32,
        handler: handleSpaceKeyPress
      } ];

      quillInstanceRef.current = quill;
    } else {
      quillInstanceRef.current.off('text-change');
    }

    const quill = quillInstanceRef.current;
    const html = get(field, path, '');
    quill.clipboard.dangerouslyPasteHTML(html);

    setTimeout(() => {
      const currentFormat = quill.getFormat();
      if (currentFormat.size) {
        quill.format('size', currentFormat.size);
      } else {
        quill.format('size', '14px');
      }
    }, 0);

    const handleChange = (delta, oldDelta, source) => {
      if (source === 'user') {
        if (quill.root.innerHTML === '<p><br></p>') {
          editField(field, path, '');
        } else {
          editField(field, path, quill.root.innerHTML);
        }
      }
    };
    quill.on('text-change', handleChange);

    return () => {
      quill.off('text-change', handleChange);
      quillInstanceRef.current = null;
      quillRef.current = null;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [ field ]);

  useEffect(() => {

    initiatQuill();
  }, [ initiatQuill ]);

  return (
    <div ref={ quillRef } className="quill-editor-container" id={ uniqueEditorId }></div>
  );
};

export default GenericRichTextEditor;

Here you can find my solution for this problem. Pay attention for handleSpaceKeyPress
It's work for me

[benbro]

Related #3953