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

Props missing after passing to children when using draft-js

I'm kinda new to react and thought that in the constructor function, using super(props) can fully receive the props that passed by parents. But however, I can't get the string test from my parent component. So in the parent component, I pass the…
CHIResearcher
  • 55
  • 1
  • 7
0
votes
0 answers

How to add context menu handler in DraftJS?

Simple props pass doesn't work. The only solution I see so far is adding custom block render function and handle context menu for each block. But this solution looks kinda ugly tho... Another…
aiven
  • 3,775
  • 3
  • 27
  • 52
0
votes
1 answer

Render Draft.js Html into a div tag with proper markup?

I am looking at using draft.js and I am wondering how I can have an editor and while someone types the results would be shown as html but with the actual markup (ie if I do bold, the output shows bold). I am having trouble getting this to work. I…
chobo2
  • 83,322
  • 195
  • 530
  • 832
0
votes
1 answer

No compatible version found: draft-js-utils@^1.3.3

After recent update of draft-js-export-html 1.3.3 we are not able to compile the project as dependency is not found. We are getting below mentioned logs. npm ERR! notarget No compatible version found: draft-js-utils@^1.3.3 npm ERR! notarget Valid…
Hari Soni
  • 195
  • 3
  • 14
0
votes
1 answer

Text selection bug with draft.js and decorator

I'm using a draft.js editor in such a way that I need to update the decorator and also the props of the component it renders on the fly inside onChange. This to mark parts of the text with a background color. I can almost get this working, but…
jorgen
  • 3,425
  • 4
  • 31
  • 53
0
votes
1 answer

DraftJS persisting data and controlling the data in render block

I am trying to fetch the raw data from the database saved with convertToRaw of Draft JS function and represent the data in the editor instead of createEmpty value. Note : - When I send props from parent component, child component gets null value…
vam
  • 492
  • 7
  • 17
0
votes
1 answer

how i save draftjs data and then get it and populate it in editor

when i populate ContentFromRaw data to editor state i get following error TypeError: next.editorState.getDecorator is not a function what is the best way to get from database and save it into database here is what i doing const…
user7362157
0
votes
1 answer

Why is my updated object not appearing in state?

I am using draft-js, with React as a text editor and trying to update the content state with a youtube link (which i'll later thread up to an input/on-change event). But right now the added-in entity map isn't carrying through from the…
Aid19801
  • 1,175
  • 1
  • 17
  • 30
0
votes
0 answers

How do i tell Webpack to only/always use versions shown in package json?

I am trying to contribute to an npm package (react-draft-wysiwyg) but keep getting (what i think are) Webpack errors. First i try to click the embed button of draft-js and it errors saying "block is not a BlockNode" - then i follow blogs/posts like…
Aid19801
  • 1,175
  • 1
  • 17
  • 30
0
votes
1 answer

Set SelectionState for entity when clicked

I have a case where I can click on an entity, and then select new content to replace the entire entity. For example: Here is some text [special entity] and some more text ^ click anywhere inside the brackets After choosing…
thetallweeks
  • 6,875
  • 6
  • 25
  • 24
0
votes
2 answers

Draft.js - CompositeDecorator: Is there a way to pass information from the strategy to the component?

Lets say my strategy calculates some numbered label. How can I pass this (e.g. via props) to the decorator component. I know there is a props property in CompositeDecorator but how can I access it from the strategy function?
Obiwahn
  • 2,677
  • 2
  • 26
  • 36
0
votes
1 answer

How do I use a RichTextEditor (draftail) in wagtail in order to mark different parts of the text with different styles?

Django Wagtail - Draftail - Multiple color highlighter How do I use a RichTextEditor (draftail) in wagtail in order to mark different parts of the text with different styles? The editor won't display the correct inline styling after saving the…
0
votes
1 answer

DraftJs - update editer state with new content state using Modifier.removeInlineStyle()

I have a function for setting font size inline style. It works mostly, except after cycling through several font-sizes, i have to toggle the button twice. So to try to solve this, I want to cycle through the current selction's content state, remove…
Sandra Willford
  • 3,459
  • 11
  • 49
  • 96
0
votes
0 answers

Mismatch in entityRanges with emoji as presiding text to mentions

i am using mentions plugin it works awesome as expected without emojis/unicode. My situations ex: " dude Suresh Chandrababu" is my text in editor. Suresh Chandrababu is mention. I need to extract the mention offset position, length and send to my…
Suresh
  • 1,199
  • 2
  • 12
  • 36
0
votes
1 answer

toggleInlineStyle() is there a list or typing for the available inline styles?

I am working on an editor using DraftJS, I've managed a few basic buttons using toggleInlineStyle() but I cannot seem to find in either the docs or in the typings for the available inline styles. Am I missing something?
Sandra Willford
  • 3,459
  • 11
  • 49
  • 96