Want to create a dynamic in-line element per parameter in a function

[kim12345678a]

hello everyone,

I am creating a custom IDE (for Typescript) where I want to meet the following requirement:

When some functions (with placeholder for each parameter) are summoned via snippets, per parameter, there should be a button.

• If the parameter is a number, when user presses the button, a dropdown with a slider should appear to control the numeric value of that parameter,
• If the parameter is an enum, when the user presses the button, dropdown with all the possible enum values will appear. If you press one of the enum values in dropdown, it will be used in the parameter.

The buttons will be gone when the user deletes the placeholder or the parameter.
The button should behave as the color css:

Here is an example to illustrate the requirement:

Suppose there's a function called Example. There are two parameters: num and browserType. browserType is an enum and it has 3 values: Edge, Chrome, Firefox.

When user summons Example via snippet, editor will display Example( <button>num, <button>browsertype ). When you press the button for num, a dropdown will appear below with a slider. It will replace 'num' with 0. Adjusting the slider will change the parameter value. When you press the button for browserType, a dropdown will appear below with a list of Edge, Chrome, and Firefox. Clicking the value will replace what was in the parameter with the newly selected value.

I have done some research and I just want to validate if my high-level approach is correct and get some feedback on this approach. OR if there's a better way of doing this:
my super-light prototype in the monaco-editor playground

Ultimately I do want to programmatically add snippets, so I will need to access the snippet controller.

var snippetController = myEditor.getContribution("snippetController2");
snippetController.insert("Example(<b>${1:num}, <b>${2:browserType})");

the <b> is there to indicate that I want replace with the button.

To create the button that will show the dropdown, I will need to make a component that implements icontentwidget . The component will have a reference to the editor so that

• it knows where to put itself in the editor
• listens to the text changes in editor (most likely using onDidChangeModelContent). By listening to text changes, I write some conditions to check whether to remove itself or not
• it knows when to insert new parameter value based on what user selected in the dropdown
  - if a drop down is a slider , any changes in the slider will update the parameter
  - if a drop down is a list, whichever value is selected will update the parameter

I could either create the dropdown in the DomNode of the IcontentWidget OR I can make an IOverlayWidget for that dropdown

Thank you in advance for your feedback and thoughts