packages/remirror__extension-list/src/task-list-extension.ts
import {
ApplySchemaAttributes,
assertGet,
command,
CommandFunction,
ExtensionPriority,
ExtensionTag,
keyBinding,
KeyBindingProps,
NamedShortcut,
NodeExtension,
NodeExtensionSpec,
NodeSpecOverride,
} from '@remirror/core';
import { ExtensionListMessages as Messages } from '@remirror/messages';
import { toggleList } from './list-commands';
import { TaskListItemExtension } from './task-list-item-extension';
/**
* Create the node for a task list.
*/
export class TaskListExtension extends NodeExtension {
get name() {
return 'taskList' as const;
}
createTags() {
return [ExtensionTag.Block, ExtensionTag.ListContainerNode];
}
createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec {
return {
content: 'taskListItem+',
...override,
attrs: extra.defaults(),
parseDOM: [
{
tag: 'ul[data-task-list]',
getAttrs: extra.parse,
// Make sure it has higher priority then BulletListExtension's parseDOM by default
priority: ExtensionPriority.Medium,
},
...(override.parseDOM ?? []),
],
toDOM: (node) => ['ul', { ...extra.dom(node), 'data-task-list': '' }, 0],
};
}
createExtensions() {
return [new TaskListItemExtension({})];
}
/**
* Toggle the task list for the current selection.
*/
@command({ icon: 'checkboxMultipleLine', label: ({ t }) => t(Messages.TASK_LIST_LABEL) })
toggleTaskList(): CommandFunction {
return toggleList(this.type, assertGet(this.store.schema.nodes, 'taskListItem'));
}
@keyBinding({ shortcut: NamedShortcut.TaskList, command: 'toggleTaskList' })
listShortcut(props: KeyBindingProps): boolean {
return this.toggleTaskList()(props);
}
}
declare global {
namespace Remirror {
interface AllExtensions {
taskList: TaskListExtension;
}
}
}