index.d.ts 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389
  1. /**
  2. * markdown-to-jsx is a fork of
  3. * [simple-markdown v0.2.2](https://github.com/Khan/simple-markdown)
  4. * from Khan Academy. Thank you Khan devs for making such an awesome
  5. * and extensible parsing infra... without it, half of the
  6. * optimizations here wouldn't be feasible. 🙏🏼
  7. */
  8. import * as React from 'react';
  9. /**
  10. * Analogous to `node.type`. Please note that the values here may change at any time,
  11. * so do not hard code against the value directly.
  12. */
  13. export declare const enum RuleType {
  14. blockQuote = "0",
  15. breakLine = "1",
  16. breakThematic = "2",
  17. codeBlock = "3",
  18. codeFenced = "4",
  19. codeInline = "5",
  20. footnote = "6",
  21. footnoteReference = "7",
  22. gfmTask = "8",
  23. heading = "9",
  24. headingSetext = "10",
  25. /** only available if not `disableHTMLParsing` */
  26. htmlBlock = "11",
  27. htmlComment = "12",
  28. /** only available if not `disableHTMLParsing` */
  29. htmlSelfClosing = "13",
  30. image = "14",
  31. link = "15",
  32. /** emits a `link` 'node', does not render directly */
  33. linkAngleBraceStyleDetector = "16",
  34. /** emits a `link` 'node', does not render directly */
  35. linkBareUrlDetector = "17",
  36. /** emits a `link` 'node', does not render directly */
  37. linkMailtoDetector = "18",
  38. newlineCoalescer = "19",
  39. orderedList = "20",
  40. paragraph = "21",
  41. ref = "22",
  42. refImage = "23",
  43. refLink = "24",
  44. table = "25",
  45. tableSeparator = "26",
  46. text = "27",
  47. textBolded = "28",
  48. textEmphasized = "29",
  49. textEscaped = "30",
  50. textMarked = "31",
  51. textStrikethroughed = "32",
  52. unorderedList = "33"
  53. }
  54. declare const enum Priority {
  55. /**
  56. * anything that must scan the tree before everything else
  57. */
  58. MAX = 0,
  59. /**
  60. * scans for block-level constructs
  61. */
  62. HIGH = 1,
  63. /**
  64. * inline w/ more priority than other inline
  65. */
  66. MED = 2,
  67. /**
  68. * inline elements
  69. */
  70. LOW = 3,
  71. /**
  72. * bare text and stuff that is considered leftovers
  73. */
  74. MIN = 4
  75. }
  76. export declare function compiler(markdown: string, options?: MarkdownToJSX.Options): JSX.Element;
  77. /**
  78. * A simple HOC for easy React use. Feed the markdown content as a direct child
  79. * and the rest is taken care of automatically.
  80. */
  81. declare const Markdown: React.FC<{
  82. [key: string]: any;
  83. children: string;
  84. options?: MarkdownToJSX.Options;
  85. }>;
  86. export declare namespace MarkdownToJSX {
  87. /**
  88. * RequireAtLeastOne<{ ... }> <- only requires at least one key
  89. */
  90. type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> & {
  91. [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
  92. }[Keys];
  93. export type CreateElement = typeof React.createElement;
  94. export type HTMLTags = keyof JSX.IntrinsicElements;
  95. export type State = {
  96. /** true if the current content is inside anchor link grammar */
  97. inAnchor?: boolean;
  98. /** true if parsing in an inline context (subset of rules around formatting and links) */
  99. inline?: boolean;
  100. /** true if in a table */
  101. inTable?: boolean;
  102. /** use this for the `key` prop */
  103. key?: React.Key;
  104. /** true if in a list */
  105. list?: boolean;
  106. /** true if parsing in inline context w/o links */
  107. simple?: boolean;
  108. };
  109. export interface BlockQuoteNode {
  110. children: MarkdownToJSX.ParserResult[];
  111. type: RuleType.blockQuote;
  112. }
  113. export interface BreakLineNode {
  114. type: RuleType.breakLine;
  115. }
  116. export interface BreakThematicNode {
  117. type: RuleType.breakThematic;
  118. }
  119. export interface CodeBlockNode {
  120. type: RuleType.codeBlock;
  121. attrs?: JSX.IntrinsicAttributes;
  122. lang?: string;
  123. text: string;
  124. }
  125. export interface CodeFencedNode {
  126. type: RuleType.codeFenced;
  127. }
  128. export interface CodeInlineNode {
  129. type: RuleType.codeInline;
  130. text: string;
  131. }
  132. export interface FootnoteNode {
  133. type: RuleType.footnote;
  134. }
  135. export interface FootnoteReferenceNode {
  136. type: RuleType.footnoteReference;
  137. target: string;
  138. text: string;
  139. }
  140. export interface GFMTaskNode {
  141. type: RuleType.gfmTask;
  142. completed: boolean;
  143. }
  144. export interface HeadingNode {
  145. type: RuleType.heading;
  146. children: MarkdownToJSX.ParserResult[];
  147. id: string;
  148. level: 1 | 2 | 3 | 4 | 5 | 6;
  149. }
  150. export interface HeadingSetextNode {
  151. type: RuleType.headingSetext;
  152. }
  153. export interface HTMLCommentNode {
  154. type: RuleType.htmlComment;
  155. }
  156. export interface ImageNode {
  157. type: RuleType.image;
  158. alt?: string;
  159. target: string;
  160. title?: string;
  161. }
  162. export interface LinkNode {
  163. type: RuleType.link;
  164. children: MarkdownToJSX.ParserResult[];
  165. target: string;
  166. title?: string;
  167. }
  168. export interface LinkAngleBraceNode {
  169. type: RuleType.linkAngleBraceStyleDetector;
  170. }
  171. export interface LinkBareURLNode {
  172. type: RuleType.linkBareUrlDetector;
  173. }
  174. export interface LinkMailtoNode {
  175. type: RuleType.linkMailtoDetector;
  176. }
  177. export interface OrderedListNode {
  178. type: RuleType.orderedList;
  179. items: MarkdownToJSX.ParserResult[][];
  180. ordered: true;
  181. start?: number;
  182. }
  183. export interface UnorderedListNode {
  184. type: RuleType.unorderedList;
  185. items: MarkdownToJSX.ParserResult[][];
  186. ordered: false;
  187. }
  188. export interface NewlineNode {
  189. type: RuleType.newlineCoalescer;
  190. }
  191. export interface ParagraphNode {
  192. type: RuleType.paragraph;
  193. children: MarkdownToJSX.ParserResult[];
  194. }
  195. export interface ReferenceNode {
  196. type: RuleType.ref;
  197. }
  198. export interface ReferenceImageNode {
  199. type: RuleType.refImage;
  200. alt?: string;
  201. ref: string;
  202. }
  203. export interface ReferenceLinkNode {
  204. type: RuleType.refLink;
  205. children: MarkdownToJSX.ParserResult[];
  206. fallbackChildren: MarkdownToJSX.ParserResult[];
  207. ref: string;
  208. }
  209. export interface TableNode {
  210. type: RuleType.table;
  211. /**
  212. * alignment for each table column
  213. */
  214. align: ('left' | 'right' | 'center')[];
  215. cells: MarkdownToJSX.ParserResult[][][];
  216. header: MarkdownToJSX.ParserResult[][];
  217. }
  218. export interface TableSeparatorNode {
  219. type: RuleType.tableSeparator;
  220. }
  221. export interface TextNode {
  222. type: RuleType.text;
  223. text: string;
  224. }
  225. export interface BoldTextNode {
  226. type: RuleType.textBolded;
  227. children: MarkdownToJSX.ParserResult[];
  228. }
  229. export interface ItalicTextNode {
  230. type: RuleType.textEmphasized;
  231. children: MarkdownToJSX.ParserResult[];
  232. }
  233. export interface EscapedTextNode {
  234. type: RuleType.textEscaped;
  235. }
  236. export interface MarkedTextNode {
  237. type: RuleType.textMarked;
  238. children: MarkdownToJSX.ParserResult[];
  239. }
  240. export interface StrikethroughTextNode {
  241. type: RuleType.textStrikethroughed;
  242. children: MarkdownToJSX.ParserResult[];
  243. }
  244. export interface HTMLNode {
  245. type: RuleType.htmlBlock;
  246. attrs: JSX.IntrinsicAttributes;
  247. children?: ReturnType<MarkdownToJSX.NestedParser> | undefined;
  248. noInnerParse: Boolean;
  249. tag: MarkdownToJSX.HTMLTags;
  250. text?: string | undefined;
  251. }
  252. export interface HTMLSelfClosingNode {
  253. type: RuleType.htmlSelfClosing;
  254. attrs: JSX.IntrinsicAttributes;
  255. tag: string;
  256. }
  257. export type ParserResult = BlockQuoteNode | BreakLineNode | BreakThematicNode | CodeBlockNode | CodeFencedNode | CodeInlineNode | FootnoteNode | FootnoteReferenceNode | GFMTaskNode | HeadingNode | HeadingSetextNode | HTMLCommentNode | ImageNode | LinkNode | LinkAngleBraceNode | LinkBareURLNode | LinkMailtoNode | OrderedListNode | UnorderedListNode | NewlineNode | ParagraphNode | ReferenceNode | ReferenceImageNode | ReferenceLinkNode | TableNode | TableSeparatorNode | TextNode | BoldTextNode | ItalicTextNode | EscapedTextNode | MarkedTextNode | StrikethroughTextNode | HTMLNode | HTMLSelfClosingNode;
  258. export type NestedParser = (input: string, state?: MarkdownToJSX.State) => MarkdownToJSX.ParserResult[];
  259. export type Parser<ParserOutput> = (capture: RegExpMatchArray, nestedParse: NestedParser, state?: MarkdownToJSX.State) => ParserOutput;
  260. export type RuleOutput = (ast: MarkdownToJSX.ParserResult | MarkdownToJSX.ParserResult[], state: MarkdownToJSX.State) => JSX.Element;
  261. export type Rule<ParserOutput = MarkdownToJSX.ParserResult> = {
  262. match: (source: string, state: MarkdownToJSX.State, prevCapturedString?: string) => RegExpMatchArray;
  263. order: Priority;
  264. parse: MarkdownToJSX.Parser<Omit<ParserOutput, 'type'>>;
  265. render?: (node: ParserOutput,
  266. /**
  267. * Continue rendering AST nodes if applicable.
  268. */
  269. render: RuleOutput, state?: MarkdownToJSX.State) => React.ReactChild;
  270. };
  271. export type Rules = {
  272. [K in ParserResult['type']]: Rule<Extract<ParserResult, {
  273. type: K;
  274. }>>;
  275. };
  276. export type Override = RequireAtLeastOne<{
  277. component: React.ElementType;
  278. props: Object;
  279. }> | React.ElementType;
  280. export type Overrides = {
  281. [tag in HTMLTags]?: Override;
  282. } & {
  283. [customComponent: string]: Override;
  284. };
  285. export type Options = Partial<{
  286. /**
  287. * Ultimate control over the output of all rendered JSX.
  288. */
  289. createElement: (tag: Parameters<CreateElement>[0], props: JSX.IntrinsicAttributes, ...children: React.ReactChild[]) => React.ReactChild;
  290. /**
  291. * Disable the compiler's best-effort transcription of provided raw HTML
  292. * into JSX-equivalent. This is the functionality that prevents the need to
  293. * use `dangerouslySetInnerHTML` in React.
  294. */
  295. disableParsingRawHTML: boolean;
  296. /**
  297. * Forces the compiler to have space between hash sign and the header text which
  298. * is explicitly stated in the most of the markdown specs.
  299. * https://github.github.com/gfm/#atx-heading
  300. * `The opening sequence of # characters must be followed by a space or by the end of line.`
  301. */
  302. enforceAtxHeadings: boolean;
  303. /**
  304. * Forces the compiler to always output content with a block-level wrapper
  305. * (`<p>` or any block-level syntax your markdown already contains.)
  306. */
  307. forceBlock: boolean;
  308. /**
  309. * Forces the compiler to always output content with an inline wrapper (`<span>`)
  310. */
  311. forceInline: boolean;
  312. /**
  313. * Forces the compiler to wrap results, even if there is only a single
  314. * child or no children.
  315. */
  316. forceWrapper: boolean;
  317. /**
  318. * Supply additional HTML entity: unicode replacement mappings.
  319. *
  320. * Pass only the inner part of the entity as the key,
  321. * e.g. `&le;` -> `{ "le": "\u2264" }`
  322. *
  323. * By default
  324. * the following entities are replaced with their unicode equivalents:
  325. *
  326. * ```
  327. * &amp;
  328. * &apos;
  329. * &gt;
  330. * &lt;
  331. * &nbsp;
  332. * &quot;
  333. * ```
  334. */
  335. namedCodesToUnicode: {
  336. [key: string]: string;
  337. };
  338. /**
  339. * Selectively control the output of particular HTML tags as they would be
  340. * emitted by the compiler.
  341. */
  342. overrides: Overrides;
  343. /**
  344. * Allows for full control over rendering of particular rules.
  345. * For example, to implement a LaTeX renderer such as `react-katex`:
  346. *
  347. * ```
  348. * renderRule(next, node, renderChildren, state) {
  349. * if (node.type === RuleType.codeBlock && node.lang === 'latex') {
  350. * return (
  351. * <TeX as="div" key={state.key}>
  352. * {String.raw`${node.text}`}
  353. * </TeX>
  354. * )
  355. * }
  356. *
  357. * return next();
  358. * }
  359. * ```
  360. *
  361. * Thar be dragons obviously, but you can do a lot with this
  362. * (have fun!) To see how things work internally, check the `render`
  363. * method in source for a particular rule.
  364. */
  365. renderRule: (
  366. /** Resume normal processing, call this function as a fallback if you are not returning custom JSX. */
  367. next: () => React.ReactChild,
  368. /** the current AST node, use `RuleType` against `node.type` for identification */
  369. node: ParserResult,
  370. /** use as `renderChildren(node.children)` for block nodes */
  371. renderChildren: RuleOutput,
  372. /** contains `key` which should be supplied to the topmost JSX element */
  373. state: State) => React.ReactChild;
  374. /**
  375. * Override normalization of non-URI-safe characters for use in generating
  376. * HTML IDs for anchor linking purposes.
  377. */
  378. slugify: (source: string) => string;
  379. /**
  380. * Declare the type of the wrapper to be used when there are multiple
  381. * children to render. Set to `null` to get an array of children back
  382. * without any wrapper, or use `React.Fragment` to get a React element
  383. * that won't show up in the DOM.
  384. */
  385. wrapper: React.ElementType | null;
  386. }>;
  387. export {};
  388. }
  389. export default Markdown;