Add support for determining stack order of embedded notes

app/javascript/src/javascripts/notes.js

@@ -10,6 +10,7 @@ class Note {
   static HIDE_DELAY = 250;
   static NORMALIZE_ATTRIBUTES = ['letter-spacing', 'line-height', 'margin-left', 'margin-right', 'margin-top', 'margin-bottom', 'padding-left', 'padding-right', 'padding-top', 'padding-bottom'];
   static COPY_ATTRIBUTES = ['background-color', 'border-radius', 'transform', 'justify-content', 'align-items'];
+  static BOX_LEVEL_CLASSES = Array.from({length: 5}, (_, i) => 'level-' + (i + 1));
   static RESIZE_HANDLES = "se, nw";
 
   // Notes must be at least 10x10 in size so they're big enough to drag and resize.
@@ -168,6 +169,12 @@ class Note {
       } else {
         this.note.has_rotation = false;
       }
+
+      $note_box.removeClass(Note.BOX_LEVEL_CLASSES);
+      const level_class = ($attribute_child.attr('class') || "").split(/\s+/).filter((klass) => Note.BOX_LEVEL_CLASSES.includes(klass))[0];
+      if (level_class) {
+        $note_box.addClass(level_class);
+      }
     }
 
     permitted_style_values(attribute, $attribute_child) {

app/javascript/src/styles/specific/notes.scss.erb

@@ -148,6 +148,13 @@
         border: 1px solid var(--movable-note-box-border-color);
       }
 
+      <% for i in 1..5 do %>
+        <%# Selector order is deliberate as placing the not after the level consistently caused segmentaion faults for unknown reasons. %>
+        &:not(:hover).level-<%= i %> {
+          z-index: <%= 100 + i %>;
+        }
+      <% end %>
+
       &:not(:hover) div.ui-resizable-handle {
         display: none !important;
       }