Implement Rich Editor UI in Admin via Astro (#4274)

Author: marcoacierno

.gitignore

@@ -137,3 +137,4 @@ backend/schema.graphql
 backend/__pypackages__/
 backend/custom_admin/.astro/
 backend/custom_admin/core.*
+core.*

backend/Dockerfile

@@ -75,6 +75,7 @@ RUN apt-get update -y && apt-get install -y curl
 RUN groupadd -r app && useradd -r -g app app && mkdir -p ${FUNCTION_DIR} && chown -R app:app ${FUNCTION_DIR}
 
 COPY --chown=app:app --from=js-stage ${FUNCTION_DIR}/dist/*.html ${FUNCTION_DIR}/custom_admin/templates/astro/
+COPY --chown=app:app --from=js-stage ${FUNCTION_DIR}/dist/widgets/*.html ${FUNCTION_DIR}/custom_admin/templates/astro/widgets/
 COPY --chown=app:app --from=js-stage ${FUNCTION_DIR}/dist/_astro ${FUNCTION_DIR}/custom_admin/static/_astro/
 COPY --chown=app:app --from=build-stage ${FUNCTION_DIR}/.venv ${FUNCTION_DIR}/.venv
 

backend/custom_admin/context_processors.py

@@ -3,10 +3,3 @@
 
 def admin_settings(request):
     return {"CURRENT_ENV": settings.ENVIRONMENT}
-
-
-def astro_settings(request):
-    return {
-        "ASTRO_URL": request.build_absolute_uri("/astro"),
-        "APOLLO_GRAPHQL_URL": "/admin/graphql",
-    }

backend/custom_admin/package.json

@@ -24,10 +24,16 @@
     "@radix-ui/react-toast": "^1.2.4",
     "@radix-ui/react-toolbar": "^1.1.1",
     "@radix-ui/themes": "^3.1.6",
+    "@tiptap/core": "^2.10.4",
     "@tiptap/extension-color": "^2.10.3",
+    "@tiptap/extension-focus": "^2.10.4",
+    "@tiptap/extension-heading": "^2.10.4",
+    "@tiptap/extension-link": "^2.10.4",
     "@tiptap/extension-list-item": "^2.10.3",
+    "@tiptap/extension-placeholder": "^2.10.4",
     "@tiptap/extension-text-align": "^2.10.3",
     "@tiptap/extension-text-style": "^2.10.3",
+    "@tiptap/extension-underline": "^2.10.4",
     "@tiptap/pm": "^2.10.3",
     "@tiptap/react": "^2.10.3",
     "@tiptap/starter-kit": "^2.10.3",

backend/custom_admin/pnpm-lock.yaml

@@ -10,7 +10,8 @@ import {
 } from "@radix-ui/themes";
 import { Box } from "@radix-ui/themes";
 import { MoveDown, MoveUp, Pencil, Trash } from "lucide-react";
-import { Editor } from "./editor";
+import { RichEditor } from "../shared/rich-editor";
+import { HideNode } from "../shared/rich-editor/menu-bar";
 import { useLocalData } from "./local-state";
 
 export const EditorSection = ({
@@ -50,7 +51,11 @@ export const EditorSection = ({
         {isPage && <RemovePage onRemove={onRemove} />}
       </Flex>
       <Box height="var(--space-3)" />
-      <Editor content={content} onUpdate={onUpdate} />
+      <RichEditor
+        hide={[HideNode.buttonNode, HideNode.link]}
+        content={content}
+        onUpdate={onUpdate}
+      />
     </Box>
   );
 };

backend/custom_admin/src/components/invitation-letter-document-builder/editor-section.tsx

@@ -4,7 +4,7 @@ import { useInvitationLetterDocumentSuspenseQuery } from "./invitation-letter-do
 import { useUpdateInvitationLetterDocumentMutation } from "./update-invitation-letter-document.generated";
 
 import { createContext } from "react";
-import { getArg } from "../shared/get-arg";
+import { useArgs } from "../shared/args";
 
 type State = {
   header: string;
@@ -173,7 +173,7 @@ const removeTypenames = (obj) => {
 };
 
 const useLoadRemoteData = (dispatch) => {
-  const documentId = getArg("document_id");
+  const { documentId } = useArgs();
 
   const { data } = useInvitationLetterDocumentSuspenseQuery({
     variables: {
@@ -199,13 +199,14 @@ const useLoadRemoteData = (dispatch) => {
 const useSaveRemoteData = (): [(newData) => void, boolean, boolean] => {
   const [updateInvitationLetter, { loading: savingChanges, error }] =
     useUpdateInvitationLetterDocumentMutation();
+  const { documentId } = useArgs();
 
   return [
     (newData) => {
       updateInvitationLetter({
         variables: {
           input: {
-            id: getArg("document_id"),
+            id: documentId,
             dynamicDocument: newData,
           },
         },

backend/custom_admin/src/components/invitation-letter-document-builder/local-state.tsx

@@ -5,9 +5,17 @@ import { DjangoAdminLayout } from "../shared/django-admin-layout";
 import { InvitationLetterBuilder } from "./builder";
 import { LocalStateProvider } from "./local-state";
 
-export const InvitationLetterDocumentBuilderRoot = () => {
+export const InvitationLetterDocumentBuilderRoot = ({
+  documentId,
+  breadcrumbs,
+}) => {
   return (
-    <Base>
+    <Base
+      args={{
+        documentId,
+        breadcrumbs,
+      }}
+    >
       <DjangoAdminLayout>
         <Suspense
           fallback={

backend/custom_admin/src/components/invitation-letter-document-builder/menu-bar.tsx

@@ -85,8 +85,7 @@ export const Placeholder = ({
       }}
     >
       {isMovingItemLoading && <span>Please wait</span>}
-      {!isMovingItemLoading && !canDrop && <span>Click to add</span>}
-      {!isMovingItemLoading && canDrop && <span>Drop here to move</span>}
+      {!isMovingItemLoading && <span>Drop / Add</span>}
       <PlusIcon />
     </div>
   );