As an editor, i would like to be able to add musical notation statements.

Figma

EDIT

• Once the property musical notation (apparently now renamed Lilypond Notation) is selected, the input field appears and becomes active - and we also show rank, add qualifier and add reference
• in this case, error check only happens after publishing (UX debt for the future)
• when there is something in the input field, the publish button becomes blue - as in desktop

Whatever the user entered, there is always a publish.

DISPLAY

if the user entered a correct lilypond notation

• we show the musical notation, as on desktop
• Nice To have: If there is horizontal overflow, do truncation with fade as suggested by codex, to suggest to the user that he can horizontally scroll (not implemented on desktop). If not possible then there is no overflow solution and it should simply cut off

If the notation is not correct

• the sentence "Unable to compile Lylipond input file" displays in Gray500 with a error icon after
• on tap on the error icon, a popover appears, the error icon shows, the popover title is "issues", useCloseButton is active, primary and secondary actions & useDefaultAction off.
• the error box of lilypond shows as content, scrollable if it exceeds 330 height.