Questions tagged [draft-js-plugins]

The tag has no usage guidance.

Filter by
Sorted by
Tagged with
1 vote
0 answers
146 views

how to convert draft js block response to html string with text alignment?

In my React project, I'm using the Draft.js editor with alignment plugins to allow users to align text. Now, I want to export the content from the editor to a PDF file. To do that, I need to convert ...
ElakkiyaSundaram's user avatar
0 votes
0 answers
13 views

DraftJS - Make first N character of the editor static

If there a way to make the first N characters of the Editor to be static. I tried using a decorator, but when you select all characters and press delete, it deletes the entire data.
Ankit Solanki's user avatar
0 votes
0 answers
152 views

Adding Table Support to Draft-js Text Editor: Exploring the draft-js-table-plugin Library

In our project, we are using the draft-js text editor. I am currently attempting to add table support to the text editor. After trying to implement it myself and realizing that the task was too ...
Lupital's user avatar
0 votes
0 answers
56 views

i want to upload image in draft js editor. image completely uploaded in server but draft js can not store url in img block

I want to upload Image in draft js Editor. when i upload image in server then it successfully uploaded in server and get back imageurl. i want to save this url in <img src="" /> src ...
basan nofal's user avatar
0 votes
0 answers
79 views

How to change font size of selected text in draft.js

I am using draft-js-plugins. This library does not have to change the font or font size. I need that when a text is selected it changes its font and size to the one selected. As in google docs. To ...
Agustin R's user avatar
0 votes
0 answers
29 views

Is it possible to convert draft-js ContentState to an openxml document?

I'm looking at the React component draft-js, a rich content editor which creates a blob of text called "ContentState". I have a React 18 web application created using create-react-app. Is it ...
Tom Regan's user avatar
  • 3,640
0 votes
0 answers
226 views

How to set max-limit character when markup is applied - Draft js - react-draft-wysiwyg

This answer is only working if the editor has only text inside. max-length check is not working if markup is applied to the text like bold or italics. Can anyone please help me in this case. ...
starVandalizer's user avatar
0 votes
0 answers
119 views

draft-js convert to html to display on page

I'm looking for some help on how to convert a string of html like below to draftjs and convert back to html to display on a page as html without a rich text editor or WYSIWYG: const htmlString = `<...
Andy Harrison's user avatar
0 votes
0 answers
207 views

Can’t insert text after inserting image in edit mode draft.js

I first upload the image to s3 through my draft.js editor. The image is saved and everything working well. But when I open draft.js to edit the content, I can’t add some text. It seems that the part ...
Avner Russler's user avatar
0 votes
1 answer
250 views

Mentions up down arrow not working after draftjs custom key binding

When I use "draft-js" custom key binding, the up and down button of its mentions plugin on suggestion popup stopped working. As per documentation, I have tried to return getDefaultKeyBinding(...
Lalit Garghate's user avatar
0 votes
1 answer
216 views

Draft-js static toolbar UX problem, button doesn't "light up"

I've searched for this problem and couldn't find any information about it. Why is this happening? I'm trying to build a simple rich text editor with draftjs and I've encountered an UX problem with the ...
No Sarcasm's user avatar
3 votes
0 answers
407 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
0 votes
1 answer
255 views

How Do I style the draft-js-plugins/image using css?

I am using the @draft-js-plugins/image to display image in my react application. It is working but I can't seem to understand how to style the plugin so as the style my images that are displayed. I ...
user avatar
1 vote
0 answers
125 views

Problem rendering inline tex with draftjs-latex-plugin

I am using draft-js-latex-plugin package to implement Tex in my Draft-JS editor. The documentation of the package says the following: Press $ for starting Inline TeX Press CMD + M for starting Tex ...
Asad Zubair Bhatti's user avatar
1 vote
1 answer
919 views

How to convert draft-js mentions into html?

I am using "@draft-js-plugins/mention" plugin together with rich text functionality provided by draft-js. Also, I'm using "draft-js-export-html" library to convert the editor state ...
K M's user avatar
  • 31
1 vote
0 answers
419 views

Draft js - Add entity on editorState change

I am using Draft JS for its Mentions plugin. What I would like to do is to give the user the possibility to insert mentions programmatically so that when he types (for example) "@*", the ...
The problem with other minds's user avatar
0 votes
1 answer
829 views

Draft JS programmatically insert text as span

I am using Draft.js for its mentions plugin. Sometimes, I want users to add a mention not by selecting an item from a dropdown but by writing something like, for example, "@item" or "@...
The problem with other minds's user avatar
2 votes
1 answer
604 views

Multiple draft-js-plugins editors on the same page don't work

I'm trying to use multiple rich text editors in a React form. I built the editor component using draft-js and also I integrated the inline toolbar from draft-js-plugins. Because this is a react-hook-...
Valentin Vucea's user avatar
1 vote
1 answer
492 views

How to delete the image (from database) after using backspace in editor ? (draftjs)

If suppose the user uploaded the image but later he decided to remove the image using backspace or delete then how it will delete from the database. Currently, it's not deleting from the database and ...
Lucas Abrantes's user avatar
1 vote
1 answer
685 views

How to change the font size of the bullets of an unordered list item in draftjs?

I have a rich text editor built using draftjs. I implemented the functions for changing the font size, font family, and color of the text in the editor. I also implemented the functionality of adding ...
sundar sundar's user avatar
0 votes
1 answer
1k views

How to add custom button in draft.js editor toolbar for adding a horizontal rule and how to get inline styles using stateTOHTML

I have a texteditor with a basic toolbar header I want to add a text alignment options(right, left, and center indent) and a divider(horizontal line) option I am using react-draft-wysiwyg editor and ...
CoderBeginner's user avatar
0 votes
0 answers
579 views

draftjs handle backspace deleted content

Currently I am building a react application that use draftjs as Editor Particularly, I added a pasted image feature with the usage of onPastedFilesChange attributes and AtomicBlockUtils....
Zhongwei Xu's user avatar
1 vote
0 answers
256 views

Draft.js comes with error: stack frames were collapsed

This is a question on how to deal with pasted image using draftjs in the case of Japanese input mode. Recently I am using Draft.js as text editor. Sometimes we need to insert image into the editor ...
Zhongwei Xu's user avatar
0 votes
0 answers
241 views

draft js(react js) decorators ,after 1000 words text background should be colored tweeter tweet box like

i have done it with decorators ,if i didn't enter while writing(creating new block) ,it works fine enter image description here but when we text with new line decorator call as many time new line ...
stark_sanjeev's user avatar
1 vote
1 answer
1k views

How to use draft-js-plugins in react-hook-form

I am using react-hook-form and draft.js as wysiwiyg. My code where I am using draft-js-plugins: import React, {useRef} from "react"; import { Controller } from "./src"; import ...
user2772197's user avatar
1 vote
4 answers
872 views

How to add a tooltip to a selection?

When the users selects some text, I want to be able to show a tooltip, right below the selected text? Any ideas how can I do that?
glafche's user avatar
  • 101
0 votes
2 answers
1k views

Hashtags suggestions working 'react-draft-wysiwyg'

I'm using 'react-draft-wysiwyg' library and everything working goes well. I'm wondering if there is a way to add hashtags suggestions once the user starts to type the '#'? <Editor ...
Shira's user avatar
  • 394
2 votes
2 answers
1k views

Draft.js Mention Plugin is not working after rendering contentState to the editor

I am using mentions with the draft.js (like this @yourname) and sending to the database to save and fetching it to render on the web page but things are not working as expected. On Saving to the ...
hardy's user avatar
  • 890
1 vote
1 answer
291 views

Draft JS: hide the cursor

I'm trying to hide the cursor in draft-js. I want it to function as normal but the user not to be able to see the blinking cursor, is there any way of doing this in draft JS?
user3472360's user avatar
  • 1,507
0 votes
2 answers
210 views

Build custom plugin to draft js

I want to add @draft-js-plugins/mention but at the moment it's not possible since one of the dependencies of this package is immutable js that use a very old version thus cause an issue in my project ...
Shira's user avatar
  • 394
0 votes
1 answer
1k views

Position Draft js emoji popover on top

I'm using the @draft-js-plugins/emoji but I'm having problem positioning the emoji popover on top of the editor. Currently it's showing on bottom like this I want to show this popover on top ...
Shamim Fahad's user avatar
0 votes
1 answer
921 views

Draft JS linkify/mentions plugin on convertToRaw removes anchor tag

I am using the draft js editor and its linkify and mentions plugin. Adding link and mentions with link work fine on editor but when I try to get the html, anchor tags are removed from the content. My ...
Saket's user avatar
  • 69
0 votes
1 answer
529 views

Draft-js-plugins emoji select component - close popover after select emoji

I'm using Draft-js-plugins emoji select component with react and I'm trying to close the popover upon selection of an emoji, I have read the documentation but didn't find a way to achieve that. Here ...
Eyal Ovadya's user avatar
0 votes
2 answers
2k views

Draft-JS - Translating <img> into an atomic block with convertFromHTML gets rid of Entity

So I have been trying to get the method convertFromHTML to translate Images into an atomic block so that it may be compatible with the draft-js-image-plugin since it expects blocks of the type atomic ...
Tekill's user avatar
  • 1,171
1 vote
0 answers
132 views

How to stop caret blinking in Draft.js?

I wanted to stop the caret from blinking in case of readonly mode. Is there a way to achieve it? I tried setting animation property in .public-DraftEditor-content but doesn't seem to work. I don't ...
Prashant Shubham's user avatar
0 votes
2 answers
2k views

Draft.js adding hyperlink using applyEntity doesn't seem to work

I've been working on this problem for a while, and I hope it's not a bug. I'm testing a text editor using Draft.js, and I'd simply like my users to add a hyperlink to their articles, so I create a ...
Bennybear's user avatar
  • 345
0 votes
1 answer
662 views

Draft JS, mention plugin renders as plain text

I am implementing React's "draft js" with mention plugin. https://www.draft-js-plugins.com/ So far i am able to create the editor and creating the mention tags. I can save the mentions in my ...
Muhammad's user avatar
3 votes
0 answers
819 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
0 votes
2 answers
2k views

Adding image draft-js-image-plugin

I've tried multiple different ways to try to attach an image in draft-js. My attempts followed the example in the tutorial https://www.draft-js-plugins.com/plugin/image. For the "Add Image Button ...
Alex Donley's user avatar
0 votes
1 answer
1k views

Cursor jumps to left when typing until after 2 characters

I am using draft-js-plugin-editor in TextArea. When I start typing, cursor jumps to the left until after 2 characters. For example, when typing "Information", this will type as "...
bdfios's user avatar
  • 657
0 votes
1 answer
609 views

ReactJS DraftJS Initialize from Serialized Data

So I am using the DraftJS package with React along with the mentions plugin. When a post is created, I store the raw JS in my PostreSQL JSONField: convertToRaw(postEditorState.getCurrentContent()) ...
Vikhyat Devireddy's user avatar
1 vote
1 answer
1k views

DraftJS. Wrap up custom HTML tag with a custom Component

Trying to implement smth similar with pure Draft.js: To be more precise, i want to have these hidden blocks of original message(s) that are editable and expandable by clicking three-dots icon So, ...
Ivan L's user avatar
  • 181
1 vote
0 answers
2k views

Draft.JS How to create custom link or span based on custom entity

Using draft.js how you go about adding a custom link entity with meta data? Example of what I did: For one of my editor menu buttons I have added a click handler that creates an entity called '...
Kamran's user avatar
  • 819
0 votes
1 answer
587 views

Draftjs mentions plugin with scroll

The issue is keydown/keyup aren't working when mention list popup has scroll , i can scroll using mouse but keyup/keydown aren't making the scroll move to the right position
Anikita's user avatar
4 votes
3 answers
5k views

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, ...
Adrian's user avatar
  • 105
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
1 vote
1 answer
2k views

Draftjs replaceText conserving style

I'm using Draftjs with draft-js-plugins-editor, I'm using two plugins : draft-js-mathjax-plugin and draft-js-mention-plugin When the user is mentioning element(s) using '@' I want later to replace ...
axel7083's user avatar
  • 571
1 vote
1 answer
2k views

Draft.js - convert current block to Atomic Block

I'm working on a custom draft.js plugin that inserts an Atomic Block with a GIF in it. I started by copying the Draft.js Image Plugin as it's almost identical. I've got my plugin working but there's ...
Merlin Mason's user avatar
  • 1,617
1 vote
0 answers
97 views

"n.createFromText not a function" error when trying to initialize editor with text

Trying to truncate text inside the editor before I display it to the user but I am getting the following error, please take a small look you might catch some thing I am missing main.js:46 TypeError: ...
bihire boris's user avatar
  • 1,530
5 votes
2 answers
3k views

react-draft-wysiwyg - Warning: Can't call setState

I did make a simple react app with react-draft-wysiwyg, but I get a warning. import React from "react"; import ReactDOM from "react-dom"; import { Editor } from "react-draft-wysiwyg"; import "../...
Alexander Juhl's user avatar