add ckeditor with customization for inserting the courses in it (In-progress)

articles/validators.py

@@ -16,6 +16,9 @@
         "ul",
         "li",
         # Links
+        # blocks
+        "iframe",
+        "div",
         "a",
         # Images
         "figure",
@@ -33,7 +36,19 @@
     "attributes": {
         "a": {"href", "hreflang"},
         "img": {"alt", "height", "src", "width", "srcset", "sizes"},
-        "figure": {"class"},
+        "figure": {"class", "width", "style"},
+        "div": {"class", "style", "data-oembed-url"},
+        "h3": {"class"},
+        "iframe": {
+            "class",
+            "style",
+            "src",
+            "width",
+            "height",
+            "frameborder",
+            "allow",
+            "allowfullscreen",
+        },
         "oembed": {"url"},
     },
 }

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",
@@ -44,6 +45,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/ArticleDetailPage.tsx

@@ -0,0 +1,9 @@
+"use client"
+import React from "react"
+import { ArticleDetail } from "ol-ckeditor"
+
+const ArticleDetailPage: React.FC<{ articleId: number }> = ({ articleId }) => {
+  return <ArticleDetail articleId={articleId} />
+}
+
+export { ArticleDetailPage }

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

@@ -0,0 +1,9 @@
+"use client"
+import React from "react"
+import { CkeditorArticlesList } from "ol-ckeditor"
+
+const ArticlesListPage: React.FC = () => {
+  return <CkeditorArticlesList />
+}
+
+export { ArticlesListPage }

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

@@ -0,0 +1,9 @@
+"use client"
+import React from "react"
+import { CkeditorArticle } from "ol-ckeditor"
+
+const ArticlesPage: React.FC<{ articleId: number }> = ({ articleId }) => {
+  return <CkeditorArticle articleId={articleId} />
+}
+
+export { ArticlesPage }

frontends/main/src/app/articles/[id]/detail/page.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import { Metadata } from "next"
+import { standardizeMetadata } from "@/common/metadata"
+import { ArticleDetailPage } from "@/app-pages/Articles/ArticleDetailPage"
+
+export const metadata: Metadata = standardizeMetadata({
+  title: "Article Detail",
+})
+
+interface PageProps {
+  params: {
+    id: number
+  }
+}
+
+const Page: React.FC<PageProps> = ({ params }) => {
+  return <ArticleDetailPage articleId={params.id} />
+}
+
+export default Page

frontends/main/src/app/articles/[id]/edit/page.tsx

@@ -0,0 +1,20 @@
+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: "Article Detail",
+})
+
+interface PageProps {
+  params: {
+    id: number
+  }
+}
+
+const Page: React.FC<PageProps> = ({ params }) => {
+  return <ArticlesPage articleId={params.id} />
+}
+
+export default Page

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

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

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,22 @@
+{
+  "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",
+    "swiper": "^12.0.3"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  }
+}

frontends/ol-ckeditor/src/components/ArticleDetail.tsx

@@ -0,0 +1,86 @@
+"use client"
+
+import React, { useEffect, useState } from "react"
+import { useArticleDetail } from "api/hooks/articles"
+import "ckeditor5/ckeditor5.css"
+import "./styles.css"
+
+import { Swiper, SwiperSlide } from "swiper/react"
+import { Navigation, Pagination, Autoplay } from "swiper/modules"
+
+import "swiper/css"
+import "swiper/css/navigation"
+import "swiper/css/pagination"
+
+export const ArticleDetail = ({ articleId }: { articleId: number }) => {
+  const id = Number(articleId)
+  const { data, isLoading } = useArticleDetail(id)
+
+  const [cleanHtml, setCleanHtml] = useState("")
+  const [carouselItems, setCarouselItems] = useState<string[]>([])
+
+  useEffect(() => {
+    if (!data?.html) return
+
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(data.html, "text/html")
+
+    const cards = Array.from(doc.querySelectorAll(".carousel-course-card"))
+
+    // ✅ Add new class to each card before storing HTML
+    cards.forEach((el) => {
+      el.classList.add("carousel-slide-item")
+    })
+
+    setCarouselItems(cards.map((el) => el.outerHTML))
+    cards.forEach((el) => el.remove())
+
+    setCleanHtml(doc.body.innerHTML)
+  }, [data])
+
+  if (isLoading) return <div>Loading article...</div>
+  if (!data) return <div>Article not found.</div>
+
+  return (
+    <div className="article-detail-container">
+      <h1 className="article-title">{data.title}</h1>
+
+      {/* ✅ Swiper slider */}
+      {carouselItems.length > 0 && (
+        <div className="course-carousel-wrapper">
+          <Swiper
+            modules={[Navigation, Pagination, Autoplay]}
+            spaceBetween={16}
+            slidesPerView={1.2}
+            navigation
+            pagination={{ clickable: true }}
+            autoplay={{
+              delay: 2500,
+              disableOnInteraction: false,
+            }}
+            breakpoints={{
+              640: { slidesPerView: 2.2 },
+              1024: { slidesPerView: 3.2 },
+            }}
+          >
+            {carouselItems.map((item, idx) => (
+              <SwiperSlide key={idx}>
+                <div
+                  className="course-card-wrapper"
+                  dangerouslySetInnerHTML={{ __html: item }}
+                />
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        </div>
+      )}
+
+      <div
+        className="ck-content"
+        dangerouslySetInnerHTML={{ __html: cleanHtml }}
+      />
+    </div>
+  )
+}
+
+export default ArticleDetail