Invoke assets selector from custom editor

Development
1

Hi

Is it possible to invoke the asset select popup from, we might have to look into adding another rich text editor that we can expand with some custom logic, but really would like to use the asset picker :slight_smile:

2

No yet, sorry. You can only write a custom picker using the API. Some editors also provide custom pickers.

Btw: We can also talk about this, I am not happy with the two editors either.

3

Cool, current we have decided on having Markdown as our rich text markup, to ensure a structure that we can make work cross platform and cross device.

What we are facing is that we want to adress two things short term:

  • Closer to WYSIWYG, since the editors will be more used that way for work, and markdown is a bit confusing for them.
  • We need to do some extensions to markdown to acoomidate some markup needs, hence adding some editor extensions to that.

Long terms we might need to come up with our own markup language that work crossplatform, similar to https://www.contentful.com/developers/docs/concepts/rich-text/

4

This looks very similar than slate, but personal I think that markdown is good enough and also a very short representation, in contrast to json.

But it looks very similar to slate (https://www.slatejs.org/examples/richtext) or other more modern editors.

5

It’s based on slate, but they have written their own json based markup.

I agree that markdown fits most purposed, but we are hitting some deadends that we need to solve, in terms for additional markup, which might at some point tweak markdown that much that it doesn’t make sense.

But to begin with we will use markdown and do mimor extension

6

But it looks very similar to graphms: https://graphcms.com/docs/reference/fields/rich-text/

In general I see a lot of conflicts here:

  1. Some editors want to have full control over html.
  2. Some editors want to use the tool they are used.
  3. Some developers want to have a very abstract text model.

I think markdown is a like in between all of them.

When writing a custom editor that produces the AST, you have to parse it and there is general support for that.

I mean with markdown there are libraries for every programming language and usually you have a visitor pattern to modify the markdown or html before it is rendered.

Render the HTML then on the server side like graphcms I can understand from the usability aspect, but is a horrible idea in the long run, because you create a a dependency in your rendered.

7

I agree in all of this, we don’t want to use HTML, we want very structure limited markup, which markdown is.

What we aim for is a structure that is easy portable to different devices and platform, but also something that is easy for the editor to understand and work with.

But we also have a need to for an instance to define an image with caption with a strucutre, and also fact box and some smaller other stuff

8

The image is no problem.

See the images on this site: https://squidex.io/post/introducing-notifo

I use simple images for that and then a custom extension to markdig.

namespace Squidex.Website.Model.Utils
{
    public sealed class CustomImageRenderer : LinkInlineRenderer
    {
        protected override void Write(HtmlRenderer renderer, LinkInline link)
        {
            if (link.IsImage && !string.IsNullOrWhiteSpace(link.Title))
            {
                var url = link.GetDynamicUrl?.Invoke() ?? link.Url;

                renderer.Write("<div class=\"image\">");
                renderer.Write("<img");

                renderer.Write(" src=\"");
                renderer.WriteEscapeUrl(url);
                renderer.Write("\"");

                renderer.Write(" alt=\"");
                renderer.Write(link.Title);
                renderer.Write("\"");
                renderer.WriteAttributes(link);
                renderer.Write(" />");

                renderer.Write("<span class=\"image-label\">");
                renderer.Write(link.Title);
                renderer.Write("</span>");

                renderer.Write("</div>");

                return;
            }
            else
            {
                var url = link.GetDynamicUrl?.Invoke() ?? link.Url;

                if (url.StartsWith("https://gist.github.com", StringComparison.OrdinalIgnoreCase))
                {
                    renderer.Write($"<script src=\"{url}.js\"></script>");

                    return;
                }
            }

            base.Write(renderer, link);
        }
    }
}