Editable Text in p5.js graph

Question

I want to code up an interactive graph in p5.js. So far I've been able to get it to add vertices on left-click, and edges when a pair of vertices has been left-clicked. However, when I create a vertex or edge, I also want a number signifying the weight to show up next to the vertex/edge, like '1'. Then, when I click on this number, I want to be able to dynamically edit the string.

So far, the best I've found for this is createInput(), but this creates a large white text input box, which is not subtle enough. I only want a blinking text cursor to appear when I click on the string. How could I do this?

These are Vertex and Edge objects I have so far (though they may not be relevant)

function Vertex(mouseX, mouseY, index) {
  this.x = mouseX;
  this.y = mouseY;
  this.index = index;
  this.weight = 0;
  this.radius = 16;
  this.col = [0,0,0];
  this.display = function() {
    noStroke();
    fill(this.col[0], this.col[1], this.col[2]);
    ellipse(this.x, this.y, this.radius, this.radius);
  }
}

function Edge(v1, v2) {
  this.v1 = v1;
  this.v2 = v2;
  this.weight = 0;
  this.col = [0,0,0];
  this.display = function() {
    stroke(0);
    fill(this.col[0], this.col[1], this.col[2]);
    line(v1.x, v1.y, v2.x, v2.y);
  }
}

Answer 1

Check this - https://p5js.org/reference/#/p5.Element u can use P5 Element and handle MouseClicked() event and put logic there . P5 Element has all the features u asked in question.