@lapismd/mira 0.0.1

package/dist/preview/renderer/markdown.svelte

@@ -0,0 +1,109 @@
+<script module lang="ts">
+  import type {
+    MiraAssetResolver,
+    MiraExtension,
+    MiraFileAdapter,
+    MiraResolvedListCallout,
+    MiraLinkResolver,
+    MiraRendererComponents,
+  } from "@lapismd/mira/extensions";
+  import type { Pluggable } from "unified";
+  import type { Options as RemarkRehypeOptions } from "remark-rehype";
+  import type { MarkdownChangeHandler, MarkdownPostProcess } from "./types";
+  import type { FrontmatterConfig } from "../components/frontmatter-utils";
+
+  export type MarkdownProps = {
+    value: string;
+    sourcePath?: string;
+    extensions?: MiraExtension[];
+    remarkPlugins?: Pluggable[];
+    rehypePlugins?: Pluggable[];
+    remarkRehypeOptions?: RemarkRehypeOptions;
+    components?: MiraRendererComponents;
+    linkResolver?: MiraLinkResolver;
+    assetResolver?: MiraAssetResolver;
+    fileAdapter?: MiraFileAdapter;
+    listCallouts?: MiraResolvedListCallout[];
+    postProcess?: MarkdownPostProcess;
+    onChange?: MarkdownChangeHandler;
+    onFrontmatterChange?: (nextYaml: string, nextValue: string) => void;
+    frontmatterOpen?: boolean;
+    frontmatterConfig?: FrontmatterConfig;
+    dialog?: boolean;
+  };
+</script>
+
+<script lang="ts">
+  import Renderer from "./renderer.svelte";
+  import { createParser } from "./utils";
+  import { setMarkdownContext, type MarkdownContext } from "./context.svelte";
+  import type { HastNode, Parser } from "./types";
+
+  let {
+    value,
+    sourcePath,
+    extensions = [],
+    remarkPlugins = [],
+    rehypePlugins = [],
+    remarkRehypeOptions = { allowDangerousHtml: true },
+    components = {},
+    linkResolver,
+    assetResolver,
+    fileAdapter,
+    listCallouts = [],
+    postProcess = () => {},
+    onChange,
+    onFrontmatterChange,
+    frontmatterOpen = true,
+    frontmatterConfig,
+    dialog = false,
+  }: MarkdownProps = $props();
+
+  let parser = $derived<Parser>(
+    createParser(remarkPlugins, rehypePlugins, remarkRehypeOptions),
+  );
+  let ast = $derived<HastNode>(parser(value));
+
+  let contextState = $state<MarkdownContext>({
+    markdown: "",
+    sourcePath: undefined,
+    extensions: [],
+    remarkPlugins: [],
+    rehypePlugins: [],
+    remarkRehypeOptions: { allowDangerousHtml: true },
+    components: {},
+    linkResolver: undefined,
+    assetResolver: undefined,
+    fileAdapter: undefined,
+    listCallouts: [],
+    postProcess: () => {},
+    onChange: undefined,
+    onFrontmatterChange: undefined,
+    frontmatterOpen: true,
+    frontmatterConfig: undefined,
+    dialog: false,
+  });
+  let context = setMarkdownContext(contextState);
+
+  $effect.pre(() => {
+    context.markdown = value;
+    context.sourcePath = sourcePath;
+    context.extensions = extensions;
+    context.remarkPlugins = remarkPlugins;
+    context.rehypePlugins = rehypePlugins;
+    context.remarkRehypeOptions = remarkRehypeOptions;
+    context.components = components;
+    context.linkResolver = linkResolver;
+    context.assetResolver = assetResolver;
+    context.fileAdapter = fileAdapter;
+    context.listCallouts = listCallouts;
+    context.postProcess = postProcess;
+    context.onChange = onChange;
+    context.onFrontmatterChange = onFrontmatterChange;
+    context.frontmatterOpen = frontmatterOpen;
+    context.frontmatterConfig = frontmatterConfig;
+    context.dialog = dialog;
+  });
+</script>
+
+<Renderer astNode={ast} parent={null} />

package/dist/preview/renderer/markdown.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { MiraAssetResolver, MiraExtension, MiraFileAdapter, MiraResolvedListCallout, MiraLinkResolver, MiraRendererComponents } from "@lapismd/mira/extensions";
+import type { Pluggable } from "unified";
+import type { Options as RemarkRehypeOptions } from "remark-rehype";
+import type { MarkdownChangeHandler, MarkdownPostProcess } from "./types";
+import type { FrontmatterConfig } from "../components/frontmatter-utils";
+export type MarkdownProps = {
+    value: string;
+    sourcePath?: string;
+    extensions?: MiraExtension[];
+    remarkPlugins?: Pluggable[];
+    rehypePlugins?: Pluggable[];
+    remarkRehypeOptions?: RemarkRehypeOptions;
+    components?: MiraRendererComponents;
+    linkResolver?: MiraLinkResolver;
+    assetResolver?: MiraAssetResolver;
+    fileAdapter?: MiraFileAdapter;
+    listCallouts?: MiraResolvedListCallout[];
+    postProcess?: MarkdownPostProcess;
+    onChange?: MarkdownChangeHandler;
+    onFrontmatterChange?: (nextYaml: string, nextValue: string) => void;
+    frontmatterOpen?: boolean;
+    frontmatterConfig?: FrontmatterConfig;
+    dialog?: boolean;
+};
+declare const Markdown: import("svelte").Component<MarkdownProps, {}, "">;
+type Markdown = ReturnType<typeof Markdown>;
+export default Markdown;
+//# sourceMappingURL=markdown.svelte.d.ts.map

package/dist/preview/renderer/markdown.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/preview/renderer/markdown.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EACV,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,uBAAuB,EACvB,gBAAgB,EAChB,sBAAsB,EACvB,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,KAAK,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,KAAK,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC1E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAEzE,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;IAC7B,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;IAC5B,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;IAC5B,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,YAAY,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACzC,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACpE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAuFJ,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/preview/renderer/renderer.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import type { Component as SvelteComponent } from "svelte";
+  import RendererChild from "./renderer.svelte";
+  import {
+    type AstNodeContext,
+    getNodeRenderKey,
+    setAstNodeContext,
+    useMarkdownContext,
+  } from "./context.svelte";
+  import { resolveComponent, svgElements, voidElements } from "./utils";
+  import type { HastNode } from "./types";
+
+  type Props = {
+    astNode: HastNode;
+    parent: HastNode | null;
+  };
+
+  let { astNode, parent }: Props = $props();
+  const markdown = useMarkdownContext();
+  let contentEl: HTMLElement | null = $state(null);
+  let astContextState = $state<AstNodeContext>({
+    node: {} as HastNode,
+    parent: null,
+  });
+  let astContext = setAstNodeContext(astContextState);
+
+  const children = $derived(
+    "children" in astNode && Array.isArray(astNode.children)
+      ? (astNode.children as HastNode[])
+      : [],
+  );
+  const tagName = $derived(astNode.type === "element" ? astNode.tagName : "");
+  const componentKey = $derived(
+    astNode.type === "element" &&
+      typeof astNode.properties?.["data-directive"] === "string" &&
+      markdown.components[
+        `directive:${astNode.properties["data-directive"]}`
+      ] !== undefined
+      ? `directive:${astNode.properties["data-directive"]}`
+      : astNode.type === "element" &&
+          astNode.properties?.["data-list-callout-marker"] === "true"
+        ? "listcalloutmarker"
+        : tagName,
+  );
+  const Component = $derived(
+    resolveComponent(markdown.components, componentKey),
+  );
+  const isVoidElement = $derived(voidElements.has(componentKey));
+  const isSvgElement = $derived(svgElements.has(componentKey));
+  const ResolvedComponent = $derived(
+    typeof Component === "string"
+      ? null
+      : (Component as SvelteComponent<any, any, any> | null | undefined),
+  );
+  const properties = $derived(
+    astNode.type === "element" ? (astNode.properties ?? {}) : {},
+  );
+
+  $effect(() => {
+    astContext.node = astNode;
+    astContext.parent = parent;
+  });
+
+  $effect(() => {
+    if (contentEl) {
+      const postProcess = markdown.postProcess;
+      const currentNode = astNode;
+      const currentParent = parent;
+      return untrack(() =>
+        postProcess?.(contentEl as HTMLElement, currentNode, currentParent),
+      );
+    }
+  });
+</script>
+
+{#if astNode.type === "root"}
+  {#each children as child, index (getNodeRenderKey(child, markdown.markdown, index))}
+    <RendererChild astNode={child} parent={astNode} />
+  {/each}
+{:else if astNode.type === "element"}
+  {#if typeof Component === "string"}
+    {#if isVoidElement}
+      <svelte:element this={Component} bind:this={contentEl} {...properties} />
+    {:else if isSvgElement}
+      <svelte:element
+        this={Component}
+        bind:this={contentEl}
+        xmlns="http://www.w3.org/2000/svg"
+        {...properties}
+      >
+        {#each children as child, index (getNodeRenderKey(child, markdown.markdown, index))}
+          <RendererChild astNode={child} parent={astNode} />
+        {/each}
+      </svelte:element>
+    {:else}
+      <svelte:element this={Component} bind:this={contentEl} {...properties}>
+        {#each children as child, index (getNodeRenderKey(child, markdown.markdown, index))}
+          <RendererChild astNode={child} parent={astNode} />
+        {/each}
+      </svelte:element>
+    {/if}
+  {:else if ResolvedComponent}
+    <ResolvedComponent
+      bind:ref={contentEl}
+      {tagName}
+      sourcePath={markdown.sourcePath}
+      dialog={markdown.dialog}
+      {...properties}
+    >
+      {#each children as child, index (getNodeRenderKey(child, markdown.markdown, index))}
+        <RendererChild astNode={child} parent={astNode} />
+      {/each}
+    </ResolvedComponent>
+  {/if}
+{:else if astNode.type === "text"}
+  {astNode.value}
+{:else if astNode.type === "comment"}
+  {@html `<!-- ${astNode.value} -->`}
+{:else if astNode.type === "raw"}
+  {@html astNode.value}
+{/if}

package/dist/preview/renderer/renderer.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HastNode } from "./types";
+type Props = {
+    astNode: HastNode;
+    parent: HastNode | null;
+};
+declare const Renderer: import("svelte").Component<Props, {}, "">;
+type Renderer = ReturnType<typeof Renderer>;
+export default Renderer;
+//# sourceMappingURL=renderer.svelte.d.ts.map

package/dist/preview/renderer/renderer.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.svelte.d.ts","sourceRoot":"","sources":["../../../src/preview/renderer/renderer.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGtC,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,QAAQ,CAAC;IAClB,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;CACzB,CAAC;AA0GJ,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/preview/renderer/types.d.ts

@@ -0,0 +1,20 @@
+import type { MiraRendererComponents } from "@lapismd/mira/extensions";
+import type { MiraMarkdownPostProcessor } from "@lapismd/mira/extensions";
+import type { Root as HastRoot, Element, Text, Comment, RootContent } from "hast";
+import type { Pluggable } from "unified";
+export type ComponentsMap = MiraRendererComponents;
+export type HastRaw = {
+    type: "raw";
+    value: string;
+};
+export type HastNode = HastRoot | Element | Text | Comment | HastRaw | RootContent;
+export type HastProperties = Record<string, unknown>;
+export type Parser = (md: string) => HastNode;
+export type MarkdownPostProcess = MiraMarkdownPostProcessor;
+export type MarkdownChangeHandler = (replacement: string, from: number, to: number) => void;
+export type MarkdownParserOptions = {
+    remarkPlugins?: Pluggable[];
+    rehypePlugins?: Pluggable[];
+};
+export type { FrontmatterConfig, FrontmatterPathSegment, FrontmatterProperty, FrontmatterPropertyKind, FrontmatterTypeDefinition, FrontmatterWidgetContext, FrontmatterWidgetRenderer, } from "../components/frontmatter-utils";
+//# sourceMappingURL=types.d.ts.map

package/dist/preview/renderer/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/preview/renderer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,KAAK,EACV,IAAI,IAAI,QAAQ,EAChB,OAAO,EACP,IAAI,EACJ,OAAO,EACP,WAAW,EACZ,MAAM,MAAM,CAAC;AACd,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,aAAa,GAAG,sBAAsB,CAAC;AACnD,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AACF,MAAM,MAAM,QAAQ,GAChB,QAAQ,GACR,OAAO,GACP,IAAI,GACJ,OAAO,GACP,OAAO,GACP,WAAW,CAAC;AAChB,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AACrD,MAAM,MAAM,MAAM,GAAG,CAAC,EAAE,EAAE,MAAM,KAAK,QAAQ,CAAC;AAE9C,MAAM,MAAM,mBAAmB,GAAG,yBAAyB,CAAC;AAE5D,MAAM,MAAM,qBAAqB,GAAG,CAClC,WAAW,EAAE,MAAM,EACnB,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,KACP,IAAI,CAAC;AAEV,MAAM,MAAM,qBAAqB,GAAG;IAClC,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;IAC5B,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;CAC7B,CAAC;AAEF,YAAY,EACV,iBAAiB,EACjB,sBAAsB,EACtB,mBAAmB,EACnB,uBAAuB,EACvB,yBAAyB,EACzB,wBAAwB,EACxB,yBAAyB,GAC1B,MAAM,iCAAiC,CAAC"}

package/dist/preview/renderer/types.js

@@ -0,0 +1 @@
+export {};

package/dist/preview/renderer/utils.d.ts

@@ -0,0 +1,9 @@
+import { type Pluggable } from "unified";
+import { type Options as RemarkRehypeOptions } from "remark-rehype";
+import type { Parser } from "./types";
+export declare function createParser(remarkPlugins?: Pluggable[], rehypePlugins?: Pluggable[], remarkRehypeOptions?: RemarkRehypeOptions): Parser;
+export declare function normalizeProperties(properties: Record<string, unknown>): Record<string, unknown>;
+export declare function resolveComponent(components: Record<string, unknown>, tagName: string): unknown;
+export declare const voidElements: Set<string>;
+export declare const svgElements: Set<string>;
+//# sourceMappingURL=utils.d.ts.map

package/dist/preview/renderer/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/preview/renderer/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,SAAS,EAAgC,MAAM,SAAS,CAAC;AAEhF,OAAqB,EACnB,KAAK,OAAO,IAAI,mBAAmB,EACpC,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAY,MAAM,EAAE,MAAM,SAAS,CAAC;AAEhD,wBAAgB,YAAY,CAC1B,aAAa,GAAE,SAAS,EAAO,EAC/B,aAAa,GAAE,SAAS,EAAO,EAC/B,mBAAmB,GAAE,mBAAkD,GACtE,MAAM,CASR;AAcD,wBAAgB,mBAAmB,CACjC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAClC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CA4BzB;AAWD,wBAAgB,gBAAgB,CAC9B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACnC,OAAO,EAAE,MAAM,GACd,OAAO,CAET;AAED,eAAO,MAAM,YAAY,aAevB,CAAC;AAEH,eAAO,MAAM,WAAW,aAwBtB,CAAC"}

package/dist/preview/renderer/utils.js

@@ -0,0 +1,135 @@
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkRehype, {} from "remark-rehype";
+export function createParser(remarkPlugins = [], rehypePlugins = [], remarkRehypeOptions = { allowDangerousHtml: true }) {
+    const processor = unified()
+        .use(remarkParse)
+        .use(remarkPlugins)
+        .use(remarkRehype, remarkRehypeOptions)
+        .use(rehypePlugins)
+        .use(rehypePropsToSvelteProps);
+    return (md) => processor.runSync(processor.parse(md));
+}
+const rehypePropsToSvelteProps = () => {
+    return (tree) => {
+        visitHast(tree, (node) => {
+            if (node.type !== "element") {
+                return;
+            }
+            node.properties = normalizeProperties(node.properties ?? {});
+        });
+    };
+};
+export function normalizeProperties(properties) {
+    const next = {};
+    for (const [key, value] of Object.entries(properties)) {
+        let normalizedKey = key;
+        let normalizedValue = value;
+        if (key === "className") {
+            normalizedKey = "class";
+            normalizedValue = Array.isArray(value) ? value.join(" ") : value;
+        }
+        else if (key.startsWith("aria") && key !== "aria") {
+            normalizedKey = `aria-${key.slice(4).toLowerCase()}`;
+        }
+        else if (key.startsWith("data") && key !== "data") {
+            normalizedKey = toKebabAttribute(key);
+        }
+        else if (svgCamelCaseAttributes.has(key)) {
+            normalizedKey = toKebabAttribute(key);
+        }
+        else if (htmlCamelCaseAttributes[key]) {
+            normalizedKey = htmlCamelCaseAttributes[key];
+        }
+        if (normalizedValue === true && key === "checked") {
+            normalizedValue = "";
+        }
+        next[normalizedKey] = normalizedValue;
+    }
+    return next;
+}
+function visitHast(node, visitor) {
+    visitor(node);
+    const children = "children" in node && Array.isArray(node.children) ? node.children : [];
+    for (const child of children) {
+        visitHast(child, visitor);
+    }
+}
+export function resolveComponent(components, tagName) {
+    return components[tagName] === undefined ? tagName : components[tagName];
+}
+export const voidElements = new Set([
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr",
+]);
+export const svgElements = new Set([
+    "svg",
+    "g",
+    "path",
+    "circle",
+    "ellipse",
+    "line",
+    "polyline",
+    "polygon",
+    "rect",
+    "text",
+    "tspan",
+    "defs",
+    "marker",
+    "pattern",
+    "clipPath",
+    "mask",
+    "linearGradient",
+    "radialGradient",
+    "stop",
+    "foreignObject",
+    "title",
+    "desc",
+    "use",
+]);
+const svgCamelCaseAttributes = new Set([
+    "alignmentBaseline",
+    "baselineShift",
+    "clipPath",
+    "clipRule",
+    "colorInterpolation",
+    "dominantBaseline",
+    "fillOpacity",
+    "fillRule",
+    "fontFamily",
+    "fontSize",
+    "fontWeight",
+    "markerEnd",
+    "markerMid",
+    "markerStart",
+    "preserveAspectRatio",
+    "strokeDasharray",
+    "strokeDashoffset",
+    "strokeLinecap",
+    "strokeLinejoin",
+    "strokeMiterlimit",
+    "strokeOpacity",
+    "strokeWidth",
+    "textAnchor",
+    "viewBox",
+    "xlinkHref",
+]);
+const htmlCamelCaseAttributes = {
+    colSpan: "colspan",
+    rowSpan: "rowspan",
+};
+function toKebabAttribute(value) {
+    return value.replace(/[A-Z]/g, (character) => `-${character.toLowerCase()}`);
+}

package/dist/preview/styles/blockquotes-footnotes.css

@@ -0,0 +1,78 @@
+.markdown-rendered blockquote,
+.markdown-preview-surface .markdown blockquote {
+  background-color: var(--markdown-blockquote-background-color);
+  border-inline-start: var(--markdown-blockquote-border-thickness) solid
+    var(--markdown-blockquote-border-color);
+  color: var(--markdown-blockquote-color);
+  font-style: var(--markdown-blockquote-font-style);
+  margin-block: 1em;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline-start: var(--size-4-6);
+}
+
+.markdown-rendered blockquote > :first-child,
+.markdown-preview-surface .markdown blockquote > :first-child {
+  margin-top: 0;
+}
+
+.markdown-rendered blockquote > :last-child,
+.markdown-preview-surface .markdown blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+.markdown-rendered blockquote p,
+.markdown-preview-surface .markdown blockquote p {
+  white-space: pre-line;
+}
+
+.markdown-rendered .footnotes,
+.markdown-preview-surface .markdown .footnotes {
+  border-top: 1px solid var(--background-modifier-border);
+  color: var(--text-muted);
+  font-size: var(--font-smaller);
+  margin-block-start: var(--size-4-6);
+  padding-block-start: var(--size-4-3);
+}
+
+.markdown-rendered .footnotes ol,
+.markdown-preview-surface .markdown .footnotes ol {
+  list-style: decimal;
+  margin: 0;
+  padding-inline-start: 1.5rem;
+}
+
+.markdown-rendered .footnotes li,
+.markdown-preview-surface .markdown .footnotes li {
+  margin-inline-start: 0;
+  padding-block: 0.15rem;
+}
+
+.markdown-rendered .footnotes p,
+.markdown-preview-surface .markdown .footnotes p {
+  display: inline;
+  margin: 0;
+}
+
+.markdown-rendered :is([data-footnote-ref], .footnote-ref),
+.markdown-preview-surface .markdown :is([data-footnote-ref], .footnote-ref),
+.markdown-live-preview-mode .cm-footnote-ref {
+  color: var(--text-accent);
+  font-size: 0.8em;
+  font-weight: 600;
+  text-decoration: none;
+  vertical-align: super;
+}
+
+.markdown-rendered .data-footnote-backref,
+.markdown-rendered .footnote-backref,
+.markdown-preview-surface .markdown .data-footnote-backref,
+.markdown-preview-surface .markdown .footnote-backref {
+  color: var(--text-accent);
+  margin-inline-start: 0.25rem;
+  text-decoration: none;
+}
+
+.markdown-live-preview-mode .cm-footnote-definition {
+  color: var(--text-muted);
+}