🛠 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à.

[bertyhell]

This would be a nice option for adding web, mailto: and tel: links

Other than that, better integration with the major frameworks would be helpful: react, angular, vue

[jappyjan]

Hey @Alex-D would be nice to get some insights (without checking out the dev branch) on what state V3 is...

Like a roadmap or something...

Is it usable by now? When will it be usable?
Whats missing, etc...

Great work!

[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 :)

[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.

[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: