PG Software Development

by **Clifton** » Sat Jun 22, 2024 9:46 am

You should be able to select words with the mouse. It is also possible to programmatically select a portion of the <div> contents and/or a more basic textarea field.
My current function caretPosition() only locates the cursor based on various rules, etc. I am working on a new parameter which allows content injection at the cursor location and preliminary tests are woring good. I am using a very complex formatted <div> for my experiments so I can confirm the function of the code.

by **Clifton** » Sat Jun 22, 2024 9:49 am

BTW: Content injection is available using caretPosition() from v15.530.5 onward. You can try it out if you so choose. I'm sure the code may change a bit, but the basics are all there.

by **Clifton** » Sat Jun 22, 2024 10:04 pm

I uploaded PowerPac v15.531.0 and it basically completes the caretPosition() function with the ability to set position AND insert text/HTML at the same time. In the future, I will look into automatic text selection as it is pretty easy to incorporate in with the work that was done thus far.

This version also does a more predictable job of handling carriage returns in HTML and text that is set in XML files. HTML content is handled so that extraneous spaces and carriage returns are removed. If you want a carriage return in the installed HTML, then use <br> tags. When working with text blocks, something similar was done. If you need a hard carriage return, the use \cr in your text and it will be converted to a hard return when installed.

<text>
    <![CDATA[
        This is some text that want installed in a field on the page.\cr
        However, this line should be preceded by a carriage return.
    ]]>
</text>

<html>
    <![CDATA[
        This is some HTML that I want install in a field on the page. It has to contain <span class="spTag">special tags</span><br>
        This line is preceded by a HTML newline character. 
        It will be properly installed by the PowerPac XML Engine. This line will flow naturally from the previous one since it was not 
        preceded by the &lt;br&gt; tag or other HTML formatting.
    ]]>
</html>

Note that when using pgTBObjSet(), the hard carriage return is handled in the same way as in the XML Engine. Just use a \cr when you need a carriage return in the text. Of course, pgTBObjSet() is generally only used when manipulating small snippets of text, whereas the XML Engine can handle any amount of text efficiently.

Clifton

by **John Robin Dove** » Sun Jun 23, 2024 4:37 am

1) You wrote above I uploaded PowerPac v15.531.0 I am currently using 15.530.5. Should I be using 15.530.0?

2) Please confirm that there is no way a link (span) can be inserted into the text (value) property of a textarea; i.e. changing <textarea rows="2" id="txtarea" style="width:300px">Textareas are OK!</textarea> to
<textarea rows="2" id="txtarea" style="width:300px">Textareas are<span class="blueWords"> absolutely </span>OK!</textarea> does not work and never will. What I mean is: it would be better if I only used one object but that's not possible so I must use two: a textarea and a div. Only the div can contain colored words.

I am working on a new way to create permanent colored words that can be added and removed. I am confident it will work but it doesn't involve using any of the new features you have added.

by **Clifton** » Sun Jun 23, 2024 8:03 am

<textarea>'s are like <input>'s in that you can format the entire object ... even colorize the text, etc. However, individual words and elements cannot be colored or formatted. Nevertheless, <div>'s are more flexible but they can be a challenge to code when set to editable while preserving the flow of editability. If you use nested tags inside an editable <div> (e.g., <span id="one">some text<span id="two">some other text</span></span>) then editing them on the user end with keyboard input is unpredictable. However, in your system it looks like you are using a single level tag approach, which is good for editability.

I would be curious how you are selecting your word that must be colored dynamically. Do you use regular expressions on the innerHTML?

The new features I've added to caretPosition() can be expanded to include selecting words. In fact, it is mostly present already except that the function deselects everything to reveal the caret location, which is most often the way this function is used. Eventually, I can take a look at expanding the function to allow text selection.

However, from what I saw of your system, it looks pretty good.

by **John Robin Dove** » Sun Jun 23, 2024 9:44 am

Thanks for your reply. Here is what I do:

Code: Select all: <function name="getTheWord" event="" params=""> <![CDATA[ const txt = tbfunction_pgTBObjGet("myText", "text"); let txtEnd = txt.length; let pos = tbfunction_caretPosition("myText", -1); let ws = /\s/.test(txt[pos]); if (ws) { pos -= 1; } pos -= 1; let start; let end; ws = /\s/.test(txt[pos]); while (ws == false && pos > -1) { pos -= 1; ws = /\s/.test(txt[pos]); } pos += 1; start = pos; pos += 1; ws = /\s/.test(txt[pos]); while (ws == false && pos < txtEnd) { pos += 1; ws = /\s/.test(txt[pos]); } pos -= 1; end = pos; let str = txt[start]; pos = start; while (pos < end + 1 && pos < txtEnd - 1) { pos += 1 str = str + txt[pos] } this.obj.setSelectionRange(start, end + 1); return [start, str]; ]]> </function>

I can also select a sentence when required:

Code: Select all: <function name="getTheSentence" event="" params=""> <![CDATA[ const txt = tbfunction_pgTBObjGet("myText", "text"); let txtEnd = txt.length; let pos = tbfunction_caretPosition("myText", -1); let start; let ic = 0; if (pos == 0) { start = 0; } else { while (txt[pos] != "." && txt[pos] != "!" && txt[pos] != "?") { pos -= 1; } pos += 1; ws = /\s/.test(txt[pos]); while (ws == true && pos < txtEnd - 1) { pos += 1; ws = /\s/.test(txt[pos]); } } start = pos; let str = txt[start]; while (txt[pos] != "." && txt[pos] != "!" && txt[pos] != "?" && txt[pos] != "·") { pos += 1; str = str + txt[pos] } if (txt[pos + 1] == '"' || txt.charCodeAt(pos + 1) == 39 || txt[pos + 1] == '”' || txt[pos + 1] == '»') // " ' ” » { str = str + txt[pos + 1]; ic = 1 } if (txt[pos + 2] == "»") { str = str + " »"; str = str.trimEnd(); //French punctuation puts a space (usually unbreakable) before the guillemet (») ic = 2; } if (ic == 0) { this.obj.setSelectionRange(start, pos + 1); } else if (ic == 1) { this.obj.setSelectionRange(start, pos + 2); } else { this.obj.setSelectionRange(start, pos + 3); } //console.log(str); ]]> </function>

by **Clifton** » Sun Jun 23, 2024 4:35 pm

Thank you for sharing this code!

by **John Robin Dove** » Mon Jun 24, 2024 3:15 am

You're welcome!

by **John Robin Dove** » Sun Jun 30, 2024 9:50 am

Hi Clifton,
I'm back after a short break. The new caretLocation function would seem to be exactly what I need but so far I have not been unable to use it. I have no problems making the field contentEditable but I notice that I can't set the caret position with the mouse. I have to use the arrow buttons. The function sets the cursor position as planned but does not add any text to the field or to the innerHTML. I have tried this: tbfunction_caretPosition("myText2", 161, "", "HERE"); and this: tbfunction_caretPosition("myText2", 161, "", "<span>HERE</span>"); but nothing happens. I am using a TB field (Inset Word wrap, enabled text locked). I would like to do something like this: let values = this.getTheWord();
let start = values[0];
let myWord = values[1];
console.log("start is " + start + " myWord is " + myWord); //No problems here.
start = start * 1;
const start2 = ('0000' + start).slice(-5);
const myID = "w" + start2;
const newWord = '<span id=' + String.fromCharCode(34) + myID + String.fromCharCode(34) + ' onclick= "top.relay(' + String.fromCharCode(39) + myID + String.fromCharCode(39) + ')" class="blueWords"> ' + myWord + '</span>';
tbfunction_caretPosition("myText2", start, "", newWord); but I can't. I also tried creating the div with <make> but things went from bad to worse. It's opacity level was set to 0. I corrected that but failed to manipulate it in any other way at all.
John

by **Clifton** » Sun Jun 30, 2024 6:16 pm

Thank you for your post.

First of all it seems I have bug in my code as it relates to using <div> or <span> elements with contentEditable="true". The code was returning BEFORE adding the desired content in certain instances. I was able to reproduce this and I have fixed it in the uploaded v15.531.3 version of the PowerPac.

However, there is something wrong on your end as well. Using a corrected PowerPac version and creating a ToolBook field (exported as <span>) with my XML code using the following:

<myTBField>
    <userProperty>
        { prop : "contentEditable",
          value : true,
          getSet : "set" }
    </userProperty>
</myTBField>

I can set the cursor position with the mouse and with caretPosition().

If you CANNOT SET the caret location using the mouse, it is probably an issue with <span> elements exported via ToolBook v9.0.
I've attached a workaround for this situation as well an experimental tbk you can play around with.

PG Software Development

Projects new and old

Re: Projects new and old

Re: Projects new and old

Re: Projects new and old

Re: Projects new and old

Re: Projects new and old

Re: Projects new and old

Re: Projects new and old

Re: Projects new and old

Re: Projects new and old

Re: Projects new and old

Who is online