add ckeditor with customization for insering the course in it

Author: Ahtesham Quraish

frontends/api/src/clients.ts

@@ -21,6 +21,7 @@ import {
   ProfilesApi,
   TestimonialsApi,
   LearningResourcesSearchAdminParamsApi,
+  CkeditorApi,
 } from "./generated/v0/api"
 
 import axiosInstance from "./axios"
@@ -50,6 +51,7 @@ const learningResourcesSearchApi = new LearningResourcesSearchApi(
 const learningResourcesSearchAdminParamsApi =
   new LearningResourcesSearchAdminParamsApi(undefined, BASE_PATH, axiosInstance)
 
+const ckeditorApi = new CkeditorApi(undefined, BASE_PATH, axiosInstance)
 const featuredApi = new FeaturedApi(undefined, BASE_PATH, axiosInstance)
 
 const learningPathsApi = new LearningpathsApi(
@@ -113,4 +115,5 @@ export {
   featuredApi,
   testimonialsApi,
   learningResourcesSearchAdminParamsApi,
+  ckeditorApi,
 }

frontends/api/src/hooks/ckeditor/index.ts

@@ -0,0 +1,14 @@
+import { useQuery } from "@tanstack/react-query"
+import { ckeditorApi } from "../../clients"
+
+const useCkeditorParams = (enabled: boolean) =>
+  useQuery({
+    queryKey: ["ckeditorParams"],
+    queryFn: async () => {
+      const response = await ckeditorApi.ckeditorRetrieve()
+      return response.data
+    },
+    enabled: enabled,
+  })
+
+export { useCkeditorParams }

frontends/main/package.json

@@ -31,6 +31,7 @@
     "moment": "^2.30.1",
     "next": "^15.5.2",
     "next-nprogress-bar": "^2.4.2",
+    "ol-ckeditor": "0.0.0",
     "ol-components": "0.0.0",
     "ol-utilities": "0.0.0",
     "posthog-js": "^1.157.2",
@@ -43,6 +44,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^10.0.0",
+    "@next/swc-darwin-arm64": "15.5.3",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.5.2",

frontends/main/src/app-pages/Articles/ArticlesPage.tsx

@@ -0,0 +1,24 @@
+"use client"
+import React from "react"
+import { CKEditorClient } from "ol-ckeditor"
+import { ckeditorApi } from "api/clients"
+
+const ArticlesPage: React.FC = () => {
+  const getCKEditorTokenFetchUrl = async () => {
+    const response = await ckeditorApi.ckeditorRetrieve()
+    return response.data.token
+  }
+
+  return (
+    <div>
+      <CKEditorClient
+        value={""}
+        getCKEditorTokenFetchUrl={getCKEditorTokenFetchUrl}
+        uploadUrl={process.env.NEXT_PUBLIC_CKEDITOR_UPLOAD_URL || ""}
+        onChange={() => {}}
+      />
+    </div>
+  )
+}
+
+export { ArticlesPage }

frontends/main/src/app/articles/page.tsx

@@ -0,0 +1,14 @@
+import React from "react"
+import { Metadata } from "next"
+import { standardizeMetadata } from "@/common/metadata"
+import { ArticlesPage } from "@/app-pages/Articles/ArticlesPage"
+
+export const metadata: Metadata = standardizeMetadata({
+  title: "Articles",
+})
+
+const Page: React.FC<PageProps<"/articles">> = () => {
+  return <ArticlesPage />
+}
+
+export default Page

frontends/ol-ckeditor/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "ol-ckeditor",
+  "version": "0.0.0",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@ckeditor/ckeditor5-react": "^6.3.0",
+    "api": "workspace:*",
+    "ckeditor5": "^42.0.0",
+    "next": "^15.5.2",
+    "ol-components": "0.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  }
+}