@tiptap/extension-list 3.0.0-beta.0

package/src/ordered-list/ordered-list.ts

@@ -0,0 +1,151 @@
+import { mergeAttributes, Node, wrappingInputRule } from '@tiptap/core'
+
+const ListItemName = 'listItem'
+const TextStyleName = 'textStyle'
+
+export interface OrderedListOptions {
+  /**
+   * The node type name for list items.
+   * @default 'listItem'
+   * @example 'myListItem'
+   */
+  itemTypeName: string
+
+  /**
+   * The HTML attributes for an ordered list node.
+   * @default {}
+   * @example { class: 'foo' }
+   */
+  HTMLAttributes: Record<string, any>
+
+  /**
+   * Keep the marks when splitting a list item.
+   * @default false
+   * @example true
+   */
+  keepMarks: boolean
+
+  /**
+   * Keep the attributes when splitting a list item.
+   * @default false
+   * @example true
+   */
+  keepAttributes: boolean
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    orderedList: {
+      /**
+       * Toggle an ordered list
+       * @example editor.commands.toggleOrderedList()
+       */
+      toggleOrderedList: () => ReturnType
+    }
+  }
+}
+
+/**
+ * Matches an ordered list to a 1. on input (or any number followed by a dot).
+ */
+export const orderedListInputRegex = /^(\d+)\.\s$/
+
+/**
+ * This extension allows you to create ordered lists.
+ * This requires the ListItem extension
+ * @see https://www.tiptap.dev/api/nodes/ordered-list
+ * @see https://www.tiptap.dev/api/nodes/list-item
+ */
+export const OrderedList = Node.create<OrderedListOptions>({
+  name: 'orderedList',
+
+  addOptions() {
+    return {
+      itemTypeName: 'listItem',
+      HTMLAttributes: {},
+      keepMarks: false,
+      keepAttributes: false,
+    }
+  },
+
+  group: 'block list',
+
+  content() {
+    return `${this.options.itemTypeName}+`
+  },
+
+  addAttributes() {
+    return {
+      start: {
+        default: 1,
+        parseHTML: element => {
+          return element.hasAttribute('start') ? parseInt(element.getAttribute('start') || '', 10) : 1
+        },
+      },
+      type: {
+        default: null,
+        parseHTML: element => element.getAttribute('type'),
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'ol',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const { start, ...attributesWithoutStart } = HTMLAttributes
+
+    return start === 1
+      ? ['ol', mergeAttributes(this.options.HTMLAttributes, attributesWithoutStart), 0]
+      : ['ol', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
+  },
+
+  addCommands() {
+    return {
+      toggleOrderedList:
+        () =>
+        ({ commands, chain }) => {
+          if (this.options.keepAttributes) {
+            return chain()
+              .toggleList(this.name, this.options.itemTypeName, this.options.keepMarks)
+              .updateAttributes(ListItemName, this.editor.getAttributes(TextStyleName))
+              .run()
+          }
+          return commands.toggleList(this.name, this.options.itemTypeName, this.options.keepMarks)
+        },
+    }
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      'Mod-Shift-7': () => this.editor.commands.toggleOrderedList(),
+    }
+  },
+
+  addInputRules() {
+    let inputRule = wrappingInputRule({
+      find: orderedListInputRegex,
+      type: this.type,
+      getAttributes: match => ({ start: +match[1] }),
+      joinPredicate: (match, node) => node.childCount + node.attrs.start === +match[1],
+    })
+
+    if (this.options.keepMarks || this.options.keepAttributes) {
+      inputRule = wrappingInputRule({
+        find: orderedListInputRegex,
+        type: this.type,
+        keepMarks: this.options.keepMarks,
+        keepAttributes: this.options.keepAttributes,
+        getAttributes: match => ({ start: +match[1], ...this.editor.getAttributes(TextStyleName) }),
+        joinPredicate: (match, node) => node.childCount + node.attrs.start === +match[1],
+        editor: this.editor,
+      })
+    }
+    return [inputRule]
+  },
+})

package/src/task-item/index.ts

@@ -0,0 +1 @@
+export * from './task-item.js'

package/src/task-item/task-item.ts

@@ -0,0 +1,220 @@
+import type { KeyboardShortcutCommand } from '@tiptap/core'
+import { mergeAttributes, Node, wrappingInputRule } from '@tiptap/core'
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
+
+export interface TaskItemOptions {
+  /**
+   * A callback function that is called when the checkbox is clicked while the editor is in readonly mode.
+   * @param node The prosemirror node of the task item
+   * @param checked The new checked state
+   * @returns boolean
+   */
+  onReadOnlyChecked?: (node: ProseMirrorNode, checked: boolean) => boolean
+
+  /**
+   * Controls whether the task items can be nested or not.
+   * @default false
+   * @example true
+   */
+  nested: boolean
+
+  /**
+   * HTML attributes to add to the task item element.
+   * @default {}
+   * @example { class: 'foo' }
+   */
+  HTMLAttributes: Record<string, any>
+
+  /**
+   * The node type for taskList nodes
+   * @default 'taskList'
+   * @example 'myCustomTaskList'
+   */
+  taskListTypeName: string
+}
+
+/**
+ * Matches a task item to a - [ ] on input.
+ */
+export const inputRegex = /^\s*(\[([( |x])?\])\s$/
+
+/**
+ * This extension allows you to create task items.
+ * @see https://www.tiptap.dev/api/nodes/task-item
+ */
+export const TaskItem = Node.create<TaskItemOptions>({
+  name: 'taskItem',
+
+  addOptions() {
+    return {
+      nested: false,
+      HTMLAttributes: {},
+      taskListTypeName: 'taskList',
+    }
+  },
+
+  content() {
+    return this.options.nested ? 'paragraph block*' : 'paragraph+'
+  },
+
+  defining: true,
+
+  addAttributes() {
+    return {
+      checked: {
+        default: false,
+        keepOnSplit: false,
+        parseHTML: element => {
+          const dataChecked = element.getAttribute('data-checked')
+
+          return dataChecked === '' || dataChecked === 'true'
+        },
+        renderHTML: attributes => ({
+          'data-checked': attributes.checked,
+        }),
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: `li[data-type="${this.name}"]`,
+        priority: 51,
+      },
+    ]
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      'li',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        'data-type': this.name,
+      }),
+      [
+        'label',
+        [
+          'input',
+          {
+            type: 'checkbox',
+            checked: node.attrs.checked ? 'checked' : null,
+          },
+        ],
+        ['span'],
+      ],
+      ['div', 0],
+    ]
+  },
+
+  addKeyboardShortcuts() {
+    const shortcuts: {
+      [key: string]: KeyboardShortcutCommand
+    } = {
+      Enter: () => this.editor.commands.splitListItem(this.name),
+      'Shift-Tab': () => this.editor.commands.liftListItem(this.name),
+    }
+
+    if (!this.options.nested) {
+      return shortcuts
+    }
+
+    return {
+      ...shortcuts,
+      Tab: () => this.editor.commands.sinkListItem(this.name),
+    }
+  },
+
+  addNodeView() {
+    return ({ node, HTMLAttributes, getPos, editor }) => {
+      const listItem = document.createElement('li')
+      const checkboxWrapper = document.createElement('label')
+      const checkboxStyler = document.createElement('span')
+      const checkbox = document.createElement('input')
+      const content = document.createElement('div')
+
+      checkboxWrapper.contentEditable = 'false'
+      checkbox.type = 'checkbox'
+      checkbox.addEventListener('mousedown', event => event.preventDefault())
+      checkbox.addEventListener('change', event => {
+        // if the editor isn’t editable and we don't have a handler for
+        // readonly checks we have to undo the latest change
+        if (!editor.isEditable && !this.options.onReadOnlyChecked) {
+          checkbox.checked = !checkbox.checked
+
+          return
+        }
+
+        const { checked } = event.target as any
+
+        if (editor.isEditable && typeof getPos === 'function') {
+          editor
+            .chain()
+            .focus(undefined, { scrollIntoView: false })
+            .command(({ tr }) => {
+              const position = getPos()
+
+              if (typeof position !== 'number') {
+                return false
+              }
+              const currentNode = tr.doc.nodeAt(position)
+
+              tr.setNodeMarkup(position, undefined, {
+                ...currentNode?.attrs,
+                checked,
+              })
+
+              return true
+            })
+            .run()
+        }
+        if (!editor.isEditable && this.options.onReadOnlyChecked) {
+          // Reset state if onReadOnlyChecked returns false
+          if (!this.options.onReadOnlyChecked(node, checked)) {
+            checkbox.checked = !checkbox.checked
+          }
+        }
+      })
+
+      Object.entries(this.options.HTMLAttributes).forEach(([key, value]) => {
+        listItem.setAttribute(key, value)
+      })
+
+      listItem.dataset.checked = node.attrs.checked
+      checkbox.checked = node.attrs.checked
+
+      checkboxWrapper.append(checkbox, checkboxStyler)
+      listItem.append(checkboxWrapper, content)
+
+      Object.entries(HTMLAttributes).forEach(([key, value]) => {
+        listItem.setAttribute(key, value)
+      })
+
+      return {
+        dom: listItem,
+        contentDOM: content,
+        update: updatedNode => {
+          if (updatedNode.type !== this.type) {
+            return false
+          }
+
+          listItem.dataset.checked = updatedNode.attrs.checked
+          checkbox.checked = updatedNode.attrs.checked
+
+          return true
+        },
+      }
+    }
+  },
+
+  addInputRules() {
+    return [
+      wrappingInputRule({
+        find: inputRegex,
+        type: this.type,
+        getAttributes: match => ({
+          checked: match[match.length - 1] === 'x',
+        }),
+      }),
+    ]
+  },
+})

package/src/task-list/index.ts

@@ -0,0 +1 @@
+export * from './task-list.js'

package/src/task-list/task-list.ts

@@ -0,0 +1,79 @@
+import { mergeAttributes, Node } from '@tiptap/core'
+
+export interface TaskListOptions {
+  /**
+   * The node type name for a task item.
+   * @default 'taskItem'
+   * @example 'myCustomTaskItem'
+   */
+  itemTypeName: string
+
+  /**
+   * The HTML attributes for a task list node.
+   * @default {}
+   * @example { class: 'foo' }
+   */
+  HTMLAttributes: Record<string, any>
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    taskList: {
+      /**
+       * Toggle a task list
+       * @example editor.commands.toggleTaskList()
+       */
+      toggleTaskList: () => ReturnType
+    }
+  }
+}
+
+/**
+ * This extension allows you to create task lists.
+ * @see https://www.tiptap.dev/api/nodes/task-list
+ */
+export const TaskList = Node.create<TaskListOptions>({
+  name: 'taskList',
+
+  addOptions() {
+    return {
+      itemTypeName: 'taskItem',
+      HTMLAttributes: {},
+    }
+  },
+
+  group: 'block list',
+
+  content() {
+    return `${this.options.itemTypeName}+`
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: `ul[data-type="${this.name}"]`,
+        priority: 51,
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['ul', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { 'data-type': this.name }), 0]
+  },
+
+  addCommands() {
+    return {
+      toggleTaskList:
+        () =>
+        ({ commands }) => {
+          return commands.toggleList(this.name, this.options.itemTypeName)
+        },
+    }
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      'Mod-Shift-9': () => this.editor.commands.toggleTaskList(),
+    }
+  },
+})