Hi,
I try to create a simple expression editor in Perspective and I use Text Area Component so users type their expression. As I also support Wizard for adding functions, I need to know where is the location of the user cursor in the Text Area Component so I can concatenate my function in that location.
Is there any way to find the cursor position by Javascript and Markdown component? Or any other idea?
Thanks
you'll need to put a domId on your textfield
#make the propName the key to write too in the view.custom
propName = "selectedIndex"
code = """<img style='display:none' src='/favicon.ico' onload=\"
const view = [...window.__client.page.views._data.values()].find(view => view.value.mountPath == this.parentNode.parentNode.parentNode.getAttributeNode('data-component-path').value.split('.')[0]).value;
const table = document.getElementById('"""+value+"""');
function getSelected(){
const selectedIndex = document.getElementById('"""+value+"""').selectionStart;
view.custom.write('"""+propName+"""',selectedIndex);
};
table.onclick = getSelected;
table.onkeyup = getSelected;
\"></img>""".replace("\n", "").replace("\t", "")
return code
[ { "type": "ia.display.markdown", "version": 0, "props": { "style": { "flex": "--neutral-40" }, "markdown": { "escapeHtml": false } }, "meta": { "name": "Markdown" }, "position": { "x": 166, "y": 290, "height": 200, "width": 200 }, "custom": {}, "propConfig": { "props.source": { "binding": { "type": "expr", "config": { "expression": "{../TextArea.meta.domId}" }, "transforms": [ { "code": "\t#make the propName the key to write too in the view.custom \n\tpropName = \"selectedIndex\"\n\tcode = \"\"\"<img style='display:none' src='/favicon.ico' onload=\\\"\n\t\tconst view = [...window.__client.page.views._data.values()].find(view => view.value.mountPath == this.parentNode.parentNode.parentNode.getAttributeNode('data-component-path').value.split('.')[0]).value; \n\t\tconst table = document.getElementById('\"\"\"+value+\"\"\"');\n\t\tfunction getSelected(){\n\t\t\t\t\t\t\tconst selectedIndex = document.getElementById('\"\"\"+value+\"\"\"').selectionStart;\n\t\t\t\t\t\t\tview.custom.write('\"\"\"+propName+\"\"\"',selectedIndex);\n\t\t\t\t\t\t};\t\t\t\n\t\ttable.onclick = getSelected;\n\t\ttable.onkeyup = getSelected;\t\t\t\t\n\t\\\"></img>\"\"\".replace(\"\\n\", \"\").replace(\"\\t\", \"\")\n\treturn code\n\t", "type": "script" } ] } } } } ]
lol marked as solved in one second, you trust me a lot, didnt even have time to test it yet 
Yes you are the god of the CSS3 and JS in Perspective.
The code has no error but doesn't return position:
May be i did something wrong, could you please take a quick look at it.
this must be false
also id advice to put the propName "position" at the top instead of somewhere in the middle of the code, thats why i made it a varriable
This works perfectly for me in the designer, but the selectedIndex never changes when run in a browser session. (tested in both Chrome and Edge)
nevermind, it does not seem to work in the designer anymore either. I must have messed something up..
not sure iit ever works in the designer, many of the js injections don't because the designer isnt a standard webbrowser.
but the commponent i posted should work
This is awesome
