Add OrderedList demo for React

demos/src/Nodes/OrderedList/React/index.jsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { useEditor, EditorContent } from '@tiptap/react'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import OrderedList from '@tiptap/extension-ordered-list'
+import ListItem from '@tiptap/extension-list-item'
+import './styles.scss'
+
+export default () => {
+  const editor = useEditor({
+    extensions: [Document, Paragraph, Text, OrderedList, ListItem],
+    content: `
+        <ol>
+          <li>A list item</li>
+          <li>And another one</li>
+        </ol>
+
+        <ol start="5">
+          <li>This item starts at 5</li>
+          <li>And another one</li>
+        </ol>
+      `,
+  })
+
+  if (!editor) {
+    return null
+  }
+
+  return (
+    <>
+      <button
+        onClick={() => editor.chain().focus().toggleOrderedList().run()}
+        className={editor.isActive('orderedList') ? 'is-active' : ''}
+      >
+        toggleOrderedList
+      </button>
+      <button
+        onClick={() => editor.chain().focus().splitListItem('listItem').run()}
+        disabled={!editor.can().splitListItem('listItem')}
+      >
+        splitListItem
+      </button>
+      <button
+        onClick={() => editor.chain().focus().sinkListItem('listItem').run()}
+        disabled={!editor.can().sinkListItem('listItem')}
+      >
+        sinkListItem
+      </button>
+      <button
+        onClick={() => editor.chain().focus().liftListItem('listItem').run()}
+        disabled={!editor.can().liftListItem('listItem')}
+      >
+        liftListItem
+      </button>
+
+      <EditorContent editor={editor} />
+    </>
+  )
+}