feat: add multiplayer profile images next to fields

packages/root-cms/ui/components/DocEditor/DocEditor.css

@@ -27,6 +27,7 @@
 }
 
 .DocEditor__statusBar__saveState,
+.DocEditor__statusBar__viewers,
 .DocEditor__statusBar__statusBadges {
   margin-right: 16px;
 }
@@ -42,13 +43,17 @@
   margin-left: -1px;
 }
 
-.DocEditor__statusBar__buttonGroup > *:first-child .DocEditor__statusBar__buttonGroup__button {
+.DocEditor__statusBar__buttonGroup
+  > *:first-child
+  .DocEditor__statusBar__buttonGroup__button {
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
   margin-left: 0;
 }
 
-.DocEditor__statusBar__buttonGroup > *:last-child .DocEditor__statusBar__buttonGroup__button {
+.DocEditor__statusBar__buttonGroup
+  > *:last-child
+  .DocEditor__statusBar__buttonGroup__button {
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
@@ -80,12 +85,51 @@
 }
 
 .DocEditor__field.deeplink-target {
-  padding: 16px;
+  padding: 8px;
+  /* Negative horizontal margins offset the padding so the field contents stay
+   * aligned with unfocused fields (no horizontal shift). */
+  margin-left: -8px;
+  margin-right: -8px;
   background: linear-gradient(rgb(255, 248, 197), rgb(255, 248, 197));
   border: 1px solid rgba(212, 167, 44, 0.4);
   border-radius: 4px;
 }
 
+/* For drawer object fields, highlight the drawer element itself rather than
+ * shifting the whole field with padding + negative margins. */
+.DocEditor__field.deeplink-target:has(
+    > .DocEditor__field__input
+      > .DocEditor__ObjectFieldDrawer
+      > .DocEditor__ObjectFieldDrawer__drawer
+  ) {
+  padding: 0;
+  margin-left: 0;
+  margin-right: 0;
+  background: none;
+  border: none;
+  border-radius: 0;
+}
+
+.DocEditor__field.deeplink-target
+  > .DocEditor__field__input
+  > .DocEditor__ObjectFieldDrawer
+  > .DocEditor__ObjectFieldDrawer__drawer {
+  background: linear-gradient(rgb(255, 248, 197), rgb(255, 248, 197));
+}
+
+/*
+ * Presence highlight: when another user has this field focused, outline the
+ * field in that user's color (matching their avatar), à la Google Docs. An
+ * outline is used (instead of border/padding) so it never shifts layout.
+ */
+.DocEditor__field--presence {
+  position: relative;
+  border-radius: 2px;
+  outline: 1px solid var(--presence-color, transparent);
+  outline-offset: 4px;
+  transition: outline-color 0.2s ease;
+}
+
 .DocEditor__FieldHeader {
   position: relative;
   padding-right: 30px;
@@ -98,19 +142,12 @@
   gap: 8px;
 }
 
-.DocEditor__FieldHeader__label__deeplink {
-  color: #CED4DA;
+.DocEditor__FieldHeader__label__link {
+  color: inherit;
   text-decoration: none;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.DocEditor__FieldHeader__label:focus-within .DocEditor__FieldHeader__label__deeplink,
-.DocEditor__FieldHeader__label:hover .DocEditor__FieldHeader__label__deeplink {
-  opacity: 1;
 }
 
-.DocEditor__FieldHeader__label__deeplink:hover {
+.DocEditor__FieldHeader__label__link:hover {
   text-decoration: underline;
   text-underline-offset: 2px;
 }
@@ -121,10 +158,52 @@
   margin-top: 2px;
 }
 
-.DocEditor__FieldHeader__translate {
+/*
+ * Right-aligned actions row (presence avatars + translate icon). Absolutely
+ * positioned so it never causes layout shift; the avatars stay flush with the
+ * right edge of the field even when the translate icon isn't rendered.
+ */
+.DocEditor__FieldHeader__actions {
   position: absolute;
   top: 0;
   right: 0;
+  /* Match the height of the translate ActionIcon (size="xs" = 18px) so the
+   * avatars' centers line up with it (the avatars are taller due to their
+   * border). */
+  height: 18px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+
+.DocEditor__FieldHeader__translate {
+  display: inline-flex;
+  align-items: center;
+}
+
+/*
+ * Presence avatars for other users focused on this field.
+ */
+.DocEditor__FieldHeader__viewers {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  pointer-events: none;
+}
+
+/* Overlap is applied to the direct flex children (which may be a Tooltip
+ * wrapper element, not the avatar itself) so the layout stays stable on hover. */
+.DocEditor__FieldHeader__viewers > * {
+  pointer-events: auto;
+}
+
+.DocEditor__FieldHeader__viewers > * + * {
+  margin-left: -8px;
+}
+
+.DocEditor__FieldHeader__viewers__avatar {
+  margin-left: 0;
 }
 
 .DocEditor__FieldHeader__translate__iconDisabled {
@@ -148,7 +227,8 @@
   margin-bottom: 8px;
 }
 
-.DocEditor__field[data-type="object"][data-level="0"] > .DocEditor__FieldHeader {
+.DocEditor__field[data-type='object'][data-level='0']
+  > .DocEditor__FieldHeader {
   padding: 4px 12px;
   margin-top: 12px;
   margin-left: -12px;
@@ -157,12 +237,15 @@
   border-bottom: 1px solid var(--color-border);
 }
 
-.DocEditor__field[data-type="object"]:not([data-level="0"]) .DocEditor__ObjectField__fields {
+.DocEditor__field[data-type='object']:not([data-level='0'])
+  .DocEditor__ObjectField__fields {
   padding-left: 12px;
   border-left: 2px solid lightblue;
 }
 
-.DocEditor__ObjectFieldDrawer .mantine-Accordion-label > .DocEditor__FieldHeader {
+.DocEditor__ObjectFieldDrawer
+  .mantine-Accordion-label
+  > .DocEditor__FieldHeader {
   margin-bottom: 0;
 }
 
@@ -184,7 +267,7 @@
 }
 
 .DocEditor__ObjectFieldDrawer__drawer__toggle:hover {
-  background: #F8F9FA;
+  background: #f8f9fa;
 }
 
 .DocEditor__ObjectFieldDrawer__drawer__toggle__header {
@@ -201,7 +284,9 @@
   transition: transform 0.3s ease;
 }
 
-.DocEditor__ObjectFieldDrawer__drawer[open] > summary > .DocEditor__ObjectFieldDrawer__drawer__toggle__icon {
+.DocEditor__ObjectFieldDrawer__drawer[open]
+  > summary
+  > .DocEditor__ObjectFieldDrawer__drawer__toggle__icon {
   transform: rotate(90deg);
 }
 
@@ -223,13 +308,15 @@
   text-wrap: pretty;
 }
 
-.DocEditor__ObjectFieldDrawer--inline .DocEditor__ObjectFieldDrawer__drawer__toggle {
+.DocEditor__ObjectFieldDrawer--inline
+  .DocEditor__ObjectFieldDrawer__drawer__toggle {
   justify-content: flex-start;
   border-top: none;
   border-bottom: none;
 }
 
-.DocEditor__ObjectFieldDrawer--inline .DocEditor__ObjectFieldDrawer__drawer__content {
+.DocEditor__ObjectFieldDrawer--inline
+  .DocEditor__ObjectFieldDrawer__drawer__content {
   padding-left: 48px;
 }
 
@@ -240,10 +327,14 @@
   width: 100%;
   align-items: center;
   margin-bottom: 8px;
-  transition: box-shadow 0.36s ease, background-color 0.36s ease, border 0.36s ease;
+  transition:
+    box-shadow 0.36s ease,
+    background-color 0.36s ease,
+    border 0.36s ease;
 }
 
-.DocEditor__ArrayField__item__wrapper:has(> .DocEditor__ArrayField__item[open]) > .DocEditor__ArrayField__item__handle {
+.DocEditor__ArrayField__item__wrapper:has(> .DocEditor__ArrayField__item[open])
+  > .DocEditor__ArrayField__item__handle {
   /** Suppress the drag handle when the item is open. */
   visibility: hidden;
 }
@@ -259,10 +350,14 @@
   border: 1px solid #dedede;
   border-radius: 2px;
   overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 10px 15px -5px, rgba(0, 0, 0, 0.04) 0 7px 7px -5px;
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.05),
+    rgba(0, 0, 0, 0.05) 0 10px 15px -5px,
+    rgba(0, 0, 0, 0.04) 0 7px 7px -5px;
 }
 
-.DocEditor__ArrayField__item__wrapper--dragging .DocEditor__ArrayField__item__header {
+.DocEditor__ArrayField__item__wrapper--dragging
+  .DocEditor__ArrayField__item__header {
   outline: none !important;
 }
 
@@ -302,25 +397,43 @@
   --array-field-header-offset: 60px;
 }
 
-.DocEditor__ArrayField .DocEditor__ArrayField .DocEditor__ArrayField .DocEditor__ArrayField {
+.DocEditor__ArrayField
+  .DocEditor__ArrayField
+  .DocEditor__ArrayField
+  .DocEditor__ArrayField {
   --array-field-header-offset: 90px;
 }
 
-.DocEditor__ArrayField .DocEditor__ArrayField .DocEditor__ArrayField__item__header {
+.DocEditor__ArrayField
+  .DocEditor__ArrayField
+  .DocEditor__ArrayField__item__header {
   top: calc(var(--top-bar-height) + var(--array-field-header-offset));
   z-index: 8;
 }
 
-.DocEditor__ArrayField .DocEditor__ArrayField .DocEditor__ArrayField .DocEditor__ArrayField__item__header {
+.DocEditor__ArrayField
+  .DocEditor__ArrayField
+  .DocEditor__ArrayField
+  .DocEditor__ArrayField__item__header {
   z-index: 7;
 }
 
-.DocEditor__ArrayField .DocEditor__ArrayField .DocEditor__ArrayField .DocEditor__ArrayField .DocEditor__ArrayField__item__header {
+.DocEditor__ArrayField
+  .DocEditor__ArrayField
+  .DocEditor__ArrayField
+  .DocEditor__ArrayField
+  .DocEditor__ArrayField__item__header {
   z-index: 6;
 }
 
 /** Nested array fields more than three levels deep don't get the sticky behavior. */
-.DocEditor__ArrayField .DocEditor__ArrayField .DocEditor__ArrayField .DocEditor__ArrayField  .DocEditor__ArrayField  .DocEditor__ArrayField .DocEditor__ArrayField__item__header {
+.DocEditor__ArrayField
+  .DocEditor__ArrayField
+  .DocEditor__ArrayField
+  .DocEditor__ArrayField
+  .DocEditor__ArrayField
+  .DocEditor__ArrayField
+  .DocEditor__ArrayField__item__header {
   border-bottom: unset;
   position: static;
 }
@@ -330,7 +443,9 @@
   border-radius: 0;
 }
 
-.DocEditor__ArrayField__item[open] > .DocEditor__ArrayField__item__header + .DocEditor__ArrayField__item__body {
+.DocEditor__ArrayField__item[open]
+  > .DocEditor__ArrayField__item__header
+  + .DocEditor__ArrayField__item__body {
   border-top: 0;
 }
 
@@ -340,7 +455,9 @@
   transform: rotate(90deg);
 }
 
-.DocEditor__ArrayField__item[open] > summary > .DocEditor__ArrayField__item__header__icon {
+.DocEditor__ArrayField__item[open]
+  > summary
+  > .DocEditor__ArrayField__item__header__icon {
   transform: rotate(180deg);
   margin-top: -2px;
 }
@@ -416,19 +533,19 @@
   font-family: var(--font-family-mono);
 }
 
-.DocEditor__ArrayField__item__header__controls__menu [role="menuitem"],
-.DocEditor__ObjectFieldDrawer__drawer__menu [role="menuitem"] {
+.DocEditor__ArrayField__item__header__controls__menu [role='menuitem'],
+.DocEditor__ObjectFieldDrawer__drawer__menu [role='menuitem'] {
   padding: 8px 12px;
   font-size: 14px;
 }
 
-.DocEditor__ArrayField__item__header__controls__menu [role="menuitem"]:hover,
-.DocEditor__ObjectFieldDrawer__drawer__menu [role="menuitem"]:hover {
+.DocEditor__ArrayField__item__header__controls__menu [role='menuitem']:hover,
+.DocEditor__ObjectFieldDrawer__drawer__menu [role='menuitem']:hover {
   background-color: var(--button-background-hover);
 }
 
-.DocEditor__ArrayField__item__header__controls__menu [role="menuitem"]:active,
-.DocEditor__ObjectFieldDrawer__drawer__menu [role="menuitem"]:active {
+.DocEditor__ArrayField__item__header__controls__menu [role='menuitem']:active,
+.DocEditor__ObjectFieldDrawer__drawer__menu [role='menuitem']:active {
   background-color: var(--button-background-active);
 }
 
@@ -456,11 +573,11 @@
   outline: none;
 }
 
-.DocEditor__ArrayField__item[open] .DocEditor__ArrayField__item__header:focus  {
+.DocEditor__ArrayField__item[open] .DocEditor__ArrayField__item__header:focus {
   padding-left: 10px;
 }
 
-.DocEditor__ArrayField__item__header:focus  {
+.DocEditor__ArrayField__item__header:focus {
   background-color: #f8f9fa;
   border-radius: 2px;
 }