fix editor, allow video embeds, fix some form styles

src/components/forms/CourseForm.js

@@ -12,18 +12,8 @@ const CourseForm = () => {
     const [checked, setChecked] = useState(false);
     const [price, setPrice] = useState(0);
     const [text, setText] = useState('');
-    const [resources, setResources] = useState(['']); // Start with one empty resource
-
-    const addResource = () => {
-        setResources([...resources, '']); // Add another empty resource
-    };
-
-    const handleResourceChange = (value, index) => {
-        const updatedResources = resources.map((resource, i) => 
-            i === index ? value : resource
-        );
-        setResources(updatedResources);
-    };
+    const [resources, setResources] = useState(['']);
+    const [topics, setTopics] = useState(['']);
 
     const handleSubmit = (e) => {
         e.preventDefault();
@@ -33,11 +23,40 @@ const CourseForm = () => {
             isPaidResource: checked,
             price: checked ? price : null,
             content: text,
-            resources // Add the resources to the payload
+            topics: topics.map(topic => topic.trim().toLowerCase()),
+            resources: resources.map(resource => resource.trim())
         };
         console.log(payload);
     }
 
+    const addResource = () => {
+        setResources([...resources, '']); // Add an empty string to the resources array
+    };
+
+    const removeResource = (index) => {
+        const updatedResources = resources.filter((_, i) => i !== index);
+        setResources(updatedResources);
+    };
+
+    const handleResourceChange = (value, index) => {
+        const updatedResources = resources.map((resource, i) => i === index ? value : resource);
+        setResources(updatedResources);
+    };
+
+    const handleTopicChange = (index, value) => {
+        const updatedTopics = topics.map((topic, i) => i === index ? value : topic);
+        setTopics(updatedTopics);
+    };
+
+    const addTopic = () => {
+        setTopics([...topics, '']); // Add an empty string to the topics array
+    };
+
+    const removeTopic = (index) => {
+        const updatedTopics = topics.filter((_, i) => i !== index);
+        setTopics(updatedTopics);
+    };
+
     return (
         <form onSubmit={handleSubmit}>
             <div className="p-inputgroup flex-1">
@@ -59,15 +78,33 @@ const CourseForm = () => {
                     )}
                 </div>
             </div>
-            {resources.map((resource, index) => (
-                <div key={index} className="p-inputgroup flex-1 mt-8">
-                    <InputText value={resource} onChange={(e) => handleResourceChange(e.target.value, index)} placeholder={`Resource #${index + 1}`} />
+            <div className="mt-8 flex-col w-full">
+                {resources.map((resource, index) => (
+                    <div key={index} className="p-inputgroup flex-1 mt-8">
+                        <InputText value={resource} onChange={(e) => handleResourceChange(e.target.value, index)} placeholder={`Resource #${index + 1}`} className="w-full" />
+                        {index > 0 && ( // Only render the minus button if the index is greater than 0
+                            <Button icon="pi pi-times" className="p-button-danger" onClick={() => removeResource(index)} />
+                        )}
+                    </div>
+                ))}
+                <div className="w-full flex flex-row items-end justify-end py-2">
+                    <Button type="button" icon="pi pi-plus" onClick={addResource} />
                 </div>
-            ))}
-            <div className="flex justify-center mt-4">
-                <Button type="button" onClick={addResource} label="Add Resource" />
             </div>
 
+            <div className="mt-8 flex-col w-full">
+                {topics.map((topic, index) => (
+                    <div className="p-inputgroup flex-1" key={index}>
+                        <InputText value={topic} onChange={(e) => handleTopicChange(index, e.target.value)} placeholder="Topic" className="w-full mt-2" />
+                        {index > 0 && (
+                            <Button icon="pi pi-times" className="p-button-danger mt-2" onClick={() => removeTopic(index)} />
+                        )}
+                    </div>
+                ))}
+                <div className="w-full flex flex-row items-end justify-end py-2">
+                    <Button icon="pi pi-plus" onClick={addTopic} />
+                </div>
+            </div>
             <div className="flex justify-center mt-8">
                 <Button type="submit" severity="success" outlined label="Submit" />
             </div>

src/components/forms/Editor/EditorHeader.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Button } from 'primereact/button';
+
+const EditorHeader = ({ quill }) => {
+    const embedVideo = () => {
+        const videoUrl = prompt('Enter the video URL:');
+        if (videoUrl) {
+            const videoEmbedCode = `<iframe width="560" height="315" src="${videoUrl}" frameborder="0" allowfullscreen></iframe>`;
+            quill.editor.clipboard.dangerouslyPasteHTML(videoEmbedCode);
+        }
+    };
+
+    return (
+        <React.Fragment>
+            <span className="ql-formats">
+                <select className="ql-font"></select>
+                <select className="ql-size"></select>
+            </span>
+            <span className="ql-formats">
+                <button className="ql-bold"></button>
+                <button className="ql-italic"></button>
+                <button className="ql-underline"></button>
+                <select className="ql-color"></select>
+                <select className="ql-background"></select>
+            </span>
+            <span className="ql-formats">
+                <button className="ql-list" value="ordered"></button>
+                <button className="ql-list" value="bullet"></button>
+                <select className="ql-align"></select>
+            </span>
+            <span className="ql-formats">
+                <button className="ql-link"></button>
+                <button className="ql-image"></button>
+                <button className="ql-video"></button>
+            </span>
+            <Button
+                icon="pi pi-video"
+                className="p-button-outlined p-button-secondary"
+                onClick={embedVideo}
+                style={{ marginRight: '0.5rem' }}
+            />
+        </React.Fragment>
+    );
+};
+
+export default EditorHeader;

src/components/forms/ResourceForm.js

@@ -9,6 +9,7 @@ import { nip04, verifyEvent, nip19 } from "nostr-tools";
 import { useNostr } from "@/hooks/useNostr";
 import { v4 as uuidv4 } from 'uuid';
 import { useLocalStorageWithEffect } from "@/hooks/useLocalStorage";
+import EditorHeader from "./Editor/EditorHeader";
 import 'primeicons/primeicons.css';
 
 const ResourceForm = () => {
@@ -108,6 +109,39 @@ const ResourceForm = () => {
         setTopics(updatedTopics);
     };
 
+    // Define custom toolbar for the editor
+    const customToolbar = (
+        <div id="toolbar">
+            {/* Include existing toolbar items */}
+            <span className="ql-formats">
+                <select className="ql-header" defaultValue="">
+                    <option value="1">Heading</option>
+                    <option value="2">Subheading</option>
+                    <option value="">Normal</option>
+                </select>
+            </span>
+            <span className="ql-formats">
+                <button className="ql-bold"></button>
+                <button className="ql-italic"></button>
+                <button className="ql-underline"></button>
+            </span>
+            <span className="ql-formats">
+                <button className="ql-list" value="ordered"></button>
+                <button className="ql-list" value="bullet"></button>
+                <button className="ql-indent" value="-1"></button>
+                <button className="ql-indent" value="+1"></button>
+            </span>
+            <span className="ql-formats">
+                <button className="ql-link"></button>
+                <button className="ql-image"></button>
+                <button className="ql-video"></button> {/* This is your custom video button */}
+            </span>
+            <span className="ql-formats">
+                <button className="ql-clean"></button>
+            </span>
+        </div>
+    );
+
     return (
         <form onSubmit={handleSubmit}>
             <div className="p-inputgroup flex-1">
@@ -128,7 +162,12 @@ const ResourceForm = () => {
             </div>
             <div className="p-inputgroup flex-1 flex-col mt-8">
                 <span>Content</span>
-                <Editor value={text} onTextChange={(e) => setText(e.htmlValue)} style={{ height: '320px' }} />
+                <Editor
+                    value={text}
+                    onTextChange={(e) => setText(e.htmlValue)}
+                    style={{ height: '320px' }}
+                    headerTemplate={<EditorHeader quill={null} />}
+                />
             </div>
             <div className="mt-8 flex-col w-full">
                 {topics.map((topic, index) => (

src/components/forms/WorkshopForm.js

@@ -1,9 +1,8 @@
-import React, { useState } from "react";
-import { InputText } from "primereact/inputtext";
-import { InputNumber } from "primereact/inputnumber";
-import { InputSwitch } from "primereact/inputswitch";
-import { Editor } from "primereact/editor";
-import { Button } from "primereact/button";
+import React, { useState } from 'react';
+import { InputText } from 'primereact/inputtext';
+import { InputNumber } from 'primereact/inputnumber';
+import { InputSwitch } from 'primereact/inputswitch';
+import { Button } from 'primereact/button';
 import 'primeicons/primeicons.css';
 
 const WorkshopForm = () => {
@@ -11,19 +10,51 @@ const WorkshopForm = () => {
     const [summary, setSummary] = useState('');
     const [checked, setChecked] = useState(false);
     const [price, setPrice] = useState(0);
-    const [text, setText] = useState('');
+    const [videoUrl, setVideoUrl] = useState('');
+    const [topics, setTopics] = useState(['']);
 
     const handleSubmit = (e) => {
-        e.preventDefault(); // Prevents the default form submission mechanism
+        e.preventDefault();
+        let embedCode = '';
+    
+        // Check if it's a YouTube video
+        if (videoUrl.includes('youtube.com') || videoUrl.includes('youtu.be')) {
+            const videoId = videoUrl.split('v=')[1] || videoUrl.split('/').pop();
+            embedCode = `<iframe width="560" height="315" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allowfullscreen></iframe>`;
+        }
+        // Check if it's a Vimeo video
+        else if (videoUrl.includes('vimeo.com')) {
+            const videoId = videoUrl.split('/').pop();
+            embedCode = `<iframe width="560" height="315" src="https://player.vimeo.com/video/${videoId}" frameborder="0" allowfullscreen></iframe>`;
+        }
+        // Add more conditions here for other video services
+    
         const payload = {
             title,
             summary,
             isPaidResource: checked,
             price: checked ? price : null,
-            content: text
+            videoUrl,
+            topics: topics.map(topic => topic.trim().toLowerCase()) // Include topics in the payload
         };
         console.log(payload);
-    }
+    };
+
+
+    const handleTopicChange = (index, value) => {
+        const updatedTopics = topics.map((topic, i) => i === index ? value : topic);
+        setTopics(updatedTopics);
+    };
+
+    const addTopic = () => {
+        setTopics([...topics, '']); // Add an empty string to the topics array
+    };
+
+    const removeTopic = (index) => {
+        const updatedTopics = topics.filter((_, i) => i !== index);
+        setTopics(updatedTopics);
+    };
+    
 
     return (
         <form onSubmit={handleSubmit}>
@@ -37,18 +68,28 @@ const WorkshopForm = () => {
             <div className="p-inputgroup flex-1 mt-8 flex-col">
                 <p className="py-2">Paid Workshop</p>
                 <InputSwitch checked={checked} onChange={(e) => setChecked(e.value)} />
-                <div className="p-inputgroup flex-1 py-4">
-                    {checked && (
-                        <>
-                            <i className="pi pi-bolt p-inputgroup-addon text-2xl text-yellow-500"></i>
-                            <InputNumber value={price} onValueChange={(e) => setPrice(e.value)} placeholder="Price (sats)" />
-                        </>
-                    )}
-                </div>
+                {checked && (
+                    <div className="p-inputgroup flex-1 py-4">
+                        <i className="pi pi-bolt p-inputgroup-addon text-2xl text-yellow-500"></i>
+                        <InputNumber value={price} onValueChange={(e) => setPrice(e.value)} placeholder="Price (sats)" />
+                    </div>
+                )}
             </div>
-            <div className="p-inputgroup flex-1 flex-col mt-8">
-                <span>Content</span>
-                <Editor value={text} onTextChange={(e) => setText(e.htmlValue)} style={{ height: '320px' }} />
+            <div className="p-inputgroup flex-1 mt-8">
+                <InputText value={videoUrl} onChange={(e) => setVideoUrl(e.target.value)} placeholder="Video URL" />
+            </div>
+            <div className="mt-8 flex-col w-full">
+                {topics.map((topic, index) => (
+                    <div className="p-inputgroup flex-1" key={index}>
+                        <InputText value={topic} onChange={(e) => handleTopicChange(index, e.target.value)} placeholder="Topic" className="w-full mt-2" />
+                        {index > 0 && (
+                            <Button icon="pi pi-times" className="p-button-danger mt-2" onClick={() => removeTopic(index)} />
+                        )}
+                    </div>
+                ))}
+                <div className="w-full flex flex-row items-end justify-end py-2">
+                    <Button icon="pi pi-plus" onClick={addTopic} />
+                </div>
             </div>
             <div className="flex justify-center mt-8">
                 <Button type="submit" severity="success" outlined label="Submit" />

src/pages/create.js

@@ -8,7 +8,7 @@ const Create = () => {
     const [activeIndex, setActiveIndex] = useState(0); // State to track the active tab index
     const homeItems = [
         { label: 'Course', icon: 'pi pi-desktop' },
-        { label: 'Workshop', icon: 'pi pi-cog' },
+        { label: 'Workshop', icon: 'pi pi-video' },
         { label: 'Resource', icon: 'pi pi-book' },
     ];
 
@@ -27,7 +27,7 @@ const Create = () => {
     };
 
     return (
-        <div className="w-fit mx-auto mt-8 flex flex-col justify-center">
+        <div className="w-fit mx-auto my-8 flex flex-col justify-center">
             <h2 className="text-center mb-8">Create a {homeItems[activeIndex].label}</h2>
             <MenuTab items={homeItems} activeIndex={activeIndex} onTabChange={setActiveIndex} />
             {renderForm()}

src/pages/profile.js

@@ -19,7 +19,7 @@ const Profile = () => {
     const homeItems = [
         { label: 'All', icon: 'pi pi-star' },
         { label: 'Courses', icon: 'pi pi-desktop' },
-        { label: 'Workshops', icon: 'pi pi-cog' },
+        { label: 'Workshops', icon: 'pi pi-video' },
         { label: 'Resources', icon: 'pi pi-book' },
     ];