85 lines
1.9 KiB
JavaScript
85 lines
1.9 KiB
JavaScript
import './tp-rtb-link-dialog.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()}
|
|
|
|
<slot name="dialog" @link-save=${this._saveLink}>
|
|
<tp-rtb-link-dialog></tp-rtb-link-dialog>
|
|
</slot>
|
|
`;
|
|
}
|
|
|
|
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 || '';
|
|
|
|
this._dialog.show({
|
|
url: this.url,
|
|
text: this.text
|
|
});
|
|
}
|
|
}
|
|
|
|
_saveLink(e) {
|
|
const { url, text } = e.detail;
|
|
const { editor } = this.parentEditor;
|
|
|
|
if (url) {
|
|
editor.chain().focus().setLink({ href: url }).run();
|
|
|
|
if (text && editor.state.selection.empty) {
|
|
editor.chain().focus().insertContent(text).run();
|
|
}
|
|
} else {
|
|
editor.chain().focus().unsetLink().run();
|
|
}
|
|
}
|
|
|
|
get _dialog() {
|
|
return this.querySelector('[slot="dialog"]') || this.shadowRoot.querySelector('tp-rtb-link-dialog');
|
|
}
|
|
|
|
_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);
|