Merge branch 'main' into woodpecker_fix_1

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

@@ -363,7 +363,7 @@ export class MarkdownTextArea extends Component<
     if (value === null) {
       const emoji = customEmojisLookup.get(e.id)?.custom_emoji;
       if (emoji) {
-        value = `![${emoji.alt_text}](${emoji.image_url} "${emoji.shortcode}")`;
+        value = `![${emoji.alt_text}](${emoji.image_url} "emoji ${emoji.shortcode}")`;
       }
     }
     i.setState({

src/shared/components/home/admin-settings.tsx

@@ -150,15 +150,26 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                         loading={this.state.loading}
                       />
                     </div>
-                    <div className="col-12 col-md-6">
-                      {this.admins()}
-                      <hr />
-                      {this.bannedUsers()}
-                    </div>
+                    <div className="col-12 col-md-6">{this.admins()}</div>
                   </div>
                 </div>
               ),
             },
+            {
+              key: "banned_users",
+              label: I18NextService.i18n.t("banned_users"),
+              getNode: isSelected => (
+                <div
+                  className={classNames("tab-pane", {
+                    active: isSelected,
+                  })}
+                  role="tabpanel"
+                  id="banned_users-tab-pane"
+                >
+                  {this.bannedUsers()}
+                </div>
+              ),
+            },
             {
               key: "rate_limiting",
               label: "Rate Limiting",
@@ -295,7 +306,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
         const bans = this.state.bannedRes.data.banned;
         return (
           <>
-            <h2 className="h5">{I18NextService.i18n.t("banned_users")}</h2>
+            <h1 className="h4 mb-4">{I18NextService.i18n.t("banned_users")}</h1>
             <ul className="list-unstyled">
               {bans.map(banned => (
                 <li key={banned.person.id} className="list-inline-item">

src/shared/components/post/post-form.tsx

@@ -342,6 +342,32 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
             ) && !this.state.submitted
           }
         />
+        <div className="mb-3 row">
+          <label className="col-sm-2 col-form-label" htmlFor="post-title">
+            {I18NextService.i18n.t("title")}
+          </label>
+          <div className="col-sm-10">
+            <textarea
+              value={this.state.form.name}
+              id="post-title"
+              onInput={linkEvent(this, handlePostNameChange)}
+              className={`form-control ${
+                !validTitle(this.state.form.name) && "is-invalid"
+              }`}
+              required
+              rows={1}
+              minLength={3}
+              maxLength={MAX_POST_TITLE_LENGTH}
+            />
+            {!validTitle(this.state.form.name) && (
+              <div className="invalid-feedback">
+                {I18NextService.i18n.t("invalid_post_title")}
+              </div>
+            )}
+            {this.renderSuggestedPosts()}
+          </div>
+        </div>
+
         <div className="mb-3 row">
           <label className="col-sm-2 col-form-label" htmlFor="post-url">
             {I18NextService.i18n.t("url")}
@@ -453,32 +479,6 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
           )}
         </div>
 
-        <div className="mb-3 row">
-          <label className="col-sm-2 col-form-label" htmlFor="post-title">
-            {I18NextService.i18n.t("title")}
-          </label>
-          <div className="col-sm-10">
-            <textarea
-              value={this.state.form.name}
-              id="post-title"
-              onInput={linkEvent(this, handlePostNameChange)}
-              className={`form-control ${
-                !validTitle(this.state.form.name) && "is-invalid"
-              }`}
-              required
-              rows={1}
-              minLength={3}
-              maxLength={MAX_POST_TITLE_LENGTH}
-            />
-            {!validTitle(this.state.form.name) && (
-              <div className="invalid-feedback">
-                {I18NextService.i18n.t("invalid_post_title")}
-              </div>
-            )}
-            {this.renderSuggestedPosts()}
-          </div>
-        </div>
-
         <div className="mb-3 row">
           <label className="col-sm-2 col-form-label">
             {I18NextService.i18n.t("body")}

src/shared/markdown.ts

@@ -195,11 +195,22 @@ export function setupMarkdown() {
   ) {
     //Provide custom renderer for our emojis to allow us to add a css class and force size dimensions on them.
     const item = tokens[idx] as any;
-    const title = item.attrs.length >= 3 ? item.attrs[2][1] : "";
+    let title = item.attrs.length >= 3 ? item.attrs[2][1] : "";
+    const splitTitle = title.split(/ (.*)/, 2);
+    const isEmoji = splitTitle[0] === "emoji";
+    if (isEmoji) {
+      title = splitTitle[1];
+    }
     const customEmoji = customEmojisLookup.get(title);
-    const isCustomEmoji = customEmoji !== undefined;
-    if (!isCustomEmoji) {
-      return defaultRenderer?.(tokens, idx, options, env, self) ?? "";
+    const isLocalEmoji = customEmoji !== undefined;
+    if (!isLocalEmoji) {
+      const imgElement =
+        defaultRenderer?.(tokens, idx, options, env, self) ?? "";
+      if (imgElement) {
+        return `<span class='${
+          isEmoji ? "icon icon-emoji" : ""
+        }'>${imgElement}</span>`;
+      } else return "";
     }
     return `<img class="icon icon-emoji" src="${
       customEmoji!.custom_emoji.image_url
@@ -318,7 +329,7 @@ export function setupTribute() {
             ?.custom_emoji;
           if (customEmoji === undefined) return `${item.original.val}`;
           else
-            return `![${customEmoji.alt_text}](${customEmoji.image_url} "${customEmoji.shortcode}")`;
+            return `![${customEmoji.alt_text}](${customEmoji.image_url} "emoji ${customEmoji.shortcode}")`;
         },
         values: Object.entries(emojiShortName)
           .map(e => {

src/shared/utils/helpers/format-past-date.ts

@@ -3,7 +3,11 @@ import parseISO from "date-fns/parseISO";
 
 export default function (dateString?: string) {
   const parsed = parseISO((dateString ?? Date.now().toString()) + "Z");
-  return formatDistanceStrict(parsed, new Date(), {
-    addSuffix: true,
-  });
+  try {
+    return formatDistanceStrict(parsed, new Date(), {
+      addSuffix: true,
+    });
+  } catch (e) {
+    return "indeterminate";
+  }
 }