slices.network
Highly ambitious ATProtocol AppView service and sdks
fix markdown handler for list items
chadtmiller.com
+15
-15
frontend/src/features/docs/handlers.tsx
+15
-15
frontend/src/features/docs/handlers.tsx
···
224
224
return `<p class="mb-4 leading-relaxed text-zinc-700 dark:text-zinc-300">${text}</p>`;
225
225
};
226
226
227
-
// Custom list renderers
228
-
renderer.list = function (token: Tokens.List) {
229
-
const ordered = token.ordered;
230
-
const body = token.items
231
-
.map((item: Tokens.ListItem) => {
232
-
const text = this.parser.parseInline(item.tokens);
233
-
return `<li class="mb-1">${text}</li>`;
234
-
})
235
-
.join("");
236
-
const tag = ordered ? "ol" : "ul";
237
-
const listStyle = ordered ? "list-decimal" : "list-disc";
238
-
return `<${tag} class="${listStyle} list-inside my-4 text-zinc-700 dark:text-zinc-300">${body}</${tag}>`;
227
+
// Custom list renderer - wrap with classes
228
+
const originalList = renderer.list.bind(renderer);
229
+
renderer.list = function(token: Tokens.List) {
230
+
const html = originalList(token);
231
+
const type = token.ordered ? 'ol' : 'ul';
232
+
const classNames = token.ordered
233
+
? 'list-decimal list-inside my-4 text-zinc-700 dark:text-zinc-300'
234
+
: 'list-disc list-inside my-4 text-zinc-700 dark:text-zinc-300';
235
+
236
+
return html.replace(new RegExp(`<${type}>`), `<${type} class="${classNames}">`);
239
237
};
240
238
241
-
renderer.listitem = function (token: Tokens.ListItem) {
242
-
const text = this.parser.parseInline(token.tokens);
243
-
return `<li class="mb-1">${text}</li>`;
239
+
// Custom list item renderer
240
+
const originalListitem = renderer.listitem.bind(renderer);
241
+
renderer.listitem = function(token: Tokens.ListItem) {
242
+
const html = originalListitem(token);
243
+
return html.replace('<li>', '<li class="mb-1">');
244
244
};
245
245
246
246
// Custom strong/bold renderer