【Tiptap】如何使用 ordered list?

You're very close! The most common reason for a Tiptap extension not working after installation is forgetting to add it to the extensions array when you initialize your editor.

Installing @tiptap/extension-ordered-list only makes the package available in your node_modules. You still need to explicitly tell your Tiptap editor instance to use it.

Also, for lists to work correctly, you typically need the ListItem extension as well, which is usually included if you're using StarterKit. If not using StarterKit, you'd need to add Paragraph, Document, Text, ListItem, and BulletList (if you want both types of lists).

Here's how to fix it:

1. Import the OrderedList extension (and ListItem if not using StarterKit)

import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import OrderedList from '@tiptap/extension-ordered-list';
// If not using StarterKit, you'd also need:
// import ListItem from '@tiptap/extension-list-item';
// import Paragraph from '@tiptap/extension-paragraph';
// import Document from '@tiptap/extension-document';
// import Text from '@tiptap/extension-text';

2. Add it to your extensions array when initializing the editor:

This is the crucial step.

import React from 'react';
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import OrderedList from '@tiptap/extension-ordered-list';
// Assuming ListOrdered is an icon component you have
import { ListOrdered } from 'lucide-react'; // Example, adjust based on your icon library

const MyTiptapEditor = () => {
  const editor = useEditor({
    extensions: [
      // StarterKit includes Document, Paragraph, Text, ListItem, BulletList, OrderedList, etc.
      // If you use StarterKit, you can configure its orderedList behavior directly.
      StarterKit.configure({
        orderedList: {
          keepMarks: true, // Optional: keep text formatting (bold, italic) when toggling list
          keepAttributes: false, // Optional: keep custom attributes on list items
        },
        // If you want to disable StarterKit's default OrderedList and add your own configured one:
        // orderedList: false, // disable StarterKit's default
        // Then add OrderedList below as a separate extension
      }),

      // If you are NOT using StarterKit, or you disabled StarterKit's orderedList,
      // you MUST add OrderedList, ListItem, Paragraph, Document, and Text explicitly:
      // Document,
      // Paragraph,
      // Text,
      // ListItem, // Essential for lists
      // OrderedList.configure({
      //   HTMLAttributes: {
      //     class: 'my-custom-ordered-list',
      //   },
      // }),
      // BulletList, // If you also want bullet lists
    ],
    content: '<p>This is a paragraph.</p><p>Another line.</p>',
  });

  if (!editor) {
    return null;
  }

  const toggleOrderedList = () => {
    editor.chain().focus().toggleOrderedList().run();
  };

  return (
    <div>
      <button
        className="btn btn-ghost btn-xs"
        onClick={toggleOrderedList}
        // It's good practice to disable the button if the command can't be run
        disabled={!editor.can().toggleOrderedList()}
      >
        <ListOrdered />
      </button>

      <EditorContent editor={editor} />
    </div>
  );
};

export default MyTiptapEditor;

Explanation:

1. import OrderedList from '@tiptap/extension-ordered-list';: This line imports the class for the ordered list extension.
2. StarterKit.configure({ orderedList: { ... } }) : If you're using StarterKit (which is highly recommended as it bundles many essential extensions like Document, Paragraph, Text, ListItem, BulletList, etc.), you can simply configure its orderedList property. StarterKit already includes the OrderedList extension, so you generally don't need to add OrderedList separately if you're using StarterKit.
3. OrderedList.configure(...) (Alternative/Advanced) : If you're building your extensions list from scratch (not using StarterKit) or you've disabled orderedList within StarterKit, then you would add OrderedList directly to the extensions array. Important: In this scenario, you would also need to explicitly add Document, Paragraph, Text, and ListItem for the lists to function correctly.

To debug further if it still doesn't work:

1. Check your browser's console: Look for any errors, especially related to Tiptap or missing extensions.
2. Verify ListItem: Ensure ListItem is present in your extensions. OrderedList relies heavily on ListItem. StarterKit includes it by default.
3. Check editor.isActive('orderedList'): You can add a console.log(editor.isActive('orderedList')) in your button handler to see if the editor thinks it's in an ordered list state.

By adding OrderedList (either directly or via StarterKit.configure) to your extensions array, your button should now correctly toggle ordered lists!