BarryCarlyon commented 6 years ago

Feature request: HTML editor

Polaris provides a "Default text field" form component. But doesn't provide a "rich html editor" or TinyMCE configuration.

Expected behavior

This would make it easier for Developers to take, say, a product description out of Shopify and provide it for easy editing in an Application under the same editor and configuration of said editor as native Shopify admin.

timcmiller commented 6 years ago

@BarryCarlyon is a WYSIWYG editor what you are looking for?

If so, I would love to see this as well!

BarryCarlyon commented 6 years ago

Yeah the same thing as (default option being same as) in Shopify product admin

ry5n commented 6 years ago

Thanks for the request, @BarryCarlyon. We will be building something for our internal use case, but for a variety of technical reasons we’re not able to translate that directly into something we can release in Polaris. Right now a rich text/HTML editor is part of our backlog.

Because we’re not able to actively work on this right now, I’ll close this issue. However, we encourage everyone who’s interested to add a 👍 to the original issue report. We’ll take your collective interest into account when we look at what to work on next.

timcmiller commented 6 years ago

Hey @ry5n,

Wanted to chime in and see if there was any plan on re-opening this issue. You encouraged people to add a 👍 if they were still interested and it now has more than double the amount of 👍 than any other issue. Would love to see this component implemented.

rkbhochalya commented 6 years ago

I would love to have that as well.

ry5n commented 6 years ago

Thanks for the upvotes everyone. It’s clear that this is the no. 1 feature request; we’ll discuss how we might make this available. For a variety of technical reasons we may not be able to simply release the component we use internally for this—meaning we might have to build it twice. That’s just for transparency around why this might be more effort than one might expect.

androb commented 6 years ago

We are in the process of getting TinyMCE version 5 ready for release with a really great new UX, and we could look at including a Polaris theme if it is of interest

SylarRuby commented 5 years ago

If I'm correct, Shopify uses Basecamp's Trix editor underneath the hood so, why we need this? 🤷🏽‍♂️

acomito commented 5 years ago

@SylarRuby is there a good react version of trix?

androb commented 5 years ago

Not sure, I think Spotify have done some work with TinyMCE in the past. V5 of TinyMCE has come a long way since September last year. Would be good timing to look at a Polaris skin now.

avocadoslab commented 4 years ago

Any update around this @androb @ry5n ? Components status still shows it as under consideration.

kaelig commented 4 years ago

👋 This isn't on the roadmap at the moment, but we keep an eye on this issue for future prioritization.

greghesp commented 4 years ago

A +1 from me. Ideal for when you want to create a new product from within your app

michelarteta commented 4 years ago

We need this component please!!!! I want to give the option to the user to customize text without having to insert HTML

LukaszWiktor commented 4 years ago

I'd also need a visual HTML editor component.

Karen-boop commented 3 years ago

+1 This would be super useful for internal apps too. At the moment am using Markdown as a workaround, but an RTE would be much more user-friendly and easy to use for internal teams. :)

talbshoam commented 3 years ago

Would love to see this component :)

taketsu commented 3 years ago

I'd like to have an editor that can also handle liquid as seen in the admin panel.

Popesites commented 3 years ago

Would Love this!

alexissel commented 3 years ago

This is a must!! Would be really great to have this feature implemented into Shopify Polaris.

ghost commented 3 years ago

This would be great.

omarreiss commented 3 years ago

Agree this is still a necessity to avoid interoperability issues between app editor and shopify editor.

pierreneter commented 3 years ago

@alex-page, it's about 154 thumbs up here, should Shopify consider it?

alex-page commented 3 years ago

Hey @pierreneter this is definitely on our radar. We are about to share some changes coming to Polaris soon, our team will be focused on the new work moving forward.

pierreneter commented 3 years ago

@alex-page I quite expect, will those changes be mentioned in the upcoming unite?

alex-page commented 3 years ago

Unfortunately it won't be a part of Unite. That being said, expect some changes and news in the coming month.

brianecook commented 2 years ago

C'mon! Please?

YoavGrosman commented 2 years ago

DId anyone find a workaround on this issue?

TheSecurityDev commented 2 years ago

Any updates?

avocadoslab commented 2 years ago

Any updates around this? This is really need of the hour I would say :)

sovtek commented 2 years ago

It would be really great to have this feature and at the very least if the polaris documentation would address a recommended alternative, if it's not coming out soon. There's all kinds of information guiding us on how we should be developing UI for shopify but it just sort of skips over usage of rich text editors, which almost all modern sites have and use.

alex-page commented 2 years ago

Hey folks. This is quite a complex problem as the library we use in Shopify today cannot be used under our open source license of Polaris. I understand that there is a huge need for this component but due to this restriction we are not actively working to open source this component.

avocadoslab commented 2 years ago

Sad news but thanks @alex-page for setting the right expectation rather hanging us around.

alexissel commented 2 years ago

@alex-page, any suggestions for a solution?

alex-page commented 2 years ago

I have been recommended https://github.com/jpuri/react-draft-wysiwyg. If anyone in this thread has other recommendations please share them!

avocadoslab commented 2 years ago

@alex-page I'm using that editor which is based off of draftJS but I would be little careful with it due to limitations:

Poor looking UI elements.
Doesn't have source code editor.
Stores data in draftJS format which is not easy to port to other editors.
Need to do certain hacks to get certain components working.
Few components doesn't work well and has bug in them. Author is unresponsive in reviewing pull request.

I'm currently experimenting TinyMCE and very much happy with it!

alexissel commented 2 years ago

Hey everybody,

I've created a TinyMCE skin which integrates perfectly with Shopify Polaris framework. Here's the link, if you want to give it a try - TinyMCE Polaris Skin

Cheers!

avocadoslab commented 2 years ago

@alexissel just tested and started using in my app! Looks amazing. Thanks for creating this skin!

androb commented 1 year ago

@alex-page which open source library? I know that TinyMCE has been used in the past and it has recently been delicensed under MIT.

On Thu, May 26, 2022 at 7:32 PM Pratik Nikam @.***> wrote:

Sad news but thanks @alex-page https://github.com/alex-page for setting the right expectation rather hanging us around.

— Reply to this email directly, view it on GitHub https://github.com/Shopify/polaris/issues/303#issuecomment-1139222585, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAQPNMH4TUBJ7XYSRVYXBF3VMAX3JANCNFSM4E4MRQTQ . You are receiving this because you were mentioned.Message ID: @.***>

-- [image: Tiny Technologies Inc] https://www.tiny.cloud

Andrew Roberts CEO

Email: @.*** Phone: +1 (650) 292-9659 (Ext. 706)

Tiny Technologies www.tiny.cloud

[image: Linkedin] https://www.linkedin.com/company/jointiny/ [image: Facebook] https://www.facebook.com/jointiny [image: Twitter] https://twitter.com/joinTiny [image: GitHub] https://github.com/tinymce/ [image: Stack Overflow] https://stackoverflow.com/questions/tagged/tinymce

This email message and any attachments are confidential and may contain legally privileged information. You should not read, copy, use or disclose it without authorization. If received in error, please contact us at once by return email and then delete all emails and attachments. You should check this email for viruses or defects. Our liability is limited to resupplying any affected message or attachments.

tomoyanakano commented 1 year ago

Hi, any update for this? or is it recommended to use other package for editor?

alexissel commented 1 year ago

@tomoyanakano, have you read the previous comments?

You can use a third-party editor like TinyMCE and apply a skin which uses Shopify's Polaris style guide.

https://www.tiny.cloud https://github.com/alexissel/tinymce-polaris

tomoyanakano commented 1 year ago

@alexissel Thank you. I'll try it.

jeff0723 commented 1 year ago

Hey everybody,

I've created a TinyMCE skin which integrates perfectly with Shopify Polaris framework. Here's the link, if you want to give it a try - TinyMCE Polaris Skin

Cheers!

Do you know how to use it in React? I have big trouble using Tiny in React.

alexissel commented 1 year ago

Follow this guide for React integration - https://www.tiny.cloud/docs/integrations/react