vue-email-editor icon indicating copy to clipboard operation
vue-email-editor copied to clipboard

Get the currently selected custom block?

Open jaymo107 opened this issue 1 year ago • 0 comments

I have a custom tool which places a custom element into the editor, when dropping it in we open a modal to customise the appearance. One thing I'd need it to be able to have a reference of the element in the custom property editor. I need to detect what the parent column size is where the element was placed, so we can dynamically update the image sizes in the block. We have something like this at the moment

Code shortened for brevity

unlayer.registerTool({
  name: 'tool',
  label: 'Tool',
  supportedDisplayModes: ['web', 'email'],
  options: {
    property: {
      title: 'Custom tool',
      position: 1,
    },
...
});

unlayer.registerPropertyEditor({
  name: 'custom_selector',
  layout: 'bottom',
  mount(node, value, updateValue, data) {
    if (!value || !value.property) {
      node.querySelector('#button').onclick = function () {
        // Can I get the reference to the element with context of the row/column
        // To figure out the column size of where the element was dropped?
        renderCustomModal(value);
      };
    }

The columns are exposed in the render method inside unlayer.createViewer() so I can grab where it was placed there, but I need to sort of be able to get it when I open the modal. Is there an event I can hook into when a new element gets selected or something? Or get the reference of the selected element in that button callback?

Thanks in advance!

jaymo107 avatar Nov 07 '24 11:11 jaymo107