From 84aff86873da9412e2c3f499101438ea1a4f0a14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Szcz=C4=99=C5=9Bniak?= <szczesniakp@o2.pl>
Date: Mon, 11 Sep 2023 09:15:31 +0200
Subject: [PATCH 1/2] Add arrow to the horizontal drop target line.

---
 .../theme/ckeditor5-clipboard/clipboard.css   | 31 +++++++++++++++++--
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-clipboard/clipboard.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-clipboard/clipboard.css
index 5fbd3789315..04b4eb55ef1 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-clipboard/clipboard.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-clipboard/clipboard.css
@@ -3,10 +3,12 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
 :root {
 	--ck-clipboard-drop-target-dot-width: 12px;
 	--ck-clipboard-drop-target-dot-height: 8px;
-	--ck-clipboard-drop-target-color: var(--ck-color-focus-border)
+	--ck-clipboard-drop-target-color: var(--ck-color-focus-border);
 }
 
 .ck.ck-editor__editable {
@@ -23,14 +25,14 @@
 
 			/* The triangle above the marker */
 			&::after {
-				content: "";
+				content: '';
 				width: 0;
 				height: 0;
 
 				display: block;
 				position: absolute;
 				left: 50%;
-				top: calc(var(--ck-clipboard-drop-target-dot-height) * -.5);
+				top: calc(-.5 * var(--ck-clipboard-drop-target-dot-height));
 
 				transform: translateX(-50%);
 				border-color: var(--ck-clipboard-drop-target-color) transparent transparent transparent;
@@ -61,4 +63,27 @@
 	border: 1px solid var(--ck-clipboard-drop-target-color);
 	background: var(--ck-clipboard-drop-target-color);
 	margin-top: -1px;
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: calc(-.5 * var(--ck-clipboard-drop-target-dot-width));
+		width: 0;
+		height: 0;
+		border-style: solid;
+
+		@mixin ck-dir ltr {
+			left: -1px;
+
+			border-width: calc(.5 * var(--ck-clipboard-drop-target-dot-width)) 0 calc(.5 * var(--ck-clipboard-drop-target-dot-width)) var(--ck-clipboard-drop-target-dot-height);
+			border-color: transparent transparent transparent var(--ck-clipboard-drop-target-color);
+		}
+
+		@mixin ck-dir rtl {
+			right: -1px;
+
+			border-width:calc(.5 * var(--ck-clipboard-drop-target-dot-width)) var(--ck-clipboard-drop-target-dot-height) calc(.5 * var(--ck-clipboard-drop-target-dot-width)) 0;
+			border-color: transparent var(--ck-clipboard-drop-target-color) transparent transparent;
+		}
+	}
 }

From 863ecdaba579d1322c42cbca24a61fa68b0514b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Szcz=C4=99=C5=9Bniak?= <szczesniakp@o2.pl>
Date: Mon, 11 Sep 2023 11:26:43 +0200
Subject: [PATCH 2/2] Styling the drop down target line - docs.

---
 .../ckeditor5-clipboard/docs/features/drag-drop.md     | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/ckeditor5-clipboard/docs/features/drag-drop.md b/packages/ckeditor5-clipboard/docs/features/drag-drop.md
index 37888a31468..0ff9722cf2c 100644
--- a/packages/ckeditor5-clipboard/docs/features/drag-drop.md
+++ b/packages/ckeditor5-clipboard/docs/features/drag-drop.md
@@ -123,6 +123,16 @@ BalloonEditor.create(document.querySelector( '#editor' ), {
 	.catch( /* ... */ );
 ```
 
+## Styling the drag and drop
+
+The drag and drop target line color is managed by CSS variable (`--ck-clipboard-drop-target-color`). You can use the following snippet to change the color of the line:
+
+```css
+:root {
+	--ck-clipboard-drop-target-color: green;
+}
+```
+
 ## Related features
 
 * CKEditor&nbsp;5 supports dropping images from the file system thanks to the {@link features/image-upload image upload} feature.