dees-catalog/ts_web/elements/dees-input-wysiwyg/blocks/content/divider.block.ts

import { BaseBlockHandler, type IBlockEventHandlers } from '../block.base.js';
import type { IBlock } from '../../wysiwyg.types.js';
import { cssManager } from '@design.estate/dees-element';

export class DividerBlockHandler extends BaseBlockHandler {
  type = 'divider';
  
  render(block: IBlock, isSelected: boolean): string {
    const selectedClass = isSelected ? ' selected' : '';
    return `
      <div class="block divider${selectedClass}" data-block-id="${block.id}" data-block-type="${block.type}" tabindex="0">
        <hr>
      </div>
    `;
  }
  
  setup(element: HTMLElement, block: IBlock, handlers: IBlockEventHandlers): void {
    const dividerBlock = element.querySelector('.block.divider') as HTMLDivElement;
    if (!dividerBlock) return;
    
    // Handle click to select
    dividerBlock.addEventListener('click', (e) => {
      e.stopPropagation();
      // Focus will trigger the selection
      dividerBlock.focus();
      // Ensure focus handler is called immediately
      handlers.onFocus?.();
    });
    
    // Handle focus/blur
    dividerBlock.addEventListener('focus', () => {
      handlers.onFocus?.();
    });
    
    dividerBlock.addEventListener('blur', () => {
      handlers.onBlur?.();
    });
    
    // Handle keyboard events
    dividerBlock.addEventListener('keydown', (e) => {
      if (e.key === 'Backspace' || e.key === 'Delete') {
        e.preventDefault();
        // Let the keyboard handler in the parent component handle the deletion
        handlers.onKeyDown?.(e);
      } else {
        // Handle navigation keys
        handlers.onKeyDown?.(e);
      }
    });
  }
  
  getStyles(): string {
    return `
      .block.divider {
        padding: 8px 0;
        margin: 16px 0;
        cursor: pointer;
        position: relative;
        border-radius: 4px;
        transition: all 0.15s ease;
      }

      .block.divider:focus {
        outline: none;
      }

      .block.divider.selected {
        background: ${cssManager.bdTheme('rgba(0, 102, 204, 0.05)', 'rgba(77, 148, 255, 0.08)')};
        box-shadow: inset 0 0 0 2px ${cssManager.bdTheme('rgba(0, 102, 204, 0.2)', 'rgba(77, 148, 255, 0.2)')};
      }

      .block.divider hr {
        border: none;
        border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
        margin: 0;
        pointer-events: none;
      }
    `;
  }
}