Spaces:
Running
Running
File size: 3,445 Bytes
03d0e97 abf16e9 03d0e97 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
<script context="module" lang="ts">
export { default as BaseMarkdownRenderer } from "./shared/MarkdownRenderer.svelte";
export { default as BaseEditableMarkdownRenderer } from "./shared/EditableMarkdownRenderer.svelte";
</script>
<script lang="ts">
import type { Gradio, SelectData, I18nFormatter } from "@gradio/utils";
import MarkdownRenderer from "./shared/MarkdownRenderer.svelte";
import EditableMarkdownRenderer from "./shared/EditableMarkdownRenderer.svelte";
import { Block, BlockLabel, Empty } from "@gradio/atoms";
import { TextHighlight } from "@gradio/icons";
import { StatusTracker } from "@gradio/statustracker";
import type { LoadingStatus } from "@gradio/statustracker";
export let gradio: Gradio<{
select: SelectData;
change: never;
edit: { markdown_content: string; highlights: any[] };
submit: { markdown_content: string; highlights: any[] };
clear: { markdown_content: string; highlights: any[] };
clear_status: LoadingStatus;
}>;
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let value: {
markdown_content: string;
highlights: Array<{
term?: string;
position?: number[];
title: string;
content: string;
category: string;
color: string;
}>;
} | null = null;
let old_value: typeof value;
export let show_side_panel: boolean = true;
export let panel_width: string = "300px";
export let edit_mode: string = "split";
export let show_preview: boolean = true;
export let markdown_editor: string = "textarea";
export let interactive: boolean = false;
export let label = gradio.i18n("markdown_label.markdown_label");
export let container = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let show_label = true;
export let rtl = false;
export let loading_status: LoadingStatus;
$: {
if (value !== old_value) {
old_value = value;
gradio.dispatch("change");
}
}
</script>
<Block
variant={"solid"}
test_id="markdown-label"
{visible}
{elem_id}
{elem_classes}
padding={false}
{container}
{scale}
{min_width}
{rtl}
>
<StatusTracker
autoscroll={gradio.autoscroll}
i18n={gradio.i18n}
{...loading_status}
on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
/>
{#if label && show_label}
<BlockLabel
Icon={TextHighlight}
{label}
float={false}
disable={container === false}
{show_label}
{rtl}
/>
{/if}
{#if value && value.markdown_content}
{#if interactive}
<EditableMarkdownRenderer
markdown_content={value.markdown_content}
highlights={value.highlights || []}
{show_side_panel}
{panel_width}
{edit_mode}
{show_preview}
{markdown_editor}
{interactive}
on:select={({ detail }) => gradio.dispatch("select", detail)}
on:change={({ detail }) => {
value = detail;
gradio.dispatch("change");
}}
on:edit={({ detail }) => gradio.dispatch("edit", detail)}
on:save={({ detail }) => {
value = detail;
gradio.dispatch("submit", detail);
}}
on:cancel={({ detail }) => gradio.dispatch("clear", detail)}
/>
{:else}
<MarkdownRenderer
markdown_content={value.markdown_content}
highlights={value.highlights || []}
{show_side_panel}
{panel_width}
on:select={({ detail }) => gradio.dispatch("select", detail)}
/>
{/if}
{:else}
<Empty>
<TextHighlight />
</Empty>
{/if}
</Block>
|