diff --git a/lms/hooks.py b/lms/hooks.py index f8796e7e..e78659ab 100644 --- a/lms/hooks.py +++ b/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 diff --git a/lms/plugins.py b/lms/plugins.py index 69571476..a171e05e 100644 --- a/lms/plugins.py +++ b/lms/plugins.py @@ -155,6 +155,20 @@ def youtube_video_renderer(video_id): """ +def embed_renderer(details): + src = details.split("|||")[1] + return f""" + + """ + + def video_renderer(src): return ( f"" diff --git a/lms/public/css/style.css b/lms/public/css/style.css index c3f156a3..e5f5149f 100644 --- a/lms/public/css/style.css +++ b/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; } \ No newline at end of file diff --git a/lms/www/batch/edit.html b/lms/www/batch/edit.html index 0ba36106..7ad0b37b 100644 --- a/lms/www/batch/edit.html +++ b/lms/www/batch/edit.html @@ -128,5 +128,6 @@ + {% endblock %} diff --git a/lms/www/batch/edit.js b/lms/www/batch/edit.js index 6b050957..ada34259 100644 --- a/lms/www/batch/edit.js +++ b/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: "", + }, + }, + }, + }, 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(/&/g, "&")}") }}\n`; } }); save(lesson_content);