How to insert a text node with user input as text

[san]

How to get text input from the user in our plugin on a text field and put them over the artboard ?
I used inner html text field to get the input.
If my text box id is #txt_bx and the Function that I use for Text is

function createText(text, { color = "white" } = {}) {

          const { selection} = require("scenegraph");

          const { Text, Color } = require("scenegraph");

        

          const newText = new Text();

          newText.text = text;

          newText.fill = new Color(color);

                  

          selection.insertionParent.addChild(newText);

          newText.placeInParentCoordinates({x: 0, y: 0}, selection.insertionParent.localCenterPoint);

        

          return newText;

        }

[pklaschka]

Hi @san,

The code you show here works as expected. As long as text is definded and non-empty, a white point text node gets created.

Either, just overlooked the text node (it is white on a presumably white artboard, after all), or some other part of your code (not shown here) is where it breaks.

All in all, that’s all the help I can give you without further inormation. How (or where) do you call createText()?

Best,
Pablo

PS: If I could ask for a favor: Please, in the future, use titles that say what your question is about. I assume you want help, so Help me out with this! is redundant (or at least belongs into your text). Here, a suitable title might have been “How to insert text” or something like this. This allows others (and you and me, when we want to reference the topic) to search for it, reduce effort for moderating the forums etc. Also, I’m much more willing to help when I can quickly see what the topic is (generally) about without having to read all the text at first. Then, I can quickly decide if I’m able to help. Thank you very much in advance

[pklaschka]

I believe the problem is

@san

I used inner html text field to get the input.

Assuming your using a <input /> element, its value is accessible via .value, not .innerHTML. Try using something like this and see if it works for you:

const text = document.querySelector('#txt_bx').value;

createText(text);

[san]

Sure, will do that. Sorry for the weird titles

[san]

Thanks for that @pklaschka. I’ll try this if it works.

[san]

Hi @pklaschka !
I did this thing:
My function is

         function createText(text, { color = "white" } = {}) {
          const { selection} = require("scenegraph");
          const { Text, Color } = require("scenegraph");
          const text = document.querySelector('#txt_bx').value;
          const newText = new Text(text);
          newText.fill = new Color(color);
        
          selection.insertionParent.addChild(newText);
          newText.placeInParentCoordinates({x: 0, y: 0}, selection.insertionParent.localCenterPoint);
        
          return newText;
        }

And I called them by using :

document.querySelector("#txt-b").addEventListener("click", createText);  

#txt-b is the id of Insert button in my plugin!

What am I missing? Or what is the error ?

Full code is here :

let dialog;
const commands = require("commands");
function quickStuff() {
  const html = `<style>
        #title{
          margin-bottom: 20px;
          font-weight: strong;
        }
        </style>
        <form method="dialog" id="main">
        <header class="row" id="title">
            <span font-size="30px">Quick Stuff</span>
        </header>
        </br>
        <section>
        <div class="row break">
            <label class="row" id="bg">
            <span>Choose Background</span>
            <button id="bg-b" type="button" uxp-variant="cta">Choose</button>
            </label>
        </br>
        </section>
        <section>
        <div class="row break">
            <label class="row" id="fg">
            <span>Choose Foreground</span>
            <button id="fg-b" type="button" uxp-variant="cta">Choose</button>
            </label>
        </br>
        </section>
        <section>
        <div class="row break">
            <label class="row" id="txt">
            <span>Foreground Text</span>
            <input type="text" uxp-quiet="true" id="txt_bx" value="" placeholder=""/>
            <button id="txt-b" type="button" uxp-variant="cta">Insert</button>
            </label>
        </br>
        </section>    
        </div>
        </div>
        <footer>
        <button id="ok" type="submit" uxp-variant="primary">Create</button>
        <button id="cancel" type="submit" uxp-variant="secondary" background-color:"#E54C4C" >Cancel</button>
        </footer>
        </form>
        `

      async function bgImage () {
          
         // User picks an image file
          const storage = require("uxp").storage;
          const fs = storage.localFileSystem;
          let imageFile = await fs.getFileForOpening({ types: storage.fileTypes.images });
        
        // Create ImageFill for this image
          const ImageFill = require("scenegraph").ImageFill;
          let fill = new ImageFill(imageFile);
        
          const {Rectangle} = require("scenegraph");
          const rect = new Rectangle();
          rect.width = 1920;
          rect.height = 1080;
        
          
        // Set fill of first selected item
          rect.fill = fill;
          const { selection} = require("scenegraph");
          selection.insertionParent.addChild(rect);
          selection.items = [rect];
        }
        
        async function fgImage () {
          
          // User picks an image file
           const storage = require("uxp").storage;
           const fs = storage.localFileSystem;
           let imageFile = await fs.getFileForOpening({ types: storage.fileTypes.images });
         
         // Create ImageFill for this image
           const ImageFill = require("scenegraph").ImageFill;
           let fill = new ImageFill(imageFile);
         
           const {Rectangle} = require("scenegraph");
           const rect = new Rectangle();
           rect.width = 1920;
           rect.height = 1080;
         
           
         // Set fill of first selected item
           rect.fill = fill;
           const { selection} = require("scenegraph");
           selection.insertionParent.addChild(rect);
           selection.items = [rect];
         }

         function createText(text, { color = "white" } = {}) {
          const { selection} = require("scenegraph");
          const { Text, Color } = require("scenegraph");
          const text = document.querySelector('#txt_bx').value;
          const newText = new Text(text);
          newText.fill = new Color(color);
        
          selection.insertionParent.addChild(newText);
          newText.placeInParentCoordinates({x: 0, y: 0}, selection.insertionParent.localCenterPoint);
        
          return newText;
        }
        
        function parallaxFinal(){
        
        }
        if (!dialog) {
          dialog = document.createElement("dialog");
          dialog.innerHTML = html;
          document.appendChild(dialog);
          document.querySelector("#bg-b").addEventListener("click", bgImage);
          document.querySelector("#fg-b").addEventListener("click", fgImage);
          document.querySelector('#txt-b').addEventListener('click', evt => createText(evt.target.value));
          document.querySelector("#ok").addEventListener("click", parallaxFinal);

      }
      return dialog.showModal()
  }

module.exports = {
  commands: {
    quickStuff
  }
}; 

[pklaschka]

document.querySelector("#txt-b").addEventListener("click", createText);  

Calls your function createText with the wrong arguments. It will call it and pass the click event as the first parameter, meaning text will not be a string, but an event. This will allow you to access the input element, e.g., using evt.target and its value with evt.target.value. The easiest option, here, would probably be to replace the above code with

document.querySelector('#txt-b')
  .addEventListener('click', evt => createText(evt.target.value));

[san]

I did replace! But its not working
I think the problem is with my function. Can you please revise them for errors?

[pklaschka]

Sorry, my bad. I somehow though about an event on a button (which doesn’t have a value). evt.target here is your button element, meaning instead of evt.target.value, you’ll have to determine the value of your <input /> here, using something like document.querySelector('txt-bx').value.

The function is fine. I ran it and, as stated above, it does what it’s supposed to do (or at least the code works as expected, if creating white text is your goal )

Sorry about that

[san]

I figured out the solution for my code !

function createText() {
          const { selection} = require("scenegraph");
          const { Text , Color } = require("scenegraph");
          const newText = new Text();
          newText.text=document.querySelector("#txt_bx").value;
          selection.insertionParent.addChild(newText);
          newText.moveInParentCoordinates(0,0);
        
          //return newText;
        }

and then callling the function without any arguments
createText() … worked well !