tiptap-extension-bullet-list

Tiptap bullet list extension with custom list-style-type support.

---

Install

npm install tiptap-extension-bullet-list -S

Usage

  const listType = e.target.dataset.listType; // circle disc square
  let chain = editor.chain().focus();
  // 开启列表类型
  if (!editor.isActive('bulletList')) {
    chain.toggleBulletList().updateAttributes('bulletList', { listStyleType });
  }
  // 切换列表类型
  else if (editor.getAttributes('bulletList').listStyleType !== listStyleType) {
    chain.updateAttributes('bulletList', { listStyleType });
  }
  // 关闭列表类型
  else {
    chain.toggleBulletList();
  }

Options

Add listStyleType option, other options are same as @tiptap/extension-bullet-list

import BulletList from "tiptap-extension-bullet-list";

const editor = new Editor({
  element: document.querySelector(".editor"),
  extensions: [
    StarterKit,
    BulletList.configure({
      listStyleType: 'disc', // default disc 
      HTMLAttributes: { class: "list-paddingleft-1" }
    }),
  ],
});

Relations

@tiptap/extension-bullet-list: https://github.com/ueberdosis/tiptap/tree/develop/packages/extension-bullet-list

tiptap-appmsg-editor: https://github.com/KID-1912/tiptap-appmsg-editor