Roadmap Questions about trix

[jabbett]

Basecamp: "We made a simple HTML5 text editor."
Everyone: "Give me the 1,000 features in all other editors that made me want to switch to Trix in the first place."

[jshirley]

I'd love to see some autocomplete features built-in, so you can do @-mentions as well as emoji expansion. The GitHub editor does well on this, and it's immensely useful!

[bettysteger]

I would love to see some autocomplete built-in for @mentions, now I use https://github.com/yuku-t/jquery-textcomplete for that and have problems when pressing ENTER!

Thanks for the example code of adding underline button and attribute.
But I do not know how I can add a custom action for e.g. adding emojis .. :(

[rileydutton]

Tables seem pretty much imperative to allowing this for use outside of a basic comment form.

[adamtal3]

Only thing keeping me from using trix right now is the inability of styling text (font, text color & background color).
For me, it's the most basic unimplemented need that's on the roadmap list.

[jecornwall]

Would love the ability to add your own custom styling elements.

You can sort of do it by modifying Trix.config.blockAttributes and Trix.config.textAttributes, but the thing that is limiting me at the moment is not being able to add a class to the elements you add. You're able create a custom element that will wrap things in <bubble> tags (for instance), but you can't do something like <p class="bubble"></p> because Trix doesn't consider the class attribute.

[archonic]

Markdown and textile are appropriate for minimal formatting (comment box), but if you want to use this for documentation, they're just not rich enough. Tables are imperative for myself, as are the full suite of font formats. React integration would be amazing and [ ] checkboxes are a nice to have.

[javan]

@adammiribyan, Trix 0.9.6 changed toolbar button attributes from data-attribute to data-trix-attribute. http://codepen.io/javan/pen/EPqzZo now reflects this change.

[ollym]

@jeremy I'm against all of the above, purely because it makes implementing this #35 more difficult. Except for the underline part, markdown can do that.

[philwareham]

More font attributes? Size, face, color …

Depends if you want to give users control over styling. IMHO they shouldn't be given that amount of control - content and style should always be separate.

[aeons]

Support for headers? Just one or two levels would be great.

[souporserious]

@ollym would it be possible to just not allow that though if in a different mode? Something like rules that got applied to certain edit modes. I do see how this could get tedious though. Would be nice though to have a rich text editor with Trix.

[Arvinje]

It would be great to see some support for right-to-left languages. Even better: some support for the use of RTL words alongside LTR ones in a line.

[fusion2004]

I have an unfortunate feature request: being able to import, preferably via copy & paste, content from a Word document which would then be formatted into the equivalent structures in trix.

[javan]

@fusion2004 Have you tried copy+pasting from Word? If so, what does or doesn't work?

[fusion2004]

@javan I haven't tested extensively, but a quick test shows that lists are not being formatted correctly when you paste them in. They seem to be pasting over as just text with mid-dot and circle characters and spaces, as opposed to translating into actual lists.

The first two screenshots are the source document, the second two are the resulting formatting in trix: http://imgur.com/a/RDDoX

[joeljunstrom]

@fusion2004 one needs to do a lot of cleanup / normalization of the markup that you get from word. I guess this is probably best done as an explicit action with a filtering process even though it would be nice if it happened magically. (for reference take a peek at all the terrible things ckeditor does for paste from word functionality: https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/pastefromword/filter/default.js)

[a-warner]

First off just wanna say this editor is awesome! I'm impressed by all that it does already. Some cool features I'd like to see:

• I'll throw my hat in the ring for headers
• Once an attachment is pasted into the editor, it would be awesome to be able to drag it around, e.g. dragging an image from below to above a paragraph (right now I have to cut and paste it which is a decent workaround but might be difficult for users to figure out)
• Some kind of handler/hook for "the user just pasted something" (e.g. medium js has a pasteEventHandler). I would use that to do things like e.g. replace a link the user pasted with an embedly iframe if it looks like something that might be an embed (like a youtube link)
• Ability to customize the toolbar to add my own extensions for headers and an "add an image" button before y'all get to it on the roadmap. Right now I'm hacking around inside Trix.config.toolbar.content with jQuery, maybe there is a better way already?

p.s. @ollym i got a decent trix html to markdown reverse thing going pretty quickly using https://github.com/domchristie/to-markdown and a little bit of post-processing (e.g. unwrapping <figure> tags and removing <figcaption> tags which make images look a little weird in markdown). I'd be happy to share my code with you (it's pretty simple though admittedly a bit hacky feeling).

[ollym]

@a-warner yea there are a load of html -> markdown processors but it's just not quite the real thing. Been looking for a simple markdown / html wysiwyg editor that just does html markup for a while. The main problem is wysiwyg products rapidly integrate styling which isn't markup, so supporting markdown becomes a bit of a 3rd party citizen in itself.

EDIT I really hope trix doesn't go down the same road

[sachinrekhi]

Would love the ability to insert check boxes in the editor. Check boxes plus the existing strike-through formatting enable you to have a very cheap to do list solution. Similar to what Evernote provides, for example.

[Gutem]

Wrap text intro

tags, so I can use pseudo-classes/elements as :first-child, :last-child, ::first-letter, ::first-line

[wmertens]

Code editing: represent code as nested blocks according to user preferences.

Showing code as html instead of textarea allows much richer visual hinting, e.g. font size, shadows, borders, images etc.

Converting code to a more visual format allows you to see it according to your own preferences without having to reformat the actual code (and suffering the git merge mishaps).

You could even show and write javascript much like coffeescript by automatically adding parens etc depending on indent level. Take any js code and edit it while it looks like coffeescript…

[javan]

Once an attachment is pasted into the editor, it would be awesome to be able to drag it around, e.g. dragging an image from below to above a paragraph (right now I have to cut and paste it which is a decent workaround but might be difficult for users to figure out)

@a-warner, this is fixed in 0.9.1. (the fix: af1dd1f)

[a-warner]

@javan awesome! can't wait to try it out

[javan]

Some kind of handler/hook for "the user just pasted something" (e.g. medium js has a pasteEventHandler). I would use that to do things like e.g. replace a link the user pasted with an embedly iframe if it looks like something that might be an embed (like a youtube link)

@a-warner, Trix does dispatch a trix-paste event that includes the range and pasted data: https://github.com/basecamp/trix/blob/master/src/trix/controllers/editor_controller.coffee#L183. Scan https://github.com/basecamp/trix/blob/master/src/trix/controllers/input_controller.coffee for @delegate?.inputControllerDidPaste(pasteData) to get sense of what data is passed along.

It's undocumented at the moment because we're still feeling it out. Feel free to report back.

[MadSpindel]

Markdown support would be cool, but I hope Trix also can support BBCode in the future. Please take a look at SCEditor, I like how you create your own plugins:
http://www.sceditor.com/documentation/custom-plugins/

[RobAley]

I would like to add another vote for the ability to attach/embed arbitrary HTML code (or to document it if it already exists), my two use cases would be :

• adding dates/times with a small widget that allows the user to click to drop down a time/date selector, and
• adding a codemirror block for fully-equiped code editing/display

Thanks for a great editor.

[mkurz]

@ollym @a-warner @MadSpindel
Checkout this WYSIWYG markdown editor: http://hectorguo.com/CKEditor-Markdown-Plugin/
It is a addon for the CKEditor, see this answer on stackoverflow.

[ollym]

@mkurz that's actually quite cool. Would much prefer an inline toolbar like the one trix provides, and also as a framework trix seems a lot lighter than CKEditor.

A markdown editor is rapidly approaching our roadmap, so we might make a start at developing this as a trix plugin, if that's even possible !?

[sachinchoolur]

Integration with other frameworks? Angular/React/…

I wrote an angularjs directive for trix editor. https://github.com/sachinchoolur/angular-trix
If anybody is interested they can use it till the time of official release.

Great work btw :)

[tomcon]

Guys, great work & thanks for this.

Have to ask though - am I the only one very surprised that underlining is not supported?
(All the more surprising as hypertext links are underlined)

If this is true, can we have a timescale please when this is might be implemented. Thanks.

[javan]

@tomcon Personally, I find underlined text confusing when it's not a link because that style is generally used for links on the web. You can add a button in your app if you'd like though:

Trix.config.textAttributes.underline = {
  style: { "textDecoration": "underline" },
  inheritable: true
}

buttonHTML = "<button type=\"button\" class=\"underline\" data-attribute=\"underline\" title=\"underline\">Underline</button>"
groupElement = Trix.config.toolbar.content.querySelector(".text_tools")
groupElement.insertAdjacentHTML("beforeend", buttonHTML)

The toolbar configuration API is getting an overhaul in #143, FYI.

[javan]

Closing this issue because it's not maintainable as a mega thread. An API for adding additional formatting styles and customizing the toolbar is coming in #143 so please direct any related discussion there. Thanks for your feedback everyone!

[mitar]

Yea, I was surprised with your approach of closing all separate tickets and redirecting everything here. Maybe a better approach would be to create a milestone or a label, and put various tickets under that.

[javan]

@mitar The issues are mostly labeled now and we're working towards a 1.0 milestone (not a complete feature list yet).

[tomcon]

Thanks for the underline tip @javan that's now working.
Only problem is there is nothing on the toolbar button and I've tried to set background-image, etc but no joy - can you point me in the right direction or to information on how to set this please?
Thanks

[javan]

@tomcon #133 has some examples for adding toolbar buttons.

[tomcon]

Thanks Javan

On 19 January 2016 at 15:43, Javan Makhmali [email protected]
wrote:

@tomcon https://github.com/tomcon #133
#133 has some examples for
adding toolbar buttons.

—
Reply to this email directly or view it on GitHub
#31 (comment).

[javan]

@jabbett ❤️

[tomcon]

Yes, I can now see the argument for not providing underline support makes sense. Basic styling of text as per @adamtal3 is, as he says, a pretty basic need though.

Can this not be implemented without losing the lovely simplicity? Seems it should be able to be.

[javan]

Here's an example of adding a custom underline button / attribute: http://codepen.io/javan/pen/EPqzZo. The same technique can be used to add any style like color, font, etc.

[adammiribyan]

@javan Hi Javan, is this still relevant? It used to work fine in the app and suddenly nothing happens when the user clicks on the underline toolbar button I've added using the code you posted above.

Trix.config.textAttributes.underline = {
  style: { "textDecoration": "underline" },
  inheritable: true
}

[mitar]

I opened #284 for mentions. To be able to discuss it there and find some workaround to support it.

[amuatelembe]

You can attach an image and save it. Between the text.

[micheledurante]

Hi all, first off thanks for the great work.

Reading #78 I didn't quite get why support for header tags was abruptly dropped. Anything specific?

Willing to contribute work on the feature :)

[mattclough1]

@javan in your Codepen examples for underlined text, it seems like the initial value should be underlined, but it's being rendered with the wrapping span and underline style stripped out in both the editor and the hidden input.

[javan]

@mattclough1 are you seeing something other than this?

[mattclough1]

@javan this is what I see without changing anything

[mattclough1]

@javan I've been looking at it in Chrome. Seems to work in Safari and Firefox actually...

[mattclough1]

@javan think I got it. In Chrome window.getComputedStyle(...).textDecoration returns all possible textDecoration properties. You have to use textDecorationLine. Good lord that took too long to figure out.

[javan]

👏

[GeorgeWL]

Tables yes?