first commit

common/resources/client/article-editor/article-editor-title.tsx

@@ -0,0 +1,49 @@
+import React, {useState} from 'react';
+import {useTrans} from '@common/i18n/use-trans';
+import {useFormContext} from 'react-hook-form';
+import {FormTextField} from '@common/ui/forms/input-field/text-field/text-field';
+import clsx from 'clsx';
+import {EditIcon} from '@common/icons/material/Edit';
+import {CreateCustomPagePayload} from '@common/admin/custom-pages/requests/use-create-custom-page';
+
+export function ArticleEditorTitle() {
+  const [editingTitle, setEditingTitle] = useState(false);
+  const {trans} = useTrans();
+  const form = useFormContext<CreateCustomPagePayload>();
+  const watchedTitle = form.watch('title');
+
+  const titlePlaceholder = trans({message: 'Title'});
+
+  if (editingTitle) {
+    return (
+      <FormTextField
+        placeholder={titlePlaceholder}
+        autoFocus
+        className="mb-30"
+        onBlur={() => {
+          setEditingTitle(false);
+        }}
+        name="title"
+        required
+      />
+    );
+  }
+  return (
+    <h1
+      tabIndex={0}
+      onClick={() => {
+        setEditingTitle(true);
+      }}
+      onFocus={() => {
+        setEditingTitle(true);
+      }}
+      className={clsx(
+        'hover:bg-primary/focus rounded cursor-pointer',
+        !watchedTitle && 'text-muted'
+      )}
+    >
+      {watchedTitle || titlePlaceholder}
+      <EditIcon className="icon-sm mx-8 mt-8 align-top text-muted" />
+    </h1>
+  );
+}