import { EventEmitter } from 'eventemitter3'; /** * @typedef {function(CommandItem): void} CommandCallback * A callback function that's executed when a toolbar button is clicked * @param {CommandItem} params - Command parameters * @param {ToolbarItem} params.item - An instance of the useToolbarItem composable * @param {*} [params.argument] - The argument passed to the command */ /** * @typedef {Object} ToolbarConfig * @property {string} [selector] - CSS selector for the toolbar container * @property {string[]} [toolbarGroups=['left', 'center', 'right']] - Groups to organize toolbar items * @property {string} [role='editor'] - Role of the toolbar ('editor' or 'viewer') * @property {Object} [icons] - Custom icons for toolbar items * @property {Object} [texts] - Custom texts for toolbar items * @property {import('../../core/types/EditorConfig.js').FontConfig[]} [fonts] - Font options for the font picker dropdown * @property {boolean} [hideButtons=true] - Whether to hide buttons when the editor is not focused * @property {boolean} [pagination=false] - Whether to show pagination controls * @property {string} [mode='docx'] - Editor mode * @property {string[]} [excludeItems=[]] - Items to exclude from the toolbar * @property {Object} [groups=null] - Custom groups configuration * @property {Object} [editor=null] - The editor instance * @property {string} [aiApiKey=null] - API key for AI integration * @property {string} [aiEndpoint=null] - Endpoint for AI integration * @property {ToolbarItem[]} [customButtons=[]] - Custom buttons to add to the toolbar */ /** * @typedef {Object} ToolbarItem * @property {Object} id - The unique ID of the toolbar item * @property {string} id.value - The value of the ID * @property {Object} name - The name of the toolbar item * @property {string} name.value - The value of the name * @property {string} type - The type of toolbar item (button, options, separator, dropdown, overflow) * @property {Object} group - The group the item belongs to * @property {string} group.value - The value of the group * @property {string|CommandCallback} command - The command to execute * @property {string} [noArgumentCommand] - The command to execute when no argument is provided * @property {Object} icon - The icon for the item * @property {*} icon.value - The value of the icon * @property {Object} tooltip - The tooltip for the item * @property {*} tooltip.value - The value of the tooltip * @property {boolean} [restoreEditorFocus] - Whether to restore editor focus after command execution * @property {Object} attributes - Additional attributes for the item * @property {Object} attributes.value - The value of the attributes * @property {Object} disabled - Whether the item is disabled * @property {boolean} disabled.value - The value of disabled * @property {Object} active - Whether the item is active * @property {boolean} active.value - The value of active * @property {Object} expand - Whether the item is expanded * @property {boolean} expand.value - The value of expand * @property {Object} nestedOptions - Nested options for the item * @property {Array} nestedOptions.value - The array of nested options * @property {Object} style - Custom style for the item * @property {*} style.value - The value of the style * @property {Object} isNarrow - Whether the item has narrow styling * @property {boolean} isNarrow.value - The value of isNarrow * @property {Object} isWide - Whether the item has wide styling * @property {boolean} isWide.value - The value of isWide * @property {Object} minWidth - Minimum width of the item * @property {*} minWidth.value - The value of minWidth * @property {Object} argument - The argument to pass to the command * @property {*} argument.value - The value of the argument * @property {Object} parentItem - The parent of this item if nested * @property {*} parentItem.value - The value of parentItem * @property {Object} childItem - The child of this item if it has one * @property {*} childItem.value - The value of childItem * @property {Object} iconColor - The color of the icon * @property {*} iconColor.value - The value of iconColor * @property {Object} hasCaret - Whether the item has a dropdown caret * @property {boolean} hasCaret.value - The value of hasCaret * @property {Object} dropdownStyles - Custom styles for dropdown * @property {*} dropdownStyles.value - The value of dropdownStyles * @property {Object} tooltipVisible - Whether the tooltip is visible * @property {boolean} tooltipVisible.value - The value of tooltipVisible * @property {Object} tooltipTimeout - Timeout for the tooltip * @property {*} tooltipTimeout.value - The value of tooltipTimeout * @property {Object} defaultLabel - The default label for the item * @property {*} defaultLabel.value - The value of the default label * @property {Object} label - The label for the item * @property {*} label.value - The value of the label * @property {Object} hideLabel - Whether to hide the label * @property {boolean} hideLabel.value - The value of hideLabel * @property {Object} inlineTextInputVisible - Whether inline text input is visible * @property {boolean} inlineTextInputVisible.value - The value of inlineTextInputVisible * @property {Object} hasInlineTextInput - Whether the item has inline text input * @property {boolean} hasInlineTextInput.value - The value of hasInlineTextInput * @property {Object} markName - The name of the mark * @property {*} markName.value - The value of markName * @property {Object} labelAttr - The attribute for the label * @property {*} labelAttr.value - The value of labelAttr * @property {Object} allowWithoutEditor - Whether the item can be used without an editor * @property {boolean} allowWithoutEditor.value - The value of allowWithoutEditor * @property {Object} dropdownValueKey - The key for dropdown value * @property {*} dropdownValueKey.value - The value of dropdownValueKey * @property {Object} selectedValue - The selected value for the item * @property {*} selectedValue.value - The value of the selected value * @property {Object} inputRef - Reference to an input element * @property {*} inputRef.value - The value of inputRef * @property {Function} unref - Function to get unreferenced values * @property {Function} activate - Function to activate the item * @property {Function} deactivate - Function to deactivate the item * @property {Function} setDisabled - Function to set the disabled state * @property {Function} resetDisabled - Function to reset the disabled state * @property {Function} onActivate - Function called when the item is activated * @property {Function} onDeactivate - Function called when the item is deactivated */ /** * @typedef {Object} CommandItem * @property {ToolbarItem} item - The toolbar item * @property {*} [argument] - The argument to pass to the command */ /** * A customizable toolbar for the Super Editor * @class * @extends EventEmitter */ export class SuperToolbar extends EventEmitter { /** * Mark toggle names used to identify mark commands that need special handling * when the editor is not focused. * @type {Set} * @private */ private static "__#private@#MARK_TOGGLE_NAMES"; /** * Creates a new SuperToolbar instance * @param {ToolbarConfig} config - The configuration for the toolbar * @returns {void} */ constructor(config: ToolbarConfig); /** * Default configuration for the toolbar * @type {ToolbarConfig} */ config: ToolbarConfig; toolbarItems: any[]; overflowItems: any[]; documentMode: any; isDev: any; superdoc: any; role: string; toolbarContainer: any; /** * Queue of mark commands to execute when editor regains focus. * @type {Array<{command: string, argument: *, item: ToolbarItem}>} * @private */ private pendingMarkCommands; /** * Persisted stored marks to re-apply when the selection is empty and has no formatting. * @type {import('prosemirror-model').Mark[]|null} * @private */ private stickyStoredMarks; /** * Bound event handlers stored for proper cleanup when switching editors. * @type {{transaction: Function|null, selectionUpdate: Function|null, focus: Function|null}} * @private */ private _boundEditorHandlers; /** * Timeout ID for restoring editor focus after toolbar command execution. * Tracked for cleanup on destroy to prevent callbacks firing after toolbar is unmounted. * @type {number|null} * @private */ private _restoreFocusTimeoutId; app: import('vue').App | undefined; toolbar: import('vue').ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import('vue').ComponentOptionsBase, {}, {}, "", {}, any> | undefined; activeEditor: Object | null | undefined; findElementBySelector(selector: any): any; /** * Log debug information to the console * @param {...*} args - Arguments to log * @returns {void} */ log(...args: any[]): void; /** * Set the zoom level * @param {number} percent_int - The zoom percentage as an integer * @returns {void} */ setZoom(percent_int: number): void; /** * The toolbar expects an active Super Editor instance. * Removes listeners from the previous editor (if any) before attaching to the new one. * @param {Object|null} editor - The editor instance to attach to the toolbar, or null to detach * @returns {void} */ setActiveEditor(editor: Object | null): void; /** * Get toolbar items by group name * @param {string} groupName - The name of the group * @returns {ToolbarItem[]} An array of toolbar items in the specified group */ getToolbarItemByGroup(groupName: string): ToolbarItem[]; /** * Get a toolbar item by name * @param {string} name - The name of the toolbar item * @returns {ToolbarItem|undefined} The toolbar item with the specified name or undefined if not found */ getToolbarItemByName(name: string): ToolbarItem | undefined; /** * Update the toolbar state based on the current editor state * Updates active/inactive state of all toolbar items * @returns {void} */ updateToolbarState(): void; /** * Handler for toolbar resize events * @returns {void} */ onToolbarResize: () => void; undoDepth: any; redoDepth: any; /** * React to editor transactions. Might want to debounce this. * @param {Object} params - Transaction parameters * @param {Object} params.transaction - The transaction object * @returns {void} */ onEditorTransaction({ transaction }: { transaction: Object; }): void; /** * Main handler for toolbar commands * @param {CommandItem} params - Command parameters * @param {ToolbarItem} params.item - An instance of the useToolbarItem composable * @param {*} [params.argument] - The argument passed to the command * @returns {*} The result of the executed command, undefined if no result is returned */ emitCommand({ item, argument, option }: CommandItem): any; /** * Processes and executes pending mark commands when editor selection updates. * This is triggered by the editor's 'selectionUpdate' event after focus is restored. * Clears the pending queue after execution. * @returns {void} */ onEditorSelectionUpdate(): void; /** * Handles editor focus events by flushing any pending mark commands. * This is triggered by the editor's 'focus' event. * @returns {void} */ onEditorFocus(): void; /** * Determines if a toolbar item represents a mark toggle command. * Mark toggles include text formatting commands like bold, italic, underline, etc. * @param {ToolbarItem} item - The toolbar item to check * @returns {boolean} True if the item is a mark toggle, false otherwise */ isMarkToggle(item: ToolbarItem): boolean; /** * Cleans up resources when the toolbar is destroyed. * Clears any pending timeouts to prevent callbacks firing after unmount. * @returns {void} */ destroy(): void; #private; } /** * A callback function that's executed when a toolbar button is clicked */ export type CommandCallback = (arg0: CommandItem) => void; export type ToolbarConfig = { /** * - CSS selector for the toolbar container */ selector?: string | undefined; /** * - Groups to organize toolbar items */ toolbarGroups?: string[] | undefined; /** * - Role of the toolbar ('editor' or 'viewer') */ role?: string | undefined; /** * - Custom icons for toolbar items */ icons?: Object | undefined; /** * - Custom texts for toolbar items */ texts?: Object | undefined; /** * - Font options for the font picker dropdown */ fonts?: import('../../../../../../superdoc/src/super-editor').FontConfig[] | undefined; /** * - Whether to hide buttons when the editor is not focused */ hideButtons?: boolean | undefined; /** * - Whether to show pagination controls */ pagination?: boolean | undefined; /** * - Editor mode */ mode?: string | undefined; /** * - Items to exclude from the toolbar */ excludeItems?: string[] | undefined; /** * - Custom groups configuration */ groups?: Object | undefined; /** * - The editor instance */ editor?: Object | undefined; /** * - API key for AI integration */ aiApiKey?: string | undefined; /** * - Endpoint for AI integration */ aiEndpoint?: string | undefined; /** * - Custom buttons to add to the toolbar */ customButtons?: ToolbarItem[] | undefined; }; export type ToolbarItem = { /** * - The unique ID of the toolbar item */ id: { value: string; }; /** * - The name of the toolbar item */ name: { value: string; }; /** * - The type of toolbar item (button, options, separator, dropdown, overflow) */ type: string; /** * - The group the item belongs to */ group: { value: string; }; /** * - The command to execute */ command: string | CommandCallback; /** * - The command to execute when no argument is provided */ noArgumentCommand?: string | undefined; /** * - The icon for the item */ icon: { value: any; }; /** * - The tooltip for the item */ tooltip: { value: any; }; /** * - Whether to restore editor focus after command execution */ restoreEditorFocus?: boolean | undefined; /** * - Additional attributes for the item */ attributes: { value: Object; }; /** * - Whether the item is disabled */ disabled: { value: boolean; }; /** * - Whether the item is active */ active: { value: boolean; }; /** * - Whether the item is expanded */ expand: { value: boolean; }; /** * - Nested options for the item */ nestedOptions: { value: any[]; }; /** * - Custom style for the item */ style: { value: any; }; /** * - Whether the item has narrow styling */ isNarrow: { value: boolean; }; /** * - Whether the item has wide styling */ isWide: { value: boolean; }; /** * - Minimum width of the item */ minWidth: { value: any; }; /** * - The argument to pass to the command */ argument: { value: any; }; /** * - The parent of this item if nested */ parentItem: { value: any; }; /** * - The child of this item if it has one */ childItem: { value: any; }; /** * - The color of the icon */ iconColor: { value: any; }; /** * - Whether the item has a dropdown caret */ hasCaret: { value: boolean; }; /** * - Custom styles for dropdown */ dropdownStyles: { value: any; }; /** * - Whether the tooltip is visible */ tooltipVisible: { value: boolean; }; /** * - Timeout for the tooltip */ tooltipTimeout: { value: any; }; /** * - The default label for the item */ defaultLabel: { value: any; }; /** * - The label for the item */ label: { value: any; }; /** * - Whether to hide the label */ hideLabel: { value: boolean; }; /** * - Whether inline text input is visible */ inlineTextInputVisible: { value: boolean; }; /** * - Whether the item has inline text input */ hasInlineTextInput: { value: boolean; }; /** * - The name of the mark */ markName: { value: any; }; /** * - The attribute for the label */ labelAttr: { value: any; }; /** * - Whether the item can be used without an editor */ allowWithoutEditor: { value: boolean; }; /** * - The key for dropdown value */ dropdownValueKey: { value: any; }; /** * - The selected value for the item */ selectedValue: { value: any; }; /** * - Reference to an input element */ inputRef: { value: any; }; /** * - Function to get unreferenced values */ unref: Function; /** * - Function to activate the item */ activate: Function; /** * - Function to deactivate the item */ deactivate: Function; /** * - Function to set the disabled state */ setDisabled: Function; /** * - Function to reset the disabled state */ resetDisabled: Function; /** * - Function called when the item is activated */ onActivate: Function; /** * - Function called when the item is deactivated */ onDeactivate: Function; }; export type CommandItem = { /** * - The toolbar item */ item: ToolbarItem; /** * - The argument to pass to the command */ argument?: any; }; //# sourceMappingURL=super-toolbar.d.ts.map