cms editor not yet ready

package.json

@@ -18,18 +18,48 @@
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.12",
     "@tailwindcss/vite": "^4.1.6",
-    "@tiptap/pm": "^3.1.0",
+    "@tiptap/extension-blockquote": "^3.1.0",
+    "@tiptap/extension-bold": "^3.1.0",
+    "@tiptap/extension-code": "^3.1.0",
+    "@tiptap/extension-code-block": "^3.1.0",
+    "@tiptap/extension-color": "^3.1.0",
+    "@tiptap/extension-document": "^3.1.0",
+    "@tiptap/extension-emoji": "^3.1.0",
+    "@tiptap/extension-file-handler": "^3.1.0",
+    "@tiptap/extension-hard-break": "^3.1.0",
+    "@tiptap/extension-heading": "^3.1.0",
+    "@tiptap/extension-highlight": "^3.1.0",
+    "@tiptap/extension-image": "^3.1.0",
+    "@tiptap/extension-italic": "^3.1.0",
+    "@tiptap/extension-link": "^3.1.0",
+    "@tiptap/extension-list": "^3.1.0",
+    "@tiptap/extension-paragraph": "^3.1.0",
+    "@tiptap/extension-placeholder": "^3.1.0",
+    "@tiptap/extension-strike": "^3.1.0",
+    "@tiptap/extension-table": "^3.1.0",
+    "@tiptap/extension-table-cell": "^3.1.0",
+    "@tiptap/extension-table-header": "^3.1.0",
+    "@tiptap/extension-table-row": "^3.1.0",
+    "@tiptap/extension-task-item": "^3.1.0",
+    "@tiptap/extension-task-list": "^3.1.0",
+    "@tiptap/extension-text": "^3.1.0",
+    "@tiptap/extension-text-align": "^3.1.0",
+    "@tiptap/extension-text-style": "^3.1.0",
+    "@tiptap/extension-underline": "^3.1.0",
+    "@tiptap/extension-youtube": "^3.1.0",
+    "@tiptap/extensions": "^3.1.0",
     "@tiptap/react": "^3.1.0",
-    "@tiptap/starter-kit": "^3.1.0",
     "axios": "^1.11.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dotenv": "^17.2.1",
+    "emoji-picker-react": "^4.13.2",
     "input-otp": "^1.4.2",
     "lodash.throttle": "^4.1.1",
     "lucide-react": "^0.510.0",
@@ -43,7 +73,8 @@
     "recoil": "^0.7.7",
     "sonner": "^2.0.6",
     "tailwind-merge": "^3.3.0",
-    "tailwindcss": "^4.1.6"
+    "tailwindcss": "^4.1.6",
+    "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",

src/components/dash-navbar.tsx

@@ -7,7 +7,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { ModeToggle } from "./mode-toggle";
-import { useAdminData } from "@/store/hooks/useAdminData";
+import { useAdminData } from "@/store/hooks/users/useAdminData";
 import { Skeleton } from "./ui/skeleton";
 import { Link } from "react-router-dom";
 

src/components/dashboard-banner.tsx

@@ -0,0 +1,25 @@
+import type { DashboardBannerData } from "@/types";
+
+const DashboardBanner = ({
+  bannerTitle,
+  bannerDescription,
+  bannerButton,
+  date,
+}: DashboardBannerData) => {
+  return (
+    <div className="bg-special rounded-lg p-4 lg:p-6">
+      <div className="flex flex-col md:flex-row justify-between gap-3">
+        <div>
+          <h1 className="text-xl lg:text-2xl font-semibold dark:text-secondary">
+            {bannerTitle}
+          </h1>
+          <p className="dark:text-secondary/70">{bannerDescription}</p>
+          <p className="text-sm text-muted-foreground mt-1">{date}</p>
+        </div>
+        {bannerButton}
+      </div>
+    </div>
+  );
+};
+
+export default DashboardBanner;

src/components/dashboard-status-card.tsx

@@ -0,0 +1,28 @@
+import { Card, CardContent } from "@/components/ui/card";
+import type { DashboardStatusCard } from "@/types";
+
+const DasshboardStatusCard = ({
+  statusIcon,
+  iconColor,
+  statusNumber,
+  ststasDescription,
+  classname,
+}: DashboardStatusCard) => {
+  return (
+    <Card className={classname}>
+      <CardContent className="p-4">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
+            <div className={`w-4 h-4 ${iconColor} rounded`}>{statusIcon}</div>
+          </div>
+          <div>
+            <p className="text-2xl font-semibold">{statusNumber}</p>
+            <p className="text-sm text-muted-foreground">{ststasDescription}</p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default DasshboardStatusCard;

src/components/dashboard-welcome.tsx

@@ -1,4 +1,4 @@
-import { useAdminData } from "@/store/hooks/useAdminData";
+import { useAdminData } from "@/store/hooks/users/useAdminData";
 import { AlertCircle, Verified } from "lucide-react";
 
 import { Link } from "react-router-dom";

src/components/editor/constant/index.ts

@@ -0,0 +1,221 @@
+/** Default lang */
+export const DEFAULT_LANG_VALUE = "en";
+
+/** Throttle time for editor input (milliseconds) */
+export const EDITOR_UPDATE_THROTTLE_WAIT_TIME = 200;
+
+/**
+ * watch throttling time must be less than the update time
+ * otherwise the cursor position will reach the end
+ */
+export const EDITOR_UPDATE_WATCH_THROTTLE_WAIT_TIME =
+  EDITOR_UPDATE_THROTTLE_WAIT_TIME - 80;
+
+/** Minimum size for image adjustments */
+export const IMAGE_MIN_SIZE = 20;
+/** Maximum size for image adjustments */
+export const IMAGE_MAX_SIZE = 100_000;
+/** Throttle time during adjustments for images (milliseconds) */
+export const IMAGE_THROTTLE_WAIT_TIME = 16;
+
+/** Default number of rows and columns for grids when creating a table */
+export const TABLE_INIT_GRID_SIZE = 10;
+/** Maximum number of rows and columns for grids when creating a table */
+export const TABLE_MAX_GRID_SIZE = 10;
+/** Minimum number of rows and columns for grids when creating a table */
+export const TABLE_DEFAULT_SELECTED_GRID_SIZE = 2;
+
+export const DEFAULT_COLOR = "#262626";
+/** Default color list for text color and text highlight */
+export const COLORS_LIST = [
+  "#000000",
+  "#262626",
+  "#595959",
+  "#8C8C8C",
+  "#BFBFBF",
+  "#D9D9D9",
+  "#E9E9E9",
+  "#F5F5F5",
+  "#FAFAFA",
+  "#FFFFFF",
+  "#F5222D",
+  "#FA541C",
+  "#FA8C16",
+  "#FADB14",
+  "#52C41A",
+  "#13C2C2",
+  "#1890FF",
+  "#2F54EB",
+  "#722ED1",
+  "#EB2F96",
+  "#FFE8E6",
+  "#FFECE0",
+  "#FFEFD1",
+  "#FCFCCA",
+  "#E4F7D2",
+  "#D3F5F0",
+  "#D4EEFC",
+  "#DEE8FC",
+  "#EFE1FA",
+  "#FAE1EB",
+  "#FFA39E",
+  "#FFBB96",
+  "#FFD591",
+  "#FFFB8F",
+  "#B7EB8F",
+  "#87E8DE",
+  "#91D5FF",
+  "#ADC6FF",
+  "#D3ADF7",
+  "#FFADD2",
+  "#FF4D4F",
+  "#FF7A45",
+  "#FFA940",
+  "#FFEC3D",
+  "#73D13D",
+  "#36CFC9",
+  "#40A9FF",
+  "#597EF7",
+  "#9254DE",
+  "#F759AB",
+  "#CF1322",
+  "#D4380D",
+  "#D46B08",
+  "#D4B106",
+  "#389E0D",
+  "#08979C",
+  "#096DD9",
+  "#1D39C4",
+  "#531DAB",
+  "#C41D7F",
+  "#820014",
+  "#871400",
+  "#873800",
+  "#614700",
+  "#135200",
+  "#00474F",
+  "#003A8C",
+  "#061178",
+  "#22075E",
+  "#780650",
+] as const;
+
+/** Default font family list */
+export const DEFAULT_FONT_FAMILY_LIST = [
+  "Inter",
+  "Comic Sans MS, Comic Sans",
+  "serif",
+  "cursive",
+  "Arial",
+  "Arial Black",
+  "Georgia",
+  "Impact",
+  "Tahoma",
+  "Times New Roman",
+  "Verdana",
+  "Courier New",
+  "Lucida Console",
+  "Monaco",
+  "monospace",
+];
+
+/** Default font size list */
+export const DEFAULT_FONT_SIZE_LIST = [
+  "10px",
+  "11px",
+  "12px",
+  "14px",
+  "16px",
+  "18px",
+  "20px",
+  "22px",
+  "24px",
+  "26px",
+  "28px",
+  "36px",
+  "48px",
+  "72px",
+] as const;
+
+/** Default font size value */
+export const DEFAULT_FONT_SIZE_VALUE = "default";
+
+/** Options for setting image size in the bubble menu */
+export enum IMAGE_SIZE {
+  "size-small" = 200,
+  "size-medium" = 500,
+  "size-large" = "100%",
+}
+
+/** Options for setting video size in the bubble menu */
+export enum VIDEO_SIZE {
+  "size-small" = 480,
+  "size-medium" = 640,
+  "size-large" = "100%",
+}
+
+/** Line Height List */
+export const DEFAULT_LINE_HEIGHT_LIST = [
+  "100%",
+  "115%",
+  "150%",
+  "200%",
+  "250%",
+  "300%",
+];
+export const LINE_HEIGHT_100 = 1.7;
+export const DEFAULT_LINE_HEIGHT = "1";
+
+/** display in menus */
+export const NODE_TYPE_MENU: any = {
+  image: [
+    "divider",
+    "image-size-small",
+    "image-size-medium",
+    "image-size-large",
+    "divider",
+    "image-left",
+    "image-center",
+    "image-right",
+    "divider",
+    "image-aspect-ratio",
+    "remove",
+  ],
+  text: [
+    "divider",
+    "text-bubble",
+    "divider",
+    "bold",
+    "italic",
+    "underline",
+    "strike",
+    "code",
+    "link",
+    "divider",
+    "color",
+    "highlight",
+    "textAlign",
+  ],
+  video: [
+    "video-size-small",
+    "video-size-medium",
+    "video-size-large",
+    "divider",
+    "remove",
+  ],
+  table: ["removeTable"],
+};
+
+/** display in bubble text menu */
+export const BUBBLE_TEXT_LIST = [
+  "bold",
+  "italic",
+  "underline",
+  "strike",
+  "code",
+  "link",
+  "divider",
+  "color",
+  "highlight",
+  "textAlign",
+];