search

facebookarchive / draft-js

A React framework for building text editors.
https://draftjs.org/
MIT License
22.57k stars 2.64k forks source link

Text formatting with Touch Bar #2794

Open ShankyRana opened 3 years ago

ShankyRana commented 3 years ago

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

Inline Style insertion through Macbook Touch Bar replaces all content within a block with the selected content. If the inline style is inserted through the in-display toolbar then Touch Bar works fine with the selected content if toggled through it.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

Demo Fiddle: https://jsfiddle.net/Shanky0009/nfbh2prj/1/ Demo: https://user-images.githubusercontent.com/17160110/104161996-cc186b00-5419-11eb-993f-a26e2065ba44.mov

What is the expected behavior?

Should insert an inline style to the text using Macbook Toolbar.

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?

Draft.js: Version 0.11.7 Browser affected: Safari Version 14.0.2

thibaudcolas commented 3 years ago

@ShankyRana could you explain how you get the touch bar to display those rich text controls? Trying with my editor and on https://draftjs.org/, I only ever get text replacement suggestions. This is in macOS 11.1 Big Sur and Chrome 87.

ShankyRana commented 3 years ago

@thibaudcolas I'm also not sure how to get these controls on Chrome, try it out on Safari(using Version 14.0.2 (16610.3.7.1.9))

thibaudcolas commented 3 years ago

Thank you, I tried in Safari 14.0.2 and got mixed results. I don’t have those toolbar controls displaying on https://draftjs.org or my editor (http://playground.draftail.org/). They did display when trying out CKEditor (https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html), however there were issues there as well. For CKEditor, the controls don’t toggle formatting on tap, but they correctly display what formatting is currently active.

Is there anything specific to your demo editor that would make them show up in Safari? If this isn’t reproducible on https://draftjs.org/, you might want to create a reproducible demo with https://jsfiddle.net/gmertk/e61z7nfa/ or similar.

ShankyRana commented 3 years ago

@thibaudcolas Check this out https://jsfiddle.net/Shanky0009/rt5yz3w9/ If I use Draft css from version 7, I'm able to use the Touch Bar controls on Safari. https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.7.0/Draft.css