Append the dialog to the prose-editor element instead of to the body

Author: matthiask

django_prose_editor/static/django_prose_editor/editor.js

@@ -14,7 +14,7 @@ const formFieldForProperty = ([name, config]) => {
   return `<p><label>${config.title || name}</label> ${widget}</p>`
 }
 
-export const updateAttrsDialog = (properties) => (attrs) => {
+export const updateAttrsDialog = (properties) => (editor, attrs) => {
   const { messages } = settings()
   return new Promise((resolve) => {
     const div = document.createElement("div")
@@ -27,7 +27,8 @@ export const updateAttrsDialog = (properties) => (attrs) => {
   </form>
   </dialog>
   `
-    document.body.append(div)
+
+    editor.view.dom.closest(".prose-editor").append(div)
     const dialog = div.querySelector("dialog")
     const form = div.querySelector("form")
 

src/commands.js

@@ -10,7 +10,7 @@ export const HTML = Extension.create({
       editHTML:
         () =>
         ({ editor }) => {
-          htmlDialog({ html: editor.getHTML() }).then((attrs) => {
+          htmlDialog(editor, { html: editor.getHTML() }).then((attrs) => {
             if (attrs) {
               editor.chain().focus().setContent(attrs.html).run()
             }

src/html.js

@@ -23,7 +23,7 @@ export const Link = BaseLink.extend({
         ({ editor }) => {
           const attrs = editor.getAttributes(this.name)
 
-          linkDialog(attrs).then((attrs) => {
+          linkDialog(editor, attrs).then((attrs) => {
             if (attrs) {
               const cmd = editor
                 .chain()