How can I allow multi-line code blocks inside a LI (List Item) ?

[cnicodeme]

Hey! It seems that under the current form, it is not possible to have a multi-line code block inside a LI (ol/ul).

Here's a quick example (using the first CodeSandbox template I found that uses Vue2 but it's the same with Vue3):

<template>
  <div id="app">
      <div v-if="editor" style="position: relative; border: 1px solid red; margin: 5px; padding: 5px">
          <editor-content :editor="editor" />
      </div>
  </div>
</template>

<script>
import { Editor, EditorContent } from "@tiptap/vue-2";
import StarterKit from "@tiptap/starter-kit";
import CodeBlock from '@tiptap/extension-code-block'

export default {
  name: "App",
  components: {
    EditorContent,
  },
  data: () => ({
    editor: null,
  }),
  mounted() {
    this.editor = new Editor({
      content: `<p>TipTap Content: ${this.value}</p><ul><li>First entry</li></ul>`,
      extensions: [StarterKit, CodeBlock],
    });
  },

  beforeDestroy() {
    this.editor.destroy();
  },
};
</script>

As long as you are in a <li />, doing three backticks doesn't trigger the code block and hitting enter creates a new <li />.

How can I set up the Code Blocks to work inside the <li /> ?

Thanks in advance.

[nperez0111]

A list item technically does allow code block content, but it enforces that a paragrah is the first element:

tiptap/packages/extension-list-item/src/list-item.ts

Line 41 in b941eea

content: 'paragraph block*',

So, technically you could do a soft break (shift + enter) and have a code block as the second piece of content. But, you'll probably just want to extend this extension to just be block+ which would force one or more block elements (using paragraph as a default)

[cnicodeme]

Thank you for your reply. This almost work in the sense that the code block is indeed created, but when I hit "enter" inside that code block, the ListItem takes ownership of the keyboard and creates a new list item (instead of the code block having the enter).

I tried playing with priority with no luck so far.

Do you have an idea on how to fix that?

Thanks !