Grabbed dndbeyond's source code

```
~/go/bin/sourcemapper -output ddb -jsurl https://media.dndbeyond.com/character-app/static/js/main.90aa78c5.js
```

ddb_main/components/EditableName/EditableName.tsx

@@ -0,0 +1,40 @@
+import clsx from "clsx";
+import { HTMLAttributes } from "react";
+import { useSelector } from "react-redux";
+
+import Pen from "@dndbeyond/fontawesome-cache/svgs/light/pen.svg";
+
+import { appEnvSelectors } from "../../tools/js/Shared/selectors";
+import styles from "./styles.module.css";
+
+interface EditableNameProps extends HTMLAttributes<HTMLDivElement> {
+  onClick: () => void;
+}
+
+/**
+ * Component which displays children with an edit button to the right. It is
+ * used in panes to give custom names to items, etc.
+ */
+export const EditableName = ({
+  children,
+  className,
+  onClick,
+  ...props
+}: EditableNameProps) => {
+  const isReadOnly = useSelector(appEnvSelectors.getIsReadonly);
+
+  return (
+    <div className={clsx([styles.editableName, className])} {...props}>
+      <div>{children}</div>
+      {!isReadOnly && (
+        <button
+          className={styles.button}
+          onClick={onClick}
+          aria-label="Edit name"
+        >
+          <Pen className={styles.icon} />
+        </button>
+      )}
+    </div>
+  );
+};