Draft-js: iOS format tooltip button deletes text

[LucidityDesign]

Hi,
when I select text in the demo, besides the usual copy, cut etc. options I can also select a text-format (B _I_ U) button:

So when I use these functions to format the text, the selected text or the text before the selection is deleted. Also the draft-js editor buttons (e.g. bold or italic) won't get highlighted.

As long as this bug is present does anybody know how I can hide this button?

[hellendag]

This is an issue with iOS, and I'm not aware of a solution for it. https://bugs.webkit.org/show_bug.cgi?id=147406

I'd _really_ like to have a way to disable it, because the mutations occur outside of Draft model reconciliation. It's basically just an uncontrolled DOM update and the only way to handle it would be to parse backward from the resulting DOM state, old-school. Bad.

(Also, why is this menu on by default?! How would Apple know what kind of rich text features any given editor is trying to support?)

We need to tell Apple that we would like this to be configurable. :)

[LucidityDesign]

I was afraid, that this is a iOS bug.
Do you know why text of the line gets deleted? Can we fix this bug?

[hellendag]

The text is probably being deleted because the editor state and component are becoming confused by the native DOM changes. Once the DOM is out of sync, the editor can't reliably track state changes, including text entry.

The only way I can think of to cope with uncontrolled DOM changes like these would be to try to run the entire editor contents through the HTML-to-ContentState conversion utility. If it is possible to identify a point at which things have become unsynced, we could potentially throw the editor HTML into the conversion flow and try to make use of the result. cc @CLowbrow

[bradleyayers]

After digging into Webkit's source I found that there's a CSS property we can use to disable the rich text editing controls (B _I_ U on iOS):

-webkit-user-modify: read-write-plaintext-only;
user-modify: read-write-plaintext-only;

Turns out if I'd just searched for the right terms I would have found:

• http://stackoverflow.com/questions/18484006/how-to-get-user-modifyread-write-plaintext-only-behaviour-in-firefox-and-ie

I had a concern that this may affect pasting HTML, though on iOS it seems to have no effect — it's plaintext both before _and_ after adding this style. In my scenario I was looking at using Draft.js in a WKWebView and found there's both "Apple Web Archive pasteboard type" and "iOS rich content paste pasteboard type" pasteboard items which can be transformed to HTML if needed.

[sophiebits]

Nice find.

[LucidityDesign]

Wow! Thanks a lot @bradleyayers! I will try it later

[rafalp]

I have tested it with iOS 9.3.2 and I can confirm that @bradleyayers fix WORKS.

Here are selection options before adding user-modify to field:

Here are same selection options after adding user-modify styles to it via inspector:

"BIU" option is gone. I've checked out if it wasn't simply moved behind right arrow but nope, it's gone. 🎉

[danburzo]

Hi everyone,

Can someone remember on which iOS / Safari version did this toolbar get introduced? And whether pressing these buttons triggered any inputType property on the beforeinput / input events like it currently does in Safari 10.1+? beforeinput event can now effectively be used to prevent or act upon these controls, but still now way to disable the buttons.