Add stuff to app header

src-web/components/core/Button.tsx

@@ -1,6 +1,6 @@
 import classnames from 'classnames';
 import type { HTMLAttributes } from 'react';
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import { Icon } from './Icon';
 
@@ -39,45 +39,32 @@ export const Button = forwardRef<any, ButtonProps>(function Button(
   }: ButtonProps,
   ref,
 ) {
+  const classes = useMemo(
+    () =>
+      classnames(
+        className,
+        'outline-none pointer-events-auto',
+        'border border-transparent focus-visible:border-blue-300',
+        'rounded-md flex items-center',
+        colorStyles[color || 'default'],
+        justify === 'start' && 'justify-start',
+        justify === 'center' && 'justify-center',
+        size === 'md' && 'h-9 px-3',
+        size === 'sm' && 'h-7 px-2.5 text-sm',
+      ),
+    [color, size, justify, className],
+  );
+
   if (typeof to === 'string') {
     return (
-      <Link
-        ref={ref}
-        to={to}
-        className={classnames(
-          className,
-          'outline-none',
-          'border border-transparent focus-visible:border-blue-300',
-          'rounded-md flex items-center',
-          colorStyles[color || 'default'],
-          justify === 'start' && 'justify-start',
-          justify === 'center' && 'justify-center',
-          size === 'md' && 'h-9 px-3',
-          size === 'sm' && 'h-7 px-2.5 text-sm',
-        )}
-        {...props}
-      >
+      <Link ref={ref} to={to} className={classes} {...props}>
         {children}
         {forDropdown && <Icon icon="triangleDown" className="ml-1 -mr-1" />}
       </Link>
     );
   } else {
     return (
-      <button
-        ref={ref}
-        className={classnames(
-          className,
-          'outline-none',
-          'border border-transparent focus-visible:border-blue-300',
-          'rounded-md flex items-center',
-          colorStyles[color || 'default'],
-          justify === 'start' && 'justify-start',
-          justify === 'center' && 'justify-center',
-          size === 'md' && 'h-9 px-3',
-          size === 'sm' && 'h-7 px-2.5 text-sm',
-        )}
-        {...props}
-      >
+      <button ref={ref} className={classes} {...props}>
         {children}
         {forDropdown && <Icon icon="triangleDown" className="ml-1 -mr-1" />}
       </button>

src-web/components/core/Editor/Editor.tsx

@@ -1,11 +1,11 @@
 import { defaultKeymap } from '@codemirror/commands';
 import { Compartment, EditorState } from '@codemirror/state';
-import { keymap, placeholder as placeholderExt, tooltips, ViewPlugin } from '@codemirror/view';
+import { keymap, placeholder as placeholderExt, tooltips } from '@codemirror/view';
 import classnames from 'classnames';
 import { EditorView } from 'codemirror';
 import type { MutableRefObject } from 'react';
 import { useEffect, useMemo, useRef } from 'react';
-import { useMount, useUnmount } from 'react-use';
+import { useUnmount } from 'react-use';
 import { IconButton } from '../IconButton';
 import './Editor.css';
 import { baseExtensions, getLanguageExtension, multiLineExtensions } from './extensions';
@@ -67,7 +67,9 @@ export function _Editor({
   const placeholderCompartment = useRef(new Compartment());
   useEffect(() => {
     if (cm.current === null) return;
-    const effect = placeholderCompartment.current.reconfigure(placeholderExt(placeholder ?? ''));
+    const effect = placeholderCompartment.current.reconfigure(
+      placeholderExt(placeholderElFromText(placeholder ?? '')),
+    );
     cm.current?.view.dispatch({ effects: effect });
   }, [placeholder]);
 
@@ -89,7 +91,9 @@ export function _Editor({
         doc: `${defaultValue ?? ''}`,
         extensions: [
           languageCompartment.of(langExt),
-          placeholderCompartment.current.of(placeholderExt(placeholder ?? '')),
+          placeholderCompartment.current.of(
+            placeholderExt(placeholderElFromText(placeholder ?? '')),
+          ),
           ...getExtensions({
             container: wrapperRef.current,
             onChange: handleChange,
@@ -138,8 +142,9 @@ export function _Editor({
       {cmContainer}
       {format && (
         <IconButton
+          showConfirm
           size="sm"
-          title="Re-format"
+          title="Reformat contents"
           icon="magicWand"
           className="absolute bottom-2 right-0 transition-opacity opacity-0 group-hover:opacity-70"
           onClick={() => {
@@ -232,3 +237,9 @@ const syncGutterBg = ({
     gutterEl?.classList.add(...bgClasses);
   }
 };
+
+const placeholderElFromText = (text: string) => {
+  const el = document.createElement('div');
+  el.innerHTML = text.replace('\n', '<br/>');
+  return el;
+};

src-web/components/core/IconButton.tsx

@@ -1,20 +1,41 @@
 import classnames from 'classnames';
 import { forwardRef } from 'react';
+import { useTimedBoolean } from '../../hooks/useTimedBoolean';
 import type { ButtonProps } from './Button';
 import { Button } from './Button';
 import type { IconProps } from './Icon';
 import { Icon } from './Icon';
 
 type Props = IconProps &
-  ButtonProps & { iconClassName?: string; iconSize?: IconProps['size']; title: string };
+  ButtonProps & {
+    showConfirm?: boolean;
+    iconClassName?: string;
+    iconSize?: IconProps['size'];
+    title: string;
+  };
 
 export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButton(
-  { icon, spin, className, iconClassName, size = 'md', iconSize, ...props }: Props,
+  {
+    showConfirm,
+    icon,
+    spin,
+    onClick,
+    className,
+    iconClassName,
+    size = 'md',
+    iconSize,
+    ...props
+  }: Props,
   ref,
 ) {
+  const [confirmed, setConfirmed] = useTimedBoolean();
   return (
     <Button
       ref={ref}
+      onClick={(e) => {
+        if (showConfirm) setConfirmed();
+        onClick?.(e);
+      }}
       className={classnames(
         className,
         'text-gray-700 hover:text-gray-1000',
@@ -27,9 +48,13 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
     >
       <Icon
         size={iconSize}
-        icon={icon}
+        icon={confirmed ? 'check' : icon}
         spin={spin}
-        className={classnames(iconClassName, props.disabled && 'opacity-70')}
+        className={classnames(
+          iconClassName,
+          props.disabled && 'opacity-70',
+          confirmed && 'text-green-600',
+        )}
       />
     </Button>
   );