feat: embeds in lesson

lms/hooks.py

@@ -295,6 +295,7 @@ lms_markdown_macro_renderers = {
 	"YouTubeVideo": "lms.plugins.youtube_video_renderer",
 	"Video": "lms.plugins.video_renderer",
 	"Assignment": "lms.plugins.assignment_renderer",
+	"Embed": "lms.plugins.embed_renderer",
 }
 
 # page_renderer to manage profile pages

lms/plugins.py

@@ -155,6 +155,20 @@ def youtube_video_renderer(video_id):
     """
 
 
+def embed_renderer(details):
+	src = details.split("|||")[1]
+	return f"""
+	<iframe width="100%" height="400"
+		src={src}
+		title="Embedded Content"
+		frameborder="0"
+		style="border-radius: var(--border-radius-lg)"
+		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+		allowfullscreen>
+	</iframe>
+	"""
+
+
 def video_renderer(src):
 	return (
 		f"<video controls width='100%'><source src={quote(src)} type='video/mp4'></video>"

lms/public/css/style.css

@@ -2344,4 +2344,8 @@ select {
 	grid-template-columns: 1fr 1fr;
 	grid-gap: 0.5rem;
 	margin-bottom: 1rem;
+}
+
+.embed-tool__caption {
+	display: none;
 }

lms/www/batch/edit.html

@@ -128,5 +128,6 @@
     <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
     <script src="https://cdn.jsdelivr.net/npm/@editorjs/paragraph@latest"></script>
     <script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script>
 {% endblock %}
 

lms/www/batch/edit.js

@@ -26,6 +26,22 @@ const setup_editor = () => {
 	self.editor = new EditorJS({
 		holder: "lesson-content",
 		tools: {
+			embed: {
+				class: Embed,
+				config: {
+					services: {
+						youtube: true,
+						vimeo: true,
+						codepen: true,
+						slides: {
+							regex: /https:\/\/docs\.google\.com\/presentation\/d\/e\/([A-Za-z0-9_-]+)\/pub/,
+							embedUrl:
+								"https://docs.google.com/presentation/d/e/<%= remote_id %>/embed",
+							html: "<iframe width='100%' height='300' frameborder='0' allowfullscreen='true'></iframe>",
+						},
+					},
+				},
+			},
 			header: {
 				class: Header,
 				inlineToolbar: ["bold", "italic", "link"],
@@ -84,6 +100,15 @@ const parse_string_to_lesson = () => {
 					file_url: video,
 				},
 			});
+		} else if (block.includes("{{ Embed")) {
+			let embed = block.match(/'([^']+)'/)[1];
+			lesson_blocks.push({
+				type: "embed",
+				data: {
+					service: embed.split("|||")[0],
+					embed: embed.split("|||")[1],
+				},
+			});
 		} else if (block.includes("![]")) {
 			let image = block.match(/\((.*?)\)/)[1];
 			lesson_blocks.push({
@@ -139,6 +164,10 @@ const parse_lesson_to_string = (data) => {
 				"#".repeat(block.data.level) + ` ${block.data.text}\n`;
 		} else if (block.type == "paragraph") {
 			lesson_content += `${block.data.text}\n`;
+		} else if (block.type == "embed") {
+			lesson_content += `{{ Embed("${
+				block.data.service
+			}|||${block.data.embed.replace(/&amp;/g, "&")}") }}\n`;
 		}
 	});
 	save(lesson_content);