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);