From aa3d55f05c7f0a3b3e497aedd3a960cee7962b45 Mon Sep 17 00:00:00 2001
From: Tomoyuki Hata <hato6502@gmail.com>
Date: Fri, 29 Jan 2021 00:54:57 +0900
Subject: [PATCH] fix: Close edit modal when backdrop clicked

---
 src/EditorJSInlineElement/createDialog.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/EditorJSInlineElement/createDialog.ts b/src/EditorJSInlineElement/createDialog.ts
index ccf5193..ed0ac4c 100644
--- a/src/EditorJSInlineElement/createDialog.ts
+++ b/src/EditorJSInlineElement/createDialog.ts
@@ -14,6 +14,8 @@ const createDialog = ({
   const dialog = document.createElement('dialog');
 
   dialog.style.maxWidth = '960px';
+  // Make be not able to click inner
+  dialog.style.padding = '0';
   dialog.style.top = '32px';
   dialog.style.width = 'calc(100% - 64px)';
 
@@ -32,11 +34,22 @@ const createDialog = ({
     data: editorJSData,
   });
 
+  const handleDialogClick = (event: MouseEvent) => {
+    if (!(event.target instanceof Node) || !event.target.isEqualNode(dialog)) {
+      return;
+    }
+
+    dialog.close();
+  };
+
+  dialog.addEventListener('click', handleDialogClick);
+
   const handleDialogClose = async () => {
     const editorJSData = await editorJS.save();
 
     editorJS.destroy();
 
+    dialog.removeEventListener('click', handleDialogClick);
     dialog.removeEventListener('close', handleDialogClose);
     dialog.remove();