@reuters-graphics/graphics-components 1.0.17 → 1.0.18

package/dist/@types/components/EndNotes/EndNotes.svelte.d.ts

@@ -8,12 +8,12 @@ declare const __propDef: {
             /**
              * Title of the note item
              */
-            title: String;
+            title: string;
             /**
              * Contents of the note as a markdown string
              * @required
              */
-            text: String;
+            text: string;
         }[];
     };
     events: {

package/dist/@types/components/Markdown/Markdown.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /** A Markdown formatted string */ source?: string;
+        /** Parse markdown inline, i.e., without wrapping it in paragraph tags */ parseInline?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MarkdownProps = typeof __propDef.props;
+export type MarkdownEvents = typeof __propDef.events;
+export type MarkdownSlots = typeof __propDef.slots;
+/** `Markdown` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Markdown--default) */
+export default class Markdown extends SvelteComponentTyped<MarkdownProps, MarkdownEvents, MarkdownSlots> {
+}
+export {};

package/dist/@types/components/Markdown/stores.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="svelte" />
+/**
+ * Set to `false` in the browser to ensure Markdown content correctly updates
+ * when a SvelteKit app hyrates.
+ *
+ * @example
+ * ```javascript
+ * // +layout.js
+ * import { staticMarkdown } from '@reuters-graphics/graphics-components';
+ * import { building } from '$app/environment';
+ *
+ * export const load = async() => {
+ *   // Set the store with the value of building.
+ *   staticMarkdown.set(building);
+ *
+ *   // Markdown using this content will correctly refresh when
+ *   // a reader loads your page.
+ *   const content = await fetchPageContent();
+ *
+ *   return { content };
+ * }
+ * ```
+ */
+export declare const staticMarkdown: import("svelte/store").Writable<boolean>;

package/dist/@types/index.d.ts

@@ -17,11 +17,13 @@ export { default as HeroHeadline } from "./components/HeroHeadline/Hero.svelte";
 export { default as EndNotes } from "./components/EndNotes/EndNotes.svelte";
 export { default as InfoBox } from "./components/InfoBox/InfoBox.svelte";
 export { default as InlineAd } from "./components/AdSlot/InlineAd.svelte";
+export { default as Markdown } from "./components/Markdown/Markdown.svelte";
 export { default as PaddingReset } from "./components/PaddingReset/PaddingReset.svelte";
 export { default as PhotoCarousel } from "./components/PhotoCarousel/PhotoCarousel.svelte";
 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 { 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";

package/dist/components/BodyText/BodyText.svelte

@@ -1,5 +1,6 @@
 <!-- @component `BodyText` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-bodytext--default) -->
-<script>/**
+<script>import Markdown from '../Markdown/Markdown.svelte';
+/**
  * A markdown text string.
  * @type {string}
  * @required
@@ -10,12 +11,9 @@ let cls = '';
 export { cls as class };
 /** Add an id to the block tag to target it with custom CSS. */
 export let id = '';
-import { marked } from 'marked';
 import Block from '../Block/Block.svelte';
 </script>
 
 <Block id="{id}" class="fmy-6 {cls}">
-  {#if text}
-    {@html marked.parse(text)}
-  {/if}
+  <Markdown source="{text}" />
 </Block>

package/dist/components/EndNotes/EndNotes.svelte

@@ -4,15 +4,19 @@
  * @required
  */
 export let notes = [];
-import { marked } from 'marked';
 import Block from '../Block/Block.svelte';
+import Markdown from '../Markdown/Markdown.svelte';
 </script>
 
 <Block class="notes fmt-6 fmb-8">
   {#if notes}
     {#each notes as note}
-      <div class="note-title">{@html marked.parse(note.title)}</div>
-      <div class="note-content">{@html marked.parse(note.text)}</div>
+      <div class="note-title">
+        <Markdown source="{note.title}" />
+      </div>
+      <div class="note-content">
+        <Markdown source="{note.text}" />
+      </div>
     {/each}
   {/if}
 </Block>

package/dist/components/GraphicBlock/GraphicBlock.svelte

@@ -58,7 +58,7 @@ import AriaHidden from './AriaHidden.svelte';
 import TextBlock from './TextBlock.svelte';
 import Block from '../Block/Block.svelte';
 import PaddingReset from '../PaddingReset/PaddingReset.svelte';
-import { marked } from 'marked';
+import Markdown from '../Markdown/Markdown.svelte';
 </script>
 
 <Block
@@ -81,7 +81,7 @@ import { marked } from 'marked';
       <TextBlock width="{textWidth}">
         <h3>{title}</h3>
         {#if description}
-          {@html marked(description)}
+          <Markdown source="{description}" />
         {/if}
       </TextBlock>
     </PaddingReset>
@@ -96,7 +96,7 @@ import { marked } from 'marked';
         <!-- Custom ARIA markup -->
         <slot name="aria" />
       {:else}
-        {@html marked(ariaDescription)}
+        <Markdown source="{ariaDescription}" />
       {/if}
     </div>
   {/if}
@@ -111,7 +111,7 @@ import { marked } from 'marked';
     <PaddingReset containerIsFluid="{width === 'fluid'}">
       <TextBlock width="{textWidth}">
         <aside>
-          {@html marked(notes)}
+          <Markdown source="{notes}" />
         </aside>
       </TextBlock>
     </PaddingReset>

package/dist/components/Headline/Headline.svelte

@@ -42,7 +42,7 @@ export let updateTime = '';
 export let width = 'normal';
 import Block from '../Block/Block.svelte';
 import Byline from '../Byline/Byline.svelte';
-import { marked } from 'marked';
+import Markdown from '../Markdown/Markdown.svelte';
 let hedClass;
 $: {
     switch (hedSize) {
@@ -85,7 +85,9 @@ $: {
           <!-- Headline named slot -->
           <slot name="hed" />
         {:else}
-          <h1 class="{hedClass}">{@html marked.parseInline(hed)}</h1>
+          <h1 class="{hedClass}">
+            <Markdown source="{hed}" parseInline />
+          </h1>
         {/if}
         {#if $$slots.dek}
           <!-- Dek named slot-->
@@ -94,7 +96,7 @@ $: {
           </div>
         {:else if dek}
           <div class="dek fmx-auto fmb-6">
-            {@html marked(dek)}
+            <Markdown source="{dek}" />
           </div>
         {/if}
       </div>

package/dist/components/InfoBox/InfoBox.svelte

@@ -31,7 +31,7 @@ export let id = '';
  */
 export let theme = 'light';
 import Block from '../Block/Block.svelte';
-import { marked } from 'marked';
+import Markdown from '../Markdown/Markdown.svelte';
 </script>
 
 <aside class="infobox {theme}">
@@ -46,7 +46,9 @@ import { marked } from 'marked';
         <slot name="header" />
       </div>
     {:else if title}
-      <div class="header fmb-2">{@html marked(title)}</div>
+      <div class="header fmb-2">
+        <Markdown source="{title}" />
+      </div>
     {/if}
 
     {#if $$slots.body}
@@ -55,7 +57,9 @@ import { marked } from 'marked';
         <slot name="body" />
       </div>
     {:else}
-      <div class="body">{@html marked(text)}</div>
+      <div class="body">
+        <Markdown source="{text}" />
+      </div>
     {/if}
 
     {#if $$slots.footer}
@@ -64,7 +68,9 @@ import { marked } from 'marked';
         <slot name="footer" />
       </div>
     {:else if notes}
-      <div class="footer fmt-2">{@html marked(notes)}</div>
+      <div class="footer fmt-2">
+        <Markdown source="{notes}" />
+      </div>
     {/if}
   </Block>
 </aside>

package/dist/components/Markdown/Markdown.svelte

@@ -0,0 +1,35 @@
+<!-- @component `Markdown` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Markdown--default) -->
+<script>import { marked } from 'marked';
+import { staticMarkdown } from './stores';
+/** A Markdown formatted string */
+export let source = '';
+/** Parse markdown inline, i.e., without wrapping it in paragraph tags */
+export let parseInline = false;
+$: markdown = parseInline ? marked.parseInline(source) : marked.parse(source);
+const setInnerHTML = (node, html) => {
+    node.innerHTML = html;
+    return {
+        update(html) {
+            node.innerHTML = html;
+        },
+        destroy() {
+            node.innerHTML = '';
+        },
+    };
+};
+</script>
+
+{#if source}
+  {#if $staticMarkdown}
+    <div>
+      {@html markdown}
+    </div>
+  {:else}
+    <div use:setInnerHTML="{markdown}"></div>
+  {/if}
+{/if}
+
+<style>
+  div {
+    display: contents;
+  }</style>

package/dist/components/Markdown/stores.js

@@ -0,0 +1,25 @@
+import { writable } from 'svelte/store';
+/**
+ * Set to `false` in the browser to ensure Markdown content correctly updates
+ * when a SvelteKit app hyrates.
+ *
+ * @example
+ * ```javascript
+ * // +layout.js
+ * import { staticMarkdown } from '@reuters-graphics/graphics-components';
+ * import { building } from '$app/environment';
+ *
+ * export const load = async() => {
+ *   // Set the store with the value of building.
+ *   staticMarkdown.set(building);
+ *
+ *   // Markdown using this content will correctly refresh when
+ *   // a reader loads your page.
+ *   const content = await fetchPageContent();
+ *
+ *   return { content };
+ * }
+ * ```
+ */
+export const staticMarkdown = writable(true);
+//# sourceMappingURL=stores.js.map

package/dist/components/PhotoPack/PhotoPack.svelte

@@ -39,7 +39,7 @@ export let width = 'normal';
 export let textWidth = 'normal';
 import Block from '../Block/Block.svelte';
 import PaddingReset from '../PaddingReset/PaddingReset.svelte';
-import { marked } from 'marked';
+import Markdown from '../Markdown/Markdown.svelte';
 let containerWidth;
 const groupRows = (images, layout) => {
     // Default layout, one img per row
@@ -102,7 +102,7 @@ $: rows = groupRows(images, layout);
           {#each row as img, i}
             {#if img.caption}
               <div id="{id}-figure-{ri}-{i}" class="caption">
-                {@html marked(img.caption)}
+                <Markdown source="{img.caption}" />
               </div>
             {/if}
           {/each}

package/dist/components/Scroller/Embedded/Foreground.svelte

@@ -1,7 +1,7 @@
 <script>export let step;
 export let index;
-import { marked } from 'marked';
 import Block from '../../Block/Block.svelte';
+import Markdown from '../../Markdown/Markdown.svelte';
 </script>
 
 {#if step.foreground === '' || !step.foreground}
@@ -10,18 +10,18 @@ import Block from '../../Block/Block.svelte';
 
   {#if typeof step.altText === 'string'}
     <div class="background-alt-text visually-hidden">
-      {@html marked.parse(step.altText)}
+      <Markdown source="{step.altText}" />
     </div>
   {/if}
 {:else if typeof step.foreground === 'string'}
   <Block class="body-text step-{index + 1}">
     <div class="embedded-foreground step-{index + 1}">
-      {@html marked.parse(step.foreground)}
+      <Markdown source="{step.foreground}" />
     </div>
 
     {#if typeof step.altText === 'string'}
       <div class="background-alt-text visually-hidden">
-        {@html marked.parse(step.altText)}
+        <Markdown source="{step.altText}" />
       </div>
     {/if}
   </Block>

package/dist/components/Scroller/Foreground.svelte

@@ -1,5 +1,5 @@
 <script>export let steps = [];
-import { marked } from 'marked';
+import Markdown from '../Markdown/Markdown.svelte';
 </script>
 
 {#each steps as step, i}
@@ -12,13 +12,13 @@ import { marked } from 'marked';
       <div class="empty-step-foreground"></div>
       {#if typeof step.altText === 'string'}
         <div class="background-alt-text visually-hidden">
-          {@html marked.parse(step.altText)}
+          <Markdown source="{step.altText}" />
         </div>
       {/if}
     {:else}
       <div class="step-foreground w-full">
         {#if typeof step.foreground === 'string'}
-          {@html marked.parse(step.foreground)}
+          <Markdown source="{step.foreground}" />
         {:else}
           <svelte:component
             this="{step.foreground}"
@@ -28,7 +28,7 @@ import { marked } from 'marked';
       </div>
       {#if typeof step.altText === 'string'}
         <div class="background-alt-text visually-hidden">
-          {@html marked.parse(step.altText)}
+          <Markdown source="{step.altText}" />
         </div>
       {/if}
     {/if}

package/dist/components/SimpleTimeline/SimpleTimeline.svelte

@@ -28,7 +28,7 @@ export let id = '';
 import Block from '../Block/Block.svelte';
 import Fa from 'svelte-fa/src/fa.svelte';
 import { faLink } from '@fortawesome/free-solid-svg-icons';
-import { marked } from 'marked';
+import Markdown from '../Markdown/Markdown.svelte';
 </script>
 
 <Block width="normal" id="{id}" class="simple-timeline-container fmy-6 {cls}">
@@ -65,7 +65,7 @@ import { marked } from 'marked';
               </div>
             {/if}
             {#if event.context}
-              {@html marked(event.context)}
+              <Markdown source="{event.context}" />
             {/if}
           </div>
         {/each}

package/dist/index.js

@@ -24,11 +24,13 @@ export { default as HeroHeadline } from './components/HeroHeadline/Hero.svelte';
 export { default as EndNotes } from './components/EndNotes/EndNotes.svelte';
 export { default as InfoBox } from './components/InfoBox/InfoBox.svelte';
 export { default as InlineAd } from './components/AdSlot/InlineAd.svelte';
+export { default as Markdown } from './components/Markdown/Markdown.svelte';
 export { default as PaddingReset } from './components/PaddingReset/PaddingReset.svelte';
 export { default as PhotoCarousel } from './components/PhotoCarousel/PhotoCarousel.svelte';
 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 { 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -173,6 +173,8 @@
     "./components/Headline/Headline.svelte": "./dist/components/Headline/Headline.svelte",
     "./components/HeroHeadline/Hero.svelte": "./dist/components/HeroHeadline/Hero.svelte",
     "./components/InfoBox/InfoBox.svelte": "./dist/components/InfoBox/InfoBox.svelte",
+    "./components/Markdown/Markdown.svelte": "./dist/components/Markdown/Markdown.svelte",
+    "./components/Markdown/stores.ts": "./dist/components/Markdown/stores.ts",
     "./components/PaddingReset/PaddingReset.svelte": "./dist/components/PaddingReset/PaddingReset.svelte",
     "./components/PhotoCarousel/PhotoCarousel.svelte": "./dist/components/PhotoCarousel/PhotoCarousel.svelte",
     "./components/PhotoPack/PhotoPack.svelte": "./dist/components/PhotoPack/PhotoPack.svelte",