@inkandswitch/patchwork-pkg-base 0.0.129 → 0.0.131

package/packages/codemirror-markdown/dist/extensions/markdown.js

@@ -2151,6 +2151,35 @@ import {
   ViewPlugin as ViewPlugin2,
   WidgetType
 } from "@codemirror/view";
+var SVG = "http://www.w3.org/2000/svg";
+function tick(animate) {
+  const svg = document.createElementNS(SVG, "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("class", "cm-task-tick");
+  svg.setAttribute("aria-hidden", "true");
+  const path = document.createElementNS(SVG, "path");
+  path.setAttribute("d", "M19 7L10 16.5l-4.5-4.5");
+  svg.append(path);
+  if (animate) {
+    const mask = document.createElementNS(SVG, "rect");
+    mask.setAttribute("class", "cm-task-tick-mask");
+    for (const [k, v] of [["x", "0"], ["y", "0"], ["width", "24"], ["height", "24"]])
+      mask.setAttribute(k, v);
+    const slide = document.createElementNS(SVG, "animate");
+    for (const [k, v] of [
+      ["attributeName", "x"],
+      ["values", "0;24;24"],
+      ["dur", "0.24s"],
+      ["begin", "0.1s"],
+      ["fill", "freeze"]
+    ])
+      slide.setAttribute(k, v);
+    mask.append(slide);
+    svg.append(mask);
+  }
+  return svg;
+}
+var justTicked = /* @__PURE__ */ new WeakMap();
 var TaskWidget = class extends WidgetType {
   constructor(checked) {
     super();
@@ -2160,16 +2189,28 @@ var TaskWidget = class extends WidgetType {
     return other.checked === this.checked;
   }
   toDOM(view) {
-    const box = document.createElement("input");
-    box.type = "checkbox";
-    box.className = "cm-task";
-    box.checked = this.checked;
-    box.disabled = !view.state.facet(EditorView2.editable);
+    const box = document.createElement("span");
+    box.className = "cm-task" + (this.checked ? " cm-task-checked" : "");
+    box.setAttribute("role", "checkbox");
+    box.setAttribute("aria-checked", String(this.checked));
     box.setAttribute("aria-label", this.checked ? "Done" : "To do");
+    const disabled = !view.state.facet(EditorView2.editable);
+    if (disabled) box.setAttribute("aria-disabled", "true");
+    if (this.checked) {
+      const ticked = justTicked.get(view);
+      box.append(tick(ticked !== void 0 && performance.now() - ticked < 400));
+    }
     box.addEventListener("mousedown", (event) => {
       if (event.button !== 0) return;
       event.preventDefault();
-      if (box.disabled) return;
+      if (disabled) return;
+      box.classList.add("cm-task-pressed");
+      const up = () => {
+        box.classList.remove("cm-task-pressed");
+        window.removeEventListener("mouseup", up, true);
+      };
+      window.addEventListener("mouseup", up, true);
+      if (!this.checked) justTicked.set(view, performance.now());
       toggle(view, view.posAtDOM(box));
     });
     return box;
@@ -2187,6 +2228,51 @@ function toggle(view, from) {
     userEvent: "input.toggle-task"
   });
 }
+var motion = (ms) => `max(1ms, calc(${ms}ms * var(--studio-motion-scale, 1) * var(--studio-motion-preference, 1)))`;
+var ink = (fade) => `color-mix(in oklab, var(--text-editor-line, currentColor), transparent ${fade}%)`;
+var taskTheme = EditorView2.baseTheme({
+  ".cm-task": {
+    "--cm-task-size": "calc(1.05rem * var(--markdown-zoom, 1))",
+    boxSizing: "border-box",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: "none",
+    width: "var(--cm-task-size)",
+    height: "var(--cm-task-size)",
+    borderRadius: "calc(var(--cm-task-size) / 3.5)",
+    border: `1.5px solid ${ink(45)}`,
+    color: ink(45),
+    verticalAlign: "-0.15em",
+    cursor: "var(--studio-cursor-pointer, pointer)",
+    userSelect: "none",
+    transition: `border-color ${motion(140)} linear, color ${motion(140)} linear, scale ${motion(100)} ease`
+  },
+  ".cm-task-pressed": {
+    scale: "1.1"
+  },
+  // done: it steps back with its text (see .cm-task-done)
+  ".cm-task-checked": {
+    borderColor: ink(80),
+    color: ink(55)
+  },
+  ".cm-task[aria-disabled]": {
+    cursor: "default"
+  },
+  ".cm-task-tick": {
+    width: "100%",
+    height: "100%",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  },
+  ".cm-task-tick-mask": {
+    fill: "var(--text-editor-fill, white)",
+    stroke: "none"
+  }
+});
 var doneMark = Decoration2.mark({ class: "cm-task-done" });
 function build(view) {
   const builder = new RangeSetBuilder2();
@@ -2212,7 +2298,7 @@ function build(view) {
   }
   return builder.finish();
 }
-var taskCheckboxes = ViewPlugin2.fromClass(
+var taskPlugin = ViewPlugin2.fromClass(
   class {
     decorations;
     constructor(view) {
@@ -2226,6 +2312,7 @@ var taskCheckboxes = ViewPlugin2.fromClass(
   },
   { decorations: (v) => v.decorations }
 );
+var taskCheckboxes = [taskPlugin, taskTheme];
 
 // src/extensions/margin.ts
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
@@ -2349,6 +2436,7 @@ function alpha(n) {
   return out;
 }
 var codeLine = Decoration3.line({ class: "cm-md-code" });
+var inlineCode = Decoration3.mark({ class: "cm-md-inline-code" });
 var calloutMarker = Decoration3.mark({ class: "cm-md-callout-marker" });
 function caretLines(state) {
   const lines = /* @__PURE__ */ new Set();
@@ -2491,8 +2579,18 @@ function build2(view) {
         if (name === "FencedCode" || name === "CodeBlock") {
           const first = doc2.lineAt(node.from).number;
           const last = doc2.lineAt(node.to).number;
-          for (let n = first; n <= last; n++)
-            decos.push(codeLine.range(doc2.line(n).from));
+          for (let n = first; n <= last; n++) {
+            const ends = (n === first ? " cm-md-code-first" : "") + (n === last ? " cm-md-code-last" : "");
+            decos.push(
+              (ends ? Decoration3.line({ class: "cm-md-code" + ends }) : codeLine).range(
+                doc2.line(n).from
+              )
+            );
+          }
+          return false;
+        }
+        if (name === "InlineCode") {
+          decos.push(inlineCode.range(node.from, node.to));
           return false;
         }
         if (name === "Blockquote") {
@@ -2630,8 +2728,29 @@ var marginTheme = EditorView3.baseTheme({
     position: "relative",
     paddingLeft: "calc(6px + var(--markdown-quote-indent))"
   },
+  // code sits on a faint step up the editor's fill ramp: inline, a pill;
+  // a block, a rounded panel with a little room inside
   ".cm-md-code": {
-    fontFamily: "var(--text-editor-family-code)"
+    fontFamily: "var(--text-editor-family-code)",
+    background: "var(--text-editor-fill-offset-10, rgb(0 0 0 / 0.04))",
+    paddingInline: `calc(6px + ${zoomed("0.75rem")})`
+  },
+  ".cm-md-code-first": {
+    paddingTop: zoomed("0.5rem"),
+    borderTopLeftRadius: "6px",
+    borderTopRightRadius: "6px"
+  },
+  ".cm-md-code-last": {
+    paddingBottom: zoomed("0.5rem"),
+    borderBottomLeftRadius: "6px",
+    borderBottomRightRadius: "6px"
+  },
+  ".cm-md-inline-code": {
+    background: "var(--text-editor-fill-offset-10, rgb(0 0 0 / 0.04))",
+    borderRadius: "4px",
+    padding: "0.1em 0.3em",
+    boxDecorationBreak: "clone",
+    WebkitBoxDecorationBreak: "clone"
   },
   // GitHub-style callouts. Colours from theming's --studio-callout-* (the
   // accent: bar) and --text-editor-callout-*-text/-fill (title ink, box
@@ -3479,14 +3598,6 @@ var markdownStyles = (style) => ({
   ".cm-content li": {
     marginBottom: 0
   },
-  ".cm-task": {
-    margin: "0 0.1em",
-    verticalAlign: "-0.1em",
-    cursor: "pointer"
-  },
-  ".cm-task:disabled": {
-    cursor: "default"
-  },
   ".cm-task-done": {
     opacity: 0.6
   },
@@ -3527,21 +3638,37 @@ var markdownStyles = (style) => ({
 });
 var baseHeadingStyles = {
   fontFamily: "var(--studio-heading-family, var(--text-editor-family-sans))",
-  fontWeight: "var(--studio-heading-weight, 400)",
   textDecoration: "none"
 };
+var H1_WEIGHT = "var(--studio-heading-weight-1, 800)";
+var HEADING_WEIGHT = "var(--studio-heading-weight, 650)";
 var headingSizes = {
-  1: { fontSize: `var(--studio-heading-size-1, ${zoomed2("1.5rem")})`, lineHeight: zoomed2("2rem") },
-  2: { fontSize: `var(--studio-heading-size-2, ${zoomed2("1.5rem")})`, lineHeight: zoomed2("2rem") },
-  3: { fontSize: `var(--studio-heading-size-3, ${zoomed2("1.25rem")})`, lineHeight: zoomed2("1.75rem") },
-  4: { fontSize: `var(--studio-heading-size-4, ${zoomed2("1.1rem")})` }
+  1: { fontSize: `var(--studio-heading-size-1, ${zoomed2("1.5rem")})`, lineHeight: zoomed2("2rem"), fontWeight: H1_WEIGHT },
+  2: { fontSize: `var(--studio-heading-size-2, ${zoomed2("1.5rem")})`, lineHeight: zoomed2("2rem"), fontWeight: HEADING_WEIGHT },
+  3: { fontSize: `var(--studio-heading-size-3, ${zoomed2("1.25rem")})`, lineHeight: zoomed2("1.75rem"), fontWeight: HEADING_WEIGHT },
+  4: { fontSize: `var(--studio-heading-size-4, ${zoomed2("1.1rem")})`, fontWeight: HEADING_WEIGHT },
+  5: { fontWeight: HEADING_WEIGHT },
+  6: { fontWeight: HEADING_WEIGHT }
+};
+var headingLines = {
+  ...Object.fromEntries(
+    Object.entries(headingSizes).map(([level, size]) => [
+      `.cm-md-h${level}`,
+      {
+        fontFamily: baseHeadingStyles.fontFamily,
+        ...size,
+        // the patchwork theme's highlighter weights headings by this; match
+        "--syntax-weight-heading": size.fontWeight
+      }
+    ])
+  ),
+  // headings are set off by size, not colour: the theme's heading colour
+  // (--syntax-heading, which the patchwork theme's highlighter reads) is the
+  // text colour here, whatever the theme picks for code.
+  ".cm-md-h1, .cm-md-h2, .cm-md-h3, .cm-md-h4, .cm-md-h5, .cm-md-h6": {
+    "--syntax-heading": "var(--text-editor-line)"
+  }
 };
-var headingLines = Object.fromEntries(
-  Object.entries(headingSizes).map(([level, size]) => [
-    `.cm-md-h${level}`,
-    { fontFamily: baseHeadingStyles.fontFamily, fontWeight: baseHeadingStyles.fontWeight, ...size }
-  ])
-);
 var baseCodeStyles = {
   fontFamily: "var(--text-editor-family-code)",
   fontSize: "1em"
@@ -3585,6 +3712,11 @@ var markdownSyntaxHighlighting = (style) => HighlightStyle.define([
     marginBottom: zoomed2("1rem"),
     marginTop: zoomed2("2rem")
   },
+  {
+    tag: [tags.heading5, tags.heading6],
+    ...baseHeadingStyles,
+    ...headingSizes[5]
+  },
   {
     tag: tags.processingInstruction,
     color: "var(--text-editor-line-offset-40)"