Merge pull request #13 from mattbegent/feature/embed-tool

Add embed tool
mattbegent · Jul 15, 2024 · 710de7e · 710de7e
2 parents ab729fc + 95cbe9c
commit 710de7e
Show file tree

Hide file tree

Showing 6 changed files with 147 additions and 2 deletions.
diff --git a/Umbraco.Community.Skrivlet/Converters/EmbedBlockDataConverter.cs b/Umbraco.Community.Skrivlet/Converters/EmbedBlockDataConverter.cs
@@ -0,0 +1,76 @@
+using System.Text.Json;
+
+namespace Umbraco.Community.SkrivLet.Converters
+{
+    public class EmbedBlockDataConverter : IBlockDataConverter
+    {
+        public bool CanConvert(string type)
+        {
+            return type.Equals("embed");
+        }
+
+        public SkrivLetBlockBase Convert(ref Utf8JsonReader reader, string id, string type)
+        {
+            if (reader.TokenType != JsonTokenType.StartObject)
+            {
+                throw new JsonException();
+            }
+
+            var block = new SkrivLetBlock<EmbedBlockData>(id, type);
+            block.Data = new EmbedBlockData();
+            while (reader.Read())
+            {
+                if (reader.TokenType == JsonTokenType.EndObject)
+                {
+                    return block;
+                }
+
+                // Get the key.
+                if (reader.TokenType != JsonTokenType.PropertyName)
+                {
+                    throw new JsonException();
+                }
+
+                string? propertyName = reader.GetString() ?? "";
+                switch (propertyName.ToLower())
+                {
+                    case "service":
+                        reader.Read();
+                        block.Data.Service = reader.GetString() ?? "";
+                        break;
+                    case "source":
+                        reader.Read();
+                        block.Data.Source = reader.GetString() ?? "";
+                        break;
+                    case "embed":
+                        reader.Read();
+                        block.Data.Embed = reader.GetString() ?? "";
+                        break;
+                    case "width":
+                        reader.Read();
+                        block.Data.Width = reader.GetInt16();
+                        break;
+                    case "height":
+                        reader.Read();
+                        block.Data.Height = reader.GetInt16();
+                        break;
+                    case "caption":
+                        reader.Read();
+                        block.Data.Caption = reader.GetString() ?? "";
+                        break;
+                }
+            }
+            return block;
+        }
+    }
+
+    public class EmbedBlockData
+    {
+        public string Service { get; set; }
+        public string Source { get; set; }
+        public string Embed { get; set; }
+        public int Height { get; set; }
+        public int Width { get; set; }
+        public string Caption { get; set; }
+    }
+}
diff --git a/Umbraco.Community.Skrivlet/SkrivLetComposer.cs b/Umbraco.Community.Skrivlet/SkrivLetComposer.cs
@@ -18,6 +18,7 @@ public void Compose(IUmbracoBuilder builder)
 			builder.Services.AddTransient<IBlockDataConverter, QuoteBlockDataConverter>();
 			builder.Services.AddTransient<IBlockDataConverter, RawHtmlBlockDataConverter>();
 			builder.Services.AddTransient<IBlockDataConverter, CheckListBlockDataConverter>();
+            builder.Services.AddTransient<IBlockDataConverter, EmbedBlockDataConverter>();
 		}
 	}
 }
diff --git a/Umbraco.Community.Skrivlet/Views/Partials/SkrivLet/Embed.cshtml b/Umbraco.Community.Skrivlet/Views/Partials/SkrivLet/Embed.cshtml
@@ -0,0 +1,4 @@
+@model Umbraco.Community.SkrivLet.SkrivLetBlock<Umbraco.Community.SkrivLet.Converters.EmbedBlockData>
+<div class="sl-embed sl-embed--@Model.Data.Service">
+    <iframe title="@Model.Data.Caption" src="@Model.Data.Embed" width="@Model.Data.Width" height="@Model.Data.Height" frameborder="0" allowfullscreen></iframe>
+</div>
diff --git a/Umbraco.Community.Skrivlet/wwwroot/App_Plugins/SkrivLet/basic-theme.css b/Umbraco.Community.Skrivlet/wwwroot/App_Plugins/SkrivLet/basic-theme.css
@@ -97,3 +97,14 @@
 .sl-check__text--checked {
     text-decoration: line-through;
 }
+
+.sl-embed {
+    margin: 0 0 1.25rem 0;
+}
+
+.sl-embed--youtube iframe,
+.sl-embed--vimeo iframe {
+    aspect-ratio: 16 / 9;
+    width: 100%;
+    height: auto;
+}
diff --git a/Umbraco.Community.Skrivlet/wwwroot/App_Plugins/SkrivLet/skrivlet.controller.js b/Umbraco.Community.Skrivlet/wwwroot/App_Plugins/SkrivLet/skrivlet.controller.js
@@ -213,6 +213,50 @@ angular.module('umbraco').controller('SkrivLetController', function ($scope, edi
 
     }
 
+    class EmbedWithUI extends Embed {
+        static get toolbox() {
+          return {
+            title: 'Video',
+            icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-youtube w-6 h-6 mx-1"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"></path><path d="m10 15 5-3-5-3z"></path></svg>'
+          };
+        }
+
+        render() {
+          if (!this.data.service) {
+            const container = document.createElement('div');
+
+            this.element = container;
+
+            const label = document.createElement('label');
+            label.innerHTML = 'Enter a URL to embed a video from YouTube or Vimeo';
+            label.classList.add('cdx-label');
+            label.setAttribute('for', 'embed-input');
+            container.appendChild(label);
+
+            const input = document.createElement('input');
+            input.classList.add('cdx-input');
+            input.placeholder = '';
+            input.type = 'url';
+            input.id = 'embed-input';
+            input.addEventListener('paste', (event) => {
+              const url = event.clipboardData.getData('text');
+              const service = Object.keys(Embed.services).find((key) => Embed.services[key].regex.test(url));
+              if (service) {
+                this.onPaste({detail: {key: service, data: url}});
+              }
+            });
+            container.appendChild(input);
+
+            return container;
+          }
+          return super.render();
+        }
+
+        validate(savedData) {
+          return savedData.service && savedData.source ? true : false;
+        }
+      }
+
     const editor = new EditorJS({
 
         holder: 'editorjs',
@@ -230,8 +274,13 @@ angular.module('umbraco').controller('SkrivLetController', function ($scope, edi
 
         tools: {
             embed: {
-                class: Embed,
-                inlineToolbar: true
+                class: EmbedWithUI,
+                config: {
+                    services: {
+                      youtube: true,
+                      vimeo: true
+                    }
+                }
             },
             header: Header,
             image: UmbracoImageTool,

diff --git a/Umbraco.Community.Skrivlet/wwwroot/App_Plugins/SkrivLet/skrivlet.css b/Umbraco.Community.Skrivlet/wwwroot/App_Plugins/SkrivLet/skrivlet.css
@@ -34,6 +34,10 @@
         max-width: 800px;
     }
 
+.cdx-label {
+    font-weight: 700;
+}
+
 /* Image */
 .simple-image {
     padding: 20px 0;