How to simulate an artificial caret in a textarea? - javascript

What I am trying to do is something similar to how collaborative editor works. I want to allow two people to edit the same document. And for this I have to simulate an artificial caret. I can extract the other user's activity in term of addition and deletion at specified location in a textarea.
I will then transmit the location, along with the action to the other document. There I need to carry out the required change at the sent coordinate. I have searched and found enough ways to set the caret location and insert or delete text at the current caret location, but the problem is that the caret of the document moves to the location at which I make the change.
I don't want that, I want to have two carets, one each for the two users. Transmit their changes to each other documents and make the changes at their respective locations, while showing two different carets.
I just need to know if there are certain libraries that I can use, or even if I have to make this on my own, then how and where do I start. I don't even know how a textarea is represented within a browser. How can I characterize locations within a textarea, if I know that then I save the locations in memory and make the changes based on the input received.
I hope I make sense, thanks for any help.

have you seen this?
https://github.com/benjamn/kix-standalone/
This is how google docs does it:
https://drive.googleblog.com/2010/05/whats-different-about-new-google-docs.html

You could mimic a caret with a special character and do the regex to insert the partner text and move his caret, and you can use the real one. This is the simplest design I can think.
To get the idead, you could use the pipe | as a artificial caret. but this would easily conflict with user insert a pipe, to avoid this you can use sort of uncommon combination, or find some unicode character to act as a caret.
A real solution but way more complicated is not use a textarea, and use a DIV. this means that you need to handle all the key events and insert the character pressed manually to the document, and register the cursor position. But this way you can insert how many carets you want not just 2, something like this <span class="caret1"></span> you can make it blink, style with css, have diferent color for each caret, etc.

Have you tried Draft.js, from facebook ? https://facebook.github.io/draft-js/
"Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.
Draft.js makes it easy to build any type of rich text input, whether you're just looking to support a few inline text styles or building a complex text editor for composing long-form articles.
In Draft.js, everything is customizable – we provide the building blocks so that you have full control over the user interface."

Related

Replace words with chips or change their style within a textarea in VueJS (Quasar)

I'm trying to implement a textarea component that will accept text input. I wish to be able to replace some predefined keywords with chips to highlight them.
I am using Quasar Framework's q-input component and I can't find any way to control the style of the content. I'm willing to accept a solution that will include coloring the keywords and not replacing them with chips, but I can't achieve this behavior either.
textarea elements only deal with plain text.
Quasar has a WYSIWYG editor which allows to paste tokens. Try and see if you can bend it to suite your needs. While playing with it I found that the behaviour was quirky and I'm not sure the Vue component will give you the control you need.
You would need the dreaded contenteditable, execCommand and queryCommandState if you wanted to implement this yourself, which I can't encourage you to do as it's a painful experience.
Personally, I would fallback to a list of chips that would appear above or bellow the textarea as the user types.
if you use a monospace font*, you can compute the position and the length of the words you match in order to fill some colourful shapes in a canvas positioned underneath. You can't be too fancy with this but it's cheap to implement.
Note that dealing with a textarea is not as bad as dealing with contenteditable so you could be able to replace the words you match with spaces in order to see a canvas-generated chip through the hole but you will have to keep track of the state of the textarea content.
*Although it is not required to use a monospace font, using any other font will require to actually measure the length of the text and the length of the spaces you replace your matches with, and it will start to get a tad complex.

OnSelectionChanged Need More Of An OnStyleChange - JavaScript

I am building a simple WYSIWYG editor, many out there are way to complex to integrate, or does not give the user good feedback.
I can do what I want with the OnSelectionChanged event, but that seems to be too wide of a net, the event fires more often than I want/need. What I would like is an event that fires if say the font changed, or bold changed at the current cursor location.
for example, if I have a line of text "this has a BOLD in the lin^e" and the cursor is at the '^', then click or move the cursor towards the word Bold, I do not need the event to fire until it hits the word that is bolded, or other change (text color, size, style...).
Currently, in the event code, it calls the queryCommandState, and looks to see what parts of the toolbar buttons become highlighted, in this example the "B" gets highlighted, when it hits Bold, just like a normal text editor, like Word.
My concern with the round trip time, looking for a couple of things is not bad, but when I look at all the formatting, (bold, underline, size, color, style...) it starts to add up. I thought about putting an escape hatch in, but it still needs to go through and look at what is the current values and then compare it to the last state, so I do not gain anything.
Is there a better event option than the one i am using, such as some kind of stylechanged event, or an event that fire when it sees a tag change.
Thanks,
Dave
I think that you should revisit your premise that integrating a wysiwyg editor is way too complex and that building one is a reasonable alternative.
I've included one js file from a cdn and added this single line of javascript to transform a textarea into a rich text editor, with nice visual feedback regarding formatting options.
CKEDITOR.replace('editor1');
https://codepen.io/anon/pen/GyWGvY

How can I create a simple text area that contains draggable items inside the actual text?

Note: this question is related to this one where I try to do this in pure HTML/JavaScript.
What I need is a very simple text area that allows me to place draggable items to it. Draggable in the sense that they can be moved inside the textual content - character wise. Here is an example
<div contenteditable="true"/>
This is text whereas <div draggable="true">this is draggable</div> because of reasons.
</div>
Now clicking on <div draggable="true">this is draggable</div> and moving/dragging it a few characters to the right would result in:
<div contenteditable="true"/>
This is text whereas beca<div draggable="true">this is draggable</div>use of reasons.
</div>
I found that the RichTextArea would basically serve my needs but it does not seem to be possible to add such draggables to the text area simply as that. I could hack something together I guess that would do what I want but since this is part of a key feature in my application I want something sane and reliable. I need references to those draggable objects but RichTextArea allows me only to set it's content via HTML Strings. Actually I need callback methods in order to determine when such a draggable element is for example detached from the DOM tree.
The biggest problem is actually me since I am not very experienced with GWT and/or web-development itself actually.
So the question is basically which Widget would be a good place to start with?
An example can be seen here. Just write some text and drag the logo into the text area. You'll be able to move it's position inside the text. But like I mentioned, it is using the RichTextArea widget which does not seem to want me to add such elements programmatically to the text area.

Replace blinking text cursor with custom char

I'm creating something like MySQL cmd and to have complete design, I want to replace insertion point (that blinking line) with underline sing. Any tips?
If you were hoping this would be easy, the bad news is that there simply isn't a quick and simple way to do this -- the text cursor is not something you can just change with a couple of lines of javascript or CSS.
If you really want to do this, you're going to need to write your own entire text input system in javascript -- display the cursor yourself, wait for key presses, print them to the screen, handle anything like word-wrapping manually.... it's a fair bit of work.
Fortunately, others have already done this work and made it available to share, so I suggest your best starting point would be to take a look at some existing examples and see how they've done it.
Here's one I found with a quick bit of googling: http://terminal.jcubic.pl/. There are plenty of others you could try as well though.
Hope that helps.
This is what you need to do.
Make input text field invisible, so usable but invisible.
copy its content
render it to another div.
and and add a custom box or whatever...
Styling text input caret
Hide textfield blinking cursor
How about:
textarea{
cursor:url(underlineimage.png),auto;
}
Replace textarea with whatever element you want the cursor to be changed on. You will need to create a custom image of what you want your cursor to look like.

JavaScript color strings when they appear

I was wondering if there are any JavaScript functions that I could use to change the font color of certain strings in a text box.
Suppose I created a text box and every time the string hello appeared the font color would change to blue.
Are there any easy ways to make a database of strings so that this event would occur?
thanks!
This is a non-trivial task, as text within a textarea can not be directly formatted. I would look into using a div or some other applicable tag, and use the Content Editable attribute. This way the user can edit the text and you can control the formatting. At the simplest level you can listen for a key press and use regular expressions or the replace method to highlight all the words in your dictionary.
Here's a start, you'll need to flesh it out to perhaps be case-insensitive if that's what you want, and to keep track of the caret position which is a more complicated task:
http://jsfiddle.net/VJQHD/
You can look at a similar issue here: Get caret (cursor) position in contentEditable area containing HTML content

Categories