Allow uploading files to Media Library via Insert Link dialog

Created on 15 August 2023, over 1 year ago
Updated 4 March 2024, 10 months ago

Problem/Motivation

Content creators want their Drupal authoring experience to be intuitive and forgiving -- and linking to Media/files in CKEditor challenges this, because files have to be added to the Media Library before you can link to them. Most commonly, people think about uploading a file at the point of need, not several steps ahead ("I'm making a link to this file, therefore I need to upload it now"). If you're working in CKEditor, adding a file to the Media Library takes you out of the authoring environment and requires a big context switch when the goal is simply to link to a file.

Steps to reproduce

Authors working in CKEditor who need to link to a new file, currently, must leave the editor (remember to save it first!), navigate to the Media Library, add the new file, return to editing the original content page, and insert the link.

Proposed resolution

Enhance the usability of the new Insert Link feature by adding a button or a link in the dialog, that provides the ability to upload a new Media item without leaving CKEditor.

One answer to this issue in contrib is Linkit Media Library . It provides a Media Library button in the Insert Link dialog. It brings up the full Media Library for selection, but, crucially, it has a field to upload a new Media item.

I'm indifferent on whether the full Media Library needs to be available to browse via the Insert Link dialog. The important thing is to be able to get a file into the Media Library without having to leave CKEditor.

Feature request
Status

Active

Version

11.0 🔥

Component
CKEditor 5 

Last updated 3 days ago

Created by

🇺🇸United States sclsweb

Live updates comments and jobs are added and updated live.
  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

Sign in to follow issues

Comments & Activities

  • Issue created by @sclsweb
  • Status changed to Postponed: needs info over 1 year ago
  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    Thanks for taking the time to write this up! 👍

    Enhance the usability of the new Insert Link feature by adding a button or a link in the dialog, that provides the ability to upload a new Media item without leaving CKEditor.

    Can you include a screenshot of what you mean by "the new Insert Link feature"? 🙏

    The important thing is to be able to get a file into the Media Library without having to leave CKEditor.

    That's already the case, if you add the drupalMedia toolbar item. But what you can't do there yet, is insert a link to the media item, instead of embedding the media item.
    For that, we already have Allow inserting Media not just as an embed (), but as a link Needs work .

  • 🇺🇸United States sclsweb

    Thank you for considering this! The new "Insert Link feature" that I referred to is the new core Link dialog with Linkit-type lookup capabilities (being developed in issue 3317769 Drastically improve the linking experience in CKEditor 5 Needs work .

    I've mocked up a couple of ideas for how it could look, but would ultimately want to defer to established styles and design patterns.

    The sites I support do use the drupalMedia toolbar item, and that will likely be our workaround for the CKE5 upgrade (if this new core feature isn't available in time, or if Linkit Media Library doesn't get upgraded for D10). It's acceptable as a workaround, but convoluted as a primary solution (I cringe to think about introducing this workaround to authors who are already reluctant to migrate to D9/10).

    Being able to upload a file and insert a link via either the Insert Link or Insert Media toolbar item would be a neat trick. What may(?) distinguish this issue from #3374056 Allow inserting Media not just as an embed (), but as a link Needs work is in this scenario, the resulting link stays inline -- whereas the example video in #3374056 looks like the media item becomes a separate block-level element. That's fine, but we need a way to keep the links inline too -- part of whatever inline text element it started as.

  • Status changed to Active 10 months ago
  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    Next time, please change the status, that'll make it clear the additional info is now present 😊

  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    #3: this indeed relates very strongly to Drastically improve the linking experience in CKEditor 5 Needs work , then!

    The only difference is that Drastically improve the linking experience in CKEditor 5 Needs work doesn't use media library itself, only autocompletion. What you're proposing could work, but I have doubts about making it so visually prominent — it reduces the smoothness of the link creation UX, don't you think? 🤔

  • 🇺🇸United States sclsweb

    Pardon my rough mockups -- no, it shouldn't be implemented as a giant blue button! I included that because it was an established UI pattern (and also easy to mockup).

    Are you saying you don't think the button approach belongs with the autocompletion workflow at all? Or that it just needs visual finessing so that it's more clear that it's a secondary action?

  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    Are you saying you don't think the button approach belongs with the autocompletion workflow at all?

    I'm not saying that (I'm no usability/UX/design expert), but I am indeed questioning that. It'd disrupt the smoothness of UX, and triggers a modal dialog from a popover, which IMHO is a bit questionable.

    But I do see how functionality like this could be very valuable in some scenarios. I wonder though if it wouldn't be more sensible to update the Media Library functionality to (after uploading a document) offer not just a button to embed the selected media item, but also to link to it?

    So, my counter proposal:

  • 🇺🇸United States sclsweb

    I ran this by a few content authors, and the rough consensus was that adding a button for linking in the Media Library, similar to the "After" that you mocked up, would be sufficient to meet the need for the original issue.

    A side question emerged, however, with the button labels. Multiple people thought/hoped the renamed button "Embed selected" would do something new/different/better than what "Add selected" currently does -- one guessed that it might display the document content in-the-page, like the contrib PDF project does. (This group is not satisfied with what they get when they insert/embed document media, though probably that is a whole other issue.) "Embed," as a button label, makes sense for images, but it over-promises on what you get for documents. It seems like the confusion lies between embedding the actual media content (for images) vs. embedding a mysterious box with metadata representing the content (for documents). Is anything possible to address that (either through labeling or functionality)?

  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    might display the document content in-the-page,

    That's totally possible already, and it's 100% dependent on the display mode being used (and the formatters used for that display mode).

    "Embed," as a button label, makes sense for images, but it over-promises on what you get for documents. It seems like the confusion lies between embedding the actual media content (for images) vs. embedding a mysterious box with metadata representing the content (for documents).

    Right, the challenge is that for some (proprietary) document formats, generating a preview is quite a complex undertaking. That aspect is independent of the scope of this issue though. Did you already search the media system component for existing issues related to that?

  • 🇺🇸United States sclsweb

    Somewhat off-topic, but say, hypothetically, if I were designing something to show document content-in-page -- that would probably want a custom media type to limit by file type and a contrib formatter, correct? I'm not aware of another document file formatter available in core besides Table/URL/Generic file(?). (FWIW it makes sense to me that the formatter for this might have to be contrib. I've always just provided the default set of media types for my users and hadn't realized until now that there was more interest in a differently-formatted document type.)

    I can't find any issues related to Insert/Embed action labeling or functionality related to documents by searching the media system component, except for Allow inserting Media not just as an embed (), but as a link Needs work and possibly CKEditor embedded media previews do not render with attached assets Active .

Production build 0.71.5 2024