feat: adding editorjs

lms/public/css/style.css

@@ -1625,20 +1625,6 @@ li {
 	}
 }
 
-[contenteditable="true"] {
-	outline: none;
-	background-color: var(--bg-light-gray);
-	border-radius: var(--border-radius);
-	border: 1px solid var(--gray-300);
-	padding: 0.5rem 0.75rem;
-	color: var(--gray-900);
-}
-
-[contenteditable="true"]:empty:before {
-	content: attr(data-placeholder);
-	color: var(--gray-600);
-}
-
 .course-image-attachment {
 	margin-top: 0.25rem;
 	background-color: var(--bg-light-gray);
@@ -1675,10 +1661,6 @@ li {
 	padding: 0.5rem 0;
 }
 
-.course-card-pills[contenteditable="true"] {
-	box-shadow: none;
-}
-
 .preview {
 	display: flex;
 	align-items: center;

lms/public/js/editor.js

@@ -1,5 +1,9 @@
 import EditorJS from "@editorjs/editorjs";
+import Header from "@editorjs/header";
+import List from "@editorjs/list";
 
-const editor = new EditorJS("body");
-
-console.log(editor);
+create_editor_for_short_description = () => {
+	let editor = new EditorJS({
+		holder: "course-description",
+	});
+};

lms/www/courses/create.html

@@ -31,7 +31,7 @@
                     </div>
                 </div>
                 <div class="">
-                    <input type="text" class="field-input">
+                    <div type="text" class="field-input"></div>
                 </div>
             </div>
             <div>
@@ -61,6 +61,19 @@
                 </div>
                 <img>
             </div>
+
+            <div>
+                <div class="course-title">
+                    <div class="field-label">
+                        {{ _("Course Description") }}
+                    </div>
+                    <div class="field-description">
+                        {{ _("Add a detailed description") }}
+                    </div>
+                </div>
+                <input id="course-description" class="field-input">
+            </div>
+
         </div>
     </div>
 </main>

package.json

@@ -21,6 +21,8 @@
   "dependencies": {
     "@4tw/cypress-drag-drop": "^2",
     "@cypress/code-coverage": "^3",
+    "@editorjs/header": "^2.7.0",
+    "@editorjs/list": "^1.8.0",
     "@testing-library/cypress": "^8",
     "@testing-library/dom": "8.17.1",
     "cypress-real-events": "^1.7.6"