diff --git a/src/api/local-api.tsx b/src/api/local-api.tsx index 4ddd763a..579c4322 100644 --- a/src/api/local-api.tsx +++ b/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 ; - } + }).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 ( ); - } + }).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 ; - } + }).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; } diff --git a/src/api/ui/embed.css b/src/api/ui/embed.css new file mode 100644 index 00000000..c99da2cd --- /dev/null +++ b/src/api/ui/embed.css @@ -0,0 +1,5 @@ +.datacore-span-embed { + margin-top: 4px; + margin-bottom: 4px; + padding: 8px; +} \ No newline at end of file diff --git a/src/api/ui/embed.tsx b/src/api/ui/embed.tsx index c9e9cfbc..04f45a5c 100644 --- a/src/api/ui/embed.tsx +++ b/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
Loading...
; + return ; case "file-not-found": return ; case "error": return ; case "loaded": return ( -
+
); @@ -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);