Add supported markdown guide to creating announcement UI

resources/css/bem-index.less

@@ -213,6 +213,7 @@
 @import "bem/login-box";
 @import "bem/logo";
 @import "bem/love-beatmap-modal";
+@import "bem/markdown-help";
 @import "bem/medals-group";
 @import "bem/message-length-counter";
 @import "bem/mobile-menu";

resources/css/bem/link.less

@@ -2,6 +2,7 @@
 // See the LICENCE file in the repository root for full licence text.
 
 .link {
+  .reset-input();
   ._colour(@link-colour, @hover-colour) {
     color: @link-colour;
 

resources/css/bem/markdown-help.less

@@ -0,0 +1,38 @@
+// 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.
+
+
+.markdown-help {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  background: hsl(var(--hsl-b4));
+  padding: 15px;
+  border-radius: 4px;
+
+  max-height: calc(80 * var(--vh, 1vh));
+  overflow: auto;
+
+  &__buttons {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  &__example {
+    display: grid;
+    gap: 10px;
+    grid-template-columns: 1fr 1fr;
+
+    border-radius: 4px;
+    box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
+    padding: 10px;
+    background: hsl(var(--hsl-b6));
+  }
+
+  &__examples {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+}

resources/js/chat/create-announcement.tsx

@@ -12,6 +12,7 @@ import { isInputKey, maxLengths } from 'models/chat/create-announcement';
 import core from 'osu-core-singleton';
 import * as React from 'react';
 import { trans } from 'utils/lang';
+import MarkdownHelp from './markdown-help';
 
 type Props = Record<string, never>;
 
@@ -104,6 +105,8 @@ export default class CreateAnnouncement extends React.Component<Props> {
             </div>
           </InputContainer>
           <InputContainer
+            extras={<MarkdownHelp />}
+            for='chat-form-message'
             labelKey='chat.form.labels.message'
             maxLength={maxLengths.message}
             model={this.model}
@@ -114,6 +117,7 @@ export default class CreateAnnouncement extends React.Component<Props> {
               autoComplete='off'
               className='chat-form__input chat-form__input--box'
               defaultValue={this.model.inputs.message}
+              id='chat-form-message'
               name='message'
               onBlur={this.handleBlur}
               onChange={this.handleInput}

resources/js/chat/markdown-help.tsx

@@ -0,0 +1,136 @@
+// 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.
+
+import Modal from 'components/modal';
+import { action, makeObservable, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { trans } from 'utils/lang';
+
+const examples = [
+  {
+    html: <h1>Heading 1</h1>,
+    markdown: '# Heading 1',
+  },
+  {
+    html: <h2>Heading 2</h2>,
+    markdown: '## Heading 2',
+  },
+  {
+    html: <h3>Heading 3</h3>,
+    markdown: '### Heading 3',
+  },
+  {
+    html: <><strong>bold</strong> and <em>emphasis</em></>,
+    markdown: '**bold** and *emphasis*',
+  },
+  {
+    html: <a href='https://osu.ppy.sh'>links</a>,
+    markdown: '[links](https://osu.ppy.sh)',
+  },
+  {
+    html: <ol>
+      <li>ordered</li>
+      <li>list</li>
+    </ol>,
+    markdown: <>
+      1. ordered<br />
+      1. list
+    </>,
+  },
+  {
+    html: <ul>
+      <li>unordered</li>
+      <li>list</li>
+    </ul>,
+    markdown: <>
+      - unordered<br />
+      - list
+    </>,
+  },
+  {
+    html: <blockquote><p>quote</p></blockquote>,
+    markdown: '> quote',
+  },
+  {
+    html: <pre>
+      <code>
+        code{'\n'}
+        blocks
+      </code>
+    </pre>,
+    markdown: <>
+      ```<br />
+      code<br />
+      blocks<br />
+      ```
+    </>,
+  },
+  {
+    html: <code>inline block</code>,
+    markdown: '`inline block`',
+  },
+];
+
+interface Example {
+  html: React.ReactNode;
+  markdown: React.ReactNode;
+}
+
+function renderExample({ html, markdown }: Example) {
+  return (
+    <div className='markdown-help__example'>
+      <div>{markdown}</div>
+      <div>{html}</div>
+    </div>
+  );
+}
+
+@observer
+export default class MarkdownHelp extends React.Component<Record<string, never>> {
+  @observable showingModal = false;
+
+  constructor(props: Record<string, never>) {
+    super(props);
+
+    makeObservable(this);
+  }
+
+  render() {
+    return (
+      <>
+        <button
+          className='link'
+          onClick={this.toggle}
+        >
+          {trans('chat.markdown_supported')}
+        </button>
+        {this.showingModal && (
+          <Modal onClose={this.toggle}>
+            <div className='markdown-help'>
+              <div className='osu-md osu-md--chat'>
+                <div className='markdown-help__examples'>
+                  {examples.map((example, index) => <React.Fragment key={index}>{renderExample(example)}</React.Fragment>)}
+                </div>
+              </div>
+              <div className='markdown-help__buttons'>
+                <button
+                  className='btn-osu-big btn-osu-big--rounded-thin'
+                  onClick={this.toggle}
+                  type='button'
+                >
+                  {trans('common.buttons.close')}
+                </button>
+              </div>
+            </div>
+          </Modal>
+        )}
+      </>
+    );
+  }
+
+  @action
+  private toggle = () => {
+    this.showingModal = !this.showingModal;
+  };
+}

resources/js/components/input-container.tsx

@@ -8,6 +8,7 @@ import { trans } from 'utils/lang';
 import MessageLengthCounter from './message-length-counter';
 
 interface CommonProps {
+  extras?: React.ReactNode;
   for?: string;
   labelKey?: string;
   modifiers?: Modifiers;
@@ -34,7 +35,10 @@ const InputContainer = observer(<T extends string>(props: React.PropsWithChildre
     <label className={classWithModifiers('input-container', { error }, props.modifiers)} htmlFor={props.for}>
       {props.labelKey != null && (
         <div className='input-container__label'>
-          {trans(props.labelKey)}
+          <span>
+            {trans(props.labelKey)}
+            {props.extras != null && <span> {props.extras}</span>}
+          </span>
           {props.model != null && props.maxLength != null && (
             <MessageLengthCounter maxLength={props.maxLength} message={props.model.inputs[props.name]} />
           )}

resources/lang/en/chat.php

@@ -5,6 +5,7 @@
 
 return [
     'loading_users' => 'loading users...',
+    'markdown_supported' => '(markdown supported)',
     'talking_in' => 'talking in :channel',
     'talking_with' => 'talking with :name',
     'title_compact' => 'chat',