Use the ObjectBrowser for creating links in text editor

[frapell]

I think the text editor needs a better UI for creating links, and I think re-using the ObjectBrowser for navigating/searching items in the site for this, could be a good idea, however I am having the hardest time in trying to make it happen.

If you think this is not a good idea, please let me know... If you think it is a good idea, I need help :)

I have added the openObjectBrowser prop to the LinkButton component and calling openObjectBrowser({ mode: 'link' }) inside the onAddLinkClick event. I've also wrapped the LinkButton export with withObjectBrowser.

I am stuck at this point, because I cannot find a way of passing the rest of props that ObjectBrowserBody expects, such as data or block... I have tried defining them as props for the LinkButton and defining some default values inside defaultProps but no dice... I do see the rest of the props being passed in tough, so not sure what am I missing so these new ones will be included.

I have read https://reactjs.org/docs/higher-order-components.html and while I understand the idea for HOC, I seem to be missing to fully comprehend what's going on...

I have commited what I did into branch https://github.com/plone/volto/tree/frapell-objectBrowser-links , if someone (cough, cough... @sneridagh :) ) wants to take a look and maybe give me some hints on what am I missing...

[tisto]

@frapell thank you for looking into this! We discussed this in the past and we think it is a good idea.

My only UX concern is that the user always has to reach for the sidebar to accomplish a rather simple task (adding a link). The good thing is that lots of user interaction already happens on the sidebar. If we want an object browser there is no way around re-using the sidebar object browser anyways...

[frapell]

@tisto I am no UX expert, but I like the workflow when working with blocks, using the right sidebar, so I believe it would be expected for a user to not only use the sidebar for navigating/searching for an object when adding a link, I also think this is where the different settings for the link should live... I'm thinking for instance when clicking an already created link, a sidebar should show up with different settings like whether the link should open in a new window, rel attribute, etc...

It is my understanding by reading the code, that the ObjectBrowser assumes it is being called from a Block, and this is not necessarily always the case for the DraftJS editor, so there's a challenge in there...

[tiberiuichim]

@frapell: I've been working a similar topic last days, editing draftjs entities with the sidebar. We took a different approach, wrapping our custom sidebar edit component in withObjectBrowser, instead of relying on the one offered by the block. You can see the "sidebar edit component" here: https://github.com/eea/volto-datablocks/blob/master/src/dataentity/components/EditForm.jsx and the way it's used here: https://github.com/eea/volto-datablocks/blob/master/src/dataentity/components/ConnectedDataInlineSource.jsx

It's very hackish and we're still working on it, but it might help you.

[frapell]

@tiberiuichim Thank you for that, however it is not giving me much help, but mainly because of me not fully grasping the big picture here...

If you see in my branch, for the file https://github.com/plone/volto/blob/d00c8adf0d65f34400b3295d632758ce236f4f83/src/components/manage/AnchorPlugin/components/LinkButton/index.jsx I am wrapping the LinkButton component with the withObjectBrowser HOC. The LinkButton component is the button that shows up in the inline toolbar for inserting a link.

The problem is when I click the link button, the ObjectBrowserBody from https://github.com/plone/volto/blob/d00c8adf0d65f34400b3295d632758ce236f4f83/src/components/manage/Sidebar/ObjectBrowserBody.jsx fails because it is expecting props that doesn't have, and I do not know how to pass them...

[tisto]

@frapell @tiberiuichim I highly appreciate you folks working on this and exploring the different options. My experience when it comes to UX discussion is always that you need to try out things before you can judge them (I hated the save icon in Pastanaga on the top at first and now I love it ;)).

So please go ahead. Hack, implement, propose solutions. Once we have something presentable we will give it a shot and we will ask @albertcasado (Plone UX team lead) for a feedback and review.

[frapell]

@tisto For sure! Do you have some hint on how to move forward with the issue I'm having? I'm kind of stuck

[tiberiuichim]

@frapell this should be:

this.props.openObjectBrowser({ mode: 'link' });

[frapell]

@tiberiuichim Yeah, that's happening in https://github.com/plone/volto/blob/d00c8adf0d65f34400b3295d632758ce236f4f83/src/components/manage/AnchorPlugin/components/LinkButton/index.jsx#L40 but the problem was that ObjectBrowserBody expects some props that I wasn't sure how to pass...

@tisto I have made another commit where I think I found a way to pass the props that ObjectBrowserBody is expecting in https://github.com/plone/volto/commit/dc4dea3f940140335801386cc4785853e74a8326

The current state is that when you click the Link button from the DraftJS editor, you get the sidebar and when choosing an item, the link is created...

I am identifying 2 issues atm:

1. When you change to another block, the link seems to be lost.
2. Find a way to make it work in richtexts that are not using blocks, such as the text field for News Item...

[tiberiuichim]

When you change to another block, the link seems to be lost.

Can you test if the entity is preserved if you change anything else in the block (like add a space)? I've noticed this behavior when mutating entities with draft, for the stuff I've linked before

[sneridagh]

The editor was enhanced with this feature some months ago.