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.

draftjs
345 questions with no upvoted or accepted answers
Filter by
Sorted by
Tagged with
8 votes
0 answers
1k views

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 ...
jorgen's user avatar
  • 3,505
8 votes
1 answer
946 views

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, ...
Guillaume Badi's user avatar
8 votes
1 answer
1k views

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. ...
n9iels's user avatar
  • 895
6 votes
0 answers
2k views

How to create a table with DraftJS

Is there any way to create a table with DraftJS or any plugins? A plugin which allows the user to enter custom HTML (with table support) would be sufficient. As I understand it, a plugin can render ...
pythonjsgeo's user avatar
  • 5,212
6 votes
0 answers
1k views

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 ...
Budaa's user avatar
  • 349
6 votes
0 answers
2k views

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 ...
Rahul's user avatar
  • 1,110
5 votes
0 answers
215 views

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 ...
Luke Steyn's user avatar
5 votes
1 answer
321 views

Draftjs mention plugin with browserify

I tried to get the mention plugin in draft-js get working with Browserify. This is because of the fact that our application is build with Browserify. It's about this plugin: https://www.draft-js-...
sneeky's user avatar
  • 1,498
5 votes
2 answers
3k views

Using draft js with html in and html out

I would think this is a very very common request but yet, I can't find anything to help me solve it. I've tried various plugins like draft-js-import-html and variations but they never seem to fully ...
denislexic's user avatar
  • 11.1k
5 votes
0 answers
545 views

Constraining block types in draftjs editor

In draftjs plain paragraphs are given have a block type of unstyled, although draftjs does define a paragraph type. Similarly when pasting, the default block type for p or div tags is unstyled. What ...
pwray's user avatar
  • 1,095
4 votes
0 answers
182 views

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 ...
Shareque's user avatar
  • 129
4 votes
0 answers
1k views

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 ...
questioneer's user avatar
4 votes
1 answer
2k views

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 <Editor /> Why? Through my GUI you can edit text snippets individually and then at a ...
Jan Benda's user avatar
  • 162
4 votes
1 answer
2k views

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 ...
David Kozák's user avatar
4 votes
0 answers
729 views

Set text programatically in already initialized draft.js editor

This is my component in it's current state. class TextInput extends React.Component<TextInputProps, any> { constructor(props) { super(props); this.state = { editorState: EditorState....
Willy G's user avatar
  • 1,222
4 votes
0 answers
922 views

Draft.js new line after and before IMMUTABLE entity

how to get rid of a break after and before every IMMUTABLE object in editor. When I add image for example. const contentStateWithEntity = contentState.createEntity( "image", "...
Piotr Leniartek's user avatar
4 votes
0 answers
653 views

How to store and index Draft.js output in databases?

What is the most efficient way to perform indexation for full-text search? I use mongodb, but i think this is not so important in the context of this question I'm thinking about two ways to store ...
stkvtflw's user avatar
  • 12.9k
4 votes
0 answers
136 views

Draft.js segmented mutability with "." delimiter

Apologies if this is in the documentation, but I've been unable to find it. With the segmented mutability option, is it possible to have something other than a "space" be the delimiting character? ...
gfunk's user avatar
  • 602
4 votes
3 answers
3k views

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 ...
fihis's user avatar
  • 41
3 votes
0 answers
119 views

ReferenceError: Window is not defined while importing htmlToDraft from html-to-draftjs on Node.js

I wrote a separate function to convert html to draftjs, there I used htmlToDraft function from html-to-draftjs. The Function: const htmlToDraftBlocks = (html) => { const blocksFromHTML = ...
Radhushani's user avatar
3 votes
0 answers
511 views

problem about Draft-js when remove images by Backspace key

When deleting an image with text in the draft.js editor for image upload, occasionally the IMAGE entity remains even though the image was not rendering on the editor. This causes problems when ...
Hasham Minhas's user avatar
3 votes
0 answers
418 views

Draft.js data is not sent to the server in React

I am using Draft.js editor for my project which is linked with a <textarea> where data from the editor is converted into Html so I have encountered a problem that whenever I click the Submit ...
ItsHarsh.json's user avatar
3 votes
1 answer
2k views

How to add text based on click which is outside the Editor component , to the Editor

what I have tried , here i have added two button when user click value stores in state, than that state is passed to the editor , copy as a props . then I was trying to convert value to html code and ...
learner62's user avatar
  • 560
3 votes
1 answer
4k views

convertFromRaw giving this error "Invariant Violation: invalid RawDraftContentState"

I want to convert html code to draft object to save my editorState But convertFromRaw function giving me Invariant Violation: invalid RawDraftContentState <- this error. try { const ...
Asgar's user avatar
  • 431
3 votes
0 answers
537 views

How to render SVG icon in react-draft-wysiwyg

I'm using React Draft Wysiwyg. I try to add a fontawesome svg icon to draft content but instead of an icon it renders an empty paragraph. handleApplyButton = () => { if (this.state.iconName !== ...
mrabaev48's user avatar
  • 193
3 votes
0 answers
838 views

Facing issues with Draft JS in android browsers

We are using draftJS for creating a rich text post/comment with user mention(draft-js-mention-plugin), and hashtag(draft-js-hashtag-plugin) functionality. Following is the code sample. <...
Gaurav Suman's user avatar
3 votes
2 answers
2k views

what type to give ref in React/TypeScript while using React.forwardRef?

I just can't get the typings right. I am forwarding a ref which works correctly if I set ref: any as shown below and ref.current.focus() works. function EditorFeat(): JSX.Element { const ref = ...
zakaria's user avatar
  • 79
3 votes
0 answers
2k views

Draftjs: link not working, renders as normal text

I'm trying to add links to my draftjs editor. I first select the text i want to add a link to, then click on a button that asks for the URL. Much like stackoverflow's own editor. I am rendering the ...
Somjit's user avatar
  • 2,593
3 votes
1 answer
2k views

How to get the links in Draft js in read only mode?

I am creating a simple blog writing application. I am using Draft.js as an editor. I am able to create the link while writing the blog but when I go into read mode all the links are missing. Here are ...
Fullstacker's user avatar
3 votes
0 answers
1k views

How to resize draft js editor uploaded images

I was working with draft js editor but cannot able to resize the selected image while rendering on the editor. Just want to fix selected image width that greater to blog width to blog width. Below is ...
afterNerd's user avatar
3 votes
0 answers
573 views

Draft.js - How to make smooth real-time editor with grammar checking functionality?

I tried to make a rich text editor with real-time grammar checking functionality. I have my own dictionary and checking engine. The problem here is the editor is not smooth as checking engine is run ...
Richard Zhan's user avatar
3 votes
0 answers
304 views

Draft Js performance issue while editing large content

We are using Draft.js library and React Js to create online text editor. There is a noticeable lag between typed text and reflecting it on the screen and this behavior is mostly for the large editor ...
Jyoti's user avatar
  • 31
3 votes
1 answer
4k views

react-rte (Rich Text Editor): how to implement inline style for custom components?

react-rte is a Rich Text Editor based on draft-js. My goal is to customize the toolbar components with, e.g., material ui react components. Reading through the react-rte docs, I think that there are ...
Kwhitejr's user avatar
  • 2,256
3 votes
0 answers
1k views

iterable.length has been deprecated

I am trying to use react-draft-wysiwyg with redux. My code looks like: <Editor editorState={this.props.editorsState[el.i]} onEditorStateChange={e => this.props....
Nema Ga's user avatar
  • 2,560
3 votes
0 answers
749 views

How to import html css class attribute (aka className in React) into Draft.js EditorState?

I want to import or paste a simple html-fragment with class-name attributes, so that the classes are parsed and active within the Draft.js editor. This parsing and setting of the class-name should be ...
Matze Bär's user avatar
3 votes
0 answers
1k views

Draft.js applying Custom decorator seems having no effect

I try to make my First Decorator for my Draft.js. Based in the documentation so far I did: A file named LinkDecorator.js: import React from 'react'; import Utils from './Utils'; const Link= (props) =...
Dimitrios Desyllas's user avatar
3 votes
1 answer
4k views

Image not showing in react-draft-wysiwyg editor using draft js

I am using react-draft-wysiwyg text editor based on draft js in my application. I am facing some issues while trying to upload image via the editor image control. I am using the custom FileUploader ...
Shrawan Lakhe's user avatar
3 votes
1 answer
750 views

React & Draft.js - ConvertFromRaw not displaying "INLINETEX"

I'm developing a react app, using redux and electron. As I was programming an editor with INLINETEX support along with draft.js and the draft-js-mathjax-plugin, the necessity of saving my editor state ...
António Pedro Fraga's user avatar
3 votes
0 answers
1k views

draft.js contentState.createEntity is not a function

I copied the example of the draft.js editor and run it. This is an example from the official repository. https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/link/link.html But when ...
alex10's user avatar
  • 2,736
3 votes
1 answer
7k views

Draft-js: auto line break

I'm trying to implement an editor using facebook's Draft-JS framework which will be limited to a 50 characters line. I don't want the lines to break using css, I want them to really break into ...
Adam Tal's user avatar
  • 5,951
3 votes
1 answer
5k views

Unable to set cursor in Draft.js editor

I am trying to integrate the Draft.js editor in a project. The way I am thinking of using it, is to create a new EditorState out of my own state on every render call (the reason for this approach are ...
nutrina's user avatar
  • 1,042
3 votes
0 answers
2k views

React Draft.js server side rendering

I would like to use Draft.js with React and server rendering. Problem is, component is't rendered whole. So, in object inspector I can see div elements, but page is empty, without any text input or ...
Petr Tomášek's user avatar
3 votes
0 answers
240 views

Content state loses custom styles after data conversion

I need to store serialized content state into local storage. I'm trying to convert data and get it back using data conversion helpers. State contains some custom inline styles. This is a sample code: ...
heleg's user avatar
  • 259
2 votes
0 answers
474 views

Nextjs simplest prosemirror setup that enables to set content on change of props

I want to do a simple prosemirror editor with nextjs app. Here is what I tried to do import { useEffect } from "react"; import { EditorState } from "prosemirror-state"; import { EditorView } from "...
Merhawi Fissehaye's user avatar
2 votes
0 answers
228 views

How to render a Draft.js block as a React Component with Next.js

I use Draft.js for users to create blogposts, and I save the editor state on my database as json. To display the blogpost as HTML to users, I use draftjs-to-html to convert the state into HTML. The ...
Guilherme Luis's user avatar
2 votes
0 answers
145 views

How the image is saved in the Draftwysiwyg in ReactJS

I use the Draft wysiwyg for my React project . But I can only get simple text, but I can not get and save the image. How can I save both text and image on my server using Draft wysiwyg? component ...
fq sof's user avatar
  • 69
2 votes
0 answers
1k views

React-draft-wysiwyg editor contents not editable

I'm building a simple blog app, and have a working editor to publish posts. I am now trying to implement one for the user to update a previous post. The editor state gets updated to the correct ...
DeonV's user avatar
  • 372
2 votes
1 answer
686 views

cant remove list dot in draft js on backspace react-draft-wysiwyg

I use draftJS to edit text in my project, and at the moment I'm faced with such a problem that if you include a list with dots or numbers in an empty editor, then it cannot be deleted with the ...
egerka's user avatar
  • 33
2 votes
0 answers
396 views

draft-js convertFromRaw method does not apply the fontStyles to the formatted text retrieved from the database

I am using draft-js to create my own editor. I am using convertToRaw and convertFromRaw methods to store and retrieve the edited text from the database. While convertToRaw method is working fine. The ...
sundar sundar's user avatar
2 votes
1 answer
183 views

Sharing Draft.js toolbar across multiple editors?

I'm struggling to figure out how to make a single toolbar work across multiple editors - Only the current editor in focus should be effected by the toolbar. Is this possible? Is there a good example ...
mjs-wpi's user avatar
  • 71

1
2 3 4 5
7