From 3c6a9e98e92c4b98937cd629bfa84eeceb5800a3 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Tue, 14 Sep 2021 12:34:30 +0200
Subject: [PATCH] Improve modal callback data

---
 docs/modules/Modal.md     | 10 +++++-----
 src/modal_dialog/index.js | 11 +++++++++--
 src/utils/dom.js          |  2 ++
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/docs/modules/Modal.md b/docs/modules/Modal.md
index 676315bb4..b990030e6 100644
--- a/docs/modules/Modal.md
+++ b/docs/modules/Modal.md
@@ -107,11 +107,11 @@ const editor = grapesjs.init({
 
 editor.on('modal', props => {
     // The `props` will contain all the information you need in order to update your custom modal.
-    // props.open - Indicates if the modal should be open
-    // props.title - Modal title
-    // props.content - Modal content
-    // props.attributes - Modal custom attributes (eg. class)
-    // props.close - A callback to use when you want to close the modal programmatically
+    // props.open (boolean) - Indicates if the modal should be open
+    // props.title (Node) - Modal title
+    // props.content (Node) - Modal content
+    // props.attributes (Object) - Modal custom attributes (eg. class)
+    // props.close (Function) - A callback to use when you want to close the modal programmatically
 
     // Here you would put the logic to control your modal.
 })
diff --git a/src/modal_dialog/index.js b/src/modal_dialog/index.js
index c1649c1b3..40865a15a 100644
--- a/src/modal_dialog/index.js
+++ b/src/modal_dialog/index.js
@@ -33,7 +33,8 @@
  * @module Modal
  */
 
-import { debounce } from 'underscore';
+import { debounce, isString } from 'underscore';
+import { createText } from '../utils/dom';
 import defaults from './config/config';
 import ModalM from './model/Modal';
 import ModalView from './view/ModalView';
@@ -87,8 +88,14 @@ export default () => {
     },
 
     _evData() {
+      const titl = this.getTitle();
+      const cnt = this.getContent();
+      const { open, attributes } = model.attributes;
       return {
-        ...model.attributes,
+        open,
+        attributes,
+        title: isString(titl) ? createText(titl) : titl,
+        content: isString(cnt) ? createText(cnt) : cnt.get ? cnt.get(0) : cnt,
         close: () => this.close()
       };
     },
diff --git a/src/utils/dom.js b/src/utils/dom.js
index b8cc250d6..01d718649 100644
--- a/src/utils/dom.js
+++ b/src/utils/dom.js
@@ -68,6 +68,8 @@ export const createEl = (tag, attrs = '', child) => {
   return el;
 };
 
+export const createText = str => document.createTextNode(str);
+
 // Unfortunately just creating `KeyboardEvent(e.type, e)` is not enough,
 // the keyCode/which will be always `0`. Even if it's an old/deprecated
 // property keymaster (and many others) still use it... using `defineProperty`