ialbert
/
www-lib-markdown
Beobachten 1
Favorisieren 0
Fork 0
Code Issues 12 Pull-Requests 0 Releases 0 Wiki Aktivität
PHP and Javascript implementations of a simple markdown parser
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
71 Commits
1 Branch
Struktur: d5911e7d68
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „d5911e7d68“
${ noResults }
www-lib-markdown/playground.html

playground.html 19KB
Verlauf Originalformat

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688 
  1. <!DOCTYPE html>

  2. <html>

  3. 	<head>

  4. 		<meta charset="utf-8">

  5. 		<title>Markdown Test</title>

  6. 		<link rel="icon" href="data:;base64,iVBORw0KGgo=">

  7. 		<style type="text/css">

  8. 			/* Structural style */

  9. 			:root, body {

  10. 				width: 100%; height: 100%;

  11. 				padding: 0;

  12. 				margin: 0;

  13. 			}

  14. 			.pane-container {

  15. 				position: absolute;

  16. 				left: 0; top: 0;

  17. 				width: 100%; height: 100%;

  18. 				box-sizing: border-box;

  19. 

  20. 				display: grid;

  21. 				grid-template-columns: auto 1fr;

  22. 			}

  23. 			.left-pane {

  24. 				grid-row: 1; grid-column: 1;

  25. 				resize: horizontal;

  26. 				overflow-x: auto;

  27. 				box-sizing: border-box;

  28. 				min-width: 40vw;

  29. 				max-width: 80vw;

  30. 				border-right: 4px solid var(--color-ui-divider);

  31. 

  32. 				display: grid;

  33. 				grid-template-rows: 32px 1fr;

  34. 				grid-template-columns: 1fr;

  35. 			}

  36. 			.right-pane {

  37. 				grid-row: 1; grid-column: 2;

  38. 				overflow-x: auto;

  39. 				overflow-y: scroll;

  40. 			}

  41. 			.toolbar-pane {

  42. 				grid-row: 1; grid-column: 1;

  43. 				box-sizing: border-box;

  44. 				display: grid;

  45. 				grid-template-columns: 1fr 1fr;

  46. 			}

  47. 			.toolbar-left {

  48. 				grid-column: 1;

  49. 			}

  50. 			.toolbar-right {

  51. 				grid-column: 2;

  52. 			}

  53. 			.editor-pane {

  54. 				grid-row: 2; grid-column: 1;

  55. 			}

  56. 			#markdown-editor {

  57. 				box-sizing: border-box;

  58. 				position: relative;

  59. 				width: 100%;

  60. 				height: 100%;

  61. 				resize: none;

  62. 			}

  63. 			@media screen and (max-width: 800px) {

  64. 				.pane-container {

  65. 					grid-template-columns: 1fr;

  66. 					grid-template-rows: auto 1fr;

  67. 					column-gap: 0;

  68. 				}

  69. 				.left-pane {

  70. 					grid-row: 2; grid-column: 1;

  71. 					resize: none;

  72. 					overflow-x: hidden;

  73. 					min-width: none;

  74. 					max-width: none;

  75. 					width: auto !important; /* undo wide mode resizing */

  76. 					border-right: none;

  77. 					border-top: 4px solid var(--color-ui-divider);

  78. 				}

  79. 				.right-pane {

  80. 					grid-row: 1; grid-column: 1;

  81. 					resize: vertical;

  82. 					min-height: 40vw;

  83. 					max-height: 80vw;

  84. 				}

  85. 			}

  86. 			@media screen and (min-width: 801px) {

  87. 				.right-pane {

  88. 					height: auto !important; /* undo narrow mode resizing */

  89. 				}

  90. 			}

  91. 

  92. 			/* UI aesthetic */

  93. 

  94. 			:root {

  95. 				--color-editor-background: #00a;

  96. 				--color-editor-text: white;

  97. 				--color-toolbar-background: #ccc;

  98. 				--color-toolbar-text: #000;

  99. 				--color-ui-divider: #000;

  100. 			}

  101. 			@media (prefers-color-scheme: dark) {

  102. 				:root {

  103. 					--toolbar-background: #aaa;

  104. 					--color-ui-divider: #999;

  105. 				}

  106. 			}

  107. 			.toolbar-pane,

  108. 			dialog {

  109. 				font-family: sans-serif;

  110. 			}

  111. 

  112. 			.toolbar-pane {

  113. 				background-color: var(--color-toolbar-background);

  114. 				color: var(--color-toolbar-text);

  115. 				border-bottom: 1px solid var(--color-ui-divider);

  116. 				padding: 4px 20px;

  117. 			}

  118. 			.toolbar-left {

  119. 				text-align: left;

  120. 			}

  121. 			.toolbar-right {

  122. 				text-align: right;

  123. 			}

  124. 			#markdown-editor {

  125. 				padding: 1em 2em;

  126. 				border: none;

  127. 				outline: none;

  128. 				background-color: var(--color-editor-background);

  129. 				color: var(--color-editor-text);

  130. 			}

  131. 			.preview-container {

  132. 				padding: 1em;

  133. 				margin: 0 auto;

  134. 				max-width: 600px;

  135. 				background-color: var(--color-background);

  136. 				color: var(--color-text);

  137. 			}

  138. 

  139. 			dialog#readers-dialog {

  140. 				max-width: 400px;

  141. 				max-height: 400px;

  142. 			}

  143. 			.dialog-layout {

  144. 				position: relative;

  145. 				width: 100%; height: 100%;

  146. 

  147. 				display: grid;

  148. 				grid-template-rows: 32px 368px; /* can't get overflow to work without explicit height :( */

  149. 			}

  150. 			.dialog-titlebar {

  151. 				grid-row: 1;

  152. 

  153. 				display: grid;

  154. 				grid-template-columns: 1fr auto;

  155. 			}

  156. 			.dialog-title {

  157. 				grid-column: 1;

  158. 				font-weight: bold;

  159. 			}

  160. 			.dialog-close {

  161. 				grid-column: 2;

  162. 				text-align: right;

  163. 			}

  164. 			.dialog-content {

  165. 				grid-row: 2;

  166. 				overflow-y: scroll;

  167. 			}

  168. 			.reader-list {

  169. 				position: relative;

  170. 				width: 100%; height: 100%;

  171. 			}

  172. 

  173. 

  174. 			/* --- old ----------------------------------------- */

  175. 

  176. 			.reader-header {

  177. 				margin-top: 0.25em;

  178. 				font-weight: bold;

  179. 			}

  180. 			.reader-check {

  181. 				display: inline-block;

  182. 				padding: 4px 8px;

  183. 				border: 1px dotted gray;

  184. 				border-radius: 8px;

  185. 				margin: 4px;

  186. 			}

  187. 			.calculated {

  188. 				background-color: var(--color-calculated-background);

  189. 				font-style: italic;

  190. 			}

  191. 			.spreadsheet-type-number,

  192. 			.spreadsheet-type-currency,

  193. 			.spreadsheet-type-percent {

  194. 				text-align: right;

  195. 			}

  196. 		</style>

  197. 		<style type="text/css">

  198. 			/* Document styling */

  199. 			/* From https://github.com/edwardtufte/tufte-css/blob/gh-pages/tufte.css */

  200. 			:root {

  201. 				--color-background: #fffff8;

  202. 				--color-text: #111;

  203. 				--color-text-secondary: #666;

  204. 				--color-table-header: #ddd;

  205. 				--color-table-border: black;

  206. 				--color-calculated-background: #eee;

  207. 				--color-highlight: #ff0;

  208. 				--color-highlight-text: #111;

  209. 				--color-rule: #111;

  210. 			}

  211. 			@media (prefers-color-scheme: dark) {

  212. 				:root {

  213. 					--color-background: #151515;

  214. 					--color-text: #ddd;

  215. 					--color-text-secondary: #999;

  216. 					--color-table-header: #333;

  217. 					--color-table-border: #ccc;

  218. 					--color-calculated-background: #444;

  219. 					--color-highlight: #88f;

  220. 					--color-highlight-text: #ddd;

  221. 					--color-rule: #ddd;

  222. 				}

  223. 			}

  224. 

  225. 			html {

  226. 				font-size: 15px;

  227. 			}

  228. 

  229. 			body {

  230. 				font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;

  231. 				background-color: var(--color-background);

  232. 				color: var(--color-text);

  233. 				counter-reset: sidenote-counter;

  234. 			}

  235. 

  236. 			h1 {

  237. 				font-weight: 400;

  238. 				margin-top: 4rem;

  239. 				margin-bottom: 1.5rem;

  240. 				font-size: 3.2rem;

  241. 				line-height: 1;

  242. 			}

  243. 			h2 {

  244. 				font-style: italic;

  245. 				font-weight: 400;

  246. 				margin-top: 2.1rem;

  247. 				margin-bottom: 1.4rem;

  248. 				font-size: 2.2rem;

  249. 				line-height: 1;

  250. 			}

  251. 			h3 {

  252. 				font-style: italic;

  253. 				font-weight: 400;

  254. 				font-size: 1.7rem;

  255. 				margin-top: 2rem;

  256. 				margin-bottom: 1.4rem;

  257. 				line-height: 1;

  258. 			}

  259. 			.subtext {

  260. 				font-size: 1rem;

  261. 				color: var(--color-text-secondary);

  262. 				margin-top: 0.25em;

  263. 				margin-bottom: 0.5em;

  264. 			}

  265. 			mark {

  266. 				background-color: var(--color-highlight);

  267. 				color: var(--color-highlight-text);

  268. 			}

  269. 			table {

  270. 				margin-top: 1em;

  271. 				margin-bottom: 1em;

  272. 				border-collapse: collapse;

  273. 			}

  274. 			td, th {

  275. 				padding: 0.4em 0.8em;

  276. 				font-size: 1rem;

  277. 			}

  278. 			th {

  279. 				background-color: var(--color-table-header);

  280. 				border-bottom: 2px solid var(--color-text);

  281. 			}

  282. 			tr:not(:last-child) td {

  283. 				border-bottom: 1px solid var(--color-text);

  284. 			}

  285. 			tr td:not(:last-child) {

  286. 				border-right: 1px solid var(--color-table-header);

  287. 			}

  288. 			hr {

  289. 				display: block;

  290. 				height: 1px;

  291. 				width: 55%;

  292. 				border: 0;

  293. 				border-top: 1px solid var(--color-rule);

  294. 				margin: 1em 0;

  295. 				padding: 0;

  296. 			}

  297. 			article {

  298. 				padding: 5rem 0rem;

  299. 			}

  300. 			section {

  301. 				padding-top: 1rem;

  302. 				padding-bottom: 1rem;

  303. 			}

  304. 			p,

  305. 			ol,

  306. 			ul {

  307. 				font-size: 1.4rem;

  308. 				line-height: 2rem;

  309. 			}

  310. 			p.subtitle {

  311. 				font-style: italic;

  312. 				margin-top: 1rem;

  313. 				margin-bottom: 1rem;

  314. 				font-size: 1.8rem;

  315. 				display: block;

  316. 				line-height: 1;

  317. 			}

  318. 			code, pre > code {

  319. 				font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;

  320. 				font-size: 1.0rem;

  321. 				line-height: 1.42;

  322. 				-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. See https://github.com/edwardtufte/tufte-css/issues/81#issuecomment-261953409 */

  323. 			}

  324. 			pre > code {

  325. 				font-size: 0.9rem;

  326. 				width: 52.5%;

  327. 				margin-left: 2.5%;

  328. 				overflow-x: auto;

  329. 				display: block;

  330. 			}

  331. 			a:link,

  332. 			a:visited {

  333. 				color: inherit;

  334. 				text-underline-offset: 0.1em;

  335. 				text-decoration-thickness: 0.05em;

  336. 			}

  337. 			dt:not(:first-child),

  338. 			li:not(:first-child) {

  339. 				margin-top: 0.25rem;

  340. 			}

  341. 			dt, dd {

  342. 				font-size: 1.2rem;

  343. 			}

  344. 			dt {

  345. 				font-weight: bold;

  346. 			}

  347. 			.footnotes, .footnotes li {

  348. 				font-size: 80%;

  349. 			}

  350. 			.footnotes li:target, sup:target a {

  351. 				background-color: var(--color-highlight);

  352. 				color: var(--color-highlight-text);

  353. 			}

  354. 

  355. 		</style>

  356. 		<script src="js/markdown.js"></script>

  357. 		<script src="js/spreadsheet.js"></script>

  358. 		<script>

  359. 			const sampleMarkdown = `

  360. ## Block Formats {#top}

  361. 

  362. A regular paragraph.

  363. 

  364. -# Sub text

  365. 

  366. * Unordered

  367. * Lists

  368.     * Sub list

  369. 

  370. 1. Ordered

  371. 2. Lists

  372.     6. Sub list

  373. 

  374. A blockquote:

  375. 

  376. > "The only thing we have to fear is fear itself—nameless, unreasoning,

  377. > unjustified terror which paralyzes needed efforts to convert retreat into

  378. > advance." - Franklin D. Roosevelt's First Inaugural Address

  379. 

  380. Some definitions:

  381. 

  382. word

  383. : a unit of meaning in a sentence

  384. sentence

  385. : a collection of words

  386. 

  387. Code:

  388. 

  389. \`\`\`javascript

  390. function foo() {

  391.     return 'Hello world';

  392. }

  393. \`\`\`

  394. 

  395.     function bar() {

  396.         return 'Indented code';

  397.     }

  398. 

  399. ### Heading, hash style

  400. 

  401. Heading, underline style

  402. ---

  403. 

  404. ### Modified Heading {style=color:red;}

  405. 

  406. | Unit Price | Qty | Discount | Subtotal |

  407. | ---: | ---: | ---: | ---: |

  408. | $1.23 | 2 | 10% | =A*B*(1-C) FILL |

  409. | $4.99 | 6 | | |

  410. | $0.99 | 1 | 25% | |

  411. | Total | | | =SUM(D:D) |

  412. 

  413. ---

  414. 

  415. ## Inline Formats

  416. 

  417. Normal, **double asterisk,** __double underscore,__ *asterisks,* _underscores,_

  418. ~~double tildes,~~ ~single tildes,~ ^carets,^ ==double equals==, \`\`double backticks\`\`,

  419. \`single backticks\`.

  420. 

  421. Lorem ipsum dolor sit amet,[^1] consectetur adipiscing elit.[^abc] Sed sodales

  422. in odio eget porta. Proin et erat sit amet erat semper mollis vitae ut

  423. turpis.[^foo] Ut ipsum dui, maximus sit amet suscipit at, dictum id nulla.[^bar]

  424. Aenean efficitur rhoncus nulla non fermentum.

  425. 

  426. [^1]: Donec ut felis volutpat, gravida ipsum scelerisque, accumsan est.

  427. [^abc]: Cras dictum rutrum quam.

  428. [^foo]: Donec maximus bibendum lorem.

  429. [^bar]: Praesent consectetur tristique leo. Morbi nec nisi sit amet quam

  430.  imperdiet vehicula eu feugiat tortor. 

  431. 

  432. The HTML on the WWW is often full of JS and CSS.

  433. 

  434. *[HTML]: Hypertext Markup Language

  435. *[WWW]: World Wide Web

  436. *[JS]: JavaScript

  437. *[CSS]: Cascading Style Sheets

  438. 

  439. Click [here](#top) to return to the top. Referenced link to [Google][google].

  440. 

  441. ![alt text](https://picsum.photos/100/75) ![alt text](https://picsum.photos/101/75 "With a title")

  442. ![][testimage]

  443. 

  444. [testimage]: https://picsum.photos/102/75

  445. [google]: https://google.com  "I prefer Duck Duck Go"

  446. 

  447. Some verbatim <span style="color:green;">HTML</span>. A script tag

  448. will be ignored. <scr` + `ipt></sc` + `ript>

  449. 			`.trim();

  450. 		</script>

  451. 		<script>

  452. 			const blockReaderClasses = {

  453. 				'Heading (underline)': MDUnderlinedHeadingReader,

  454. 				'Heading (hash)': MDHashHeadingReader,

  455. 				'Subtext': MDSubtextReader,

  456. 				'Block quote': MDBlockQuoteReader,

  457. 				'Unordered list': MDUnorderedListReader,

  458. 				'Ordered list': MDOrderedListReader,

  459. 				'Code block (fenced)': MDFencedCodeBlockReader,

  460. 				'Code block (indented)': MDIndentedCodeBlockReader,

  461. 				'Horizontal rule': MDHorizontalRuleReader,

  462. 				'Table': MDTableReader,

  463. 				'Definition list': MDDefinitionListReader,

  464. 				'Paragraph': MDParagraphReader,

  465. 				'Spreadsheets': MDSpreadsheetReader,

  466. 			};

  467. 			const inlineReaderClasses = {

  468. 				'Emphasis': MDEmphasisReader,

  469. 				'Strong': MDStrongReader,

  470. 				'Strikethrough': MDStrikethroughReader,

  471. 				'Underline': MDUnderlineReader,

  472. 				'Highlight': MDHighlightReader,

  473. 				'Links': MDLinkReader,

  474. 				'Referenced links': MDReferencedLinkReader,

  475. 				'Images': MDImageReader,

  476. 				'Referenced images': MDReferencedImageReader,

  477. 				'Code span': MDCodeSpanReader,

  478. 				'Subscript': MDSubscriptReader,

  479. 				'Superscript': MDSuperscriptReader,

  480. 				'Footnotes': MDFootnoteReader,

  481. 				'Abbrevations': MDAbbreviationReader,

  482. 				'HTML tags': MDHTMLTagReader,

  483. 				'Modifiers': MDModifierReader,

  484. 				'Line breaks': MDLineBreakReader,

  485. 			};

  486. 			var activeReaders = [];

  487. 			var parser = null;

  488. 

  489. 			function markdownEditorNode() { return document.getElementById('markdown-editor'); }

  490. 			function previewNode() { return document.getElementById('preview-container'); }

  491. 			function codeJSNode() { return document.getElementById('code-js'); }

  492. 			function codePHPNode() { return document.getElementById('code-php'); }

  493. 			function readersButtonNode() { return document.getElementById('readers-button'); }

  494. 			function readersDialogNode() { return document.getElementById('readers-dialog'); }

  495. 			function readerListNode() { return document.getElementById('reader-list'); }

  496. 

  497. 			function onDocumentLoad() {

  498. 				if (markdownEditorNode().value === '') {

  499. 					markdownEditorNode().value = sampleMarkdown;

  500. 				}

  501. 				activeReaders = [ ...Markdown.allReaders, new MDSpreadsheetReader() ];

  502. 				parser = new Markdown(activeReaders);

  503. 				markdownEditorNode().addEventListener('input', handleMarkdownChange);

  504. 				populateReaderCheckboxes();

  505. 				readersButtonNode().addEventListener('click', handleReadersButtonClicked);

  506. 				codeJSNode().addEventListener('change', handleMarkdownChange);

  507. 				codePHPNode().addEventListener('change', handleMarkdownChange);

  508. 				readersDialogNode().getElementsByClassName("dialog-title")[0].innerHTML = "Readers";

  509. 				readersDialogNode().getElementsByClassName("dialog-titlebar")[0].getElementsByTagName("button")[0].addEventListener('click', () => {

  510. 					readersDialogNode().close();

  511. 				});

  512. 				setTimeout(handleMarkdownChange, 0);

  513. 			}

  514. 			function updatePreviewLocally() {

  515. 				let markdown = markdownEditorNode().value;

  516. 				let html = parser.toHTML(markdown, 'foo-');

  517. 				previewNode().innerHTML = html;

  518. 			}

  519. 			var debounceTimer = null;

  520. 			var needsUpdate = false;

  521. 			function debouncedSendPreviewRequest() {

  522. 				if (debounceTimer) {

  523. 					needsUpdate = true;

  524. 				} else {

  525. 					debounceTimer = setInterval(() => {

  526. 						if (needsUpdate) {

  527. 							needsUpdate = false;

  528. 							sendPreviewRequest();

  529. 						} else {

  530. 							clearTimeout(debounceTimer);

  531. 							debounceTimer = null;

  532. 						}

  533. 					}, 500);

  534. 					sendPreviewRequest();

  535. 				}

  536. 			}

  537. 			function sendPreviewRequest() {

  538. 				const markdown = markdownEditorNode().value;

  539. 				const readers = activeReaders.map((r) => r.constructor.name);

  540. 				const request = new XMLHttpRequest();

  541. 				var formData = encodeForm({

  542. 					'markdown': markdown,

  543. 					'readers': readers,

  544. 				});

  545. 				request.open('POST', 'playgroundapi.php', true);

  546. 				request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  547. 				request.onreadystatechange = () => {

  548. 					if (request.readyState == 4 && request.status == 200) {

  549. 						previewNode().innerHTML = request.responseText;

  550. 					}

  551. 				};

  552. 				request.send(formData);

  553. 			}

  554. 			function encodeForm(values) {

  555. 				var pairs = [];

  556. 				for (const [key, value] of Object.entries(values)) {

  557. 					if (value instanceof Array) {

  558. 						for (const v of value) {

  559. 							pairs.push(`${encodeURIComponent(key + '[]')}=${encodeURIComponent(v)}`);

  560. 						}

  561. 					} else {

  562. 						pairs.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);

  563. 					}

  564. 				}

  565. 				return pairs.join('&');

  566. 			}

  567. 			function populateReaderCheckboxes() {

  568. 				const container = document.getElementById('reader-list');

  569. 				var header = document.createElement('div');

  570. 				header.classList.add('reader-header');

  571. 				header.append(document.createTextNode('Block Readers'));

  572. 				container.append(header);

  573. 				const blockContainer = document.createElement('div');

  574. 				container.append(blockContainer);

  575. 				for (const name of Object.keys(blockReaderClasses).sort()) {

  576. 					const readerClass = blockReaderClasses[name];

  577. 					const checkbox = makeReaderCheckbox(name, readerClass);

  578. 					blockContainer.append(checkbox);

  579. 				}

  580. 				header = document.createElement('div');

  581. 				header.classList.add('reader-header');

  582. 				header.append(document.createTextNode('Inline Readers'));

  583. 				container.append(header);

  584. 				const inlineContainer = document.createElement('div');

  585. 				container.append(inlineContainer);

  586. 				for (const name of Object.keys(inlineReaderClasses).sort()) {

  587. 					const readerClass = inlineReaderClasses[name];

  588. 					const checkbox = makeReaderCheckbox(name, readerClass);

  589. 					inlineContainer.append(checkbox);

  590. 				}

  591. 			}

  592. 			function makeReaderCheckbox(name, readerClass) {

  593. 				var isSelected = false;

  594. 				for (const elem of activeReaders) {

  595. 					if (elem.constructor === readerClass) {

  596. 						isSelected = true;

  597. 						break;

  598. 					}

  599. 				}

  600. 				const label = document.createElement('label');

  601. 				label.classList.add('reader-check');

  602. 				const check = document.createElement('input');

  603. 				check.type = 'checkbox';

  604. 				check.checked = isSelected;

  605. 				check.addEventListener('change', () => {

  606. 					handleCheckChanged(readerClass, check);

  607. 				});

  608. 				check.id = `reader-${readerClass.name}`;

  609. 				label.append(check);

  610. 				label.append(document.createTextNode(name));

  611. 				return label;

  612. 			}

  613. 

  614. 			function handleMarkdownChange() {

  615. 				if (codePHPNode().checked) {

  616. 					debouncedSendPreviewRequest();

  617. 				} else if (codeJSNode().checked) {

  618. 					updatePreviewLocally();

  619. 				}

  620. 			}

  621. 			function handleReadersButtonClicked() {

  622. 				const dlg = readersDialogNode();

  623. 				if (dlg.open) {

  624. 					dlg.close();

  625. 				} else {

  626. 					dlg.showModal();

  627. 				}

  628. 			}

  629. 			function handleCheckChanged(readerClass, check) {

  630. 				if (check.checked) {

  631. 					activeReaders.push(new readerClass());

  632. 				} else {

  633. 					activeReaders = activeReaders.filter((reader) => reader.constructor.name !== readerClass.name);

  634. 				}

  635. 				parser = new Markdown(activeReaders);

  636. 				handleMarkdownChange();

  637. 			}

  638. 			document.addEventListener('DOMContentLoaded', onDocumentLoad);

  639. 		</script>

  640. 	</head>

  641. 

  642. 	<body>

  643. 		<div class="pane-container">

  644. 			<div class="left-pane pane">

  645. 				<div class="toolbar-pane">

  646. 					<div class="toolbar-left">

  647. 						<button id="readers-button">Readers</button>

  648. 					</div>

  649. 					<div class="toolbar-right">

  650. 						<label>

  651. 							<input type="radio" id="code-js" name="code" value="js" checked>

  652. 							Javascript

  653. 						</label>

  654. 						<label>

  655. 							<input type="radio" id="code-php" name="code" value="php">

  656. 							PHP

  657. 						</label>

  658. 					</div>

  659. 				</div>

  660. 				<div class="editor-pane">

  661. 					<textarea id="markdown-editor"></textarea>

  662. 				</div>

  663. 			</div>

  664. 			<div class="right-pane pane">

  665. 				<div class="preview-container" id="preview-container">

  666. 					<h1>Preview Here</h1>

  667. 					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed turpis. Integer tincidunt eu nibh.</p>

  668. 					<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies velit. Nam eget dui et libero pharetra dapibus.</p>

  669. 					<p>Vestibulum in vulputate velit. Cras egestas, urna quis dignissim convallis, arcu felis sagittis diam, non fermentum massa justo ac neque. In ornare do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

  670. 					<p>Duis phasellus maecenas vestibulum mollis facilisis. Nulla sit amet erat. Suspendisse in justo eu odio suscipit rhoncus. Praesent id massa for ante varius ultrices. Cras sed leo at felis sagittis cursus. Integer turpis est, vulputate ut, elementum ac, condimentum eget, diam.</p>

  671. 					<p>Aliquam nec enim. Nulla tempus sem et risus. Proin mi. Etiam sit amet orci eget eros faucibus tincidunt. Duis volutpat nunc vel velit. Suspendisse potenti. Integer sollicitudin dictum est. Donec ut dolor. Nam malesuada magna.</p>

  672. 					<p>Sed non lectus. Vivamus consectetuer purus vitae massa. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies velit. Nam eget dui et libero pharetra dapibus</p>

  673. 				</div>

  674. 			</div>

  675. 		</div>

  676. 		<dialog id="readers-dialog">

  677. 			<div class="dialog-layout">

  678. 				<div class="dialog-titlebar">

  679. 					<div class="dialog-title"></div>

  680. 					<div class="dialog-close"><button>✕</button></div>

  681. 				</div>

  682. 				<div class="dialog-content">

  683. 					<div class="reader-list" id="reader-list"></div>

  684. 				</div>

  685. 			</div>

  686. 		</dialog>

  687. 	</body>

  688. </html>