🛠 Trumbowyg 3 (WIP) • Open Discussion • Feedback are welcome

[Alex-D]

Trumbowyg 3

Hey, I'm Alex-D, aka Alexandre Demode. I'm a French Web Developer who has created Trumbowyg in 2012.
I left my job to devote myself to Trumbowyg and freelance.

If you can and want to support me, feel free to donate me recurring via GitHub Sponsor or via Patreon or one-time via PayPal.

Why?

First, Trumbowyg is old and based on jQuery. Nobody wants that anymore.

To remove jQuery, I need to rewrite a lot of code in core and plugins. As long as I need to rewrite a lot of code, I want to rewrite all the code and try a new structure for better modularity, flexibility, and extensibility.

Goals

• Vanilla JS
• Get rid of execCommand
• ~20ko for the core (8-10ko gzip)
• API driven
• Split Core and UI (see below)
• Unit tests for the Core
• Better Documentation
• Explicit calls (no more wizardry)
• TypeScript description file
• Official support of Vue.js, React and Angular

Details by module

Core

• Abstract Syntax Tree: allow to split editor content from output format (semantic HTML, non-semantic HTML, custom HTML, Markdown, ...)
• History, Ctrl+Z 📚
• Clipboard, for pasting things from anywhere without explosion 💥
• Keyboard, for shortcuts ⌨
• Mobile support
• CJK IME (composition) support
• Better API
• Simplified Selection manipulation

UI

• Button Pane (relative, fixed, floating)
  • dropdown
  • button
• Modals
  • input (text, file, checkbox, radio)
  • select
  • confirm
  • cancel
• Themes
  • Default
  • Dark
  • Maybe more, like a Material one

Why am I posting that here?

I want to get feedback as soon as possible in the development process.

So if you guys have some links to share which can help me,
or some ideas you want to see in Trumbowyg, let me know by commenting this issue :)

How to help me?

Send me new ideas to question my plans and improve some parts.
And as I said in the introduction, you can donate me recurring via Patreon or one-time via PayPal to help me to invest more time in this project.

Thank you

From 2012, you are more and more to use Trumbowyg, which was started as a challenge/joke on IRC.
But today it's a project with more than 2500 stars, 600 issues, 250 pull requests, 850+ commits from 130+ contributors from almost everywhere in the world: that's crazy! Internet's magic.

Follow the development

A new branch is here, more like a draft/proof of concept for now: https://github.com/Alex-D/Trumbowyg/tree/v3

:)

[dolbex]

Alex,

I still love your plugin, even with that nasty jQuery in 2018 :) Seriously, it works very well and we like it a lot. That said, glad to hear you are moving forward with the project and modernizing it. A few things that we would love to see in the new version:

• Better documentation on the API / plugin development
• Simplify the selection / range API so that it's easier to author plugins.
  • getSelectionNode
  • getSelectionParentNode
  • etc
• Better support for images and image manipulation
• Floats / Flex Support
  • Ability to select images / elements and float them to the right / left (we currently implement our own plugin for this)
• Simple API to tie into for VueJS / React / Angular etc
  • Cleaner event systems. For instance: change and paste are redundant for us most of the time. While it might be great to have a paste event it would / should fire the change event as well. Currently we have to tie into both when detecting changes.

I'm updating this list as I work on a new integration

[Alex-D]

Thanks!

What did you mean by "Floats / Flex Support"?

I'm OK with all your other suggestions :)

[amakh]

Hello,

Thanks for your plugin, we are using it with our clients and here is what they usually struggle with :

• Manipulating images (drag & resize)
• Flex support, I agree that the way of placing elements as grid could be a lot better
• Having a simpler HTML (less tags & css when it's not needed)

The plugin customisation is very great and easy to use, keep it that way 👍!

[Alex-D]

I'm not OK with image manipulation since I think it should be managed in CSS by website theme. Maybe an option to add some classes on the img tag or something like that.

Simpler HTML is WIP since developer may choose a built-in or custom render method thanks to abstract format.

Flex support, if you are talking about some drag'n'drop and things like that, I will not do that in core, but why not in additional modules :)

[LosD]

We're probably a special case, but we're using Trumbowyg for adding WYSIWYG inline on quite small boxes of text, so the controls are quite a bit larger than the text field, which means that were already doing a kind of floating controls:

(Here, the left box is being edited).

It took quite a bit of juggling to get Trumbowyg to do that, so built-in floating controls would be perfect for us! :)

[Alex-D]

Since Core and UI should be separate modules, it will be easy to do that. Maybe I will make floating control officially :)

[kurupted]

Hey Alex,
Love the editor. I have a suggestion for v3: a simple way to define the action of custom buttons. Namely, a pattern to define what html is inserted when the button is clicked. Right now I simply want to add a blockquote button (without having the full Formatting dropdown), and I'm not sure how. If I could define the HTML string associated with a button, I could say, eg
quoteButton: { insertHTML: '<blockquote class="someClass">SELECTED_TEXT</blockquote>' }
this would be useful for anytime you want a button that simply wraps the selected text (if any) in some html. With v2 there's the "preformatted" plugin that supports only the pre tag -- a flexible solution would be better.

Thanks for all your work!

[Alex-D]

@kurupted Since I want a agnostic description in the v3, I think it will not possible to just add the HTML template. But, I will simplify custom buttons :)

---

v3 branch is born!

For those who would be interested, I've just push my first draft/proof of concept on the newly created v3 branch here: https://github.com/Alex-D/Trumbowyg/tree/v3

I am working on selection management which was bad on v2. For now I can set and get a selection like setSelection(5, 12) or getSelection() // => [5, 12] where 5 and 12 are absolute range start and end indexes. It's buggy for now with non-text tags (like img) but it works with all kind of text-related things (strong, emphasis, lists, line breaks, ...)

Thanks for your feedback and support!

[LosD]

Not that much to see yet, but the way you're spec'ing out everything is very nice.

I'm not sure if the reduce approach to rendering will be enough for more complicated scenarios like tables (it might, though). But I guess that doesn't really matter for the overall idea.

[Alex-D]

Yeah, it's just a proof of concept, the goal is: take the JSON and give some HTML, Markdown, or whatever at the output. Algorithms are in a dirty state for now.

Then, by manipulating selection in absolute indexes, I can render the JSON to HTML, then restore the selection and voilà.

[realulim]

I suspect Trumbowyg is mostly used in the context of a larger system, so most likely there will already be a jQuery dependency. Getting rid of jQuery is therefore not a big win in many cases. Realistically, you will incur the jQuery dependency sooner or later in any project, as there will be something you need from jQuery's vast ecosystem of libraries.
Nevertheless, a rewrite is always good and if jQuery doesn't make things easier for you, then by all means get rid of it :)

[LosD]

@realulim I'm using Trymbowyg for a rather large Angular project, and we depend on JQuery for one single reason: Trymbowyg.cSo at least in our case, it's a big bonus.

In general, I don't really think most Angular (and React) use Jquery for much other than satisfying other third party dependencies.

[dolbex]

How is it going Alex? I really just wanted to chime in and tell you my team is all rooting for you. Hope you took some time off during the Holidays!

[Alex-D]

Happy new year! 🎉

Yep, I took a break :)

I'm currently working on my website to launch my freelance activity since donations for Trumbowyg does not allow me to be 100% focus on it (I'm human, I need to eat :D).

But I will switch between Trumbowyg and my website next weeks, and post some news here about my progress.

[dolbex]

Of course! Look forward to seeing updates as they come. Good luck with everything and don't be afraid to reach out if you need a hand!

[Alex-D]

Hi,

There is no roadmap since I'm not actively working on v3 for now.

I plan to start working back on v3 very soon; I'm just finishing some things for the next major release of another project of mine: Monitoror.

I need to do some researches before continuing the dev.

I will post some news here in the next few days :)

Do not expect any beta before few months.

[gbjbaanb]

I guess that would be https://monitoror.com/ ;)

[logixtreeCode]

Not sure, If someone has commented this one. But a possibility to add codemirror or Prism for syntax highlighting and line numbers when we switch to code version. Maybe, I haven't explored much.

[Alex-D]

We should consider that as a plugin since it's really heavy, but why not :)

[jaminellis]

Any update on V3? It's been a while. Something that worked with VueJS would be awesome :D

[Alex-D]

Hey, here is some news!

Current Status: Research & Development

I'm in an R&D phase, and after a really long time of research, I've worked with the Snabbdom virtual DOM library in a small side-project^WIP to see if it can fit the Trumbowyg v3 needs.

The conclusion of this test is that it can work very well 🥳

Snabbdom provides a light way to do DOM<->VNode transforms. I need to check how to abstract the render to get custom things in the Trumbowyg view mode (image resize handles, visual Markdown guides, etc.)

And I need to check how can I work with the user selection while editing the text via Snabbdom.

I'm also thinking about allowing to avoid Snabbdom when using a framework which gives an h(tagName, attrs, children) via an abstraction layer, but I'm still not sure about that for now. It seems hard with Angular, I can't find any h-like render method.

Hope the news looks good for you :)

[Jack-G-Smith]

hi there! any new updates on this project? any way for the community to help out?

[volomike]

The ability to change tags. When we switched to HTML5 and away from XHTML, we moved from EM and STRONG to I and B again.

[LosD]

@volomike No... No we didn't.

From the HTML 5.2 Specification about i:

Authors are encouraged to consider whether other elements might be more applicable than the i element, for instance the em element for marking up stress emphasis, or the dfn element to mark up the defining instance of a term.

From the HTML 5.2 Specification about b:

The b element should be used as a last resort when no other element is more appropriate. In particular, headings should use the h1 to h6 elements, stress emphasis should use the em element, importance should be denoted with the strong element, and text marked or highlighted should use the mark element.

Anyway, you can easily disable it, by changing the semantic option to false (actually, I thought that was the default?):

$('.trumbowyg').trumbowyg({
    semantic: false
});

[lofcz]

Really looking for v3 and I second community request for floating controls. Our use case would be to replace medium-editor.js with trumbowyg for chat inputs:

[Jack-G-Smith]

hi, how's this project been coming along? would love to hear an update if you have some time :)

[afbora]

Any updates v3? Looking forward to use for Vue 👀

[nam-co]

Hi @Alex-D I just discover Trumbowyg, congrats, maybe you can sell licenses at a low price and get the funding to continue working on it, hope you can make it to V3, good luck

[ZeoNish]

Thank you for your hard work!

[WebCimes]

Hi @Alex-D, I would like to know if the V3 is always planned ?
I have see that the link https://github.com/Alex-D/Trumbowyg/tree/v3 doesn't work anymore.
I love your editor and I hope it will working with vanilla js without jquery.
Thanks for your work :)

[Alex-D]

I've moved the v3 to a private repository for now.
I do not work on it for now, and I do not know when I will have the time to work again on the v3.