Issue with drop visual indicators

[HybridSolutions]

Hi

First of all, congrats for this addon!

Using the latest version from CDN of both Editor and this plugin but the arrow is not centered. I have to put the CSS from index.css directly on my page to get it centered. Here's what happens:

Also, what is the correct way of changing the style of that dashed line without messing with the plugin code? Can it be done using CSS?

Thank you!

[HybridSolutions]

Meanwhile I managed to customize it with CSS to provide more accurate visual feedback. Here's a demo:

The CSS I used:

.ce-block--drop-target .ce-block__content{
          border-top: 3px solid #ff6ab4 !important;
          border-bottom: 3px solid #ff6ab4 !important;
        }
        .ce-block--drop-target:last-child .ce-block__content{
          border-top: 1px dashed #a0a0a0 !important;
          border-bottom: 3px solid #ff6ab4 !important;
        }
        .ce-block--drop-target:first-child .ce-block__content{
          border-top: 3px solid #ff6ab4 !important;
          border-bottom: 1px dashed #a0a0a0 !important;
        }
        .ce-block--drop-target .ce-block__content:before {          
          top: 50%;
          left: -20px;
          height: 8px;
          width: 8px;
          border: solid #ff6ab4;
          border-width: 2px 2px 0 0;
        }
        .ce-block--drop-target:first-child .ce-block__content:before {
            top:0;
        }
        .ce-block--drop-target:last-child .ce-block__content:before {
            top:100%;
        }
        .ce-block--drop-target .ce-block__content:after {
          background: none;
        }

[antoineol]

Brilliant! For a better dragging experience, I added pointer-events: none; to the arrow (to avoid disabling the drag detection when hovering over the arrow) and replaced borders with outlines to avoid shifting the content.

Like this:

.ce-block--drop-target .ce-block__content {
  outline: 2px solid darkgray;
}
.ce-block--drop-target:last-child .ce-block__content {
  outline: 2px solid darkgray;
}
.ce-block--drop-target:first-child .ce-block__content {
  outline: 2px solid darkgray;
}
.ce-block--drop-target .ce-block__content:before {
  top: 50%;
  left: -20px;
  height: 8px;
  width: 8px;
  border: solid darkgray;
  border-width: 2px 2px 0 0;
  pointer-events: none;
}
...

I wish something as big as Editor.js had a nice native D&D experience, e.g. like BlockNote (demo) 😅

---

Edit: I just found we can also disable the plugin embedded top border with a 2nd param to DragDrop constructor, like this:

new DragDrop(editor, 'none');

[HybridSolutions]

@antoineol My issue is that if you use a 1px outline or change color, you still see that dashed line on the bottom. Should be possible to override it using CSS.

I still prefer my visual style because when dragging to first or last position, it shows exactly where the item will be placed by the colored line. To avoid items moving because of borders, I updated the CSS to this:

.ce-block--drop-target .ce-block__content{
            box-sizing:border-box;
            -webkit-box-sizing:border-box;
            border-top: 2px solid #ff6ab4 !important;
            border-bottom: 2px solid #ff6ab4 !important;
            margin: -2px auto -2px auto;          
        }
        .ce-block--drop-target:last-child .ce-block__content{
            border-top: 1px dashed #a0a0a0 !important;
            border-bottom: 2px solid #ff6ab4 !important;
            margin: -1px auto -2px auto;
        }
        .ce-block--drop-target:first-child .ce-block__content{
            border-top: 2px solid #ff6ab4 !important;
            border-bottom: 1px dashed #a0a0a0 !important;
            margin: -2px auto -1px auto;
        }
        .ce-block--drop-target .ce-block__content:before {
            top: 50%;
            left: -20px;
            height: 8px;
            width: 8px;
            border: solid #ff6ab4;
            border-width: 2px 2px 0 0;
            pointer-events: none; /* avoid disabling the drag detection when hovering over the arrow */
        }

The drag & drop would be great if it behaved like in this sample: https://codepen.io/osublake/pen/RNLdpz

[antoineol]

For the default dashed line, that's what the second parameter is for:

new DragDrop(editor, 'none');

(see my edit above)

Then we're free to style however we want.

---

EDIT: I messed up between the d&d plugin line and the native editorjs line, which position is wrong and doesn't match any feature.

EDIT 2: I removed the native editorjs dotted like with the following CSS:

.ce-block--drop-target .ce-block__content:after {
  background: none;
}

---

I understand for the first and last, it's a good point. Ideally, we should have the same logic for every line, but there is no clue whether we're before or after the previous position :(

For consistency, I kept the arrow centered everywhere (to avoid the "is this a bug?" reaction), but that's a personal preference.

I agree for your preview! Or at least like Notion, which I find clearer than the default experience here. We could tune it a bit, but ideally it should be native to editorjs :)

[antoineol]

After playing a bit with it, here are the changes that give me an okay experience:

// keep the default border style, no second argument, otherwise the last selector need to be updated accordingly.
new DragDrop(editor);

.ce-block--drop-target .ce-block__content:before {
  /* Avoids a bug when dragging over the arrow */
  pointer-events: none;
}

.ce-block--drop-target .ce-block__content:after {
  /* Hides the default dashes */
  background: none;
}

.ce-block--drop-target
  .ce-block__content[style*='border-top: 1px dashed rgb(170, 170, 170);']:before {
  /* The fragile rule that moves the arrow, not only for the first element but all elements above the source */
  top: 0;
}

To go further, we could:

• Replace the border style to be more visible
• Replace border with shadow (to simulate an outline in one side only), but it would require to change the source code, currently designed to use borders
• Improve the selector to detect the direction, currently based on the strict style, which is very fragile. But it requires to change the plugin source code, again.

If changing the code, I would suggest to apply classes, e.g. on the dragged element (source) and the target element, to make style overrides easier.

[HybridSolutions]

I like it except the part we drag an element to the top. The position indicator appears below the first element and not after, but that probably just with code changes.

Dragging the item 4 to the top.

Made some changes in my styling and this is my final version. The arrow always points the position the element will be inserted.

[antoineol]

Weird, I have it at the correct position at the first and last position too. Same as you (for the first and last only). When trying my rules above, did you remove all others?

Anyway, if you have something working, that's good :)

[MarioRodriguezS]

@antoineol @HybridSolutions Thanks a lot for reporting and contributing to the issue. It was solved and the solution is available in the v1.1.14. The Readme was updated with the parameter to customize the indicator border, as described by @antoineol.

Cheers!