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
6
votes
0 answers

Draft.js rendering selection inside a custom block

Let's go straight to the problem. I have editor full of entities, custom renderers etc and I'm trying to add Background color functionality. I'm looking for a way to render selected block inside custom block. App flow should look like this: User…
Budaa
  • 329
  • 3
  • 17
6
votes
1 answer

Draftjs components with props

I'm new to draftjs and I was wondering if there was a way to render my custom components inline in the editor. I have a string with twitter handles. I use the decorator to detect regex @[{handle}] which replaces the handle and renders the component…
diepjy
  • 283
  • 2
  • 10
6
votes
1 answer

DraftJS Modifier.insertText(): Insert Unicode

I've list of emojis. Each of them has its own unicode. With Modifier.insertText(), I would like to insert them to the text. _addEmoji(text) { const { editorState } = this.state; const selection = editorState.getSelection(); const…
asubanovsky
  • 1,608
  • 3
  • 19
  • 36
6
votes
3 answers

Best performance method to check if contentState changed in DraftJS, or just editorState

I'm trying to have a function run only when the contentState itself has changed, not just the editorState. My idea right now would be to store the old contentState as a string and compare it to the new contentState as a string, but this seems…
Slbox
  • 10,957
  • 15
  • 54
  • 106
6
votes
3 answers

Draft JS unordered list bullet colour

I've implemented Draft JS on a project as a simple editor but I'm having trouble styling unordered lists, specifically changing the colour of the bullets to match the text colour. There doesn't seem to be information in the docs on how to apply…
Ashley 'CptLemming' Wilson
  • 8,686
  • 2
  • 32
  • 36
6
votes
0 answers

How to add HTML content in DraftJS of React programmatically?

I am new on Draft-JS and able to create a decent enough text editor for my consumption, But I need to add a UL list with LI items at the bottom of my Textarea by coding. I have tried using Import HTML and then adding my HTML into it and then…
Rahul
  • 1,070
  • 3
  • 21
  • 47
6
votes
3 answers

Handling tab for lists in Draft.js

I have a wrapper around the Editor provided by Draft.js, and I would like to get the tab/shift-tab keys working like they should for the UL and OL. I have the following methods defined: _onChange(editorState) { this.setState({editorState}); …
CodeChimp
  • 8,016
  • 5
  • 41
  • 79
5
votes
1 answer

draft.js - retrieve formatted text from db

My draft.js populates body with the text e.g: '{"blocks":[{"key":"3mont","text":"lorem ipsum","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}],"entityMap":{}}' and persists it to the db after using…
SK1dev
  • 1,049
  • 1
  • 20
  • 52
5
votes
3 answers

DraftJs: Invariant Violation: block is not a BlockNode when using convertToRaw

I am getting Invariant Violation: block is not a BlockNode when using convertToRaw in draft js. Unfortunately, it works fine in code sandbox but not in local which makes it hard for me to debug the…
Kal
  • 1,656
  • 4
  • 26
  • 41
5
votes
2 answers

Select specific text in the editorState

I'm creating a rich text editor using draftjs. Here is the minimal codesandbox so you have an idea of what the issue is. So I have an helper function getCurrentTextSelection that return me the text that I'm selecting: const getCurrentTextSelection =…
johannchopin
  • 13,720
  • 10
  • 55
  • 101
5
votes
1 answer

DraftJs: Replace an entity using its entity key

I'm creating a rich text editor using draftjs and can't find any ressources to help me in my problem. Please first have look to the codesandbox. You can see a text that contains a link (testtest in red). If you click on it you will see some infos of…
johannchopin
  • 13,720
  • 10
  • 55
  • 101
5
votes
1 answer

How to use RichUtils with React Hooks

I'm trying to implement a button that changes inline-style to bold after clicking on it. I want to implement this example but using React Hooks. After clicking on the button, RichUtils is executing but it's not changing the text to bold. What I'm…
Erik Martín Jordán
  • 4,332
  • 3
  • 26
  • 36
5
votes
0 answers

How to render decorator/entity with text which is different from the matching string in the Editor's value

I'm trying to create an editor, using draftJS, which renders assosciated values in the editor field to guids which will be included in the actual string value of the editor. The problem I'm having is that when I try to render the assosciated values…
Luke Steyn
  • 51
  • 1
  • 3
5
votes
2 answers

Strip all styling from pasted text in DraftJS?

When pasting text from word or another source into draftjs the formatting comes along for the ride, I tried stripping the styling data like so: onChange={(newEditorState) => { const raw =…
meds
  • 21,699
  • 37
  • 163
  • 314
5
votes
1 answer

Custom Inline Toolbar in draft-js-plugins is not working

Custom Inline Toolbar, as prescribed in their documentation is not working as expected. It keeps showing the default Inline Toolbar, even though custom buttons are added. My code goes below. import Editor from "draft-js-plugins-editor"; import…
Balasubramani M
  • 7,742
  • 2
  • 45
  • 47
1 2 3
…
49 50