I’m working on a feature where users can type CARD START and CARD END on separate lines, and I want everything between those markers to behave like an expandable/collapsible callout section.
I tried using a Widget for this, but it made the content non-editable and the cursor would just skip over the entire block, which breaks the editing experience.
What I’m trying to achieve:
• Users should be able to expand/collapse the section
• The entire block needs a border around it
• I need to wrap it in a div with a custom class for styling
• Content inside should remain fully editable
I’ve been reading through the docs but I’m getting confused about the best approach - should I be using ViewPlugins, States, or Decorations for this kind of functionality?
Any guidance on the right direction would be really helpful!
You cannot add wrappers around lines. You’d have to use line decorations to fake the border. You could use a widget for the collapse control, and use a replacing decoration to hide the content when it is collapsed.
@marijn, thank you for taking the time to reply to my question.
Unfortunately, using a fake border doesn’t work in this case because it causes the content to stick to the left border. Adding padding to each line to compensate breaks other functionality.
Do you happen to know of any example code I could reference for implementing the second approach you described? Specifically, using a widget for the collapse control and a replacing decoration to hide content when collapsed.
Context: I’m developing an Obsidian plugin that allows users to create Anki cards within Obsidian and sync them to Anki. Adding attractive borders around the cards with collapse/expand functionality would significantly improve the user experience.
My current approach involves wrapping the entire block (from CARD START to CARD END) in a parent div for styling purposes. However, this renders the entire block uneditable, which is problematic.
Any guidance or code examples would be greatly appreciated!