Skip to content

Commit f55f284

Browse files
benceruleanlubenceruleanlu
committed
Style markdown
1 parent 6a3312b commit f55f284

File tree

1 file changed

+150
-40
lines changed

1 file changed

+150
-40
lines changed

‎src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue‎

Lines changed: 150 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="flex flex-col h-full bg-[var(--p-tree-background)]">
2+
<div class="flex flex-col h-full bg-[var(--p-tree-background)] overflow-auto">
33
<div
44
class="px-3 py-2 flex items-center border-b border-[var(--p-divider-color)]"
55
>
@@ -12,16 +12,20 @@
1212
/>
1313
<span class="ml-2 font-semibold">{{ node.display_name }}</span>
1414
</div>
15-
<div class="px-4 pb-4 overflow-auto flex-grow node-help-content">
15+
<div class="p-4 flex-grow node-help-content max-w-[600px] mx-auto">
1616
<ProgressSpinner
1717
v-if="isLoading"
1818
class="m-auto"
1919
aria-label="Loading help"
2020
/>
2121
<!-- Markdown fetched successfully -->
22-
<div v-else-if="!error" class="text-sm" v-html="renderedHelpHtml" />
22+
<div
23+
v-else-if="!error"
24+
class="markdown-content"
25+
v-html="renderedHelpHtml"
26+
/>
2327
<!-- Fallback: markdown not found or fetch error -->
24-
<div v-else class="text-sm space-y-6">
28+
<div v-else class="text-sm space-y-6 fallback-content">
2529
<p v-if="node.description">
2630
<strong>{{ $t('g.description') }}:</strong> {{ node.description }}
2731
</p>
@@ -30,46 +34,49 @@
3034
<p>
3135
<strong>{{ $t('nodeHelpPage.inputs') }}:</strong>
3236
</p>
33-
<DataTable
34-
:value="inputList"
35-
class="text-sm"
36-
table-style="min-width: 100%"
37-
>
38-
<Column field="name" :header="$t('g.name')">
39-
<template #body="slotProps">
40-
<code>{{ slotProps.data.name }}</code>
41-
</template>
42-
</Column>
43-
<Column field="type" :header="$t('nodeHelpPage.type')" />
44-
<Column field="tooltip" :header="$t('g.description')">
45-
<template #body="slotProps">
46-
{{ slotProps.data.tooltip || '-' }}
47-
</template>
48-
</Column>
49-
</DataTable>
37+
<!-- Using plain HTML table instead of DataTable for consistent styling with markdown content -->
38+
<table>
39+
<thead>
40+
<tr>
41+
<th>{{ $t('g.name') }}</th>
42+
<th>{{ $t('nodeHelpPage.type') }}</th>
43+
<th>{{ $t('g.description') }}</th>
44+
</tr>
45+
</thead>
46+
<tbody>
47+
<tr v-for="input in inputList" :key="input.name">
48+
<td>
49+
<code>{{ input.name }}</code>
50+
</td>
51+
<td>{{ input.type }}</td>
52+
<td>{{ input.tooltip || '-' }}</td>
53+
</tr>
54+
</tbody>
55+
</table>
5056
</div>
5157

5258
<div v-if="outputList.length">
5359
<p>
5460
<strong>{{ $t('nodeHelpPage.outputs') }}:</strong>
5561
</p>
56-
<DataTable
57-
:value="outputList"
58-
class="text-sm"
59-
table-style="min-width: 100%"
60-
>
61-
<Column field="name" :header="$t('g.name')">
62-
<template #body="slotProps">
63-
<code>{{ slotProps.data.name }}</code>
64-
</template>
65-
</Column>
66-
<Column field="type" :header="$t('nodeHelpPage.type')" />
67-
<Column field="tooltip" :header="$t('g.description')">
68-
<template #body="slotProps">
69-
{{ slotProps.data.tooltip || '-' }}
70-
</template>
71-
</Column>
72-
</DataTable>
62+
<table>
63+
<thead>
64+
<tr>
65+
<th>{{ $t('g.name') }}</th>
66+
<th>{{ $t('nodeHelpPage.type') }}</th>
67+
<th>{{ $t('g.description') }}</th>
68+
</tr>
69+
</thead>
70+
<tbody>
71+
<tr v-for="output in outputList" :key="output.name">
72+
<td>
73+
<code>{{ output.name }}</code>
74+
</td>
75+
<td>{{ output.type }}</td>
76+
<td>{{ output.tooltip || '-' }}</td>
77+
</tr>
78+
</tbody>
79+
</table>
7380
</div>
7481
</div>
7582
</div>
@@ -79,8 +86,6 @@
7986
<script setup lang="ts">
8087
import { storeToRefs } from 'pinia'
8188
import Button from 'primevue/button'
82-
import Column from 'primevue/column'
83-
import DataTable from 'primevue/datatable'
8489
import ProgressSpinner from 'primevue/progressspinner'
8590
import { computed } from 'vue'
8691
@@ -117,4 +122,109 @@ const outputList = computed(() =>
117122
.node-help-content :deep(:is(img, video)) {
118123
@apply max-w-full h-auto block mb-4;
119124
}
125+
126+
.markdown-content,
127+
.fallback-content {
128+
@apply text-sm;
129+
}
130+
131+
.markdown-content :deep(h1),
132+
.fallback-content h1 {
133+
@apply text-[22px] font-bold mt-8 mb-4 first:mt-0;
134+
}
135+
136+
.markdown-content :deep(h2),
137+
.fallback-content h2 {
138+
@apply text-[18px] font-bold mt-8 mb-4 first:mt-0;
139+
}
140+
141+
.markdown-content :deep(h3),
142+
.fallback-content h3 {
143+
@apply text-[16px] font-bold mt-8 mb-4 first:mt-0;
144+
}
145+
146+
.markdown-content :deep(h4),
147+
.markdown-content :deep(h5),
148+
.markdown-content :deep(h6),
149+
.fallback-content h4,
150+
.fallback-content h5,
151+
.fallback-content h6 {
152+
@apply mt-8 mb-4 first:mt-0;
153+
}
154+
155+
.markdown-content :deep(td),
156+
.fallback-content td {
157+
color: var(--drag-text);
158+
}
159+
160+
.markdown-content :deep(a),
161+
.fallback-content a {
162+
color: var(--drag-text);
163+
text-decoration: underline;
164+
}
165+
166+
.markdown-content :deep(th),
167+
.fallback-content th {
168+
color: var(--fg-color);
169+
}
170+
171+
.markdown-content :deep(ul),
172+
.markdown-content :deep(ol),
173+
.fallback-content ul,
174+
.fallback-content ol {
175+
@apply pl-8 my-2;
176+
}
177+
178+
.markdown-content :deep(ul ul),
179+
.markdown-content :deep(ol ol),
180+
.markdown-content :deep(ul ol),
181+
.markdown-content :deep(ol ul),
182+
.fallback-content ul ul,
183+
.fallback-content ol ol,
184+
.fallback-content ul ol,
185+
.fallback-content ol ul {
186+
@apply pl-6 my-2;
187+
}
188+
189+
.markdown-content :deep(li),
190+
.fallback-content li {
191+
@apply my-1;
192+
}
193+
194+
.markdown-content :deep(*:first-child),
195+
.fallback-content > *:first-child {
196+
@apply mt-0;
197+
}
198+
199+
.markdown-content :deep(code),
200+
.fallback-content code {
201+
@apply text-[var(--error-text)] bg-[var(--content-bg)] rounded px-1 py-0.5;
202+
}
203+
204+
.markdown-content :deep(table),
205+
.fallback-content table {
206+
@apply w-full border-collapse;
207+
}
208+
209+
.markdown-content :deep(th),
210+
.markdown-content :deep(td),
211+
.fallback-content th,
212+
.fallback-content td {
213+
@apply px-2 py-2;
214+
}
215+
216+
.markdown-content :deep(tr),
217+
.fallback-content tr {
218+
border-bottom: 1px solid var(--content-bg);
219+
}
220+
221+
.markdown-content :deep(tr:last-child),
222+
.fallback-content tr:last-child {
223+
border-bottom: none;
224+
}
225+
226+
.markdown-content :deep(thead),
227+
.fallback-content thead {
228+
border-bottom: 1px solid var(--p-text-color);
229+
}
120230
</style>

0 commit comments

Comments
 (0)