Fix attribute rendering (#1880)

* Fix table row parser

Signed-off-by: Matouš Jan Fialka <mjf@mjf.cz>

* Remove all `{[command button]}` remnants

Signed-off-by: Matouš Jan Fialka <mjf@mjf.cz>

* Render `Attribute` nodes in HTML like CodeMirror does

This patch

- ensures always render `Attribute`,
- produces `sb-attribute` span with sub-spans matching CodeMirror DOM,
- removee `preserveAttributes` from Markdown render options and callers.

Finally the attributes looks the same everywhere (table, text, widget).

Signed-off-by: Matouš Jan Fialka <mjf@mjf.cz>

---------

Signed-off-by: Matouš Jan Fialka <mjf@mjf.cz>

Author: mjf

client/codemirror/lua_widget.ts

@@ -128,7 +128,6 @@ export class LuaWidget extends WidgetType {
             }
             return url;
           },
-          preserveAttributes: true,
         },
         this.opts.client.ui.viewState.allPages,
       );
@@ -265,7 +264,6 @@ export class LuaWidget extends WidgetType {
 
               return url;
             },
-            preserveAttributes: true,
           },
           this.opts.client.ui.viewState.allPages,
         ),

client/codemirror/table.ts

@@ -74,7 +74,6 @@ class TableViewWidget extends WidgetType {
 
           return url;
         },
-        preserveAttributes: true,
       });
       setTimeout(() => {
         // Give it a tick to render

client/markdown_renderer/markdown_render.ts

@@ -25,7 +25,6 @@ export type MarkdownRenderOptions = {
   failOnUnknown?: true;
   smartHardBreak?: true;
   annotationPositions?: true;
-  preserveAttributes?: true;
   shortWikiLinks?: boolean;
   // When defined, use to inline images as data: urls
   translateUrls?: (url: string, type: "link" | "image") => string;
@@ -428,17 +427,48 @@ function render(t: ParseTree, options: MarkdownRenderOptions = {}): Tag | null {
         body: cleanTags(mapRender(t.children!), true),
       };
     }
-    case "Attribute":
-      if (options.preserveAttributes) {
-        return {
-          name: "span",
-          attrs: {
-            class: "attribute",
+    case "Attribute": {
+      const nameNode = findNodeOfType(t, "AttributeName");
+      const valueNode = findNodeOfType(t, "AttributeValue");
+      const colonNode = findNodeOfType(t, "AttributeColon");
+      const attrName = nameNode?.children![0].text ?? "";
+      const attrValue = valueNode?.children![0].text ?? "";
+      const attrColon = colonNode?.children![0].text ?? ": ";
+      return {
+        name: "span",
+        attrs: {
+          class: "sb-attribute",
+          ...(attrName ? { [`data-${attrName}`]: attrValue } : {}),
+        },
+        body: [
+          {
+            name: "span",
+            attrs: { class: "sb-frontmatter sb-meta" },
+            body: "[",
           },
-          body: renderToText(t),
-        };
-      }
-      return null;
+          {
+            name: "span",
+            attrs: { class: "sb-frontmatter sb-attribute-name" },
+            body: attrName,
+          },
+          {
+            name: "span",
+            attrs: { class: "sb-frontmatter sb-meta" },
+            body: attrColon,
+          },
+          {
+            name: "span",
+            attrs: { class: "sb-frontmatter sb-attribute-value" },
+            body: attrValue,
+          },
+          {
+            name: "span",
+            attrs: { class: "sb-frontmatter sb-meta" },
+            body: "]",
+          },
+        ],
+      };
+    }
     case "Escape": {
       return {
         name: "span",