updated marked dependency and adds back smartypants. Staticmarkdown is now a rune. Adds a key to markdown block. Updates docs.

package.json

@@ -110,7 +110,8 @@
     "dayjs": "^1.11.13",
     "journalize": "^2.6.0",
     "lodash-es": "^4.17.21",
-    "marked": "^4.3.0",
+    "marked": "^15.0.7",
+    "marked-smartypants": "^1.1.9",
     "proper-url-join": "^2.1.2",
     "pym.js": "^1.3.2",
     "slugify": "^1.6.6",

pnpm-lock.yaml

@@ -33,8 +33,11 @@ importers:
         specifier: ^4.17.21
         version: 4.17.21
       marked:
-        specifier: ^4.3.0
-        version: 4.3.0
+        specifier: ^15.0.7
+        version: 15.0.7
+      marked-smartypants:
+        specifier: ^1.1.9
+        version: 1.1.9(marked@15.0.7)
       proper-url-join:
         specifier: ^2.1.2
         version: 2.1.2
@@ -2968,9 +2971,14 @@ packages:
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
-  marked@4.3.0:
-    resolution: {integrity: sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==}
-    engines: {node: '>= 12'}
+  marked-smartypants@1.1.9:
+    resolution: {integrity: sha512-VPeuaUr5IWptI7nJdgQ9ugrLWYGv13NdzEXTtKY3cmB4aRWOI2RzhLlf+xQp6Wnob9SAPO2sNVlfSJr+nflk/A==}
+    peerDependencies:
+      marked: '>=4 <16'
+
+  marked@15.0.7:
+    resolution: {integrity: sha512-dgLIeKGLx5FwziAnsk4ONoGwHwGPJzselimvlVskE9XLN4Orv9u2VA3GWw/lYUqjfA0rUT/6fqKwfZJapP9BEg==}
+    engines: {node: '>= 18'}
     hasBin: true
 
   math-intrinsics@1.1.0:
@@ -3909,6 +3917,10 @@ packages:
     resolution: {integrity: sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==}
     engines: {node: '>=8.0.0'}
 
+  smartypants@0.2.2:
+    resolution: {integrity: sha512-TzobUYoEft/xBtb2voRPryAUIvYguG0V7Tt3de79I1WfXgCwelqVsGuZSnu3GFGRZhXR90AeEYIM+icuB/S06Q==}
+    hasBin: true
+
   smol-toml@1.3.1:
     resolution: {integrity: sha512-tEYNll18pPKHroYSmLLrksq233j021G0giwW7P3D24jC54pQ5W5BXMsQ/Mvw1OJCmEYDgY+lrzT+3nNUtoNfXQ==}
     engines: {node: '>= 18'}
@@ -7598,7 +7610,12 @@ snapshots:
 
   markdown-table@3.0.4: {}
 
-  marked@4.3.0: {}
+  marked-smartypants@1.1.9(marked@15.0.7):
+    dependencies:
+      marked: 15.0.7
+      smartypants: 0.2.2
+
+  marked@15.0.7: {}
 
   math-intrinsics@1.1.0: {}
 
@@ -8979,6 +8996,8 @@ snapshots:
 
   slugify@1.6.6: {}
 
+  smartypants@0.2.2: {}
+
   smol-toml@1.3.1: {}
 
   snake-case@3.0.4:

src/components/Markdown/Markdown.mdx

@@ -13,16 +13,16 @@ The `Markdown` component renders a markdown string into HTML.
   import { Markdown } from '@reuters-graphics/graphics-components';
 </script>
 
-<Markdown source={'My *awesome* text in **markdown**.'} />
+<Markdown source={'My *awesome* text in **markdown** with "smart quotes".'} />
 ```
 
 <Canvas of={MarkdownStories.Demo} />
 
 ... well, almost.
 
-Owing to a weird quirk of Svelte's [`@html`](https://svelte.dev/docs/special-tags#html) directive (see [this issue](https://github.com/reuters-graphics/graphics-components/issues/148)), if you want your resulting HTML to be dynamic — e.g., update after a SvelteKit app [hydrates](https://kit.svelte.dev/docs/glossary#hydration) — then you may need to set the included `$staticMarkdown` store to `false` in the browser.
+Owing to a weird quirk of Svelte's [`@html`](https://svelte.dev/docs/special-tags#html) directive (see [this issue](https://github.com/reuters-graphics/graphics-components/issues/148)), if you want your resulting HTML to be dynamic — e.g., update after a SvelteKit app [hydrates](https://kit.svelte.dev/docs/glossary#hydration) — then you may need to set the included `staticMarkdown` rune to `{ static: false }` in the browser.
 
-For example, if you're refreshing some data with markdown strings in a SvelteKit project using a [load function](https://kit.svelte.dev/docs/load), set the store to reflect the [`building`](https://kit.svelte.dev/docs/modules#$app-environment-building) variable, which will correctly [prerender](https://kit.svelte.dev/docs/glossary#prerendering) your markdown content AND update it after fresh data is fetched in the browser.
+For example, if you're refreshing some data with markdown strings in a SvelteKit project using a [load function](https://kit.svelte.dev/docs/load), set the rune to reflect the [`building`](https://kit.svelte.dev/docs/modules#$app-environment-building) variable, which will correctly [prerender](https://kit.svelte.dev/docs/glossary#prerendering) your markdown content AND update it after fresh data is fetched in the browser.
 
 ```javascript
 // +layout.js
@@ -31,8 +31,8 @@ import { building } from '$app/environment';
 
 /** @type {import('./$types').LayoutLoad} */
 export const load = async () => {
-  // Set the staticMarkdown store with the value of building.
-  staticMarkdown.set(building);
+  // Set the staticMarkdown rune with the value of building.
+  staticMarkdown.static = building;
 
   // Now this content will correctly refresh when a reader loads your page.
   const resp = await fetch(
@@ -44,4 +44,4 @@ export const load = async () => {
 };
 ```
 
-If you're not updating your markdown content as above, you can safely leave the `$staticMarkdown` store alone and your page will do the right thing.
+If you're not updating your markdown content as above, you can safely leave the `staticMarkdown` rune alone and your page will do the right thing.

src/components/Markdown/Markdown.stories.svelte

@@ -11,6 +11,6 @@
 <Story
   name="Demo"
   args={{
-    source: 'My *awesome* text in **markdown**.',
+    source: 'My *awesome* text in **markdown** with "smart quotes".',
   }}
 />

src/components/Markdown/Markdown.svelte

@@ -2,11 +2,11 @@
 <script lang="ts">
   import type { Action } from 'svelte/action';
   import { marked } from 'marked';
-  import { staticMarkdown } from './stores';
+  import { markedSmartypants } from 'marked-smartypants';
+  import { staticMarkdown } from './state.svelte';
 
-  
+  marked.use(markedSmartypants());
 
-  
   interface Props {
     /** A Markdown formatted string */
     source?: string;
@@ -16,7 +16,11 @@
 
   let { source = '', parseInline = false }: Props = $props();
 
-  let markdown = $derived(parseInline ? marked.parseInline(source) : marked.parse(source));
+  let markdown = $derived(
+    parseInline ?
+      (marked.parseInline(source) as string)
+    : (marked.parse(source) as string)
+  );
 
   const setInnerHTML: Action<HTMLElement, string> = (node, html) => {
     node.innerHTML = html;
@@ -32,13 +36,15 @@
 </script>
 
 {#if source}
-  {#if $staticMarkdown}
-    <div>
-      {@html markdown}
-    </div>
-  {:else}
-    <div use:setInnerHTML="{markdown}"></div>
-  {/if}
+  {#key source}
+    {#if staticMarkdown.static}
+      <div>
+        {@html markdown}
+      </div>
+    {:else}
+      <div use:setInnerHTML={markdown}></div>
+    {/if}
+  {/key}
 {/if}
 
 <style>

src/components/Markdown/state.svelte.ts

@@ -1,5 +1,3 @@
-import { writable } from 'svelte/store';
-
 /**
  * Set to `false` in the browser to ensure Markdown content correctly updates
  * when a SvelteKit app hyrates.
@@ -12,7 +10,7 @@ import { writable } from 'svelte/store';
  *
  * export const load = async() => {
  *   // Set the store with the value of building.
- *   staticMarkdown.set(building);
+ *   staticMarkdown.static = building;
  *
  *   // Markdown using this content will correctly refresh when
  *   // a reader loads your page.
@@ -22,4 +20,4 @@ import { writable } from 'svelte/store';
  * }
  * ```
  */
-export const staticMarkdown = writable(true);
+export const staticMarkdown = $state({ static: true });