Conditional inline styles

[amazingphilippe]

Summary | Résumé

This PR adds styles for the inline conditional that should flow nicely within paragraph content. If the condition content has to wrap to the next line, it will do so gracefully without displacing the conditional widget or the content before and after.

It will not make everything look pretty, but it will try very hard to make what you have as clear as possible.

• I tried working with variables to the side. While it looked nice and allowed you to preview more accurately the layout, it was a bit more confusing to navigate with the arrow key continuity thing.
• The input is now a span that you can edit. This is required for Firefox where support for "field-sizing" is non existent.

Test instructions | Instructions pour tester la modification

• Insert an inline conditional in the middle of a paragraph and edit the contents

[amazingphilippe]

@whabanks I wasn't able to figure out the purpose of this. Removing it did not cause issues, but I may not have had the right steps to recreate the use case

[whabanks]

It's likely a left over from an earlier iteration of the conditional, before we had the textbox and used the popover. We can safely remove this if you didn't notice any issues.

[Copilot]

Pull request overview

This PR refactors the styling for inline conditionals to enable them to flow naturally within paragraph content. The changes remove the branch icon SVG from both block and inline conditionals, simplify the styling, and adjust the visual appearance to use box-shadow effects and small-caps text formatting.

Changes:

• Removed branch icon SVG rendering from conditional components
• Refactored CSS for inline conditionals to use box-shadow effects instead of borders
• Simplified block conditional styling and removed top padding
• Added new Tailwind utility classes for styling pseudo-elements and positioning

Reviewed changes

Copilot reviewed 3 out of 5 changed files in this pull request and generated 6 comments.

File	Description
app/assets/stylesheets/index.css	Added new Tailwind utility classes including pseudo-element styles, peer state variants, and positioning utilities
app/assets/javascripts/tiptap/editor.css	Comprehensive refactoring of conditional styling with new inline flow-friendly CSS, removed deprecated browser-specific features, and simplified block conditional layout
app/assets/javascripts/tiptap/CustomComponents/ConditionalNodeView.js	Removed SVG icon rendering from block conditional trigger
app/assets/javascripts/tiptap/CustomComponents/ConditionalInlineNode.js	Removed SVG icon rendering from inline conditional widget

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

🧪 Review environment

https://ffd5jtyuzonm5ktadojqwavpja0nvvpc.lambda-url.ca-central-1.on.aws/

[andrewleith]

A few issues/questions:

• I am not able to insert content after an inline conditional anymore (I can get the cursor to move before it though)

• Round tripping to markdown inserts linebreaks

  • 
  • 
  • 
  • 

• There is some padding or margin on the right-hand-side (before the letter d between the inlines) which makes me not sure if there is a space or not. I think there should be no gaps whatsoever here (or extremely small ones) so people know where they need to add spaces.

  • 

• There are several failing UI tests now. Some may be due to selectors changing, but at least some are behaviours that are no longer present. We should add tests to this pr to ensure the user can get before and after inline conditionals via the keyboard.

  • Focus exits input to the right when arrowing right inside conditional input
  • Focus enters the input on the left when arrowing right from outside conditional
  • Focus exits input to the left when arrowing left from inside conditional input
  • Focus enters the input on the right when arrowing left from outside conditional
  • Using toolbar, inline conditional: focus should be on condition input

[amazingphilippe]

Added tests for:

Focus exits input to the right when arrowing right inside conditional input
 Focus enters the input on the left when arrowing right from outside conditional
Focus exits input to the left when arrowing left from inside conditional input
Focus enters the input on the right when arrowing left from outside conditional

This one already existed.

Using toolbar, inline conditional: focus should be on condition input

The cypress conditional test suite is now passing.
Removed the padding and margins that would look like spaces.
When adding a conditional, a space is also inserted if nothing comes after the conditional. this lets you place your cursor with better accuracy
I noticed FF and Chrome behave differently when Arrowing Left towards the condition content. I considered that in the tests. For humans, it shouldn't be a big annoyance.

The round trip bug is not introduced by this PR, we should fix it in a different PR.

[andrewleith]

This is looking really good.

I still find it a little hard to input back-to-back conditionals, but it does work. Sometimes its hard to get the cursor precisely where you want it (i.e. at the end of the conditional content or the start of the content afterwards), but honestly this isn't really any different than in Google docs or any other editor. Here is an example where I had to fuss a bit to get it how I wanted it:

There are a few quirks, not sure if any are must-fix or not:

• If you try to backspace the variable, when there is one char left in the name it stops you and focus jumps
• if you double click the conditional content (or first word of it if its multiple words) the cursor moves to the end of the variable, instead of the start of the content
• pressing backspace while at the start of the conditional content does weird things
• unable to arrow up/down from the input sometimes (unsure about when because it does work in some cases)