From fb7a9674bb4b2c9946887abad0ab11b6aa6e49bb Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bf@mcb.dk>
Date: Wed, 13 Jan 2021 10:27:21 +0100
Subject: [PATCH 1/6] Accessibility enhancements

(cherry picked from commit db7828e25aee3daf11dba0e60d327d6266fbde71)
---
 .../views/editor.html                                | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/views/editor.html b/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/views/editor.html
index 0007914..b36a89c 100644
--- a/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/views/editor.html
+++ b/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/views/editor.html
@@ -2,15 +2,21 @@
 	<ng-form name="vm.oembedform">
 		<div ui-sortable="sortableOptions" ng-model="vm.items" class="items-container" ng-hide="!model.value">
 			<div class="umb-sortable-thumbnails umb-table-row" ng-repeat="embed in vm.items track by $index">
-				<div class="sort-icon" ng-if="vm.allowMultiple === true && vm.items.length > 1"><i class="icon icon-navigation handle"></i></div>
+				<div class="sort-icon" ng-if="vm.allowMultiple === true && vm.items.length > 1">
+					<i class="icon icon-navigation handle" aria-hidden="true"></i>
+				</div>
 				<div class="preview-item">
 					<span ng-bind-html="vm.trustHtml(embed.preview)"></span>
 				</div>
-				<a class="umb-node-preview__action umb-node-preview__action--red" ng-click="vm.remove($index, $event)"><i class="icon icon-delete"></i></a>
+				<button type="button" class="umb-node-preview__action umb-node-preview__action--red" ng-click="vm.remove($index, $event)">
+					<i class="icon icon-delete" aria-hidden="true"></i>
+				</button>
 			</div>
 		</div>
 		<div class="picker-btn" ng-hide="vm.allowMultiple === false && vm.items.length == 1">
-			<button type="button" class="add-link btn-reset umb-outline umb-outline--surrounding add-link-square" ng-click="vm.add($event)"><i class="icon icon-add large"></i></button>
+			<button type="button" class="add-link btn-reset umb-outline umb-outline--surrounding add-link-square" ng-click="vm.add($event)">
+				<i class="icon icon-add large" aria-hidden="true"></i>
+			</button>
 		</div>
 		<input type="hidden" name="itemCount" ng-model="vm.items.length" val-property-validator="vm.validateMandatory" />
 	</ng-form>

From 7dfc61da6cf9a5ac4b9c56f3c1aee7bf7496a3bd Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Wed, 13 Jan 2021 10:36:33 +0100
Subject: [PATCH 2/6] Prepare edit embed dialog

(cherry picked from commit 73a7ad194aef17516aeb0d26252347932b5fa867)
---
 .../scripts/editor.controller.js              | 19 ++++++++++++++++++-
 .../views/editor.html                         |  3 +++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/scripts/editor.controller.js b/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/scripts/editor.controller.js
index 68cdcd0..ba7f593 100644
--- a/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/scripts/editor.controller.js
+++ b/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/scripts/editor.controller.js
@@ -22,7 +22,6 @@
             };
 
             editorService.embed(embedDialog);
-
         }
 
         function trustHtml(html) {
@@ -44,6 +43,23 @@
                 });
         }    
 
+        function editEmbed(index, evt) {
+            evt.preventDefault();
+
+            var embed = vm.items[index];
+
+            openEmbedDialog(embed,
+                (newEmbed) => {
+                    vm.items.push({
+                        'url': newEmbed.url,
+                        'width': newEmbed.width,
+                        'height': newEmbed.height,
+                        'preview': newEmbed.preview
+                    });
+                    updateModelValue();
+                });
+        }
+
         function removeEmbed(index, evt) {
             evt.preventDefault();
 
@@ -74,6 +90,7 @@
         }
 
         vm.add = addEmbed;
+        vm.edit = editEmbed;
         vm.remove = removeEmbed;
         vm.trustHtml = trustHtml;
         vm.validateMandatory = validate;
diff --git a/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/views/editor.html b/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/views/editor.html
index b36a89c..9650589 100644
--- a/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/views/editor.html
+++ b/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/views/editor.html
@@ -8,6 +8,9 @@
 				<div class="preview-item">
 					<span ng-bind-html="vm.trustHtml(embed.preview)"></span>
 				</div>
+				<button type="button" class="umb-node-preview__action" ng-click="vm.edit($index, $event)">
+					<i class="icon icon-edit" aria-hidden="true"></i>
+				</button>
 				<button type="button" class="umb-node-preview__action umb-node-preview__action--red" ng-click="vm.remove($index, $event)">
 					<i class="icon icon-delete" aria-hidden="true"></i>
 				</button>

From f725d1d496350453dc3037fd147e266e567d689b Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Wed, 13 Jan 2021 16:48:27 +0100
Subject: [PATCH 3/6] Update styling with edit button

---
 .../css/editor.styles.css                     | 19 +++++++++++++------
 .../views/editor.html                         | 14 ++++++++------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/css/editor.styles.css b/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/css/editor.styles.css
index c8ac625..ab5d2cb 100644
--- a/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/css/editor.styles.css
+++ b/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/css/editor.styles.css
@@ -50,20 +50,27 @@
 	top: 0
 }
 
+.Dawoe-OEmbedPicker .umb-sortable-thumbnails__actions {
+	position: absolute;
+	right: -18px;
+	top: -12px;
+}
+
 .Dawoe-OEmbedPicker .umb-node-preview__action {
 	background: #fff;
 	border-radius: 100%;
 	box-shadow: 0 1px 2px rgba(0,0,0,.25);
 	color: #d42054;
 	font-size: 16px;
-    height: 25px;
-    line-height: 26px;
-	position: absolute;
-	right: -18px;
+	height: 25px;
+	line-height: 26px;
 	text-align: center;
 	text-decoration: none;
-	top: -12px;
-    width: 25px
+	width: 25px;
+}
+
+.Dawoe-OEmbedPicker .umb-node-preview__action.umb-node-preview__action--red {
+	color: #d42054;
 }
 
 /* Overwrite default margin */
diff --git a/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/views/editor.html b/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/views/editor.html
index 9650589..1ff0b43 100644
--- a/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/views/editor.html
+++ b/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/views/editor.html
@@ -8,12 +8,14 @@
 				<div class="preview-item">
 					<span ng-bind-html="vm.trustHtml(embed.preview)"></span>
 				</div>
-				<button type="button" class="umb-node-preview__action" ng-click="vm.edit($index, $event)">
-					<i class="icon icon-edit" aria-hidden="true"></i>
-				</button>
-				<button type="button" class="umb-node-preview__action umb-node-preview__action--red" ng-click="vm.remove($index, $event)">
-					<i class="icon icon-delete" aria-hidden="true"></i>
-				</button>
+				<div class="umb-sortable-thumbnails__actions">
+					<button type="button" class="umb-node-preview__action" ng-click="vm.edit($index, $event)">
+						<i class="icon icon-edit" aria-hidden="true"></i>
+					</button>
+					<button type="button" class="umb-node-preview__action umb-node-preview__action--red" ng-click="vm.remove($index, $event)">
+						<i class="icon icon-delete" aria-hidden="true"></i>
+					</button>
+				</div>
 			</div>
 		</div>
 		<div class="picker-btn" ng-hide="vm.allowMultiple === false && vm.items.length == 1">

From 835acc927152e74729c71b62fc15b421deef6cd7 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Wed, 13 Jan 2021 17:40:38 +0100
Subject: [PATCH 4/6] Remove red color from edit button

---
 .../Dawoe.OEmbedPickerPropertyEditor/css/editor.styles.css       | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/css/editor.styles.css b/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/css/editor.styles.css
index ab5d2cb..fbb4b34 100644
--- a/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/css/editor.styles.css
+++ b/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/css/editor.styles.css
@@ -60,7 +60,6 @@
 	background: #fff;
 	border-radius: 100%;
 	box-shadow: 0 1px 2px rgba(0,0,0,.25);
-	color: #d42054;
 	font-size: 16px;
 	height: 25px;
 	line-height: 26px;

From 23f00a7732492123f46756099079780e021f6566 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Wed, 13 Jan 2021 17:42:47 +0100
Subject: [PATCH 5/6] Modify embed object

---
 .../scripts/editor.controller.js                    | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/scripts/editor.controller.js b/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/scripts/editor.controller.js
index ba7f593..d8b784e 100644
--- a/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/scripts/editor.controller.js
+++ b/src/Dawoe.OEmbedPickerPropertyEditor.Web/App_Plugins/Dawoe.OEmbedPickerPropertyEditor/scripts/editor.controller.js
@@ -10,8 +10,13 @@
 
         function openEmbedDialog(embed, onSubmit) {
 
+            // Pass in a clone of embed object to embed infinite editor.
+            // We set both "orignal" and "modify" properties as it changed in Umbraco v8.2
+            const clone = _.clone(embed);
+
             const embedDialog = {
-                embed: _.clone(embed),
+                modify: clone,
+                original: clone,
                 submit: function (model) {
                     onSubmit(model.embed);
                     editorService.close();
@@ -50,12 +55,14 @@
 
             openEmbedDialog(embed,
                 (newEmbed) => {
-                    vm.items.push({
+
+                    vm.items[index] = {
                         'url': newEmbed.url,
                         'width': newEmbed.width,
                         'height': newEmbed.height,
                         'preview': newEmbed.preview
-                    });
+                    };
+
                     updateModelValue();
                 });
         }

From 0e921bee8d83fedb91258a4eed32df55e2f9d3dd Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Wed, 13 Jan 2021 22:24:17 +0100
Subject: [PATCH 6/6] Include file in project

---
 .../Dawoe.OEmbedPickerPropertyEditor.Web.csproj                  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Dawoe.OEmbedPickerPropertyEditor.Web/Dawoe.OEmbedPickerPropertyEditor.Web.csproj b/src/Dawoe.OEmbedPickerPropertyEditor.Web/Dawoe.OEmbedPickerPropertyEditor.Web.csproj
index 1243dfb..b36d9d2 100644
--- a/src/Dawoe.OEmbedPickerPropertyEditor.Web/Dawoe.OEmbedPickerPropertyEditor.Web.csproj
+++ b/src/Dawoe.OEmbedPickerPropertyEditor.Web/Dawoe.OEmbedPickerPropertyEditor.Web.csproj
@@ -159,6 +159,7 @@
     </ProjectReference>
   </ItemGroup>
   <ItemGroup>
+    <Content Include="App_Plugins\Dawoe.OEmbedPickerPropertyEditor\css\editor.styles.css" />
     <Content Include="App_Plugins\Dawoe.OEmbedPickerPropertyEditor\scripts\editor.controller.js" />
     <Content Include="App_Plugins\Dawoe.OEmbedPickerPropertyEditor\views\editor.html" />
   </ItemGroup>