Support bold and italic text in storybooks

Author: gmjgeek

src/lib/components/sofria-render-json/RenderWrapper.svelte

@@ -1,8 +1,18 @@
 <script lang="ts">
     import RenderContent from './RenderContent.svelte';
     import type { Wrapper } from './schema/sofria-schema';
+    import { makesBold, makesItalic } from './schema/wrappers';
 
     export let wrapper: Wrapper;
+
+    const bold = makesBold(wrapper);
+    const italic = makesItalic(wrapper);
 </script>
 
-<RenderContent content={wrapper.content} />
+{#if bold || italic}
+    <span class:font-bold={bold} class:italic>
+        <RenderContent content={wrapper.content} />
+    </span>
+{:else}
+    <RenderContent content={wrapper.content} />
+{/if}

src/lib/components/sofria-render-json/SofriaRender.svelte

@@ -9,6 +9,9 @@
 
     export let document: Document;
 
+    // Uncomment to examine Sofria input
+    // console.log(JSON.stringify(document));
+
     let mainSequence: Sequence;
 
     if (isFlatDocument(document)) {

src/lib/components/sofria-render-json/schema/wrappers.ts

@@ -0,0 +1,9 @@
+import type { Wrapper } from './sofria-schema';
+
+export function makesBold(wrapper: Wrapper) {
+    return ['usfm:bd', 'usfm:bdit'].includes(wrapper.subtype);
+}
+
+export function makesItalic(wrapper: Wrapper) {
+    return ['usfm:it', 'usfm:bdit'].includes(wrapper.subtype);
+}