From 7e5b9db802b27a7e8ca3d7523655c5418977f195 Mon Sep 17 00:00:00 2001
From: Niraj Nandish <nirajnandish@icloud.com>
Date: Fri, 9 Feb 2024 12:45:20 +0530
Subject: [PATCH 1/6] fix: menu bg colors (#433)

---
 apps/frontend/src/components/tiptap.jsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/components/tiptap.jsx b/apps/frontend/src/components/tiptap.jsx
index 13be8b0bd..ec164aa62 100644
--- a/apps/frontend/src/components/tiptap.jsx
+++ b/apps/frontend/src/components/tiptap.jsx
@@ -7,6 +7,7 @@ import {
   MenuList,
   Text,
   useColorMode,
+  useColorModeValue,
 } from "@chakra-ui/react";
 import {
   autoUpdate,
@@ -273,6 +274,7 @@ function ToolBar({ editor, user }) {
 }
 
 function BubbleMenuBar({ editor, isLinkHover }) {
+  const menuBgColor = useColorModeValue("white", "gray.700");
   const addLink = () => {
     const url = window.prompt("URL");
 
@@ -292,7 +294,7 @@ function BubbleMenuBar({ editor, isLinkHover }) {
         borderRadius="lg"
         overflowX="auto"
         id="bubble-menu"
-        background="white"
+        background={menuBgColor}
       >
         <Button
           variant="ghost"
@@ -337,6 +339,8 @@ function HoverMenuBar({
   linkEl,
   setLinkEl,
 }) {
+  const menuBgColor = useColorModeValue("white", "gray.700");
+
   return (
     <Box
       p="0.2rem"
@@ -344,7 +348,7 @@ function HoverMenuBar({
       borderRadius="lg"
       overflowX="auto"
       id="bubble-menu"
-      background="white"
+      background={menuBgColor}
       width="fit-content"
       visibility={
         floatingMiddleware.hide?.referenceHidden ? "hidden" : "visible"

From 795992fddbf6fa9e935b233b7326a041a43a873a Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Fri, 9 Feb 2024 08:24:19 +0100
Subject: [PATCH 2/6] chore(deps): update dependency @faker-js/faker to v8.4.1
 (#428)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 package-lock.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d1c8cdb6a..12510441f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,7 +38,7 @@
         "styled-components": "5.3.11"
       },
       "devDependencies": {
-        "@faker-js/faker": "^8.2.0",
+        "@faker-js/faker": "^8.4.1",
         "better-sqlite3": "8.7.0",
         "eslint": "^8.49.0",
         "eslint-config-prettier": "^9.0.0",
@@ -2634,9 +2634,9 @@
       }
     },
     "node_modules/@faker-js/faker": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@faker-js/faker/-/faker-8.3.1.tgz",
-      "integrity": "sha512-FdgpFxY6V6rLZE9mmIBb9hM0xpfvQOSNOLnzolzKwsE1DH+gC7lEKV1p1IbR0lAYyvYd5a4u3qWJzowUkw1bIw==",
+      "version": "8.4.1",
+      "resolved": "https://registry.npmjs.org/@faker-js/faker/-/faker-8.4.1.tgz",
+      "integrity": "sha512-XQ3cU+Q8Uqmrbf2e0cIC/QN43sTBSC8KF12u29Mb47tWrt2hAgBXSgpZMj4Ao8Uk0iJcU99QsOCaIL8934obCg==",
       "dev": true,
       "funding": [
         {

From 977ab27e4840ceaae3af909c244c9cc2de7fe9eb Mon Sep 17 00:00:00 2001
From: Sem Bauke <semboot699@gmail.com>
Date: Sat, 10 Feb 2024 17:27:27 +0100
Subject: [PATCH 3/6] feat: add ids on heading (#423)

Co-authored-by: yoko <25644062+sidemt@users.noreply.github.com>
---
 .../tip-tap-extensions/heading-extension.jsx  | 53 +++++++++++++++++++
 apps/frontend/src/lib/editor-config.js        |  3 ++
 2 files changed, 56 insertions(+)
 create mode 100644 apps/frontend/src/components/tip-tap-extensions/heading-extension.jsx

diff --git a/apps/frontend/src/components/tip-tap-extensions/heading-extension.jsx b/apps/frontend/src/components/tip-tap-extensions/heading-extension.jsx
new file mode 100644
index 000000000..82ef858ed
--- /dev/null
+++ b/apps/frontend/src/components/tip-tap-extensions/heading-extension.jsx
@@ -0,0 +1,53 @@
+import BaseHeading from "@tiptap/extension-heading";
+import slugify from "slugify";
+
+export const Heading = BaseHeading.configure({
+  levels: [1, 2, 3, 4, 5, 6],
+}).extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      id: {
+        default: null,
+        parseHTML: (element) => ({
+          id: slugify(element.textContent, {
+            lower: true,
+          }),
+        }),
+        renderHTML: (attributes) => ({
+          id: attributes.id,
+        }),
+      },
+    };
+  },
+
+  onSelectionUpdate({ editor }) {
+    const { $from } = editor.state.selection;
+
+    // This line gets the node at the depth of
+    // the start of the selection. If the selection
+    // starts in a heading, this will be the heading node.
+
+    const node = $from.node($from.depth);
+
+    if (node.type.name === "heading") {
+      editor.commands.updateAttributes("heading", {
+        id: slugify(node.textContent, {
+          lower: true,
+        }),
+      });
+    }
+  },
+
+  renderHTML({ node }) {
+    return [
+      "h" + node.attrs.level,
+      {
+        id: slugify(node.textContent, {
+          lower: true,
+        }),
+      },
+      0,
+    ];
+  },
+});
diff --git a/apps/frontend/src/lib/editor-config.js b/apps/frontend/src/lib/editor-config.js
index f44b89b72..538d93d6b 100644
--- a/apps/frontend/src/lib/editor-config.js
+++ b/apps/frontend/src/lib/editor-config.js
@@ -7,6 +7,7 @@ import CharacterCount from "@tiptap/extension-character-count";
 import Image from "@tiptap/extension-image";
 import Placeholder from "@tiptap/extension-placeholder";
 import Link from "@tiptap/extension-link";
+import { Heading } from "@/components/tip-tap-extensions/heading-extension";
 
 export const extensions = [
   StarterKit.configure({
@@ -18,6 +19,7 @@ export const extensions = [
       keepMarks: true,
       keepAttributes: false,
     },
+    heading: false,
     codeBlock: false,
   }),
   Placeholder.configure({
@@ -47,4 +49,5 @@ export const extensions = [
     lowlight,
   }),
   CharacterCount.configure({}),
+  Heading,
 ];

From cb366aa023f5333f370d46bae37d6ac2c7a24b56 Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Sat, 10 Feb 2024 19:14:56 +0100
Subject: [PATCH 4/6] chore: prettier on stage for all apps (#431)

Co-authored-by: yoko <25644062+sidemt@users.noreply.github.com>
---
 apps/backend/.lintstagedrc  | 3 ++-
 apps/frontend/.lintstagedrc | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/backend/.lintstagedrc b/apps/backend/.lintstagedrc
index 374aa6e2c..1be163e7d 100644
--- a/apps/backend/.lintstagedrc
+++ b/apps/backend/.lintstagedrc
@@ -1,3 +1,4 @@
 {
-  "**/*.{js,jsx,ts,tsx}": "eslint"
+  "**/*.{js,jsx,ts,tsx}": "eslint",
+  "*": "prettier --ignore-unknown --write"
 }
diff --git a/apps/frontend/.lintstagedrc b/apps/frontend/.lintstagedrc
index 374aa6e2c..1be163e7d 100644
--- a/apps/frontend/.lintstagedrc
+++ b/apps/frontend/.lintstagedrc
@@ -1,3 +1,4 @@
 {
-  "**/*.{js,jsx,ts,tsx}": "eslint"
+  "**/*.{js,jsx,ts,tsx}": "eslint",
+  "*": "prettier --ignore-unknown --write"
 }

From 06cdc3ee32f7cc00563778ee19f706936d1db366 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Sun, 11 Feb 2024 18:46:42 +0530
Subject: [PATCH 5/6] chore(deps): update dependency @playwright/test to
 v1.41.2 (#374)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 package-lock.json | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 12510441f..447f158ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,7 +38,7 @@
         "styled-components": "5.3.11"
       },
       "devDependencies": {
-        "@faker-js/faker": "^8.4.1",
+        "@faker-js/faker": "^8.2.0",
         "better-sqlite3": "8.7.0",
         "eslint": "^8.49.0",
         "eslint-config-prettier": "^9.0.0",
@@ -3864,12 +3864,12 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/@playwright/test": {
-      "version": "1.39.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.39.0.tgz",
-      "integrity": "sha512-3u1iFqgzl7zr004bGPYiN/5EZpRUSFddQBra8Rqll5N0/vfpqlP9I9EXqAoGacuAbX6c9Ulg/Cjqglp5VkK6UQ==",
+      "version": "1.41.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.41.2.tgz",
+      "integrity": "sha512-qQB9h7KbibJzrDpkXkYvsmiDJK14FULCCZgEcoe2AvFAS64oCirWTwzTlAYEbKaRxWs5TFesE1Na6izMv3HfGg==",
       "dev": true,
       "dependencies": {
-        "playwright": "1.39.0"
+        "playwright": "1.41.2"
       },
       "bin": {
         "playwright": "cli.js"
@@ -20310,12 +20310,12 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.39.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.39.0.tgz",
-      "integrity": "sha512-naE5QT11uC/Oiq0BwZ50gDmy8c8WLPRTEWuSSFVG2egBka/1qMoSqYQcROMT9zLwJ86oPofcTH2jBY/5wWOgIw==",
+      "version": "1.41.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.41.2.tgz",
+      "integrity": "sha512-v0bOa6H2GJChDL8pAeLa/LZC4feoAMbSQm1/jF/ySsWWoaNItvrMP7GEkvEEFyCTUYKMxjQKaTSg5up7nR6/8A==",
       "dev": true,
       "dependencies": {
-        "playwright-core": "1.39.0"
+        "playwright-core": "1.41.2"
       },
       "bin": {
         "playwright": "cli.js"
@@ -20328,9 +20328,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.39.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.39.0.tgz",
-      "integrity": "sha512-+k4pdZgs1qiM+OUkSjx96YiKsXsmb59evFoqv8SKO067qBA+Z2s/dCzJij/ZhdQcs2zlTAgRKfeiiLm8PQ2qvw==",
+      "version": "1.41.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.41.2.tgz",
+      "integrity": "sha512-VaTvwCA4Y8kxEe+kfm2+uUUw5Lubf38RxF7FpBxLPmGe5sdNkSg5e3ChEigaGrX7qdqT3pt2m/98LiyvU2x6CA==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"

From 511ccad8089ec9f360ae1d179469427ebb0464bc Mon Sep 17 00:00:00 2001
From: Niraj Nandish <nirajnandish@icloud.com>
Date: Sun, 11 Feb 2024 20:54:19 +0530
Subject: [PATCH 6/6] feat: auto save post (#432)

Co-authored-by: yoko <25644062+sidemt@users.noreply.github.com>
---
 apps/frontend/package.json                    |  1 +
 apps/frontend/src/components/post-form.jsx    | 97 ++++++++++++++++---
 .../frontend/src/components/schedule-menu.jsx |  8 +-
 package-lock.json                             | 12 +++
 4 files changed, 104 insertions(+), 14 deletions(-)

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 0c96f4831..f529819b1 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -47,6 +47,7 @@
     "react-infinite-scroll-component": "^6.1.0",
     "slugify": "^1.6.6",
     "tiptap-markdown": "^0.8.2",
+    "use-debounce": "^10.0.0",
     "uuid": "^9.0.1",
     "yup": "^1.3.2"
   },
diff --git a/apps/frontend/src/components/post-form.jsx b/apps/frontend/src/components/post-form.jsx
index 4ff438343..65adad07e 100644
--- a/apps/frontend/src/components/post-form.jsx
+++ b/apps/frontend/src/components/post-form.jsx
@@ -2,7 +2,12 @@ import { useCallback, useEffect, useState } from "react";
 import Tiptap from "@/components/tiptap";
 import EditorDrawer from "@/components/editor-drawer";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronLeft, faEdit } from "@fortawesome/free-solid-svg-icons";
+import {
+  faChevronLeft,
+  faCircleCheck,
+  faCircleXmark,
+  faEdit,
+} from "@fortawesome/free-solid-svg-icons";
 import { v4 as uuidv4 } from "uuid";
 import slugify from "slugify";
 import {
@@ -14,6 +19,9 @@ import {
   Stack,
   FormControl,
   FormErrorMessage,
+  Divider,
+  chakra,
+  Spinner,
 } from "@chakra-ui/react";
 import { Field, Form, Formik } from "formik";
 import { updatePost } from "@/lib/posts";
@@ -22,6 +30,9 @@ import NextLink from "next/link";
 import { useRouter } from "next/router";
 import { isEditor } from "@/lib/current-user";
 import ScheduleMenu from "./schedule-menu";
+import { useDebouncedCallback } from "use-debounce";
+
+const Icon = chakra(FontAwesomeIcon);
 
 const PostForm = ({ tags, user, authors, post }) => {
   const toast = useToast();
@@ -43,6 +54,16 @@ const PostForm = ({ tags, user, authors, post }) => {
 
   const [featureImage, setFeatureImageUrl] = useState();
   const [featureImageId, setFeatureImageId] = useState();
+  const [saveStatus, setSaveStatus] = useState(null);
+  const [postStatus, setPostStatus] = useState(null);
+
+  const debouncedContentSave = useDebouncedCallback(
+    () => {
+      handleSubmit({ isAutoSave: true });
+    },
+    3000,
+    { maxWait: 5000 },
+  );
 
   useEffect(() => {
     if (post) {
@@ -63,6 +84,14 @@ const PostForm = ({ tags, user, authors, post }) => {
         );
         setFeatureImageId(feature_image.data.id);
       }
+
+      if (post.attributes.publishedAt != null) {
+        setPostStatus("published");
+      } else if (post.attributes.scheduled_at != null) {
+        setPostStatus("scheduled");
+      } else {
+        setPostStatus("draft");
+      }
     }
   }, [post]);
 
@@ -97,7 +126,13 @@ const PostForm = ({ tags, user, authors, post }) => {
   };
 
   const handleSubmit = useCallback(
-    async (shouldPublish = null, scheduledDate = "", scheduledTime = "") => {
+    async ({
+      shouldPublish = null,
+      scheduledDate = "",
+      scheduledTime = "",
+      isAutoSave = false,
+    } = {}) => {
+      setSaveStatus("saving");
       const nonce = uuidv4();
       const token = user.jwt;
 
@@ -146,27 +181,34 @@ const PostForm = ({ tags, user, authors, post }) => {
       if (shouldPublish === "unpublished") {
         data.data.publishedAt = null;
         data.data.scheduled_at = null;
+        setPostStatus("draft");
       }
 
       if (shouldPublish === "later") {
         data.data.scheduled_at = handleSchedule();
+        setPostStatus("scheduled");
       }
 
       if (shouldPublish == "now") {
         data.data.publishedAt = new Date().toISOString();
         data.data.scheduled_at = null;
+        setPostStatus("published");
       }
       try {
         await updatePost(postId, data, token);
-        toast({
-          title: getTitle(),
-          description: `The post ${
-            shouldPublish != null ? "status" : ""
-          } has been updated.`,
-          status: "success",
-          duration: 5000,
-          isClosable: true,
-        });
+        if (!isAutoSave) {
+          toast({
+            title: getTitle(),
+            description: `The post ${
+              shouldPublish != null ? "status" : ""
+            } has been updated.`,
+            status: "success",
+            duration: 5000,
+            isClosable: true,
+          });
+        }
+        debouncedContentSave.cancel();
+        setSaveStatus("saved");
         setUnsavedChanges(false);
       } catch (error) {
         toast({
@@ -176,6 +218,7 @@ const PostForm = ({ tags, user, authors, post }) => {
           duration: 5000,
           isClosable: true,
         });
+        setSaveStatus("error");
       }
     },
     [
@@ -188,6 +231,7 @@ const PostForm = ({ tags, user, authors, post }) => {
       author,
       postId,
       user,
+      debouncedContentSave,
     ],
   );
 
@@ -239,6 +283,10 @@ const PostForm = ({ tags, user, authors, post }) => {
 
   function handleContentChange(content) {
     setContent(content);
+    if (postStatus === "draft") {
+      // Enable auto save only for drafts
+      debouncedContentSave(content);
+    }
 
     if (!unsavedChanges) {
       setUnsavedChanges(true);
@@ -265,7 +313,32 @@ const PostForm = ({ tags, user, authors, post }) => {
               <Text fontSize="2xl">Posts</Text>
             </Button>
           </Box>
-          <Box ml="auto" display={"flex"}>
+          <Box ml="auto" display="flex" alignItems="center">
+            {saveStatus !== null && (
+              <>
+                <Flex alignItems="center">
+                  {saveStatus === "saved" && (
+                    <>
+                      <Icon mr={3} icon={faCircleCheck} />
+                      <Text fontSize="lg">Saved</Text>
+                    </>
+                  )}
+                  {saveStatus === "saving" && (
+                    <>
+                      <Spinner mr={3} size="sm" />
+                      <Text fontSize="lg">Saving...</Text>
+                    </>
+                  )}
+                  {saveStatus === "error" && (
+                    <>
+                      <Icon mr={3} icon={faCircleXmark} />
+                      <Text fontSize="lg">Error</Text>
+                    </>
+                  )}
+                </Flex>
+                <Divider orientation="vertical" mx="1rem" />
+              </>
+            )}
             {isEditor(user) && (
               <ScheduleMenu handleSubmit={handleSubmit} post={post} />
             )}
diff --git a/apps/frontend/src/components/schedule-menu.jsx b/apps/frontend/src/components/schedule-menu.jsx
index 62d72d081..0d4dfb4ad 100644
--- a/apps/frontend/src/components/schedule-menu.jsx
+++ b/apps/frontend/src/components/schedule-menu.jsx
@@ -165,7 +165,7 @@ const PublishedMenu = ({
               setScheduleOption("now");
             }
 
-            handleSubmit(scheduleOption);
+            handleSubmit({ shouldPublish: scheduleOption });
             onClose();
           }}
           mr="1rem"
@@ -283,7 +283,11 @@ const NotPublishedMenu = ({
               setScheduleOption("now");
             }
 
-            handleSubmit(scheduleOption, scheduledDate, scheduledTime);
+            handleSubmit({
+              shouldPublish: scheduleOption,
+              scheduledDate,
+              scheduledTime,
+            });
             onClose();
           }}
           isDisabled={
diff --git a/package-lock.json b/package-lock.json
index 447f158ed..c244c1b8a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -103,6 +103,7 @@
         "react-infinite-scroll-component": "^6.1.0",
         "slugify": "^1.6.6",
         "tiptap-markdown": "^0.8.2",
+        "use-debounce": "^10.0.0",
         "uuid": "^9.0.1",
         "yup": "^1.3.2"
       },
@@ -25089,6 +25090,17 @@
       "version": "2.6.2",
       "license": "0BSD"
     },
+    "node_modules/use-debounce": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.0.tgz",
+      "integrity": "sha512-XRjvlvCB46bah9IBXVnq/ACP2lxqXyZj0D9hj4K5OzNroMDpTEBg8Anuh1/UfRTRs7pLhQ+RiNxxwZu9+MVl1A==",
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/use-isomorphic-layout-effect": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",