A first version that has some working standard features.

2025-07-06 21:49:07 +02:00
parent 2895b917fc
commit d0488e98e0
12 changed files with 1894 additions and 17564 deletions
--- a/tp-rtb-link.js
+++ b/tp-rtb-link.js
@@ -0,0 +1,97 @@
+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 { html } from 'lit';
+import { TpRtbBaseExtension } from './tp-rtb-base-extension.js';
+import Link from '@tiptap/extension-link';
+
+class TpRtbLink extends TpRtbBaseExtension {
+  constructor() {
+    super();
+    this.label = 'Link';
+  }
+
+  render() {
+    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>
+    `;
+  }
+
+  static get properties() {
+    return {
+      url: { type: String },
+      text: { type: String },
+    };
+  }
+
+  getExtension() {
+    return Link.configure({
+      autolink: true,
+      linkOnPaste: true,
+      openOnClick: false, // We will handle opening links manually
+    });
+  }
+
+  _handleClick() {
+    if (this.parentEditor && this.parentEditor.editor) {
+      const { editor } = this.parentEditor;
+      const { selection } = editor.state;
+      const { from, to } = selection;
+      this.text = editor.state.doc.textBetween(from, to, ' ');
+      this.url = editor.getAttributes('link').href || '';
+
+      const dialog = this.shadowRoot.querySelector('tp-dialog');
+      dialog.show();
+    }
+  }
+
+  _saveLink(e) {
+    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();
+  }
+
+  _setupEditorListeners() {
+    const { editor } = this.parentEditor;
+    
+    editor.on('selectionUpdate', () => {
+      this.active = editor.isActive('link');
+    });
+    
+    editor.on('focus', () => {
+      this.active = editor.isActive('link');
+    });
+  }
+}
+
+customElements.define('tp-rtb-link', TpRtbLink);