fix: Close edit modal when backdrop clicked

hata6502 · Jan 28, 2021 · aa3d55f · aa3d55f
1 parent 1a46f9b
commit aa3d55f
Showing 1 changed file with 13 additions and 0 deletions.
diff --git 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();