Merge pull request #63 from wheelercj/fix-bugs

Fix bugs

Author: wheelercj

src/md.js

@@ -16,7 +16,7 @@
 
 import { getSetting } from './common.js';
 import { TurndownService } from './turndown.js';
-import { newTurndownService } from './newTurndownService.js';
+import { newTurndownService, replaceBrackets } from './newTurndownService.js';
 
 /**
  * turndownService is a TurndownService instance used to convert HTML to markdown. Use
@@ -38,24 +38,6 @@ let currentBulletPoint = '-';
  */
 let currentSubBrackets = 'underlined';
 
-/**
- * replaceBrackets replaces any square brackets in text with the character or escape
- * sequence chosen in settings.
- * @param {string} text - the text.
- * @param {string} subBrackets - the setting for what to substitute any square brackets
- * with.
- * @returns {string}
- */
-export function replaceBrackets(text, subBrackets) {
-    if (subBrackets === 'underlined') {
-        return text.replaceAll('[', '⦋').replaceAll(']', '⦌');
-    } else if (subBrackets === 'escaped') {
-        return text.replaceAll('[', '\\[').replaceAll(']', '\\]');
-    } else {
-        return text;
-    }
-}
-
 /**
  * escape escapes many markdown patterns, but not square brackets.
  * @param {string} text - the text to escape markdown characters in.
@@ -91,29 +73,15 @@ export async function htmlToMarkdown(html) {
         newSubBrackets !== currentSubBrackets
     ) {
         currentBulletPoint = newBulletPoint;
-        currentSubBrackets = newSubBrackets
+        currentSubBrackets = newSubBrackets;
         turndownService = newTurndownService(
-            currentBulletPoint, newTurndownEscape(currentSubBrackets)
+            currentBulletPoint, currentSubBrackets, escape,
         );
     }
 
     return turndownService.turndown(html);
 }
 
-/**
- * newTurndownEscape returns a function that escapes markdown. The returned function is
- * intended for use in a Turndown service.
- * @param {string} subBrackets - the setting for what to replace square brackets with.
- * @returns {Function(string): string}
- */
-function newTurndownEscape(subBrackets) {
-    // Making Turndown's escape function async results in Turndown giving the error
-    // `TypeError: string.replace is not a function`.
-    return function turndownEscape(text) {
-        return replaceBrackets(escape(text), subBrackets);
-    }
-}
-
 /**
  * createLink creates a markdown link.
  * @param {string} title - the title of the link. Square brackets are replaced, escaped,
@@ -147,6 +115,8 @@ export async function createLink(title, url, subBrackets = null) {
  * createAlert creates a markdown alert. GitHub and Obsidian use the same format, but
  * GitHub supports only specific alert types: note, tip, important, warning, and
  * caution. More details here: https://github.com/orgs/community/discussions/16925.
+ * Obsidian calls these callouts
+ * https://help.obsidian.md/Editing+and+formatting/Callouts.
  * @param {string} type - the alert's type.
  * @param {string} text - the alert's text.
  * @returns {Promise<string>}

src/newTurndownService.js

@@ -1,49 +1,100 @@
 import { TurndownService } from './turndown.js';
 import { turndownPluginGfm } from './turndown-plugin-gfm.js';
 
+/**
+ * replaceBrackets replaces any square brackets in text with the character or escape
+ * sequence chosen in settings.
+ * @param {string} text - the text.
+ * @param {string} subBrackets - the setting for what to substitute any square brackets
+ * with.
+ * @returns {string}
+ */
+export function replaceBrackets(text, subBrackets) {
+    if (subBrackets === 'underlined') {
+        return text.replaceAll('[', '⦋').replaceAll(']', '⦌');
+    } else if (subBrackets === 'escaped') {
+        return text.replaceAll('[', '\\[').replaceAll(']', '\\]');
+    } else {
+        return text;
+    }
+}
+
 /**
  * newTurndownService creates a new TurndownService instance. The instance has been
  * customized in a way that depends on the `location` object.
  * @param {string} bulletPoint - the setting for the bullet point character.
+ * @param {string} subBrackets - the Stardown setting for what to substitute square
+ * brackets with.
  * @param {Function(string): string} turndownEscape - the markdown escape function for
  * the Turndown service instance to use.
  * @returns {TurndownService}
  */
-export function newTurndownService(bulletPoint, turndownEscape) {
+export function newTurndownService(bulletPoint, subBrackets, turndownEscape) {
     // https://github.com/mixmark-io/turndown
     const t = new TurndownService({
         bulletListMarker: bulletPoint,
         headingStyle: 'atx',
+        emDelimiter: '*',
         codeBlockStyle: 'fenced',
-    }).remove('style').remove('script').remove('noscript').remove('link');
+    });
 
     t.use(turndownPluginGfm.gfm); // GitHub Flavored Markdown
 
     t.escape = turndownEscape;
 
-    addRules(t);
+    addRules(t, subBrackets);
+
+    t.keep(['u', 'dl', 'dt', 'dd']);
+
+    // Keep subscript and superscript nodes as HTML if and only if they don't contain
+    // HTML anchor elements because they are not clickable at least in Obsidian. Also,
+    // if URLs aren't processed, they can't be made absolute.
+    t.keep((node) => {
+        return (
+            (node.nodeName === 'SUB' || node.nodeName === 'SUP') &&
+            !node.querySelectorAll('a').length
+        );
+    });
+
+    t.remove(['style', 'script', 'noscript', 'link']);
 
     return t;
 }
 
 /**
  * addRules adds custom Turndown rules to a Turndown service instance.
  * @param {TurndownService} t - the Turndown service instance.
+ * @param {string} subBrackets - the Stardown setting for what to substitute square
+ * brackets with.
  * @returns {void}
  */
-function addRules(t) {
+function addRules(t, subBrackets) {
     // Each Turndown rule runs on each yet-unreplaced HTML element. If the element
     // matches the rule's filter, the rule's replacement function runs on it.
 
     t.addRule('inlineLink', {
         filter: isInlineLink,
-        replacement: convertLinkToMarkdown,
+        replacement: newConvertLinkToMarkdown(subBrackets),
     });
 
     t.addRule('img', {
         filter: 'img',
         replacement: convertImageToMarkdown,
     });
+
+    t.addRule('strikethrough', {
+        filter: ['del', 's', 'strike'],
+        replacement: function (content) {
+            return '~~' + content + '~~';
+        },
+    });
+
+    t.addRule('highlight', {
+        filter: 'mark',
+        replacement: function (content) {
+            return '==' + content + '==';
+        },
+    });
 }
 
 /**
@@ -61,40 +112,49 @@ function isInlineLink(node, options) {
 }
 
 /**
- * convertLinkToMarkdown converts an HTML link to a markdown link.
- * @param {string} content - the page's content within the HTML anchor. If the anchor
- * contains some elements like inline SVGs, this variable will be falsy.
- * @param {*} node - the HTML element node.
- * @returns {string}
+ * newConvertLinkToMarkdown returns a function that converts an HTML link to a markdown
+ * link.
+ * @param {string} subBrackets - the Stardown setting for what to substitute square
+ * brackets with.
+ * @returns {Function(string, any): string}
  */
-function convertLinkToMarkdown(content, node) {
-    if (!content) { // if the link's title would be empty
-        return ''; // don't create the link
-    }
-
-    let href = node.getAttribute('href');
-    if (href) {
-        // make the URL absolute
-        if (href.startsWith('/')) {
-            const url = new URL(location.href);
-            const base = url.origin;
-            href = base + href;
-        } else if (href.startsWith('#')) {
-            href = location.href + href;
+function newConvertLinkToMarkdown(subBrackets) {
+    /**
+     * @param {string} content - the page's content within the HTML anchor. If the anchor
+     * contains some elements like inline SVGs, this variable will be falsy.
+     * @param {*} node - the HTML element node.
+     * @returns {string}
+     */
+    return function (content, node) {
+        if (!content) { // if the link's title would be empty
+            return ''; // don't create the link
         }
 
-        // escape parentheses
-        href = href.replace(/([()])/g, '\\$1');
-    }
+        content = replaceBrackets(content, subBrackets);
 
-    // remove excess whitespace and escape quotation marks
-    let title = node.getAttribute('title');
-    if (title) {
-        title = cleanAttribute(title);
-        title = ' "' + title.replace(/"/g, '\\"') + '"';
-    }
+        let href = node.getAttribute('href') || '';
+        if (href) {
+            href = href.replaceAll(' ', '%20').replaceAll('(', '%28').replaceAll(')', '%29');
+
+            // make the URL absolute
+            if (href.startsWith('/')) {
+                const url = new URL(location.href);
+                const base = url.origin;
+                href = base + href;
+            } else if (href.startsWith('#')) {
+                href = location.href + href;
+            }
+        }
+
+        // remove excess whitespace and escape quotation marks
+        let title = node.getAttribute('title') || '';
+        if (title) {
+            title = cleanAttribute(title);
+            title = ' "' + title.replace(/"/g, '\\"') + '"';
+        }
 
-    return '[' + content + '](' + href + title + ')';
+        return '[' + content + '](' + href + title + ')';
+    };
 }
 
 /**
@@ -110,19 +170,19 @@ function convertImageToMarkdown(content, node) {
     }
 
     // remove excess whitespace
-    let alt = cleanAttribute(node.getAttribute('alt'));
+    let alt = cleanAttribute(node.getAttribute('alt') || '');
 
     // make the URL absolute
     if (src.startsWith('//')) {
-        src = 'https:' + src;
+        src = 'https:' + src.replaceAll(' ', '%20');
     } else if (src.startsWith('/')) {
         const url = new URL(location.href);
         const base = url.origin;
         src = base + src;
     }
 
     // remove excess whitespace
-    let title = cleanAttribute(node.getAttribute('title'));
+    let title = cleanAttribute(node.getAttribute('title') || '');
     let titlePart = title ? ' "' + title + '"' : '';
 
     return '![' + alt + '](' + src + titlePart + ')';

src/options.html

@@ -78,7 +78,7 @@ <h3 style="text-align: center">Options</h3>
       <br />
       <br />
       <label for="subBrackets">
-        Replace square brackets in link titles and in selections that keep formatting with
+        Replace square brackets in link titles with
       </label>
       <select id="subBrackets" name="subBrackets">
         <option value="underlined">underlined brackets ⦋ ⦌</option>