Merge pull request #223 from reuters-graphics/mf-markdown

Updates Markdown

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

@@ -1,20 +1,27 @@
-The Markdown component renders markdown into HTML. That's it!
+import { Meta, Canvas } from '@storybook/blocks';
+import * as MarkdownStories from './Markdown.stories.svelte';
 
----
+<Meta of={MarkdownStories} />
+
+# Markdown
+
+The `Markdown` component renders a markdown string into HTML.
 
 ```svelte
 <script>
   import { Markdown } from '@reuters-graphics/graphics-components';
 </script>
 
-<Markdown source="{'My markdown **string**!'}" />
+<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
@@ -23,8 +30,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(
@@ -36,4 +43,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

@@ -1,35 +1,16 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import Markdown from './Markdown.svelte';
 
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Text elements/Markdown',
     component: Markdown,
-    ...withComponentDocs(componentDocs),
-  };
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
-  import Block from '../Block/Block.svelte';
-</script>
-
-<Template >
-  {#snippet children({ args })}
-    <Block>
-      <Markdown {...args} />
-    </Block>
-  {/snippet}
-</Template>
-
 <Story
-  name="Default"
-  args="{{
-    source: 'This is *some* text in **markdown**.',
-  }}"
+  name="Demo"
+  args={{
+    source: 'My *awesome* text in **markdown** with "smart quotes".',
+  }}
 />

src/components/Markdown/Markdown.svelte

@@ -2,19 +2,24 @@
 <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;
+    source: string;
     /** Parse markdown inline, i.e., without wrapping it in paragraph tags */
     parseInline?: boolean;
   }
 
-  let { source = '', parseInline = false }: Props = $props();
+  let { source, parseInline = false }: Props = $props();
 
   let markdown = $derived(
-    parseInline ? marked.parseInline(source) : marked.parse(source)
+    parseInline ?
+      (marked.parseInline(source) as string)
+    : (marked.parse(source) as string)
   );
 
   const setInnerHTML: Action<HTMLElement, string> = (node, html) => {
@@ -31,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 });

src/index.js

@@ -31,7 +31,7 @@ export { default as PhotoCarousel } from './components/PhotoCarousel/PhotoCarous
 export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';
 export { default as PymChild } from './components/PymChild/PymChild.svelte';
 export { pymChildStore } from './components/PymChild/stores.js';
-export { staticMarkdown } from './components/Markdown/stores.js';
+export { staticMarkdown } from './components/Markdown/state.svelte.js';
 export { default as ReferralBlock } from './components/ReferralBlock/ReferralBlock.svelte';
 export { default as ReutersGraphicsLogo } from './components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte';
 export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.svelte';