Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Roadmap Questions #31

Closed
2 of 12 tasks
jeremy opened this issue Oct 18, 2015 · 52 comments
Closed
2 of 12 tasks

Roadmap Questions #31

jeremy opened this issue Oct 18, 2015 · 52 comments
Labels

Comments

@jeremy
Copy link
Member

jeremy commented Oct 18, 2015

Your friendly neighborhood magnet issue for "is X coming?" and "what about Y?"

Questions so far:

  • More font attributes? Size, face, color, underline, …
  • More block styles? Left/right/center text alignment, headings, …
  • Other writing systems? RTL and other BiDi scripts
  • Tables?
  • Attachment helpers? Upload file, take camera photo, …
  • Other editing modes? Markdown, raw HTML, …
  • Other output formats? Markdown/Textile/…
  • Integration with other frameworks? Angular/React/…
  • API for internal HTML attachments? Support @mentions with e.g. At.js, do a lo-fi task list with [ ] checkboxes, …
  • Drag to reposition attachments? Rather than cut/paste only.
  • Paste handlers? e.g. for automatic embedding
  • API to customize toolbar? Simpler than having to implement from scratch
@ollym
Copy link

ollym commented Oct 19, 2015

@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
Copy link

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
Copy link

aeons commented Oct 19, 2015

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

@rileydutton
Copy link

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

@souporserious
Copy link

@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
Copy link

Arvinje commented Oct 19, 2015

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
Copy link

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
Copy link
Contributor

javan commented Oct 19, 2015

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

@fusion2004
Copy link

@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
Copy link

@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
Copy link

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
Copy link

ollym commented Oct 22, 2015

@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
Copy link

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
Copy link

Gutem commented Oct 24, 2015

Wrap text intro

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

@jecornwall
Copy link

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.

@jshirley
Copy link

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!

@wmertens
Copy link

wmertens commented Nov 1, 2015

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
Copy link
Contributor

javan commented Nov 6, 2015

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
Copy link

a-warner commented Nov 6, 2015

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

@javan
Copy link
Contributor

javan commented Nov 6, 2015

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
Copy link

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
Copy link

RobAley commented Nov 16, 2015

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
Copy link

mkurz commented Nov 16, 2015

@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
Copy link

ollym commented Nov 16, 2015

@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 !?

@archonic
Copy link

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.

@sachinchoolur
Copy link

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

@javan javan closed this as completed Dec 23, 2015
@mitar
Copy link
Contributor

mitar commented Dec 23, 2015

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
Copy link
Contributor

javan commented Dec 23, 2015

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

@tomcon
Copy link

tomcon commented Jan 19, 2016

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
Copy link
Contributor

javan commented Jan 19, 2016

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

@tomcon
Copy link

tomcon commented Jan 19, 2016

Thanks Javan

On 19 January 2016 at 15:43, Javan Makhmali notifications@github.com
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).

@jabbett
Copy link

jabbett commented Feb 18, 2016

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

@javan
Copy link
Contributor

javan commented Feb 19, 2016

@jabbett ❤️

@djch djch mentioned this issue Feb 23, 2016
@adamtal3
Copy link

adamtal3 commented May 1, 2016

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.

@tomcon
Copy link

tomcon commented May 1, 2016

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
Copy link
Contributor

javan commented May 1, 2016

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
Copy link

adammiribyan commented May 6, 2016

@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
}

@javan
Copy link
Contributor

javan commented May 7, 2016

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

@bettysteger
Copy link

bettysteger commented May 17, 2016

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 .. :(

@mitar
Copy link
Contributor

mitar commented Aug 4, 2016

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

@amuatelembe
Copy link

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

@micheledurante
Copy link

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
Copy link

mattclough1 commented Jul 10, 2017

@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
Copy link
Contributor

javan commented Jul 10, 2017

@mattclough1 are you seeing something other than this?
img_8300

@mattclough1
Copy link

@javan this is what I see without changing anything
screen shot 2017-07-10 at 2 02 33 pm

@mattclough1
Copy link

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

@mattclough1
Copy link

mattclough1 commented Jul 10, 2017

@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
Copy link
Contributor

javan commented Jul 10, 2017

👏

@GeorgeWL
Copy link

Tables yes?

@basecamp basecamp locked and limited conversation to collaborators May 22, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests