76 lines
1.4 KiB
JavaScript
76 lines
1.4 KiB
JavaScript
import { LitElement, html, css } from 'lit';
|
|
|
|
export class TpRtbBaseExtension extends LitElement {
|
|
static get styles() {
|
|
return css`
|
|
:host {
|
|
display: inline-block;
|
|
}
|
|
|
|
button {
|
|
margin: 0 2px;
|
|
padding: 4px 8px;
|
|
background: none;
|
|
border: 1px solid #ccc;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
button.active {
|
|
background-color: #e0e0e0;
|
|
}
|
|
`;
|
|
}
|
|
|
|
static get properties() {
|
|
return {
|
|
label: { type: String },
|
|
active: { type: Boolean, reflect: true }
|
|
};
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.label = '';
|
|
this.active = false;
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<button class="${this.active ? 'active' : ''}" @click=${this._handleClick}>
|
|
${this.label}
|
|
</button>
|
|
`;
|
|
}
|
|
|
|
connectedCallback() {
|
|
super.connectedCallback();
|
|
this._findParentEditor();
|
|
}
|
|
|
|
_findParentEditor() {
|
|
this.parentEditor = this.closest('tp-rich-text-box');
|
|
}
|
|
|
|
_editorReady(editorInstance) {
|
|
this.parentEditor.editor = editorInstance;
|
|
this._setupEditorListeners();
|
|
}
|
|
|
|
_setupEditorListeners() {
|
|
// To be implemented by child classes
|
|
}
|
|
|
|
_handleClick() {
|
|
// To be implemented by child classes
|
|
}
|
|
|
|
getExtension() {
|
|
// To be implemented by child classes
|
|
return null;
|
|
}
|
|
} |