49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
|
import type { IBlock } from '../wysiwyg.types.js';
|
||
|
|
|
||
|
|
export interface IBlockContext {
|
||
|
|
shadowRoot: ShadowRoot;
|
||
|
|
component: any; // Reference to the wysiwyg-block component
|
||
|
|
}
|
||
|
|
|
||
|
|
export interface IBlockHandler {
|
||
|
|
type: string;
|
||
|
|
render(block: IBlock, isSelected: boolean): string;
|
||
|
|
setup(element: HTMLElement, block: IBlock, handlers: IBlockEventHandlers): void;
|
||
|
|
getStyles(): string;
|
||
|
|
getPlaceholder?(): string;
|
||
|
|
|
||
|
|
// Optional methods for editable blocks - now with context
|
||
|
|
getContent?(element: HTMLElement, context?: IBlockContext): string;
|
||
|
|
setContent?(element: HTMLElement, content: string, context?: IBlockContext): void;
|
||
|
|
getCursorPosition?(element: HTMLElement, context?: IBlockContext): number | null;
|
||
|
|
setCursorToStart?(element: HTMLElement, context?: IBlockContext): void;
|
||
|
|
setCursorToEnd?(element: HTMLElement, context?: IBlockContext): void;
|
||
|
|
focus?(element: HTMLElement, context?: IBlockContext): void;
|
||
|
|
focusWithCursor?(element: HTMLElement, position: 'start' | 'end' | number, context?: IBlockContext): void;
|
||
|
|
getSplitContent?(element: HTMLElement, context?: IBlockContext): { before: string; after: string } | null;
|
||
|
|
}
|
||
|
|
|
||
|
|
export interface IBlockEventHandlers {
|
||
|
|
onInput: (e: InputEvent) => void;
|
||
|
|
onKeyDown: (e: KeyboardEvent) => void;
|
||
|
|
onFocus: () => void;
|
||
|
|
onBlur: () => void;
|
||
|
|
onCompositionStart: () => void;
|
||
|
|
onCompositionEnd: () => void;
|
||
|
|
onMouseUp?: (e: MouseEvent) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export abstract class BaseBlockHandler implements IBlockHandler {
|
||
|
|
abstract type: string;
|
||
|
|
abstract render(block: IBlock, isSelected: boolean): string;
|
||
|
|
|
||
|
|
// Default implementation for common setup
|
||
|
|
setup(element: HTMLElement, block: IBlock, handlers: IBlockEventHandlers): void {
|
||
|
|
// Common setup logic
|
||
|
|
}
|
||
|
|
|
||
|
|
// Common styles can be defined here
|
||
|
|
getStyles(): string {
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
}
|