first commit

common/resources/client/admin/custom-pages/create-custom-page.tsx

@@ -0,0 +1,58 @@
+import React, {Suspense} from 'react';
+import {FormProvider, useForm} from 'react-hook-form';
+import {FileUploadProvider} from '@common/uploads/uploader/file-upload-provider';
+import {ArticleEditorTitle} from '@common/article-editor/article-editor-title';
+import {ArticleEditorStickyHeader} from '@common/article-editor/article-editor-sticky-header';
+import {useNavigate} from '@common/utils/hooks/use-navigate';
+import {
+  CreateCustomPagePayload,
+  useCreateCustomPage,
+} from '@common/admin/custom-pages/requests/use-create-custom-page';
+import {FullPageLoader} from '@common/ui/progress/full-page-loader';
+
+const ArticleBodyEditor = React.lazy(
+  () => import('@common/article-editor/article-body-editor'),
+);
+
+export function CreateCustomPage() {
+  const navigate = useNavigate();
+  const createPage = useCreateCustomPage();
+  const form = useForm<CreateCustomPagePayload>();
+
+  const handleSave = (editorContent: string) => {
+    createPage.mutate(
+      {
+        ...form.getValues(),
+        body: editorContent,
+      },
+      {
+        onSuccess: () => navigate('../', {relative: 'path'}),
+      },
+    );
+  };
+
+  return (
+    <Suspense fallback={<FullPageLoader />}>
+      <ArticleBodyEditor>
+        {(content, editor) => (
+          <FileUploadProvider>
+            <FormProvider {...form}>
+              <ArticleEditorStickyHeader
+                editor={editor}
+                isLoading={createPage.isPending}
+                onSave={handleSave}
+                backLink="../"
+              />
+              <div className="mx-20">
+                <div className="prose dark:prose-invert mx-auto flex-auto">
+                  <ArticleEditorTitle />
+                  {content}
+                </div>
+              </div>
+            </FormProvider>
+          </FileUploadProvider>
+        )}
+      </ArticleBodyEditor>
+    </Suspense>
+  );
+}