So, I am making a note taking app with react, and I want to make something that works like apple notes where you can click on the checkbox and it adds a new checkbox to the writing area.It keeps adding a new one when you press return/enter until you press backspace, and then you can resume typing regular text. I've been trying to do it yesterday pretty much the whole day, I found some rich editor text libraries but even though they have functionality to style the text e.g bold, italic etc. I cannot find a library that provides this specific functionality. I tried using a div with the contentEditable attribute instead of textarea but I wasn't sure what to do.
In case my explanation was bad here is an image.
Related
Is there a way to show the helper text space on a version 5 React Material UI Input on an input even when it’s disabled? Right now when the component is disabled, the helper text space goes away as well.
My use case is that when I’m in the view stage of my page, all of the inputs are disabled and then when I hit edit, this action adds the blank line of helper text which causes all of the inputs to jump as each one adds bottom padding. I’d like to avoid this jumping behavior if possible.
How do I get current typing text in Text Editor and give auto complete like mention or hashtag in draftjs
here is simple
https://codesandbox.io/s/jovial-newton-hn18i
I tried autocomplete it enable on separate input field not in the Editor,
So is their a better way to achieve auto complete (give dropdown ) in draftjs
you can find what you are asking for with Decorators concept in draft.js
which consist of fo two core things a strategy function where you put your logic
and a custom component
http://davidandsuzi.com/how-to-use-draft-decorators/
In a test-class, is there any way to invoke Buttons inside the toolbar, without a name (""), which were added like this?
getToolbar().addMaterialCommandToRightBar("", FontImage.MATERIAL_PICTURE_AS_PDF, e -> createPDF());
Or can I somehow tell the test-class to show a specific form ?(which is happening when I click the button without a label).
The test recorder is not generating any code in that case. It seems that it is only working with buttons, which have a non-empty String as name, as they are simply invoked by
clickButtonByLabel("Label");
The test recorder was written before the Toolbar existed, we tried to update it for the Toolbar recently but this proved to be pretty difficult.
We have this issue that covers this bug. As a workaround you can post the command directly in the code of the test.
I know there are lots of great rich text editors out there that can easily be ported to angular and plenty of discussion on how to do this, but I'd like to create my own.
I have the basic idea down:
create a text area and watch the input and perform a function as the input changes. I am familiar with the ngBindhtml directive, only to the extent that I can apply it to an element.
Any idea how I might be able to create a function that would render plain text into html?
I've tried it before but ended up using textAngular.
Basically i replaced the textarea with a iframe, similar to the way tinyMCE does.
The contenteditable on a element allow you to replace the textarea and write directly on the div. You would insert all html elements like headers and text this way. You'll have to handle the cursor position on text, apply styles based on buttons and text selection, etc.
Well, I also came across this and created my own editor as I was required to add features like Table addition etc. The repo is still under development but you can some idea by taking a look at this plunkr. Unlike old answers, I have tried to keep it as a component so that it can be reused at many other places as required.
You can star this git repo to stay updated or feel free to add your inputs
I am having some issues getting TinyMCE to be as flexible as I need it to be. In my editor (used in a cakePHP-based app) I am not allowing users to edit the html, so we are relying entirely on the WYSIWYG. Unfortunately, TinyMCE is currently not allowing users to apply two CSS classes to the same text. Whichever style is applied last wipes out the original.
To give an example: If a user wants to designate a line of text to be both 'huge' and 'highlighted' (both CSS classes), they would highlight the text and choose 'huge' from the CSS style dropdown, then highlight the same text again and choose 'highlighted'. What results is text that only has the 'highlighted' class applied to it.
I can work around this problem currently by just adding an extra character to the text I am trying to style, apply the 'huge' class to that, apply the 'highlighted' class to the original text, and then delete the extra character. But, this really is far from an ideal solution.
Does anyone know of a way to resolve this issue?
You will have to write your own plugin looking similar to the style plugin.
When the user selects a class from the dropdown you just add it to the selected text instead of replacing it.