fix: upload image component in lesson web form

lms/hooks.py

@@ -232,8 +232,7 @@ lms_markdown_macro_renderers = {
     "Quiz": "lms.plugins.quiz_renderer",
     "YouTubeVideo": "lms.plugins.youtube_video_renderer",
     "Video": "lms.plugins.video_renderer",
-    "Assignment": "lms.plugins.assignment_renderer",
-    "Image": "lms.plugin.image_renderer"
+    "Assignment": "lms.plugins.assignment_renderer"
 }
 
 # page_renderer to manage profile pages

lms/lms/web_form/lesson/lesson.js

@@ -1,9 +1,44 @@
 frappe.ready(function() {
-	frappe.web_form.after_save = () => {
-      frappe.call({
+
+    frappe.web_form.after_load = () => {
+        add_file_upload_component();
+    };
+
+    frappe.web_form.after_save = () => {
+      show_success_message();
+    };
+
+    $(document).on("click", ".add-attachment", (e) => {
+        show_upload_modal();
+    });
+
+    $(document).on("click", ".copy-link", (e) => {
+        frappe.utils.copy_to_clipboard($(e.currentTarget).data("link"));
+    });
+
+});
+
+const show_upload_modal = () => {
+    new frappe.ui.FileUploader({
+        folder: "Home/Attachments",
+        restrictions: {
+            allowed_file_types: ['image/*']
+        },
+        on_success: (file_doc) => {
+            $(".attachments").append(build_attachment_table(file_doc));
+            let count = $(".attachment-count").data("count") + 1;
+            $(".attachment-count").data("count", count);
+            $(".attachment-count").html(__(`${count} attachments`));
+            $(".attachments").removeClass("hide");
+        },
+    });
+};
+
+const show_success_message = () => {
+    frappe.call({
         method: "lms.lms.doctype.course_lesson.course_lesson.get_lesson_info",
         args: {
-          "chapter": frappe.web_form.doc.chapter
+            "chapter": frappe.web_form.doc.chapter
         },
         callback: (data) => {
             frappe.msgprint(__(`Lesson has been saved successfully. Go back to the chapter and add this lesson to the lessons table.`));
@@ -12,5 +47,42 @@ frappe.ready(function() {
             }, 3000);
         }
     });
-  };
-});
+};
+
+const add_file_upload_component = () => {
+    $(get_attachment_controls_html()).insertBefore($(`[data-fieldname="include_in_preview"]`).first());
+};
+
+const get_attachment_controls_html = () => {
+    return `
+        <div class="attachments-parent">
+            <div class="attachment-controls">
+                <div class="show-attachments" data-toggle="collapse" data-target="#collapse-attachments" aria-expanded="false">
+                    <svg class="icon icon-sm">
+                        <use class="" href="#icon-attachment">
+                    </svg>
+                    <span class="attachment-count" data-count="0">0 {{ _("attachments") }}</span>
+                </div>
+                <div class="add-attachment">
+                    <span class="button is-secondary">
+                        <svg class="icon icon-sm">
+                            <use class="" href="#icon-upload">
+                        </svg>
+                        {{ _("Upload Image") }}
+                    </span>
+                </div>
+            </div>
+            <table class="attachments common-card-style collapse hide" id="collapse-attachments"></table>
+        </div>
+    `;
+};
+
+const build_attachment_table = (file_doc) => {
+    return $(`
+        <tr class="attachment-row">
+            <td>${file_doc.file_name}</td>
+            <td class=""><a class="button is-secondary button-links copy-link" data-link="![](${file_doc.file_url})"
+            data-name="${file_doc.file_name}" > {{ _("Copy Link") }} </a></td>
+        </tr>
+    `);
+};

lms/plugins.py

@@ -142,6 +142,3 @@ def show_custom_signup():
         or frappe.db.get_single_value("LMS Settings", "privacy_policy")):
         return "lms/templates/signup-form.html"
     return "frappe/templates/signup.html"
-
-def image_renderer(src);
-    return f"<img src={src}>"

lms/public/css/style.css

@@ -1414,3 +1414,32 @@ pre {
 .btn-outline-primary {
     border: 1px solid var(--primary-color);
 }
+
+.show-attachments {
+    padding-right: 0.5rem;
+    display: flex;
+    align-items: center;
+}
+
+.attachment-controls {
+    display: flex;
+    align-items: center;
+    width: fit-content;
+    cursor: pointer;
+}
+
+.attachments {
+    flex-direction: column;
+    padding: 0.5rem 0;
+    margin-top: 1rem;
+    position: absolute;
+    z-index: 1;
+    width: fit-content;
+    border-collapse: separate;
+    border-spacing: 1rem 0.5rem;
+}
+
+.attachments-parent {
+    float: right;
+    font-size: var(--text-sm);
+}

lms/public/icons/symbol-defs.svg

@@ -28,4 +28,17 @@
         <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
         <circle cx="12" cy="10" r="3"></circle>
     </svg>
+    <svg width="16" height="16" viewBox="0 0 16 16" id="icon-upload" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899
+            4.41015 14.5 8 14.5Z" stroke="#505A62" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M8 4.75V11.1351" stroke="#505A62" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M5.29102 7.45833L7.99935 4.75L10.7077 7.45833" stroke="#505A62" stroke-miterlimit="10" stroke-linecap="round"
+        stroke-linejoin="round"/>
+	</svg>
+    <svg width="14" height="14" id="icon-attachment" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12.6004 6.68841L7.6414 11.5616C6.23259 12.946 3.8658 12.946 2.45699 11.5616C1.04819 10.1772
+        1.04819 7.85132 2.45699 6.4669L6.85247 2.14749C7.86681 1.15071 9.44467 1.15071 10.459 2.14749C11.4733
+        3.14428 11.4733 4.69483 10.459 5.69162L6.40165 9.62339C5.83813 10.1772 4.93649 10.1772 4.42932 9.62339C3.8658
+        9.06962 3.8658 8.18359 4.42932 7.68519L7.81045 4.36257" stroke="#2D95F0" stroke-miterlimit="10" stroke-linecap="round"/>
+    </svg>
 </svg>