🐞 Pandoc syntax create a bug : {#tbl:id1} is not a valid attribute name

[Mara-Li]

Check for existing bug reports before submitting.

• I searched for existing Bug Reports and found no similar reports.

Expected Behavior

The file is displayed entirely.

Current behaviour

The file, after the {#tbl:id1} is cut, and I can't click and edit in Live Preview. The file can be edited in Source.

In Reading, the file is cut in a lot of place and the file is not displayed properly.

VS Sandbox :

LOGS :

Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '#fig:img-1' is not a valid attribute name.
    at t.setAttrs (app://obsidian.md/app.js:1:371352)
    at t.sync (app://obsidian.md/app.js:1:371602)
    at e.sync (app://obsidian.md/app.js:1:364022)
    at t.sync (app://obsidian.md/app.js:1:386166)
    at e.sync (app://obsidian.md/app.js:1:364022)
    at app://obsidian.md/app.js:1:405486
    at e.ignore (app://obsidian.md/app.js:1:478848)
    at t.updateInner (app://obsidian.md/app.js:1:405282)
    at t.update (app://obsidian.md/app.js:1:405043)
    at e.measure (app://obsidian.md/app.js:1:490050)

app.js:1 Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
    at t.measureVisibleLineHeights (app.js:1:410329)
    at e.measure (app.js:1:455796)
    at e.measure (app.js:1:489489)
    at app.js:1:492239
	t.measureVisibleLineHeights @ app.js:1
	e.measure @ app.js:1
	e.measure @ app.js:1
	(anonymous) @ app.js:1
	requestAnimationFrame (async)
	e.requestMeasure @ app.js:1
	e.update @ app.js:1
	e.update @ app.js:1
	e.updatePlugins @ app.js:1
	e.update @ app.js:1
	eval @ plugin:modules:30501
	w @ plugin:modules:30496
	_dispatch @ app.js:1
	e.dispatch @ app.js:1
	(anonymous) @ app.js:1
	setTimeout (async)
	s @ app.js:1

app.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'dom')
    at e.localPosFromDOM (app.js:1:364832)
    at t.posFromDOM (app.js:1:409430)
    at e.posAtDOM (app.js:1:495167)
    at e.updateDom (app.js:1:1063684)
    at l (app.js:1:254362)
    at c (app.js:1:254478)
	e.localPosFromDOM @ app.js:1
	t.posFromDOM @ app.js:1
	e.posAtDOM @ app.js:1
	e.updateDom @ app.js:1
	l @ app.js:1
	c @ app.js:1
	setTimeout (async)
	u @ app.js:1
	e.buildDeco @ app.js:1
	e.update @ app.js:1
	e.update @ app.js:1
	e.updatePlugins @ app.js:1
	e.update @ app.js:1
	eval @ plugin:modules:30501
	w @ plugin:modules:30496
	_dispatch @ app.js:1
	e.dispatch @ app.js:1
	(anonymous) @ app.js:1
	setTimeout (async)
	s @ app.js:1


app.js:1 Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '#tbl:id1' is not a valid attribute name.
    at t.setAttrs (app://obsidian.md/app.js:1:371352)
    at t.sync (app://obsidian.md/app.js:1:371602)
    at e.sync (app://obsidian.md/app.js:1:364022)
    at t.sync (app://obsidian.md/app.js:1:371672)
    at e.sync (app://obsidian.md/app.js:1:364022)
    at t.sync (app://obsidian.md/app.js:1:386166)
    at e.sync (app://obsidian.md/app.js:1:364022)
    at app://obsidian.md/app.js:1:405486
    at e.ignore (app://obsidian.md/app.js:1:478848)
    at t.updateInner (app://obsidian.md/app.js:1:405282)

Reproduction

Copy and paste the text

Pour :
- Citer un article : Copier/coller la clé pandoc tel que : `[@auteurNomannée]` comme `[@chenAgeassociatedSARSCoV2Breakthrough]` (astuce : chercher ses clés dans google vous donnera l'article aussi 😊)
- Citer et nommé un tableau :
	- Créé votre tableau tel que :
	```md  
		| Tableau | X |  
		|:--------|---|  
		|Truc|Machin|  
		Table: Demonstration d'une table {#tbl:id1}  
	
	```

	- Ensuite, pour citer un tableau : "`+@tbl:id1` est un simple tableau."	Notons que vous pouvez citer des tableaux dans différents fichiers, avec l'aide de l'id qui doit être unique.
- Pour les images :
	- `![Caption description](image.png){#fig:img-1}`
	- Et pour citer : `+@fig:img-1`

Which Operating Systems are you using?

• Android
• iPhone/iPad
• Linux
• macOS
• Windows

Obsidian Version Check

1.4.14

Plugin Version

1.2.2

Confirmation

• I have disabled all other plugins and the issue still persists.

Possible solution

No response

[gmccullo]

I get this too, in my case on a header with a Pandoc-style ID attribute:

#### my header{#foobar .foobar}

If you create a header like that in the editor, then you don't get an exception, but the .foobar style still doesn't work in preview.

I think that

1. The extension should just silently ignore attributes it doesn't understand.
2. Support this syntax.
3. Support all the "Special Attributes" defined for PHP Markdown Extra.

[PRESFIL]

Apparently, this syntax was known long before this issue. It might be worth trying again,
there were some changes expected in upstream (what "currently not allowed due to Obsidian tag"
means?).

Now, because of the commented-out support for the #-syntax, this branch executes for
me and it causes an error in Obisidia, because #abs-ds is an incorrect name for the attribute.

[PRESFIL]

Uncommenting out the following line allows to get rid of the error and
normally open pages containing headers with the set id, without applying changes
the error described in the topic does not allows to open such files at all.

diff --git a/src/processor.ts b/src/processor.ts
index 0b269f1..a914b1e 100644
--- a/src/processor.ts
+++ b/src/processor.ts
@@ -81,17 +81,17 @@ export default class Processor {
         // { #id }
         // currently not allowed due to Obsidian tag
         // TODO: Figure out a workaround.
-        /* const idChar = "#"; */
+        const idChar = "#";
         const attrs: Array<[string, string]> = [];

         for (let pair of trys) {
             if (!pair || !pair.length) continue;

-            //#id
-            /* if (pair.charAt(0) === idChar) {
+            // #id
+            if (pair.charAt(0) === idChar) {
                 attrs.push(["id", pair.slice(1)]);
                 continue;
-            } */
+            }

             // .class
             if (pair.charAt(0) === classChar) {

I think it's a fix in some sense (it's definitely better than it was), but clicking
on links with id ([link](#target)) still not works.