add ordered list and list item
This commit is contained in:
Hans Pagel
5
docs/src/demos/Extensions/ListItem/index.spec.js
Normal file
5
docs/src/demos/Extensions/ListItem/index.spec.js
Normal file
@@ -0,0 +1,5 @@
|
||||
context('/api/extensions/list-item', () => {
|
||||
before(() => {
|
||||
cy.visit('/api/extensions/list-item')
|
||||
})
|
||||
})
|
||||
73
docs/src/demos/Extensions/ListItem/index.vue
Normal file
73
docs/src/demos/Extensions/ListItem/index.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bullet_list') }">
|
||||
bullet list
|
||||
</button>
|
||||
<button @click="editor.chain().focus().orderedList().run()" :class="{ 'is-active': editor.isActive('ordered_list') }">
|
||||
ordered list
|
||||
</button>
|
||||
|
||||
<editor-content :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Editor } from '@tiptap/core'
|
||||
import { EditorContent } from '@tiptap/vue'
|
||||
import Document from '@tiptap/extension-document'
|
||||
import Paragraph from '@tiptap/extension-paragraph'
|
||||
import Text from '@tiptap/extension-text'
|
||||
import BulletList from '@tiptap/extension-bullet-list'
|
||||
import OrderedList from '@tiptap/extension-ordered-list'
|
||||
import ListItem from '@tiptap/extension-list-item'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditorContent,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
extensions: [
|
||||
Document(),
|
||||
Paragraph(),
|
||||
Text(),
|
||||
BulletList(),
|
||||
OrderedList(),
|
||||
ListItem(),
|
||||
],
|
||||
content: `
|
||||
<p>
|
||||
I like lists. Let’s add one:
|
||||
</p>
|
||||
<ul>
|
||||
<li>This is a bullet list.</li>
|
||||
<li>And it has three list items.</li>
|
||||
<li>Here is the third one.</li>
|
||||
</ul>
|
||||
<p>
|
||||
Do you want to see one more? I bet! Here is another one:
|
||||
</p>
|
||||
<ol>
|
||||
<li>That’s a different list, actually it’s an ordered list.</li>
|
||||
<li>It also has three list items.</li>
|
||||
<li>And all of them are numbered.</li>
|
||||
</ol>
|
||||
<p>
|
||||
Lists would be nothing without list items.
|
||||
</p>
|
||||
`,
|
||||
})
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
97
docs/src/demos/Extensions/OrderedList/index.spec.js
Normal file
97
docs/src/demos/Extensions/OrderedList/index.spec.js
Normal file
@@ -0,0 +1,97 @@
|
||||
context('/api/extensions/ordered-list', () => {
|
||||
before(() => {
|
||||
cy.visit('/api/extensions/ordered-list')
|
||||
})
|
||||
|
||||
beforeEach(() => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.setContent('<p>Example Text</p>')
|
||||
editor.selectAll()
|
||||
})
|
||||
})
|
||||
|
||||
it('the button should make the selected line a ordered list item', () => {
|
||||
cy.get('.ProseMirror ol')
|
||||
.should('not.exist')
|
||||
|
||||
cy.get('.ProseMirror ol li')
|
||||
.should('not.exist')
|
||||
|
||||
cy.get('.demo__preview button:nth-child(1)')
|
||||
.click()
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.find('ol')
|
||||
.should('contain', 'Example Text')
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.find('ol li')
|
||||
.should('contain', 'Example Text')
|
||||
})
|
||||
|
||||
it('the button should toggle the ordered list', () => {
|
||||
cy.get('.ProseMirror ol')
|
||||
.should('not.exist')
|
||||
|
||||
cy.get('.demo__preview button:nth-child(1)')
|
||||
.click()
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.find('ol')
|
||||
.should('contain', 'Example Text')
|
||||
|
||||
cy.get('.demo__preview button:nth-child(1)')
|
||||
.click()
|
||||
|
||||
cy.get('.ProseMirror ol')
|
||||
.should('not.exist')
|
||||
})
|
||||
|
||||
it('should leave the list with double enter', () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.clearContent()
|
||||
})
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.type('1. List Item 1{enter}{enter}Paragraph')
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.find('li')
|
||||
.its('length')
|
||||
.should('eq', 1)
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.find('p')
|
||||
.should('contain', 'Paragraph')
|
||||
})
|
||||
|
||||
it('should make a ordered list from a number', () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.clearContent()
|
||||
})
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.type('1. List Item 1{enter}List Item 2')
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.find('li:nth-child(1)')
|
||||
.should('contain', 'List Item 1')
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.find('li:nth-child(2)')
|
||||
.should('contain', 'List Item 2')
|
||||
})
|
||||
|
||||
it('should remove the ordered list after pressing backspace', () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.clearContent()
|
||||
})
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.type('1. {backspace}Example')
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.find('p')
|
||||
.should('contain', '1. Example')
|
||||
})
|
||||
})
|
||||
53
docs/src/demos/Extensions/OrderedList/index.vue
Normal file
53
docs/src/demos/Extensions/OrderedList/index.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button @click="editor.chain().focus().orderedList().run()" :class="{ 'is-active': editor.isActive('ordered_list') }">
|
||||
ordered list
|
||||
</button>
|
||||
|
||||
<editor-content :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Editor } from '@tiptap/core'
|
||||
import { EditorContent } from '@tiptap/vue'
|
||||
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'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditorContent,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
extensions: [
|
||||
Document(),
|
||||
Paragraph(),
|
||||
Text(),
|
||||
OrderedList(),
|
||||
ListItem(),
|
||||
],
|
||||
content: `
|
||||
<ul>
|
||||
<li>A list item</li>
|
||||
<li>And another one</li>
|
||||
</ul>
|
||||
`,
|
||||
})
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,11 +1,11 @@
|
||||
# ListItem
|
||||
Enables you to use the `<li>` HTML tag in the editor.
|
||||
|
||||
::: warning Restrictions
|
||||
This extensions is intended to be used with the `BulletList` or `OrderedList` extension.
|
||||
:::
|
||||
The ListItem extension adds support for the `<li>` HTML tag. It’s used for bullet lists and ordered lists and can’t really be used without them.
|
||||
|
||||
## Installation
|
||||
::: warning Restrictions
|
||||
This extensions is intended to be used with the [`BulletList`](/api/extensions/bullet-list) or [`OrderedList`](/api/extensions/ordered-list) extension. It doesn’t work without at least using one of them.
|
||||
:::
|
||||
|
||||
```bash
|
||||
# With npm
|
||||
npm install @tiptap/extension-list-item
|
||||
@@ -17,4 +17,18 @@ yarn add @tiptap/extension-list-item
|
||||
## Settings
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ------ | ------- | -------------------------------------------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
*None*
|
||||
|
||||
## Keyboard shortcuts
|
||||
* New list item: `Enter`
|
||||
* Sink a list item: `Tab`
|
||||
* Lift a list item: `Shift` + `Tab`
|
||||
|
||||
## Source code
|
||||
[packages/extension-list-item/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-list-item/)
|
||||
|
||||
## Usage
|
||||
<demo name="Extensions/ListItem" highlight="3-8,20-22,41-43" />
|
||||
@@ -1,5 +1,7 @@
|
||||
# OrderedList
|
||||
Enables you to use the `<ol>` HTML tag in the editor.
|
||||
This extension enables you to use ordered lists in the editor. They are rendered as `<ol>` HTML tags,
|
||||
|
||||
Type <code>1. </code> (or any other number followed by a dot) at the beginning of a new line and it will magically transform to a ordered list.
|
||||
|
||||
## Installation
|
||||
::: warning Use with ListItem
|
||||
@@ -20,57 +22,15 @@ yarn add @tiptap/extension-ordered-list @tiptap/extension-list-item
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
| Command | Options | Description |
|
||||
| ------------ | ------- | ----------------------- |
|
||||
| ordered_list | — | Toggle an ordered list. |
|
||||
| Command | Options | Description |
|
||||
| ----------- | ------- | --------------------- |
|
||||
| ordered_list | — | Toggle a ordered list. |
|
||||
|
||||
## Keyboard shortcuts
|
||||
* `Control` + `Shift` + `9`
|
||||
|
||||
## Source code
|
||||
[packages/extension-ordered-list/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-ordered-list/)
|
||||
|
||||
## Usage
|
||||
```markup
|
||||
<template>
|
||||
<div>
|
||||
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
|
||||
<button type="button" :class="{ 'is-active': isActive.ordered_list() }" @click="commands.ordered_list">
|
||||
Ordered List
|
||||
</button>
|
||||
</editor-menu-bar>
|
||||
|
||||
<editor-content :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
|
||||
import { OrderedList } from 'tiptap-extensions'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditorMenuBar,
|
||||
EditorContent,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editor: new Editor({
|
||||
extensions: [
|
||||
OrderedList(),
|
||||
],
|
||||
content: `
|
||||
<ol>
|
||||
<li>A list item</li>
|
||||
<li>And another one</li>
|
||||
</ol>
|
||||
<ol start="3">
|
||||
<li>This list begins with 3.</li>
|
||||
</ol>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
<demo name="Extensions/OrderedList" highlight="3-5,17-18,37-38" />
|
||||
|
||||
@@ -107,7 +107,6 @@
|
||||
link: /api/extensions/bold
|
||||
- title: BulletList
|
||||
link: /api/extensions/bullet-list
|
||||
draft: true
|
||||
- title: Code
|
||||
link: /api/extensions/code
|
||||
- title: CodeBlock
|
||||
@@ -135,13 +134,11 @@
|
||||
draft: true
|
||||
- title: ListItem
|
||||
link: /api/extensions/list-item
|
||||
draft: true
|
||||
# - title: Mention
|
||||
# link: /api/extensions/mention
|
||||
# draft: true
|
||||
- title: OrderedList
|
||||
link: /api/extensions/ordered-list
|
||||
draft: true
|
||||
- title: Paragraph
|
||||
link: /api/extensions/paragraph
|
||||
# - title: Placeholder
|
||||
|
||||
Reference in New Issue
Block a user