Bring Mermaid diagram priority higher than heading's anchor

[david50407]

Motivation

If we insert Mermaid diagram right before heading, anchor of the heading will be inserted between code block and mermaid diagram preview, this will cause diagram won't hide when section is folded.

Representation Steps

1. Create a code block with Mermaid diagram
2. Create any level of heading right after the diagram

Expect behavior

• Mermaid diagram works properly

Actual behavior

• Mermaid diagram still show but with some bugs as described above

Root cause

As you can see in the screenshot, anchor of the heading has been inserted between the code block and the diagram, this will break css sibling tricks here:

https://github.com/outline/outline/blob/main/shared/editor/components/Styles.ts#L1496C1-L1496C43

That's because heading node will insert a invisible anchor right before the heading with priority (side: -1) higher than Mermaid diagram (side: 0 (which is default))

https://github.com/outline/outline/blob/main/shared/editor/nodes/Heading.ts#L252C15-L252C23

https://github.com/outline/outline/blob/main/shared/editor/extensions/Mermaid.ts#L196C1-L199C8

About the priority, see the document of ProseMirror:

https://prosemirror.net/docs/ref/#view.Decoration%5Ewidget%5Espec.side

After the Fix

In this patch, I've raise the priority of Mermaid diagram to higher (side: -10) than anchor of headings, and the diagram will stick with the code block properly 🎉

Comments

Feel free to discuss if the solution is not properly (stupidly raise diagram's priority)

[CLAassistant]

All committers have signed the CLA.

[tommoor]

This seems very reasonable and well explained, thanks for the patch

[tommoor]

This also fixes clicking on the diagram to focus the source code, which didn't work in this scenario either.