Using BulletList and OrderedList with shift+enter

[BRxBS]

I had to change the behavior of Enter to make it run a function (this not a option, it has to be like this). Because of this, neither the bullet list nor the ordered list are working properly.
What is happening is that when I press Shift+Enter to break to a new line, it does not give me a new li as it does when just pressing Enter (in normal circumstances).
I've tried a lot of things to make the line break give me a new li, but nothing has helped.

const MenuBar = ({ editor }) => {
  return (

    <>
      <div className='menu-tiptap'>
       <button
          onClick={(e) => {
            e.preventDefault(); 
            editor.chain().focus().toggleBulletList().run()}}
          className={editor.isActive('bulletList') ? 'is-active' : ''}
        >  <RiListUnordered/>
        </button>

        <button
          onClick={(e) => {
            e.preventDefault(); 
            editor.chain().focus().toggleOrderedList().run()}}
          className={editor.isActive('orderedList') ? 'is-active' : ''}
        > <RiListOrdered2/>
        </button>
      </div>   
    </>
  )
}

const getExtensions = (menu, postWithEnter,) => {
  let extensions = [
    StarterKit,
    BulletList,
    OrderedList,
    Heading.configure({
      levels: [1, 2, 3],
    }),
  ];

  if (menu) {
    extensions.push(Mention.configure({
      HTMLAttributes: {
        class: 'mention',
      },
      suggestion,
    }));
  }

  if (postWithEnter) {
    extensions.push(Extension.create({
      addKeyboardShortcuts() {
        return {
          Enter: () => {
            const button = document.getElementById('submit-button');
            if (button) {
              button.click();
    }
            return true
          },
          'Shift-Enter': () => {
            return false
          }, }  }, }));}
  return extensions;
}

const Tiptap = ({setContent, menu, postWithEnter, ) => {
  const editor = useEditor({
    extensions: getExtensions(menu, postWithEnter, ),
    content: '<p> </p>',
    onUpdate: ({editor}) => {  
      const text = editor.getHTML();
      setContent(text);
    },
  });

  const clearContent = () => {
    if (editor && postWithEnter) {
      editor.commands.clearContent();
    }
  }
  

  useEffect(() => {
    const button = document.getElementById('submit-button');
    if (button && postWithEnter) {
      button.addEventListener('click', clearContent);
    }
    
    return () => {
      if (button && postWithEnter) {
        button.removeEventListener('click', clearContent);
      }
    }
  }, [editor, postWithEnter]); 


  if (!editor) {
    return null
  }

  return (
    <div className='container-tiptap'>
        <EditorContent editor={editor} /> 

        {menu ?      
          <div className='wrap-menu-tiptap'>
            <MenuBar editor={editor}/>
          </div> :  <></>}
 
    </div>
  )
}

export default Tiptap

[sinameraji]

facing the same issue, curious if you managed to get it solved after all?

[guanriyue]

Have you tried adjusting the ListItem.priority value? By default, it’s set to 100, but you might try setting it slightly higher, like 101.

Additionally, you don’t always need addKeyboardShortcuts.Enter to return true. It should return true only when the shortcut is meant to trigger. From the code you provided, it appears that if no button is found, it should return false.

[sinameraji]

@guanriyue this is my code and i cant get it to work. any thoughts?

const editor = useEditor({
        extensions: [
            StarterKit,
            ListItem.extend({
                priority: 1000,
                addKeyboardShortcuts() {
                    return {
                        'Shift-Enter': () => {
                            if (this.editor.isActive('bulletList') || this.editor.isActive('orderedList')) {
                                this.editor.commands.splitListItem('listItem');
                                return true;
                            }
                            return false;
                        }
                    }
                }
            }),
            Underline,
            Link,
            Placeholder.configure({placeholder: 'Your comment'})
        ],
        content: ``,
        immediatelyRender: false,
        onUpdate: ({editor}) => {
            setFormValue(editor.getHTML().trim());
        },
        editorProps: {
            handleKeyDown: (view, event) => {
                // Handle Enter without Shift
                if (event.key === 'Enter' && !event.shiftKey) {
                    event.preventDefault();
                    if (formValue.trim()) {
                        // Trigger the same form submission as clicking the button
                        formRef.current?.requestSubmit();
                    }
                    return true;
                }
                return false;
            },
        },
    });

[guanriyue]

There are a couple of issues with your code:

1. If you want to customize listItem, make sure to exclude it from the starterKit.
2. Unless absolutely necessary, avoid setting a very large priority value. 101, 102, or 201 should be enough. Just a reminder, tiptap by default sets the priority of paragraph elements to 1000.

I tried the following code, and it works as expected. Let me know if you encounter any issues.

import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Underline from "@tiptap/extension-underline";
import ListItem from "@tiptap/extension-list-item";
import Placeholder from "@tiptap/extension-placeholder";
import Link from "@tiptap/extension-link";
import { useState, useRef } from "react";

export default function App() {
  const [text, setText] = useState("");
  const formRef = useRef(null);

  const editor = useEditor({
    extensions: [
      StarterKit.configure({
        // When using Starterkit, be sure to configure the unnecessary Extension to false
        listItem: false,
      }),
      ListItem.extend({
        priority: 101,
        addKeyboardShortcuts() {
          return {
            "Shift-Enter": () => this.editor.commands.splitListItem(this.name),
            ////
            //// Don't forget these two commands of the parent
            Tab: () => this.editor.commands.sinkListItem(this.name),
            "Shift-Tab": () => this.editor.commands.liftListItem(this.name),
          };
        },
      }),
      Underline,
      Link,
      Placeholder.configure({ placeholder: "Your comment" }),
    ],
    content: `<ul><li><p>12345</p></li><li><p>2345</p></li><li><p>1234</p></li></ul>`,
    immediatelyRender: false,
    onUpdate: ({ editor }) => {
      // setFormValue(editor.getHTML().trim());
    },
    editorProps: {
      handleKeyDown: (view, event) => {
        // Handle Enter without Shift
        if (event.key === "Enter" && !event.shiftKey) {
          event.preventDefault();
          if (formRef.current) {
            // Trigger the same form submission as clicking the button
            formRef.current.requestSubmit();
          }
          return true;
        }
        return false;
      },
    },
  });

  return (
    <div className="App">
      <h1>Text Editor</h1>
      <form
        ref={formRef}
        onSubmit={(e) => {
          e.preventDefault();
          console.log(`submit form`);
        }}
      >
        {/** some input */}
      </form>
      <EditorContent editor={editor} />
    </div>
  );
}

[guanriyue]

codesandbox
https://codesandbox.io/p/sandbox/react-tiptap-text-editor-kmtvpv