@cocoar/vue-markdown 0.1.0-beta.23

package/dist/index.css

@@ -0,0 +1 @@
+.coar-markdown{display:block;--coar-markdown-text: var(--coar-text-neutral-primary);--coar-markdown-link: var(--coar-text-brand-primary, var(--coar-text-neutral-primary));--coar-markdown-muted-text: var(--coar-text-neutral-tertiary);--coar-markdown-border: var(--coar-border-neutral-tertiary);--coar-markdown-surface: var(--coar-background-neutral-primary);--coar-markdown-surface-muted: var( --coar-background-neutral-tertiary, var(--coar-background-neutral-primary) );--coar-markdown-radius: var(--coar-radius-xs);--coar-markdown-space-1: var(--coar-spacing-s, .5rem);--coar-markdown-space-2: var(--coar-spacing-m, 1rem);--coar-markdown-heading-block-start: var(--coar-spacing-xxxl, 4rem);color:var(--coar-markdown-text)}.coar-markdown :where(h1,h2,h3,h4,h5,h6){font-family:var(--coar-font-family-title, inherit);color:var(--coar-markdown-text)}.coar-markdown h1{font-size:var(--coar-font-size-xl);font-weight:var(--coar-font-weight-bold);line-height:var(--coar-line-height-tight)}.coar-markdown h2{font-size:var(--coar-font-size-l);font-weight:var(--coar-font-weight-bold);line-height:1.25}.coar-markdown h3{font-size:var(--coar-font-size-m);font-weight:var(--coar-font-weight-semi-bold);line-height:var(--coar-line-height-snug)}.coar-markdown h4{font-size:var(--coar-font-size-s);font-weight:var(--coar-font-weight-semi-bold);line-height:1.35}.coar-markdown h5{font-size:var(--coar-font-size-xs);font-weight:var(--coar-font-weight-semi-bold);line-height:var(--coar-line-height-normal)}.coar-markdown h6{font-size:var(--coar-font-size-xxs);font-weight:var(--coar-font-weight-medium);line-height:1.45}.coar-markdown-heading,.coar-markdown-paragraph,.coar-markdown-blockquote,.coar-markdown-list,.coar-markdown-code-block,.coar-markdown-table,.coar-markdown-hr{margin:0}.coar-markdown>:where(h1,h2,h3,h4,h5,h6,p,blockquote,ul,ol,pre,table,hr,.coar-code-block-host,.coar-table-host){margin-block:0 var(--coar-markdown-space-2)}.coar-markdown>:where(h1,h2,h3,h4,h5,h6){margin-block-start:var(--coar-markdown-heading-block-start)}.coar-markdown>:where(h1,h2,h3,h4,h5,h6)+:where(h1,h2,h3,h4,h5,h6){margin-block-start:var(--coar-markdown-space-1)}.coar-markdown>:where(h1,h2,h3,h4,h5,h6):first-child{margin-block-start:0}.coar-markdown-blockquote{padding-inline:var(--coar-markdown-space-2);border-left:2px solid var(--coar-markdown-border)}.coar-markdown-list{padding-inline-start:var(--coar-spacing-l, 1.5rem);list-style-position:outside}.coar-markdown-list--unordered{list-style-type:disc}.coar-markdown-list--ordered{list-style-type:decimal}.coar-markdown-list-item{display:list-item;margin-block:.25em}.coar-markdown-list-item--task{list-style:none;display:flex;align-items:flex-start;gap:var(--coar-spacing-s, .5rem)}.coar-markdown-list-item-content{min-width:0}.coar-markdown-task-checkbox{margin-top:.15em}.coar-markdown-code-block,.coar-markdown-code{display:block}.coar-markdown-inline-code{padding:0;border:0;border-radius:0;background:transparent;color:var(--coar-text-accent-secondary, var(--coar-markdown-link))}.coar-markdown-link{text-decoration:underline;color:var(--coar-markdown-link)}.coar-markdown-image{max-width:100%;height:auto;vertical-align:middle}.coar-markdown-table{width:100%;border:1px solid var(--coar-markdown-border);border-radius:var(--coar-markdown-radius);border-collapse:separate;border-spacing:0;overflow:hidden}.coar-markdown-table-cell{padding:var(--coar-markdown-space-1);vertical-align:top;border-right:1px solid var(--coar-markdown-border);border-bottom:1px solid var(--coar-markdown-border)}.coar-markdown-table :where(tr) .coar-markdown-table-cell:last-child{border-right:0}.coar-markdown-table :where(tbody) tr:last-child .coar-markdown-table-cell{border-bottom:0}.coar-markdown-table :where(thead) .coar-markdown-table-cell{background:var(--coar-markdown-surface-muted);font-weight:600}.coar-markdown-hr{border:0;border-top:1px solid var(--coar-markdown-border)}.coar-markdown-unsupported,.coar-markdown-unsupported-inline{font-style:italic;color:var(--coar-markdown-muted-text)}.coar-markdown-unsupported{padding:var(--coar-markdown-space-1);border:1px dashed var(--coar-markdown-border);border-radius:var(--coar-markdown-radius);background:var(--coar-markdown-surface)}

package/dist/index.js

@@ -0,0 +1,293 @@
+import { defineComponent as g, resolveComponent as T, openBlock as n, createElementBlock as l, Fragment as a, renderList as k, createTextVNode as A, toDisplayString as f, createVNode as i, unref as s, createBlock as p, createCommentVNode as _, resolveDynamicComponent as L, withCtx as C, normalizeClass as y, createElementVNode as m } from "vue";
+import { CoarCodeBlock as S, CoarTable as V } from "@cocoar/vue-ui";
+function q(r) {
+  const e = r.attrs?.depth;
+  if (typeof e != "number") return 1;
+  const c = Math.trunc(e);
+  return c <= 1 ? 1 : c === 2 ? 2 : c === 3 ? 3 : c === 4 ? 4 : c === 5 ? 5 : 6;
+}
+function D(r) {
+  const e = r.attrs?.anchor;
+  return typeof e == "string" && e.length > 0 ? e : null;
+}
+function E(r) {
+  const e = r.attrs?.language;
+  return typeof e == "string" && e.trim().length > 0 ? e.trim() : "text";
+}
+function I(r) {
+  return !!r.attrs?.ordered;
+}
+function R(r) {
+  const e = r.attrs?.start;
+  return typeof e == "number" ? e : null;
+}
+function x(r) {
+  return typeof r.attrs?.checked == "boolean";
+}
+function z(r) {
+  return r.attrs?.checked === !0;
+}
+function w(r) {
+  const e = r.attrs?.url;
+  return typeof e == "string" && e.length > 0 ? e : null;
+}
+function v(r) {
+  const e = w(r);
+  return e ? e.startsWith("#") && typeof window < "u" ? `${window.location.pathname}${window.location.search}${e}` : e : null;
+}
+function U(r) {
+  const e = w(r);
+  return e && W(e) ? "_blank" : null;
+}
+function F(r) {
+  const e = w(r);
+  return e && W(e) ? "noopener noreferrer" : null;
+}
+function $(r) {
+  const e = r.attrs?.url;
+  return typeof e == "string" && e.trim().length > 0 ? e.trim() : null;
+}
+function H(r) {
+  const e = r.attrs?.alt;
+  return typeof e == "string" ? e : "";
+}
+function O(r) {
+  const e = r.attrs?.title;
+  return typeof e == "string" && e.trim().length > 0 ? e.trim() : null;
+}
+function B(r, e) {
+  return M(r, e) === "right";
+}
+function N(r, e) {
+  return M(r, e) === "center";
+}
+function j(r) {
+  const e = r.attrs?.originalType;
+  return typeof e == "string" ? e : String(r.type);
+}
+function M(r, e) {
+  const c = r.attrs?.align;
+  if (!Array.isArray(c)) return null;
+  const o = c[e];
+  return o === "left" || o === "right" || o === "center" ? o : null;
+}
+function W(r) {
+  const e = r.trim();
+  return e.startsWith("#") || e.startsWith("/") || e.startsWith("./") || e.startsWith("../") || e.startsWith("mailto:") || e.startsWith("tel:") ? !1 : e.startsWith("http://") || e.startsWith("https://");
+}
+const G = { key: 1 }, J = { key: 2 }, K = { key: 3 }, P = {
+  key: 4,
+  class: "coar-markdown-inline-code"
+}, Q = { key: 5 }, X = ["href", "target", "rel"], Y = ["src", "alt", "title"], Z = {
+  key: 8,
+  class: "coar-markdown-unsupported-inline"
+}, h = /* @__PURE__ */ g({
+  __name: "MarkdownInlineNode",
+  props: {
+    nodes: {}
+  },
+  setup(r) {
+    return (e, c) => {
+      const o = T("MarkdownInlineNode", !0);
+      return n(!0), l(a, null, k(r.nodes, (t) => (n(), l(a, {
+        key: t.id
+      }, [
+        t.type === "text" ? (n(), l(a, { key: 0 }, [
+          A(f(t.text ?? ""), 1)
+        ], 64)) : t.type === "emphasis" ? (n(), l("em", G, [
+          i(o, {
+            nodes: t.children ?? []
+          }, null, 8, ["nodes"])
+        ])) : t.type === "strong" ? (n(), l("strong", J, [
+          i(o, {
+            nodes: t.children ?? []
+          }, null, 8, ["nodes"])
+        ])) : t.type === "strikethrough" ? (n(), l("del", K, [
+          i(o, {
+            nodes: t.children ?? []
+          }, null, 8, ["nodes"])
+        ])) : t.type === "inlineCode" ? (n(), l("code", P, f(t.text ?? ""), 1)) : t.type === "lineBreak" ? (n(), l("br", Q)) : t.type === "link" ? (n(), l(a, { key: 6 }, [
+          s(v)(t) ? (n(), l("a", {
+            key: 0,
+            class: "coar-markdown-link",
+            href: s(v)(t),
+            target: s(U)(t) ?? void 0,
+            rel: s(F)(t) ?? void 0
+          }, [
+            i(o, {
+              nodes: t.children ?? []
+            }, null, 8, ["nodes"])
+          ], 8, X)) : (n(), p(o, {
+            key: 1,
+            nodes: t.children ?? []
+          }, null, 8, ["nodes"]))
+        ], 64)) : t.type === "image" ? (n(), l(a, { key: 7 }, [
+          s($)(t) ? (n(), l("img", {
+            key: 0,
+            class: "coar-markdown-image",
+            src: s($)(t),
+            alt: s(H)(t),
+            title: s(O)(t) ?? void 0,
+            loading: "lazy"
+          }, null, 8, Y)) : _("", !0)
+        ], 64)) : (n(), l("span", Z, "[unsupported]"))
+      ], 64))), 128);
+    };
+  }
+}), tt = {
+  key: 1,
+  class: "coar-markdown-paragraph"
+}, et = {
+  key: 2,
+  class: "coar-markdown-blockquote"
+}, rt = ["start"], nt = {
+  key: 1,
+  class: "coar-markdown-list coar-markdown-list--unordered"
+}, lt = ["checked"], st = { class: "coar-markdown-list-item-content" }, ot = {
+  key: 6,
+  class: "coar-markdown-hr"
+}, it = {
+  key: 9,
+  class: "coar-markdown-table-cell"
+}, at = {
+  key: 10,
+  class: "coar-markdown-unsupported"
+}, ct = /* @__PURE__ */ g({
+  __name: "MarkdownBlockNode",
+  props: {
+    nodes: {},
+    tableNode: {}
+  },
+  setup(r) {
+    return (e, c) => {
+      const o = T("MarkdownBlockNode", !0);
+      return n(!0), l(a, null, k(r.nodes, (t) => (n(), l(a, {
+        key: t.id
+      }, [
+        t.type === "heading" ? (n(), p(L("h" + s(q)(t)), {
+          key: 0,
+          id: s(D)(t) ?? void 0,
+          class: "coar-markdown-heading"
+        }, {
+          default: C(() => [
+            i(h, {
+              nodes: t.children ?? []
+            }, null, 8, ["nodes"])
+          ]),
+          _: 2
+        }, 1032, ["id"])) : t.type === "paragraph" ? (n(), l("p", tt, [
+          i(h, {
+            nodes: t.children ?? []
+          }, null, 8, ["nodes"])
+        ])) : t.type === "blockquote" ? (n(), l("blockquote", et, [
+          i(o, {
+            nodes: t.children ?? []
+          }, null, 8, ["nodes"])
+        ])) : t.type === "list" ? (n(), l(a, { key: 3 }, [
+          s(I)(t) ? (n(), l("ol", {
+            key: 0,
+            class: "coar-markdown-list coar-markdown-list--ordered",
+            start: s(R)(t) ?? void 0
+          }, [
+            i(o, {
+              nodes: t.children ?? []
+            }, null, 8, ["nodes"])
+          ], 8, rt)) : (n(), l("ul", nt, [
+            i(o, {
+              nodes: t.children ?? []
+            }, null, 8, ["nodes"])
+          ]))
+        ], 64)) : t.type === "listItem" ? (n(), l("li", {
+          key: 4,
+          class: y(["coar-markdown-list-item", { "coar-markdown-list-item--task": s(x)(t) }])
+        }, [
+          s(x)(t) ? (n(), l("input", {
+            key: 0,
+            class: "coar-markdown-task-checkbox",
+            type: "checkbox",
+            checked: s(z)(t),
+            disabled: "",
+            "aria-hidden": "true",
+            tabindex: "-1"
+          }, null, 8, lt)) : _("", !0),
+          m("div", st, [
+            i(o, {
+              nodes: t.children ?? []
+            }, null, 8, ["nodes"])
+          ])
+        ], 2)) : t.type === "codeBlock" ? (n(), p(s(S), {
+          key: 5,
+          class: "coar-markdown-code-block",
+          code: t.text ?? "",
+          language: s(E)(t),
+          collapsible: !1,
+          "show-copy": !0
+        }, null, 8, ["code", "language"])) : t.type === "thematicBreak" ? (n(), l("hr", ot)) : t.type === "table" ? (n(), p(s(V), {
+          key: 7,
+          variant: "plain",
+          hover: ""
+        }, {
+          default: C(() => [
+            (t.children ?? []).length > 0 ? (n(), l(a, { key: 0 }, [
+              m("thead", null, [
+                m("tr", null, [
+                  (n(!0), l(a, null, k((t.children ?? [])[0]?.children ?? [], (u, d) => (n(), l("th", {
+                    key: u.id,
+                    class: y({
+                      "text-right": s(B)(t, d),
+                      "text-center": s(N)(t, d)
+                    })
+                  }, [
+                    i(h, {
+                      nodes: u.children ?? []
+                    }, null, 8, ["nodes"])
+                  ], 2))), 128))
+                ])
+              ]),
+              m("tbody", null, [
+                (n(!0), l(a, null, k((t.children ?? []).slice(1), (u) => (n(), l("tr", {
+                  key: u.id
+                }, [
+                  (n(!0), l(a, null, k(u.children ?? [], (d, b) => (n(), l("td", {
+                    key: d.id,
+                    class: y({
+                      "text-right": s(B)(t, b),
+                      "text-center": s(N)(t, b)
+                    })
+                  }, [
+                    i(h, {
+                      nodes: d.children ?? []
+                    }, null, 8, ["nodes"])
+                  ], 2))), 128))
+                ]))), 128))
+              ])
+            ], 64)) : _("", !0)
+          ]),
+          _: 2
+        }, 1024)) : t.type === "tableRow" ? (n(), p(o, {
+          key: 8,
+          nodes: t.children ?? []
+        }, null, 8, ["nodes"])) : t.type === "tableCell" ? (n(), l("td", it, [
+          i(h, {
+            nodes: t.children ?? []
+          }, null, 8, ["nodes"])
+        ])) : (n(), l("div", at, " Unsupported markdown node: " + f(s(j)(t)), 1))
+      ], 64))), 128);
+    };
+  }
+}), ut = { class: "coar-markdown" }, kt = /* @__PURE__ */ g({
+  __name: "CoarMarkdown",
+  props: {
+    doc: {}
+  },
+  setup(r) {
+    return (e, c) => (n(), l("div", ut, [
+      i(ct, {
+        nodes: r.doc.nodes
+      }, null, 8, ["nodes"])
+    ]));
+  }
+});
+export {
+  kt as CoarMarkdown
+};

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@cocoar/vue-markdown",
+  "version": "0.1.0-beta.23",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "lint": "eslint src/"
+  },
+  "dependencies": {
+    "@cocoar/vue-markdown-core": "0.1.0-beta.23"
+  },
+  "peerDependencies": {
+    "@cocoar/vue-ui": "0.1.0-beta.23",
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@cocoar/vue-ui": "workspace:*",
+    "vue": "^3.5.0"
+  }
+}