Skip to content

API.md

Latest commit

 

History

History
112 lines (99 loc) · 8.46 KB

API.md

File metadata and controls

112 lines (99 loc) · 8.46 KB
Raw

API Reference

Detailed documentation for AngularTiptapEditorComponent inputs, outputs, and configuration objects.

📥 Inputs

Input Type Default Description
config AteEditorConfig {} Global configuration object (Recommended)
content string "" Initial HTML content
placeholder string "Start typing..." Placeholder text (overrides config)
locale 'en' | 'fr' Auto-detect Editor language (overrides config)
editable boolean true Whether editor is editable
disabled boolean false Disabled state (for forms)
mode 'classic' | 'seamless' 'classic' Seamless mode removes borders and background
height string | number undefined Editor height (e.g. '400px', 400, 'auto')
maxHeight string | number undefined Maximum height
minHeight string | number undefined Minimum height
fillContainer boolean false Fill parent container height
autofocus boolean | 'start' | 'end' | 'all' | number false Auto-focus behavior
spellcheck boolean true Enable browser spellcheck
showToolbar boolean true Show toolbar
floatingToolbar boolean false Show floating toolbar on focus
showFooter boolean true Show footer (counters)
showEditToggle boolean false Show read-only/edit toggle button
showCharacterCount boolean true Show character counter
showWordCount boolean true Show word counter
maxCharacters number undefined Character limit
showBubbleMenu boolean true Show text bubble menu
showImageBubbleMenu boolean true Show image bubble menu
showTableMenu boolean true Show table bubble menu
showCellMenu boolean true Show cell bubble menu
enableSlashCommands boolean true Enable slash commands functionality
blockControls 'inside' | 'outside' | 'none' 'none' Plus button and drag handle mode
enableOfficePaste boolean true Enable smart Office pasting
toolbar AteToolbarConfig All enabled Detailed toolbar configuration
bubbleMenu AteBubbleMenuConfig All enabled Detailed bubble menu configuration
slashCommands AteSlashCommandsConfig All enabled Detailed slash commands config
imageUploadHandler AteImageUploadHandler undefined Custom image upload function (toolbar, drop, paste)
stateCalculators AteStateCalculator[] [] Custom reactive state logic
tiptapExtensions (Extension | Node | Mark)[] [] Additional Tiptap extensions
tiptapOptions Partial<EditorOptions> {} Additional Tiptap editor options

Note on Precedence: Values provided in individual inputs (e.g., [editable]="false") always take precedence over values defined inside the [config] object.

Image upload flows: imageUploadHandler is invoked for all file-based image insertions: toolbar picker, drag-and-drop, and clipboard paste.

⚙️ AteEditorConfig Reference

The AteEditorConfig nested structure allows for complex configurations while remaining flat for core settings:

export interface AteEditorConfig {
  // --- 1. Core Settings ---
  theme?: "light" | "dark" | "auto";
  mode?: "classic" | "seamless";
  height?: string | number;
  minHeight?: string | number;
  maxHeight?: string | number;
  fillContainer?: boolean;
  autofocus?: AteAutofocusMode; // "start" | "end" | "all" | boolean | number
  placeholder?: string;
  editable?: boolean;
  disabled?: boolean;
  locale?: string;
  spellcheck?: boolean;
  enableOfficePaste?: boolean;

  // --- 2. Visibility & UX Options ---
  showToolbar?: boolean;
  floatingToolbar?: boolean;
  showFooter?: boolean;
  showCharacterCount?: boolean;
  showWordCount?: boolean;
  showEditToggle?: boolean;
  showBubbleMenu?: boolean;
  showImageBubbleMenu?: boolean;
  showTableMenu?: boolean;
  showCellMenu?: boolean;
  downloadImage?: boolean; // Whether to allow image downloading from bubble menu
  enableSlashCommands?: boolean;
  maxCharacters?: number;
  blockControls?: AteBlockControlsMode; // "inside" | "outside" | "none"

  // --- 3. Complex Modules & Extensions ---
  toolbar?: AteToolbarConfig;
  bubbleMenu?: AteBubbleMenuConfig;
  imageBubbleMenu?: AteImageBubbleMenuConfig;
  tableBubbleMenu?: AteTableBubbleMenuConfig;
  cellBubbleMenu?: AteCellBubbleMenuConfig;
  slashCommands?: AteSlashCommandsConfig;
  imageUpload?: AteImageUploadConfig;
  angularNodes?: AteAngularNode[]; // Angular components as editor nodes
  tiptapExtensions?: (Extension | Node | Mark)[];
  tiptapOptions?: Partial<EditorOptions>;
  stateCalculators?: AteStateCalculator[];
  customSlashCommands?: AteCustomSlashCommands;
}

📤 Outputs

Output Type Description
contentChange string Emitted when content changes
editorCreated Editor Emitted when editor is created
editorUpdate { editor: Editor; transaction: any } Emitted on every editor update
editorFocus { editor: Editor; event: FocusEvent } Emitted when editor gains focus
editorBlur { editor: Editor; event: FocusEvent } Emitted when editor loses focus
editableChange boolean Emitted when edit mode is toggled
imageUploaded AteImageUploadResult Emitted when an image is uploaded