web: open all links in release notes in a new tab/window

apps/web/desktop/autoupdate.js

@@ -20,7 +20,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 const { autoUpdater } = require("electron-updater");
 const { EVENTS } = require("./events");
 const { sendMessageToRenderer } = require("./ipc/utils");
-const { getChangelog } = require("./changelog");
 
 async function configureAutoUpdater() {
   autoUpdater.setFeedURL({
@@ -36,9 +35,7 @@ async function configureAutoUpdater() {
   autoUpdater.addListener("checking-for-update", () => {
     sendMessageToRenderer(EVENTS.checkingForUpdate);
   });
-  autoUpdater.addListener("update-available", async (info) => {
+  autoUpdater.addListener("update-available", (info) => {
-    info.releaseNotes = await getChangelog(info.version);
-    console.log("Get release notes!", info.releaseNotes);
     sendMessageToRenderer(EVENTS.updateAvailable, info);
   });
   autoUpdater.addListener("download-progress", (progress) => {

apps/web/desktop/package.json

@@ -13,8 +13,7 @@
     "electron-better-ipc": "^2.0.1",
     "electron-serve": "^1.1.0",
     "electron-updater": "^5.2.1",
-    "isomorphic-fetch": "^3.0.0",
+    "isomorphic-fetch": "^3.0.0"
-    "showdown": "^2.1.0"
   },
   "devDependencies": {
     "@types/node-fetch": "^2.6.2",
@@ -22,9 +21,7 @@
     "electron-builder": "^23.3.3",
     "electron-builder-notarize": "^1.5.0",
     "electron-reloader": "^1.2.3",
-    "esbuild": "^0.15.8",
+    "esbuild": "^0.15.8"
-    "mvdir": "^1.0.21",
-    "zx": "^7.0.7"
   },
   "scripts": {
     "build": "esbuild ./electron.js ./preload.js --minify --external:electron --external:fsevents --bundle --outdir=./build --platform=node --tsconfig=tsconfig.json --define:MAC_APP_STORE=false",

apps/web/package-lock.json

@@ -7,6 +7,7 @@
     "": {
       "name": "@notesnook/web",
       "version": "2.2.0",
+      "license": "GPL-3.0-or-later",
       "dependencies": {
         "@brixtol/currency-symbols": "^1.1.1",
         "@dnd-kit/core": "^6.0.5",
@@ -34,6 +35,7 @@
         "localforage": "^1.10.0",
         "localforage-driver-memory": "^1.0.5",
         "localforage-getitems": "https://github.com/thecodrr/localForage-getItems.git",
+        "marked": "^4.1.0",
         "phone": "^3.1.14",
         "platform": "^1.3.6",
         "print-js": "^1.6.0",
@@ -257,16 +259,18 @@
     },
     "desktop": {
       "name": "@notesnook/desktop",
-      "version": "2.2.0",
+      "version": "2.1.6",
       "dependencies": {
         "diary": "^0.3.1",
         "electron-better-ipc": "^2.0.1",
         "electron-serve": "^1.1.0",
         "electron-updater": "^5.2.1",
         "isomorphic-fetch": "^3.0.0",
+        "marked": "^4.1.0",
         "showdown": "^2.1.0"
       },
       "devDependencies": {
+        "@types/marked": "^4.0.7",
         "@types/node-fetch": "^2.6.2",
         "electron": "^19.0.8",
         "electron-builder": "^23.3.3",
@@ -4160,6 +4164,12 @@
       "version": "0.0.29",
       "license": "MIT"
     },
+    "node_modules/@types/marked": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.0.7.tgz",
+      "integrity": "sha512-eEAhnz21CwvKVW+YvRvcTuFKNU9CV1qH+opcgVK3pIMI6YZzDm6gc8o2vHjldFk6MGKt5pueSB7IOpvpx5Qekw==",
+      "dev": true
+    },
     "node_modules/@types/mime": {
       "version": "3.0.1",
       "license": "MIT"
@@ -11987,6 +11997,17 @@
       "version": "0.1.0",
       "dev": true
     },
+    "node_modules/marked": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.1.0.tgz",
+      "integrity": "sha512-+Z6KDjSPa6/723PQYyc1axYZpYYpDnECDaU6hkaf5gqBieBkMKYReL5hteF2QizhlMbgbo8umXl/clZ67+GlsA==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/matcher": {
       "version": "3.0.0",
       "dev": true,
@@ -14659,7 +14680,6 @@
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
       "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
@@ -14767,7 +14787,6 @@
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
       "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -15599,7 +15618,6 @@
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
       "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
@@ -17081,7 +17099,6 @@
     },
     "node_modules/typescript": {
       "version": "4.8.2",
-      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -19408,10 +19425,12 @@
       }
     },
     "@csstools/postcss-unset-value": {
-      "version": "1.0.2"
+      "version": "1.0.2",
+      "requires": {}
     },
     "@csstools/selector-specificity": {
-      "version": "2.0.2"
+      "version": "2.0.2",
+      "requires": {}
     },
     "@develar/schema-utils": {
       "version": "2.6.5",
@@ -19433,7 +19452,8 @@
         },
         "ajv-keywords": {
           "version": "3.5.2",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "json-schema-traverse": {
           "version": "0.4.1",
@@ -20096,6 +20116,7 @@
     "@notesnook/desktop": {
       "version": "file:desktop",
       "requires": {
+        "@types/marked": "^4.0.7",
         "@types/node-fetch": "^2.6.2",
         "diary": "^0.3.1",
         "electron": "^19.0.8",
@@ -20107,6 +20128,7 @@
         "electron-updater": "^5.2.1",
         "esbuild": "^0.15.8",
         "isomorphic-fetch": "^3.0.0",
+        "marked": "^4.1.0",
         "mvdir": "^1.0.21",
         "showdown": "^2.1.0",
         "zx": "^7.0.7"
@@ -20675,6 +20697,12 @@
     "@types/json5": {
       "version": "0.0.29"
     },
+    "@types/marked": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.0.7.tgz",
+      "integrity": "sha512-eEAhnz21CwvKVW+YvRvcTuFKNU9CV1qH+opcgVK3pIMI6YZzDm6gc8o2vHjldFk6MGKt5pueSB7IOpvpx5Qekw==",
+      "dev": true
+    },
     "@types/mime": {
       "version": "3.0.1"
     },
@@ -21100,10 +21128,12 @@
       }
     },
     "acorn-import-assertions": {
-      "version": "1.8.0"
+      "version": "1.8.0",
+      "requires": {}
     },
     "acorn-jsx": {
-      "version": "5.3.2"
+      "version": "5.3.2",
+      "requires": {}
     },
     "acorn-node": {
       "version": "1.8.2",
@@ -21419,7 +21449,8 @@
           }
         },
         "ajv-keywords": {
-          "version": "3.5.2"
+          "version": "3.5.2",
+          "requires": {}
         },
         "json-schema-traverse": {
           "version": "0.4.1"
@@ -21468,7 +21499,8 @@
       }
     },
     "babel-plugin-named-asset-import": {
-      "version": "0.3.8"
+      "version": "0.3.8",
+      "requires": {}
     },
     "babel-plugin-polyfill-corejs2": {
       "version": "0.3.2",
@@ -22144,7 +22176,8 @@
       }
     },
     "css-declaration-sorter": {
-      "version": "6.3.0"
+      "version": "6.3.0",
+      "requires": {}
     },
     "css-has-pseudo": {
       "version": "3.0.4",
@@ -22205,7 +22238,8 @@
       }
     },
     "css-prefers-color-scheme": {
-      "version": "6.0.3"
+      "version": "6.0.3",
+      "requires": {}
     },
     "css-select": {
       "version": "4.3.0",
@@ -22289,7 +22323,8 @@
       }
     },
     "cssnano-utils": {
-      "version": "3.1.0"
+      "version": "3.1.0",
+      "requires": {}
     },
     "csso": {
       "version": "4.2.0",
@@ -23342,7 +23377,8 @@
       }
     },
     "eslint-plugin-react-hooks": {
-      "version": "4.6.0"
+      "version": "4.6.0",
+      "requires": {}
     },
     "eslint-plugin-testing-library": {
       "version": "5.6.0",
@@ -23808,7 +23844,8 @@
           }
         },
         "ajv-keywords": {
-          "version": "3.5.2"
+          "version": "3.5.2",
+          "requires": {}
         },
         "cosmiconfig": {
           "version": "6.0.0",
@@ -24111,7 +24148,8 @@
       }
     },
     "goober": {
-      "version": "2.1.11"
+      "version": "2.1.11",
+      "requires": {}
     },
     "got": {
       "version": "9.6.0",
@@ -24332,7 +24370,8 @@
       }
     },
     "icss-utils": {
-      "version": "5.1.0"
+      "version": "5.1.0",
+      "requires": {}
     },
     "idb": {
       "version": "7.0.2"
@@ -24901,7 +24940,8 @@
       }
     },
     "jest-pnp-resolver": {
-      "version": "1.2.2"
+      "version": "1.2.2",
+      "requires": {}
     },
     "jest-regex-util": {
       "version": "27.5.1"
@@ -25416,7 +25456,8 @@
       }
     },
     "localforage-driver-commons": {
-      "version": "1.0.3"
+      "version": "1.0.3",
+      "requires": {}
     },
     "localforage-driver-memory": {
       "version": "1.0.5",
@@ -25525,6 +25566,11 @@
       "version": "0.1.0",
       "dev": true
     },
+    "marked": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.1.0.tgz",
+      "integrity": "sha512-+Z6KDjSPa6/723PQYyc1axYZpYYpDnECDaU6hkaf5gqBieBkMKYReL5hteF2QizhlMbgbo8umXl/clZ67+GlsA=="
+    },
     "matcher": {
       "version": "3.0.0",
       "dev": true,
@@ -26262,7 +26308,8 @@
       }
     },
     "postcss-browser-comments": {
-      "version": "4.0.0"
+      "version": "4.0.0",
+      "requires": {}
     },
     "postcss-calc": {
       "version": "8.2.4",
@@ -26336,16 +26383,20 @@
       }
     },
     "postcss-discard-comments": {
-      "version": "5.1.2"
+      "version": "5.1.2",
+      "requires": {}
     },
     "postcss-discard-duplicates": {
-      "version": "5.1.0"
+      "version": "5.1.0",
+      "requires": {}
     },
     "postcss-discard-empty": {
-      "version": "5.1.1"
+      "version": "5.1.1",
+      "requires": {}
     },
     "postcss-discard-overridden": {
-      "version": "5.1.0"
+      "version": "5.1.0",
+      "requires": {}
     },
     "postcss-double-position-gradients": {
       "version": "3.1.2",
@@ -26361,7 +26412,8 @@
       }
     },
     "postcss-flexbugs-fixes": {
-      "version": "5.0.2"
+      "version": "5.0.2",
+      "requires": {}
     },
     "postcss-focus-visible": {
       "version": "6.0.4",
@@ -26376,10 +26428,12 @@
       }
     },
     "postcss-font-variant": {
-      "version": "5.0.0"
+      "version": "5.0.0",
+      "requires": {}
     },
     "postcss-gap-properties": {
-      "version": "3.0.5"
+      "version": "3.0.5",
+      "requires": {}
     },
     "postcss-image-set-function": {
       "version": "4.0.7",
@@ -26396,7 +26450,8 @@
       }
     },
     "postcss-initial": {
-      "version": "4.0.1"
+      "version": "4.0.1",
+      "requires": {}
     },
     "postcss-js": {
       "version": "4.0.0",
@@ -26440,10 +26495,12 @@
       }
     },
     "postcss-logical": {
-      "version": "5.0.4"
+      "version": "5.0.4",
+      "requires": {}
     },
     "postcss-media-minmax": {
-      "version": "5.0.0"
+      "version": "5.0.0",
+      "requires": {}
     },
     "postcss-merge-longhand": {
       "version": "5.1.6",
@@ -26490,7 +26547,8 @@
       }
     },
     "postcss-modules-extract-imports": {
-      "version": "3.0.0"
+      "version": "3.0.0",
+      "requires": {}
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -26534,7 +26592,8 @@
       }
     },
     "postcss-normalize-charset": {
-      "version": "5.1.0"
+      "version": "5.1.0",
+      "requires": {}
     },
     "postcss-normalize-display-values": {
       "version": "5.1.0",
@@ -26608,7 +26667,8 @@
       }
     },
     "postcss-page-break": {
-      "version": "3.0.4"
+      "version": "3.0.4",
+      "requires": {}
     },
     "postcss-place": {
       "version": "7.0.5",
@@ -26690,7 +26750,8 @@
       }
     },
     "postcss-replace-overflow-wrap": {
-      "version": "4.0.0"
+      "version": "4.0.0",
+      "requires": {}
     },
     "postcss-selector-not": {
       "version": "6.0.1",
@@ -26976,7 +27037,6 @@
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
       "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
@@ -27053,7 +27113,6 @@
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
       "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -27084,7 +27143,8 @@
       "version": "3.0.4"
     },
     "react-loading-skeleton": {
-      "version": "3.1.0"
+      "version": "3.1.0",
+      "requires": {}
     },
     "react-modal": {
       "version": "3.15.1",
@@ -27564,7 +27624,6 @@
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
       "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
@@ -27588,7 +27647,8 @@
           }
         },
         "ajv-keywords": {
-          "version": "3.5.2"
+          "version": "3.5.2",
+          "requires": {}
         },
         "json-schema-traverse": {
           "version": "0.4.1"
@@ -28036,7 +28096,8 @@
       "version": "3.1.1"
     },
     "style-loader": {
-      "version": "3.3.1"
+      "version": "3.3.1",
+      "requires": {}
     },
     "style-value-types": {
       "version": "4.1.4",
@@ -28542,8 +28603,7 @@
       }
     },
     "typescript": {
-      "version": "4.8.2",
+      "version": "4.8.2"
-      "dev": true
     },
     "unbox-primitive": {
       "version": "1.0.2",
@@ -28913,7 +28973,8 @@
           }
         },
         "ws": {
-          "version": "8.8.1"
+          "version": "8.8.1",
+          "requires": {}
         }
       }
     },
@@ -29209,7 +29270,8 @@
       }
     },
     "wouter": {
-      "version": "2.7.5"
+      "version": "2.7.5",
+      "requires": {}
     },
     "wrap-ansi": {
       "version": "7.0.0",
@@ -29232,7 +29294,8 @@
       }
     },
     "ws": {
-      "version": "7.5.9"
+      "version": "7.5.9",
+      "requires": {}
     },
     "xdg-basedir": {
       "version": "4.0.0",
@@ -29292,7 +29355,8 @@
       "version": "0.1.0"
     },
     "zustand": {
-      "version": "3.7.2"
+      "version": "3.7.2",
+      "requires": {}
     },
     "zx": {
       "version": "7.0.8",

apps/web/package.json

@@ -41,6 +41,7 @@
     "localforage": "^1.10.0",
     "localforage-driver-memory": "^1.0.5",
     "localforage-getitems": "https://github.com/thecodrr/localForage-getItems.git",
+    "marked": "^4.1.0",
     "phone": "^3.1.14",
     "platform": "^1.3.6",
     "print-js": "^1.6.0",

apps/web/src/common/dialog-controller.tsx

@@ -36,7 +36,6 @@ import { formatDate } from "@notesnook/core/utils/date";
 import downloadUpdate from "../commands/download-update";
 import installUpdate from "../commands/install-update";
 import { AppVersion, getChangelog } from "../utils/version";
-import { isDesktop } from "../utils/platform";
 import { Period } from "../components/dialogs/buy-dialog/types";
 import { FeatureKeys } from "../components/dialogs/feature-dialog";
 import { AuthenticatorType } from "../components/dialogs/mfa/types";
@@ -706,13 +705,13 @@ export function showInvalidSystemTimeDialog({
   });
 }
 
-export function showUpdateAvailableNotice({
+export async function showUpdateAvailableNotice({
-  changelog,
   version
 }: {
-  changelog: string;
   version: string;
 }) {
+  const changelog = await getChangelog(version);
+
   return showUpdateDialog({
     title: `New version available`,
     subtitle: `v${version} is available for download`,
@@ -722,7 +721,7 @@ export function showUpdateAvailableNotice({
 }
 
 export async function showUpdateReadyNotice({ version }: { version: string }) {
-  const changelog = isDesktop() ? null : await getChangelog(version);
+  const changelog = await getChangelog(version);
   return await showUpdateDialog({
     title: `Update ready for installation`,
     subtitle: `v${version} is ready to be installed.`,

apps/web/src/hooks/use-auto-updater.js

@@ -47,11 +47,9 @@ export default function useAutoUpdater() {
     function updateAvailable(info) {
       changeStatus({
         type: "available",
-        version: info.version,
+        version: info.version
-        changelog: info.releaseNotes
       });
       showUpdateAvailableNotice({
-        changelog: info.releaseNotes,
         version: info.version
       });
     }

apps/web/src/utils/changelog.ts

@@ -17,14 +17,41 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-const showdown = require("showdown");
+import { marked } from "marked";
 
-var converter = new showdown.Converter();
+const emoji: marked.TokenizerExtension & marked.RendererExtension = {
-converter.setFlavor("github");
+  name: "emoji",
+  level: "inline",
+  start(src) {
+    return src.indexOf(":");
+  },
+  tokenizer(src, _tokens) {
+    const rule = /^:(\w+):/;
+    const match = rule.exec(src);
+    if (match) {
+      return {
+        type: "emoji",
+        raw: match[0],
+        emoji: match[1]
+      };
+    }
+  },
+  renderer(token) {
+    return `<span className="emoji ${token}" />`;
+  }
+};
 
-module.exports.getChangelog = async function (tag) {
+const renderer = new marked.Renderer();
+renderer.link = function (href, title, text) {
+  return `<a target="_blank" rel="noopener noreferrer" href="${href}" ${
+    title ? `title=${title}` : ""
+  }>${text}</a>`;
+};
+marked.use({ extensions: [emoji] });
+
+export async function getChangelog(tag: string) {
   try {
-    if (!tag) return;
+    if (!tag) return "No changelog found.";
 
     const url = `https://api.github.com/repos/streetwriters/notesnook/releases/tags/v${tag}`;
     const response = await fetch(url, {
@@ -33,13 +60,12 @@ module.exports.getChangelog = async function (tag) {
     if (!response.ok) return "No changelog found.";
 
     const release = await response.json();
-    if (!release) return "No changelog found.";
+    if (!release || !release.body) return "No changelog found.";
 
     const { body } = release;
-
+    return await marked.parse(body, { async: true, renderer, gfm: true });
-    const html = converter.makeHtml(body);
+  } catch (e) {
-    return html;
+    console.error(e);
-  } catch {
     return "No changelog found.";
   }
-};
+}

apps/web/src/utils/version.ts

@@ -71,4 +71,4 @@ export function getServiceWorkerVersion(
   });
 }
 
-export { getChangelog } from "@notesnook/desktop/changelog";
+export { getChangelog } from "./changelog";