checkpoint

src/static/ribbit-core.css

@@ -34,7 +34,7 @@
  */
 
 .md-delim {
-    display:none;
+    display:inline;
     opacity: 0.3;
     font-size: 0.85em;
     font-weight: normal;

src/ts/ribbit-editor.ts

@@ -173,8 +173,10 @@ const BLOCK_RULES: BlockRule[] = [
  *   disambiguateAsteriskRuns('**bold *italic***')
  *   // '**bold *italic*\u200C**'
  */
+
+const SENTINEL = '\u200C';
+
 function disambiguateAsteriskRuns(line: string): string {
-    const SENTINEL = '\u200C';
     const ASTERISK_RUN = /\*{1,3}/g;
     const stack: ('*' | '**' | '***')[] = [];
     let result = '';
@@ -384,6 +386,8 @@ export class RibbitEditor extends Ribbit {
             return block;
         }
 
+        //console.log(`Parsing line '${line}'`);
+
         for (const rule of BLOCK_RULES) {
             const prefixLength = rule.prefixLength(line);
             if (prefixLength === null) {
@@ -443,6 +447,7 @@ export class RibbitEditor extends Ribbit {
     #parseInline(text: string): DocumentFragment {
         var t = text;
         text = disambiguateAsteriskRuns(text);
+        //console.log(`${t} => ${text}`);
         const classes: Record<string, string> = {
             '**':  'md-bold',
             '*':   'md-italic',
@@ -450,18 +455,12 @@ export class RibbitEditor extends Ribbit {
             '`':   'md-code',
         };
 
-        // ***bold italic***
-        // ***italic* bold**
-        // **bold *italic***
-        // ***bold** italic* x
-        // *italic **bold*** x
-
         const INLINE_PATTERN = new RegExp(
            '\\[(?<linkLabel>[^\\]]+)\\]\\((?<linkHref>[^)]+)\\)' +
-            '|' +
-            '(?<delimiter>\\*{2}|\\*|~~|`)' +
-            '(?<content>[^*].+?)' +
-            '(?<closer>\\k<delimiter>(?!\\*))',
+            '|' + '(?<![*])' +
+            '(?<delimiter>${SENTINEL}\\*{2}|\\*{2}|${SENTINEL}\\*|\\*|~~|`)' +
+            '(?<content>.*)' +
+            `(?<closer>(?:${SENTINEL}\\k<delimiter>|\\k<delimiter>)(?![*]))`,
             'g'
         );
 
@@ -470,7 +469,7 @@ export class RibbitEditor extends Ribbit {
         let match: RegExpExecArray | null;
 
         while ((match = INLINE_PATTERN.exec(text)) !== null) {
-            console.log(`DELIM: ${match.groups!.delimiter} CONTENT: ${match.groups!.content} CLOSER: ${match.groups!.closer}`);
+            // console.log(`DELIM: ${match.groups!.delimiter} CONTENT: ${match.groups!.content} CLOSER: ${match.groups!.closer}`) 
             if (match.index > lastIndex) {
                 fragment.appendChild(document.createTextNode(text.slice(lastIndex, match.index)));
             }
@@ -483,7 +482,7 @@ export class RibbitEditor extends Ribbit {
             fragment.appendChild(document.createTextNode(text.slice(lastIndex)));
         }
 
-        console.log(`'${t}' => '${text.replace('\u200C', '|')}`, fragment.children);
+        // console.log(`'${t}' => '${text.replace('\u200C', '|')}`, fragment.children);
         return fragment;
     }
 
@@ -503,6 +502,8 @@ export class RibbitEditor extends Ribbit {
         const caretOffset = this.#getCaretOffset(block);
         const lineText = normalizeLineText(block.textContent!);
 
+        console.log(`'${block.textContent}' normalized to '${lineText}'`);
+
         const newBlock = this.#buildBlock(lineText);
         block.className = newBlock.className;
         block.innerHTML = '';
@@ -517,7 +518,6 @@ export class RibbitEditor extends Ribbit {
                 lastChild.textContent = lastChild.textContent!.replace(/ $/, '\u00A0');
             }
         }
-        */
         if (lineText.endsWith(' ')) {
             // Find the last text node in the block (may be nested inside spans)
             const walker = document.createTreeWalker(block, NodeFilter.SHOW_TEXT);
@@ -529,13 +529,17 @@ export class RibbitEditor extends Ribbit {
             if (lastTextNode) {
                 lastTextNode.textContent = lastTextNode.textContent!.replace(/ $/, '\u00A0');
             }
+            console.log(`updating lastTextNode.textContent to '${lastTextNode!.textContent}'`);
         }
+        */
 
         const prefixSpan = block.firstElementChild;
         const prefixLen = (prefixSpan?.classList.contains(DELIM_CLASS) ||
                            prefixSpan?.classList.contains(LIST_PREFIX_CLASS))
             ? prefixSpan.textContent!.length : 0;
 
+        console.log(`${block.textContent!}: ${caretOffset} <= ${prefixLen} && ${prefixSpan} ?`);
+
         if (caretOffset <= prefixLen && prefixSpan) {
             const sel = window.getSelection()!;
             const range = document.createRange();

test/integration/test_wysiwyg.js

@@ -325,8 +325,6 @@ async function runTests() {
         
                 const markdown = await getMarkdown();
                 const html = await getHTML();
-                console.log(`MARKDOWN: ${markdown}`);
-                console.log(`HTML: ${html}`);
                 assert(
                     markdown === testCase.markdown,
                     `Round-trip failed.\nExpected: "${testCase.markdown}"\nGot:      "${markdown}"`