Manage Media from frontend easily?

[RemcoW2002]

Hi there, I am looking to create a website made for documentation, similar to how notion.so is structured.

One of the primary functions we are looking to add is to allow maintainers of the documentation to easily add images, by copy and pasting or even dragging and dropping from a different program / file. (Similar to how you can copy / drag images from your screenshots to a OneNote document.

Here is an example of what I am looking for:

example.mp4

Now I did some research on this and came to the conclusion that we probably have to make a custom part to implement this, because from what I can tell the way the Media Library is structured it isn't really built to take in images from the frontend, at least not in this way. This seems relatively possible to do out of the top of my head but I am not the greatest when it comes to this stuff so I think I might run into some challenges and therefore will probably have to spend some time figuring this out.

Therefore I was wondering if my assumption was correct and I indeed do need to create a custom part to implement this functionality and that there isn't some standard functionality that could make this work that I overlooked and therefore wasting my time.

EDIT: After some brainstorming and looking through my options I concluded that this may be my best option:
Create a custom DocumentPart, and integrate some third part markdowneditor into it and change the configuration of it so I can make it work with Orchard Core. My question of course still stands whether this is the best solution?

Any tips, advice or perspective on the above is very much welcome and appreciated.

Thanks in advance for your insight!

[Piedone]

Pasting images into editors in a way that they're saved to the Media Library as files is not supported (#6145). However, with Trumbowyg fields (the built-in HTML WYSIWYG editor), you can paste images as base64-encoded URLs (i.e. the files will be embedded into the markup, as opposed to saved as files). This is less efficient, just FYI.

You can use OC's built-in MarkdownBodyPart to provide a base of the editor, and add something that'll upload pasted images (the editor plugin used is EasyMDE; check out what other people have done on this front from here: Ionaru/easy-markdown-editor#7 (comment)).

When working with content items on the frontend, keep security in mind, and e.g. don't let people save custom HTML, or browse the Media Library with a Media Field. See https://docs.orchardcore.net/en/latest/reference/modules/Markdown/#sanitization.

Tips for managing content items from code, what you'll need: https://github.com/Lombiq/Orchard-Training-Demo-Module/blob/dev/Lombiq.TrainingDemo/Controllers/PersonListController.cs.

[RemcoW2002]

Thank you very much for your reply, I got an example working using Trumbowyg which also a nice way to learn implementing custom parts and content types for the first time.

One thing that did occur was that Trumbowyg has plugins to extend its functionality, though implementing one of these plugins completely breaks the styling of the whole website. I used the resource manager to define these scripts and in there also the plugin. This then caused the website to break in terms of styling.

Does this sound like a common issue when trying to extend scripts in the resource manager with plugins, or is this more likely a trumbowyg specific issue?

[Piedone]

This is not common, so should be something specific, check out in the browser console what the exact issue is. However, Trumbowyg, it being an HTML editor, is not necessarily the best for such a documentation site, using Markdown would be more appropriate for me. I just mentioned that as an FYI.

[RemcoW2002]

I figured out it had to do with a particular jquery-resizable dependency which I wasn't referring to correctly so it's solved. And indeed I think I will switch to an actual markdown editor instead. I kind of jumped in too quickly with trumbowyg sort of missunderstanding exactly what it was.

Also is there some reference or short docs talking about how I can extend existing parts? Is this just a matter of:

1. Inheriting from the original MarkdownBodyPartDriver
2. Creating custom editor/display shapes
3. Extending the EasyMDE instance via JavaScript

Or am I missunderstanding your suggestion and is there a different/better approach you'd recommend for extending the built-in part?

Thanks a lot for your time and your helpful insights!

[Piedone]

What kind of extensions are you looking for, adding EasyMDE plugins? Because that you should be able to do by including your custom JS that initializes that plugin (I don't know how EasyMDE discovers plugins, but you need to plug into that). That can happen by e.g. adding a shape override for one of your content items' shapes, or displaying a shape with that JS inclusion (and whatever other initialization logic is necessary) from a custom content part's shape.