UNPKG

@progress/kendo-react-editor

Version:

React Editor enables users to create rich text content through a WYSIWYG interface. KendoReact Editor package

718 lines (717 loc) 27.5 kB
/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { EditorToolsSettings } from '../config/toolsSettings.js'; import { InsertTableToolNS, InsertTablePopupNS } from './insertTable/index.js'; import { FontStyleToolNS } from './fontStyle.js'; import { ApplyColorToolProps } from './applyColor.js'; import { FormatBlockToolNS } from './formatBlock.js'; import { HistoryToolNS } from './history.js'; import { IndentToolNS } from './indent.js'; import { InlineFormatToolNS } from './inlineFormat.js'; import { LinkToolNS } from './insertLink.js'; import { ListToolNS } from './lists.js'; import { ToolProps, BasicToolProps, ToolWithDialogRenderProp } from './ToolProps.js'; import { TableEditNS } from './tableEdit.js'; import { UnlinkToolNS } from './unlink.js'; import { ViewHtmlToolNS } from './viewHtml.js'; import { PrintProps as PrintToolProps } from './print.js'; import { PdfProps as PdfToolProps } from './pdf.js'; import { SelectAllToolProps } from './selectAll.js'; import { CleanFormattingToolProps } from './cleanFormatting.js'; import { FindAndReplace as FindAndReplaceTool, FindAndReplaceProps as FindAndReplaceToolProps } from './findReplace.js'; import { ButtonProps } from '@progress/kendo-react-buttons'; import { TableCellPropertiesProps as TableCellPropertiesToolProps } from './table-wizard/tableCellProperties.js'; import { TablePropertiesProps as TablePropertiesToolProps } from './table-wizard/tableProperties.js'; import * as React from 'react'; /** * Represents a wrapping namespace for the tool components, props, and functions of the Editor. */ export declare namespace EditorTools { /** * The props for the Align tool component of the Editor. */ export interface AlignToolProps extends ToolProps { } /** * The props for the AlignLeft tool component of the Editor. */ export interface AlignLeftProps extends AlignToolProps { } /** * The props for the AlignRight tool component of the Editor. */ export interface AlignRightProps extends AlignToolProps { } /** * The props for the AlignCenter tool component of the Editor. */ export interface AlignCenterProps extends AlignToolProps { } /** * The props for the AlignJustify tool component of the Editor. */ export interface AlignJustifyProps extends AlignToolProps { } /** * Creates the Align tool component of the Editor. * * @param {AlignSettings} settings * @returns {React.ComponentClass<AlignToolProps>} - Editor's Align tool component. */ export function createAlignTool(settings: EditorToolsSettings.AlignSettings): React.ComponentClass<AlignToolProps, React.ComponentState>; const AlignLeft_base: React.ComponentClass<AlignToolProps, any>; /** * The AlignLeft tool component. */ export class AlignLeft extends AlignLeft_base { } const AlignRight_base: React.ComponentClass<AlignToolProps, any>; /** * The AlignRight tool component. */ export class AlignRight extends AlignRight_base { } const AlignCenter_base: React.ComponentClass<AlignToolProps, any>; /** * The AlignCenter tool component. */ export class AlignCenter extends AlignCenter_base { } const AlignJustify_base: React.ComponentClass<AlignToolProps, any>; /** * The AlignJustify tool component. */ export class AlignJustify extends AlignJustify_base { } /** * The props for the InsertTable tool component of the Editor. */ export interface InsertTableProps extends InsertTableToolNS.InsertTableProps { } /** * Creates the InsertTable tool component of the Editor. * * @param {InsertTableSettings} - The settings of the InsertTable tool. * @returns {React.ComponentClass<InsertTableProps>} - The InsertTable tool component of the Editor. */ export function createInsertTableTool(settings: EditorToolsSettings.InsertTableSettings): React.ComponentClass<InsertTableProps>; const InsertTable_base: React.ComponentClass<InsertTableProps, any>; /** * The InsertTable tool component. */ export class InsertTable extends InsertTable_base { } /** * The props of the `InsertTablePopup` component. */ export interface InsertTablePopupProps extends InsertTablePopupNS.InsertTablePopupProps { } /** * The `InsertTablePopup` component. */ export class InsertTablePopup extends InsertTablePopupNS.InsertTablePopup { } /** * The props for the DropDownList tool component for inline styling of the Editor. */ export interface DropDownListToolProps extends FontStyleToolNS.DropDownListToolProps { } /** * The props for the FontSize tool component of the Editor. */ export interface FontSizeProps extends FontStyleToolNS.DropDownListToolProps { } /** * The props for the FontName tool component of the Editor. */ export interface FontNameProps extends FontStyleToolNS.DropDownListToolProps { } /** * Creates the DropDownList tool component of the Editor which applies inline styles to inline HTML elements. * * @param {StyleDropDownListSettings} settings * @returns {React.ComponentClass<DropDownListToolProps>} - The DropDownList tool component of the Editor. */ export function createStyleDropDownList(settings: EditorToolsSettings.StyleDropDownListSettings): React.ComponentClass<DropDownListToolProps, React.ComponentState>; const FontSize_base: React.ComponentClass<DropDownListToolProps, any>; /** * The FontSize tool component. */ export class FontSize extends FontSize_base { } const FontName_base: React.ComponentClass<DropDownListToolProps, any>; /** * The FontName tool component. */ export class FontName extends FontName_base { } /** * The props for the ForeColor tool component of the Editor. */ export interface ForeColorProps extends ApplyColorToolProps { } /** * The props for the BackColor tool component of the Editor. */ export interface BackColorProps extends ApplyColorToolProps { } /** * The ForeColor tool component. */ export const ForeColor: React.FunctionComponent<ForeColorProps>; /** * The BackColor tool component. */ export const BackColor: React.FunctionComponent<BackColorProps>; /** * The props for the FormatBlock tool component of the Editor. */ export interface FormatBlockProps extends FormatBlockToolNS.FormatBlockProps { } /** * Creates the FormatBlock tool component of the Editor. * * @param {FormatBlockDropDownListSettings} settings * @returns {React.ComponentClass<FormatBlockProps>} - The FormatBlock tool component of the Editor. */ export function createFormatBlockDropDownList(settings: EditorToolsSettings.FormatBlockDropDownListSettings): React.ComponentClass<FormatBlockProps, React.ComponentState>; const FormatBlock_base: React.ComponentClass<FormatBlockProps, any>; /** * The FormatBlock tool component. */ export class FormatBlock extends FormatBlock_base { } /** * The props for the Undo tool component of the Editor. */ export interface UndoProps extends HistoryToolNS.UndoProps { } /** * The props for the Redo tool component of the Editor. */ export interface RedoProps extends HistoryToolNS.RedoProps { } /** * Creates the Undo tool component of the Editor. * * @param {ToolSettings} settings * @returns {React.ComponentClass<UndoProps>} - The Undo tool component of the Editor. */ export function createUndoTool(settings: EditorToolsSettings.ToolSettings): React.ComponentClass<ToolProps, React.ComponentState>; /** * Creates the Redo tool component of the Editor. * * @param {ToolSettings} settings * @returns {React.ComponentClass<RedoProps>} - The Redo tool component of the Editor. */ export function createRedoTool(settings: EditorToolsSettings.ToolSettings): React.ComponentClass<ToolProps, React.ComponentState>; const Undo_base: React.ComponentClass<ToolProps, any>; /** * The Undo tool component of the Editor. */ export class Undo extends Undo_base { } const Redo_base: React.ComponentClass<ToolProps, any>; /** * The Redo tool component of the Editor. */ export class Redo extends Redo_base { } /** * The props for the Indent tool component of the Editor. */ export interface IndentProps extends IndentToolNS.IndentProps { } /** * Creates the Indent tool component of the Editor. * * @param {IndentationSettings} settings * @returns {React.ComponentClass<IndentProps>} - The Indent tool component of the Editor. */ export function createIndentTool(settings: EditorToolsSettings.IndentationSettings): React.ComponentClass<IndentProps, React.ComponentState>; const Indent_base: React.ComponentClass<IndentProps, any>; /** * The Indent tool component. */ export class Indent extends Indent_base { } /** * The props for the InlineFormat tool component of the Editor. */ export interface InlineFormatToolProps extends InlineFormatToolNS.InlineFormatToolProps { } /** * The props for the Bold tool component of the Editor. */ export interface BoldProps extends InlineFormatToolNS.BoldProps { } /** * The props for the Italic tool component of the Editor. */ export interface ItalicProps extends InlineFormatToolNS.ItalicProps { } /** * The props for the Underline tool component of the Editor. */ export interface UnderlineProps extends InlineFormatToolNS.UnderlineProps { } /** * The props for the Strikethrough tool component of the Editor. */ export interface StrikethroughProps extends InlineFormatToolNS.StrikethroughProps { } /** * The props for the Subscript tool component of the Editor. */ export interface SubscriptProps extends InlineFormatToolNS.SubscriptProps { } /** * The props for the Superscript tool component of the Editor. */ export interface SuperscriptProps extends InlineFormatToolNS.SuperscriptProps { } /** * Creates the InlineFormat tool component of the Editor. * * @param {InlineFormatSettings} settings * @returns {React.ComponentClass<InlineFormatToolProps>} - Editor's InlineFormat tool component. */ export function createInlineFormatTool(settings: EditorToolsSettings.InlineFormatSettings): React.ComponentClass<InlineFormatToolProps, React.ComponentState>; const Bold_base: React.ComponentClass<InlineFormatToolProps, any>; /** * The Bold tool component. */ export class Bold extends Bold_base { } const Italic_base: React.ComponentClass<InlineFormatToolProps, any>; /** * The Italic tool component. */ export class Italic extends Italic_base { } const Underline_base: React.ComponentClass<InlineFormatToolProps, any>; /** * The Underline tool component. */ export class Underline extends Underline_base { } const Strikethrough_base: React.ComponentClass<InlineFormatToolProps, any>; /** * The Strikethrough tool component. */ export class Strikethrough extends Strikethrough_base { } const Subscript_base: React.ComponentClass<InlineFormatToolProps, any>; /** * The Subscript tool component. */ export class Subscript extends Subscript_base { } const Superscript_base: React.ComponentClass<InlineFormatToolProps, any>; /** * The Superscript tool component. */ export class Superscript extends Superscript_base { } /** * The props for the InsertImage tool component of the Editor. */ export interface InsertImageProps extends BasicToolProps, ToolWithDialogRenderProp, ButtonProps { } /** * Creates the InsertImage tool component of the Editor. * * @param {ImageSettings} settings * @returns {React.ComponentClass<InsertImageProps>} - The InsertImage tool component of the Editor. */ export function createInsertImageTool(settings: EditorToolsSettings.ImageSettings): React.ComponentClass<InsertImageProps>; const InsertImage_base: React.ComponentClass<InsertImageProps, any>; /** * The InsertImage tool component. */ export class InsertImage extends InsertImage_base { } /** * The props for the Link tool component of the Editor. */ export interface LinkProps extends LinkToolNS.LinkProps { } /** * Creates the Link tool component of the Editor. * * @param {LinkSettings} settings * @returns {React.ComponentClass<LinkProps>} - The Link tool component of the Editor. */ export function createLinkTool(settings: EditorToolsSettings.LinkSettings): React.ComponentClass<LinkProps>; const Link_base: React.ComponentClass<LinkProps, any>; /** * The Link tool component. */ export class Link extends Link_base { } const InsertFile_base: React.ComponentClass<LinkProps, any>; /** * The InsertFile tool component. */ export class InsertFile extends InsertFile_base { } /** * The base interface of `OrderedListProps` and `UnorderedListProps`. */ export interface ListToolProps extends ListToolNS.ListToolProps { } /** * The props for the OrderedList tool component of the Editor. */ export interface OrderedListProps extends ListToolNS.OrderedListProps { } /** * The props for the UnorderedList tool component of the Editor. */ export interface UnorderedListProps extends ListToolNS.UnorderedListProps { } /** * Creates the List tool component of the Editor. * * @param {ToolSettings} settings * @returns {React.ComponentClass<ListToolProps>} - The List tool component of the Editor. */ export function createListTool(settings: EditorToolsSettings.ListSettings): React.ComponentClass<ListToolProps, React.ComponentState>; const OrderedList_base: React.ComponentClass<ListToolProps, any>; /** * The basic OrderedList tool component. Will render a button which applies `<ol>` HTML element. */ export class OrderedList extends OrderedList_base { } const UnorderedList_base: React.ComponentClass<ListToolProps, any>; /** * The basic UnorderedList tool component. Will render a button which applies `<ul>` HTML element. */ export class UnorderedList extends UnorderedList_base { } /** * The BulletedList tool component. * Will render a SplitButton which applies `<ol>` HTML element with predefined styles - disc and square. */ export const BulletedList: (props: any) => React.JSX.Element; /** * The NumberedList tool component. * Will render a SplitButton which applies `<ul>` HTML element with predefined styles - upper-roman, lower-roman, upper-latin and lower-latin. */ export const NumberedList: (props: any) => React.JSX.Element; /** * The TableCellProperties tool component. */ export const TableCellProperties: React.FunctionComponent<TableCellPropertiesToolProps>; /** * The props for the TableCellProperties tool component of the Editor. */ export interface TableCellPropertiesProps extends TableCellPropertiesToolProps { } /** * The TableProperties tool component. */ export const TableProperties: React.FunctionComponent<TablePropertiesToolProps>; /** * The props for the TableProperties tool component of the Editor. */ export interface TablePropertiesProps extends TablePropertiesToolProps { } /** * The props for the Outdent tool component of the Editor. */ export interface OutdentProps extends IndentToolNS.IndentProps { } /** * Creates the Outdent tool component of the Editor. * * @param {IndentationSettings} settings * @returns {React.ComponentClass<OutdentProps>} - The Outdent tool component of the Editor. */ export function createOutdentTool(settings: EditorToolsSettings.IndentationSettings): React.ComponentClass<OutdentProps, React.ComponentState>; const Outdent_base: React.ComponentClass<OutdentProps, any>; /** * The Outdent tool component. */ export class Outdent extends Outdent_base { } /** * The props for the Print tool component of the Editor. */ export interface PrintProps extends PrintToolProps { } /** * The Print tool component. * Designed to work only if Editor's defaultEditMode prop is set to 'iframe'. */ export const Print: React.FunctionComponent<PrintProps>; /** * The props for the Export to PDF tool component of the Editor. */ export interface PdfProps extends PdfToolProps { } /** * The Export to PDF tool component. * * To modify the default PDF export options, see the following example: * * @example * ```jsx-no-run * import { Editor, EditorTools } from '@progress/kendo-react-editor'; * const { Bold, Italic, Pdf } = EditorTools; * * const PdfTool = (props: EditorTools.PdfProps) => ( * <Pdf * {...props} * // https://www.telerik.com/kendo-react-ui/components/pdfprocessing/api/PDFExportProps/ * savePdfOptions={{ * fileName: 'editor-export.pdf', * paperSize: 'A5', * margin: '1cm' * }} * /> * ); * * const App = () => ( * <Editor * tools={[[ Bold, Italic, PdfTool ]]} * contentStyle={{ height: 100 }} * defaultContent="<p>text</p>" * /> * ); * ``` */ export const Pdf: React.FunctionComponent<PdfProps>; /** * The props for the SelectAll tool component of the Editor. */ export interface SelectAllProps extends SelectAllToolProps { } /** * The SelectAll tool component. */ export const SelectAll: React.FunctionComponent<SelectAllProps>; /** * The props for the CleanFormatting tool component of the Editor. */ export interface CleanFormattingProps extends CleanFormattingToolProps { } /** * The CleanFormatting tool component. */ export const CleanFormatting: React.FunctionComponent<CleanFormattingProps>; /** * The props for the AddRowBefore tool component of the Editor. */ export interface AddRowBeforeProps extends TableEditNS.AddRowBeforeProps { } /** * The props for the AddRowAfter tool component of the Editor. */ export interface AddRowAfterProps extends TableEditNS.AddRowAfterProps { } /** * The props for the AddColumnBefore tool component of the Editor. */ export interface AddColumnBeforeProps extends TableEditNS.AddColumnBeforeProps { } /** * The props for the AddColumnAfter tool component of the Editor. */ export interface AddColumnAfterProps extends TableEditNS.AddColumnAfterProps { } /** * The props for the DeleteRow tool component of the Editor. */ export interface DeleteRowProps extends TableEditNS.DeleteRowProps { } /** * The props for the DeleteColumn tool component of the Editor. */ export interface DeleteColumnProps extends TableEditNS.DeleteColumnProps { } /** * The props for the DeleteTable tool component of the Editor. */ export interface DeleteTableProps extends TableEditNS.DeleteTableProps { } /** * The props for the MergeCells tool component of the Editor. */ export interface MergeCellsProps extends TableEditNS.MergeCellsProps { } /** * The props for the SplitCell tool component of the Editor. */ export interface SplitCellProps extends TableEditNS.SplitCellProps { } /** * Creates the AddRowBefore tool component of the Editor. * * @param {ToolSettings} - The settings of the AddRowBefore tool. * @returns {React.ComponentClass<AddRowBeforeProps>} - The AddRowBefore tool component of the Editor. */ export function createAddRowBeforeTool(settings: EditorToolsSettings.ToolSettings): React.ComponentClass<ToolProps, React.ComponentState>; /** * Creates the AddRowAfter tool component of the Editor. * * @param {ToolSettings} - The settings of the AddRowAfter tool. * @returns {React.ComponentClass<AddRowAfterProps>} - The AddRowAfter tool component of the Editor. */ export function createAddRowAfterTool(settings: EditorToolsSettings.ToolSettings): React.ComponentClass<ToolProps, React.ComponentState>; /** * Creates the AddColumnBefore tool component of the Editor. * * @param {ToolSettings} - The settings of the AddColumnBefore tool. * @returns {React.ComponentClass<AddColumnBeforeProps>} - The AddColumnBefore tool component of the Editor. */ export function createAddColumnBeforeTool(settings: EditorToolsSettings.ToolSettings): React.ComponentClass<ToolProps, React.ComponentState>; /** * Creates the AddColumnAfter tool component of the Editor. * * @param {ToolSettings} - The settings of the AddColumnAfter tool. * @returns {React.ComponentClass<AddColumnAfterProps>} - The AddColumnAfter tool component of the Editor. */ export function createAddColumnAfterTool(settings: EditorToolsSettings.ToolSettings): React.ComponentClass<ToolProps, React.ComponentState>; /** * Creates the DeleteRow tool component of the Editor. * * @param {ToolSettings} - The settings of the DeleteRow tool. * @returns {React.ComponentClass<DeleteRowProps>} - The DeleteRow tool component of the Editor. */ export function createDeleteRowTool(settings: EditorToolsSettings.ToolSettings): React.ComponentClass<ToolProps, React.ComponentState>; /** * Creates the DeleteColumn tool component of the Editor. * * @param {ToolSettings} - The settings of the DeleteColumn tool. * @returns {React.ComponentClass<DeleteColumnProps>} - The DeleteColumn tool component of the Editor. */ export function createDeleteColumnTool(settings: EditorToolsSettings.ToolSettings): React.ComponentClass<ToolProps, React.ComponentState>; /** * Creates the DeleteTable tool component of the Editor. * * @param {ToolSettings} - The settings of the DeleteTable tool. * @returns {React.ComponentClass<DeleteTableProps>} - The DeleteTable tool component of the Editor. */ export function createDeleteTableTool(settings: EditorToolsSettings.ToolSettings): React.ComponentClass<ToolProps, React.ComponentState>; /** * Creates the MergeCells tool component of the Editor. * * @param {ToolSettings} - The settings of the MergeCells tool * @returns {React.ComponentClass<MergeCellsProps>} - The MergeCells tool component of the Editor. */ export function createMergeCellsTool(settings: EditorToolsSettings.ToolSettings): React.ComponentClass<ToolProps, React.ComponentState>; /** * Creates the SplitCell tool component of the Editor. * * @param {ToolSettings} - The settings of the SplitCell tool. * @returns {React.ComponentClass<SplitCellProps>} - The SplitCell tool component of the Editor. */ export function createSplitCellTool(settings: EditorToolsSettings.ToolSettings): React.ComponentClass<ToolProps, React.ComponentState>; const AddRowBefore_base: React.ComponentClass<ToolProps, any>; /** * The AddRowBefore tool component. */ export class AddRowBefore extends AddRowBefore_base { } const AddRowAfter_base: React.ComponentClass<ToolProps, any>; /** * The AddRowAfter tool component. */ export class AddRowAfter extends AddRowAfter_base { } const AddColumnBefore_base: React.ComponentClass<ToolProps, any>; /** * The AddColumnBefore tool component. */ export class AddColumnBefore extends AddColumnBefore_base { } const AddColumnAfter_base: React.ComponentClass<ToolProps, any>; /** * The AddColumnAfter tool component. */ export class AddColumnAfter extends AddColumnAfter_base { } const DeleteRow_base: React.ComponentClass<ToolProps, any>; /** * The DeleteRow tool component. */ export class DeleteRow extends DeleteRow_base { } const DeleteColumn_base: React.ComponentClass<ToolProps, any>; /** * The DeleteColumn tool component. */ export class DeleteColumn extends DeleteColumn_base { } const DeleteTable_base: React.ComponentClass<ToolProps, any>; /** * The DeleteTable tool component. */ export class DeleteTable extends DeleteTable_base { } const MergeCells_base: React.ComponentClass<ToolProps, any>; /** * The MergeCells tool component. */ export class MergeCells extends MergeCells_base { } const SplitCell_base: React.ComponentClass<ToolProps, any>; /** * The SplitCell tool component. */ export class SplitCell extends SplitCell_base { } /** * The props for the Unlink tool component of the Editor. */ export interface UnlinkProps extends UnlinkToolNS.UnlinkProps { } /** * Creates the Unlink tool component of the Editor. * * @param {UnlinkSettings} settings * @returns {React.ComponentClass<UnlinkProps>} - The Unlink tool component of the Editor. */ export function createUnlinkTool(settings: EditorToolsSettings.UnlinkSettings): React.ComponentClass<UnlinkProps, React.ComponentState>; const Unlink_base: React.ComponentClass<UnlinkProps, any>; /** * The Unlink tool component. */ export class Unlink extends Unlink_base { } /** * The props for the ViewHtml tool component of the Editor. */ export interface ViewHtmlProps extends ViewHtmlToolNS.ViewHtmlProps { } /** * Creates the ViewHtml tool component of the Editor. * * @param {ViewHtmlSettings} settings * @returns {React.ComponentClass<ViewHtmlProps>} - The ViewHtml tool component of the Editor. */ export function createViewHtmlTool(settings: EditorToolsSettings.ViewHtmlSettings): React.ComponentClass<ViewHtmlProps>; const ViewHtml_base: React.ComponentClass<ViewHtmlProps, any>; /** * The ViewHtml tool component. */ export class ViewHtml extends ViewHtml_base { } /** * The FindAndReplace tool component. */ export class FindAndReplace extends FindAndReplaceTool { } /** * The props for the FindAndReplace tool component of the Editor. */ export interface FindAndReplaceProps extends FindAndReplaceToolProps { } export {}; }