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

Copying images in from anti-scraper websites. Google Docs handles it easily - anyone know how?

I've been playing around with making a draftjs plugin that lets the user paste in mixed text&image content from websites and have images auto-uploaded to the server. I've quickly come to the realization that it's not easy, simply because of how…
Cerzi
  • 768
  • 5
  • 19
0
votes
1 answer

Draft.js - How to apply custom entity to current selection only?

I'm using a sample code found here to implement a custom entity for links. What is the current behavior? Select a portion of text, and create a link. Then keep typing after the link is created, and the editor will mark all characters you type in as…
Ming Soon
  • 998
  • 2
  • 11
  • 32
0
votes
0 answers

Pass child function to parent component

I have components App, TextBox, and Toolbar. TextBox is draftjs component, so it is basically textarea with a lot of features. Toolbar controls TextBox. //render in App return ( ...
Reenergy
  • 55
  • 1
  • 7
0
votes
1 answer

Enable left click in edit mode for linkify plugin for draftjs

I was trying draft-js-linkify-plugin for creating a simple rich text editor. I have a requirement that link should be clickable while I am editing the content. Is there any way to do it?
sahil solanki
  • 507
  • 6
  • 20
0
votes
1 answer

DraftJS: How to [show all, show less] with draftJS in readOnly mode?

With the DraftJS editor in readOnly mode, I would like to add the ability to show just a few lines of the editor content, with a link to show all, then a link to show less again. I have no idea where to start. Can you point me to a direction to…
acmoune
  • 2,981
  • 3
  • 24
  • 41
0
votes
1 answer

Handle multiple actions in handleBeforeInput for DraftJS

I am in a fix in this situation. If the user presses '1. ', i change the block to ordered block. Following is the code I do to change it: _handleBeforeInput(str) { if (str !== '.') { return false; } const { editorState } =…
Omkar
  • 2,274
  • 6
  • 21
  • 34
0
votes
1 answer

How to implement fixed, readonly headers between paragraphs in draft.js?

My editor is split into seperate "sections" eg History Examination Results Evaluation which are edited seperately and different semantics (content type) affects functionality inside. Each section would be designated by Header (section title) and…
David Thorisson
  • 1,033
  • 1
  • 11
  • 18
0
votes
1 answer

How to check if a phrase is contained in the contentState?

I'm trying to figure out if a certain phrase (it can contain a newlines or bullet points) is contained in the contentState of an editor instance. How do I lookup if a text (“the lazy fox jumped\n over the \n• lazy dog”) is contained in the…
roundrobin
  • 674
  • 1
  • 7
  • 23
0
votes
1 answer

Spelling *correction* with draft.js?

I'm using draft.js (and Electron). I have my custom spell checker set up and it's working to the extent that after doing a "webFrame.setSpellCheckProvider(...)" my draft editor is correcting displaying the mis-spelled words. At the same time I…
SteveB
  • 851
  • 2
  • 7
  • 15
0
votes
1 answer

ReactJS receiving data from API passing it as props to DraftJS

I'm relatively new to Reactjs and I've got little dilemma here. I'm using Draftjs as a WYSIWYG editor in a simple app. When receiving data from an API (as you normally would) then passing it to a child component via props, I'm having issue to update…
TSlegaitis
  • 1,231
  • 15
  • 29
0
votes
1 answer

React setState using ES6 Closures

I am totally new to React and ES6, and not able to understand how to apply the concept of closure here to update my state. I am working on a react app which uses Draftjs. I need to create a new map of (depth:[...text]) and store it in the component…
Omkar
  • 2,274
  • 6
  • 21
  • 34
0
votes
1 answer

Change style of list's bullet

I have a draft-js component. I can add styles into StyleMap (via adding new objects into customStyleMap). However when I have a selected list and change size, it only changes size of the selected text - bullets are still same. I know I can change…
Reenergy
  • 55
  • 1
  • 7
0
votes
0 answers

TypeError: blockRendererFn is not a function

I had tried a few times to implement draftjs in the past. However, after some time I tried it again today with the ^0.10.* version. But with the basic example, I am getting a constant error: Uncaught TypeError: blockRendererFn is not a function at…
Omkar
  • 2,274
  • 6
  • 21
  • 34
0
votes
1 answer

Draft Js - Add a react component

I'm trying desesperatelly to understand Draft Js logic but I don't find a good tutorial or documentation on the subject. What I want for the moment is just a function (triggered by a button below) that can add at the end of the editor one of my…
Lucien Perouze
  • 590
  • 1
  • 4
  • 13
0
votes
2 answers

How can I add script tags to my draftjs editor?

I've started building a rich text editor with DraftJS and have made decent progress. Now I am stuck on adding embedded content. I tried manually adding script tags by editing html separately and calling convertFromHTML with the new html, but that…
Daniel Jamrozik
  • 1,228
  • 2
  • 11
  • 25