adding code for curd operation

Author: Ahtesham Quraish

articles/validators.py

@@ -16,6 +16,9 @@
         "ul",
         "li",
         # Links
+        # blocks
+        "iframe",
+        "div",
         "a",
         # Images
         "figure",
@@ -33,7 +36,10 @@
     "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/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

@@ -1,24 +1,9 @@
 "use client"
 import React from "react"
-import { CKEditorClient } from "ol-ckeditor"
-import { ckeditorApi } from "api/clients"
+import { CkeditorArticle } from "ol-ckeditor"
 
-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>
-  )
+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/ol-ckeditor/src/components/ArticleDetail.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import React from "react"
+import { useArticleDetail } from "api/hooks/articles"
+import "ckeditor5/ckeditor5.css"
+import "./styles.css"
+
+export const ArticleDetail = ({ articleId }: { articleId: number }) => {
+  const id = Number(articleId)
+  const { data, isLoading } = useArticleDetail(id)
+
+  if (isLoading) {
+    return (
+      <div className="article-detail-container">
+        <div className="loader">Loading article...</div>
+      </div>
+    )
+  }
+
+  if (!data) {
+    return (
+      <div className="article-detail-container">
+        <p className="empty">Article not found.</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="article-detail-container">
+      <h1 className="article-title">{data.title}</h1>
+
+      {/* Render article HTML */}
+      <div
+        className="ck-content"
+        dangerouslySetInnerHTML={{ __html: data.html }}
+      />
+    </div>
+  )
+}