Merge pull request #76 from Pkcarreno/improves-5

Improves 5

package.json

@@ -66,6 +66,7 @@
     "react-resizable-panels": "^2.1.7",
     "react-virtuoso": "^4.12.3",
     "rfdc": "^1.4.1",
+    "sanitize-html": "^2.14.0",
     "sonner": "^1.7.0",
     "tailwind-merge": "^2.6.0",
     "wouter": "^3.3.5",
@@ -83,6 +84,7 @@
     "@types/esprima": "^4.0.6",
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
+    "@types/sanitize-html": "^2.13.0",
     "@vitejs/plugin-basic-ssl": "^1.2.0",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",

src/components/inline-input.tsx

@@ -0,0 +1,30 @@
+import { type ChangeEventHandler, type KeyboardEventHandler } from 'react';
+
+type Props = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'type' | 'onKeyDown' | 'onBlur'
+>;
+
+export const InlineInput = ({ onChange, ...props }: Props) => {
+  const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
+    if (event.key === 'Enter' || event.key === 'Escape') {
+      event.currentTarget.blur();
+    }
+  };
+
+  const onBlur: ChangeEventHandler<HTMLInputElement> = (event) => {
+    if (onChange && event.target.value.trim() !== '') {
+      onChange(event);
+    }
+  };
+
+  return (
+    <input
+      type="text"
+      onKeyDown={onKeyDown}
+      onBlur={onBlur}
+      onChange={onChange}
+      {...props}
+    />
+  );
+};

src/features/editor/components/header/index.tsx

@@ -2,36 +2,41 @@ import { Separator } from '@radix-ui/react-separator';
 import { useMemo } from 'react';
 
 import { ActionButtons } from './action-buttons';
-import { InfoTitle } from './info';
 import { LayoutDirectionToggler } from './layout-direction-toggler';
 import { MainMenu } from './main-menu';
 import { OpenInSite } from './open-in-site';
 import { SharingMenu } from './sharing-menu';
+import { Title, TitleProvider } from './title';
 import { BottomHeaderUntrustedModeSign } from './untrusted-mode-sign';
 
 export const Header = () => {
   const isIframe = useMemo(() => window.self !== window.top, []);
 
   return (
-    <>
-      <header className="flex w-full flex-wrap justify-between gap-4 px-4 py-2">
-        <div className="flex flex-wrap items-center gap-1 ">
-          <MainMenu />
-        </div>
+    <TitleProvider>
+      <header>
+        <div className="flex w-full items-center space-x-4 px-4 py-2">
+          <div className="my-auto flex w-full min-w-28 flex-col overflow-hidden sm:w-auto sm:min-w-0 sm:flex-none">
+            <MainMenu />
+            <div className="sm:hidden">
+              <Title />
+            </div>
+          </div>
 
-        <div className="hidden flex-1 gap-1 overflow-hidden sm:flex">
-          <InfoTitle />
-        </div>
+          <div className="my-auto hidden w-full min-w-32 overflow-hidden sm:flex">
+            <Title />
+          </div>
 
-        <div className="flex flex-1 flex-wrap justify-end gap-3 sm:flex-none">
-          {isIframe && <OpenInSite />}
-          {!isIframe && <SharingMenu />}
-          <LayoutDirectionToggler />
-          <ActionButtons />
+          <div className="flex space-x-3">
+            {isIframe && <OpenInSite />}
+            {!isIframe && <SharingMenu />}
+            <LayoutDirectionToggler />
+            <ActionButtons />
+          </div>
         </div>
       </header>
       <BottomHeaderUntrustedModeSign />
       <Separator className="bg-border h-px" />
-    </>
+    </TitleProvider>
   );
 };