fix bullet list

This commit is contained in:
Philipp Kühn 2020-09-22 20:39:24 +02:00
parent 2856900c6a
commit 2c9973af8c
6 changed files with 77 additions and 28 deletions

View File

@ -10,24 +10,24 @@ context('/api/extensions/bullet-list', () => {
})
})
// it('should make a bullet list from different markdown shortcuts', () => {
// cy.get('.ProseMirror').then(([{ editor }]) => {
// editor.clearContent()
// })
it('should make a bullet list from different markdown shortcuts', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
})
// cy.get('.ProseMirror')
// .type('* List Item 1{enter}+ List Item 2{enter}- List Item 3')
cy.get('.ProseMirror')
.type('* List Item 1{enter}{enter}+ List Item 2{enter}{enter}- List Item 3')
// cy.get('.ProseMirror')
// .find('li:nth-child(1)')
// .should('contain', 'List Item 1')
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')
cy.get('.ProseMirror')
.find('li:nth-child(2)')
.should('contain', 'List Item 2')
// cy.get('.ProseMirror')
// .find('li:nth-child(3)')
// .should('contain', 'List Item 3')
// })
cy.get('.ProseMirror')
.find('li:nth-child(3)')
.should('contain', 'List Item 3')
})
})

View File

@ -1,8 +1,8 @@
<template>
<div v-if="editor">
<!-- <button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
<button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
bullet list
</button> -->
</button>
<editor-content :editor="editor" />
</div>

View File

@ -13,6 +13,7 @@ export { selectParentNode } from './selectParentNode'
export { setContent } from './setContent'
export { sinkListItem } from './sinkListItem'
export { splitListItem } from './splitListItem'
export { toggleList } from './toggleList'
export { toggleMark } from './toggleMark'
export { toggleNode } from './toggleNode'
export { updateMark } from './updateMark'

View File

@ -0,0 +1,50 @@
import { Command } from '../Editor'
import { wrapInList, liftListItem } from 'prosemirror-schema-list'
import { findParentNode } from 'prosemirror-utils'
import { Node, NodeType, Schema } from 'prosemirror-model'
import getNodeType from '../utils/getNodeType'
type ToggleListCommand = (
listType: string | NodeType,
itemType: string | NodeType,
) => Command
declare module '../Editor' {
interface Commands {
toggleList: ToggleListCommand,
}
}
function isList(node: Node, schema: Schema) {
return (node.type === schema.nodes.bullet_list
|| node.type === schema.nodes.ordered_list
|| node.type === schema.nodes.todo_list)
}
export const toggleList: ToggleListCommand = (listTypeOrName, itemTypeOrName) => ({ tr, state, dispatch }) => {
const listType = getNodeType(listTypeOrName, state.schema)
const itemType = getNodeType(itemTypeOrName, state.schema)
const { schema, selection } = state
const { $from, $to } = selection
const range = $from.blockRange($to)
if (!range) {
return false
}
const parentList = findParentNode(node => isList(node, schema))(selection)
if (range.depth >= 1 && parentList && range.depth - parentList.depth <= 1) {
if (parentList.node.type === listType) {
return liftListItem(itemType)(state, dispatch)
}
if (isList(parentList.node, schema) && listType.validContent(parentList.node.content)) {
tr.setNodeMarkup(parentList.pos, listType)
return false
}
}
return wrapInList(listType)(state, dispatch)
}

View File

@ -19,11 +19,11 @@ export default new Node()
],
toDOM: () => ['ul', 0],
}))
// .commands(({ editor, type }) => ({
// bulletList: () => ({ commands }) => {
// return commands.toggleList(type, editor.schema.nodes.list_item)
// },
// }))
.commands(({ name }) => ({
bulletList: () => ({ commands }) => {
return commands.toggleList(name, 'list_item')
},
}))
.keys(({ editor }) => ({
'Shift-Ctrl-8': () => editor.bulletList(),
}))

View File

@ -6,14 +6,12 @@ export default new Node()
content: 'paragraph block*',
defining: true,
draggable: false,
parseDOM: [
{ tag: 'li' },
],
parseDOM: [{ tag: 'li' }],
toDOM: () => ['li', 0],
}))
.keys(({ editor, name }) => ({
Enter: () => editor.splitListItem(name),
// Tab: () => editor.sinkListItem(name),
// 'Shift-Tab': () => editor.liftListItem(name),
Tab: () => editor.sinkListItem(name),
'Shift-Tab': () => editor.liftListItem(name),
}))
.create()