Merge branch 'cash'

simonsobs · Sep 21, 2023 · 669a462 · 669a462
2 parents 090d7ad + 8618302
commit 669a462
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -9,6 +9,7 @@
   <title>loading..</title>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css">
+  <script src="/load-mathjax.js" async></script>
 </head>
 
 <body>

diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "@vueuse/integrations": "^10.4.1",
     "axios": "^1.5.0",
     "camel-case": "^4.1.2",
+    "cash-dom": "^8.1.5",
     "github-markdown-css": "^5.2.0",
     "graphql": "^16.8.0",
     "highlight.js": "^11.8.0",

diff --git a/public/load-mathjax.js b/public/load-mathjax.js
@@ -0,0 +1,20 @@
+// Based on https://docs.mathjax.org/en/latest/web/configuration.html#configuring-and-loading-in-one-script
+window.MathJax = {
+  tex: {
+    inlineMath: [["$", "$"]],
+    displayMath: [["$$", "$$"]],
+  },
+  svg: {
+    fontCache: "global",
+  },
+};
+
+function loadMathJax() {
+  var script = document.createElement("script");
+  script.src = "https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-svg.js";
+//   script.src = "https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-mml-chtml.js";
+  script.async = true;
+  document.head.appendChild(script);
+}
+
+loadMathJax();
diff --git a/src/components/product/item-card/note/Note.vue b/src/components/product/item-card/note/Note.vue
@@ -5,11 +5,13 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { useParsed } from "./parse";
+import { useMathJax } from "./mathjax";
 interface Props {
   markdown: string;
 }
 const prop = defineProps<Props>();
 const div = ref<HTMLDivElement>();
 const markdown = () => prop.markdown;
 const { parsed: html } = useParsed(markdown);
+useMathJax(div);
 </script>
diff --git a/src/components/product/item-card/note/__tests__/parse.spec.ts b/src/components/product/item-card/note/__tests__/parse.spec.ts
@@ -6,4 +6,25 @@ describe("useParsed()", () => {
     const { parsed } = useParsed("# Hello");
     expect(parsed.value).toBe("<h1>Hello</h1>\n");
   });
+
+  it("should open external links in new tab and add an icon", () => {
+    // const { parsed } = useParsed("[link](https://example.com)");
+    const { parsed } = useParsed(
+      "- [link1](https://example.com)\n- [link2](https://example.com)"
+    );
+    const expected =
+      "<ul>\n" +
+      "<li>" +
+      '<a href="https://example.com" target="_blank" rel="noopener noreferrer">' +
+      "link1" +
+      ' <i class="mdi mdi-open-in-new mdi v-icon notranslate v-icon--size-xsmall" aria-hidden="true"></i>' +
+      "</a>" +
+      "</li>\n" +
+      '<li><a href="https://example.com" target="_blank" rel="noopener noreferrer">' +
+      "link2" +
+      ' <i class="mdi mdi-open-in-new mdi v-icon notranslate v-icon--size-xsmall" aria-hidden="true"></i>' +
+      "</a></li>\n" +
+      "</ul>\n";
+    expect(parsed.value).toBe(expected);
+  });
 });
diff --git a/src/components/product/item-card/note/mathjax.ts b/src/components/product/item-card/note/mathjax.ts
@@ -0,0 +1,26 @@
+import { unref, onMounted, onUpdated } from "vue";
+import type { MaybeRef } from "vue";
+
+export function useMathJax(element: MaybeRef<HTMLElement | undefined>) {
+  onMounted(() => {
+    typeset();
+  });
+
+  onUpdated(() => {
+    typeset();
+  });
+
+  function typeset() {
+    // @ts-ignore
+    if (!window.MathJax) return;
+
+    const ele = unref(element);
+    if (!ele) return;
+    try {
+      // @ts-ignore
+      window.MathJax.typesetPromise([ele]);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+}
diff --git a/src/components/product/item-card/note/parse.ts b/src/components/product/item-card/note/parse.ts
@@ -1,20 +1,45 @@
-import { computed, toValue } from "vue";
-import type { MaybeRefOrGetter } from "vue";
+import { computed, unref, toValue } from "vue";
+import type { ComputedRef, MaybeRef, MaybeRefOrGetter } from "vue";
 import { Marked } from "marked";
 import { markedHighlight } from "marked-highlight";
 import hljs from "highlight.js";
+import $ from "cash-dom";
 
-const marked = new Marked(
-  markedHighlight({
+const marked = new Marked({
+  gfm: true,
+  ...markedHighlight({
     langPrefix: "hljs language-",
     highlight(code, lang) {
       const language = hljs.getLanguage(lang) ? lang : "plaintext";
       return hljs.highlight(code, { language }).value;
     },
-  })
-);
+  }),
+});
 
 export function useParsed(markdown: MaybeRefOrGetter<string>) {
-  const parsed = computed(() => marked.parse(toValue(markdown)));
+  const _parsed = computed(() =>
+    marked.parse(toValue(markdown))
+  ) as ComputedRef<string>;
+  console.log("_parsed: ", _parsed.value);
+  const parsed = computed(() => edit(_parsed));
   return { parsed };
 }
+
+function edit(parsed: MaybeRef<string>) {
+  const tree = $(`<div>${unref(parsed)}</div>`);
+
+  // Open external links in new tab
+  tree
+    .find("a[href^='http']")
+    .attr("target", "_blank")
+    .attr("rel", "noopener noreferrer");
+
+  // Add mdi-open-in-new icon to links with target="_blank" on text (not img)
+  tree
+    .find("a[target='_blank']")
+    .append(
+      ' <i class="mdi mdi-open-in-new mdi v-icon notranslate v-icon--size-xsmall" aria-hidden="true"></i>'
+    );
+
+  return tree.html();
+}
diff --git a/yarn.lock b/yarn.lock
@@ -2187,6 +2187,11 @@ capital-case@^1.0.4:
     tslib "^2.0.3"
     upper-case-first "^2.0.2"
 
+cash-dom@^8.1.5:
+  version "8.1.5"
+  resolved "https://registry.yarnpkg.com/cash-dom/-/cash-dom-8.1.5.tgz#7b2668ddbcce1c7893915d56fddb0abcda2e32c5"
+  integrity sha512-/BS05CfzyHR5xT2ksKj1sDLPaOv5rSmIwoGxNgdKwUtnIuiJ5neMxVEmZxvfyJiSjGbOMD0Lwe+9v+fszDqHew==
+
 chai@^4.3.7:
   version "4.3.8"
   resolved "https://registry.yarnpkg.com/chai/-/chai-4.3.8.tgz#40c59718ad6928da6629c70496fe990b2bb5b17c"