98 lines
2.5 KiB
JavaScript
98 lines
2.5 KiB
JavaScript
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);
|