feat: Install dialog-polyfill

hata6502 · Feb 1, 2021 · 03b90f4 · 03b90f4
1 parent cbc2ba6
commit 03b90f4
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -48,8 +48,19 @@ Please see also [this comment](https://github.com/codex-team/editor.js/issues/12
 
 ## &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-layout 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/[email protected]/dist/dialog-polyfill.css"
+    integrity="sha256-hT0ET4tfm+7MyjeBepBgV2N5tOmsAVKcTWhH82jvoaA="
+    crossorigin="anonymous"
+  />
+</head>
+```
 
 ## Build
 

diff --git a/docs/index.html b/docs/index.html
@@ -2,7 +2,15 @@
 <html>
   <head>
     <meta charset="utf-8" />
+
     <title>editorjs-layout</title>
+
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/dialog-polyfill.css"
+      integrity="sha256-hT0ET4tfm+7MyjeBepBgV2N5tOmsAVKcTWhH82jvoaA="
+      crossorigin="anonymous"
+    />
   </head>
 
   <body>

diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
   },
   "devDependencies": {
     "@types/uuid": "^8.3.0",
+    "dialog-polyfill": "^0.5.6",
     "ionicons": "^5.3.0",
     "license-checker": "^25.0.1",
     "prettier": "^2.2.1",

diff --git a/src/itemContent/createDialog.ts b/src/itemContent/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 { LayoutBlockToolConfig } from "../LayoutBlockTool";
 
@@ -15,6 +16,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
@@ -1342,6 +1342,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==
+
 dir-glob@^3.0.0, dir-glob@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"