Allow custom dialogs, better styling support.

Fix registration bug with tp-form.

tp-rtb-link.js

@@ -1,7 +1,4 @@
-import '@tp/tp-dialog/tp-dialog.js';
-import '@tp/tp-form/tp-form.js';
-import '@tp/tp-input/tp-input.js';
-import '@tp/tp-button/tp-button.js';
+import './tp-rtb-link-dialog.js';
 import { html } from 'lit';
 import { TpRtbBaseExtension } from './tp-rtb-base-extension.js';
 import Link from '@tiptap/extension-link';
@@ -16,21 +13,9 @@ class TpRtbLink extends TpRtbBaseExtension {
     return html`
       ${super.render()}
 
-      <tp-dialog>
-        <h3>Add Link</h3>
-        <tp-form @submit=${this._saveLink}>
-          <tp-input name="url" .value=${this.url} required errorMessage="Required">
-            <input type="text">
-          </tp-input>
-          <tp-input name="text" .value=${this.text}>
-            <input type="text">
-          </tp-input>
-          <div class="buttons">
-            <tp-button dialog-dismiss>Cancel</tp-button>
-            <tp-button submit primary>Save</tp-button>
-          </div>
-        </tp-form>
-      </tp-dialog>
+      <slot name="dialog" @link-save=${this._saveLink}>
+        <tp-rtb-link-dialog></tp-rtb-link-dialog>
+      </slot>
     `;
   }
 
@@ -57,8 +42,10 @@ class TpRtbLink extends TpRtbBaseExtension {
       this.text = editor.state.doc.textBetween(from, to, ' ');
       this.url = editor.getAttributes('link').href || '';
 
-      const dialog = this.shadowRoot.querySelector('tp-dialog');
-      dialog.show();
+      this._dialog.show({
+        url: this.url,
+        text: this.text
+      });
     }
   }
 
@@ -66,19 +53,19 @@ class TpRtbLink extends TpRtbBaseExtension {
     const { url, text } = e.detail;
     const { editor } = this.parentEditor;
 
-    console.log(e.detail);
     if (url) {
-      console.log(url, editor);
       editor.chain().focus().setLink({ href: url }).run();
-      // If text is provided and different from current selection, update it
+
       if (text && editor.state.selection.empty) {
         editor.chain().focus().insertContent(text).run();
       }
     } else {
       editor.chain().focus().unsetLink().run();
     }
+  }
 
-    this.shadowRoot.querySelector('tp-dialog').close();
+  get _dialog() {
+    return this.querySelector('[slot="dialog"]') || this.shadowRoot.querySelector('tp-rtb-link-dialog');
   }
 
   _setupEditorListeners() {