@latentic/live-markdown 0.1.1 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [0.2.0] - 2026-08-28
+
+### Added
+
+- **A host can theme fenced-code syntax colours.** Each palette entry carries a
+  CSS custom property alongside its colour, and the editor paints
+  `var(--md-code-…, <One Light value>)`, so a dark theme can restyle code.
+  Previously impossible: the editor takes no `extensions` prop and the generated
+  highlight classes are content-hashed, leaving no seam at all.
+
+  The clipboard renderer deliberately keeps literal colours. Pasted HTML arrives
+  with no stylesheet, so a `var()` there resolves to nothing and pastes
+  colourless code into Google Docs or Word — and the document being pasted into
+  is white whatever theme the editor was in.
+
+  Roles are named individually (`--md-code-keyword`, `--md-code-string`, …) even
+  where two share a value, so one can be restyled without the other. A host that
+  sets no variables gets a byte-identical palette: the literal is the fallback.
+
 ## [0.1.1] - 2026-08-24
 
 ### Added

package/dist/index.js

@@ -443,23 +443,59 @@ function onEditorUpdate(view, fn) {
   };
 }
 var CODE_PALETTE = [
-  { tag: [tags.keyword, tags.modifier, tags.operatorKeyword], color: "#a626a4" },
-  { tag: [tags.string, tags.special(tags.string)], color: "#50a14f" },
-  { tag: tags.comment, color: "#a0a1a7", fontStyle: "italic" },
-  { tag: [tags.number, tags.bool, tags.null, tags.atom], color: "#986801" },
-  { tag: [tags.function(tags.variableName), tags.function(tags.propertyName)], color: "#4078f2" },
-  { tag: [tags.typeName, tags.className, tags.namespace], color: "#c18401" },
-  { tag: tags.definition(tags.variableName), color: "#e45649" },
-  { tag: tags.propertyName, color: "#4078f2" },
-  { tag: [tags.tagName, tags.self], color: "#e45649" },
-  { tag: tags.attributeName, color: "#986801" },
-  { tag: [tags.regexp, tags.escape], color: "#0184bc" },
-  { tag: tags.invalid, color: "#ca1243" }
+  {
+    tag: [tags.keyword, tags.modifier, tags.operatorKeyword],
+    color: "#a626a4",
+    cssVar: "--md-code-keyword"
+  },
+  {
+    tag: [tags.string, tags.special(tags.string)],
+    color: "#50a14f",
+    cssVar: "--md-code-string"
+  },
+  {
+    tag: tags.comment,
+    color: "#a0a1a7",
+    cssVar: "--md-code-comment",
+    fontStyle: "italic"
+  },
+  {
+    tag: [tags.number, tags.bool, tags.null, tags.atom],
+    color: "#986801",
+    cssVar: "--md-code-literal"
+  },
+  {
+    tag: [tags.function(tags.variableName), tags.function(tags.propertyName)],
+    color: "#4078f2",
+    cssVar: "--md-code-function"
+  },
+  {
+    tag: [tags.typeName, tags.className, tags.namespace],
+    color: "#c18401",
+    cssVar: "--md-code-type"
+  },
+  {
+    tag: tags.definition(tags.variableName),
+    color: "#e45649",
+    cssVar: "--md-code-variable"
+  },
+  { tag: tags.propertyName, color: "#4078f2", cssVar: "--md-code-property" },
+  { tag: [tags.tagName, tags.self], color: "#e45649", cssVar: "--md-code-tag" },
+  { tag: tags.attributeName, color: "#986801", cssVar: "--md-code-attribute" },
+  { tag: [tags.regexp, tags.escape], color: "#0184bc", cssVar: "--md-code-regexp" },
+  { tag: tags.invalid, color: "#ca1243", cssVar: "--md-code-invalid" }
 ];
+function themedColor(spec) {
+  return `var(${spec.cssVar}, ${spec.color})`;
+}
 
 // src/codemirror/code/codeHighlight.ts
 var style = HighlightStyle.define(
-  CODE_PALETTE.map((spec) => ({ tag: spec.tag, color: spec.color, fontStyle: spec.fontStyle }))
+  CODE_PALETTE.map((spec) => ({
+    tag: spec.tag,
+    color: themedColor(spec),
+    fontStyle: spec.fontStyle
+  }))
 );
 var codeHighlight = syntaxHighlighting(style);