Bug in MessageDialog dismissal and note-save command

Issues
1

Hi @craftzdog, I encountered two small bugs when working on a plugin. I will describe both in this post.

Info

  • Platform: Ubuntu
  • Platform version: 18.04
  • App Version: 4.4.1

1. MessageDialog overlay bug

For a plugin I only want to allow the user to dismiss a dialog when explicitly clicking a button and not when clicking on the (darkened) dialog background.

I do this by setting the “onDismiss” function call in the MessageDialog component to return false by default:

<MessageDialog {...} onDismiss={(caller, buttonIndex) => {
  if (buttonIndex == 0) {
    doStuff();
    return true;
  }
  return false;
}} />

This works fine but when I click on the darkened background overlay, it disappears (buttonIndex is -1 in this case). The dialog however is still shown (as it should):

nok
nok.png1853×1053 149 KB

The expected behavior would be: When clicking on the background the overlay and the dialog stay where they are.

ok
ok.png1853×1053 63.4 KB

2. editingNote save bug

Not sure if this is a bug or if I am doing it wrong but after modifying the editor content via the redux dispatch the note is not saved even when the core:save-note command is executed.

inkdrop.store.dispatch(actions.editingNote.update({ body: newBody }))

setTimeout(
  () => inkdrop.commands.dispatch(document.body, 'core:save-note'),
  500
)

The core:save-note command is executed with a 500ms delay. This is because the store dispatch is an async call and one has to make sure the save command is executed after the store has been updated.

For the actual code, checkout open-in-editor-message-dialog.js

Let me know if you have any questions.

Cheers,

Andreas

2

Hi andi,

As always, thank you for your contribution.

1. MessageDialog overlay bug

The app uses Semantic UI’s Modal component and you have to specify closable: false to your dialog in order to prevent from being dismissed by clicking its dimmer.
But it is not possible at the moment.
I will make it accept modal options in the next release.

2. editingNote save bug

That was due to lack of the documentation.
You always have to invoke editor.change action to tell the editor that the note has been changed:

inkdrop.store.dispatch(actions.editor.change(true))

I added a page about editor actions here.

Hope that helps!

1 Like
3

In v4.5.0, MessageDialog now supports modalSettings prop.
You can specify it like so:

<MessageDialog
  ...
  modalSettings={{ closable: true }}
>
  <p>
    ...
  </p>
</MessageDialog>

Updated the doc:

4

Cool, thx :+1: