Inserting/Editing links is hard

[duskhacker]

You can only insert them in particular places, and making them "inline" is impossible. By "inline" I mean; I'm writing a line of text, and I want to put a link there, with some highlighted words that are the link, and continue with the words of the line. This is a very typical action and GrapesJS just won't let me do it.

Once you do get it dropped somewhere, it's hard to get the editor to actually edit them. You have to time the double-click, then click, just right to get it into the edit mode. I can't imagine giving my users that.

I'm going to give up and disable links altogether for my project, since I'm using the email preset, and the target document is an email, I'm going to rely on the typical email client's functionality of making a link clickable. I'm hopeful that this gets worked out in the near future. I understand that it's probably a hard problem.

[ryandeba]

Hi @duskhacker,

I agree that link inserting/editing is not as intuitive as I would like, and am currently working on customizing it through a plugin. Here's a brief outline of what I'm working on, let me know if you're interested and I can provide the code (it's currently buried in a single plugin with lots of other customizations, so I'd need to do some work to isolate it):

• Link editing is done through a custom modal rather than the component settings
• When creating new link through the RTE toolbar (clicking the "link" button), the modal immediately appears and allows you to configure the link options (href, title, content)
• You can also open the modal by double clicking on an existing link. This kind of gets in the way of enabling the RTE, but I think it's a fair trade-off since you can edit the link content/text from the modal.
• The modal provides a more user friendly way to create different types of links (mailto, custom url, pre-defined links, anchor)
• I am also disabling all the default traits for links (might replace it with a custom "Edit Link" button...not sure yet) so that there is only 1 way to change the link attributes

[NorthstarTech]

I am looking for the same functionality and I am not getting it from rte or ckeditor. So whatever code you could provide would be helpful.

The growing pains with ckeditor and rte are too much for me. I might just switch to pell.

[duskhacker]

@ryandeba Yes, I'd also be very interested in this work. IMHO, what you are describing seems like the baseline of what is needed for hyperlink editing, and probably should be a standard plugin referenced from the main repository once you are done.

As for the RTE editor, are you talking about the built-in one? I've been using CKeditor, would I have to ditch that to use your work? I'm ok with trying that, just curious. If it's based on the built-in editor, then maybe you should form it with the goal of just getting it accepted into the core.

Thanks for the offer, I'm looking forward to trying it.

[ryandeba]

@duskhacker Yes, the customizations that I'm making use the built-in RTE. I'm not sure how well it would work with CKEditor...part of the code replaces the default link button in the grapes RTE, so that portion would definitely need to be modified. If you want to stick with CKEditor, I think it would be better to look into customizing how that handles links rather than making the modifications in grapes, but that is entirely up to you of course.

I'll try to make my code available in the next couple of days.

[ryandeba]

Here's an example of my custom link editor (aside from disabling the default link traits as outlined above): https://jsfiddle.net/gwojsok7/3. Apologies for the state of that code! This was a total rush job pieced together from several previous revisions that have undergone some major refactoring, and jsfiddle completely destroyed the indentation of the html template :(

This example also uses Vue for the dynamic modal content, but it could be refactored to not require it. That would almost certainly need to happen before considering getting it accepted into grapesjs core.

I'd love to get some feedback regarding the functionality from anyone that tries it out! If there is any interest in pursuing this any further (open source plugin or submitting to merge into core), let me know and I can spend some more time on it.

[NorthstarTech]

Would you also be working to support the proposed change from RTE to pell?

The jsfiddle works really well for what I have in mind. What kind of timeline are we working with here? I am going to play around with it more before I offer my thoughts.

[ryandeba]

I could look into a pell implementation at some point, but I would want to focus on a core/plugin integration first. I'm never used pell before, but I suspect that I would have the same thoughts on that as I do regarding CKEditor: the better option would be to customize the pell/CKEditor link editing functionality rather than grapesjs.

Not sure what to tell you on timelines at the moment - I just work on this stuff whenever I have the time and interest :)

If you don't mind answering, could you help me understand why you are looking to replace the default RTE with something else (pell/CKEditor)? I've looked into using a different editor myself, but have opted for customizing the built-in RTE instead and have found it to be much easier that way. What features and/or functionality is the built-in editor missing that you require? I've found it to be pretty easy to implement many of the functions documented here...would it be worthwhile to spend time on an improving the built-in RTE with more of those options?

This is probably getting a bit off-topic, but I've recently been working on moving the built-in RTE toolbar into a new panel and adding a lot of functionality - screenshot. In my opinion, using a panel like this (along with some other customizations) makes enabling/disabling rich text editing more user friendly. This is very much a work-in-progress, but if anyone is interested I can work on making the code available.

[NorthstarTech]

I ask about pell because it's on @artf's roadmap. Currently RTE is providing a lot of challenges to customize for link. I want to provide a few buttons that lead to different modal dialogs. The commands on the list are great but when the functionality like link get more complicated. I have invested time in RTE and ckeditor. Both frustrate me. Going off on my experiences so far, RTE is the more stable option. Pell is my back-up if I can't get what I need from RTE.

If you can provide any help or direction with what you have got with this plugin, a link dialog is a must for me. Any code you can provide for the plugin would be great. After working on your jsfiddle, I would add for my own needs, a target.

On the off-topic, my users would feel more comfortable with an inline editor.

[duskhacker]

@ryandeba

If you want to stick with CKEditor

I'm not married to the idea of using CKEditor, I started using it in the beginning because it seemed more full-featured, but I'll take "actually works" over "full-featured" any day. I wouldn't worry about CKEditor, I only asked about it to understand what the ramifications to me were and what I'd have to do.

Thanks for making your code available. I've moved on from the editor portion in my project at the moment, but will be circling back around to it in the next few days, so I'll try your code then.

[ryandeba]

Thanks for the additional info @NorthstarTech! I didn't realize that pell was on the roadmap...I'll have to look into it some more when I have time.

[artf]

@NorthstarTech actually the statement about the Pell is already checked. I've started from the Pell code (which is very small) and adapted it to my needs (credits). That's all, probably I should update that statement, I apologize for the confusion. By the way, thanks to everyone for suggestions and I agree that default RTE is too much raw but I see it as a good compromise for the core (Ryan has shown its extendability). For a more complex and ready to use solutions I think third party WYSIWYG plugins are what we need. Unfortunately, at the moment we have only CKEditor Plugin, probably it's not the best fit for everyone and what makes matters worse seems like I broke something 😬 IMHO the first thing to do is to fix that bug (not in the release of this week, which I hope to push today, but probably the next one) and then maybe look around for a better WYSIWYG to integrate as a plugin (How-To) What do you think?

[artf]

FYI CKEditor issue should be fixed with this release https://github.com/artf/grapesjs-plugin-ckeditor/releases/tag/v0.0.9 (demos not yet updated)

[duskhacker]

FYI CKEditor issue should be fixed with this release https://github.com/artf/grapesjs-plugin-ckeditor/releases/tag/v0.0.9 (demos not yet updated)

@artf Well, almost. When you double-click on an existing link to edit it, only the "Display Text" is populated in the modal, the URL is not populated.

[artf]

@duskhacker I'm trying the behavior described in the demo and can't reproduce it

[duskhacker]

@duskhacker I'm trying the behavior described in the demo and can't reproduce it

@artf Thanks for looking and updating the demos. I can't reproduce it in the demo either, so it's probably something to do with my own implementation. I'll have to go back over mine.

Thanks again.

[dmac1025]

It seems to be when you reload the content via setComponents. In the demo, if you drop a text block onto the canvas, and add a link via CKEditor. In the console run editor.getHTML() -> copy the output, clear the canvas and run editor.setComponents(copiedHtml), you can see the behavior. If you look at the components in localStorage, you can see on page load or using the method described above that a parent div component is created and 2 child components are added. If you double click on the text block or link, and re-check the component structure in localStorage, it's now a single component with no children. If you manually remove the contenteditable and data-highlightable attributes from the link at this point, clicking on the link will work as expected. I'm trying to figure out how to solve this behavior with no luck yet.

[kuldeepcis]

https://jsfiddle.net/gwojsok7/3

Link data not fetched after reload the page.

[lahdekorpi]

I've been trying to have a nicer user experience by trying to disable the rte when a link is added and then calling editor.select() on the newly created link component.

But so far, I only get the component:create event for the link when I manually click away from the editor. Does anyone have any ideas on how to do this programatically?

result: (rte, action) => {
    ...
    rte.insertHTML(`<a class="link" href="">${rte.selection()}</a>`);
    rte.disable(); // Does disable the contentEditable indeed but doesn't create the link component
    editor.select(null); // Doesn't work either
    ...
}

[artf]

Hi @lahdekorpi I think something like this should work

      result: rte => {
       // Use a custom attribute in order to find the component later
        rte.insertHTML(`<span data-selectme>${rte.selection()}</span>`);
        const sel = editor.getSelected(); // get the currect selected text component
        sel.once('rte:disable', () => {
          const toSel = sel.find('[data-selectme]')[0]; // Find the componenet to select
          const attr = toSel.getAttributes();
          delete attr['data-selectme'];
          toSel.setAttributes(attr); // remove the custom attribute
          toSel.set('selectable', true); // ensure the component is selectable
          editor.select(toSel);
        });
        sel.trigger('disable'); // disables editing on the current component (this will also trigger the parser)
      },

[yevhenshashnin]

Hi @artf. I'm trying to use your code. But I have undefined in toSel. I think that my sel is not correct. Because I have there object r It would be great if you have suggestions.

[artf]

@YevhenShashnin updated the example as the RTE enable/disable functions became asynchronous.

[dangngocthanhh]

@artf Sorry for bothering you, I've recently started using and integrating GrapesJS into my project. My project is coded in ReactJS, and I'm wondering how to edit the content of a link block. Even on the GrapesJS demo page at https://grapesjs.com/demo.html, I couldn't edit the content of the link. In the settings section, I can only edit the href. The content still displays as "Link" even though I've tried double-clicking on it or editing in the title section of the settings, but it's still not effective. If you know how to fix this, could you please let me know? Thank you.