FEATURE: Show ckeditor drag & drop indicators

With this change, the user can see an indicator where selected elements in the inline editor would show up.
The drag & drop feature worked before, but this makes the feature much more usable and intuitive.
It even works between multiple editor instances.

Resolves: #3977

Author: Sebobo

packages/neos-ui-ckeditor5-bindings/src/cke-overwrites.vanilla-css

@@ -11,3 +11,76 @@
 .ck-aria-live-announcer {
     display: none;
 }
+
+: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);
+}
+
+/* Drag & drop caret */
+.ck.ck-editor__editable .ck.ck-clipboard-drop-target-position span {
+    position: relative;
+    bottom: calc(-.5 * var(--ck-clipboard-drop-target-dot-height));
+    top: calc(-.5 * var(--ck-clipboard-drop-target-dot-height));
+    border: 1px solid var(--ck-clipboard-drop-target-color);
+    background: var(--ck-clipboard-drop-target-color);
+    margin-left: -1px;
+}
+
+.ck.ck-editor__editable .ck.ck-clipboard-drop-target-position span::after {
+    content: '';
+    width: 0;
+    height: 0;
+
+    display: block;
+    position: absolute;
+    left: 50%;
+    top: calc(-.5 * var(--ck-clipboard-drop-target-dot-height));
+
+    transform: translateX(-50%);
+    border-color: var(--ck-clipboard-drop-target-color) transparent transparent transparent;
+    border-width: calc(var(--ck-clipboard-drop-target-dot-height)) calc(.5 * var(--ck-clipboard-drop-target-dot-width)) 0 calc(.5 * var(--ck-clipboard-drop-target-dot-width));
+    border-style: solid;
+}
+
+.ck.ck-clipboard-drop-target-line {
+    height: 0;
+    border: 1px solid var(--ck-clipboard-drop-target-color);
+    background: var(--ck-clipboard-drop-target-color);
+    margin-top: -1px;
+    position: absolute;
+    pointer-events: none;
+}
+
+.ck.ck-editor__editable .ck-widget.ck-clipboard-drop-target-range {
+    outline: var(--ck-widget-outline-thickness) solid var(--ck-clipboard-drop-target-color) !important;
+}
+
+.ck.ck-editor__editable .ck-widget:-webkit-drag {
+    zoom: 0.6;
+    outline: none !important;
+}
+
+.ck.ck-clipboard-drop-target-line::before {
+    content: '';
+    position: absolute;
+    top: calc(-.5 * var(--ck-clipboard-drop-target-dot-width));
+    width: 0;
+    height: 0;
+    border-style: solid;
+}
+
+[dir="ltr"] .ck.ck-clipboard-drop-target-line::before {
+    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);
+}
+
+[dir="rtl"] .ck.ck-clipboard-drop-target-line::before {
+    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;
+}