select and get the values of text elements

[gangataarun]

Hi,

I have a couple of questions.
Is it possible to restrict text elements to only numeric inputs?
Is it possible to select a text element and store the value of the text input in a variable? If so how do I select and access the node id and text value?
Is it possible to create tables?

[ankri]

Is it possible to restrict text elements to only numeric inputs?

That's not directly craft.js related but yes. For example:

const getNumericTextValue = (value: string) => {
    const cleanValue = value.replace(/[\D]/gi, '');
    return cleanValue;
}

onChange=((event) => {
  const numericTextValue = getNumericTextValue(event.target.value);
  // do sth. with value
}}

On input set inputMode to numeric.

Is it possible to select a text element and store the value of the text input in a variable? If so how do I select and access the node id and text value?

Can you please elaborate on what you are trying to achieve? Do you have a draggable text input and want to access the input inside the draggable text input? What do you want to do with the value? Where should the value be available?

Is it possible to create tables?

Yes, it is possible. What is your specific use case?

The craft way is possible. You can have a Table component that accepts Column Components. Use the column information to create a tanstack/table and fill it with data during runtime.

Another solution is to use a table with the possibility of adding and removing of columns without craft. You would lose the ability to undo/redo, though.

[gangataarun]

I want to build a custom calculator. So once the users have created the text elements, I want the users to select the text elements, so I could write a code to build a custom calculator. something like a calculated excel cell. For this, I need the selected text element id and value.
Let me know if you would like me to provide more information

[ankri]

const { selectedNodeId, value } =  useEditor((state) => {
    const selectedNodes = state.events.selected;
      const selectedNodeId = Array.from(selectedNodes)[0];
      const value = state.nodes[selectedNodeId].dom.value;
    return {
       selectedNodeId,
       value
    }
}