feat: Install dialog-polyfill

hata6502 · Feb 1, 2021 · a4c1583 · a4c1583
1 parent 96e905f
commit a4c1583
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -55,8 +55,19 @@ Please see [Demo](https://hata6502.github.io/editorjs-inline/).
 
 ## &lt;dialog&gt; polyfill
 
-editorjs-layout uses `<dialog>` element.
-[GoogleChrome/dialog-polyfill](https://github.com/GoogleChrome/dialog-polyfill) can be used to improve the browser compatibility.
+editorjs-inline uses `<dialog>` element and [GoogleChrome/dialog-polyfill](https://github.com/GoogleChrome/dialog-polyfill).
+Please load `dialog-polyfill.css` in your document.
+
+```html
+<head>
+  <link
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.6/dist/dialog-polyfill.css"
+    integrity="sha256-hT0ET4tfm+7MyjeBepBgV2N5tOmsAVKcTWhH82jvoaA="
+    crossorigin="anonymous"
+  />
+</head>
+```
 
 ## Build
 

diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
   },
   "devDependencies": {
     "@types/uuid": "^8.3.0",
+    "dialog-polyfill": "^0.5.6",
     "license-checker": "^25.0.1",
     "prettier": "^2.0.5",
     "semantic-release": "^17.1.1",

diff --git a/src/EditorJSInlineElement/createDialog.ts b/src/EditorJSInlineElement/createDialog.ts
@@ -1,4 +1,5 @@
 import type { OutputData } from '@editorjs/editorjs';
+import dialogPolyfill from 'dialog-polyfill';
 import { v4 as uuidv4 } from 'uuid';
 import type { EditorJSInlineWindow } from '../window';
 
@@ -13,6 +14,8 @@ const createDialog = ({
 }) => {
   const dialog = document.createElement('dialog');
 
+  dialogPolyfill.registerDialog(dialog);
+
   dialog.style.maxWidth = '960px';
   // Make be not able to click inner
   dialog.style.padding = '0';

diff --git a/yarn.lock b/yarn.lock
@@ -1688,6 +1688,11 @@ dezalgo@^1.0.0, dezalgo@~1.0.3:
     asap "^2.0.0"
     wrappy "1"
 
+dialog-polyfill@^0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/dialog-polyfill/-/dialog-polyfill-0.5.6.tgz#7507b4c745a82fcee0fa07ce64d835979719599a"
+  integrity sha512-ZbVDJI9uvxPAKze6z146rmfUZjBqNEwcnFTVamQzXH+svluiV7swmVIGr7miwADgfgt1G2JQIytypM9fbyhX4w==
+
 diffie-hellman@^5.0.0:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"