Better usability: Links

Ideas
1

When a Link component is inserted it looks like this: (where XXXXXXX is the Text of that link)

<hr />

XXXXXXX

<q_a href="#">XXXXXXX<q_img src="http://placehold.it/50x50" /></a>

<hr />

As the XXXXXXX is double-clicked to edit the word XXXXXXX can be double-clicked again to word-select. Or select it manually.

Now, when pressing delete - the image is deleted, too.

The XXXXXXX must be selected very carefully.

<hr />

Once the XXXXXXX is deleted with the image is still there

<q_a href="#"><q_img src="http://placehold.it/50x50" /></a>

it is not possible to click in the design to add a new XXXXXXX, for example behind the image

XXXXXXX

<q_a href="#"><q_img src="http://placehold.it/50x50" />XXXXXXX</a>

or again before it!! XXXXXXX

<q_a href="#">XXXXXXX<q_img src="http://placehold.it/50x50" /></a>

Only when the A-Tag in the html-view is marked an then by pressing [ENTER] a new XXXXXXX can be inserted after the image. After that the XXXXXXX can be edited in design as well.

XXXXXXX

<q_a href="#"><q_img src="http://placehold.it/50x50" />XXXXXXX</a>

dear Developer, you should make the html-view editable for the XXXXXXX, or make an Option like the URL.

But either it should be possible to arrange the code

to turn this:

<q_a href="#">
    <q_img src="http://placehold.it/50x50" />
        XXXXXXX
</q_a>

to that:

<q_a href="#">
    XXXXXXX 
    <q_img src="http://placehold.it/50x50" />
</q_a>

( I made "q_" in front of each tag, because of a little forum bug)

2

Hey, sorry that the forum is so buggy that it didn't let you write the code of your question. We will fix this over the weekend.

When editing the link, you can use the arrow keys to move the caret around or use the Home/End buttons to place the caret before or after the image. Clicking doesn't work because there isn't anything to click on - if the image is the only element inside the link, it swallows up all clicks and you just end up selecting it.

Maybe we can improve this situation by ignoring clicks that are near the border of the image, but this can have side effects in small elements like icons not being selectable. We will think of a way to make this better.