diff --git a/README.md b/README.md index c30f8b3..977ebcb 100644 --- a/README.md +++ b/README.md @@ -48,8 +48,19 @@ Please see also [this comment](https://github.com/codex-team/editor.js/issues/12 ## <dialog> polyfill -editorjs-layout uses `` element. -[GoogleChrome/dialog-polyfill](https://github.com/GoogleChrome/dialog-polyfill) can be used to improve the browser compatibility. +editorjs-layout uses `` element and [GoogleChrome/dialog-polyfill](https://github.com/GoogleChrome/dialog-polyfill). +Please load `dialog-polyfill.css` in your document. + +```html + + + +``` ## Build diff --git a/docs/index.html b/docs/index.html index 87da438..c83eb72 100644 --- a/docs/index.html +++ b/docs/index.html @@ -2,7 +2,15 @@ + editorjs-layout + + diff --git a/package.json b/package.json index bb9af1d..2fdee36 100644 --- 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 index e312b07..77203fe 100644 --- 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 index 4f4ef5e..cea263e 100644 --- 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"