Fix broken local API components & start of embed CSS

src/api/local-api.tsx

@@ -157,13 +157,13 @@ export class DatacoreLocalApi {
     public Group = Group;
 
     /** Renders a literal value in a pretty way that respects settings. */
-    public Literal({ value, sourcePath, inline }: { value: Literal; sourcePath?: string; inline?: boolean }) {
+    public Literal = (({ value, sourcePath, inline }: { value: Literal; sourcePath?: string; inline?: boolean }) => {
         const implicitSourcePath = hooks.useContext(CURRENT_FILE_CONTEXT);
         return <Lit value={value} sourcePath={sourcePath ?? implicitSourcePath ?? this.path} inline={inline} />;
-    }
+    }).bind(this);
 
     /** Renders markdown using the Obsidian markdown renderer, optionally attaching additional styles. */
-    public Markdown({
+    public Markdown = (({
         content,
         sourcePath,
         inline,
@@ -175,7 +175,7 @@ export class DatacoreLocalApi {
         inline?: boolean;
         style?: CSSProperties;
         className?: string;
-    }) {
+    }) => {
         const implicitSourcePath = hooks.useContext(CURRENT_FILE_CONTEXT);
         return (
             <Markdown
@@ -186,13 +186,13 @@ export class DatacoreLocalApi {
                 cls={className}
             />
         );
-    }
+    }).bind(this);
 
     /** Renders an obsidian-style link directly and more effieicntly than rendering markdown. */
     public Link = ObsidianLink;
 
     /** Create a vanilla Obsidian embed for the given link. */
-    public LinkEmbed({ link, inline, sourcePath }: { link: string | Link; inline?: boolean; sourcePath?: string }) {
+    public LinkEmbed = (({ link, inline, sourcePath }: { link: string | Link; inline?: boolean; sourcePath?: string }) => {
         const realLink = hooks.useMemo(() => (typeof link === "string" ? Link.file(link) : link), [link]);
         const implicitSourcePath = hooks.useContext(CURRENT_FILE_CONTEXT);
         return (
@@ -202,10 +202,10 @@ export class DatacoreLocalApi {
                 sourcePath={sourcePath ?? implicitSourcePath ?? this.path}
             />
         );
-    }
+    }).bind(this);
 
     /** Create an explicit 'span' embed which extracts a span of lines from a markdown file. */
-    public SpanEmbed({
+    public SpanEmbed = (({
         path,
         start,
         end,
@@ -215,13 +215,16 @@ export class DatacoreLocalApi {
         sourcePath?: string;
         start: number;
         end: number;
-    }) {
+    }) => {
         // Resolve the path to the correct path if a source path is provided.
         const sourcePath = maybeSourcePath ?? this.path;
         const resolvedPath = hooks.useMemo(() => this.resolvePath(path, sourcePath), [path, sourcePath]);
 
         return <LineSpanEmbed path={resolvedPath} start={start} end={end} />;
-    }
+    }).bind(this);
+
+    /** Renders an obsidian lucide icon. */
+    public Icon = Icon;
 
     ///////////
     // Views //
@@ -240,5 +243,4 @@ export class DatacoreLocalApi {
     public Slider = Slider;
     public Switch = Switch;
     public VanillaSelect = VanillaSelect;
-    public Icon = Icon;
 }

src/api/ui/embed.css

@@ -0,0 +1,5 @@
+.datacore-span-embed {
+    margin-top: 4px;
+    margin-bottom: 4px;
+    padding: 8px;
+}

src/api/ui/embed.tsx

@@ -10,6 +10,8 @@ import {
 import { Link } from "expression/link";
 import { lineRange } from "utils/normalizers";
 
+import "./embed.css";
+
 /** Renders an embed in the canonical Obsidian style. */
 export function Embed({
     link,
@@ -70,9 +72,9 @@ export function Embed({
 
 /**
  * An embed of an arbitrary span of lines in a Markdown file. Operates by asynchronously loading the file and pulling
- * out the given [start, end] line span.
+ * out the given [start, end) line span.
  *
- * Note that it's possible for the file on disk to be different than it was when you first loaded the [start, end] line span
+ * Note that it's possible for the file on disk to be different than it was when you first loaded the [start, end) line span
  * - generally, datacore will asynchronously reload these files in the background and fix it's index, but you may have some
  * strange artifacts otherwise.
  */
@@ -81,14 +83,14 @@ export function LineSpanEmbed({ path, start, end }: { path: string; start: numbe
 
     switch (content.type) {
         case "loading":
-            return <div>Loading...</div>;
+            return <ErrorMessage message={`Reading ${path} (${start} - ${end})`} />;
         case "file-not-found":
             return <ErrorMessage message={`Could not find a file at path: ${content.path}`} />;
         case "error":
             return <ErrorMessage message={content.message} />;
         case "loaded":
             return (
-                <div className="datacore-embed">
+                <div className="datacore-span-embed">
                     <Markdown content={content.content} inline={false} />
                 </div>
             );
@@ -102,7 +104,7 @@ export type LineSpanContent =
     | { type: "error"; message: string }
     | { type: "loaded"; content: string };
 
-/** Utility hook which loads path[start..end] as long as the target file exists. */
+/** Utility hook which loads path[start..end) as long as the target file exists. */
 export function useLineSpan(path: string, start: number, end: number): LineSpanContent {
     const app = useContext(APP_CONTEXT);
     const datacore = useContext(DATACORE_CONTEXT);