Support markdown input and preview in beatmap discussions

resources/css/bem-index.less

@@ -35,6 +35,7 @@
 @import "bem/beatmap-discussion-expand";
 @import "bem/beatmap-discussion-new";
 @import "bem/beatmap-discussion-new-float";
+@import "bem/beatmap-discussion-new-reply";
 @import "bem/beatmap-discussion-nomination";
 @import "bem/beatmap-discussion-post";
 @import "bem/beatmap-discussion-review-post";
@@ -211,6 +212,7 @@
 @import "bem/login-box";
 @import "bem/logo";
 @import "bem/love-beatmap-modal";
+@import "bem/markdown-editor";
 @import "bem/medals-group";
 @import "bem/message-length-counter";
 @import "bem/mobile-menu";

resources/css/bem/beatmap-discussion-editor.less

@@ -62,7 +62,7 @@
     .default-border-radius();
 
     .@{_top}--edit-mode & {
-      margin: 0 -@padding;
+      margin: 0;
       border: 2px solid hsl(200, 60%, 50%);
     }
 

resources/css/bem/beatmap-discussion-new-reply.less

@@ -0,0 +1,71 @@
+// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+.beatmap-discussion-new-reply {
+  display: flex;
+  justify-content: flex-end;
+  padding: 10px;
+  border-radius: 0 0 @border-radius-base @border-radius-base;
+
+  &--editing {
+    display: grid;
+    grid-template-areas: "user actions" "message message" "footer footer";
+    grid-template-columns: 1fr auto;
+    gap: 10px;
+    justify-content: unset;
+
+    @media @desktop {
+      grid-template-areas: "user container" "user footer";
+      grid-template-columns: auto 1fr;
+      row-gap: 0;
+    }
+  }
+
+  @media @desktop {
+    padding-left: @beatmap-discussion--reply-padding;
+  }
+
+  &__actions {
+    display: flex;
+    gap: 5px;
+    justify-content: flex-end;
+  }
+
+  &__avatar {
+    width: @beatmap-discussion--avatar-size;
+    height: @beatmap-discussion--avatar-size;
+  }
+
+  &__cancel {
+    .reset-input();
+    float: right;
+    color: hsl(var(--hsl-f1));
+    width: @beatmap-discussion--avatar-size;
+    height: @beatmap-discussion--avatar-size;
+  }
+
+  &__container {
+    grid-area: container;
+
+    @media @mobile {
+      grid-area: unset;
+      display: contents;
+    }
+  }
+
+  &__footer {
+    grid-area: footer;
+  }
+
+  &__message-container {
+    grid-area: message;
+  }
+
+  &__notice {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    font-size: @font-size--normal;
+    color: hsl(var(--hsl-f1));
+  }
+}

resources/css/bem/beatmap-discussion-new.less

@@ -18,6 +18,7 @@
 
   &__content {
     display: flex;
+    gap: 10px;
     padding: 0 @_side-padding 10px;
   }
 
@@ -72,13 +73,9 @@
 
   &__message {
     .content-font();
-    color: @osu-colour-f1;
-    flex: 1;
-    padding-left: 10px;
     font-size: @font-size--title-small-2;
-
-    display: flex;
-    flex-direction: column;
+    flex: 1;
+    color: hsl(var(--hsl-f1));
   }
 
   &__message-area {

resources/css/bem/beatmap-discussion-post.less

@@ -11,30 +11,22 @@
 
   @_content-gutter-base: 15px;
 
-  transition: background-color .1s ease-in-out;
+  display: grid;
+  grid-template-areas: "user actions" "message message";
+  grid-template-columns: 1fr auto;
+  gap: 10px;
 
-  &--deleted {
-    opacity: 0.5;
-  }
-
-  &--discussion {
-    min-width: 0;
-
-    @media @desktop {
-      flex: 1;
-    }
+  @media @desktop {
+    grid-template-areas: "user container";
+    grid-template-columns: auto 1fr;
+    row-gap: 0;
   }
 
-  &--new-reply {
-    background-color: @osu-colour-b5;
-    border-radius: 0 0 @border-radius-base @border-radius-base;
-  }
+  padding: 10px;
+  transition: background-color .1s ease-in-out;
 
-  &--new-reply-placeholder {
-    padding: 10px;
-    display: flex;
-    justify-content: flex-end;
-    background-color: transparent;
+  &--deleted {
+    opacity: 0.5;
   }
 
   &--unread {
@@ -49,48 +41,24 @@
   }
 
   &__action {
-    margin: 0 5px;
     text-transform: lowercase;
 
-    &--button {
+    &--plain {
       .reset-input();
       .link-plain();
       .link-default();
-      // reset function above overrides margin
-      margin: 0 5px;
-      font-size: @font-size--small;
-    }
 
-    &--cancel {
-      .reset-input();
-      position: absolute;
-      color: @osu-colour-f1;
-      right: 0;
-      width: @beatmap-discussion--reply-padding;
-      height: @beatmap-discussion--reply-padding;
+      font-size: @font-size--small;
     }
   }
 
   &__actions {
     display: flex;
+    gap: 5px;
 
     .@{_top}--editing & {
       justify-content: flex-end;
     }
-
-    .@{_top}--new-reply & {
-      justify-content: flex-end;
-    }
-
-    .@{_top}--editing.@{_top}--reply & {
-      margin-top: 5px;
-    }
-  }
-
-  &__actions-group {
-    display: flex;
-    align-items: center;
-    margin: 0 -5px;
   }
 
   &__avatar {
@@ -105,62 +73,12 @@
     }
   }
 
-  &__content {
-    display: flex;
-    padding: 10px @_content-gutter-base;
-    flex-direction: column;
-    flex: none;
-    min-width: 0;
+  &__container {
+    grid-area: container;
 
-    @media @desktop {
-      flex-direction: row;
-      flex: 1;
-    }
-
-    // Paddings for thread starter is handled by its parent.
-    .@{_top}--discussion & {
-      padding: 0;
-    }
-
-    .@{_top}--reply & {
-      // override padding for discussion previews
-      .beatmap-discussion--preview &,
-      .beatmap-discussion-review-post-embed & {
-        padding: 10px @_content-gutter-base;
-      }
-
-      @media @desktop {
-        padding-left: @beatmap-discussion--reply-padding;
-        padding-right: @beatmap-discussion--reply-padding;
-      }
-    }
-
-    .@{_top}--new-reply & {
-      padding-bottom: 0;
-    }
-  }
-
-  &__footer {
-    padding: 10px;
-
-    &--notice {
-      padding-top: 0;
-      padding-bottom: 0;
-      display: flex;
-      align-items: flex-end;
-      justify-content: space-between;
-      font-size: @font-size--normal;
-      color: @osu-colour-f1;
-    }
-
-    .@{_top}--reply & {
-      padding-left: @_content-gutter-base;
-      padding-right: @_content-gutter-base;
-
-      @media @desktop {
-        padding-left: @beatmap-discussion--reply-padding;
-        padding-right: @beatmap-discussion--reply-padding;
-      }
+    @media @mobile {
+      grid-area: unset;
+      display: contents;
     }
   }
 
@@ -173,15 +91,7 @@
   &__info-container {
     display: flex;
     flex-wrap: wrap;
-
-    .@{_top}--reply & {
-      &::after {
-        content: '';
-        height: 1px;
-        align-self: center;
-        flex: 1;
-      }
-    }
+    margin-top: 10px;
   }
 
   &__info-user {
@@ -191,47 +101,25 @@
 
   &__message {
     .content-font();
+    grid-area: message;
     word-break: break-word;
-    margin-bottom: 10px;
     color: white;
+    font-size: @_discussion-text-size;
+  }
 
-    .@{_top}--discussion & {
-      font-size: @_discussion-text-size;
-    }
-
-    .@{_top}--reply & {
-      font-size: @_reply-text-size;
-    }
-
-    &::placeholder {
-      color: @osu-colour-f1;
-    }
+  &__message-container {
+    grid-area: message;
 
-    &--editor {
-      .reset-input();
-      width: 100%;
-      resize: vertical;
-      min-height: 3em;
-
-      // --reply part to override top modifier
-      &, .@{_top}--reply & {
-        font-size: @font-size--phone-input;
-
-        @media @desktop {
-          font-size: @_reply-text-size;
-        }
-      }
+    &--review {
+      clear: both;
     }
   }
 
-  &__message-container {
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    flex: none;
+  &__user {
+    grid-area: user;
 
     @media @desktop {
-      flex: 1;
+      border-right: 2px solid var(--group-colour, hsl(var(--hsl-b5)));
     }
   }
 }

resources/css/bem/beatmap-discussion-user-card.less

@@ -12,7 +12,6 @@
 
   @media @desktop {
     margin-bottom: 0;
-    margin-right: 10px;
   }
 
   &__avatar {
@@ -72,18 +71,4 @@
     display: flex;
     align-items: baseline;
   }
-
-  &__user-stripe {
-    align-self: stretch;
-    background-color: var(--group-colour, @osu-colour-b5);
-    border-radius: 1px;
-    flex: none;
-    width: 2px;
-
-    .beatmap-discussion-post--discussion & {
-      @media @mobile {
-        display: none;
-      }
-    }
-  }
 }