megahertz / react-simple-wysiwyg

Simple and lightweight React WYSIWYG editor
https://megahertz.github.io/react-simple-wysiwyg/
MIT License
119 stars 21 forks source link

createDropdown should probably pass the selected item or index to a command function #22

Closed duhmojo closed 1 year ago

duhmojo commented 1 year ago

I'm trying to add a custom dropdown for data type (or whatever) and the Dropdown onChange passes the editorState, which doesn't is really just a reference to the editor content div.

const TypeDropdown = createDropdown('Type', [
    ['Text', (s) => { 
        console.log(s)
    }],
    ['Textarea', (s) => { 
        console.log(s)
    }]
])

Unless you're doing something with the editorState I suggest passing the selected element or selected index. Without it not only can't I update state on what was selected, I can't set the select value either when it's changed. (changing the custom dropdown doesn't change the selected item in the toolbar)

    function onChange(e: ChangeEvent<HTMLSelectElement>) {
      const selected = parseInt(e.target.value, 10);
      const [, command, commandArgument] = items[selected];

      e.preventDefault();
      e.target.selectedIndex = 0;

      if (typeof command === 'function') {
        command(editorState);
      } else {
        document.execCommand(command, false, commandArgument);
      }
    }

Thanks!

duhmojo commented 1 year ago

Ugh... could I be any denser... Obviously each item in the custom dropdown list is calling a different function... that's for that unique item. I'm a little slow. Thanks again.