Fixed invalid characters in frontmatter YAML

davecburke · Dec 20, 2024 · 4029d03 · 4029d03
1 parent 6da491e
commit 4029d03
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 26 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -1,5 +1,5 @@
 module.exports = function(grunt) {
-    const version = '1.2.4';
+    const version = '1.2.5';
     // Project configuration.
     grunt.initConfig({
         pkg: grunt.file.readJSON('package.json'),

diff --git a/README.md b/README.md
@@ -147,6 +147,10 @@ SilverBullet Clipper uses the following libraries:
 
 # Version History
 
+## 1.2.5
+
+- Fixed issues caused by invalid YAML characters in Frontmatter
+
 ## 1.2.4
 
 - Now adding the page title to the capture. This will show at the bottom of the page above the source and in the frontmatter as source-page-title. Thanks [dklawran](https://github.com/dklawren)

diff --git a/dist/chrome/js/offscreen.js b/dist/chrome/js/offscreen.js
@@ -7,7 +7,7 @@ async function handleMessages(message) {
     }
     switch (message.type) {
         case 'convert-to-markdown':
-            convertToMarkdown(message.data, message.url, message.title, message.pageTitle, message.tags, message.saveMetadataAsFrontmatter);
+            convertToMarkdown(message.data, message.url, message.title, message.pageTitle, message.tags, message.saveMetadataAsFrontmatter, message.sourceTitle);
             break;
         default:
         console.warn(`Unexpected message type received: '${message.type}'.`);
@@ -16,15 +16,15 @@ async function handleMessages(message) {
 }
 
 /* Uses TurndownService to create markdown from a HTML string and user entered tags */
-function convertToMarkdown(htmlString, url, title, pageTitle, tags, saveMetadataAsFrontmatter) {
+function convertToMarkdown(htmlString, url, title, pageTitle, tags, saveMetadataAsFrontmatter, sourceTitle) {
     var turndownService = new TurndownService();
     var markdown;
     var tagsMarkdown = '';
     var frontmatter = '';
     if(saveMetadataAsFrontmatter) {
         frontmatter = '---\n';
-        frontmatter += 'source-title: ' + title.replaceAll(':','-') + '\n';
-        frontmatter += 'source-page-title: ' + pageTitle + '\n';
+        frontmatter += 'source-title: ' + sanitizeYamlString(sourceTitle) + '\n';
+        frontmatter += 'source-page-title: ' + sanitizeYamlString(pageTitle) + '\n';
         frontmatter += 'source-url: ' + url + '\n';
         frontmatter += 'created-date: ' +  getDateStamp(new Date());
     }
@@ -85,3 +85,18 @@ function sendToServiceWorker(type, data, title) {
         title
     });
 }
+
+function sanitizeYamlString(string) {
+    const specialChars = [':', '-', '?', '{', '}', '[', ']', ',', '#', '&', '*', '!', '|', '>', "'", '"', '%', '@', '`'];
+
+    // Check if the string contains any special YAML characters
+    if (specialChars.some(char => string.includes(char))) {
+        // Use double quotes if the string contains single quotes
+        if (string.includes("'")) {
+            return `"${string}"`;
+        }
+        // Otherwise, use single quotes
+        return `'${string}'`;
+    }
+    return string;
+}
diff --git a/dist/chrome/js/service-worker.js b/dist/chrome/js/service-worker.js
@@ -76,7 +76,7 @@ async function getTitleFromTab(tabId) {
 }
 
 /* Use an offscreen document to parse the captured DOM */
-async function sendMessageToOffscreenDocument(type, data, url, pageTitle, title, tags, saveMetadataAsFrontmatter) {
+async function sendMessageToOffscreenDocument(type, data, url, pageTitle, title, tags, saveMetadataAsFrontmatter, sourceTitle) {
     if (!(await hasDocument())) {
         await chrome.offscreen.createDocument({
             url: OFFSCREEN_DOCUMENT_PATH,
@@ -92,7 +92,8 @@ async function sendMessageToOffscreenDocument(type, data, url, pageTitle, title,
         pageTitle,
         title,
         tags,
-        saveMetadataAsFrontmatter
+        saveMetadataAsFrontmatter,
+        sourceTitle
     });
 }
 
@@ -131,6 +132,7 @@ async function captureTab(title, tags, appendPageTitle, saveMetadataAsFrontmatte
         title += ' (' + pageTitle + ')';
     }
 
+    let sourceTitle = title;
     const invalidCharactersRegex = /[^a-zA-Z0-9\-_\s\(\):]/g;
     title = title.replace(invalidCharactersRegex,'_');
     chrome.storage.sync.get(["maxTitleLength"], (items) => {
@@ -148,7 +150,8 @@ async function captureTab(title, tags, appendPageTitle, saveMetadataAsFrontmatte
             pageTitle,
             title,
             tags,
-            saveMetadataAsFrontmatter
+            saveMetadataAsFrontmatter,
+            sourceTitle
         );
 }
 

diff --git a/dist/chrome/manifest.json b/dist/chrome/manifest.json
@@ -1,6 +1,6 @@
 {
     "name": "SilverBullet Clipper",
-    "version": "1.2.4",
+    "version": "1.2.5",
     "manifest_version": 3,
     "description": "SilverBullet Clipper captures a web page URL or selected content, converts it to markdown and saves it in the SilverBullet Inbox",
     "icons": {

diff --git a/dist/firefox/js/offscreen.js b/dist/firefox/js/offscreen.js
@@ -7,7 +7,7 @@ async function handleMessages(message) {
     }
     switch (message.type) {
         case 'convert-to-markdown':
-            convertToMarkdown(message.data, message.url, message.title, message.pageTitle, message.tags, message.saveMetadataAsFrontmatter);
+            convertToMarkdown(message.data, message.url, message.title, message.pageTitle, message.tags, message.saveMetadataAsFrontmatter, message.sourceTitle);
             break;
         default:
         console.warn(`Unexpected message type received: '${message.type}'.`);
@@ -16,15 +16,15 @@ async function handleMessages(message) {
 }
 
 /* Uses TurndownService to create markdown from a HTML string and user entered tags */
-function convertToMarkdown(htmlString, url, title, pageTitle, tags, saveMetadataAsFrontmatter) {
+function convertToMarkdown(htmlString, url, title, pageTitle, tags, saveMetadataAsFrontmatter, sourceTitle) {
     var turndownService = new TurndownService();
     var markdown;
     var tagsMarkdown = '';
     var frontmatter = '';
     if(saveMetadataAsFrontmatter) {
         frontmatter = '---\n';
-        frontmatter += 'source-title: ' + title.replaceAll(':','-') + '\n';
-        frontmatter += 'source-page-title: ' + pageTitle + '\n';
+        frontmatter += 'source-title: ' + sanitizeYamlString(sourceTitle) + '\n';
+        frontmatter += 'source-page-title: ' + sanitizeYamlString(pageTitle) + '\n';
         frontmatter += 'source-url: ' + url + '\n';
         frontmatter += 'created-date: ' +  getDateStamp(new Date());
     }
@@ -85,3 +85,18 @@ function sendToServiceWorker(type, data, title) {
         title
     });
 }
+
+function sanitizeYamlString(string) {
+    const specialChars = [':', '-', '?', '{', '}', '[', ']', ',', '#', '&', '*', '!', '|', '>', "'", '"', '%', '@', '`'];
+
+    // Check if the string contains any special YAML characters
+    if (specialChars.some(char => string.includes(char))) {
+        // Use double quotes if the string contains single quotes
+        if (string.includes("'")) {
+            return `"${string}"`;
+        }
+        // Otherwise, use single quotes
+        return `'${string}'`;
+    }
+    return string;
+}
diff --git a/dist/firefox/js/service-worker.js b/dist/firefox/js/service-worker.js
@@ -73,7 +73,7 @@ async function getTitleFromTab(tabId) {
 }
 
 /* Use an offscreen document to parse the captured DOM */
-function sendMessageToOffscreenDocument(type, data, url, pageTitle, title, tags, saveMetadataAsFrontmatter) {
+function sendMessageToOffscreenDocument(type, data, url, pageTitle, title, tags, saveMetadataAsFrontmatter, sourceTitle) {
     browser.runtime.sendMessage({
         type,
         target: 'offscreen',
@@ -82,7 +82,8 @@ function sendMessageToOffscreenDocument(type, data, url, pageTitle, title, tags,
         pageTitle,
         title,
         tags,
-        saveMetadataAsFrontmatter
+        saveMetadataAsFrontmatter,
+        sourceTitle
     });
 }
 
@@ -122,6 +123,7 @@ async function captureTab(title, tags, appendPageTitle, saveMetadataAsFrontmatte
         title += ' (' + pageTitle + ')';
     }
 
+    let sourceTitle = title;
     const invalidCharactersRegex = /[^a-zA-Z0-9\-_\s\(\):]/g;
     title = title.replace(invalidCharactersRegex,'_');
     browser.storage.sync.get(["maxTitleLength"], (items) => {
@@ -139,7 +141,8 @@ async function captureTab(title, tags, appendPageTitle, saveMetadataAsFrontmatte
             pageTitle,
             title,
             tags,
-            saveMetadataAsFrontmatter
+            saveMetadataAsFrontmatter,
+            sourceTitle
         );
 }
 

diff --git a/dist/firefox/manifest.json b/dist/firefox/manifest.json
@@ -1,6 +1,6 @@
 {
     "name": "SilverBullet Clipper",
-    "version": "1.2.4",
+    "version": "1.2.5",
     "manifest_version": 2,
     "description": "SilverBullet Clipper captures a web page URL or selected content, converts it to markdown and saves it in the SilverBullet Inbox",
     "icons": {

diff --git a/src/js/offscreen.template.js b/src/js/offscreen.template.js
@@ -7,7 +7,7 @@ async function handleMessages(message) {
     }
     switch (message.type) {
         case 'convert-to-markdown':
-            convertToMarkdown(message.data, message.url, message.title, message.pageTitle, message.tags, message.saveMetadataAsFrontmatter);
+            convertToMarkdown(message.data, message.url, message.title, message.pageTitle, message.tags, message.saveMetadataAsFrontmatter, message.sourceTitle);
             break;
         default:
         console.warn(`Unexpected message type received: '${message.type}'.`);
@@ -16,15 +16,15 @@ async function handleMessages(message) {
 }
 
 /* Uses TurndownService to create markdown from a HTML string and user entered tags */
-function convertToMarkdown(htmlString, url, title, pageTitle, tags, saveMetadataAsFrontmatter) {
+function convertToMarkdown(htmlString, url, title, pageTitle, tags, saveMetadataAsFrontmatter, sourceTitle) {
     var turndownService = new TurndownService();
     var markdown;
     var tagsMarkdown = '';
     var frontmatter = '';
     if(saveMetadataAsFrontmatter) {
         frontmatter = '---\n';
-        frontmatter += 'source-title: ' + title.replaceAll(':','-') + '\n';
-        frontmatter += 'source-page-title: ' + pageTitle + '\n';
+        frontmatter += 'source-title: ' + sanitizeYamlString(sourceTitle) + '\n';
+        frontmatter += 'source-page-title: ' + sanitizeYamlString(pageTitle) + '\n';
         frontmatter += 'source-url: ' + url + '\n';
         frontmatter += 'created-date: ' +  getDateStamp(new Date());
     }
@@ -85,3 +85,18 @@ function sendToServiceWorker(type, data, title) {
         title
     });
 }
+
+function sanitizeYamlString(string) {
+    const specialChars = [':', '-', '?', '{', '}', '[', ']', ',', '#', '&', '*', '!', '|', '>', "'", '"', '%', '@', '`'];
+
+    // Check if the string contains any special YAML characters
+    if (specialChars.some(char => string.includes(char))) {
+        // Use double quotes if the string contains single quotes
+        if (string.includes("'")) {
+            return `"${string}"`;
+        }
+        // Otherwise, use single quotes
+        return `'${string}'`;
+    }
+    return string;
+}
diff --git a/src/js/service-worker.template.js b/src/js/service-worker.template.js
@@ -76,7 +76,7 @@ async function getTitleFromTab(tabId) {
 }
 
 /* Use an offscreen document to parse the captured DOM */
-async function sendMessageToOffscreenDocument(type, data, url, pageTitle, title, tags, saveMetadataAsFrontmatter) {
+async function sendMessageToOffscreenDocument(type, data, url, pageTitle, title, tags, saveMetadataAsFrontmatter, sourceTitle) {
     if (!(await hasDocument())) {
         await chrome.offscreen.createDocument({
             url: OFFSCREEN_DOCUMENT_PATH,
@@ -92,7 +92,8 @@ async function sendMessageToOffscreenDocument(type, data, url, pageTitle, title,
         pageTitle,
         title,
         tags,
-        saveMetadataAsFrontmatter
+        saveMetadataAsFrontmatter,
+        sourceTitle
     });
 }<% } %><% if (taskName === 'firefox') { %>async function getTextFromSelection(tabId) {
     return new Promise((resolve, reject) => {
@@ -167,7 +168,7 @@ async function getTitleFromTab(tabId) {
 }
 
 /* Use an offscreen document to parse the captured DOM */
-function sendMessageToOffscreenDocument(type, data, url, pageTitle, title, tags, saveMetadataAsFrontmatter) {
+function sendMessageToOffscreenDocument(type, data, url, pageTitle, title, tags, saveMetadataAsFrontmatter, sourceTitle) {
     browser.runtime.sendMessage({
         type,
         target: 'offscreen',
@@ -176,7 +177,8 @@ function sendMessageToOffscreenDocument(type, data, url, pageTitle, title, tags,
         pageTitle,
         title,
         tags,
-        saveMetadataAsFrontmatter
+        saveMetadataAsFrontmatter,
+        sourceTitle
     });
 }
 <% } %>
@@ -216,6 +218,7 @@ async function captureTab(title, tags, appendPageTitle, saveMetadataAsFrontmatte
         title += ' (' + pageTitle + ')';
     }
 
+    let sourceTitle = title;
     const invalidCharactersRegex = /[^a-zA-Z0-9\-_\s\(\):]/g;
     title = title.replace(invalidCharactersRegex,'_');
     <%= runTime %>.storage.sync.get(["maxTitleLength"], (items) => {
@@ -233,7 +236,8 @@ async function captureTab(title, tags, appendPageTitle, saveMetadataAsFrontmatte
             pageTitle,
             title,
             tags,
-            saveMetadataAsFrontmatter
+            saveMetadataAsFrontmatter,
+            sourceTitle
         );
 }