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.

Filter by
Sorted by
Tagged with
0 votes
0 answers
8 views

How to Prevent Text Deletion in Draft.js for IMMUTABLE Entities?

I'm currently working on integrating Draft.js, a rich text editor framework, into my application. I'm encountering a specific issue where I want to prevent the deletion of text within the editor. Here'...
Adam's user avatar
  • 1
0 votes
0 answers
20 views

Wysiwyg editor gives an error when the editor is empty no text is written in it and i hit the backspace button in the editor

I use Nextjs with Typescipt. This is my code of editor component import {EditorState, ContentState, convertFromHTML} from 'draft-js' import {EditorWrapper} from "src/@core/styles/libs/react-draft-...
Saad Ali's user avatar
0 votes
0 answers
25 views

Using Custom option component in toolbar React Draft Wysiwyg

const TextAlign = (props) => { console.log('PROPS:', props) return ( <button type="button" onClick={() => { ...
Bilal Ahmad's user avatar
0 votes
0 answers
6 views

DraftJS: Trying to figure out how to get an external keyboard to trigger deletion and next line

I have set everything up so that my external keyboard is successfully inputting data into draftjs no matter the language coming from the keyboard with exception of being able to go to the next line or ...
Xavier's user avatar
  • 11
1 vote
0 answers
78 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
11 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
61 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
1 vote
1 answer
35 views

Cannot read property 'getIn' of undefined in nextjs

Iam facing the error "Cannot read property 'getIn' of undefined" when running my code. Does anyone know how to fix this. How to reproduce: just write "aa" this is my code: import ...
AdamWarLock9292's user avatar
0 votes
1 answer
46 views

Facing issues showing HTML formatted data of draft js in UI

I am facing an issue showing my text in HTML format you can see below I am getting output correctly from the editor but when I display this text in my UI that style is not getting applied Getting ...
dev john's user avatar
0 votes
0 answers
30 views

Cant make text editor with draft,js

I have a basic component of text editor with draft js The problem is that I can't choose a font, font size, color, add a photo, choose an emoji, or create a link. What do I need to do to make this ...
cedFlame's user avatar
0 votes
0 answers
42 views

How to nest an image inside the link in react-draft-wysiwyg

The react-draft-wysiwyg library is used As a result, I need to be able to make images links. So that the resulting html would be something like this: <a href="some-addr"> <img ...
nilecrocodile's user avatar
0 votes
1 answer
32 views

When using MUIRichTextEditor as a redux form Field cursor keeps returning to start

When using MUIRichTextEditor as a redux form field, with every key stroke, redux updates the store and then my component render function is called. I want to set the new value of the ...
Yoram Gronich's user avatar
0 votes
0 answers
26 views

Using a Chrome Extension content script, how to replace user selected text in a DraftJS editor with some other text

I am developing a Chrome Extension with a content script that injects a button onto a webpage. The webpage has a DraftJS editor and I need to replace any user-selected text with a string of question ...
Osama Akhtar's user avatar
0 votes
0 answers
45 views

How to change the default value of toolbar in WYSIWYG editor in React JS

Have customized only the required toolbar to present in my editor. Need to change the default text of dropdowns present in the WYSIWYG editor Tried to place the default Value and tried to concat the ...
aji bala's user avatar
0 votes
0 answers
23 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
59 views

Draftjs toolbar loses formatting state when Editor is focused

I'm using draft-js and react-draft-wysiwyg to build a rich text editor but I'm having an issue. Before interacting with the Editor, if you enable bold/italic before typing and focus the Editor, the ...
Ricardo Ordonez's user avatar
1 vote
0 answers
21 views

Draft.js editor still shows updates even when the onChange function is not working

I am currently working with Draft.js and I have encountered an unexpected behavior. Despite the onChange function not working, the Draft.js editor continues to display updates in its content. I have ...
Amin's user avatar
  • 21
1 vote
1 answer
516 views

LexicalJS text editor : how can I allow users to add text pressing buttons

I'm trying to figure out Lexical but the docs are not great at all (despite the project looking very nice). I'm trying to add content into the editor automatically by getting my users to press some ...
Tibo's user avatar
  • 631
0 votes
0 answers
56 views

In draft.js editor I customized the code to set the Text Style to BOLD after typing "* "

if(text.length > 1) subString = text.substring(text.length-2, text.length); if(subString == "* ") { toggleInlineStyle("BOLD"); text ...
Bryan Lei's user avatar
0 votes
0 answers
19 views

Header text format after typing # in draft js

When I type in #, I want the following text after # in **HEADER **format in draft Js and React JS, Any idea how to do that? I am getting all the results in button styles format, while what I need is ...
Avish's user avatar
  • 1
0 votes
0 answers
25 views

Draftjs - how to select a word that was mouse clicked

I would like to be able to find the start and end offset of a word that was mouse clicked inside the draftjs editor area. I know how to get current selection etc. but cannot figure out how to find the ...
Franek Kuciapa's user avatar
0 votes
1 answer
117 views

How can I insert content at the beginning of my EditorState in Draft.js?

So I'm trying to write a method to insert a given string to the beginning of the EditorState. Basically the string should always be at the beginning, the font style should be italic, there should be a ...
Louie's user avatar
  • 17
0 votes
0 answers
61 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
33 views

Why can't I change font family?

I am using react draft wysiwyg to implement a text editor into my application. I have removed font family selection from the toolbar and want to style the editor content using the same font family as ...
stinny's user avatar
  • 147
2 votes
1 answer
742 views

react-draft-wysiwyg The converted base64 for image is overflowing from the upload image field

I have a working react-draft-wysiwyg editor application. I am able to add images to editor using this. There is one issue i am facing , please check this below : Here's the code so far what i've ...
ksd030687d's user avatar
0 votes
0 answers
27 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,610
0 votes
1 answer
967 views

How to get the rendering in the correct format using Lexical Editor

I'm trying to write a blog for myself for the first time, and I've been using Lexical(facebook/lexical: https://github.com/facebook/lexical) to build a rich text editor in the panel for the past two ...
HappyKoala's user avatar
0 votes
0 answers
64 views

how to add react clickable button element as text input along with free text in draftjs?

im aiming for a rich text input text component that enable user to type free text but also can insert tag/button-like element to the text box whenever user select something from select dialog similar ...
utopictown's user avatar
0 votes
1 answer
80 views

how to re-populate draft js with a given text

so the following function appends the given text to the existing text in the editor, but what I want is to totally replace whatever exists. const sendTextToEditor = (editorState, text) => { ...
chadibassily's user avatar
0 votes
0 answers
84 views

Add dynamic default value in draft js

I wand to add dynamic value as default value in my draft-js form. Here is what I am doing: setEditorState( EditorState.createWithContent( ContentState.createFromBlockArray(...
stroke's user avatar
  • 1
0 votes
2 answers
406 views

React - Drag'n'Drop Image upload into DraftJS Wysiwyg

I have implemented DraftJS Wysiwyg HTML Editor into my form, including the Drag n Drop plugin and it works good. See below for current implementation. What I want to achieve is that I want to trigger ...
marry ximis's user avatar
0 votes
0 answers
191 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
1 vote
0 answers
41 views

React-draft-wysiwyg contents not editable [duplicate]

I'm new here. I'm currently building an editor using React-draft-wysiwyg editor. I was able to send my data to the backend and call it back. However, when I bring it back onto the Editor, I can't make ...
laily's user avatar
  • 11
0 votes
1 answer
217 views

Unable to edit text in Draft.js editor when setting it with data from Firebase

I created a blog app using Draft.js and I'm a bit stuck on the EditPost.js file. I am able to import the data from an existing post into the editor but unable to edit the text at all. The cursor just ...
Julian's user avatar
  • 97
0 votes
0 answers
28 views

Rendring every word as a span in DraftJS

I want to use DraftJS for a project but I want every word to be wrapped in a span tag and have some attributes like this <span> <span class="example" style="color:red;"...
Tarun's user avatar
  • 41
1 vote
0 answers
111 views

How to do string manipulation Draft.js editor without losing the changes?

What I'm trying to do is edit some text on Reddit.com using browser console. I'm creating an extension that appends some text to the comment. Reddit uses Draft.js as its text editor. When I try to ...
Roarke's user avatar
  • 11
1 vote
0 answers
36 views

How do I highlight words starting with a dollar sign in Draft.js

I'm trying to change the font colour for words starting with a dollar sign ($). I believe this should be possible in Draft.js as both stocktwits and twitter appear to use this library and changing of ...
Jamie Lyons's user avatar
0 votes
0 answers
67 views

Draft JS Mention Suggestion dropdown doesn't show up

The openMentionSuggestions value never changes to true and dropdown never shows, what's the problem?
Vahan Zakaryan's user avatar
0 votes
1 answer
577 views

Hide some tools from React Draft Wysiwyg text editor toolbar

Is there any way to hide some unnecessary tools from the React Draft Wysiwyg toolbar and change the toolbar order? Editor: <Editor editorState={editorState} onEditorStateChange={...
Eshan Rajapakshe's user avatar
1 vote
1 answer
79 views

'Missing draft message' in Javascript

I am working on this issue from last 3 days. I dived through the stack overflow, but of no use. There are the questions about "Missing draft message", but I am still getting this message. I ...
Muzammil Zafar's user avatar
0 votes
0 answers
450 views

How to convert RTF ANSI to HTML using Javascript or Any React text editor which support RTF format

I have to render RTF ANSI format data in the React Draft Wysiwyg / any other react editor. we are getting API response as RTF ANSI format, which I have render in the rich text editor after any changes ...
Naresh M's user avatar
0 votes
0 answers
156 views

How to display Link from a comment in DraftJs editor?

I am pretty new to draft Js. I have tried using many ways to display link in draft js editor from a string where the string may be like: Here is the story [HyperLink](https://exampleHyperLink.com) ...
Sayantan Mondal's user avatar
0 votes
0 answers
106 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
184 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
0 answers
95 views

draft-js-link-detection-plugin save to html with link?

So, what I'm trying to do is use this draftjs plugin to save text already formatted as HTML so I can insert it as HTML in my div to have clickable links, I already saw these examples and guides and ...
DepletedKnowledge's user avatar
0 votes
0 answers
386 views

react-draft-wysiwyg mention suggestions are not getting clicked at once in mobile view

I used react-draft-wysiwyg editor. It is working fine in desktop mode, but in mobile view it has a small issue. When I click on a mention suggestion, it doesn't get clicked at once. Also, if I first ...
Amit Saraswat's user avatar
3 votes
0 answers
71 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
1 vote
0 answers
584 views

DraftJs : Custom toolbar button to add a specific html element to editor

I'm tring to create a customized Rich text editor. How can I add a custom toolbar button with a custom function behind it to the draftjs + react-draft-wysiwyg editor? When user click on the custom ...
Eshan Rajapakshe's user avatar
0 votes
0 answers
79 views

How to insert RTF data in React Rich text editor like draft or tinymce

I have RTF string like below I want this to render/insert in text editor, please provide any possible option '{\rtf1ansi{\fonttbl\f0\fswiss Helvetica;}\f0pard This is some {\b bold} text.par }' ...
Naresh M's user avatar
0 votes
0 answers
81 views

Draft.js clears empty elements in react

I use draft js Editor. There is no problen when typing in Editor. I can create empty lines a lot. This is my state: <p>first line</p> <p></p> <p></p> <p>&...
birolaygün's user avatar

1
2 3 4 5
15