@prosekit/extensions 0.11.7 → 0.12.0

package/src/list/list-serializer.ts

@@ -4,6 +4,7 @@ import {
   type PlainExtension,
 } from '@prosekit/core'
 import {
+  findCheckboxInListItem,
   joinListElements,
   listToDOM,
 } from 'prosemirror-flat-list'
@@ -16,13 +17,15 @@ export function defineListSerializer(): PlainExtension {
     serializeFragmentWrapper: (fn) => {
       return (...args) => {
         const dom = fn(...args)
-        return joinListElements(dom)
+        return normalizeElementTree(joinListElements(dom))
       }
     },
     serializeNodeWrapper: (fn) => {
       return (...args) => {
         const dom = fn(...args)
-        return isElementLike(dom) ? joinListElements(dom) : dom
+        return isElementLike(dom)
+          ? normalizeElementTree(joinListElements(dom))
+          : dom
       }
     },
     nodesFromSchemaWrapper: (fn) => {
@@ -30,9 +33,60 @@ export function defineListSerializer(): PlainExtension {
         const nodes = fn(...args)
         return {
           ...nodes,
-          list: (node) => listToDOM({ node, nativeList: true, getMarkers: () => null }),
+          list: (node) => listToDOM({ node, nativeList: true }),
         }
       }
     },
   })
 }
+
+function normalizeElementTree<T extends Element | DocumentFragment>(
+  node: T,
+): T {
+  if (isElementLike(node)) {
+    normalizeTaskList(node)
+  }
+
+  for (const child of node.children) {
+    normalizeElementTree(child)
+  }
+
+  return node
+}
+
+/**
+ * Modifies the DOM tree for task lists to ensure that the output HTML can be
+ * parsed by rehype-remark.
+ */
+function normalizeTaskList(node: Element): void {
+  if (
+    !node.classList.contains('prosemirror-flat-list')
+    || node.getAttribute('data-list-kind') !== 'task'
+    || node.children.length !== 2
+  ) {
+    return
+  }
+
+  const marker = node.children.item(0)
+  if (!marker || !marker.classList.contains('list-marker')) {
+    return
+  }
+
+  const checkbox = findCheckboxInListItem(marker)
+  if (!checkbox) {
+    return
+  }
+
+  const content = node.children.item(1)
+  if (!content || !content.classList.contains('list-content')) {
+    return
+  }
+
+  const textBlock = content.children.item(0)
+  if (!textBlock || !['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6'].includes(textBlock.tagName)) {
+    return
+  }
+
+  node.replaceChildren(...content.children)
+  textBlock.prepend(checkbox)
+}

package/src/list/list.spec.ts

@@ -1,5 +1,6 @@
 import {
   createEditor,
+  nodeFromHTML,
   union,
 } from '@prosekit/core'
 import type { ProseMirrorNode } from '@prosekit/pm/model'
@@ -12,6 +13,11 @@ import {
 import { defineDoc } from '../doc'
 import { defineParagraph } from '../paragraph'
 import { setupTest } from '../testing'
+import { formatHTML } from '../testing/format-html'
+import {
+  htmlFromMarkdown,
+  markdownFromHTML,
+} from '../testing/markdown'
 import { defineText } from '../text'
 
 import { defineList } from './index'
@@ -116,6 +122,10 @@ describe('defineList', () => {
           data-list-checked
         >
           <p>
+            <input
+              type="checkbox"
+              checked
+            >
             Checked 1
           </p>
         </li>
@@ -124,6 +134,7 @@ describe('defineList', () => {
           data-list-kind="task"
         >
           <p>
+            <input type="checkbox">
             Unchecked 2
           </p>
         </li>
@@ -131,4 +142,122 @@ describe('defineList', () => {
       "
     `)
   })
+
+  it('can generate html that can be parsed by remark', () => {
+    const { editor, n } = setupTest()
+
+    const doc1 = n.doc(
+      n.bullet(n.paragraph('Bullet')),
+      n.ordered(n.paragraph('Ordered')),
+      n.checked(n.paragraph('Checked')),
+      n.unchecked(n.paragraph('Unchecked')),
+    )
+
+    editor.set(doc1)
+    const html1 = editor.getDocHTML()
+    expect(formatHTML(html1)).toMatchInlineSnapshot(
+      `
+      "
+      <div>
+        <ul>
+          <li
+            class="prosemirror-flat-list"
+            data-list-kind="bullet"
+          >
+            <p>
+              Bullet
+            </p>
+          </li>
+        </ul>
+        <ol>
+          <li
+            class="prosemirror-flat-list"
+            data-list-kind="ordered"
+          >
+            <p>
+              Ordered
+            </p>
+          </li>
+        </ol>
+        <ul>
+          <li
+            class="prosemirror-flat-list"
+            data-list-kind="task"
+            data-list-checked
+          >
+            <p>
+              <input
+                type="checkbox"
+                checked
+              >
+              Checked
+            </p>
+          </li>
+          <li
+            class="prosemirror-flat-list"
+            data-list-kind="task"
+          >
+            <p>
+              <input type="checkbox">
+              Unchecked
+            </p>
+          </li>
+        </ul>
+      </div>
+      "
+    `,
+    )
+
+    const markdown1 = markdownFromHTML(html1)
+    expect(markdown1).toMatchInlineSnapshot(`
+      "* Bullet
+
+      1. Ordered
+
+      * [x] Checked
+
+      * [ ] Unchecked
+      "
+    `)
+
+    const html2 = htmlFromMarkdown(markdown1)
+    expect(formatHTML(html2)).toMatchInlineSnapshot(`
+      "
+      <ul>
+        <li>
+          Bullet
+        </li>
+      </ul>
+      <ol>
+        <li>
+          Ordered
+        </li>
+      </ol>
+      <ul class="contains-task-list">
+        <li class="task-list-item">
+          <p>
+            <input
+              type="checkbox"
+              checked
+              disabled
+            >
+            Checked
+          </p>
+        </li>
+        <li class="task-list-item">
+          <p>
+            <input
+              type="checkbox"
+              disabled
+            >
+            Unchecked
+          </p>
+        </li>
+      </ul>
+      "
+    `)
+
+    const doc2 = nodeFromHTML(html2, { schema: editor.schema })
+    expect(doc2.toJSON()).toEqual(doc1.toJSON())
+  })
 })

package/src/testing/keyboard.ts

@@ -1,5 +1,5 @@
 import { isApple } from '@prosekit/core'
-import { userEvent } from '@vitest/browser/context'
+import { userEvent } from 'vitest/browser'
 
 /**
  * @example

package/src/testing/markdown.ts

@@ -1,5 +1,6 @@
 import rehypeParse from 'rehype-parse'
 import rehypeRemark from 'rehype-remark'
+import remarkGfm from 'remark-gfm'
 import remarkHtml from 'remark-html'
 import remarkParse from 'remark-parse'
 import remarkStringify from 'remark-stringify'
@@ -9,6 +10,7 @@ export function markdownFromHTML(html: string): string {
   return unified()
     .use(rehypeParse)
     .use(rehypeRemark)
+    .use(remarkGfm)
     .use(remarkStringify)
     .processSync(html)
     .toString()
@@ -17,6 +19,7 @@ export function markdownFromHTML(html: string): string {
 export function htmlFromMarkdown(markdown: string): string {
   return unified()
     .use(remarkParse)
+    .use(remarkGfm)
     .use(remarkHtml)
     .processSync(markdown)
     .toString()

package/dist/index-DY6lIIYV.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-DY6lIIYV.d.ts","names":[],"sources":["../src/file/file-drop-handler.ts","../src/file/file-paste-handler.ts","../src/file/file-upload.ts"],"sourcesContent":[],"mappings":";;;;UAYiB,sBAAA;;AAAjB;;MAIQ,EAAA,UAAA;;;;EAwBI,KAAA,EAnBH,SAmBG;EAII;;;MAEb,EApBK,IAoBL;EAAc;;;;AClCjB;;;;;;AAuBA;AAIgB,KDCJ,eAAA,GCD0B,CAAA,OAAA,EDE3B,sBCF2B,EAAA,GAAA,OAAA,GAAA,IAAA;AAAA,iBDKtB,qBAAA,CCLsB,OAAA,EDM3B,eCN2B,CAAA,EDOnC,cCPmC;;;UA3BrB,uBAAA;;ADAjB;;MAIQ,ECAA,UDAA;;;;EAwBI,KAAA,ECnBH,cDmBkB;EAIX;;;MAEb,ECpBK,IDoBL;;;;;AClCH;;;AASS,KAcG,gBAAA,GAdH,CAAA,OAAA,EAeE,uBAfF,EAAA,GAAA,OAAA,GAAA,IAAA;AAKD,iBAaQ,sBAAA,CAbR,OAAA,EAcG,gBAdH,CAAA,EAeL,cAfK;;;;;;UCrBS,cAAA;EFOA,MAAA,EAAA,MAAA;EAAsB,KAAA,EAAA,MAAA;;AAS9B,UEPQ,eAAA,CFOR;;;AAmBT;EAIgB,IAAA,EE1BR,IF0BQ;EAAqB;;;EAEpB,UAAA,EAAA,CAAA,QAAA,EEvBQ,cFuBR,EAAA,GAAA,IAAA;;;;AClCjB;;AAIQ,KCcI,QDdJ,CAAA,MAAA,CAAA,GAAA,CAAA,OAAA,ECciC,eDdjC,EAAA,GCcqD,ODdrD,CCc6D,MDd7D,CAAA;;;;AAmBI,cCAC,UDAe,CAAA,MACjB,CAAA,CAAA;EAGK;;;;;;;;AClChB;EASiB,UAAA,IAAA,EAAA,OAAe;EAAA;;;EASO,UAAA,MAAA,EA4BnB,MA5BmB,GAAA,SAAA;EAO3B;;;YAAyD,KAAA,EA0BlD,KA1BkD,GAAA,SAAA;;;AAKrE;EAAuB,SAAA,QAAA,EA0BF,OA1BE,CA0BM,MA1BN,CAAA;UAgBH,WAAA;;;;;;;aAoB+C,CAAA;IAAA,IAAA;IAAA;GAAA,EAAA;IAAT,IAAA,EAAhB,IAAgB;IAiCjC,QAAA,EAjCiC,QAiCjC,CAjC0C,MAiC1C,CAAA;;;;;yCAAA,0BACpB;;;;mDAcA,WAAW"}

package/dist/shiki-highlighter-chunk-Cwu1Jr9o.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"shiki-highlighter-chunk-Cwu1Jr9o.d.ts","names":[],"sources":["../src/code-block/shiki-highlighter-chunk.ts"],"sourcesContent":[],"mappings":";;;UAeiB,uBAAA,SAAgC,0BAA0B,iBAAiB;AAA3E,UAEA,kBAAA,SAA2B,IAFH,CAEQ,uBAFR,EAAA,OAAA,GAAA,QAAA,CAAA,CAAA;EAAA,MAAA,EAG/B,YAH+B,EAAA;OAAkC,EAAA,CAIjE,eAJiE,GAI/C,eAJ+C,CAAA,EAAA;;AAA1B,KAwCrC,iBAAA,GAxCqC;EAAyB,WAAA,EA0CzD,WA1CyD;EAEzD,OAAA,CAAA,EAAA,SAAA;CAAmB,GAAA;aAAa,CAAA,EAAA,SAAA;SACvC,EA4CG,OA5CH,CAAA,IAAA,CAAA;;AACkB,iBA8CZ,sBAAA,CA9CY,OAAA,EA+CjB,kBA/CiB,CAAA,EAgDzB,iBAhDyB"}