Stack Overflow
Stack Overflow

Questions tagged [draftjs]

Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.

Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.

Draft.js makes it easy to build any type of rich text input, whether you're just looking to support a few inline text styles or building a complex text editor for composing long-form articles.

In Draft.js, everything is customizable – it provides the building blocks so that you have full control over the user interface.

You can learn more about Draft.js here.

746 questions
11
votes
1 answer

Insert text into an existing / external draftjs textfield

I'm working on an application which needs to insert text into a contenteditable="true" div (a Draftjs based textfield to be precise). Now I am aware that Draft.js uses react and that it should be used that way, but in this case, the application…
JoniVR
  • 1,839
  • 1
  • 22
  • 36
11
votes
1 answer

Replace content block

guys! Please help. What I want: When starting from a new line a user types an URL and presses Enter I want to remove the block containing the URL and replace it with a custom Entity. Much like the Media example from the docs, but without the Add…
iliaznk
  • 241
  • 1
  • 7
10
votes
4 answers

How to insert an image using draft.js?

Here is my code trying to insert an image in the draft.js editor. But I failed. When I clicked on the button, only several empty lines were inserted, what's the problem? MyEditor.js import React from 'react'; import {Editor, EditorState,…
Searene
  • 25,920
  • 39
  • 129
  • 186
10
votes
2 answers

How to create a selection based on start and end in Draft.js?

I am trying to replace the last insert in Draft.js For example, Orignal string -> aaazzz After inserting 'bbb' in the middle -> aaabbbzzz Replace last insert by 'ccc' -> aaaccczzz Replace last insert by 'ddd' -> aaadddzzz ... One way I thought is…
Hongbo Miao
  • 45,290
  • 60
  • 174
  • 267
10
votes
1 answer

Draft.JS: the proper way to detect content change

There is onChange event, but it fires also when carret moves or navigation (arrows etc) button being pushed. I want to detect if content was changed. Basically i need to detect this only once when the very first change occur. The dumb way "compare…
stkvtflw
  • 12,092
  • 26
  • 78
  • 155
10
votes
2 answers

draft.js: how to preserve paragraph breaks when pasting content?

Is there documentation that explains how to preserve paragraph breaks when content is pasted into draft.js? Other formating looks reasonable but all the paragraph blocks are collapsed into a single paragraph block when pasting.
SteveB
  • 851
  • 2
  • 7
  • 15
9
votes
2 answers

Has anyone successfully used react-testing-library to test change events on a draftJS Editor component?

​The fireEvent.change() just doesn't work. It says there are no setters on the element. I tried using aria selectors instead const DraftEditor = getByRole('textbox') DraftEditor.value ='something'; fireEvent.change(DraftEditor); I tried same again…
Josh Pittman
  • 7,024
  • 7
  • 38
  • 66
9
votes
3 answers

DraftJS triggers content change on focus?

I have an editor on a page and save button. I want save button only to appear if there are changes (since last save). So, when you save, i set this.setState({hasChanges: false}) and in onChange function i set hasChanges to true. And that's all…
Ivan Bajalovic
  • 780
  • 1
  • 9
  • 20
8
votes
0 answers

Draft-js: Losing cursor with non-editable entity components

I have an editor that is supposed to have entities with the props name, color, start, end. In the editor the text in positions denoted by start and end will be subsistuted by name, and it will be rendered by a custom component with…
jorgen
  • 3,425
  • 4
  • 31
  • 53
8
votes
1 answer

Cursor inside Entity after selection in draft-js

I'm struggling making entities style work the way I would like to using draft-js. I'm adding styled entities to my input by selecting items in an autocomplete component. When I select one, it works, but the caret stays inside the entity until i add…
Guillaume Badi
  • 749
  • 5
  • 15
8
votes
4 answers

How to Access EditorState from Decorated Component

I'm starting to work with the decorators in draft-js and I'm able to render my components defined in the CompositeDecorator. The documented behavior works great. That said, I'm trying to figure out how I can access the editorState from within these…
Blaine Garrett
  • 1,286
  • 15
  • 23
8
votes
1 answer

DraftJS: Reset blockType after return

I am currently building an editor like the one that is used on medium.com. For each unstyled block, I render a custom component that holds edit buttons to change the block type of that section. However, when I for example change the section to a…
n9iels
  • 867
  • 7
  • 21
8
votes
1 answer

React controlled contenteditable

hi I'm trying to create a react contenteditable div component that works like an input field but with some additional features that I want to implement, but since there are just few features, I want to implement it myself and not use something like…
Amin_mmz
  • 394
  • 4
  • 14
8
votes
1 answer

Draft.js Inserting Immutable Entity

I have been playing with Draft.js and I'm stuck trying to get immutable entities working properly. I would like to insert an immutable entity when a user clicks a button. Here is the function that inserts the entity: const text = "foo"; const…
frshca
  • 1,309
  • 2
  • 15
  • 24
8
votes
1 answer

Add empty block to Draft.js without moving selection

What's the best way to add an empty unstyled block, let's say last, to a Draft.js editor without changing the SelectionState?
tobiasandersen
  • 8,480
  • 3
  • 28
  • 39
1
2
3
…
49 50