Questions tagged [draft-js-plugins]
The draft-js-plugins tag has no usage guidance.
117
questions
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 ...
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.
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 ...
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 ...
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 ...
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 ...
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.
...
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 = `<...
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 ...
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(...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 "@...
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-...
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 ...
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 ...
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 ...
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....
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 ...
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 ...
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 ...
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?
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
...
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 ...
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?
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 ...
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 ...
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 ...
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 ...
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
...
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 ...
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 ...
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 ...
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.
<...
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 ...
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 "...
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())
...
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, ...
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 '...
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
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, ...
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 ...
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 ...
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 ...
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: ...
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 "../...