search

basecamp / trix

A rich text editor for everyday writing
https://trix-editor.org/
MIT License
19.04k stars 1.11k forks source link

[Discussion] How would you feel about Trix as an exemplar web component? #599

Closed ZempTime closed 5 years ago

ZempTime commented 5 years ago

Fitting in with https://weblog.rubyonrails.org/2018/10/3/introducing-action-text-for-rails-6/ , would there be any interest in turning Trix into a truly first-class web component?

https://github.com/basecamp/trix/issues/513

I'll just throw my $0.02 in - the reason why I'm opening this issue is, the above are the issues between now and me driving my org to pull this in and use it right now.

I've looked at a variety of others, and still keep gravitating back here and checking issues to see if anything's changed

javan commented 5 years ago

513

That issue is resolved. Trix now supports the v1 spec: https://github.com/basecamp/trix/pull/516

shadow dom

Are you suggesting that Trix should use the shadow DOM or do want to put Trix in another element's shadow DOM?

polyfilling support

trix.js includes the necessary polyfills for drop-in support in browsers down to IE 11. If your application provides its own polyfills, you can use trix-core.js instead.

ZempTime commented 5 years ago

🎉 hadn't seen #516. I also hadn't read your readme again close enough w/r/t polyfills, feel free to point me at documentation.

Mainly, the final immediate concern here is importing/applying the css inside shadow dom boundaries.

I'm trying to embed this inside a lit-html based rendering approach. I see the <trix-editor>'s dom populated potentially correctly, but haven't effectively been able to apply styling to it or interact with it it the ways I expect:

screen shot 2019-02-19 at 2 42 09 pm

even copying/embedding dist/trix.css directly inside a <style> tag for that shadow root doesn't seem to be taking effect.

Otherwise, the events are really clear/well-named, I understand lifecycle and usage, this feels like a solid choice. There's no de-facto web component for this yet, so I felt compelled to speak up about what I perceive as an opportunity. Willing to help, if I can.

Here's an attempt to get trix running inside a lit-based component https://stackblitz.com/edit/trix-exploration

javan commented 5 years ago

I'm pretty sure your issue is with Trix's "core" styles: https://github.com/basecamp/trix/blob/dc615d10c764e5dbff2ca19dc071a2c82297e1ac/src/trix/elements/trix_editor_element.coffee#L52-L70

They get inserted, once, to the document's <head> and probably aren't shining through to the shadow DOM. screen shot 2019-02-19 at 2 29 29 pm

javan commented 5 years ago

You could try cloning those two <style> elements into your component's shadow DOM.

javan commented 5 years ago

There's no de-facto web component for this yet, so I felt compelled to speak up about what I perceive as an opportunity.

IMO, Trix is the de-factor web component. Just drop a <trix-editor> in the DOM and it springs to life. What's your use case for wrapping it another one?

ZempTime commented 5 years ago

What's your use case for wrapping it another one?

IMO, Trix is the de-factor web component.

I'm not sure I could completely agree on this, but I will say in my experience there's broad awareness of it (people on my team from vue, angular, and other backgrounds who were otherwise unfamiliar with basecamp knew of/had heard of trix 😃 ). Frankly, it's the only WYSIWYG-esque editor I've ever liked using, and the one I'd like to deliver to my users. That's why I'm surfacing what challenges I'm running into instead of silently moving on.

I'm also a little nervous one of the issues to adoption is going to be this is written in coffeescript simply because people (from my org, and also in the portions of the web component community I'm in contact with) aren't familiar with it. If it were written in typescript, I know people would feel safe with it. That said, this doesn't mean it's a good/valid reason or that I'm asking for a rewrite. I'm personally fond of coffeescript, I understand the rest of your codebase might be written in it, this is a component you're maintaining and you're the one going to a lot of extra effort to share this. You do what makes sense for you. Throwing this out there because it's a sentiment I've run into, and I think could reasonably be addressed one way or another.

Gonna keep trying to get this working 🤞

ZempTime commented 5 years ago

When I was throwing out options in a Slack, here's the general sentiment:

screen shot 2019-02-20 at 12 20 13 pm

When I get this working I'll repro it in stackblitz so you can dig into the use case specifically. This won't be super speedy on my part (hoping to get to this sometime in next two weeks)

javan commented 5 years ago

Appreciate all the feedback!

I'm going to close this meta-issue for now. Feel free to open a new one with Shadow DOM specifics.