Merge pull request #115 from Stardown-app/feature-languages

Add markup language setting with markdown & HTML options

Author: wheelercj

chrome/config.js

@@ -30,9 +30,10 @@ export async function sleep(ms) {
 
 /**
  * createContextMenus creates the context menu options.
+ * @param {string} markupLanguage - the markup language the user chose.
  * @returns {void}
  */
-export function createContextMenus() {
+export function createContextMenus(markupLanguage) {
     // This function should do nothing. It needs to exist because the Firefox extension
     // uses a function by the same name that is imported into the background script.
 }
@@ -48,9 +49,10 @@ let isTableSelected = false;
  * of HTML element the mouse is interacting with. This only has an effect if the context
  * menu is not currently visible.
  * @param {string} context - info about the element the mouse is interacting with.
+ * @param {string} markupLanguage - the markup language the user chose.
  * @returns {Promise<void>}
  */
-export async function updateContextMenu(context) {
+export async function updateContextMenu(context, markupLanguage) {
     // The `browser.contextMenus.update` method doesn't work well in Chromium because
     // when it's used to hide all but one context menu option, the one remaining would
     // appear under a "Stardown" parent menu option instead of being in the root of the
@@ -82,7 +84,40 @@ export async function updateContextMenu(context) {
             browser.contextMenus.create(menu.videoItem);
             browser.contextMenus.create(menu.audioItem);
         }
+
+        updateContextMenuLanguage(markupLanguage);
+    }
+}
+
+/**
+ * updateContextMenuLanguage changes the context menu options to reflect the user's
+ * chosen markup language.
+ * @param {string} markupLanguage - the markup language the user chose.
+ * @returns {void}
+ */
+export function updateContextMenuLanguage(markupLanguage) {
+    if (markupLanguage === 'html') {
+        markupLanguage = 'HTML';
     }
+
+    browser.contextMenus.update('page', {
+        title: `Copy ${markupLanguage} link to here`,
+    }, () => { if (browser.runtime.lastError) return; });
+    browser.contextMenus.update('selection', {
+        title: `Copy ${markupLanguage} of selection`,
+    }, () => { if (browser.runtime.lastError) return; });
+    browser.contextMenus.update('link', {
+        title: `Copy ${markupLanguage} of link`,
+    }, () => { if (browser.runtime.lastError) return; });
+    browser.contextMenus.update('image', {
+        title: `Copy ${markupLanguage} of image`,
+    }, () => { if (browser.runtime.lastError) return; });
+    browser.contextMenus.update('video', {
+        title: `Copy ${markupLanguage} of video`,
+    }, () => { if (browser.runtime.lastError) return; });
+    browser.contextMenus.update('audio', {
+        title: `Copy ${markupLanguage} of audio`,
+    }, () => { if (browser.runtime.lastError) return; });
 }
 
 /**

docs/troubleshooting.md

@@ -1,5 +1,11 @@
 # Troubleshooting
 
+## The right-click options disappeared
+
+Due to browser limitations, Stardown's context menu options cannot appear for certain kinds of links, images, and videos. Specifically, they cannot appear for canvases, background images, inline SVGs, HTML anchors that contain both text and image(s), videos that don't have a `<video>` HTML element, and videos with a `<video>` HTML element that's covered by other elements.
+
+Besides those possibilities, browsers have an occasionally reoccuring bug that makes the context menu options disappear. Reinstalling Stardown should fix this.
+
 ## The right-click option copied a link for the entire page, not a specific part
 
 Stardown looks for an HTML element ID where you right-clicked, but some parts of websites don't have any IDs. If there is no HTML element ID where you right-click and you don't select text before right-clicking, the link Stardown creates will be for the entire page, not for the part of the page where you right-clicked. Most websites assign an ID to each section title.
@@ -8,12 +14,6 @@ It's also not possible to link to text within [HTML iframes](https://www.w3schoo
 
 Lastly, a small number of sites allow creating text fragment links but don't allow using them.
 
-## The right-click options disappeared
-
-Due to browser limitations, Stardown's context menu options cannot appear for certain kinds of links, images, and videos. Specifically, they cannot appear for canvases, background images, inline SVGs, HTML anchors that contain both text and image(s), videos that don't have a `<video>` HTML element, and videos with a `<video>` HTML element that's covered by other elements.
-
-Besides those possibilities, browsers have an occasionally reoccuring bug that makes the context menu options disappear. Reinstalling Stardown should fix this.
-
 ## Something else is wrong
 
 If reinstalling Stardown doesn't fix it and [the issues page](https://github.com/Stardown-app/Stardown/issues?q=is%3Aissue) doesn't have an issue for it yet, please make a new issue.

firefox/config.js

@@ -30,9 +30,10 @@ export async function sleep(ms) {
 
 /**
  * createContextMenus creates the context menu options.
+ * @param {string} markupLanguage - the markup language the user chose.
  * @returns {void}
  */
-export function createContextMenus() {
+export function createContextMenus(markupLanguage) {
     browser.runtime.onInstalled.addListener(() => {
         browser.contextMenus.create(menu.pageItem);
         browser.contextMenus.create(menu.selectionItem);
@@ -51,6 +52,8 @@ export function createContextMenus() {
         browser.contextMenus.update('csvTable', { visible: false });
         browser.contextMenus.update('jsonTable', { visible: false });
         browser.contextMenus.update('htmlTable', { visible: false });
+
+        updateContextMenuLanguage(markupLanguage);
     });
 }
 
@@ -59,9 +62,10 @@ export function createContextMenus() {
  * of HTML element the mouse is interacting with. This only has an effect if the context
  * menu is not currently visible.
  * @param {string} context - info about the element the mouse is interacting with.
+ * @param {string} markupLanguage - the markup language the user chose.
  * @returns {Promise<void>}
  */
-export async function updateContextMenu(context) {
+export async function updateContextMenu(context, markupLanguage) {
     switch (context.mouseover) {
         case 'selection':
             browser.contextMenus.update('link', { visible: false });
@@ -96,6 +100,39 @@ export async function updateContextMenu(context) {
         browser.contextMenus.update('jsonTable', { visible: false });
         browser.contextMenus.update('htmlTable', { visible: false });
     }
+
+    updateContextMenuLanguage(markupLanguage);
+}
+
+/**
+ * updateContextMenuLanguage changes the context menu options to reflect the user's
+ * chosen markup language.
+ * @param {string} markupLanguage - the markup language the user chose.
+ * @returns {void}
+ */
+export function updateContextMenuLanguage(markupLanguage) {
+    if (markupLanguage === 'html') {
+        markupLanguage = 'HTML';
+    }
+
+    browser.contextMenus.update('page', {
+        title: `Copy ${markupLanguage} link to here`,
+    });
+    browser.contextMenus.update('selection', {
+        title: `Copy ${markupLanguage} of selection`,
+    });
+    browser.contextMenus.update('link', {
+        title: `Copy ${markupLanguage} of link`,
+    });
+    browser.contextMenus.update('image', {
+        title: `Copy ${markupLanguage} of image`,
+    });
+    browser.contextMenus.update('video', {
+        title: `Copy ${markupLanguage} of video`,
+    });
+    browser.contextMenus.update('audio', {
+        title: `Copy ${markupLanguage} of audio`,
+    });
 }
 
 /**

rollup.config.firefox.mjs

@@ -72,6 +72,11 @@ export default [
                         src: ['src/images'],
                         dest: 'firefox',
                     },
+                    {
+                        // copy all html files
+                        src: ['src/*.html'],
+                        dest: 'firefox',
+                    },
                     {
                         // copy js files in the converters folder
                         src: ['src/converters/*'],

src/background.js

@@ -14,16 +14,19 @@
    limitations under the License.
 */
 
-import { browser, sleep, createContextMenus, updateContextMenu } from './config.js';
+import { browser, sleep, createContextMenus, updateContextMenu, updateContextMenuLanguage } from './config.js';
 import { getSetting } from './common.js';
 import { createTabLink } from './generators/md.js';
 
-createContextMenus();
-
+let markupLanguage = 'markdown';
 let lastClick = new Date(0);
 let doubleClickInterval = 500;
 let jsonDestination = 'clipboard';
 
+getSetting('markupLanguage').then(value => {
+    markupLanguage = value;
+    createContextMenus(value);
+});
 getSetting('doubleClickInterval').then(value => doubleClickInterval = value);
 getSetting('jsonDestination').then(value => jsonDestination = value);
 
@@ -61,7 +64,10 @@ browser.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
         // These context menu updates are done with messages from a content script
         // because the contextMenus.update method cannot update a context menu that is
         // already open. The content script listens for mouseover and mouseup events.
-        await updateContextMenu(message.context);
+        await updateContextMenu(message.context, markupLanguage);
+    } else if (message.markupLanguage) {
+        markupLanguage = message.markupLanguage;
+        updateContextMenuLanguage(markupLanguage);
     } else if (message.doubleClickInterval) {
         doubleClickInterval = message.doubleClickInterval;
     } else if (message.jsonDestination) {
@@ -219,17 +225,34 @@ async function handleIconDoubleClick(activeTab) {
         }
     }
 
-    const subBrackets = await getSetting('subBrackets');
-    const links = await Promise.all(
-        tabs.map(tab => createTabLink(tab, subBrackets))
-    );
-    const bulletPoint = await getSetting('bulletPoint');
-    const linksListMd = links.map(link => `${bulletPoint} ${link}\n`).join('');
+    let text = '';
+    switch (markupLanguage) {
+        case 'html':
+            const result = ['<ul>'];
+            for (let i = 0; i < tabs.length; i++) {
+                const anchor = `  <li><a href="${tabs[i].url}">${tabs[i].title}</a></li>`;
+                result.push(anchor);
+            }
+            result.push('</ul>');
+            text = result.join('\n');
+            break;
+        case 'markdown':
+            const mdSubBrackets = await getSetting('mdSubBrackets');
+            const links = await Promise.all(
+                tabs.map(tab => createTabLink(tab, mdSubBrackets))
+            );
+            const mdBulletPoint = await getSetting('mdBulletPoint');
+            text = links.map(link => `${mdBulletPoint} ${link}\n`).join('');
+            break;
+        default:
+            await showStatus(0, 'Error', 'Unsupported markup language');
+            return;
+    }
 
     const {
         status, notifTitle, notifBody,
     } = await browser.tabs.sendMessage(activeTab.id, {
-        category: 'copy', text: linksListMd,
+        category: 'copy', text: text,
     });
 
     if (status === 0) { // failure

src/common.js

@@ -17,25 +17,26 @@
 import { browser } from './config.js';
 
 const defaultSettings = {
-    youtubeMd: 'almost everywhere',
+    markupLanguage: 'markdown',
     createTextFragment: true,
     omitNav: true,
     omitFooter: true,
     notifyOnWarning: false,
     notifyOnSuccess: false,
-    subBrackets: 'underlined',
-    selectionFormat: 'source with link',
-    selectionTemplate: `
-> [!note]
+    doubleClickWindows: 'current',
+    doubleClickInterval: 500,
+
+    mdSelectionFormat: 'source with link',
+    mdYoutube: 'almost everywhere',
+    mdSubBrackets: 'underlined',
+    mdBulletPoint: '-',
+    mdSelectionTemplate: `> [!note]
 > from [{{link.title}}]({{link.url}}) on {{date.YYYYMMDD}}
 
-{{selection}}
-`.trim(),
+{{selection}}`,
+
+    jsonEmptyCell: 'null',
     jsonDestination: 'clipboard',
-    emptyCellJson: 'null',
-    bulletPoint: '-',
-    doubleClickWindows: 'current',
-    doubleClickInterval: 500,
 };
 
 /**

src/content.js

@@ -264,8 +264,18 @@ async function handleIconSingleClick() {
         // count as a selection click
         return await handleSelectionRightClick('', selection);
     } else {
-        const linkMd = await md.createLink(document.title, location.href);
-        return await handleCopyRequest(linkMd);
+        const markupLanguage = await getSetting('markupLanguage');
+        switch (markupLanguage) {
+            case 'markdown':
+                const linkMd = await md.createLink(document.title, location.href);
+                return await handleCopyRequest(linkMd);
+            case 'html':
+                const anchor = `<a href="${location.href}">${document.title}</a>`;
+                return await handleCopyRequest(anchor);
+            default:
+                console.error('Unknown markup language:', markupLanguage);
+                throw new Error('Unknown markup language:', markupLanguage);
+        }
     }
 }
 
@@ -311,9 +321,9 @@ async function handleSelectionRightClick(htmlId, selection) {
         }
     }
 
-    const markdown = await htmlSelection.createText(title, url, selection);
+    const text = await htmlSelection.createText(title, url, selection);
 
-    return await handleCopyRequest(markdown);
+    return await handleCopyRequest(text);
 }
 
 /**

src/converters/README.md

@@ -73,12 +73,12 @@ For example, settings and environment info could be put into `ctx` to be used th
 const ctx = {
     locationHref: location.href,
     document: document,
-    subBrackets: await getSetting('subBrackets'),
-    bulletPoint: await getSetting('bulletPoint'),
     omitNav: await getSetting('omitNav'),
     omitFooter: await getSetting('omitFooter'),
-    youtubeMd: await getSetting('youtubeMd'),
     indent: '',
+    mdSubBrackets: await getSetting('mdSubBrackets'),
+    mdBulletPoint: await getSetting('mdBulletPoint'),
+    mdYoutube: await getSetting('mdYoutube'),
 };
 ```
 

src/converters/json.js

@@ -22,15 +22,15 @@ import * as tables from './tables.js';
 /**
  * htmlTableToJson converts an HTML table to JSON.
  * @param {DocumentFragment} frag
- * @param {string|undefined} emptyCellJson - the JSON representation of an empty cell.
+ * @param {string|undefined} jsonEmptyCell - the JSON representation of an empty cell.
  * @returns {Promise<string>}
  */
-export async function htmlTableToJson(frag, emptyCellJson) {
+export async function htmlTableToJson(frag, jsonEmptyCell) {
     const table = frag.firstChild;
 
     const ctx = {
         document: document,
-        emptyCellJson: emptyCellJson || await getSetting('emptyCellJson') || 'null',
+        jsonEmptyCell: jsonEmptyCell || await getSetting('jsonEmptyCell') || 'null',
     };
 
     return convertTable(ctx, table);
@@ -71,21 +71,21 @@ function convertTable(ctx, table) {
             if (x === 0) { // if this is the first column
                 if (cellStr.length === 0) { // if the cell is empty
                     if ( // if the empty cell JSON is already wrapped with quotes
-                        ctx.emptyCellJson.length > 0 &&
-                        ctx.emptyCellJson[0] === '"' &&
-                        ctx.emptyCellJson[ctx.emptyCellJson.length - 1] === '"'
+                        ctx.jsonEmptyCell.length > 0 &&
+                        ctx.jsonEmptyCell[0] === '"' &&
+                        ctx.jsonEmptyCell[ctx.jsonEmptyCell.length - 1] === '"'
                     ) {
-                        json.push(ctx.emptyCellJson + ': [');
+                        json.push(ctx.jsonEmptyCell + ': [');
                     } else { // if the empty cell JSON is not already wrapped with quotes
-                        cellStr = ctx.emptyCellJson.replaceAll('"', '\\"');
+                        cellStr = ctx.jsonEmptyCell.replaceAll('"', '\\"');
                         json.push('"' + cellStr + '": [');
                     }
                 } else { // if the cell is not empty
                     cellStr = cellStr.replaceAll('"', '\\"').replaceAll(/\s+/g, ' ');
                     json.push('"' + cellStr + '": [');
                 }
             } else if (cellStr.length === 0) {
-                json.push(ctx.emptyCellJson);
+                json.push(ctx.jsonEmptyCell);
             } else if (['true', 'false', 'null'].includes(cellStr)) {
                 json.push(cellStr);
             } else if (canBeJsonNumber(cellStr)) {