initial commit
This commit is contained in:
evilchili
Generated
+1857
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"name": "hopdown",
|
||||
"version": "1.0.0",
|
||||
"description": "Configurable HTML <=> Markdown converter for WYSIWYG editors.",
|
||||
"main": "dist/js/index.js",
|
||||
"module": "dist/esm/index.js",
|
||||
"files": [
|
||||
"dist/lib/"
|
||||
],
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"tsc": "tsc -p tsconfig.json && tsc -p tsconfig-cjs.json",
|
||||
"build": "npm run tsc",
|
||||
"test": "npm run build && vitest"
|
||||
},
|
||||
"license": "CC0-1.0",
|
||||
"author": "evilchili",
|
||||
"devDependencies": {
|
||||
"@vitest/browser-playwright": "^4.1.10",
|
||||
"happy-dom": "^20.11.2",
|
||||
"node-watch": "^0.7.4",
|
||||
"playwright": "^1.62.1",
|
||||
"typescript": "^7.0.2",
|
||||
"vitest": "^4.1.10"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './ts';
|
||||
@@ -0,0 +1,20 @@
|
||||
import { TagType } from "./types";
|
||||
import * as tags from "./tags";
|
||||
|
||||
export const defaultTags = new tags.TagCollection([
|
||||
new tags.Bold(),
|
||||
new tags.Italic(),
|
||||
new tags.BoldItalic(),
|
||||
new tags.Strikethrough(),
|
||||
new tags.Code(),
|
||||
new tags.Anchor(),
|
||||
new tags.HardBreak(),
|
||||
new tags.FencedCode(),
|
||||
new tags.HorizontalRule(),
|
||||
new tags.Heading(),
|
||||
new tags.Blockquote(),
|
||||
new tags.OrderedList(),
|
||||
new tags.UnorderedList(),
|
||||
new tags.Table(),
|
||||
new tags.Paragraph()
|
||||
]);
|
||||
@@ -0,0 +1,453 @@
|
||||
/*
|
||||
* hopdown.ts
|
||||
* - Configurable markdown <=> HTML converter.
|
||||
*/
|
||||
|
||||
import { defaultTags } from "./defaults";
|
||||
import { Tokenizer } from "./tokenizer";
|
||||
import type { Token, SourceToken, MatchContext, TagType, TagCollectionType } from './types';
|
||||
|
||||
|
||||
export function escapeHtml(source: string): string {
|
||||
return source
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"');
|
||||
}
|
||||
|
||||
/**
|
||||
* The preprocessor interface. see HopDown.preprocessLines.
|
||||
*/
|
||||
interface preprocessedLines {
|
||||
lines:string[],
|
||||
referenceLinks: Map<string, { url: string; title?: string }>
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* A configurable markdown <=> HTML converter.
|
||||
*
|
||||
* Examples:
|
||||
*
|
||||
* const hopdown = new HopDown();
|
||||
*
|
||||
* const html = hopdown.toHTML('**bold**');
|
||||
* html === '<p><strong>bold</strong></p>';
|
||||
*
|
||||
* const markdown = hopdown.toMarkdown(html);
|
||||
* markdown === '**bold**';
|
||||
*
|
||||
* const node = hopdown.toEditorNode('**bold**');
|
||||
* (node as HTMLElement).outerHTML === (
|
||||
* "<div>" +
|
||||
* "<span class='delim strong'>**</span>" +
|
||||
* "bold" +
|
||||
* "<span class='delim strong'>" +
|
||||
* "</div>"
|
||||
* );
|
||||
*/
|
||||
export class HopDown {
|
||||
public tags: TagCollectionType;
|
||||
private referenceLinks: Map<string, { url: string; title?: string }> = new Map();
|
||||
private tokenizer: Tokenizer;
|
||||
|
||||
constructor(tags: TagCollectionType | null) {
|
||||
this.tags = tags || defaultTags;
|
||||
this.tokenizer = new Tokenizer(this.tags);
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert a markdown string to tokens.
|
||||
*/
|
||||
public tokenize(source: string): Token[] {
|
||||
let text = source;
|
||||
|
||||
// Resolve reference links before tokenizing
|
||||
text = this.resolveReferenceLinks(text);
|
||||
|
||||
// Normalize _ emphasis to *
|
||||
text = this.normalizeUnderscores(text);
|
||||
const tokens = this.tokenizer.tokenize(text);
|
||||
return tokens;
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert an HTML string or a DocumentFragment to markdown.
|
||||
*/
|
||||
public toMarkdown = (html: string | DocumentFragment): string => {
|
||||
var md = '';
|
||||
if (typeof(html) == 'string') {
|
||||
const container = document.createElement('div');
|
||||
container.innerHTML = html;
|
||||
md = this.nodeToMarkdown(container);
|
||||
} else {
|
||||
md = this.nodeToMarkdown(html);
|
||||
}
|
||||
return md.replace(/\n{3,}/g, '\n\n').trim();
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert a markdown string to an HTML string.
|
||||
*/
|
||||
public toHTML = (markdown: string): string => {
|
||||
|
||||
const output: string[] = [];
|
||||
|
||||
const preprocessed: preprocessedLines = this.preprocessMarkdown(markdown);
|
||||
if (!preprocessed.lines) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const blockTags = this.tags.ordered.filter(t => {
|
||||
return t.isBlock && t.constructor.name !== 'Paragraph'
|
||||
})
|
||||
const pTag = this.tags.getByElementName('p');
|
||||
if (pTag === undefined) {
|
||||
throw new Error("Cannot parse without a paragraph tag!");
|
||||
}
|
||||
|
||||
let lineIndex = 0;
|
||||
while (lineIndex < preprocessed.lines.length) {
|
||||
let context: MatchContext;
|
||||
let matched = false;
|
||||
let token: SourceToken | null;
|
||||
for (const tag of blockTags) {
|
||||
context = {
|
||||
lines: preprocessed.lines,
|
||||
index: lineIndex,
|
||||
text: '',
|
||||
offset: 0,
|
||||
};
|
||||
token = tag.match!(context, this.tags);
|
||||
if (!token) {
|
||||
continue;
|
||||
}
|
||||
output.push(tag.toHTML(token, this.inlineToHTML));
|
||||
lineIndex += token.consumed;
|
||||
matched = true;
|
||||
break;
|
||||
}
|
||||
if (matched) {
|
||||
continue;
|
||||
}
|
||||
|
||||
/* always check the paragraph tag last */
|
||||
token = pTag.match!(context!, this.tags);
|
||||
if (token) {
|
||||
output.push(pTag.toHTML(token, this.inlineToHTML));
|
||||
lineIndex += token.consumed;
|
||||
continue;
|
||||
}
|
||||
lineIndex++;
|
||||
}
|
||||
return output.join('\n');
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert a markdown string to a DocumentFragment consisting of wysiwyg editor nodes.
|
||||
*/
|
||||
public toEditorNode = (markdown: string): DocumentFragment => {
|
||||
const tokens = this.tokenize(markdown);
|
||||
return this.tokensToEditorNodes(tokens);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Recursive entrypoint for converting markdown to html.
|
||||
*/
|
||||
private inlineToHTML = (markdown: string): string => {
|
||||
const tokens = this.tokenize(markdown);
|
||||
return this.tokensToHTML(tokens);
|
||||
}
|
||||
|
||||
/**
|
||||
* Recursive entrypoint for converting markdown to editor nodes.
|
||||
*/
|
||||
private inlineToEditorNodes = (markdown: string): DocumentFragment => {
|
||||
const tokens = this.tokenize(markdown);
|
||||
return this.tokensToEditorNodes(tokens);
|
||||
};
|
||||
|
||||
/**
|
||||
* Process a markdown string by splitting it into lines, stripping empty lines, and capturing reference links.
|
||||
*/
|
||||
private preprocessMarkdown(markdown: string): preprocessedLines {
|
||||
|
||||
const blankLine = /^\s*$/;
|
||||
const refDefinition = /^\[(?<label>[^\]]+)\]:\s+(?<url>\S+)(?:\s+"(?<title>[^"]*)")?$/;
|
||||
|
||||
const referenceLinks = new Map<string, { url: string; title?: string }>;
|
||||
const output: string[] = [];
|
||||
|
||||
const lines = markdown.replace(/\r\n/g, '\n').split('\n');
|
||||
for (const line of lines) {
|
||||
const match = line.match(refDefinition);
|
||||
if (match?.groups) {
|
||||
this.referenceLinks.set(
|
||||
match.groups.label.toLowerCase(),
|
||||
{
|
||||
url: match.groups.url,
|
||||
title: match.groups.title,
|
||||
},
|
||||
);
|
||||
continue;
|
||||
}
|
||||
if (!blankLine.test(line)) {
|
||||
output.push(line)
|
||||
}
|
||||
}
|
||||
return {
|
||||
lines: output,
|
||||
referenceLinks: referenceLinks
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Convert an HTML node to a markdown string. Used by toMarkdown().
|
||||
*/
|
||||
private nodeToMarkdown = (node: Node): string => {
|
||||
|
||||
// DocumentFragment
|
||||
if (node.nodeType == 11) {
|
||||
return Array.from(node.childNodes).map(child => {
|
||||
return this.nodeToMarkdown(child);
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// text
|
||||
if (node.nodeType == 3) {
|
||||
return node.textContent || '';
|
||||
|
||||
// not a block-level element
|
||||
} else if (node.nodeType !== 1) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const tag = this.tags.getByElementName(node.nodeName);
|
||||
if (!tag) {
|
||||
return Array.from(node.childNodes)
|
||||
.map(child => this.nodeToMarkdown(child))
|
||||
.join('');
|
||||
}
|
||||
const ret = tag.toMarkdown(node as HTMLElement, this.nodeToMarkdown);
|
||||
return ret;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Replace [text][ref] and [text][] with [text](url) using the
|
||||
* reference definitions collected during block parsing.
|
||||
*/
|
||||
private resolveReferenceLinks(text: string): string {
|
||||
if (this.referenceLinks.size === 0) {
|
||||
return text;
|
||||
}
|
||||
const refLink = /\[(?<text>[^\[\]]+)\]\[(?<label>[^\]]*)\]/g;
|
||||
return text.replace(refLink, (...args) => {
|
||||
const groups = args[args.length - 1] as Record<string, string>;
|
||||
const label = (groups.label || groups.text).toLowerCase();
|
||||
const ref = this.referenceLinks.get(label);
|
||||
if (!ref) {
|
||||
return args[0];
|
||||
}
|
||||
const titlePart = ref.title ? ` "${ref.title}"` : '';
|
||||
return `[${groups.text}](${ref.url}${titlePart})`;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Normalize flanking underscore runs to asterisks so the tokenizer
|
||||
* only needs to handle * delimiters for emphasis.
|
||||
*/
|
||||
private normalizeUnderscores(text: string): string {
|
||||
// Protect backslash-escaped underscores from normalization
|
||||
const escapePlaceholder = '\x00U\x00';
|
||||
const safeText = text.replace(/\\_/g, escapePlaceholder);
|
||||
|
||||
const punctuation = `[\\s.,;:!?'"()\\[\\]{}<>\\-/\\\\~#@&^|]`;
|
||||
const openRun = new RegExp(
|
||||
`(?<=^|${punctuation})` + // preceded by start, space, or punctuation
|
||||
`(_+)` + // one or more underscores
|
||||
`(?=\\S)`, // followed by non-whitespace
|
||||
'g'
|
||||
);
|
||||
const closeRun = new RegExp(
|
||||
`(?<=\\S)` + // preceded by non-whitespace
|
||||
`(_+)` + // one or more underscores
|
||||
`(?=$|${punctuation})`, // followed by end, space, or punctuation
|
||||
'g'
|
||||
);
|
||||
const toAsterisks = (_: string, run: string) => '*'.repeat(run.length);
|
||||
const normalized = safeText
|
||||
.replace(openRun, toAsterisks)
|
||||
.replace(closeRun, toAsterisks);
|
||||
|
||||
return normalized.replace(/\x00U\x00/g, '\\_');
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Convert a token stream to editor nodes.
|
||||
*/
|
||||
private tokensToEditorNodes(tokens: Token[]): DocumentFragment {
|
||||
|
||||
// First pass: match open/close pairs using a stack
|
||||
const paired = this.pairDelimiters(tokens);
|
||||
|
||||
// Second pass: build HTML from paired tokens
|
||||
const fragment = document.createDocumentFragment();
|
||||
|
||||
var grouping: Node[] = [];
|
||||
|
||||
const groupAsNode = () => {
|
||||
const div = document.createElement('div');
|
||||
for (const node of grouping) {
|
||||
div.appendChild(node);
|
||||
}
|
||||
return div;
|
||||
};
|
||||
|
||||
for (const token of paired) {
|
||||
if (token.role == 'html') {
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = token.value;
|
||||
for (const node of Array.from(div.childNodes)) {
|
||||
grouping.push(node);
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
if (token.tag) {
|
||||
const thisNode = token.tag.toEditorNode(token, this.inlineToEditorNodes);
|
||||
if (! thisNode) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (token.role == 'open') {
|
||||
if (grouping.length) {
|
||||
fragment.append(groupAsNode());
|
||||
}
|
||||
grouping = [thisNode];
|
||||
continue;
|
||||
}
|
||||
|
||||
if (token.role == 'close') {
|
||||
grouping.push(thisNode);
|
||||
fragment.append(groupAsNode());
|
||||
grouping = [];
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!grouping.length) {
|
||||
fragment.appendChild(thisNode.cloneNode(true));
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
const text = document.createTextNode(token.value);
|
||||
grouping.push(text);
|
||||
continue;
|
||||
|
||||
}
|
||||
if (grouping.length) {
|
||||
fragment.appendChild(groupAsNode());
|
||||
}
|
||||
return fragment;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Convert a token stream to HTML. Matches open/close delimiter
|
||||
* pairs and wraps their content in the appropriate HTML tags.
|
||||
* Unmatched delimiters are emitted as literal text.
|
||||
*/
|
||||
private tokensToHTML(tokens: Token[]): string {
|
||||
|
||||
// First pass: match open/close pairs using a stack
|
||||
const paired = this.pairDelimiters(tokens);
|
||||
|
||||
// Second pass: build HTML from paired tokens
|
||||
let html = '';
|
||||
for (const token of paired) {
|
||||
console.log(token);
|
||||
if (token.role == 'text') {
|
||||
html += escapeHtml(token.value);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (token.role == 'html') {
|
||||
html += token.value;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (token.role == 'link') {
|
||||
html += this.tags.getByElementName('A')!.toHTML(token, this.inlineToHTML) || token.value;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (token.tag) {
|
||||
html += token.tag.toHTML(token, this.inlineToHTML);
|
||||
continue;
|
||||
}
|
||||
|
||||
html += escapeHtml(token.value);
|
||||
}
|
||||
return html;
|
||||
}
|
||||
|
||||
/**
|
||||
* Matchn/close delimiter pairs in a token stream. Unmatched
|
||||
* openers/closers are converted to text tokens so they render
|
||||
* as literal characters.
|
||||
*/
|
||||
private pairDelimiters(tokens: Token[]): Token[] {
|
||||
const openStack: number[] = [];
|
||||
const result = [...tokens];
|
||||
|
||||
// Track which delimiter types are currently open to prevent
|
||||
// forbidden nesting (e.g. <del> inside <del>, <em> inside <em>)
|
||||
const openDelimiters = new Set<string>();
|
||||
|
||||
for (let index = 0; index < result.length; index++) {
|
||||
const token = result[index];
|
||||
|
||||
if (token.role === 'block') {
|
||||
token.role = openDelimiters.has(token.sequence!) ? 'close' : 'open';
|
||||
}
|
||||
|
||||
if (token.role === 'open') {
|
||||
// Don't open a delimiter that's already open (prevents nesting)
|
||||
if (openDelimiters.has(token.sequence!)) {
|
||||
result[index] = {
|
||||
role: 'text',
|
||||
value: token.value,
|
||||
};
|
||||
continue;
|
||||
}
|
||||
openStack.push(index);
|
||||
openDelimiters.add(token.sequence!);
|
||||
} else if (token.role === 'close') {
|
||||
let matched = false;
|
||||
for (let stackIndex = openStack.length - 1; stackIndex >= 0; stackIndex--) {
|
||||
const openerIndex = openStack[stackIndex];
|
||||
if (result[openerIndex].sequence === token.sequence) {
|
||||
openStack.splice(stackIndex, 1);
|
||||
openDelimiters.delete(token.sequence!);
|
||||
matched = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!matched) {
|
||||
result[index] = {
|
||||
role: 'text',
|
||||
value: token.value,
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from "./hopdown";
|
||||
export * from "./defaults";
|
||||
+784
@@ -0,0 +1,784 @@
|
||||
import type { Token, TagType, TagCollectionType, MatchContext, SourceToken, ListItem, ListResult} from './types';
|
||||
import { escapeHtml } from "./hopdown";
|
||||
|
||||
|
||||
/**
|
||||
* Patterns shared across multiple tag classes. Defined once here
|
||||
* so the regexes aren't duplicated and can be referenced by name.
|
||||
*/
|
||||
const blankLine = /^\s*$/;
|
||||
const unorderedMarker = /^[*\-]\s/;
|
||||
const orderedMarker = /^\d+\.\s/;
|
||||
const escapeRegex = /[.*+?^${}()|[\]\\]/g;
|
||||
const tableSeparator = new RegExp(
|
||||
'^'
|
||||
+ '\\|?' // optional leading pipe
|
||||
+ '\\s*:?-+:?\\s*' // first column separator (optional alignment colons)
|
||||
+ '('
|
||||
+ '\\|' // pipe between columns
|
||||
+ '\\s*:?-+:?\\s*' // subsequent column separator
|
||||
+ ')*' // zero or more additional columns
|
||||
+ '\\|?' // optional trailing pipe
|
||||
+ '\\s*$' // end of line
|
||||
);
|
||||
|
||||
|
||||
export function childNodesToMarkdown(element: HTMLElement, callback: Function): string {
|
||||
return Array.from(element.childNodes)
|
||||
.map(child => callback(child))
|
||||
.join('');
|
||||
}
|
||||
|
||||
|
||||
export class Tag implements TagType {
|
||||
element: string[] = [''];
|
||||
opener: string = '';
|
||||
closer: string = '';
|
||||
delimiter: string | null = null;
|
||||
precedence: number = 50;
|
||||
isBlock: boolean = false;
|
||||
|
||||
toHTML(token: any, callback: Function): string {
|
||||
if (token.role == 'open') {
|
||||
return this.element.map(el => { return `<${el.toUpperCase()}>` }).join('');
|
||||
}
|
||||
if (token.role == 'close') {
|
||||
const rev = this.element;
|
||||
rev.reverse();
|
||||
return rev.map(el => { return `</${el.toUpperCase()}>` }).join('');
|
||||
}
|
||||
return token.value;
|
||||
};
|
||||
|
||||
toMarkdown(element: HTMLElement, callback: Function): string {
|
||||
const children = childNodesToMarkdown(element, callback);
|
||||
return `${this.delimiter}${children || element.textContent || ''}${this.delimiter}`;
|
||||
};
|
||||
|
||||
toEditorNode(token: Token, callback: Function): Node {
|
||||
if (token.role == 'open' || token.role == 'close') {
|
||||
const span = document.createElement('span');
|
||||
span.classList.add('delim');
|
||||
for (const el of this.element) {
|
||||
span.classList.add(el.toLowerCase());
|
||||
};
|
||||
|
||||
if (this.isBlock) {
|
||||
span.textContent = token.role == 'open' ? this.opener : this.closer;
|
||||
} else {
|
||||
span.textContent = this.delimiter;
|
||||
}
|
||||
return span;
|
||||
}
|
||||
return document.createTextNode(token.value);
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
export class TagCollection implements TagCollectionType {
|
||||
|
||||
tags: Record<string, TagType> = {};
|
||||
ordered: TagType[];
|
||||
openers: RegExp[];
|
||||
|
||||
constructor(tags: TagType[]) {
|
||||
for (const tag of tags) {
|
||||
if (tag.constructor.name in this.tags) {
|
||||
throw new Error(`Duplicate tag instances found for class ${tag.constructor.name}! Do you need to subclass it?`);
|
||||
}
|
||||
this.tags[tag.constructor.name] = tag;
|
||||
}
|
||||
this.ordered = tags.sort((a, b) => {
|
||||
const p1 = a.precedence - (a.isBlock ? 100 : 0);
|
||||
const p2 = b.precedence - (b.isBlock ? 100 : 0);
|
||||
return p1 < p2 ? -1 : 1;
|
||||
});
|
||||
this.validate();
|
||||
|
||||
const escapeRegex = /[.*+?^${}()|[\]\\]/g;
|
||||
this.openers = this.ordered.filter(t => { return t.delimiter !== null }).map(tag => {
|
||||
const escaped = tag.delimiter!.replace(escapeRegex, '\\$&');
|
||||
const escapedChar = tag.delimiter![0].replace(escapeRegex, '\\$&');
|
||||
return new RegExp(
|
||||
`(?<!${escapedChar})` +
|
||||
`${escaped}` +
|
||||
`(?!${escapedChar})` +
|
||||
`([^\\x01\\x02]+)$`
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
private validate(): void {
|
||||
const inline = this.ordered.filter(t => { return !t.delimiter });
|
||||
for (let outer = 0; outer < inline.length; outer++) {
|
||||
for (let inner = outer + 1; inner < inline.length; inner++) {
|
||||
const first = this.ordered[outer];
|
||||
const second = this.ordered[inner];
|
||||
if (!(first.delimiter && second.delimiter)) {
|
||||
continue;
|
||||
}
|
||||
const firstIsPrefix = second.delimiter.startsWith(first.delimiter);
|
||||
const secondIsPrefix = first.delimiter.startsWith(second.delimiter);
|
||||
if (!firstIsPrefix && !secondIsPrefix) {
|
||||
continue;
|
||||
}
|
||||
const longer = first.delimiter.length > second.delimiter.length ? first : second;
|
||||
const shorter = first.delimiter.length > second.delimiter.length ? second : first;
|
||||
if (longer.precedence >= shorter.precedence) {
|
||||
throw new Error(
|
||||
`Tag "${longer.constructor.name}" (delimiter "${longer.delimiter}") must have ` +
|
||||
`lower precedence than "${shorter.constructor.name}" (delimiter "${shorter.delimiter}") ` +
|
||||
`because its delimiter is a prefix match. ` +
|
||||
`Got ${longer.constructor.name}=${longer.precedence}, ${shorter.constructor.name}=${shorter.precedence}.`
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getByElementName(element: string): TagType | undefined {
|
||||
const el = element.toUpperCase();
|
||||
return this.ordered.filter(t => {
|
||||
return [...t.element, ...t.aliases ?? []].includes(el);
|
||||
})[0] || undefined;
|
||||
}
|
||||
}
|
||||
|
||||
export class Bold extends Tag {
|
||||
element = ['STRONG'];
|
||||
aliases = ['B'];
|
||||
delimiter = '**';
|
||||
shortcut = 'Ctrl+B';
|
||||
precedence = 40;
|
||||
|
||||
}
|
||||
|
||||
export class Italic extends Tag {
|
||||
element = ['EM'];
|
||||
aliases = ['I'];
|
||||
delimiter = '*';
|
||||
shortcut = 'Ctrl+I';
|
||||
precedence = 30;
|
||||
}
|
||||
|
||||
export class BoldItalic extends Tag {
|
||||
element = ['STRONG', 'EM'];
|
||||
delimiter = '***';
|
||||
precedence = 50;
|
||||
}
|
||||
|
||||
export class Strikethrough extends Tag {
|
||||
element = ['DEL'];
|
||||
aliases = ['S', 'STRIKE'];
|
||||
delimiter = '~~';
|
||||
}
|
||||
|
||||
export class Code extends Tag {
|
||||
element = ['CODE'];
|
||||
delimiter = '`';
|
||||
}
|
||||
|
||||
export class Anchor extends Tag {
|
||||
element = ['A'];
|
||||
|
||||
toHTML(token: Token, callback: Function) {
|
||||
const titleAttr = token.title
|
||||
? ` TITLE="${escapeHtml(token.title)}"`
|
||||
: '';
|
||||
return `<A HREF="${escapeHtml(token.href || '')}"${titleAttr}>${escapeHtml(token.value)}</A>`;
|
||||
}
|
||||
|
||||
toMarkdown(element: HTMLElement, callback: Function) {
|
||||
const href = element.getAttribute('href') || '';
|
||||
const title = element.getAttribute('title');
|
||||
const titlePart = title ? ` "${title}"` : '';
|
||||
return '[' + element.innerText + '](' + href + titlePart + ')';
|
||||
}
|
||||
|
||||
toEditorNode(token: Token, callback: Function) {
|
||||
return document.createElement('A');
|
||||
}
|
||||
}
|
||||
|
||||
class BlockTag extends Tag {
|
||||
isBlock: boolean = true;
|
||||
delimiter = null;
|
||||
|
||||
toMarkdown(element: HTMLElement, callback: Function): string {
|
||||
const children = childNodesToMarkdown(element, callback);
|
||||
const ret = `${this.opener || ''}${children || element.textContent || ''}${this.closer || ''}`;
|
||||
return ret;
|
||||
};
|
||||
|
||||
match(context: MatchContext, tags?: TagCollectionType): SourceToken | null {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export class HardBreak extends BlockTag {
|
||||
match(context: MatchContext) {
|
||||
return null;
|
||||
}
|
||||
toHTML(): string { return '<BR>' }
|
||||
toMarkdown(): string { return ' \n' }
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Fenced code blocks: lines between ``` delimiters become <pre><code>.
|
||||
*
|
||||
* converter.toHTML('```js\nlet x = 1;\n```')
|
||||
* // <pre><code class="language-js">let x = 1;</code></pre>
|
||||
*/
|
||||
export class FencedCode extends BlockTag {
|
||||
opener = '```';
|
||||
closer = '```';
|
||||
|
||||
element = ['PRE'];
|
||||
button = {
|
||||
show: true,
|
||||
label: 'Code Block',
|
||||
shortcut: 'Ctrl+Shift+E',
|
||||
};
|
||||
template = '```\ncode\n```';
|
||||
replaceSelection = true;
|
||||
|
||||
match(context: MatchContext): SourceToken | null {
|
||||
// Accepts both ``` and ~~~ as fence delimiters
|
||||
const fencePattern = /^(?<fence>`{3,}|~{3,})(?<lang>.*)/;
|
||||
const matched = context.lines[context.index].match(fencePattern);
|
||||
if (!matched?.groups) {
|
||||
return null;
|
||||
}
|
||||
const fence = matched.groups.fence;
|
||||
const lang = matched.groups.lang.trim();
|
||||
const code: string[] = [];
|
||||
let lineIndex = context.index + 1;
|
||||
while (lineIndex < context.lines.length && !context.lines[lineIndex].startsWith(fence)) {
|
||||
code.push(context.lines[lineIndex++]);
|
||||
}
|
||||
return {
|
||||
opener: fence + lang,
|
||||
closer: '',
|
||||
content: code.join('\n'),
|
||||
raw: '',
|
||||
consumed: lineIndex + 1 - context.index,
|
||||
meta: { lang },
|
||||
};
|
||||
}
|
||||
|
||||
toHTML(token: SourceToken, callback: Function): string {
|
||||
const langAttr = token.meta?.lang
|
||||
? ` class="language-${escapeHtml(token.meta.lang)}"`
|
||||
: '';
|
||||
return `<pre${langAttr}>${escapeHtml(token.content)}</pre>`;
|
||||
}
|
||||
|
||||
toMarkdown(element: HTMLElement, callback: Function): string {
|
||||
const lang = element.className.match(/language-(\S+)/)?.[1] || '';
|
||||
const content = element?.textContent || '';
|
||||
return '\n\n' + this.opener + `${lang}\n${content}\n` + this.closer + '\n\n' ;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Three or more *, -, or _ on a line become <hr>.
|
||||
*
|
||||
* converter.toHTML('---') // '<hr>'
|
||||
*/
|
||||
export class HorizontalRule extends BlockTag {
|
||||
element = ['HR'];
|
||||
button = {
|
||||
show: true,
|
||||
label: 'Divider',
|
||||
shortcut: 'Ctrl+Shift+-',
|
||||
};
|
||||
template = '---';
|
||||
replaceSelection = false;
|
||||
pattern = /^(\*{3,}|-{3,}|_{3,})\s*$/;
|
||||
|
||||
match(context: MatchContext): SourceToken | null {
|
||||
const matched = context.lines[context.index].match(this.pattern);
|
||||
if (!matched) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
opener: '',
|
||||
closer: '',
|
||||
content: '',
|
||||
raw: '',
|
||||
consumed: 1,
|
||||
};
|
||||
}
|
||||
|
||||
toHTML(token: SourceToken, callback: Function): string {
|
||||
return `<${this.element[0].toUpperCase()}>`;
|
||||
}
|
||||
|
||||
toMarkdown(element: HTMLElement, callback: Function): string {
|
||||
return '\n***\n';
|
||||
}
|
||||
}
|
||||
|
||||
export class Heading extends BlockTag {
|
||||
element = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'];
|
||||
|
||||
match(context: MatchContext): SourceToken | null {
|
||||
// ATX heading: # through ######, optional closing #s
|
||||
const atxPattern = /^(?<hashes>#{1,6})\s+(?<content>.*?)(?:\s+#+\s*)?$/;
|
||||
const matched = context.lines[context.index].match(atxPattern);
|
||||
if (matched?.groups) {
|
||||
return {
|
||||
opener: matched.groups.hashes + ' ',
|
||||
content: matched.groups.content.trim(),
|
||||
closer: '',
|
||||
raw: '',
|
||||
consumed: 1,
|
||||
meta: { level: String(matched.groups.hashes.length) },
|
||||
};
|
||||
}
|
||||
|
||||
if (context.index + 1 < context.lines.length) {
|
||||
const nextLine = context.lines[context.index + 1];
|
||||
const setextUnderline = /^(?<marker>=+|-+)\s*$/;
|
||||
const underlineMatch = nextLine.match(setextUnderline);
|
||||
if (underlineMatch?.groups) {
|
||||
const content = context.lines[context.index].trim();
|
||||
if (content.length > 0) {
|
||||
const level = underlineMatch.groups.marker[0] === '=' ? '1' : '2';
|
||||
return {
|
||||
opener: '',
|
||||
closer: '',
|
||||
content: content,
|
||||
raw: '',
|
||||
consumed: 2,
|
||||
meta: { level },
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
toHTML(token: SourceToken, callback: Function): string {
|
||||
const level = token.meta!.level;
|
||||
const id = this.anchorId(token.content);
|
||||
return `<h${level} id='${id}'>${callback(token.content)}</h${level}>`;
|
||||
}
|
||||
|
||||
toMarkdown(element: HTMLElement, callback: Function): string {
|
||||
const inner = childNodesToMarkdown(element, callback)
|
||||
const level = parseInt(element.nodeName[1]);
|
||||
return '\n\n' + '#'.repeat(level) + ' ' + inner + '\n\n';
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Generate a PascalCase anchor ID from heading text so that
|
||||
* in-page links like #MyHeading work without manual IDs.
|
||||
*/
|
||||
|
||||
private anchorId(text: string): string {
|
||||
return text.replace(escapeRegex, ' ').trim().split(/\s+/).map(word =>
|
||||
word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
|
||||
).join('_');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Lines prefixed with > become blockquotes. Consecutive > lines
|
||||
* are merged into a single blockquote.
|
||||
*
|
||||
* converter.toHTML('> hello\n> world')
|
||||
* // <blockquote><p>hello\nworld</p></blockquote>
|
||||
*/
|
||||
export class Blockquote extends BlockTag {
|
||||
element = ['BLOCKQUOTE'];
|
||||
hidden = false;
|
||||
template = '> Quote\n> continues here';
|
||||
|
||||
match(context: MatchContext): SourceToken | null {
|
||||
const quotePrefix = /^>\s?/;
|
||||
if (!quotePrefix.test(context.lines[context.index])) {
|
||||
return null;
|
||||
}
|
||||
const lines: string[] = [];
|
||||
let lineIndex = context.index;
|
||||
while (lineIndex < context.lines.length && quotePrefix.test(context.lines[lineIndex])) {
|
||||
lines.push(context.lines[lineIndex++].replace(quotePrefix, ''));
|
||||
}
|
||||
return {
|
||||
opener: '> ',
|
||||
closer: '',
|
||||
content: lines.join('\n'),
|
||||
raw: '',
|
||||
consumed: lineIndex - context.index,
|
||||
};
|
||||
}
|
||||
|
||||
toHTML(token: SourceToken, callback: Function): string {
|
||||
const inner = callback(token.content);
|
||||
const breaks = inner.replace(/([^\n])\n(?!\n)/g, '$1<br>')
|
||||
.replace(/\n\n(.+?)(\n\n|$)/g, '<p>$1</p>');
|
||||
return '<blockquote>' + breaks + '</blockquote>';
|
||||
}
|
||||
|
||||
toMarkdown(element: HTMLElement, callback: Function): string {
|
||||
// Each <p> inside the blockquote is a paragraph group.
|
||||
// Within a <p>, <br> elements create line breaks.
|
||||
// Separate paragraphs get a blank > line between them.
|
||||
const paragraphs: string[] = [];
|
||||
for (const child of Array.from(element.childNodes)) {
|
||||
const el = child as HTMLElement;
|
||||
if (child.nodeType === 1 && el.tagName === 'P') {
|
||||
const lines = this.paragraphToLines(el, callback);
|
||||
paragraphs.push(">");
|
||||
paragraphs.push(lines.map(line => '> ' + line).join('\n'));
|
||||
} else {
|
||||
const text = callback(child).trim();
|
||||
if (text) {
|
||||
paragraphs.push('> ' + text);
|
||||
}
|
||||
}
|
||||
}
|
||||
return '\n\n' + paragraphs.join('\n') + '\n\n';
|
||||
}
|
||||
|
||||
/**
|
||||
* Split a paragraph's content into lines at <br> elements.
|
||||
*/
|
||||
private paragraphToLines(paragraph: HTMLElement, callback: Function): string[] {
|
||||
const lines: string[] = [];
|
||||
let currentLine = '';
|
||||
for (const child of Array.from(paragraph.childNodes)) {
|
||||
if (child.nodeType === 1 && (child as HTMLElement).tagName === 'BR') {
|
||||
lines.push(currentLine);
|
||||
currentLine = '';
|
||||
} else {
|
||||
currentLine += callback(child);
|
||||
}
|
||||
}
|
||||
if (currentLine.trim()) {
|
||||
lines.push(currentLine);
|
||||
}
|
||||
return lines;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Ordered and unordered lists with arbitrary nesting. Indentation
|
||||
* determines depth; mixed list types (ul inside ol) are supported.
|
||||
*
|
||||
* converter.toHTML('- one\n- two\n 1. nested')
|
||||
*/
|
||||
export class UnorderedList extends BlockTag {
|
||||
element = ['UL'];
|
||||
hidden = false;
|
||||
|
||||
match(context: MatchContext): SourceToken | null {
|
||||
const line = context.lines[context.index];
|
||||
const prefixPattern = /^((?:[*\-]|\d+\.)\s)/;
|
||||
const matched = line.match(prefixPattern);
|
||||
if (!matched) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Count how many lines this list consumes so HopDown can
|
||||
// advance past them. The actual parsing happens in toHTML
|
||||
// where we have access to the inline converter.
|
||||
const consumed = this.countListLines(context.lines, context.index);
|
||||
return {
|
||||
opener: matched[1],
|
||||
closer: '',
|
||||
content: '',
|
||||
raw: '',
|
||||
consumed,
|
||||
meta: {
|
||||
startIndex: String(context.index),
|
||||
lines: JSON.stringify(context.lines.slice(context.index, context.index + consumed)),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
toHTML(token: SourceToken, callback: Function): string {
|
||||
const lines = JSON.parse(token.meta!.lines) as string[];
|
||||
const result = this.parseBlock(lines, 0, 0, callback);
|
||||
return result.html;
|
||||
}
|
||||
|
||||
toMarkdown(element: HTMLElement, callback: Function): string {
|
||||
return this.nodeToMarkdown(element, 0, callback);
|
||||
}
|
||||
|
||||
private countListLines(lines: string[], start: number): number {
|
||||
const indentedUnordered = /^(\s*)[*\-+]\s/;
|
||||
const indentedOrdered = /^(\s*)\d+\.\s/;
|
||||
let lineIndex = start;
|
||||
while (lineIndex < lines.length) {
|
||||
const line = lines[lineIndex];
|
||||
if (blankLine.test(line)) {
|
||||
break;
|
||||
}
|
||||
if (!indentedUnordered.test(line) && !indentedOrdered.test(line)) {
|
||||
break;
|
||||
}
|
||||
lineIndex++;
|
||||
}
|
||||
return lineIndex - start;
|
||||
}
|
||||
|
||||
/**
|
||||
* Recursively parse markdown list lines into HTML, handling nested
|
||||
* sublists at arbitrary depth and mixed list types (ul/ol).
|
||||
*/
|
||||
private parseBlock(lines: string[], start: number, indent: number, callback: Function): ListResult {
|
||||
const prefix = new RegExp(
|
||||
'^'
|
||||
+ ' '.repeat(indent) // indentation for this nesting level
|
||||
+ '([\\*\\-+]|\\d+\\.)' // bullet or number marker
|
||||
+ '\\s' // space after marker
|
||||
);
|
||||
const isOl = orderedMarker.test(lines[start].trim());
|
||||
const tag = isOl ? 'ol' : 'ul';
|
||||
const items: ListItem[] = [];
|
||||
let lineIndex = start;
|
||||
|
||||
while (lineIndex < lines.length) {
|
||||
const line = lines[lineIndex];
|
||||
if (blankLine.test(line)) {
|
||||
break;
|
||||
}
|
||||
const leadingWhitespace = /^(\s*)/;
|
||||
const lineIndent = line.match(leadingWhitespace)![1].length;
|
||||
if (lineIndent < indent) {
|
||||
break;
|
||||
}
|
||||
if (lineIndent > indent) {
|
||||
const sub = this.parseBlock(lines, lineIndex, lineIndent, callback);
|
||||
items[items.length - 1].sub = sub.html;
|
||||
lineIndex = sub.end;
|
||||
continue;
|
||||
}
|
||||
if (!prefix.test(line)) {
|
||||
break;
|
||||
}
|
||||
items.push({
|
||||
text: line.replace(prefix, ''),
|
||||
sub: '',
|
||||
});
|
||||
lineIndex++;
|
||||
}
|
||||
|
||||
const html = `<${tag}>`
|
||||
+ items.map(item => '<li>' + callback(item.text) + item.sub + '</li>').join('')
|
||||
+ `</${tag}>`;
|
||||
return {
|
||||
html,
|
||||
end: lineIndex,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert an HTML list back to markdown. Recurses into nested
|
||||
* sublists with 2-space indentation per depth level.
|
||||
*/
|
||||
private nodeToMarkdown(node: HTMLElement, depth: number, callback: Function): string {
|
||||
const isOl = node.nodeName === 'OL';
|
||||
const indent = ' '.repeat(depth);
|
||||
const lines: string[] = [];
|
||||
|
||||
Array.from(node.children).forEach((listItem, index) => {
|
||||
const marker = isOl ? (index + 1) + '. ' : '* ';
|
||||
const { text, sublist } = this.partitionListItem(listItem, depth, callback);
|
||||
lines.push(indent + marker + text.trim());
|
||||
if (sublist) {
|
||||
lines.push(sublist);
|
||||
}
|
||||
});
|
||||
|
||||
const result = lines.join('\n');
|
||||
return depth === 0
|
||||
? '\n\n' + result + '\n\n'
|
||||
: result;
|
||||
}
|
||||
|
||||
private partitionListItem(listItem: Element, depth: number, callback: Function): { text: string; sublist: string } {
|
||||
let text = '';
|
||||
let sublist = '';
|
||||
for (const child of Array.from(listItem.childNodes)) {
|
||||
if (child.nodeType === 1 && (child.nodeName === 'UL' || child.nodeName === 'OL')) {
|
||||
sublist += this.nodeToMarkdown(child as HTMLElement, depth + 1, callback);
|
||||
} else {
|
||||
text += callback(child);
|
||||
}
|
||||
}
|
||||
return {
|
||||
text,
|
||||
sublist,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class OrderedList extends UnorderedList {
|
||||
element = ['OL'];
|
||||
}
|
||||
|
||||
/**
|
||||
* Pipe-delimited tables with optional column alignment.
|
||||
*
|
||||
* converter.toHTML('| A | B |\n|---|---|\n| 1 | 2 |')
|
||||
*/
|
||||
export class Table extends BlockTag {
|
||||
element = ['TABLE'];
|
||||
hidden = false;
|
||||
template = '| Header 1 | Header 2 |\n|----------|----------|\n| Cell 1 | Cell 2 |';
|
||||
replaceSelection = false;
|
||||
|
||||
match(context: MatchContext): SourceToken | null {
|
||||
const { lines, index } = context;
|
||||
if (lines[index].indexOf('|') === -1
|
||||
|| index + 1 >= lines.length) {
|
||||
return null;
|
||||
}
|
||||
// Second line must be the separator row (e.g. |---|---|)
|
||||
if (!tableSeparator.test(lines[index + 1])) {
|
||||
return null;
|
||||
}
|
||||
const headers = this.parseRow(lines[index]);
|
||||
const aligns = this.parseAligns(lines[index + 1]);
|
||||
const rows: string[][] = [];
|
||||
let lineIndex = index + 2;
|
||||
while (lineIndex < lines.length && lines[lineIndex].indexOf('|') !== -1 && !blankLine.test(lines[lineIndex])) {
|
||||
rows.push(this.parseRow(lines[lineIndex++]));
|
||||
}
|
||||
return {
|
||||
content: '',
|
||||
opener: '',
|
||||
closer: '',
|
||||
raw: '',
|
||||
consumed: lineIndex - index,
|
||||
meta: {
|
||||
headers: JSON.stringify(headers),
|
||||
aligns: JSON.stringify(aligns),
|
||||
rows: JSON.stringify(rows),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
toHTML(token: SourceToken, callback: Function): string {
|
||||
const headers: string[] = JSON.parse(token.meta!.headers);
|
||||
const aligns: (string | null)[] = JSON.parse(token.meta!.aligns);
|
||||
const rows: string[][] = JSON.parse(token.meta!.rows);
|
||||
|
||||
const cell = (tag: string, text: string, index: number): string => {
|
||||
const align = aligns[index]
|
||||
? ` class="align-${aligns[index]}"`
|
||||
: '';
|
||||
return `<${tag}${align}>${callback(text)}</${tag}>`;
|
||||
};
|
||||
|
||||
const head = '<thead><tr>'
|
||||
+ headers.map((text, column) => cell('th', text, column)).join('')
|
||||
+ '</tr></thead>';
|
||||
const body = rows.map(row =>
|
||||
'<tr>' + row.map((text, column) => cell('td', text, column)).join('') + '</tr>'
|
||||
).join('');
|
||||
return `<table>${head}<tbody>${body}</tbody></table>`;
|
||||
}
|
||||
|
||||
toMarkdown(element: HTMLElement, callback: Function): string {
|
||||
const rows = Array.from(element.querySelectorAll('tr'));
|
||||
if (!rows.length) {
|
||||
return '';
|
||||
}
|
||||
const headers = Array.from(rows[0].querySelectorAll('th,td'))
|
||||
.map(cell => callback(cell).trim());
|
||||
|
||||
const separator = Array.from(element.querySelectorAll('th')).map( h => {
|
||||
return h.className == 'align-center' ? ':---:' :
|
||||
h.className == 'align-right' ? '---:' :
|
||||
'---';
|
||||
});
|
||||
|
||||
const output = [
|
||||
'| ' + headers.join(' | ') + ' |',
|
||||
'| ' + separator.join(' | ') + ' |',
|
||||
];
|
||||
for (const row of rows.slice(1)) {
|
||||
const cells = Array.from(row.querySelectorAll('td,th'))
|
||||
.map(cell => callback(cell).trim());
|
||||
output.push('| ' + cells.join(' | ') + ' |');
|
||||
}
|
||||
return '\n\n' + output.join('\n') + '\n\n';
|
||||
}
|
||||
|
||||
private parseRow(line: string): string[] {
|
||||
return line
|
||||
.replace(/^\|/, '')
|
||||
.replace(/\|$/, '')
|
||||
.split('|')
|
||||
.map(cell => cell.trim());
|
||||
}
|
||||
|
||||
private parseAligns(line: string): (string | null)[] {
|
||||
const centerAlign = /^:-+:$/;
|
||||
const rightAlign = /^-+:$/;
|
||||
return this.parseRow(line).map(cell => {
|
||||
if (centerAlign.test(cell)) {
|
||||
return 'center';
|
||||
}
|
||||
if (rightAlign.test(cell)) {
|
||||
return 'right';
|
||||
}
|
||||
return null;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export class Paragraph extends BlockTag {
|
||||
element = ['P'];
|
||||
opener = '';
|
||||
closer = '';
|
||||
precedence = -1;
|
||||
|
||||
match(context: MatchContext, tags?: TagCollectionType): SourceToken | null {
|
||||
const collected: string[] = [];
|
||||
let lineIndex = context.index;
|
||||
while (lineIndex < context.lines.length) {
|
||||
const line = context.lines[lineIndex];
|
||||
const nextLine = lineIndex < context.lines.length ? context.lines[lineIndex + 1]: '';
|
||||
for (const pattern of [...tags!.openers, blankLine]) {
|
||||
if (pattern.test(line)) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
// Table: current line has pipes and next line is a separator row
|
||||
if (line.indexOf('|') !== -1) {
|
||||
if (nextLine && tableSeparator.test(nextLine)) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
collected.push(context.lines[lineIndex++]);
|
||||
}
|
||||
if (!collected.length) {
|
||||
return null;
|
||||
}
|
||||
const ret = {
|
||||
opener: '',
|
||||
closer: '',
|
||||
content: collected.join('\n'),
|
||||
raw: '',
|
||||
consumed: lineIndex - context.index,
|
||||
};
|
||||
return ret;
|
||||
}
|
||||
|
||||
toHTML(token: SourceToken, callback: Function): string {
|
||||
return '<p>' + callback(token.content) + '</p>';
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,370 @@
|
||||
/*
|
||||
* tokenizer.ts — markdown tokenizer.
|
||||
*
|
||||
* Scans markdown text left-to-right producing a typed token stream.
|
||||
* Tokens carry their semantic role (delimiter, text, link, etc.)
|
||||
* so downstream consumers can make correct escaping and pairing
|
||||
* decisions without regex heuristics.
|
||||
*
|
||||
* const tokenizer = new Tokenizer(delimiterDefs);
|
||||
* const tokens = tokenizer.tokenize('hello **bold** end');
|
||||
* // [text "hello "] [open "**"] [text "bold"] [close "**"] [text " end"]
|
||||
*/
|
||||
|
||||
/**
|
||||
* A single token in the inline token stream. The `role` field
|
||||
* distinguishes structural markers from literal content, which
|
||||
* is the key insight that makes round-trip escaping correct.
|
||||
*/
|
||||
import type { Token, TagType, TagCollectionType } from "./types";
|
||||
|
||||
/**
|
||||
* Characters that count as punctuation for flanking delimiter rules.
|
||||
* A delimiter is left-flanking if preceded by whitespace/punctuation
|
||||
* and followed by non-whitespace. Right-flanking is the reverse.
|
||||
*/
|
||||
const PUNCTUATION = new Set(
|
||||
' \t\n\u00A0.,;:!?\'"()[]{}/<>\\-~#@&^|*`_'.split('')
|
||||
);
|
||||
|
||||
/**
|
||||
* Characters that can be backslash-escaped in markdown.
|
||||
*/
|
||||
const ESCAPABLE = new Set(
|
||||
'\\`*_{}[]()#+-.!~|><'.split('')
|
||||
);
|
||||
|
||||
/**
|
||||
* Named HTML entities recognized by the tokenizer.
|
||||
*/
|
||||
const NAMED_ENTITIES: Record<string, string> = {
|
||||
'amp': '&',
|
||||
'lt': '<',
|
||||
'gt': '>',
|
||||
'quot': '"',
|
||||
'apos': "'",
|
||||
'nbsp': '\u00A0',
|
||||
};
|
||||
|
||||
/**
|
||||
* Scans markdown text into a stream of typed tokens. Handles
|
||||
* backslash escapes, entities, flanking rules, links,
|
||||
* autolinks, HTML tags, and hard line breaks.
|
||||
*
|
||||
* const tokenizer = new Tokenizer([
|
||||
* { delimiter: '**', htmlTag: 'strong', recursive: true, precedence: 40 },
|
||||
* { delimiter: '*', htmlTag: 'em', recursive: true, precedence: 50 },
|
||||
* ]);
|
||||
* const tokens = tokenizer.tokenize('**bold**');
|
||||
*/
|
||||
export class Tokenizer {
|
||||
private tags: TagType[];
|
||||
|
||||
constructor(tags: TagCollectionType) {
|
||||
this.tags = tags.ordered;
|
||||
}
|
||||
|
||||
/**
|
||||
* Tokenize a markdown string into an inline token stream.
|
||||
*
|
||||
* tokenizer.tokenize('hello **world**')
|
||||
* // [text "hello "] [open "**"] [text "world"] [close "**"]
|
||||
*/
|
||||
tokenize(source: string): Token[] {
|
||||
const tokens: Token[] = [];
|
||||
let position = 0;
|
||||
let textBuffer = '';
|
||||
|
||||
const flushText = () => {
|
||||
if (textBuffer.length > 0) {
|
||||
tokens.push({
|
||||
role: 'text',
|
||||
value: textBuffer,
|
||||
});
|
||||
textBuffer = '';
|
||||
}
|
||||
};
|
||||
|
||||
while (position < source.length) {
|
||||
const remaining = source.slice(position);
|
||||
|
||||
// Backslash escape: \X → literal X
|
||||
if (source[position] === '\\' && position + 1 < source.length) {
|
||||
const nextChar = source[position + 1];
|
||||
if (ESCAPABLE.has(nextChar)) {
|
||||
textBuffer += '\\' + nextChar;
|
||||
position += 2;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
// Hard line break: two+ trailing spaces before newline
|
||||
if (source[position] === ' ') {
|
||||
const spaceMatch = remaining.match(/^(?<spaces> {2,})\n/);
|
||||
if (spaceMatch?.groups) {
|
||||
flushText();
|
||||
tokens.push({ role: 'break', value: '<br>' });
|
||||
position += spaceMatch[0].length;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
// HTML entity resolution: &name; or &#digits; or &#xhex;
|
||||
if (source[position] === '&') {
|
||||
const resolved = this.resolveEntity(remaining);
|
||||
if (resolved) {
|
||||
textBuffer += resolved.character;
|
||||
position += resolved.length;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
// Link: [text](url) or [text](url "title")
|
||||
if (source[position] === '[') {
|
||||
const link = this.matchLink(source, position);
|
||||
if (link) {
|
||||
flushText();
|
||||
tokens.push({
|
||||
role: 'link',
|
||||
value: link.text,
|
||||
href: link.href,
|
||||
title: link.title,
|
||||
});
|
||||
position += link.length;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
// Autolink: <url> and/or HTML
|
||||
if (source[position] === '<') {
|
||||
const autolink = this.matchAutolink(remaining);
|
||||
if (autolink) {
|
||||
flushText();
|
||||
tokens.push({
|
||||
role: 'link',
|
||||
value: autolink.url,
|
||||
href: autolink.url,
|
||||
tag: this.tags.filter(t => { return t.constructor.name == 'Anchor' })[0]
|
||||
});
|
||||
position += autolink.length;
|
||||
continue;
|
||||
}
|
||||
// HTML tag passthrough
|
||||
const htmlTagMatch = this.matchHtmlTag(remaining);
|
||||
if (htmlTagMatch) {
|
||||
flushText();
|
||||
tokens.push({
|
||||
role: 'html',
|
||||
value: htmlTagMatch.tag,
|
||||
});
|
||||
position += htmlTagMatch.length;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
// autolink bare URLs
|
||||
const bareUrl = this.matchBareUrl(remaining);
|
||||
if (bareUrl) {
|
||||
flushText();
|
||||
tokens.push({
|
||||
role: 'link',
|
||||
value: bareUrl.url,
|
||||
href: bareUrl.url,
|
||||
tag: this.tags.filter(t => { return t.constructor.name == 'Anchor' })[0]
|
||||
});
|
||||
position += bareUrl.length;
|
||||
continue;
|
||||
}
|
||||
|
||||
// Delimiter: check each registered delimiter
|
||||
const match = this.matchTag(source, position);
|
||||
if (match && match.sequence?.length) {
|
||||
flushText();
|
||||
tokens.push(match);
|
||||
position += match.sequence?.length;
|
||||
continue;
|
||||
}
|
||||
|
||||
// Plain character
|
||||
textBuffer += source[position];
|
||||
position++;
|
||||
}
|
||||
|
||||
flushText();
|
||||
return tokens;
|
||||
}
|
||||
|
||||
/**
|
||||
* Try to resolve an HTML entity at the start of the string.
|
||||
* Returns the resolved character and the length consumed, or null.
|
||||
*/
|
||||
private resolveEntity(text: string): { character: string; length: number } | null {
|
||||
const namedPattern = /^&(?<name>[a-zA-Z]+);/;
|
||||
const numericPattern = /^&#(?<code>\d+);/;
|
||||
const hexPattern = /^&#x(?<hex>[0-9a-fA-F]+);/;
|
||||
|
||||
const named = text.match(namedPattern);
|
||||
if (named?.groups) {
|
||||
const resolved = NAMED_ENTITIES[named.groups.name.toLowerCase()];
|
||||
if (resolved) {
|
||||
return {
|
||||
character: resolved,
|
||||
length: named[0].length,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const numeric = text.match(numericPattern);
|
||||
if (numeric?.groups) {
|
||||
return {
|
||||
character: String.fromCharCode(parseInt(numeric.groups.code, 10)),
|
||||
length: numeric[0].length,
|
||||
};
|
||||
}
|
||||
|
||||
const hex = text.match(hexPattern);
|
||||
if (hex?.groups) {
|
||||
return {
|
||||
character: String.fromCharCode(parseInt(hex.groups.hex, 16)),
|
||||
length: hex[0].length,
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Match a code span starting at the given position.
|
||||
* Handles single backtick delimiters only (not multi-backtick).
|
||||
*/
|
||||
private matchCodeSpan(
|
||||
source: string,
|
||||
position: number,
|
||||
): { content: string; raw: string } | null {
|
||||
if (source[position] !== '`') {
|
||||
return null;
|
||||
}
|
||||
const closeIndex = source.indexOf('`', position + 1);
|
||||
if (closeIndex === -1) {
|
||||
return null;
|
||||
}
|
||||
const content = source.slice(position + 1, closeIndex);
|
||||
return {
|
||||
content,
|
||||
raw: source.slice(position, closeIndex + 1),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Match a markdown link [text](url) or [text](url "title")
|
||||
* starting at the given position. Disallows [ in link text
|
||||
* to prevent nested link ambiguity.
|
||||
*/
|
||||
private matchLink(
|
||||
source: string,
|
||||
position: number,
|
||||
): { text: string; href: string; title?: string; length: number } | null {
|
||||
const linkPattern = /^\[(?<text>[^\[\]]+)\]\((?<href>[^\s)]+)(?:\s+"(?<title>[^"]*)")?\)/;
|
||||
const match = source.slice(position).match(linkPattern);
|
||||
if (!match?.groups) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
text: match.groups.text,
|
||||
href: match.groups.href,
|
||||
title: match.groups.title,
|
||||
length: match[0].length,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Match an angle-bracket autolink <url> at the start of the string.
|
||||
*/
|
||||
private matchAutolink(text: string): { url: string; length: number } | null {
|
||||
const pattern = /^<(?<url>https?:\/\/[^\s>]+)>/;
|
||||
const match = text.match(pattern);
|
||||
if (!match?.groups) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
url: match.groups.url,
|
||||
length: match[0].length,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Match a bare URL (https://...) at the start of the string.
|
||||
*/
|
||||
private matchBareUrl(text: string): { url: string; length: number } | null {
|
||||
const pattern = /^[\w]+?:\/\/[^\s<>\x00]+/;
|
||||
const match = text.match(pattern);
|
||||
if (!match) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
url: match[0],
|
||||
length: match[0].length,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Match an HTML tag at the start of the string.
|
||||
*/
|
||||
private matchHtmlTag(text: string): { tag: string; length: number } | null {
|
||||
const pattern = /^<\/?[a-zA-Z][a-zA-Z0-9]*(?:\s+[^>]*)?\s*\/?>/;
|
||||
const match = text.match(pattern);
|
||||
if (!match) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
tag: match[0],
|
||||
length: match[0].length,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Try to match a delimiter at the given position. For runs of the
|
||||
* same character (e.g. *** = 3 asterisks), the run is split into
|
||||
* the longest registered delimiter that fits, then the remainder.
|
||||
* This handles cases like **bold***italic* where *** must split
|
||||
* into ** (close bold) + * (open italic).
|
||||
*/
|
||||
private matchTag(source: string, position: number): Token | null {
|
||||
|
||||
// Count the full run of the same character
|
||||
var sequence = source[position];
|
||||
let runLength = 0;
|
||||
while (position + runLength < source.length && source[position + runLength] === sequence) {
|
||||
runLength++;
|
||||
}
|
||||
if (runLength === 0) {
|
||||
return null;
|
||||
}
|
||||
sequence = sequence.repeat(runLength);
|
||||
|
||||
// get the tag that matches this sequence
|
||||
for (const tag of this.tags) {
|
||||
const delim = tag.isBlock ? tag.opener : tag.delimiter;
|
||||
if (delim !== sequence) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const charBefore = position > 0 ? source[position - 1] : '\n';
|
||||
const charAfter = source[position + sequence.length];
|
||||
|
||||
const leftFlanking = (charBefore === undefined || PUNCTUATION.has(charBefore) || charBefore === '\n')
|
||||
&& charAfter !== undefined && charAfter !== ' ' && charAfter !== '\n' && charAfter !== '\t' && charAfter !== '\u00A0';
|
||||
|
||||
const rightFlanking = charBefore !== undefined && charBefore !== ' ' && charBefore !== '\n' && charBefore !== '\t' && charBefore !== '\u00A0'
|
||||
&& (charAfter === undefined || PUNCTUATION.has(charAfter) || charAfter === '\n');
|
||||
|
||||
return {
|
||||
role: leftFlanking ? 'open' : rightFlanking ? 'close' : 'block',
|
||||
sequence: sequence,
|
||||
value: sequence,
|
||||
tag: tag,
|
||||
};
|
||||
};
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
export interface Token {
|
||||
role: 'text' | 'open' | 'close' | 'link' | 'html' | 'break' | 'block';
|
||||
value: string;
|
||||
|
||||
// for tokens corresponding to tags;;
|
||||
tag?: TagType;
|
||||
sequence?: string;
|
||||
|
||||
/** For link tokens: the href and optional title. */
|
||||
href?: string;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* A Tag is the core abstraction: it knows how to match markdown syntax,
|
||||
* convert it to HTML, and convert the HTML back to markdown. Tags are
|
||||
* registered by HTML selector (e.g. 'STRONG,B') so the converter can
|
||||
* look them up during HTML→markdown conversion.
|
||||
*/
|
||||
export interface TagType {
|
||||
element: string[];
|
||||
aliases?: string[];
|
||||
|
||||
delimiter: string | null;
|
||||
opener: string | null;
|
||||
closer: string | null;
|
||||
|
||||
match?(context: MatchContext, tags?: TagCollectionType): SourceToken | null;
|
||||
|
||||
precedence: number;
|
||||
|
||||
toHTML: (token: any, callback: Function) => string;
|
||||
toMarkdown: (element: HTMLElement, callback: Function) => string;
|
||||
toEditorNode: (token: Token, callback: Function) => Node | null;
|
||||
|
||||
isBlock: boolean;
|
||||
|
||||
hidden?: boolean;
|
||||
template?: string;
|
||||
shortcut?: string;
|
||||
}
|
||||
|
||||
|
||||
export interface TagCollectionType {
|
||||
tags: Record<string, TagType>;
|
||||
ordered: TagType[];
|
||||
getByElementName(element: string): TagType | undefined;
|
||||
openers: RegExp[];
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Context passed to Tag.match() during block-level scanning.
|
||||
* `lines` and `index` are for block matching; `text` and `offset`
|
||||
* are for inline matching within a single line.
|
||||
*/
|
||||
export interface MatchContext {
|
||||
lines: string[];
|
||||
index: number;
|
||||
text: string;
|
||||
offset: number;
|
||||
}
|
||||
|
||||
export interface SourceToken {
|
||||
opener: string,
|
||||
content: string;
|
||||
closer: string,
|
||||
raw: string;
|
||||
consumed: number;
|
||||
meta?: Record<string, string>;
|
||||
}
|
||||
|
||||
/**
|
||||
* A single item in a parsed list, with optional nested sublist HTML.
|
||||
*/
|
||||
export interface ListItem {
|
||||
text: string;
|
||||
sub: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Result of parsing a list block: the generated HTML and the line
|
||||
* index where the list ends (so the caller can advance past it).
|
||||
*/
|
||||
export interface ListResult {
|
||||
html: string;
|
||||
end: number;
|
||||
}
|
||||
@@ -0,0 +1,233 @@
|
||||
import { expect, test, suite, describe } from 'vitest'
|
||||
|
||||
import { HopDown } from '../dist/lib';
|
||||
|
||||
const hopdown = new HopDown();
|
||||
|
||||
|
||||
suite('Markdown to HTML Round-Trips', () => {
|
||||
|
||||
function assert(name: string, input: string, output: string, expected: string | undefined = undefined) {
|
||||
return test(name, () => {
|
||||
const html = hopdown.toHTML(input);
|
||||
expect(html.toLowerCase()).toBe(output.toLowerCase());
|
||||
expect(hopdown.toMarkdown(html)).toBe(expected !== undefined ? expected : input);
|
||||
});
|
||||
}
|
||||
|
||||
describe('inline', () => {
|
||||
assert('italic *', '*italic*', '<p><em>italic</em></p>');
|
||||
assert('italic _', '_italic_', '<p><em>italic</em></p>', '*italic*');
|
||||
assert('bold *', '**bold**', '<p><strong>bold</strong></p>');
|
||||
assert('bold _', '__bold__', '<p><strong>bold</strong></p>', '**bold**');
|
||||
assert('strikethrough', '~~strike~~', '<p><del>strike</del></p>');
|
||||
assert('inline code', '`code`', '<p><code>code</code></p>');
|
||||
assert('bold+italic', '***bi***', '<p><strong><em>bi</em></strong></p>');
|
||||
assert('link', '[t](http://x)', '<p><a href="http://x">t</a></p>');
|
||||
assert('mixed', 'a **b** *c* `d`', '<p>a <strong>b</strong> <em>c</em> <code>d</code></p>');
|
||||
assert('code then bold', '`a` **b**', '<p><code>a</code> <strong>b</strong></p>');
|
||||
assert('nested, ummatched italic', '**i* b**', '<p><strong>i* b</strong></p>');
|
||||
assert('nested, ummatched bold', '*b** i*', '<p><em>b** i</em></p>');
|
||||
});
|
||||
|
||||
describe('block', () => {
|
||||
assert('HR ***', '***', '<hr>');
|
||||
assert('HR ******', '******', '<hr>', '***');
|
||||
assert('HR ---', '---', '<hr>', '***');
|
||||
assert('HR ___', '___', '<hr>', '***');
|
||||
assert('H1', '# h', "<h1 id='h'>h</h1>");
|
||||
assert('H2', '## h', "<h2 id='h'>h</h2>");
|
||||
assert('H3', '### h', "<h3 id='h'>h</h3>");
|
||||
assert('H4', '#### h', "<h4 id='h'>h</h4>");
|
||||
assert('H5', '##### h', "<h5 id='h'>h</h5>");
|
||||
assert('H6', '###### h', "<h6 id='h'>h</h6>");
|
||||
assert('H1 with nested', '# h **bold**', "<h1 id='h_bold'>h <strong>bold</strong></h1>");
|
||||
assert('Blockquote', '> foo\n> bar', "<blockquote>foo<br>bar</blockquote>");
|
||||
assert('Blockquote+break', '> foo\n>\n> bar', "<blockquote>foo<p>bar</p></blockquote>");
|
||||
assert('Blockquote+Bold`', '> **foo**\n> bar', "<blockquote><strong>foo</strong><br>bar</blockquote>");
|
||||
assert('fenced code', '```\none\ntwo\n```', '<pre>one\ntwo</pre>');
|
||||
assert('fenced code+lang', '```ts\nconst foo = "";\n```', '<pre class="language-ts">const foo = "";</pre>');
|
||||
assert('fenced code ~~~', '~~~\none\ntwo\n~~~', '<pre>one\ntwo</pre>', '```\none\ntwo\n```');
|
||||
assert('UL *', '* foo\n* bar', '<ul><li>foo</li><li>bar</li></ul>');
|
||||
assert('UL -', '- foo\n- bar', '<ul><li>foo</li><li>bar</li></ul>', '* foo\n* bar');
|
||||
assert('OL 1. 2.', '1. foo\n2. bar', '<ol><li>foo</li><li>bar</li></ol>');
|
||||
assert('OL 1. 1.', '1. foo\n1. bar', '<ol><li>foo</li><li>bar</li></ol>', '1. foo\n2. bar');
|
||||
assert('UL Nested', '* foo\n * bar', '<ul><li>foo<ul><li>bar</li></ul></li></ul>');
|
||||
assert('OL in UL', '* foo\n 1. bar\n 2. baz', '<ul><li>foo<ol><li>bar</li><li>baz</li></ol></li></ul>');
|
||||
});
|
||||
|
||||
describe('links and anchors', () => {
|
||||
assert('link', '[foo](http://x)', '<p><a href="http://x">foo</a></p>');
|
||||
assert('link with title', '[foo](http://x "bar")', '<p><a href="http://x" title="bar">foo</a></p>');
|
||||
assert('anchor', '[foo](#anchor)', '<p><a href="#anchor">foo</a></p>');
|
||||
|
||||
var reflinks = (
|
||||
'\n\n' +
|
||||
'[foo]: http://foo\n' +
|
||||
'[bar]: http://bar "Bar"\n'
|
||||
);
|
||||
assert(
|
||||
'reference link',
|
||||
'[text][foo]' + reflinks,
|
||||
'<p><a href="http://foo">text</a></p>',
|
||||
'[text](http://foo)'
|
||||
);
|
||||
assert(
|
||||
'shortcut link',
|
||||
'[foo][]\n\n' + reflinks,
|
||||
'<p><a href="http://foo">foo</a></p>',
|
||||
'[foo](http://foo)'
|
||||
);
|
||||
assert(
|
||||
'reference with title',
|
||||
'[text][bar]' + reflinks,
|
||||
'<p><a href="http://bar" title="Bar">text</a></p>',
|
||||
'[text](http://bar "Bar")'
|
||||
);
|
||||
assert(
|
||||
'autolink',
|
||||
'foo http://x bar',
|
||||
'<p>foo <a href="http://x">http://x</a> bar</p>',
|
||||
'foo [http://x](http://x) bar',
|
||||
);
|
||||
assert(
|
||||
'anchor wrapped with bold',
|
||||
'**[bold](http://x)**',
|
||||
'<p><strong><a href="http://x">bold</a></strong></p>',
|
||||
);
|
||||
});
|
||||
|
||||
describe('tables', () => {
|
||||
|
||||
// basic table
|
||||
var md = (
|
||||
'| Header 1 | Header 2 |\n' +
|
||||
'| --- | --- |\n' +
|
||||
'| Cell 1 | Cell 2 |'
|
||||
);
|
||||
|
||||
var html = (
|
||||
'<table><thead>' +
|
||||
'<tr><th>Header 1</th><th>Header 2</th></tr>' +
|
||||
'</thead><tbody>' +
|
||||
'<tr><td>Cell 1</td><td>Cell 2</td></tr>' +
|
||||
'</tbody></table>'
|
||||
);
|
||||
assert('Table', md, html);
|
||||
|
||||
// table with inline formatting
|
||||
var md = (
|
||||
'| Header 1 | Header 2 |\n' +
|
||||
'| --- | --- |\n' +
|
||||
'| *italic* | **bold** |\n' +
|
||||
'| `code` | |'
|
||||
);
|
||||
var html = (
|
||||
'<table><thead>' +
|
||||
'<tr><th>Header 1</th><th>Header 2</th></tr>' +
|
||||
'</thead><tbody>' +
|
||||
'<tr><td><em>italic</em></td><td><strong>bold</strong></td></tr>' +
|
||||
'<tr><td><code>code</code></td><td></td></tr>' +
|
||||
'</tbody></table>'
|
||||
);
|
||||
assert('Table + inline', md, html);
|
||||
|
||||
// normalized markdown and cell alignment
|
||||
var expected = (
|
||||
'| Header 1 | Header 2 | Header 3 |\n' +
|
||||
'| :---: | --- | ---: |\n' +
|
||||
'| Cell 1 | Cell 2 | Cell 3 |'
|
||||
);
|
||||
|
||||
var md = (
|
||||
'| Header 1 | Header 2 |Header 3 |\n' +
|
||||
'| :---: | :--- | ----------: |\n' +
|
||||
'| Cell 1 | Cell 2 |Cell 3 |'
|
||||
)
|
||||
|
||||
var html = (
|
||||
'<table><thead><tr>' +
|
||||
'<th class="align-center">Header 1</th>' +
|
||||
'<th>Header 2</th>' +
|
||||
'<th class="align-right">Header 3</th>' +
|
||||
'</tr></thead><tbody><tr>' +
|
||||
'<td class="align-center">Cell 1</td>' +
|
||||
'<td>Cell 2</td>' +
|
||||
'<td class="align-right">Cell 3</td>' +
|
||||
'</tr></tbody></table>'
|
||||
);
|
||||
assert('Table alignment', md, html, expected);
|
||||
|
||||
});
|
||||
|
||||
describe('Edge Cases', () => {
|
||||
var html = 'a <span>SPAN</span>';
|
||||
assert('HTML is stripped', html, '<p>' + html + '</p>', 'a SPAN')
|
||||
assert('Bare brackets', '< foo', '<p>< foo</p>', '< foo');
|
||||
assert(
|
||||
'HTML Entities',
|
||||
'< > & { { &unknown; foo',
|
||||
'<p>< > & { { &unknown; foo</p>',
|
||||
'< > & { { &unknown; foo'
|
||||
);
|
||||
assert('Escape sequence \\*', '\\*not italic\\*', '<p>\\*not italic\\*</p>');
|
||||
assert('Escape sequence \\`', '\\`not code\\`', '<p>\\`not code\\`</p>');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
suite('Markdown to Editor Nodes Round-Trips', () => {
|
||||
|
||||
function span(name: string, delim: string) {
|
||||
const s = document.createElement('span');
|
||||
s.className = `delim ${name.toLowerCase()}`;
|
||||
s.textContent = delim;
|
||||
return s;
|
||||
}
|
||||
|
||||
function assertInline(name: string, delim: string) {
|
||||
return test(name, () => {
|
||||
|
||||
const input = delim + name + delim;
|
||||
|
||||
const expected = document.createDocumentFragment();
|
||||
expected.appendChild(document.createElement('div'));;
|
||||
expected.childNodes[0].appendChild(span(name, delim));
|
||||
expected.childNodes[0].appendChild(document.createTextNode(name));
|
||||
expected.childNodes[0].appendChild(span(name, delim));
|
||||
|
||||
const node = hopdown.toEditorNode(input);
|
||||
expect(node).toStrictEqual(expected);
|
||||
expect(hopdown.toMarkdown(node)).toBe(input);
|
||||
});
|
||||
}
|
||||
|
||||
function assertBlock(name: string, input: string, output: string) {
|
||||
return test(name, () => {
|
||||
const div = document.createElement('div');
|
||||
div.appendChild(hopdown.toEditorNode(input));
|
||||
expect(div.innerHTML).toStrictEqual(output);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
describe('inline', () => {
|
||||
assertInline('strong', '**');
|
||||
assertInline('em', '*');
|
||||
});
|
||||
|
||||
describe('block', () => {
|
||||
assertBlock(
|
||||
'Fenced Code',
|
||||
'```\nfoo\n```',
|
||||
(
|
||||
'<div>' +
|
||||
'<span class="delim pre">```</span>\n' +
|
||||
'foo\n' +
|
||||
'<span class="delim pre">```</span>' +
|
||||
'</div>'
|
||||
)
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"module": "CommonJS",
|
||||
"outDir": "./dist/js",
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"strict": true,
|
||||
"target": "ES2025",
|
||||
"module": "ES2022",
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"outDir": "dist/lib",
|
||||
"rootDir": "src/ts"
|
||||
},
|
||||
"include": ["src/ts/**/*.ts"],
|
||||
"exclude": ["test/**/*"]
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import { defineConfig } from 'vitest/config'
|
||||
import { playwright } from '@vitest/browser-playwright'
|
||||
|
||||
export default defineConfig({
|
||||
test: {
|
||||
projects: [
|
||||
{
|
||||
test: {
|
||||
include: [
|
||||
'test/**/*.{test,spec}.ts',
|
||||
],
|
||||
name: 'Release Acceptance',
|
||||
environment: 'happy-dom',
|
||||
},
|
||||
},
|
||||
],
|
||||
browser: {
|
||||
enabled: true,
|
||||
provider: playwright(),
|
||||
headless: true,
|
||||
// https://vitest.dev/config/browser/playwright
|
||||
instances: [
|
||||
{ browser: 'chromium' },
|
||||
],
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user