feat: Property, Saves, Spells, Text, and Traits block types can now r…

…ender markdown (#24, #5, #16)
javalent · Jan 13, 2022 · cb75afe · cb75afe
1 parent 85bdb5b
commit cb75afe
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 26 deletions.
diff --git a/src/data/constants.ts b/src/data/constants.ts
@@ -44,13 +44,7 @@ export const TypeNames: Array<[typeof StatblockItemTypes[number], string]> = [
 
 export type StatblockItemType = typeof StatblockItemTypes[number];
 
-export interface DiceProps {
-    callback?: string;
-    property?: keyof Monster;
-    text?: string;
-    parse?: boolean;
-}
-interface CommonProps {
+type CommonProps = {
     type: StatblockItemType;
     id: string;
     properties: Array<keyof Monster>;
@@ -61,8 +55,19 @@ interface CommonProps {
     diceProperty?: keyof Monster;
     diceText?: string;
     diceCallback?: string;
+};
+
+export const MarkdownTypes = [
+    "property",
+    "traits",
+    "spells",
+    "text",
+    "saves"
+] as const;
+
+type GenericTextProp = {
     markdown?: boolean;
-}
+};
 
 type GroupProps = {
     type: "group";
@@ -112,14 +117,14 @@ type TextProps = {
 export type GroupItem = CommonProps & GroupProps;
 export type HeadingItem = CommonProps & HeadingProps;
 export type InlineItem = CommonProps & InlineProps;
-export type PropertyItem = CommonProps & PropertyProps;
-export type SavesItem = CommonProps & SavesProps;
-export type TraitsItem = CommonProps & TraitsProps;
-export type SpellsItem = CommonProps & SpellsProps;
+export type PropertyItem = CommonProps & PropertyProps & GenericTextProp;
+export type SavesItem = CommonProps & SavesProps & GenericTextProp;
+export type TraitsItem = CommonProps & TraitsProps & GenericTextProp;
+export type SpellsItem = CommonProps & SpellsProps & GenericTextProp;
 export type SubHeadingItem = CommonProps & SubHeadingProps;
 export type TableItem = CommonProps & TableProps;
 export type ImageItem = CommonProps & ImageProps;
-export type TextItem = CommonProps & TextProps;
+export type TextItem = CommonProps & TextProps & GenericTextProp;
 
 export type StatblockItem =
     | GroupItem

diff --git a/src/settings/ui/block.ts b/src/settings/ui/block.ts
@@ -7,12 +7,13 @@ import {
     Setting,
     TextAreaComponent
 } from "obsidian";
-import type {
+import {
     StatblockItem,
     PropertyItem,
     TableItem,
     TraitsItem,
-    TextItem
+    TextItem,
+    MarkdownTypes
 } from "src/data/constants";
 import type StatBlockPlugin from "src/main";
 import TableHeaders from "./TableHeaders.svelte";
@@ -162,6 +163,32 @@ export class BlockModal extends Modal {
                     });
             }
             if (!this.advanced) return;
+            if (MarkdownTypes.includes(this.block.type as any)) {
+                new Setting(el)
+                    .setName("Render as Markdown")
+                    .setDesc(
+                        createFragment((e) => {
+                            e.createSpan({
+                                text: "The block will attempt to render as markdown."
+                            });
+                            e.createEl("br");
+                            e.createEl("strong", {
+                                text: "Cannot be used with the Dice option."
+                            });
+                        })
+                    )
+                    .addToggle((t) => {
+                        t.setValue((this.block as TextItem).markdown).onChange(
+                            (v) => {
+                                (this.block as TextItem).markdown = v;
+                                if (v) {
+                                    this.block.dice = false;
+                                    this.display();
+                                }
+                            }
+                        );
+                    });
+            }
             if (this.block.type == "text") {
                 new Setting(el)
                     .setHeading()

diff --git a/src/view/ui/Content.svelte b/src/view/ui/Content.svelte
@@ -194,7 +194,8 @@
                             target: prop,
                             props: {
                                 name: block.name,
-                                desc: block.desc
+                                desc: block.desc,
+                                render: item.markdown
                             },
                             context
                         });
@@ -239,7 +240,6 @@
 
         for (let target of targets) {
             columnEl.appendChild(target);
-            console.log(target, target.clientHeight);
             if (
                 columnEl.clientHeight > splitHeight &&
                 node.childElementCount != columns

diff --git a/src/view/ui/MarkdownHolder.svelte b/src/view/ui/MarkdownHolder.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { MarkdownRenderer } from "obsidian";
+
+    import { getContext } from "svelte";
+    import type StatBlockRenderer from "../statblock";
+
+    export let property: string;
+
+    const context = getContext<string>("context");
+    const renderer = getContext<StatBlockRenderer>("renderer");
+
+    const markdown = (node: HTMLElement) => {
+        MarkdownRenderer.renderMarkdown(property, node, context, renderer);
+    };
+</script>
+
+<div use:markdown />
diff --git a/src/view/ui/PropertyLine.svelte b/src/view/ui/PropertyLine.svelte
@@ -5,8 +5,7 @@
     import type StatBlockPlugin from "src/main";
     import { getContext } from "svelte";
     import { stringify } from "../utils";
-
-    import DiceHolder from "./DiceHolder.svelte";
+    import TextContentHolder from "./TextContentHolder.svelte";
 
     export let monster: Monster;
     export let item: PropertyItem;
@@ -37,7 +36,7 @@
 {#if !item.conditioned || (item.conditioned && `${property}`.length)}
     <div class="line">
         <span class="property-name">{display}</span>
-        <DiceHolder {property} />
+        <TextContentHolder render={item.markdown} {property} />
     </div>
 {/if}
 

diff --git a/src/view/ui/Saves.svelte b/src/view/ui/Saves.svelte
@@ -3,7 +3,7 @@
     import type { SavesItem } from "src/data/constants";
     import { toTitleCase } from "src/util/util";
     import { getContext } from "svelte";
-    import DiceHolder from "./DiceHolder.svelte";
+    import TextContentHolder from "./TextContentHolder.svelte";
 
     export let monster: Monster;
     export let item: SavesItem;
@@ -38,7 +38,7 @@
             >{item.display ?? toTitleCase(item.properties[0])}</span
         >
         <div class="property-text">
-            <DiceHolder property={saves} />
+            <TextContentHolder render={item.markdown} property={saves} />
         </div>
     </div>
 </div>

diff --git a/src/view/ui/Text.svelte b/src/view/ui/Text.svelte
@@ -2,8 +2,8 @@
     import type { Monster } from "@types";
     import type { TextItem } from "src/data/constants";
     import { stringify } from "../utils";
-    import DiceHolder from "./DiceHolder.svelte";
     import SectionHeading from "./SectionHeading.svelte";
+import TextContentHolder from "./TextContentHolder.svelte";
 
     export let monster: Monster;
     export let item: TextItem;
@@ -23,7 +23,7 @@
         <SectionHeading header={item.heading} />
     {/if}
     <div class="line">
-        <DiceHolder {property} />
+        <TextContentHolder render={item.markdown} {property} />
     </div>
 {/if}
 

diff --git a/src/view/ui/TextContentHolder.svelte b/src/view/ui/TextContentHolder.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+    import DiceHolder from "./DiceHolder.svelte";
+    import MarkdownHolder from "./MarkdownHolder.svelte";
+
+    export let property: string;
+    export let render: boolean = false;
+</script>
+
+{#if render}
+    <MarkdownHolder {property} />
+{:else}
+    <DiceHolder {property} />
+{/if}
diff --git a/src/view/ui/Traits.svelte b/src/view/ui/Traits.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
-    import DiceHolder from "./DiceHolder.svelte";
+    import TextContentHolder from "./TextContentHolder.svelte";
 
     export let name: string;
     export let desc: string;
+    export let render: boolean;
 </script>
 
 <div class="property">
     <div class="property-name">{name}</div>
     <div class="property-text">
-        <DiceHolder property={desc} />
+        <TextContentHolder {render} property={desc} />
     </div>
 </div>