Comments (10)
Here's the code:
if (document.querySelectorAll('span[data-text="true"]').length === 0) {
document.execCommand("insertHTML", false, "X");
document.execCommand("undo", false);
} else {
document.execCommand("insertHTML", false, "X");
}
It will check to see if you have entered the first character. If you did, it'll do the undo execCommand and remove the extra X. The else
will just insertHTML since it won't insert any extras once characters have been entered.
from draft-js.
Making changes to the DOM in this way may break React reconciliation, which can put the component into an uncertain state. Note that this can happen with any extension that modifies DOM rendered by a React component, not just the Draft editor.
What is the nature of your extension? Perhaps there is a way to make this work.
from draft-js.
Thanks for the reply @hellendag!
It's an open emoji extension. We just launched last week: http://emojione.com/chrome/
We'd love to make this work somehow! Is there a sanctioned method for inputting programmatically?
from draft-js.
Only if you have access to the EditorState
, which I think it's safe to say your extension won't. :)
Are you always inserting characters? Or arbitrary HTML?
from draft-js.
If you're able to access the clipboard within your extension and are just pasting plaintext emoji characters, then you might be able to use document.execCommand('paste')
.
from draft-js.
That's a good solution, but because the code run as a content script, it unfortunately doesn't have access to paste unless it's triggered by a user action. Since the action happens in the panel which is in the extension's sandbox, the user action can't be passed to the content script.
I've found that this code works well:
var inputEvent = document.createEvent('TextEvent');
inputEvent.initTextEvent('textInput', true, true, window, text);
Still having an issue with the caret not moving forward after the first insertion though.
from draft-js.
Oh, that's an interesting approach. Is that text event cancelable?
from draft-js.
Hi @JohnCoates,
I'm having exactly the same issue! I'm writing a Firefox extension to add Polish characters to any text field using keyboard shortcuts. It's working for all text fields, except for Facebook. I'm getting the same issue as you are describing. I've done lots of research and it's hard to find a solution. Did you find a fix yet for this issue? I'm still working on it, so if you haven't yet, I'll post a solution as soon as I figure it out.
Thanks,
Gregory
from draft-js.
I figured it out. Before you execute document.execCommand("insertHTML", false, "X");
, check to see if the length of <span data-text="true"></span>
is 0. If it is, just run document.execCommand("undo", false);
following the insertHTML execCommand, and Voila! it works!
from draft-js.
Looks like a workaround was found, so I'm going to close this out.
from draft-js.
Related Issues (20)
- read-only font size not working
- Ctrl+A selection doesn't work in Firefox when there are action items
- Bug in demo text editor on website HOT 4
- created by DraftEditorTextNode
- state in decorator are memorised
- Add custom classes
- Ordered and unordered lists don't work
- Is/should convertToRaw be based on some kind of open standard? HOT 1
- How to insert texts via google chrome extension to an input created by DraftJS HOT 1
- Pressing return jumps to start of line in Android API 33 HOT 1
- How to change blockType by pressing keyboard
- why draftInlineStyleType only can be default type? HOT 1
- How to get the cursor position? HOT 4
- URGENT :: How to update words arrays in handleStrategy of decorator?
- how to stop the style i add in replaceText?
- pre select inline style, then input in composition mode, the selected inlinestyle not work
- when input some IME punctuation, the editor crashs
- wrong return value of getInlineStyleForCollapsedSelection and getInlineStyleForNonCollapsedSelection
- http://localhost:8000/
- InvalidStateError: 'extend' requires a Range to be added to the Selection HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from draft-js.