@tiptap/markdown 3.20.1 → 3.20.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/markdown",
   "description": "markdown parser and serializer for tiptap",
-  "version": "3.20.1",
+  "version": "3.20.3",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -37,12 +37,12 @@
     "marked": "^17.0.1"
   },
   "devDependencies": {
-    "@tiptap/core": "^3.20.1",
-    "@tiptap/pm": "^3.20.1"
+    "@tiptap/core": "^3.20.3",
+    "@tiptap/pm": "^3.20.3"
   },
   "peerDependencies": {
-    "@tiptap/core": "^3.20.1",
-    "@tiptap/pm": "^3.20.1"
+    "@tiptap/core": "^3.20.3",
+    "@tiptap/pm": "^3.20.3"
   },
   "repository": {
     "type": "git",

package/src/MarkdownManager.ts

@@ -114,6 +114,7 @@ export class MarkdownManager {
     // extensions to provide `markdown: { name?, parseName?, renderName?, parse?, render?, match? }`.
     const markdownCfg = (getExtensionField(extension, 'markdownOptions') ?? null) as ExtendableConfig['markdownOptions']
     const isIndenting = markdownCfg?.indentsContent ?? false
+    const htmlReopen = markdownCfg?.htmlReopen
 
     const spec: MarkdownExtensionSpec = {
       tokenName,
@@ -121,6 +122,7 @@ export class MarkdownManager {
       parseMarkdown,
       renderMarkdown,
       isIndenting,
+      htmlReopen,
       tokenizer,
     }
 
@@ -291,7 +293,7 @@ export class MarkdownManager {
     const tokens = this.markedInstance.lexer(markdown)
 
     // Convert tokens to Tiptap JSON
-    const content = this.parseTokens(tokens)
+    const content = this.parseTokens(tokens, true)
 
     // Return a document node containing the parsed content
     return {
@@ -303,17 +305,68 @@ export class MarkdownManager {
   /**
    * Convert an array of marked tokens into Tiptap JSON nodes using registered extension handlers.
    */
-  private parseTokens(tokens: MarkdownToken[]): JSONContent[] {
-    return tokens
-      .map(token => this.parseToken(token))
-      .filter((parsed): parsed is JSONContent | JSONContent[] => parsed !== null)
-      .flatMap(parsed => (Array.isArray(parsed) ? parsed : [parsed]))
+  private parseTokens(tokens: MarkdownToken[], parseImplicitEmptyParagraphs = false): JSONContent[] {
+    const nonSpaceTokenIndexes = tokens.reduce<number[]>((indexes, token, index) => {
+      if (token.type !== 'space') {
+        indexes.push(index)
+      }
+
+      return indexes
+    }, [])
+
+    let previousNonSpaceTokenIndex = -1
+    let nextNonSpaceTokenPointer = 0
+
+    return tokens.flatMap((token, index) => {
+      while (
+        nextNonSpaceTokenPointer < nonSpaceTokenIndexes.length &&
+        nonSpaceTokenIndexes[nextNonSpaceTokenPointer] < index
+      ) {
+        previousNonSpaceTokenIndex = nonSpaceTokenIndexes[nextNonSpaceTokenPointer]
+        nextNonSpaceTokenPointer += 1
+      }
+
+      if (parseImplicitEmptyParagraphs && token.type === 'space') {
+        const nextNonSpaceTokenIndex = nonSpaceTokenIndexes[nextNonSpaceTokenPointer] ?? -1
+
+        return this.createImplicitEmptyParagraphsFromSpace(token, previousNonSpaceTokenIndex, nextNonSpaceTokenIndex)
+      }
+
+      const parsed = this.parseToken(token, parseImplicitEmptyParagraphs)
+
+      if (parsed === null) {
+        return []
+      }
+
+      return Array.isArray(parsed) ? parsed : [parsed]
+    })
+  }
+
+  private createImplicitEmptyParagraphsFromSpace(
+    token: MarkdownToken,
+    previousNonSpaceTokenIndex: number,
+    nextNonSpaceTokenIndex: number,
+  ): JSONContent[] {
+    const separatorCount = this.countParagraphSeparators(token.raw || '')
+
+    if (separatorCount === 0) {
+      return []
+    }
+
+    const isBoundarySpace = previousNonSpaceTokenIndex === -1 || nextNonSpaceTokenIndex === -1
+    const emptyParagraphCount = Math.max(separatorCount - (isBoundarySpace ? 0 : 1), 0)
+
+    return Array.from({ length: emptyParagraphCount }, () => ({ type: 'paragraph', content: [] }))
+  }
+
+  private countParagraphSeparators(raw: string): number {
+    return (raw.replace(/\r\n/g, '\n').match(/\n\n/g) || []).length
   }
 
   /**
    * Parse a single token into Tiptap JSON using the appropriate registered handler.
    */
-  private parseToken(token: MarkdownToken): JSONContent | JSONContent[] | null {
+  private parseToken(token: MarkdownToken, parseImplicitEmptyParagraphs = false): JSONContent | JSONContent[] | null {
     if (!token.type) {
       return null
     }
@@ -353,7 +406,7 @@ export class MarkdownManager {
     }
 
     // If no handler worked, try fallback parsing
-    return this.parseFallbackToken(token)
+    return this.parseFallbackToken(token, parseImplicitEmptyParagraphs)
   }
 
   private lastParseResult: JSONContent | JSONContent[] | null = null
@@ -527,6 +580,7 @@ export class MarkdownManager {
     return {
       parseInline: (tokens: MarkdownToken[]) => this.parseInlineTokens(tokens),
       parseChildren: (tokens: MarkdownToken[]) => this.parseTokens(tokens),
+      parseBlockChildren: (tokens: MarkdownToken[]) => this.parseTokens(tokens, true),
       createTextNode: (text: string, marks?: Array<{ type: string; attrs?: any }>) => {
         const node = {
           type: 'text',
@@ -577,7 +631,6 @@ export class MarkdownManager {
       const token = tokens[i]
 
       if (token.type === 'text') {
-        // Create text node
         result.push({
           type: 'text',
           text: token.text || '',
@@ -723,7 +776,10 @@ export class MarkdownManager {
   /**
    * Fallback parsing for common tokens when no specific handler is registered.
    */
-  private parseFallbackToken(token: MarkdownToken): JSONContent | JSONContent[] | null {
+  private parseFallbackToken(
+    token: MarkdownToken,
+    parseImplicitEmptyParagraphs = false,
+  ): JSONContent | JSONContent[] | null {
     switch (token.type) {
       case 'paragraph':
         return {
@@ -754,7 +810,7 @@ export class MarkdownManager {
       default:
         // Unknown token type - try to parse children if they exist
         if (token.tokens) {
-          return this.parseTokens(token.tokens)
+          return this.parseTokens(token.tokens, parseImplicitEmptyParagraphs)
         }
         return null
     }
@@ -819,7 +875,13 @@ export class MarkdownManager {
     }
   }
 
-  renderNodeToMarkdown(node: JSONContent, parentNode?: JSONContent, index = 0, level = 0): string {
+  renderNodeToMarkdown(
+    node: JSONContent,
+    parentNode?: JSONContent,
+    index = 0,
+    level = 0,
+    meta: Record<string, any> = {},
+  ): string {
     // if node is a text node, we simply return it's text content
     // marks are handled at the array level in renderNodesWithMarkBoundaries
     if (node.type === 'text') {
@@ -835,6 +897,7 @@ export class MarkdownManager {
       return ''
     }
 
+    const previousNode = Array.isArray(parentNode?.content) && index > 0 ? parentNode.content[index - 1] : undefined
     const helpers: MarkdownRendererHelpers = {
       renderChildren: (nodes, separator) => {
         const childLevel = handler.isIndenting ? level + 1 : level
@@ -845,6 +908,11 @@ export class MarkdownManager {
 
         return this.renderNodes(nodes, node, separator || '', index, childLevel)
       },
+      renderChild: (childNode, childIndex) => {
+        const childLevel = handler.isIndenting ? level + 1 : level
+
+        return this.renderNodeToMarkdown(childNode, node, childIndex, childLevel)
+      },
       indent: content => {
         return this.indentString + content
       },
@@ -855,8 +923,10 @@ export class MarkdownManager {
       index,
       level,
       parentType: parentNode?.type,
+      previousNode,
       meta: {
         parentAttrs: parentNode?.attrs,
+        ...meta,
       },
     }
 
@@ -901,6 +971,8 @@ export class MarkdownManager {
   ): string {
     const result: string[] = []
     const activeMarks: Map<string, any> = new Map()
+    const reopenWithHtmlOnNextOpen = new Set<string>()
+    const markOpeningModes = new Map<string, 'markdown' | 'html'>()
     nodes.forEach((node, i) => {
       // Lookahead to the next node to determine if marks need to be closed
       const nextNode = i < nodes.length - 1 ? nodes[i + 1] : null
@@ -917,9 +989,23 @@ export class MarkdownManager {
         const marksToOpen = findMarksToOpen(activeMarks, currentMarks)
         const marksToClose = findMarksToClose(currentMarks, nextNode)
 
+        // When marks simultaneously close (old) AND open (new) at this boundary, the naive
+        // approach of appending old-close and prepending new-open produces interleaved
+        // delimiters like `*456**` (italic open, text, bold close) instead of properly
+        // nested `_456_**` (italic open, text, italic close, bold close).
+        //
+        // The fix: when both are present, defer old mark closings to the end of the node
+        // (after the new marks also close), ensuring correct inner-before-outer order.
+        //
+        // If an already-active mark ends on this node while another mark opens on this same
+        // node, we defer closing the active mark until the end of the node so nesting stays
+        // valid (`**...++abc++**` instead of `**...++abc**++`).
+        const activeMarksClosingHere = marksToClose.filter(markType => activeMarks.has(markType))
+        const hasCrossedBoundary = activeMarksClosingHere.length > 0 && marksToOpen.length > 0
+
         let middleTrailingWhitespace = ''
 
-        if (marksToClose.length > 0) {
+        if (marksToClose.length > 0 && !hasCrossedBoundary) {
           // Extract trailing whitespace before closing marks to prevent invalid markdown like "**text **"
           const middleTrailingMatch = textContent.match(/(\s+)$/)
           if (middleTrailingMatch) {
@@ -927,18 +1013,25 @@ export class MarkdownManager {
             textContent = textContent.slice(0, -middleTrailingWhitespace.length)
           }
         }
-        // Close marks that are ending here
-        marksToClose.forEach(markType => {
-          const mark = currentMarks.get(markType)
-          const closeMarkdown = this.getMarkClosing(markType, mark)
-          if (closeMarkdown) {
-            textContent += closeMarkdown
-          }
-          // deleting closed marks from active marks
-          if (activeMarks.has(markType)) {
-            activeMarks.delete(markType)
-          }
-        })
+
+        if (!hasCrossedBoundary) {
+          // Normal path: close marks that are ending here (no new marks opening simultaneously)
+          marksToClose.forEach(markType => {
+            if (!activeMarks.has(markType)) {
+              return
+            }
+
+            const mark = currentMarks.get(markType)
+            const closeMarkdown = this.getMarkClosing(markType, mark, markOpeningModes.get(markType))
+            if (closeMarkdown) {
+              textContent += closeMarkdown
+            }
+            if (activeMarks.has(markType)) {
+              activeMarks.delete(markType)
+              markOpeningModes.delete(markType)
+            }
+          })
+        }
 
         // Open new marks (should be at the beginning)
         // Extract leading whitespace before opening marks to prevent invalid markdown like "** text**"
@@ -951,26 +1044,53 @@ export class MarkdownManager {
           }
         }
 
+        // Snapshot active mark types before opening new marks, so each new mark's delimiter
+        // is chosen based on what is already active (not including itself).
+        // When crossing a boundary, old marks are still in activeMarks here (not yet removed),
+        // so new marks correctly see them as active context.
         marksToOpen.forEach(({ type, mark }) => {
-          const openMarkdown = this.getMarkOpening(type, mark)
+          const openingMode = reopenWithHtmlOnNextOpen.has(type) ? 'html' : 'markdown'
+          const openMarkdown = this.getMarkOpening(type, mark, openingMode)
           if (openMarkdown) {
             textContent = openMarkdown + textContent
           }
-          if (!marksToClose.includes(type)) {
-            activeMarks.set(type, mark)
-          }
+          markOpeningModes.set(type, openingMode)
+          reopenWithHtmlOnNextOpen.delete(type)
         })
 
+        if (!hasCrossedBoundary) {
+          marksToOpen
+            .slice()
+            .reverse()
+            .forEach(({ type, mark }) => {
+              activeMarks.set(type, mark)
+            })
+        }
+
         // Add leading whitespace before the mark opening
         textContent = leadingWhitespace + textContent
 
-        // Close marks at the end of this node if needed
-        const marksToCloseAtEnd = findMarksToCloseAtEnd(
-          activeMarks,
-          currentMarks,
-          nextNode,
-          this.markSetsEqual.bind(this),
-        )
+        // Determine marks to close at the end of this node.
+        // On a crossed boundary, we close new marks (inner) first, then old marks (outer),
+        // ensuring correct nesting order. Both sets are removed from activeMarks so the
+        // next node's marksToOpen will reopen whichever ones continue.
+        let marksToCloseAtEnd: string[]
+        if (hasCrossedBoundary) {
+          const nextMarkTypes = new Set((nextNode?.marks || []).map((mark: any) => mark.type))
+
+          marksToOpen.forEach(({ type }) => {
+            if (nextMarkTypes.has(type) && this.getHtmlReopenTags(type)) {
+              reopenWithHtmlOnNextOpen.add(type)
+            }
+          })
+
+          marksToCloseAtEnd = [
+            ...marksToOpen.map(m => m.type), // inner (opened here) — close first
+            ...activeMarksClosingHere, // outer (were active before) — close last
+          ]
+        } else {
+          marksToCloseAtEnd = findMarksToCloseAtEnd(activeMarks, currentMarks, nextNode, this.markSetsEqual.bind(this))
+        }
 
         // Extract trailing whitespace before closing marks to prevent invalid markdown like "**text **"
         let trailingWhitespace = ''
@@ -983,12 +1103,13 @@ export class MarkdownManager {
         }
 
         marksToCloseAtEnd.forEach(markType => {
-          const mark = activeMarks.get(markType)
-          const closeMarkdown = this.getMarkClosing(markType, mark)
+          const mark = activeMarks.get(markType) ?? currentMarks.get(markType)
+          const closeMarkdown = this.getMarkClosing(markType, mark, markOpeningModes.get(markType))
           if (closeMarkdown) {
             textContent += closeMarkdown
           }
           activeMarks.delete(markType)
+          markOpeningModes.delete(markType)
         })
 
         // Add trailing whitespace after the mark closing
@@ -999,9 +1120,13 @@ export class MarkdownManager {
       } else {
         // For non-text nodes, close all active marks before rendering, then reopen after
         const marksToReopen = new Map(activeMarks)
+        const openingModesToReopen = new Map(markOpeningModes)
 
         // Close all marks before the node
-        const beforeMarkdown = closeMarksBeforeNode(activeMarks, this.getMarkClosing.bind(this))
+        const beforeMarkdown = closeMarksBeforeNode(activeMarks, (markType, mark) => {
+          return this.getMarkClosing(markType, mark, markOpeningModes.get(markType))
+        })
+        markOpeningModes.clear()
 
         // Render the node
         const nodeContent = this.renderNodeToMarkdown(node, parentNode, i, level)
@@ -1011,7 +1136,11 @@ export class MarkdownManager {
         const afterMarkdown =
           node.type === 'hardBreak'
             ? ''
-            : reopenMarksAfterNode(marksToReopen, activeMarks, this.getMarkOpening.bind(this))
+            : reopenMarksAfterNode(marksToReopen, activeMarks, (markType, mark) => {
+                const openingMode = openingModesToReopen.get(markType) ?? 'markdown'
+                markOpeningModes.set(markType, openingMode)
+                return this.getMarkOpening(markType, mark, openingMode)
+              })
 
         result.push(beforeMarkdown + nodeContent + afterMarkdown)
       }
@@ -1023,7 +1152,11 @@ export class MarkdownManager {
   /**
    * Get the opening markdown syntax for a mark type.
    */
-  private getMarkOpening(markType: string, mark: any): string {
+  private getMarkOpening(markType: string, mark: any, openingMode: 'markdown' | 'html' = 'markdown'): string {
+    if (openingMode === 'html') {
+      return this.getHtmlReopenTags(markType)?.open || ''
+    }
+
     const handlers = this.getHandlersForNodeType(markType)
     const handler = handlers.length > 0 ? handlers[0] : undefined
     if (!handler || !handler.renderMarkdown) {
@@ -1045,6 +1178,7 @@ export class MarkdownManager {
         syntheticNode,
         {
           renderChildren: () => placeholder,
+          renderChild: () => placeholder,
           indent: (content: string) => content,
           wrapInBlock: (prefix: string, content: string) => prefix + content,
         },
@@ -1062,7 +1196,11 @@ export class MarkdownManager {
   /**
    * Get the closing markdown syntax for a mark type.
    */
-  private getMarkClosing(markType: string, mark: any): string {
+  private getMarkClosing(markType: string, mark: any, openingMode: 'markdown' | 'html' = 'markdown'): string {
+    if (openingMode === 'html') {
+      return this.getHtmlReopenTags(markType)?.close || ''
+    }
+
     const handlers = this.getHandlersForNodeType(markType)
     const handler = handlers.length > 0 ? handlers[0] : undefined
     if (!handler || !handler.renderMarkdown) {
@@ -1083,6 +1221,7 @@ export class MarkdownManager {
         syntheticNode,
         {
           renderChildren: () => placeholder,
+          renderChild: () => placeholder,
           indent: (content: string) => content,
           wrapInBlock: (prefix: string, content: string) => prefix + content,
         },
@@ -1098,6 +1237,17 @@ export class MarkdownManager {
     }
   }
 
+  /**
+   * Returns the inline HTML tags an extension exposes for overlap-boundary
+   * reopen handling, if that mark explicitly opted into HTML reopen mode.
+   */
+  private getHtmlReopenTags(markType: string): { open: string; close: string } | undefined {
+    const handlers = this.getHandlersForNodeType(markType)
+    const handler = handlers.length > 0 ? handlers[0] : undefined
+
+    return handler?.htmlReopen
+  }
+
   /**
    * Check if two mark sets are equal.
    */

package/src/utils.ts

@@ -77,14 +77,16 @@ export function findMarksToCloseAtEnd(
   if (isLastNode || nextNodeHasNoMarks || nextNodeHasDifferentMarks) {
     if (nextNode && nextNode.type === 'text' && nextNode.marks) {
       const nextMarks = new Map(nextNode.marks.map((mark: any) => [mark.type, mark]))
-      Array.from(activeMarks.keys()).forEach(markType => {
-        if (!nextMarks.has(markType)) {
-          marksToCloseAtEnd.push(markType)
-        }
-      })
+      Array.from(activeMarks.keys())
+        .reverse()
+        .forEach(markType => {
+          if (!nextMarks.has(markType)) {
+            marksToCloseAtEnd.push(markType)
+          }
+        })
     } else if (isLastNode || nextNodeHasNoMarks) {
       // Close all active marks
-      marksToCloseAtEnd.push(...Array.from(activeMarks.keys()))
+      marksToCloseAtEnd.push(...Array.from(activeMarks.keys()).reverse())
     }
   }