I am creating email templates which is basically have tokens(i.e {link}) and able to add new token and able to drop the token into canvas

[Shashanka398]

When we add new token in old dropdown not able to get updated token .Can any one please suggest any ideas for token implementation. (grapes version : 0.20.4)

    const self=this;
    return (editor) => {
      const newType = 'Tokens';
      editor.Components.addType(newType, {
        model: {
          defaults: {
            tagName: 'span',
            textable: true,
            placeholder:  ''
          },
          getInnerHTML() {
            return (this as any).get('placeholder');

          },
        },
        view: {
          events: {
            'change': 'updatePlaceholder',
          },
          updatePlaceholder(ev) {
            if(self.options.length){
              (this as any).model.set({ placeholder: ev.target.value });
              this.updateView();
            }
          },
          onAttrUpdate(a) {
              const viewStyle = 'padding: 0px 5px 1px; border-radius: 3px; border: 1px solid #b300fd';
              (this as any).el.setAttribute('style', viewStyle);
          },
          onRender() {
            if (self.options.length == 0) {
              self.createDrawer();
            }
            const { model, el } = this as any;
            const select = document.createElement('select');
            select.innerHTML = self.generateOptionsHtml(); // Initial rendering of options
            el.innerHTML = '';
            el.appendChild(select);
            select.setAttribute('style', 'padding: 0; border: none; appearance: none;');
            select.value = model.get('placeholder');
          },
          updateView() {
            const select = document.querySelector('select');
            select.innerHTML = self.generateOptionsHtml(); // Update options HTML
            select.value = editor.model.get('placeholder');
          }
        }
      });

      editor.Blocks.add(newType, {
        label: 'Tokens',
        content: { type: newType },
        select: true,
      });

    };
  }```
 adding plugin  for grapes .when I add new token its not reflecting in older dropdowns 
added a panel for droping tokens when I add new token previous token will not be updated

[Shashanka398]

@funkjedi @ackvf @artf Please help !!!!

[ackvf]

I wonder why am I being summoned?

[Shashanka398]

I wonder why am I being summoned?

Just I needed suggestion

[ackvf]

Sure, that much is somewhat evident. What I fail to understand is why me and why here.

---

Anyway, since I am here, I might as well give advice to you to improve your question a bit since I can see that you struggle with formatting your code block.

First suggestion is to always use the "Preview" function before posting, to make sure nothing breaks

And then here are my general observations how formatting code on github works. I learned this by trial and error, but I bet there is an official guide somewhere.

You can either use three backticks at the start and end of the block ```, like this

```
function hello() {
  // ...
}
```

result:

function hello() {
  // ...
}

or four spaces at the start of each line. The easiest way is to select the code in IDE and press a tab, which will increase the indentation for the whole selected code

    function world() {
      // ...
    }

result:

function world() {
  // ...
}

Or you can even use <code>single line</code> if the code needs to contain backticks ` ,
or <pre> which stands for preformatted text. Especially useful if you struggle to format your code with backticks.

<pre>
function hello() {
  // ...
}
</pre>

Anyway, especially weird situation happens when you mix everything together, like I did here

needs to contain <code>backticks ` </code> , or `<pre>`  which ...

Which gets confusingly translated as nested code, which I didn't even know was supported 🤯
result:

needs to contain backticks </code> , or

  which ... 

To fight against this confusion, it is possible to add additional backticks `hi` -> ``hi``, which will allow the engine to differentiate between different groups

`hi` -> ``hi``

And by combining four spaces, code blocks and backticks, what you see above can be achieved.

<code>\`hi\`</code> -> <code>\`\`hi\`\`</code>

This is what I actually see

Hope this helps getting the answer you seek by better formulating your question, cheers! 🥂