Added option to disable turndown escaping

To help with #50
deathau · Feb 16, 2021 · 227515c · 227515c
1 parent a1d3b0e
commit 227515c
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 4 deletions.
diff --git a/background/background.js b/background/background.js
@@ -19,6 +19,7 @@ const defaultOptions = {
   imagePrefix: '{title}/',
   disallowedChars: '[]#^',
   downloadMode: 'downloadsApi',
+  turndownEscape: true,
   // obsidianVault: null,
   // obsidianPathType: 'name'
 }
@@ -28,8 +29,14 @@ browser.runtime.onMessage.addListener(notify);
 // create context menus
 createMenus();
 
+TurndownService.prototype.defaultEscape = TurndownService.prototype.escape;
+
 // function to convert the article content to markdown using Turndown
 function turndown(content, options, article) {
+
+  if (options.turndownEscape) TurndownService.prototype.escape = TurndownService.prototype.defaultEscape;
+  else TurndownService.prototype.escape = s => s;
+
   var turndownService = new TurndownService(options);
 
   turndownService.keep(['iframe']);

diff --git a/options/options.css b/options/options.css
@@ -166,6 +166,13 @@ input[type="text"] {
 .checkbox-container>label {
     cursor: pointer;
     padding: 20px 20px 20px 65px;
+    max-width: calc(100% - 100px);
+}
+
+label p{
+    word-break: normal;
+    white-space: normal;
+    font-weight: normal;
 }
 
 .textbox-container {

diff --git a/options/options.html b/options/options.html
@@ -23,6 +23,8 @@ <h2>Custom text</h2>
             <li><code>{keywords}</code> - Meta keywords (if present). Comma separated by default.</li>
             <li><code>{keywords:SEPARATOR}</code> - Meta keywords (if present) separated by SEPARATOR. For example, to separate by space, use <code>{keywords: }</code></li>
         </ul>
+        There is also support for all meta tags not mentioned above, should the page you are clipping support them.
+        For example, try <code>{og:image}</code> or any other widely supported meta tags
     </small>
 
     <h3>Title template</h3>
@@ -72,8 +74,8 @@ <h3>Download Mode</h3>
             <label for="downloadsApi">Downloads API (recommended)</label>
             <input type="radio" name="downloadMode" id="contentLink" value="contentLink" />
             <label for="contentLink">Content Link</label>
-            <input type="radio" name="downloadMode" id="obsidianUri" value="obsidianUri" />
-            <label for="obsidianUri">Obsidian URI (obsidian://new)</label>
+            <!-- <input type="radio" name="downloadMode" id="obsidianUri" value="obsidianUri" />
+            <label for="obsidianUri">Obsidian URI (obsidian://new)</label> -->
         </div>
         <!-- <div id="obsidianUriGroup">
             <div class="textbox-container" id="obsidianVault">
@@ -255,6 +257,21 @@ <h3>Image Style</h3>
         </label>
     </div>
 
+    <div class="checkbox-container" id="turndownEscape-container">
+        <input name="turndownEscape" id="turndownEscape" type="checkbox" />
+        <label for="turndownEscape">Escape Markdown Characters
+            <p><small>
+                By default, backslashes (<code>\</code>) are used to escape 
+                Markdown characters in the HTML input. This ensures that these
+                characters are not interpreted as Markdown. For example, the
+                contents of <code>&lt;h1&gt;1. Hello world&lt;/h1&gt;</code>
+                needs to be escaped to <code>1\. Hello world</code>, otherwise
+                it will be interpreted as a list item rather than a heading.
+                <br />Disabling this option disables this escaping.
+            </small></p>
+        </label>
+    </div>
+
     <div id="spinner" style="display: none;"></div>
 
     <script src="../browser-polyfill.min.js"></script>

diff --git a/options/options.js b/options/options.js
@@ -19,8 +19,9 @@ const defaultOptions = {
     imagePrefix: '{title}/',
     disallowedChars: '[]#^',
     downloadMode: 'downloadsApi',
+    turndownEscape: true,
     // obsidianVault: null,
-    // obsidianPathType: 'name'
+    // obsidianPathType: 'name',
 }
 
 let options = defaultOptions;
@@ -39,7 +40,8 @@ const saveOptions = e => {
         saveAs: document.querySelector("[name='saveAs']").checked,
         downloadImages: document.querySelector("[name='downloadImages']").checked,
         imagePrefix: document.querySelector("[name='imagePrefix']").value,
-        // obsidianVault: document.querySelector("[name='obsidianValur']").value,
+        turndownEscape: document.querySelector("[name='turndownEscape']").checked,
+        // obsidianVault: document.querySelector("[name='obsidianVault']").value,
 
         headingStyle: getCheckedValue(document.querySelectorAll("input[name='headingStyle']")),
         hr: getCheckedValue(document.querySelectorAll("input[name='hr']")),
@@ -107,6 +109,7 @@ const restoreOptions = () => {
         document.querySelector("[name='saveAs']").checked = options.saveAs;
         document.querySelector("[name='downloadImages']").checked = options.downloadImages;
         document.querySelector("[name='imagePrefix']").value = options.imagePrefix;
+        document.querySelector("[name='turndownEscape']").checked = options.turndownEscape;
         // document.querySelector("[name='obsidianVault']").value = options.obsidianVault;
 
         setCheckedValue(document.querySelectorAll("[name='headingStyle']"), options.headingStyle);