search

Alex-D / Trumbowyg

A lightweight and amazing WYSIWYG JavaScript editor under 10kB
https://alex-d.github.io/Trumbowyg
MIT License
4.01k stars 613 forks source link

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

Closed Alex-D closed 3 years ago

Alex-D commented 5 years ago

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

Details by module

Core

UI

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 commented 5 years ago

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:

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

Alex-D commented 5 years ago

Thanks!

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

I'm OK with all your other suggestions :)

amakh commented 5 years ago

Hello,

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

The plugin customisation is very great and easy to use, keep it that way đź‘Ť!

Alex-D commented 5 years ago

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 commented 5 years ago

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: image (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 commented 5 years ago

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

kurupted commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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!

tyronx commented 5 years ago

Just my 2 cents: I swear by jQuery for dozens of projects of personal and commercial nature. I see the dependency on jQuery rather as a plus than a downside. If dropping jQuery comes at a significant cost, I would suggest to stick with it.

Alternatively maybe you could perhaps just ship the editor together with only jQuerys selector engine (https://sizzlejs.com/), since thats the one component that notably speeds up development of javascript projects.

teemukaisla commented 5 years ago

Hello!

I wonder why bold, italic, underline, strikethrough buttons can be used like with many other wysiwyg editors. Trumbowyg works like this (latest browser versions):

Edge After you pressed bold and start to write, only one character is bolded a the rest are not bolded

Firefox and chrome After you pressed bold and start to write, no character is bolded

But no panic. I made the plugins and now bold, italic, underline, strikethrough buttons work like I wanted. It's still same old document.execCommand("italic", false, null); command, but in plugin it works like I wanted.

So my question is:

Will the new version work like this:

After you pressed bold and start to write, all characters are bolded until you press bold button again. You can see when the bold button is on.

Cheers Teemu Kaisla

Alex-D commented 5 years ago

Hey!

I think this is due to the semantic mode enabled. Try to disable it.

And yep, I want to fix that in v3 since I hope do less hacky things :)

kelvindc commented 5 years ago

for replacing jQuery, I suggest using something like this: https://github.com/vladocar/femtoJS/blob/master/src/femtoJS.js

other suggestions for v3: auto html code and css style clean up, the output html of editor contains a lot of junk in-line css style which could be a result from multiple editing or copy & paste, it would be good to keep it clean

dolbex commented 5 years ago

Possibly just a “paste clean” ability

ram-you commented 5 years ago

Hi, any estimated first release date?

Alex-D commented 5 years ago

Not before few month, I'm working on another project for now: @Colllect

dolbex commented 5 years ago

Looks awesome @Alex-D. Love the marketing site. We would really love to see Trumbowyg get some love after you're done!

latcomsystems commented 5 years ago

Hey Alex - great plugin. I have a fix for all your SVG icon issues You can see what I commented out and replaced in trumbowyg.js in the attached image. trumbowyg_svg_fix

gbjbaanb commented 5 years ago

TBH getting rid of jQuery is a fair thing to do if you want, but hardly something users are crying out for. and many of the other features are almost irrelevant - you see, Trumbowyg shoulnd't try to be yet-another-tinymce but stick to its strengths of being small and fast and light. Maybe add some more formatting options, or better inline-editing options, but don't bloat it up like the other editors out there and simply copy them.

Also, nobody wants a theme - they want css that fits with their own site's style, so either keep it really simple, or use css and document what to change to make your editor fit in where its embedded.

Mobile support is a definite plus these days though. Alternative positions or sizes for the button bars (eg, to the left or floating)

Berkmann18 commented 4 years ago

If removing jQuery leads to a massive amount of work than perhaps using a reduced version of it + latest JS/TS features should help. If it's not a massive rewrite (or any time-consuming task) than keeping jQuery won't be a good idea (more bloat and such).

Also, it would be nice for this to be compatible with React/VueJS.

Alex-D commented 4 years ago

Removing jQuery is not as hard as getting rid of execCommand/contenteditable browser-specific issues.

And yep I plan to support Angular, React and Vue officially.

SaphiLC commented 4 years ago

Hi, i think events for images are REALLY important, like for when you remove one... to avoid leaving the server full of orphan images :)

Alex-D commented 4 years ago

Nice suggestion!

I will do my best to add a lot more events :)

abhay44 commented 4 years ago

Hi Alex,

I think if we have a preview option for the entered text/info, it'd make a good feature. Any thoughts on this?

henryruhs commented 4 years ago

I suggest to use TypeScript over Vanilla JS as this leads to a way better software.

Alex-D commented 4 years ago

I need to check the output size of TypeScript to JavaScript. I love working with TypeScript, but if it increases (too much) the size of the final file, it will be a nope ^^'

I plan to write a TypeScript definition file a least.

The point of "Vanilla JS" is "no more jQuery".

henryruhs commented 4 years ago

Ahh, I see...

I could help you to create a universal component using Angular Elements - this is better than maintaining three sub-projects for React, Angular and Vue... just saying

gbjbaanb commented 4 years ago

I've just been using a repo written in CoffeeScript, whch I'm sure the author felt was "better". Trouble, is, lots of people cannot then help maintain the library as its all coffeescript, even though they could (and have submitted) update the javascript. Same with typescript.

henryruhs commented 4 years ago

People who compare CoffeeScript to TypeScript just have no idea what they are talking about...

Berkmann18 commented 4 years ago

@gbjbaanb If you said that in 2016 (when CoffeeScript was still a bit trendy) then it would have made more sense. However, nowadays many repos are written in TS or have a TS support. I'm not going to say CoffeeScript is dead (because I'm not sure it's true) but it's simply not compatible to JS supersets like TS. If you compared it to Elm or Dart (or whatever non-obscure language-that-compiles-to-JS which isn't a (sub|super)set of JS) then you'll have had a point.

And also, TS allows coders to add support for it without rewritting their codebase to TS (i.e. adding definition files so it could be consumed by the TSC on other codebases).

gbjbaanb commented 4 years ago

@Berkmann18 I'm not comparing them, I'm saying that they are both supersets (to varying degrees) of javascript and if you want a broadest userbase, then plain javascript commands a greater number of people who can work with it.

bertyhell commented 4 years ago

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

image

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

jappyjan commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

logixtreeCode commented 4 years ago

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 commented 4 years ago

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

jaminellis commented 4 years ago

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

Alex-D commented 4 years ago

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-projectWIP 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 commented 3 years ago

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.

MatrixFr commented 3 years ago

Moi je n'arrive pas à gérer les

, j'aimerai enlever le drag and drop qui semble natif, et surtout faudrait pouvoir rajouter au plugin le fait de gérer les fusions de cellules et le style (border, bg color, etc etc)

Je n'arrive pas a trouvé comment récupérer les

selectionné, ils ont un border bleu mais quand je regarde dans la console, y a rien sur l'éléement, je ne sais pas comment les récupérer pour coder moi meme la fusion de cellule du coup...

lofcz commented 3 years ago

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:

image

  • © Githubissues.
  • Githubissues is a development platform for aggregating issues.