Problem with Select element

[weixiongmei]

Hi,

How to execute command after an is selected from the element? I would like to add the font family & font color & font size to the editor, thank you~~~

[jaredreich]

Hi, sorry I'm not fully able to understand what you're saying. Please try re-wording so it's easier to understand.

[weixiongmei]

Hi, Sorry about my first comment, seems like some of the words with special symbols got filtered... Do you know the Select & Option element in the HTML or the ComboBox in the other UI systems? I would like to add ComboBox for the Fonts/Font Sizes/Font colors selection, I have no problem with adding these features with a single button, but it will be too messy in this way, that's why i think ComboBox would be a better choice for it. Can you please to give an example how to do it? Thank you!!!

[chriseickemeyerGH]

I'm curious about this as well. Is there a way to use the exec command outside of the result() function and still connect it to the actions inside the init() function? For example, triggering a modal on a button click and then on submission, setting the font size or something like that?

[j3j5]

Did you guys ever manage to get this working? I'm also looking to add a custom action where a user can select from a list and it'll get some custom HTML inserted, but I'm not sure what'd be the best way to hook that up.

[nabrahamson]

I've had some moderate success with this by doing the following:

• I created a font size react hook which returns a simple select object with the options 1-7 available for the font size, and called it FontSize for this example
• In the component where I render Pell, create a state variable fontSize: const [fontSize, setFontSize] = useState(1)
• In the component where I render the Pell component, I created an action bar item doing the following:

{
  name: 'fontpicker',
  icon: ReactDOMServer.renderToString(<FontSize />),
}

• In my component, I created a fontSelector variable, and in a useEffect hook, I run the following code:

const updateFontSize = () => {
  exec('fontSize', fontSelector.value)
}

if (!fontSelector) {
  fontSelector = document.getElementById('fontSize')
  fontSelector. addEventListener('change', updateFontSize)
}

This works. I've also used this pattern to add canned text to the editor as well as implementing a color picker. Edit:

So I've figured out my own issue, and I hope that this helps someone. The working code is above