This is why we can't have nice things

src/components/Chat.js

@@ -14,7 +14,7 @@ import firebase from "../firebase";
 import useFirebaseQuery from "../hooks/useFirebaseQuery";
 import useStats from "../hooks/useStats";
 import useStorage from "../hooks/useStorage";
-import { censorText } from "../util";
+import { censorText, unicodeTrim } from "../util";
 import autoscroll from "../utils/autoscroll";
 import emoji from "../utils/emoji";
 import ChatCards from "./ChatCards";
@@ -80,9 +80,6 @@ const useStyles = makeStyles((theme) => ({
     margin: "0 -4px",
     padding: "0 4px 0 2px",
   },
-  action: {
-    fontStyle: "italic",
-  },
 }));
 
 const makeMentionRE = (username) => {
@@ -134,11 +131,8 @@ function Chat({
 
   function handleSubmit(event) {
     event.preventDefault();
-    let text = input.trim();
+    const text = unicodeTrim(input);
     if (text) {
-      if (text.startsWith("/slap ")) {
-        text = `/me slaps ${text.slice(6)} around a bit with a large trout`;
-      }
       firebase
         .database()
         .ref(databasePath)
@@ -251,29 +245,13 @@ function Chat({
                   item.time,
                   <Typography variant="body2">
                     {formatTime(item.time)}
-                    {item.message.startsWith("/me ") ? (
-                      <span className={classes.action}>
-                        *{" "}
-                        <User
-                          id={item.user}
-                          style={{ color: "inherit", fontWeight: "inherit" }}
-                          showIcon={false}
-                          component={InternalLink}
-                          to={`/profile/${item.user}`}
-                        />
-                        {item.message.slice(3)}
-                      </span>
-                    ) : (
-                      <>
-                        <User
-                          id={item.user}
-                          component={InternalLink}
-                          to={`/profile/${item.user}`}
-                          underline="none"
-                        />
-                        : {item.message}
-                      </>
-                    )}
+                    <User
+                      id={item.user}
+                      component={InternalLink}
+                      to={`/profile/${item.user}`}
+                      underline="none"
+                    />
+                    : {item.message}
                   </Typography>
                 )}
                 {user.admin && (

src/components/Navbar.js

@@ -75,15 +75,13 @@ function Navbar() {
 
   function handleChangeSiteTitle(title) {
     setChangeSiteTitle(false);
-    title = (title || "").trim();
     if (title) {
       firebase.database().ref("site/title").set(title);
     }
   }
 
   function handleChangeName(name) {
     setChangeName(false);
-    name = (name || "").trim();
     if (name) {
       firebase.database().ref(`users/${user.id}/name`).set(name);
     }

src/components/ProfileName.js

@@ -55,7 +55,7 @@ function ProfileName({ userId }) {
 
   const handleBan = (duration) => {
     setBanUser(false);
-    const seconds = parseDuration((duration || "").trim());
+    const seconds = parseDuration(duration);
     if (seconds) {
       const endTime = Date.now() + seconds * 1000;
       firebase.database().ref(`users/${userId}/banned`).set(endTime);

src/components/PromptDialog.js

@@ -9,7 +9,7 @@ import DialogTitle from "@material-ui/core/DialogTitle";
 import TextField from "@material-ui/core/TextField";
 
 import { UserContext } from "../context";
-import { censorText } from "../util";
+import { censorText, unicodeTrim } from "../util";
 
 function PromptDialog(props) {
   const { open, onClose, title, message, label, maxLength } = props;
@@ -25,7 +25,7 @@ function PromptDialog(props) {
     if (!user.admin && !value.match(/^[\p{L}\p{M}\p{N}\p{P}\p{Zs}]*$/u)) {
       alert("Please use only letters, numbers, and punctuation.");
     } else {
-      onClose(censorText(value));
+      onClose(censorText(unicodeTrim(value)));
       setValue("");
     }
   }

src/components/User.js

@@ -18,15 +18,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function User({
-  id,
-  style,
-  component,
-  render,
-  showRating,
-  showIcon = true,
-  ...other
-}) {
+function User({ id, style, component, render, showRating, ...other }) {
   const theme = useTheme();
   const classes = useStyles();
 
@@ -52,7 +44,7 @@ function User({
           {loadingStats ? "⋯" : Math.round(stats[showRating].rating)}
         </span>
       )}
-      {showIcon && user.admin && (
+      {user.admin && (
         <Security
           fontSize="inherit"
           style={{

src/util.js

@@ -162,6 +162,13 @@ export function formatDateTime(timestamp) {
   return d.toLocaleString(undefined, opts);
 }
 
+const trimRegex =
+  /^[\p{White_Space}\p{Default_Ignorable_Code_Point}]+|[\p{White_Space}\p{Default_Ignorable_Code_Point}]+$/gu;
+
+export function unicodeTrim(str) {
+  return str.replace(trimRegex, "");
+}
+
 export function parseDuration(spec) {
   const units = [7 * 24 * 3600, 24 * 3600, 3600, 60, 1];
   const re =