1 files changed, 30 insertions, 1 deletions
diff --git a/app/assets/javascripts/vue_shared/components/rich_content_editor/services/editor_service.js b/app/assets/javascripts/vue_shared/components/rich_content_editor/services/editor_service.js
index 51ba033dff0..8b3fbcabcfa 100644
--- a/app/assets/javascripts/vue_shared/components/rich_content_editor/services/editor_service.js
+++ b/app/assets/javascripts/vue_shared/components/rich_content_editor/services/editor_service.js
@@ -3,7 +3,8 @@ import { defaults } from 'lodash';
 import ToolbarItem from '../toolbar_item.vue';
 import buildHtmlToMarkdownRenderer from './build_html_to_markdown_renderer';
 import buildCustomHTMLRenderer from './build_custom_renderer';
-import { TOOLBAR_ITEM_CONFIGS } from '../constants';
+import { TOOLBAR_ITEM_CONFIGS, VIDEO_ATTRIBUTES } from '../constants';
+import sanitizeHTML from './sanitize_html';
 
 const buildWrapper = propsData => {
   const instance = new Vue({
@@ -16,6 +17,23 @@ const buildWrapper = propsData => {
   return instance.$el;
 };
 
+const buildVideoIframe = src => {
+  const wrapper = document.createElement('figure');
+  const iframe = document.createElement('iframe');
+  const videoAttributes = { ...VIDEO_ATTRIBUTES, src };
+  const wrapperClasses = ['gl-relative', 'gl-h-0', 'video_container'];
+  const iframeClasses = ['gl-absolute', 'gl-top-0', 'gl-left-0', 'gl-w-full', 'gl-h-full'];
+
+  wrapper.setAttribute('contenteditable', 'false');
+  wrapper.classList.add(...wrapperClasses);
+  iframe.classList.add(...iframeClasses);
+  Object.assign(iframe, videoAttributes);
+
+  wrapper.appendChild(iframe);
+
+  return wrapper;
+};
+
 export const generateToolbarItem = config => {
   const { icon, classes, event, command, tooltip, isDivider } = config;
 
@@ -43,6 +61,16 @@ export const removeCustomEventListener = (editorApi, event, handler) =>
 
 export const addImage = ({ editor }, image) => editor.exec('AddImage', image);
 
+export const insertVideo = ({ editor }, url) => {
+  const videoIframe = buildVideoIframe(url);
+
+  if (editor.isWysiwygMode()) {
+    editor.getSquire().insertElement(videoIframe);
+  } else {
+    editor.insertText(videoIframe.outerHTML);
+  }
+};
+
 export const getMarkdown = editorInstance => editorInstance.invoke('getMarkdown');
 
 /**
@@ -62,5 +90,6 @@ export const getEditorOptions = externalOptions => {
   return defaults({
     customHTMLRenderer: buildCustomHTMLRenderer(externalOptions?.customRenderers),
     toolbarItems: TOOLBAR_ITEM_CONFIGS.map(toolbarItem => generateToolbarItem(toolbarItem)),
+    customHTMLSanitizer: html => sanitizeHTML(html),
   });
 };