|
7 | 7 | * @module markdown-gfm/html2markdown/html2markdown |
8 | 8 | */ |
9 | 9 |
|
10 | | -import Turndown from 'turndown'; |
| 10 | +import { unified, type Plugin } from 'unified'; |
| 11 | +import rehypeParse from 'rehype-dom-parse'; |
| 12 | +import rehypeRemark from 'rehype-remark'; |
| 13 | +import remarkBreaks from 'remark-breaks'; |
| 14 | +import remarkGfm from 'remark-gfm'; |
| 15 | +import remarkStringify from 'remark-stringify'; |
| 16 | +import { visit } from 'unist-util-visit'; |
| 17 | +import { h } from 'hastscript'; |
| 18 | +import { toHtml } from 'hast-util-to-html'; |
| 19 | +import type { Handle, State } from 'hast-util-to-mdast'; |
| 20 | +import type { Element, Node, Root } from 'hast'; |
11 | 21 |
|
12 | | -// There no avaialble types for 'turndown-plugin-gfm' module and it's not worth to generate them on our own. |
13 | | -/* eslint-disable @typescript-eslint/ban-ts-comment */ |
14 | | -// @ts-ignore |
15 | | -import { gfm } from 'turndown-plugin-gfm'; |
16 | | - |
17 | | -const autolinkRegex = /* #__PURE__ */ new RegExp( |
18 | | - // Prefix. |
19 | | - /\b(?:(?:https?|ftp):\/\/|www\.)/.source + |
20 | | - |
21 | | - // Domain name. |
22 | | - /(?![-_])(?:[-_a-z0-9\u00a1-\uffff]{1,63}\.)+(?:[a-z\u00a1-\uffff]{2,63})/.source + |
23 | | - |
24 | | - // The rest. |
25 | | - /(?:[^\s<>]*)/.source, |
26 | | - 'gi' |
27 | | -); |
28 | | - |
29 | | -class UpdatedTurndown extends Turndown { |
30 | | - public override escape( string: string ): string { |
31 | | - const originalEscape = super.escape; |
32 | | - |
33 | | - function escape( string: string ): string { |
34 | | - string = originalEscape( string ); |
35 | | - |
36 | | - // Escape "<". |
37 | | - string = string.replace( /</g, '\\<' ); |
38 | | - |
39 | | - return string; |
40 | | - } |
41 | | - |
42 | | - // Urls should not be escaped. Our strategy is using a regex to find them and escape everything |
43 | | - // which is out of the matches parts. |
44 | | - |
45 | | - let escaped = ''; |
46 | | - let lastLinkEnd = 0; |
47 | | - |
48 | | - for ( const match of this._matchAutolink( string ) ) { |
49 | | - const index = match.index!; |
50 | | - |
51 | | - // Append the substring between the last match and the current one (if anything). |
52 | | - if ( index > lastLinkEnd ) { |
53 | | - escaped += escape( string.substring( lastLinkEnd, index ) ); |
54 | | - } |
55 | | - |
56 | | - const matchedURL = match[ 0 ]; |
57 | | - |
58 | | - escaped += matchedURL; |
59 | | - |
60 | | - lastLinkEnd = index + matchedURL.length; |
61 | | - } |
62 | | - |
63 | | - // Add text after the last link or at the string start if no matches. |
64 | | - if ( lastLinkEnd < string.length ) { |
65 | | - escaped += escape( string.substring( lastLinkEnd, string.length ) ); |
66 | | - } |
| 22 | +export class MarkdownGfmHtmlToMd { |
| 23 | + private _processor: any; |
| 24 | + private _keepRawTags: Array<string> = []; |
67 | 25 |
|
68 | | - return escaped; |
| 26 | + constructor() { |
| 27 | + this._buildProcessor(); |
69 | 28 | } |
70 | 29 |
|
71 | | - /** |
72 | | - * Trimming end of link. |
73 | | - * https://github.github.com/gfm/#autolinks-extension- |
74 | | - */ |
75 | | - private* _matchAutolink( string: string ) { |
76 | | - for ( const match of string.matchAll( autolinkRegex ) ) { |
77 | | - const matched = match[ 0 ]; |
78 | | - const length = this._autolinkFindEnd( matched ); |
79 | | - |
80 | | - yield Object.assign( |
81 | | - [ matched.substring( 0, length ) ], |
82 | | - { index: match.index } |
83 | | - ); |
| 30 | + public keep( tagName: string ): void { |
| 31 | + this._keepRawTags.push( tagName.toLowerCase() ); |
| 32 | + this._buildProcessor(); |
| 33 | + } |
84 | 34 |
|
85 | | - // We could adjust regex.lastIndex but it's not needed because what we skipped is for sure not a valid URL. |
86 | | - } |
| 35 | + public parse( html: string ): string { |
| 36 | + return this._processor! |
| 37 | + .processSync( html ) |
| 38 | + .toString() |
| 39 | + .trim(); |
87 | 40 | } |
88 | 41 |
|
89 | 42 | /** |
90 | | - * Returns the new length of the link (after it would trim trailing characters). |
| 43 | + * Returns handlers for raw HTML tags that should be kept in the Markdown output. |
91 | 44 | */ |
92 | | - private _autolinkFindEnd( string: string ) { |
93 | | - let length = string.length; |
94 | | - |
95 | | - while ( length > 0 ) { |
96 | | - const char = string[ length - 1 ]; |
97 | | - |
98 | | - if ( '?!.,:*_~\'"'.includes( char ) ) { |
99 | | - length--; |
100 | | - } else if ( char == ')' ) { |
101 | | - let openBrackets = 0; |
102 | | - |
103 | | - for ( let i = 0; i < length; i++ ) { |
104 | | - if ( string[ i ] == '(' ) { |
105 | | - openBrackets++; |
106 | | - } else if ( string[ i ] == ')' ) { |
107 | | - openBrackets--; |
108 | | - } |
109 | | - } |
110 | | - |
111 | | - // If there is fewer opening brackets then closing ones we should remove a closing bracket. |
112 | | - if ( openBrackets < 0 ) { |
113 | | - length--; |
114 | | - } else { |
115 | | - break; |
116 | | - } |
117 | | - } else { |
118 | | - break; |
119 | | - } |
120 | | - } |
| 45 | + private _getRawTagsHandlers(): Record<string, Handle> { |
| 46 | + return this._keepRawTags.reduce( ( handlers: Record<string, Handle>, tagName: string ) => { |
| 47 | + handlers[ tagName ] = ( state: State, node: Element ): any => { |
| 48 | + const tag = toHtml( h( node.tagName, node.properties ), { |
| 49 | + allowDangerousHtml: true, |
| 50 | + closeSelfClosing: true |
| 51 | + } ); |
| 52 | + |
| 53 | + const endOfOpeningTagIndex = tag.indexOf( '>' ); |
| 54 | + const openingTag = tag.slice( 0, endOfOpeningTagIndex + 1 ); |
| 55 | + const closingTag = tag.slice( endOfOpeningTagIndex + 1 ); |
| 56 | + |
| 57 | + return [ |
| 58 | + { type: 'html', value: openingTag }, |
| 59 | + ...state.all( node ), |
| 60 | + { type: 'html', value: closingTag } |
| 61 | + ]; |
| 62 | + }; |
| 63 | + return handlers; |
| 64 | + }, {} as Record<string, Handle> ); |
| 65 | + } |
121 | 66 |
|
122 | | - return length; |
| 67 | + private _buildProcessor() { |
| 68 | + this._processor = unified() |
| 69 | + // Parse HTML to an abstract syntax tree (AST). |
| 70 | + .use( rehypeParse ) |
| 71 | + // Removes `<label>` element from TODO lists. |
| 72 | + .use( removeLabelFromCheckboxes ) |
| 73 | + // Turns HTML syntax tree into Markdown syntax tree. |
| 74 | + .use( rehypeRemark, { |
| 75 | + // Keeps allowed HTML tags. |
| 76 | + handlers: this._getRawTagsHandlers() |
| 77 | + } ) |
| 78 | + // Adds support for GitHub Flavored Markdown (GFM). |
| 79 | + .use( remarkGfm, { |
| 80 | + singleTilde: true |
| 81 | + } ) |
| 82 | + // Replaces line breaks with `<br>` tags. |
| 83 | + .use( remarkBreaks ) |
| 84 | + // Serializes Markdown syntax tree to Markdown string. |
| 85 | + .use( remarkStringify, { |
| 86 | + resourceLink: true, |
| 87 | + emphasis: '_', |
| 88 | + rule: '-', |
| 89 | + handlers: { |
| 90 | + break: () => '\n' |
| 91 | + }, |
| 92 | + unsafe: [ |
| 93 | + { character: '<' } |
| 94 | + ] |
| 95 | + } ); |
123 | 96 | } |
124 | 97 | } |
125 | 98 |
|
126 | 99 | /** |
127 | | - * This is a helper class used by the {@link module:markdown-gfm/markdown Markdown feature} to convert HTML to Markdown. |
| 100 | + * Removes `<label>` element from TODO lists, so that `<input>` and `text` are direct children of `<li>`. |
128 | 101 | */ |
129 | | -export class MarkdownGfmHtmlToMd { |
130 | | - private _parser: UpdatedTurndown; |
131 | | - |
132 | | - constructor() { |
133 | | - this._parser = this._createParser(); |
134 | | - } |
135 | | - |
136 | | - public parse( html: string ): string { |
137 | | - return this._parser.turndown( html ); |
138 | | - } |
139 | | - |
140 | | - public keep( elements: Turndown.Filter ): void { |
141 | | - this._parser.keep( elements ); |
142 | | - } |
143 | | - |
144 | | - private _createParser(): UpdatedTurndown { |
145 | | - const parser = new UpdatedTurndown( { |
146 | | - codeBlockStyle: 'fenced', |
147 | | - hr: '---', |
148 | | - headingStyle: 'atx' |
149 | | - } ); |
150 | | - |
151 | | - parser.use( [ |
152 | | - gfm, |
153 | | - this._todoList |
154 | | - ] ); |
155 | | - |
156 | | - return parser; |
157 | | - } |
158 | | - |
159 | | - // This is a copy of the original taskListItems rule from turndown-plugin-gfm, with minor changes. |
160 | | - private _todoList( turndown: UpdatedTurndown ): void { |
161 | | - turndown.addRule( 'taskListItems', { |
162 | | - filter( node: any ) { |
163 | | - return node.type === 'checkbox' && |
164 | | - // Changes here as CKEditor outputs a deeper structure. |
165 | | - ( node.parentNode.nodeName === 'LI' || node.parentNode.parentNode.nodeName === 'LI' ); |
166 | | - }, |
167 | | - replacement( content: any, node: any ) { |
168 | | - return ( node.checked ? '[x]' : '[ ]' ) + ' '; |
| 102 | +function removeLabelFromCheckboxes(): ReturnType<Plugin> { |
| 103 | + return function( tree: Node ): void { |
| 104 | + visit( tree, 'element', ( node: Element, index: number | null, parent: Root | Element ) => { |
| 105 | + if ( index !== null && node.tagName === 'label' && parent.type === 'element' && parent.tagName === 'li' ) { |
| 106 | + parent.children.splice( index, 1, ...node.children ); |
169 | 107 | } |
170 | 108 | } ); |
171 | | - } |
| 109 | + }; |
172 | 110 | } |
0 commit comments