|
| 1 | +// InsertCourseCarouselPlugin.js |
| 2 | +// NOTE: adapt import / export to your project module system if needed. |
| 3 | + |
| 4 | +const MOCK_COURSES = [ |
| 5 | + { |
| 6 | + id: "1", |
| 7 | + title: "Course A", |
| 8 | + image: |
| 9 | + "https://35904.cdn.cke-cs.com/A8zpYq0deQ8s5ZchTmUI/images/01c35ba4c768c8465ec1563610744ebc25567078532853aa.webp", |
| 10 | + description: "Intro to topic A", |
| 11 | + }, |
| 12 | + { |
| 13 | + id: "2", |
| 14 | + title: "Course B", |
| 15 | + image: |
| 16 | + "https://35904.cdn.cke-cs.com/A8zpYq0deQ8s5ZchTmUI/images/fe330022e8ac9bdb0ddb483adb64448cd2d44b2fd976fd27.jpg", |
| 17 | + description: "Deep dive into B", |
| 18 | + }, |
| 19 | +] |
| 20 | + |
| 21 | +export function createInsertCourseCarouselPlugin(CKEditorModules) { |
| 22 | + const { Plugin, Command, ButtonView } = CKEditorModules |
| 23 | + |
| 24 | + class InsertCarouselCommand extends Command { |
| 25 | + execute(courses = []) { |
| 26 | + const editor = this.editor |
| 27 | + |
| 28 | + // ✅ Prevent double execution |
| 29 | + if (this._isExecuting) return |
| 30 | + this._isExecuting = true |
| 31 | + setTimeout(() => (this._isExecuting = false), 0) |
| 32 | + |
| 33 | + editor.model.change((writer) => { |
| 34 | + const carousel = writer.createElement("courseCarousel") |
| 35 | + |
| 36 | + for (const course of courses) { |
| 37 | + const item = writer.createElement("courseItem", { |
| 38 | + id: course.id, |
| 39 | + title: course.title, |
| 40 | + image: course.image, |
| 41 | + description: course.description, |
| 42 | + }) |
| 43 | + console.log("Inserting course item:", course) |
| 44 | + writer.append(item, carousel) |
| 45 | + } |
| 46 | + |
| 47 | + const root = editor.model.document.getRoot() |
| 48 | + const pos = writer.createPositionAt(root, "end") |
| 49 | + writer.insert(carousel, pos) |
| 50 | + |
| 51 | + const paragraph = writer.createElement("paragraph") |
| 52 | + writer.insert(paragraph, writer.createPositionAfter(carousel)) |
| 53 | + writer.setSelection(paragraph, "in") |
| 54 | + }) |
| 55 | + } |
| 56 | + } |
| 57 | + |
| 58 | + class InsertCourseCarouselPlugin extends Plugin { |
| 59 | + init() { |
| 60 | + const editor = this.editor |
| 61 | + |
| 62 | + // -------- 1) Schema ---------- |
| 63 | + editor.model.schema.register("courseCarousel", { |
| 64 | + allowWhere: "$block", |
| 65 | + isObject: true, |
| 66 | + isBlock: true, |
| 67 | + }) |
| 68 | + |
| 69 | + editor.model.schema.register("courseItem", { |
| 70 | + allowIn: "courseCarousel", |
| 71 | + allowAttributes: ["title", "image", "description"], |
| 72 | + }) |
| 73 | + |
| 74 | + // -------- 2) Editing downcast (model -> editing view) ---------- |
| 75 | + // courseCarousel -> <div class="course-carousel"> ...cards...</div> |
| 76 | + |
| 77 | + // ✅ Prevent double UI (placeholder only, no card here) |
| 78 | + |
| 79 | + // -------- 3) Data downcast (model -> data/html) ---------- |
| 80 | + // ✅ Editing downcast - SHOW ONLY A PREVIEW BOX, NO CARDS |
| 81 | + // ✅ Only preview in editor |
| 82 | + editor.conversion.for("editingDowncast").elementToElement({ |
| 83 | + model: "courseCarousel", |
| 84 | + view: (modelElement, { writer: vWriter }) => { |
| 85 | + const count = [...modelElement.getChildren()].length |
| 86 | + |
| 87 | + const container = vWriter.createContainerElement("div", { |
| 88 | + class: "course-carousel-editor-preview", |
| 89 | + style: |
| 90 | + "border:2px dashed #7aa2ff;padding:12px;margin:8px 0;background:#f7faff;border-radius:6px;", |
| 91 | + }) |
| 92 | + |
| 93 | + const label = vWriter.createContainerElement("div", { |
| 94 | + style: "font-size:13px;color:#3d6de4;", |
| 95 | + }) |
| 96 | + |
| 97 | + vWriter.insert( |
| 98 | + vWriter.createPositionAt(label, 0), |
| 99 | + vWriter.createText(`📚 Course Carousel (${count} items)`), |
| 100 | + ) |
| 101 | + |
| 102 | + vWriter.insert(vWriter.createPositionAt(container, "end"), label) |
| 103 | + return container |
| 104 | + }, |
| 105 | + }) |
| 106 | + |
| 107 | + // ✅ Course items in editor = invisible anchors |
| 108 | + editor.conversion.for("editingDowncast").elementToElement({ |
| 109 | + model: "courseItem", |
| 110 | + view: (modelElement, { writer: vWriter }) => { |
| 111 | + return vWriter.createEmptyElement("span", { |
| 112 | + "data-course-anchor": modelElement.getAttribute("title"), |
| 113 | + style: "display:none;", |
| 114 | + }) |
| 115 | + }, |
| 116 | + }) |
| 117 | + |
| 118 | + // -------- 4) Upcast (data/html -> model) ---------- |
| 119 | + editor.conversion.for("upcast").elementToElement({ |
| 120 | + view: { name: "div", classes: "course-carousel" }, |
| 121 | + model: "courseCarousel", |
| 122 | + }) |
| 123 | + |
| 124 | + editor.conversion.for("upcast").elementToElement({ |
| 125 | + view: { |
| 126 | + name: "div", |
| 127 | + classes: "carousel-course-card", |
| 128 | + }, |
| 129 | + model: (viewElement, { writer: mWriter }) => { |
| 130 | + // ✅ Only accept cards that contain data attributes |
| 131 | + const title = viewElement.getAttribute("data-title") |
| 132 | + const image = viewElement.getAttribute("data-image") |
| 133 | + const description = viewElement.getAttribute("data-description") |
| 134 | + |
| 135 | + if (!title || !image) { |
| 136 | + // ❌ This is a visual duplicate — ignore it |
| 137 | + return null |
| 138 | + } |
| 139 | + |
| 140 | + return mWriter.createElement("courseItem", { |
| 141 | + title, |
| 142 | + image, |
| 143 | + description: description || "", |
| 144 | + }) |
| 145 | + }, |
| 146 | + }) |
| 147 | + |
| 148 | + // -------- 5) Command & UI button ---------- |
| 149 | + editor.commands.add( |
| 150 | + "insertCourseCarousel", |
| 151 | + new InsertCarouselCommand(editor), |
| 152 | + ) |
| 153 | + |
| 154 | + editor.ui.componentFactory.add("insertCourseCarousel", (locale) => { |
| 155 | + const view = new ButtonView(locale) |
| 156 | + view.set({ |
| 157 | + label: "Insert Courses", |
| 158 | + tooltip: true, |
| 159 | + withText: true, |
| 160 | + }) |
| 161 | + |
| 162 | + view.on("execute", (evt) => { |
| 163 | + evt.stop() // ✅ Prevent double execution from UI |
| 164 | + |
| 165 | + const input = prompt("Enter course IDs (comma-separated, e.g. 1,2)") |
| 166 | + if (!input) return |
| 167 | + const ids = input.split(",").map((s) => s.trim()) |
| 168 | + const courses = MOCK_COURSES.filter((c) => ids.includes(c.id)) |
| 169 | + if (courses.length) { |
| 170 | + editor.execute("insertCourseCarousel", courses) |
| 171 | + } |
| 172 | + }) |
| 173 | + |
| 174 | + return view |
| 175 | + }) |
| 176 | + } |
| 177 | + } |
| 178 | + |
| 179 | + return InsertCourseCarouselPlugin |
| 180 | +} |
0 commit comments