test: update all demos to use the new list extension

ueberdosis · Jan 27, 2025 · 01ab8b4 · 01ab8b4
1 parent 263d7a6
commit 01ab8b4
Show file tree

Hide file tree

Showing 28 changed files with 29 additions and 104 deletions.
diff --git a/demos/src/Commands/Cut/React/index.jsx b/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,

diff --git a/demos/src/Commands/InsertContent/React/index.jsx b/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 = ''
 

diff --git a/demos/src/Commands/SetContent/React/index.jsx b/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 = ''
 

diff --git a/demos/src/Demos/CollaborationSplitPane/React/Editor.jsx b/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'

diff --git a/demos/src/Examples/CollaborativeEditing/React/index.jsx b/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'

diff --git a/demos/src/Examples/CollaborativeEditing/Vue/index.vue b/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'

diff --git a/demos/src/Examples/Default/Svelte/index.svelte b/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";

diff --git a/demos/src/Examples/Default/Vue/index.vue b/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'

diff --git a/demos/src/Examples/StaticRendering/React/index.tsx b/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>
   )

diff --git a/demos/src/Examples/Tasks/React/index.jsx b/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'

diff --git a/demos/src/Examples/Tasks/Vue/index.vue b/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'
 

diff --git a/demos/src/Experiments/All/Vue/index.vue b/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'

diff --git a/demos/src/Experiments/IsolatingClear/React/index.jsx b/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'

diff --git a/demos/src/Experiments/MultipleEditors/Vue/index.vue b/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'

diff --git a/demos/src/Extensions/Focus/React/index.jsx b/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'

diff --git a/demos/src/Extensions/Focus/Vue/index.vue b/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'

diff --git a/demos/src/Extensions/ListKeymap/React/index.jsx b/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'

diff --git a/demos/src/Nodes/BulletList/React/index.jsx b/demos/src/Nodes/BulletList/React/index.jsx
@@ -1,8 +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 { BulletList, ListItem } from '@tiptap/extension-list'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import { EditorContent, useEditor } from '@tiptap/react'

diff --git a/demos/src/Nodes/BulletList/Vue/index.vue b/demos/src/Nodes/BulletList/Vue/index.vue
@@ -33,9 +33,8 @@
 </template>
 
 <script>
-import BulletList from '@tiptap/extension-bullet-list'
 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 { Editor, EditorContent } from '@tiptap/vue-3'

diff --git a/demos/src/Nodes/ListItem/React/index.jsx b/demos/src/Nodes/ListItem/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 OrderedList from '@tiptap/extension-ordered-list'
+import { BulletList, ListItem, OrderedList } from '@tiptap/extension-list'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import { EditorContent, useEditor } from '@tiptap/react'

diff --git a/demos/src/Nodes/ListItem/Vue/index.vue b/demos/src/Nodes/ListItem/Vue/index.vue
@@ -39,10 +39,8 @@
 </template>
 
 <script>
-import BulletList from '@tiptap/extension-bullet-list'
 import Document from '@tiptap/extension-document'
-import ListItem from '@tiptap/extension-list-item'
-import OrderedList from '@tiptap/extension-ordered-list'
+import { BulletList, ListItem, OrderedList } from '@tiptap/extension-list'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import { Editor, EditorContent } from '@tiptap/vue-3'

diff --git a/demos/src/Nodes/OrderedList/React/index.jsx b/demos/src/Nodes/OrderedList/React/index.jsx
@@ -1,8 +1,7 @@
 import './styles.scss'
 
 import Document from '@tiptap/extension-document'
-import ListItem from '@tiptap/extension-list-item'
-import OrderedList from '@tiptap/extension-ordered-list'
+import { ListItem, OrderedList } from '@tiptap/extension-list'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import { EditorContent, useEditor } from '@tiptap/react'

diff --git a/demos/src/Nodes/OrderedList/Vue/index.vue b/demos/src/Nodes/OrderedList/Vue/index.vue
@@ -34,8 +34,7 @@
 
 <script>
 import Document from '@tiptap/extension-document'
-import ListItem from '@tiptap/extension-list-item'
-import OrderedList from '@tiptap/extension-ordered-list'
+import { ListItem, OrderedList } from '@tiptap/extension-list'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import { Editor, EditorContent } from '@tiptap/vue-3'

diff --git a/demos/src/Nodes/TaskItem/React/index.jsx b/demos/src/Nodes/TaskItem/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'

diff --git a/demos/src/Nodes/TaskItem/Vue/index.vue b/demos/src/Nodes/TaskItem/Vue/index.vue
@@ -34,9 +34,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'
 

diff --git a/demos/src/Nodes/TaskList/React/index.jsx b/demos/src/Nodes/TaskList/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'

diff --git a/demos/src/Nodes/TaskList/Vue/index.vue b/demos/src/Nodes/TaskList/Vue/index.vue
@@ -34,9 +34,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'
 

diff --git a/demos/vite.config.ts b/demos/vite.config.ts
@@ -30,6 +30,7 @@ const getPackageDependencies = () => {
         name === 'extension-text-style' ||
         name === 'extension-table' ||
         name === 'extensions' ||
+        name === 'extension-list' ||
         name === 'react' ||
         name === 'vue-2' ||
         name === 'vue-3'