tp-rich-text-box/tp-rtb-base-extension.js

import { LitElement, html, css } from 'lit';

export class TpRtbBaseExtension extends LitElement {
  static get styles() {
    return css`
      :host {
        display: inline-block;
      }

      slot::slotted(*) {
        cursor: pointer;
      }

      :host([active]) slot::slotted(*) {
        --tp-icon-color: var(--tp-rtb-action-active-color, currentColor);
      }
      
      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;
      }
    `;
  }

  render() {
    return html`
      <slot @click=${this._handleClick}>
        <button type="button" class="${this.active ? 'active' : ''}" title=${this.label} aria-label=${this.label}>
          ${this.label}
        </button>
      </slot>
    `;
  }

  static get properties() {
    return {
      label: { type: String },
      active: { type: Boolean, reflect: true }
    };
  }

  constructor() {
    super();
    this.label = '';
    this.active = false;
  }

  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;
  }
}