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
4
votes
1 answer

Draft.js (react-draft-wysiwyg): text update from the outside of the Editor component does not work

I'm trying to update the text from a calling component into the Editor component. I use the props to pass the text from the caller, but when the text change (props is updated in the ContentEditor) the text in the Editor component is not: Here is the…
robob
  • 1,739
  • 4
  • 26
  • 44
4
votes
1 answer

Select text in Draft.js decorator onClick on decorator to implement drag and drop

I am trying to implement a functionality that will let me drag around decorated text within a Draft.js editor and have spent a couple of days worth of brain power on this problem. The blue hightlights are chords in lyrics and my goal is to adjust…
tobi-or-not
  • 566
  • 4
  • 13
4
votes
1 answer

Nextjs with Draft js - document is not defined when i initiate editor with HTML content using convertFromHTML method

I want to initialize my Editor state with a html markup but im getting this error at renderToString (/home/al/Documents/node/admin-next/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27) at render…
elpmid
  • 872
  • 1
  • 6
  • 18
4
votes
3 answers

Using Draft js mention plugin with react hooks

I have been trying to get draft js mention plugin to work with react hooks but can't seem to figure what's wrong with the code. Appreciate any help on this. import React, { useRef, useState, useEffect } from "react"; import { EditorState } from…
Adrian
  • 105
  • 2
  • 6
4
votes
3 answers

React-Draft-Wysiwyg: Autoscroll on new line

How can I make editor's input to scroll down automatically on new line input? Like in example 6 at https://jpuri.github.io/react-draft-wysiwyg/#/demo. Now scroll stays on top and text cursor hides when goes below bottom border.
fihis
  • 41
  • 1
  • 3
4
votes
1 answer

Draft JS editor does not update it's content when its value changed by parent component?

I've a simple use case: There's a DraftEditor component which takes value as its prop and create a editor state based on value (empty or with content). It possible that the value gets changed by the parent and when it does, I expect the Draft Editor…
Veera
  • 32,532
  • 36
  • 98
  • 137
4
votes
0 answers

How do I show drop-down while typing using Draftjs Modifier

I want to give hint or auto suggestion while user typing , I got an array which have four suggestion and I also able to append to word selection, how do I use Draftjs Modifier to to show list of option exact below the word as auto complete or how…
Shareque
  • 129
  • 1
  • 9
4
votes
1 answer

Applying Draft Wysiwyg in React Hooks Project

I try to integrate react draft wysiwyg in my React Hooks project. I initialize description this way: var editorState = EditorState.createEmpty() const [description, setDescription] = React.useState(editorState); ...and I apply editor this…
tolga
  • 2,462
  • 4
  • 31
  • 57
4
votes
0 answers

How to style DraftJS editor in React

I am implementing a web ui with React and the Material UI library. I need a custom styled DraftJS editor component but none of my tries worked. Let's imagine I want to have a red color for my hole text block within my editor component. The Editor…
questioneer
  • 41
  • 3
4
votes
1 answer

How to merge multiple draft-js ContentState's

I have a collection of multiple draft-js ContentStates which i want to merge together to display them in one Why? Through my GUI you can edit text snippets individually and then at a later point join them together. You are then presented…
Jan Benda
  • 152
  • 10
4
votes
1 answer

Highlight words in draft-js NPM

I have a draft-js rich editor. All I need is to highlight some words which I can supply to it in array. Just like I can supply some words in array to my editor and based on some class, it can highlight those. Any info about any external library…
Raghvender Kataria
  • 1,457
  • 7
  • 14
4
votes
1 answer

How to implement custom decorator in draftjs

I am trying to implement a Custom decorator for my draft.js component. I do not want to use CompositeDecorator, because I would like to render possibly many different types of decorations based on the input. I could not find any documentation for…
David Kozák
  • 41
  • 6
4
votes
1 answer

How to read DraftJS state from localStorage?

I have an issue with reading Draft.js raw content from localStorage. I would like to use previously stored rawContent as my initialState for the reducer. I think convertFromRaw function is my problem. I does crush silently (does not log to the…
Space
  • 178
  • 2
  • 10
4
votes
1 answer

Q: React-Draft-Wysiwyg How to add custom label to blockTypes?

Im trying to setup custom labels for blockType in react-draft-wysiwyg. According to this pool request I should be able to add displayName property to editor toolbar configuration object. I tried to implement this like that, but unfortunately it does…
Space
  • 178
  • 2
  • 10
1 2 3
…
49 50