From bf9eeb4e373a6c4c44586b4cdfba7b26c7c2ad11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 18 Sep 2019 11:24:42 +0200
Subject: [PATCH] make OEmbeds non-editable + ability to edit OEmbeds on a
 later state

---
 .../src/common/services/tinymce.service.js    | 19 ++++++++--------
 .../src/less/rte-content.less                 | 22 ++++++++++++++-----
 .../infiniteeditors/embed/embed.controller.js |  4 ++--
 3 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js
index 530681668d3d..cef1266de4ba 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js
@@ -432,7 +432,7 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
                     // Check nodename is a DIV and the claslist contains 'embeditem'
                     var selectedElm = editor.selection.getNode();
                     var nodeName = selectedElm.nodeName;
-                    var embed = {};
+                    var modify = null;
 
                     if(nodeName.toUpperCase() === "DIV" && selectedElm.classList.contains("embeditem")){
                         // See if we can go and get the attributes
@@ -441,10 +441,10 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
                         var embedHeight = editor.dom.getAttrib(selectedElm, "data-embed-height");
                         var embedConstrain = editor.dom.getAttrib(selectedElm, "data-embed-constrain");
 
-                        embed = {
+                        modify = {
                             url: embedUrl,
-                            width: embedWidth,
-                            height: embedHeight,
+                            width: parseInt(embedWidth) || 0,
+                            height: parseInt(embedHeight) || 0,
                             constrain: embedConstrain
                         };
                     }
@@ -452,7 +452,7 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
                     if (callback) {
                         angularHelper.safeApply($rootScope, function() {
                             // pass the active element along so we can retrieve it later
-                            callback(selectedElm, embed);
+                            callback(selectedElm, modify);
                         });
                     }
                 }
@@ -469,11 +469,12 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
 
             var wrapper = tinymce.activeEditor.dom.create('div',
             {
-                'class': 'mceNonEditable embeditem',
+                'class': 'embeditem',
                 'data-embed-url': embed.url,
                 'data-embed-height': embed.height,
                 'data-embed-width': embed.width,
-                'data-embed-constrain': embed.constrain
+                'data-embed-constrain': embed.constrain,
+                'contenteditable': false
             },
             embed.preview);
 
@@ -1304,9 +1305,9 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
             });
 
             //Create the embedded plugin
-            self.createInsertEmbeddedMedia(args.editor, function (activeElement, embed) {
+            self.createInsertEmbeddedMedia(args.editor, function (activeElement, modify) {
                 var embed = {
-                    embed: embed,
+                    modify: modify,
                     submit: function (model) {
                         self.insertEmbeddedMediaInEditor(args.editor, model.embed, activeElement);
                         editorService.close();
diff --git a/src/Umbraco.Web.UI.Client/src/less/rte-content.less b/src/Umbraco.Web.UI.Client/src/less/rte-content.less
index f133ac8535cc..5fd7bbf1c388 100644
--- a/src/Umbraco.Web.UI.Client/src/less/rte-content.less
+++ b/src/Umbraco.Web.UI.Client/src/less/rte-content.less
@@ -14,19 +14,31 @@
 }
 
 
-.umb-rte .mceNonEditable.embeditem {
+.umb-rte .embeditem {
     position:relative;
+    > * {
+        user-select: none;
+        pointer-events: none;
+    }
 }
 
-.umb-rte .mceNonEditable.embeditem::before {
+.umb-rte .embeditem[data-mce-selected] {
+    outline: 2px solid @pinkLight;
+}
+
+.umb-rte .embeditem::before {
     z-index:1000;
     width:100%;
     height:100%;
     position:absolute;
     content:' ';
-    background:rgba(0,0,0,0.1);
 }
 
-.umb-rte .mceNonEditable.embeditem[data-mce-selected] {
+.umb-rte .embeditem[data-mce-selected]::before {
+    background:rgba(0,0,0,0.025);
+}
+
+.umb-rte *[data-mce-selected="inline-boundary"] {
+    background:rgba(0,0,0,0.025);
     outline: 2px solid @pinkLight;
-}
\ No newline at end of file
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.controller.js
index f34dc949ab35..515f54e3d7b3 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.controller.js
@@ -21,8 +21,8 @@
             supportsDimensions: false
         };
 
-        if ($scope.model.original) {
-            angular.extend($scope.model.embed, $scope.model.original);
+        if ($scope.model.modify) {
+            angular.extend($scope.model.embed, $scope.model.modify);
 
             showPreview();
         }