Merge remote-tracking branch 'lemmy/main' into fix/fix-font-classes-bs5

* lemmy/main: (35 commits)
  fix(a11y): Fix non-list item being inside ul list in navbar
  fix: Fix non-unique ID attribute on re-used element
  fix: Fix some emoji escape logic
  fix: Button doesn't need tabindex
  fix: Fix incorrect function reference
  fix: Emoji picker can be closed with escape key, other a11y fixes
  fix: Fix some a11y issues on jump to content button
  fix: Clarify a comment
  fix: Fix merge error
  Remove federation worker count
  fix: Add triangle alert icon to language warning
  added litely-compact
  changed where custom compact code goes
  added darkly-compact - issue 552
  Refactor first load handling
  Fix issue when navigating awat from settings
  Give function better name
  Change function name
  Make date distance format use correct verbiage
  Extract date fns setup
  ...

src/shared/components/common/markdown-textarea.tsx

@@ -23,15 +23,28 @@ import NavigationPrompt from "./navigation-prompt";
 import ProgressBar from "./progress-bar";
 
 interface MarkdownTextAreaProps {
+  /**
+   * Initial content inside the textarea
+   */
   initialContent?: string;
+  /**
+   * Numerical ID of the language to select in dropdown
+   */
   initialLanguageId?: number;
   placeholder?: string;
   buttonTitle?: string;
   maxLength?: number;
+  /**
+   * Whether this form is for a reply to a Private Message.
+   * If true, a "Cancel" button is shown that will close the reply.
+   */
   replyType?: boolean;
   focus?: boolean;
   disabled?: boolean;
   finished?: boolean;
+  /**
+   * Whether to show the language selector
+   */
   showLanguage?: boolean;
   hideNavigationWarnings?: boolean;
   onContentChange?(val: string): void;
@@ -276,19 +289,6 @@ export class MarkdownTextArea extends Component<
             {/* A flex expander */}
             <div className="flex-grow-1"></div>
 
-            {this.props.buttonTitle && (
-              <button
-                type="submit"
-                className="btn btn-sm btn-secondary ms-2"
-                disabled={this.isDisabled}
-              >
-                {this.state.loading ? (
-                  <Spinner />
-                ) : (
-                  <span>{this.props.buttonTitle}</span>
-                )}
-              </button>
-            )}
             {this.props.replyType && (
               <button
                 type="button"
@@ -298,16 +298,26 @@ export class MarkdownTextArea extends Component<
                 {I18NextService.i18n.t("cancel")}
               </button>
             )}
-            {this.state.content && (
+            <button
+              type="button"
+              disabled={!this.state.content}
+              className={classNames("btn btn-sm btn-secondary ms-2", {
+                active: this.state.previewMode,
+              })}
+              onClick={linkEvent(this, this.handlePreviewToggle)}
+            >
+              {this.state.previewMode
+                ? I18NextService.i18n.t("edit")
+                : I18NextService.i18n.t("preview")}
+            </button>
+            {this.props.buttonTitle && (
               <button
-                className={`btn btn-sm btn-secondary ms-2 ${
-                  this.state.previewMode && "active"
-                }`}
-                onClick={linkEvent(this, this.handlePreviewToggle)}
+                type="submit"
+                className="btn btn-sm btn-secondary ms-2"
+                disabled={this.isDisabled || !this.state.content}
               >
-                {this.state.previewMode
-                  ? I18NextService.i18n.t("edit")
-                  : I18NextService.i18n.t("preview")}
+                {this.state.loading && <Spinner className="me-1" />}
+                {this.props.buttonTitle}
               </button>
             )}
           </div>