Merge pull request #125 from commonknowledge/add-rich-text-editor-puc…

…k-cms

Add rich text editor puck cms

nextjs/package.json

@@ -86,6 +86,7 @@
     "react-hook-form": "^7.51.0",
     "react-loader-spinner": "^6.1.6",
     "react-map-gl": "^7.1.7",
+    "react-quill": "^2.0.0",
     "react-simple-code-editor": "^0.13.1",
     "slug": "^9.1.0",
     "sonner": "^1.4.3",

nextjs/src/data/puck/config/blocks/RichText/customRichTextStyles.css

@@ -0,0 +1,25 @@
+ul {
+    list-style-type: disc;
+    padding-left: 24px;
+}
+
+ol {
+    list-style-type: decimal;
+    padding-left: 24px;
+}
+
+a {
+    text-decoration: underline;
+}
+
+.size-small {
+    font-size: 16px;  
+}
+
+.size-medium {
+    font-size: 20px; 
+}
+
+.size-large {
+    font-size: 24px; 
+}

nextjs/src/data/puck/config/blocks/RichText/index.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { ComponentConfig } from "@measured/puck";
+import ReactQuill, { Quill } from 'react-quill';
+import 'react-quill/dist/quill.snow.css';
+import './customRichTextStyles.css';
+
+const Parchment = Quill.import('parchment');
+const SizeClass = new Parchment.Attributor.Class('size', 'size', {
+    scope: Parchment.Scope.INLINE,
+    whitelist: ['small', 'medium', 'large']
+});
+Quill.register(SizeClass, true);
+
+export type RichTextProps = {
+    content: string
+};
+
+const modules = {
+    toolbar: [
+        [{ 'size': ['small', 'medium', 'large' ] }], 
+        [ 'italic', 'underline', 'strike'],
+        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+        ['link'],
+        ['clean']
+    ],
+};
+
+const formats = [
+    'size', 'italic', 'underline', 'strike',
+    'list', 'bullet', 'link'
+];
+
+export const RichText: ComponentConfig<RichTextProps> = {
+    label: "RichText",
+    fields: {
+        content: {
+            type: "custom",
+            render: ({ onChange, value }) => (
+                <ReactQuill
+                    value={value}
+                    onChange={(e: string) => onChange(e)}
+                    modules={modules}
+                    formats={formats}
+                />
+            ),
+        }
+    },
+    render: ({ content }) => {
+        return (
+            <div className='max-w-prose'
+                dangerouslySetInnerHTML={{ __html: content }}
+            />
+        );
+    },
+};

nextjs/src/data/puck/config/index.tsx

@@ -1,5 +1,4 @@
 import { Config } from "@measured/puck";
-import { PuckRichText } from "@tohuhono/puck-rich-text"
 import Root, { RootProps } from "./root";
 import { ButtonGroup, ButtonGroupProps } from "./blocks/ButtonGroup";
 import { Card, CardProps } from "./blocks/Card";
@@ -21,6 +20,7 @@ import { Image, ImageProps } from "./blocks/Image";
 import { HomepageItemsAlias } from "./blocks/HomepageItemsAlias";
 import { About } from "./blocks/About";
 import { HTMLEmbed, HTMLEmbedProps } from "./blocks/HTMLEmbed";
+import { RichText, RichTextProps } from "./blocks/RichText";
 import { Iframe, IframeProps } from "./blocks/Iframe";
 
 export type Props = {
@@ -44,7 +44,8 @@ export type Props = {
   HomepageItemsAlias: any;
   About: any;
   HTMLEmbed: HTMLEmbedProps;
-  Iframe: IframeProps
+  Iframe: IframeProps;
+  RichText: RichTextProps
 };
 
 export type UserConfig = Config
@@ -99,7 +100,6 @@ export const conf: UserConfig = {
     },
     content: {
       components: [
-        "Text",
         "RichText",
         "HTMLEmbed",
         "Iframe",
@@ -121,7 +121,7 @@ export const conf: UserConfig = {
     EventList,
     Image,
     HomepageItemsAlias,
-    RichText: PuckRichText,
+    RichText,
     About,
     HTMLEmbed,
     Iframe