feat(list): add new extension-list package which packages all the list packages into a single package

.changeset/dirty-colts-shave.md

@@ -45,7 +45,7 @@ new Editor({
 
 ## Table repackaging
 
-Since we've moved the code of the table extensions to the `@tiptap/extension-table` package, you can remove the following packages from your project:
+Since we've moved the code out of the table extensions to the `@tiptap/extension-table` package, you can remove the following packages from your project:
 
 ```bash
 npm uninstall @tiptap/extension-table-header @tiptap/extension-table-cell @tiptap/extension-table-row

.changeset/seven-llamas-love.md

@@ -0,0 +1,118 @@
+---
+'@tiptap/extension-ordered-list': major
+'@tiptap/extension-bullet-list': major
+'@tiptap/extension-list-keymap': major
+'@tiptap/extension-list-item': major
+'@tiptap/extension-task-list': major
+---
+
+This adds all of the list packages to the `@tiptap/extension-list` package.
+
+## ListKit
+
+The `ListKit` export allows configuring all list extensions with one extension, and is the recommended way of using the list extensions.
+
+```ts
+import { ListKit } from '@tiptap/extension-list'
+
+new Editor({
+  extensions: [
+    ListKit.configure({
+      bulletList: {
+        HTMLAttributes: 'bullet-list'
+      },
+      orderedList: {
+        HTMLAttributes: 'ordered-list'
+      },
+      listItem: {
+        HTMLAttributes: 'list-item'
+      },
+      taskList: {
+        HTMLAttributes: 'task-list'
+      },
+      taskItem: {
+        HTMLAttributes: 'task-item'
+      },
+      listKeymap: {}
+    }),
+  ],
+})
+```
+
+## List repackaging
+
+Since we've moved the code out of the list extensions to the `@tiptap/extension-list` package, you can remove the following packages from your project:
+
+```bash
+npm uninstall @tiptap/extension-ordered-list @tiptap/extension-bullet-list @tiptap/extension-list-keymap @tiptap/extension-list-item @tiptap/extension-task-list
+```
+
+And replace them with the new `@tiptap/extension-list` package:
+
+```bash
+npm install @tiptap/extension-list
+```
+
+## Want to use the extensions separately?
+
+For more control, you can also use the extensions separately.
+
+### BulletList
+
+This extension adds a bullet list to the editor.
+
+Usage:
+
+```ts
+import { BulletList } from '@tiptap/extension-list'
+```
+
+### OrderedList
+
+This extension adds an ordered list to the editor.
+
+Usage:
+
+```ts
+import { OrderedList } from '@tiptap/extension-list'
+```
+
+### ListItem
+
+This extension adds a list item to the editor.
+
+Usage:
+
+```ts
+import { ListItem } from '@tiptap/extension-list'
+```
+
+### TaskList
+
+This extension adds a task list to the editor.
+
+Usage:
+
+```ts
+import { TaskList } from '@tiptap/extension-list'
+```
+
+### TaskItem
+
+This extension adds a task item to the editor.
+
+Usage:
+
+```ts
+import { TaskItem } from '@tiptap/extension-list'
+```
+
+### ListKeymap
+
+This extension adds better default keybindings for lists to the editor.
+
+Usage:
+
+```ts
+import { ListKeymap } from '@tiptap/extension-list'
+```

demos/src/Commands/Cut/React/index.jsx

@@ -1,6 +1,5 @@
 import './styles.scss'
 
-import ListItem from '@tiptap/extension-list-item'
 import { Color, TextStyle } from '@tiptap/extension-text-style'
 import { EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
@@ -37,20 +36,7 @@ const MenuBar = ({ editor }) => {
 
 export default () => {
   const editor = useEditor({
-    extensions: [
-      Color.configure({ types: [TextStyle.name, ListItem.name] }),
-      TextStyle.configure({ types: [ListItem.name] }),
-      StarterKit.configure({
-        bulletList: {
-          keepMarks: true,
-          keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
-        },
-        orderedList: {
-          keepMarks: true,
-          keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
-        },
-      }),
-    ],
+    extensions: [Color, TextStyle, StarterKit],
     content: `
       <h2>
         Hi there,

demos/src/Commands/InsertContent/React/index.jsx

@@ -2,7 +2,6 @@ import './styles.scss'
 
 import { Image } from '@tiptap/extension-image'
 import Link from '@tiptap/extension-link'
-import ListItem from '@tiptap/extension-list-item'
 import { Color, TextStyle } from '@tiptap/extension-text-style'
 import { EditorProvider, useCurrentEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
@@ -58,20 +57,7 @@ const MenuBar = () => {
   )
 }
 
-const extensions = [
-  Image,
-  Color.configure({ types: [TextStyle.name, ListItem.name] }),
-  TextStyle.configure({ types: [ListItem.name] }),
-  Link,
-  StarterKit.configure({
-    bulletList: {
-      keepMarks: true,
-    },
-    orderedList: {
-      keepMarks: true,
-    },
-  }),
-]
+const extensions = [Image, Color, TextStyle, Link, StarterKit]
 
 const content = ''
 

demos/src/Commands/SetContent/React/index.jsx

@@ -1,25 +1,12 @@
 import './styles.scss'
 
-import ListItem from '@tiptap/extension-list-item'
 import Mentions from '@tiptap/extension-mention'
-import { Color , TextStyle } from '@tiptap/extension-text-style'
+import { Color, TextStyle } from '@tiptap/extension-text-style'
 import { EditorProvider } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import React from 'react'
 
-const extensions = [
-  Color.configure({ types: [TextStyle.name, ListItem.name] }),
-  TextStyle.configure({ types: [ListItem.name] }),
-  StarterKit.configure({
-    bulletList: {
-      keepMarks: true,
-    },
-    orderedList: {
-      keepMarks: true,
-    },
-  }),
-  Mentions,
-]
+const extensions = [Color, TextStyle, StarterKit, Mentions]
 
 const content = ''
 

demos/src/Demos/CollaborationSplitPane/React/Editor.jsx

@@ -2,8 +2,7 @@ import CharacterCount from '@tiptap/extension-character-count'
 import Collaboration from '@tiptap/extension-collaboration'
 import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
 import Highlight from '@tiptap/extension-highlight'
-import TaskItem from '@tiptap/extension-task-item'
-import TaskList from '@tiptap/extension-task-list'
+import { TaskItem, TaskList } from '@tiptap/extension-list'
 import { EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import React, { useCallback, useEffect, useState } from 'react'

demos/src/Examples/CollaborativeEditing/React/index.jsx

@@ -5,8 +5,7 @@ import CharacterCount from '@tiptap/extension-character-count'
 import Collaboration from '@tiptap/extension-collaboration'
 import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
 import Highlight from '@tiptap/extension-highlight'
-import TaskItem from '@tiptap/extension-task-item'
-import TaskList from '@tiptap/extension-task-list'
+import { TaskItem, TaskList } from '@tiptap/extension-list'
 import { EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import React, { useCallback, useEffect, useState } from 'react'

demos/src/Examples/CollaborativeEditing/Vue/index.vue

@@ -27,8 +27,7 @@ import CharacterCount from '@tiptap/extension-character-count'
 import Collaboration from '@tiptap/extension-collaboration'
 import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
 import Highlight from '@tiptap/extension-highlight'
-import TaskItem from '@tiptap/extension-task-item'
-import TaskList from '@tiptap/extension-task-list'
+import { TaskItem, TaskList } from '@tiptap/extension-list'
 import StarterKit from '@tiptap/starter-kit'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 import * as Y from 'yjs'

demos/src/Examples/Default/Svelte/index.svelte

@@ -2,7 +2,7 @@
   import "./styles.scss";
 
   import { Color } from '@tiptap/extension-text-style'
-  import ListItem from '@tiptap/extension-list-item'
+  import { ListItem } from '@tiptap/extension-list'
   import { TextStyle } from '@tiptap/extension-text-style'
   import StarterKit from "@tiptap/starter-kit";
   import { Editor } from "@tiptap/core";

demos/src/Examples/Default/Vue/index.vue

@@ -119,7 +119,7 @@
 </template>
 
 <script>
-import ListItem from '@tiptap/extension-list-item'
+import { ListItem } from '@tiptap/extension-list'
 import { Color, TextStyle } from '@tiptap/extension-text-style'
 import StarterKit from '@tiptap/starter-kit'
 import { Editor, EditorContent } from '@tiptap/vue-3'

demos/src/Examples/StaticRendering/React/index.tsx

@@ -1,13 +1,11 @@
 import './styles.scss'
 
-import ListItem from '@tiptap/extension-list-item'
-import { Color, TextStyle } from '@tiptap/extension-text-style'
 import { EditorProvider, JSONContent, useCurrentEditor, useEditorState } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import { renderToHTMLString, renderToMarkdown, renderToReactElement } from '@tiptap/static-renderer'
 import React, { useState } from 'react'
 
-const extensions = [StarterKit, Color.configure({ types: [TextStyle.name, ListItem.name] }), TextStyle]
+const extensions = [StarterKit]
 
 const content = `
 <h2>
@@ -231,7 +229,6 @@ function MenuBar() {
         isBlockquote: ctx.editor.isActive('blockquote'),
         canUndo: ctx.editor.can().chain().focus().undo().run(),
         canRedo: ctx.editor.can().chain().focus().redo().run(),
-        isPurple: ctx.editor.isActive('textStyle', { color: '#958DF1' }),
       }
     },
   })
@@ -347,12 +344,6 @@ function MenuBar() {
         <button onClick={() => editor.chain().focus().redo().run()} disabled={!editorState.canRedo}>
           Redo
         </button>
-        <button
-          onClick={() => editor.chain().focus().setColor('#958DF1').run()}
-          className={editorState.isPurple ? 'is-active' : ''}
-        >
-          Purple
-        </button>
       </div>
     </div>
   )

demos/src/Examples/Tasks/React/index.jsx

@@ -1,9 +1,8 @@
 import './styles.scss'
 
 import Document from '@tiptap/extension-document'
+import { TaskItem, TaskList } from '@tiptap/extension-list'
 import Paragraph from '@tiptap/extension-paragraph'
-import TaskItem from '@tiptap/extension-task-item'
-import TaskList from '@tiptap/extension-task-list'
 import Text from '@tiptap/extension-text'
 import { EditorContent, useEditor } from '@tiptap/react'
 import React from 'react'

demos/src/Examples/Tasks/Vue/index.vue

@@ -4,9 +4,8 @@
 
 <script>
 import Document from '@tiptap/extension-document'
+import { TaskItem, TaskList } from '@tiptap/extension-list'
 import Paragraph from '@tiptap/extension-paragraph'
-import TaskItem from '@tiptap/extension-task-item'
-import TaskList from '@tiptap/extension-task-list'
 import Text from '@tiptap/extension-text'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 

demos/src/Experiments/All/Vue/index.vue

@@ -101,7 +101,6 @@
 <script>
 import Blockquote from '@tiptap/extension-blockquote'
 import Bold from '@tiptap/extension-bold'
-import BulletList from '@tiptap/extension-bullet-list'
 import Code from '@tiptap/extension-code'
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
 import Document from '@tiptap/extension-document'
@@ -112,16 +111,13 @@ import HorizontalRule from '@tiptap/extension-horizontal-rule'
 import Image from '@tiptap/extension-image'
 import Italic from '@tiptap/extension-italic'
 import Link from '@tiptap/extension-link'
-import ListItem from '@tiptap/extension-list-item'
+import { BulletList, ListItem, OrderedList, TaskItem, TaskList } from '@tiptap/extension-list'
 import Mention from '@tiptap/extension-mention'
-import OrderedList from '@tiptap/extension-ordered-list'
 import Paragraph from '@tiptap/extension-paragraph'
 import Strike from '@tiptap/extension-strike'
 import Subscript from '@tiptap/extension-subscript'
 import Superscript from '@tiptap/extension-superscript'
 import { TableKit } from '@tiptap/extension-table'
-import TaskItem from '@tiptap/extension-task-item'
-import TaskList from '@tiptap/extension-task-list'
 import Text from '@tiptap/extension-text'
 import TextAlign from '@tiptap/extension-text-align'
 import { Color, TextStyle } from '@tiptap/extension-text-style'

demos/src/Experiments/IsolatingClear/React/index.jsx

@@ -1,6 +1,6 @@
 import './styles.scss'
 
-import ListItem from '@tiptap/extension-list-item'
+import { ListItem } from '@tiptap/extension-list'
 import { Color, TextStyle } from '@tiptap/extension-text-style'
 import { EditorContent, Node, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'

demos/src/Experiments/MultipleEditors/Vue/index.vue

@@ -33,9 +33,8 @@ import Bold from '@tiptap/extension-bold'
 import Collaboration from '@tiptap/extension-collaboration'
 import Document from '@tiptap/extension-document'
 import Heading from '@tiptap/extension-heading'
+import { TaskItem, TaskList } from '@tiptap/extension-list'
 import Paragraph from '@tiptap/extension-paragraph'
-import TaskItem from '@tiptap/extension-task-item'
-import TaskList from '@tiptap/extension-task-list'
 import Text from '@tiptap/extension-text'
 import { Dropcursor } from '@tiptap/extensions'
 import { Editor, EditorContent } from '@tiptap/vue-3'

demos/src/Extensions/Focus/React/index.jsx

@@ -1,9 +1,8 @@
 import './styles.scss'
 
-import BulletList from '@tiptap/extension-bullet-list'
 import Code from '@tiptap/extension-code'
 import Document from '@tiptap/extension-document'
-import ListItem from '@tiptap/extension-list-item'
+import { BulletList, ListItem } from '@tiptap/extension-list'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import { Focus } from '@tiptap/extensions'

demos/src/Extensions/Focus/Vue/index.vue

@@ -3,10 +3,9 @@
 </template>
 
 <script>
-import BulletList from '@tiptap/extension-bullet-list'
 import Code from '@tiptap/extension-code'
 import Document from '@tiptap/extension-document'
-import ListItem from '@tiptap/extension-list-item'
+import { BulletList, ListItem } from '@tiptap/extension-list'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import { Focus } from '@tiptap/extensions'

demos/src/Extensions/ListKeymap/React/index.jsx

@@ -1,9 +1,7 @@
 import './styles.scss'
 
-import BulletList from '@tiptap/extension-bullet-list'
 import Document from '@tiptap/extension-document'
-import ListItem from '@tiptap/extension-list-item'
-import ListKeymap from '@tiptap/extension-list-keymap'
+import { BulletList, ListItem, ListKeymap } from '@tiptap/extension-list'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import { EditorContent, useEditor } from '@tiptap/react'