import type { AjaxOptions } from "./types/index"; import type { IDialogOptions } from "./types/index"; import type { IFileBrowserOptions } from "./types/index"; import type { ImageEditorOptions } from "./types/index"; import type { IUploaderOptions } from "./types/index"; import type { IUploader } from "./types/index"; import type { HTMLTagNames } from "./types/index"; import type { AiAssistantSettings } from "./plugins/ai-assistant/interface"; import type { IDictionary } from "./types/index"; import type { Nullable } from "./types/index"; import type { ImagePropertiesOptions } from "./plugins/image-properties/interface"; import type { IControlType } from "./types/index"; import type { IJodit } from "./types/index"; import type { formTemplate } from "./plugins/link/template"; import type { IUIForm } from "./types/index"; import type { IUIOption } from "./types/index"; import type { ButtonsOption } from "./types/index"; import type { InsertMode } from "./types/index"; import type { FuzzySearch } from "./types/index"; import type { ISourceEditor } from "./types/index"; import type { ISpeechRecognizeConstructor } from "./plugins/speech-recognize/interface"; import type { Attributes } from "./types/index"; import type { Controls } from "./types/index"; import type { IExtraPlugin } from "./types/index"; import type { IUIButtonState } from "./types/index"; import type { IViewOptions } from "./types/index"; import type { NodeFunction } from "./types/index"; /** * Default Editor's Configuration. * * This class holds all default option values for the Jodit editor. * It uses a **private constructor** and a **lazy singleton** pattern — the single instance * is created on the first access to {@link Config.defaultOptions} (also available as `Jodit.defaultOptions`). * * ## How options are resolved * * When you create an editor with `Jodit.make('#editor', userOptions)`, the library * calls {@link ConfigProto}(userOptions, Config.defaultOptions). `ConfigProto` does * **not** deep-clone the defaults. Instead it creates a new object whose JavaScript * prototype is `Config.defaultOptions`: * * ``` * userOptions ──[[Prototype]]──► Config.defaultOptions * ``` * * Any key present in `userOptions` shadows the default; * any key **not** present falls through to `Config.defaultOptions` via the prototype chain. * Nested plain objects are recursively prototyped in the same way, so partial overrides * of nested options work automatically: * * ```js * // Only override `dialogWidth`; all other `image.*` defaults are still available * Jodit.make('#editor', { * image: { dialogWidth: 500 } * }); * ``` * * ## How plugins extend the config * * Each plugin adds its own defaults by assigning to `Config.prototype` and augmenting * the TypeScript type with `declare module`: * * ```ts * // 1. Type augmentation (compile-time) * declare module 'jodit/config' { * interface Config { * toolbarSticky: boolean; * } * } * * // 2. Runtime default * Config.prototype.toolbarSticky = true; * ``` * * Because the constructor runs `Object.assign(this, ConfigPrototype)` (where * `ConfigPrototype` is captured as `Config.prototype` after the class definition), * all prototype-level values — including those added by plugins — are materialized * as own properties on the singleton. This means `Config.defaultOptions` always * contains every registered option as an own, enumerable property. * * ## Changing global defaults * * You can modify `Jodit.defaultOptions` **before** creating editors to change * defaults globally: * * ```js * Jodit.defaultOptions.language = 'de'; * Jodit.defaultOptions.theme = 'dark'; * * // Both editors inherit the new defaults * Jodit.make('#editor1'); * Jodit.make('#editor2'); * ``` * * ## `Jodit.atom` — preventing deep merge * * By default, `ConfigProto` deep-merges nested plain objects and arrays. * Wrap a value with `Jodit.atom(value)` to make it **atomic** — it will completely * replace the default instead of being merged: * * ```js * Jodit.make('#editor', { * controls: { * fontsize: { * // Replace the entire list rather than merging with the default one * list: Jodit.atom([8, 9, 10]) * } * } * }); * ``` * * `Jodit.atom` calls {@link markAsAtomic}, which sets a non-enumerable * `isAtom` flag on the object. `ConfigProto` checks this flag and skips * recursive merging when it is present. Note: top-level arrays (depth 0) * are always treated as atomic — they replace rather than merge. * * @see {@link ConfigProto} for the full merge algorithm * @see {@link markAsAtomic} / {@link isAtom} for the atom marker implementation */ declare class Config implements IViewOptions { private constructor(); /** * When enabled, the editor caches the results of expensive computations (e.g. toolbar rebuilds) * to improve performance. Disable for debugging or when options change frequently at runtime. */ cache: boolean; /** * Timeout of all asynchronous methods */ defaultTimeout: number; /** * Prefix used for CSS class names and local-storage keys to avoid collisions * when multiple editor instances or applications share the same page. */ namespace: string; /** * Editor loads completely without plugins. Useful when debugging your own plugin. */ safeMode: boolean; /** * Editor's width * * ```javascript * Jodit.make('.editor', { * width: '100%', * }) * ``` * ```javascript * Jodit.make('.editor', { * width: 600, // equivalent for '600px' * }) * ``` * ```javascript * Jodit.make('.editor', { * width: 'auto', // autosize * }) * ``` */ width: number | string; /** * Editor's height * * ```javascript * Jodit.make('.editor', { * height: '100%', * }) * ``` * ```javascript * Jodit.make('.editor', { * height: 600, // equivalent for '600px' * }) * ``` * ```javascript * Jodit.make('.editor', { * height: 'auto', // default - autosize * }) * ``` */ height: number | string; /** * List of plugins that will be initialized in safe mode. * * ```js * Jodit.make('#editor', { * safeMode: true, * safePluginsList: ['about'], * extraPlugins: ['yourPluginDev'] * }); * ``` */ safePluginsList: string[]; commandToHotkeys: IDictionary; /** * Reserved for the paid version of the editor */ license: string; /** * The name of the preset that will be used to initialize the editor. * The list of available presets can be found here Jodit.defaultOptions.presets * ```javascript * Jodit.make('.editor', { * preset: 'inline' * }); * ``` */ preset: string; /** * Dictionary of named configuration presets. Each key is a preset name and the value * is a partial options object that will be merged into the editor config when * {@link Config.preset} matches the key. * * ```javascript * // Use a built-in preset * Jodit.make('#editor', { * preset: 'inline' * }); * ``` * * ```javascript * // Define and use a custom preset * Jodit.defaultOptions.presets.myCompact = { * toolbarButtonSize: 'small', * showCharsCounter: false, * showWordsCounter: false, * showXPathInStatusbar: false * }; * * Jodit.make('#editor', { * preset: 'myCompact' * }); * ``` */ presets: IDictionary; /** * The Document object the editor operates within. Defaults to the current `document`. * Override when the editor is created inside an iframe or a different browsing context. */ ownerDocument: Document; /** * Allows you to specify the window in which the editor will be created. Default - window * This is necessary if you are creating the editor inside an iframe but the code is running in the parent window */ ownerWindow: Window; /** * Shadow root if Jodit was created in it * * ```html *
* ``` * * ```js * const app = document.getElementById('editor'); * app.attachShadow({ mode: 'open' }); * const root = app.shadowRoot; * * root.innerHTML = ` * *

Jodit example in Shadow DOM

*
* `; * * const editor = Jodit.make(root.getElementById('edit'), { * globalFullSize: false, * shadowRoot: root * }); * editor.value = '

start

'; * ``` */ shadowRoot: Nullable; /** * Base CSS `z-index` for the editor UI (toolbar, popups, dialogs). * Set to a higher value when other page elements overlap the editor. * `0` means no explicit z-index is applied. */ zIndex: number; /** * Change the read-only state of the editor */ readonly: boolean; /** * Change the disabled state of the editor */ disabled: boolean; /** * In readOnly mode, some buttons can still be useful, for example, the button to view source code or print */ activeButtonsInReadOnly: string[]; /** * When the editor is in read-only mode, some commands can still be executed: * ```javascript * const editor = Jodit.make('.editor', { * allowCommandsInReadOnly: ['selectall', 'preview', 'print'] * readonly: true * }); * editor.execCommand('selectall');// will be selected all content * editor.execCommand('delete');// but content will not be deleted * ``` */ allowCommandsInReadOnly: string[]; /** * Size of icons in the toolbar (can be "small", "middle", "large") * * ```javascript * const editor = Jodit.make(".dark_editor", { * toolbarButtonSize: "small" * }); * ``` */ toolbarButtonSize: IUIButtonState['size']; /** * Allow navigation in the toolbar of the editor by Tab key */ allowTabNavigation: boolean; /** * When enabled, the editor renders without its own container chrome (toolbar, borders, statusbar). * The editable area becomes the element itself. Typically combined with * `toolbarInline: true` so a floating toolbar appears on selection. */ inline: boolean; /** * Theme (can be "dark") * * ```javascript * const editor = Jodit.make(".dark_editor", { * theme: "dark" * }); * ``` */ theme: string; /** * if set true, then the current mode is saved in a cookie, and is restored after a reload of the page */ saveModeInStorage: boolean; /** * Class name that can be appended to the editable area * * @see {@link Config.iframeCSSLinks} * @see {@link Config.iframeStyle} * * ```javascript * Jodit.make('#editor', { * editorClassName: 'some_my_class' * }); * ``` * ```html * * ``` */ editorClassName: false | string; /** * Class name that can be appended to the main editor container * * ```javascript * const jodit = Jodit.make('#editor', { * className: 'some_my_class' * }); * * console.log(jodit.container.classList.contains('some_my_class')); // true * ``` * ```html * * ``` */ className: false | string; /** * The internal styles of the editable area. They are intended to change * not the appearance of the editor, but to change the appearance of the content. * * ```javascript * Jodit.make('#editor', { * style: { * font: '12px Arial', * color: '#0c0c0c' * } * }); * ``` */ style: false | IDictionary; /** * Inline CSS styles applied to the outer editor container element. * Use this to style the editor wrapper (borders, background, etc.) without affecting content. * * ```javascript * Jodit.make('#editor', { * containerStyle: { * border: '1px solid #ccc', * background: '#f9f9f9' * } * }); * ``` */ containerStyle: false | IDictionary; /** * Dictionary of variable values in css, a complete list can be found here * https://github.com/xdan/jodit/blob/main/src/styles/variables.less#L25 * * ```js * const editor = Jodit.make('#editor', { * styleValues: { * 'color-text': 'red', * colorBorder: 'black', * 'color-panel': 'blue' * } * }); * ``` */ styleValues: IDictionary; /** * When enabled, the editor dispatches a native `change` event on the original * ` * const editor = Jodit.make('#editor', { * useInputsPlaceholder: true * }); * ``` */ useInputsPlaceholder: boolean; /** * Default placeholder * * ```javascript * const editor = Jodit.make('#editor', { * placeholder: 'start typing text ...' * }); * ``` */ placeholder: string; } interface Config { /** * Hide the link to the Jodit site at the bottom of the editor */ hidePoweredByJodit: boolean; } interface Config { /** * Allow users to resize table cells by dragging the cell borders */ tableAllowCellResize: boolean; } interface Config { /** * Allow the user to resize the editor horizontally by dragging the resize handle */ allowResizeX: boolean; /** * Allow the user to resize the editor vertically by dragging the resize handle */ allowResizeY: boolean; } interface Config { /** * Set of HTML tag names whose elements can be resized by the user via drag handles (e.g. images, iframes, tables) */ allowResizeTags: Set; resizer: { /** * Show size */ showSize: boolean; hideSizeTimeout: number; /** * Save width and height proportions when resizing * ```js * Jodit.make('#editor', { * allowResizeTags: ['img', 'iframe', 'table', 'jodit'], * resizer: { * useAspectRatio: false, // don't save, * useAspectRatio: ['img'], // save only for images (default value) * useAspectRatio: true // save for all * } * }); * ``` */ useAspectRatio: boolean | Set; /** * When resizing images, change not the styles but the width and height attributes */ forImageChangeAttributes: boolean; /** * The minimum width for the editable element */ min_width: number; /** * The minimum height for the item being edited */ min_height: number; }; } interface Config { /** * Enable custom search plugin * ![search](https://user-images.githubusercontent.com/794318/34545433-cd0a9220-f10e-11e7-8d26-7e22f66e266d.gif) */ useSearch: boolean; search: { lazyIdleTimeout: number; /** * Use custom highlight API https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API * or use default implementation (wrap text in span and attribute jd-tmp-selection) */ useCustomHighlightAPI: boolean; /** * Function to search for a string within a substring. The default implementation is [[fuzzySearchIndex]] * But you can write your own. It must implement the [[FuzzySearch]] interface. * * ```ts * Jodit.make('#editor', { * search: { * fuzzySearch: (needle, haystack, offset) => { * return [haystack.toLowerCase().indexOf(needle.toLowerCase(), offset), needle.length]; * } * } * }) * ``` */ fuzzySearch?: FuzzySearch; }; } interface Config { select: { /** * When the user selects the elements of the list - from the beginning to * the end from the inside - when copying, we change the selection * to cover the entire selected container * * `
  • |test|
` will be `|
  • test
|` * `
  • |test|
  • |test
` will be `
    |
  • test
  • |test
` */ normalizeSelectionBeforeCutAndCopy: boolean; /** * Normalize selection after triple click * * `
  • |test
  • |pop
` will be `
  • |test|
  • pop|` */ normalizeTripleClick: boolean; }; } interface Config { /** * Allow users to select multiple table cells by clicking and dragging */ tableAllowCellSelection: boolean; } interface Config { saveHeightInStorage: boolean; minWidth: number | string; minHeight: number | string; maxWidth: number | string; maxHeight: number | string; } interface Config { /** * Which source-code editor to use: `'area'` for a plain textarea, `'ace'` to load the Ace editor, * or a factory function that returns a custom source editor instance. */ sourceEditor: 'area' | 'ace' | ((jodit: IJodit) => ISourceEditor); /** * Options for [ace](https://ace.c9.io/#config) editor * * ```js * Jodit.make('#editor', { * showGutter: true, * theme: 'ace/theme/idle_fingers', * mode: 'ace/mode/html', * wrap: true, * highlightActiveLine: true * }) * ``` */ sourceEditorNativeOptions: { showGutter: boolean; theme: string; mode: string; wrap: string | boolean | number; highlightActiveLine: boolean; }; /** * Beautify HTML then it possible */ beautifyHTML: boolean; /** * CDN URLs for HTML Beautifier */ beautifyHTMLCDNUrlsJS: string[]; /** * CDN URLs for ACE editor */ sourceEditorCDNUrlsJS: string[]; } interface Config { speechRecognize: { readonly api: ISpeechRecognizeConstructor | null; /** * Returns and sets the language of the current SpeechRecognition. * If not specified, this defaults to the HTML lang attribute value, or * the user agent's language setting if that isn't set either. * @see https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/lang */ readonly lang?: string; /** * Controls whether continuous results are returned for each recognition, * or only a single result. * @see https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/continuous */ readonly continuous: boolean; /** * Controls whether interim results should be returned (true) or not (false.) * Interim results are results that are not yet final (e.g. the isFinal property is false.) * @see https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/interimResults */ readonly interimResults: boolean; /** * On recognition error - make an error sound */ readonly sound: boolean; /** * You can specify any commands in your language by listing them with the `|` sign. * In the value, write down any commands for * [execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand#parameters) * and value (separated by ::) * You can also use [custom Jodit commands](#need-article) * For example * ```js * Jodit.make('#editor', { * speechRecognize: { * commands: { * 'remove line|remove paragraph': 'backspaceSentenceButton', * 'start bold': 'bold', * 'insert table|create table': 'insertHTML::
    test
    ', * } * } * }); * ``` */ readonly commands: IDictionary; }; } interface Config { /** * Options specifies whether the editor is to have its spelling and grammar checked or not * @see http://www.w3schools.com/tags/att_global_spellcheck.asp */ spellcheck: boolean; } interface Config { /** * Display a character counter in the statusbar */ showCharsCounter: boolean; /** * When true, count characters from the raw HTML source instead of visible text only */ countHTMLChars: boolean; /** * When true, include whitespace characters in the character count */ countTextSpaces: boolean; /** * Display a word counter in the statusbar */ showWordsCounter: boolean; } interface Config { /** * Keep the toolbar visible at the top of the viewport when scrolling past the editor * * ```javascript * var editor = Jodit.make('#someid', { * toolbarSticky: false * }) * ``` */ toolbarSticky: boolean; /** * Disable sticky toolbar on mobile devices to save screen space */ toolbarDisableStickyForMobile: boolean; /** * For example, in Joomla, the top menu bar closes Jodit toolbar when scrolling. Therefore, it is necessary to * move the toolbar Jodit by this amount [more](https://xdsoft.net/jodit/docs/#2.5.57) * * ```javascript * var editor = Jodit.make('#someid', { * toolbarStickyOffset: 100 * }) * ``` */ toolbarStickyOffset: number; } interface Config { /** * Array of HTML entities or characters displayed in the special-characters picker */ specialCharacters: string[]; /** * When true, show the special-characters picker as a toolbar popup instead of a modal dialog */ usePopupForSpecialCharacters: boolean; } interface Config { tab: { /** * Pressing Tab inside LI will add an internal list */ tabInsideLiInsertNewList: boolean; }; } interface Config { /** * Options for table insertion and behavior. */ table: { splitBlockOnInsertTable: boolean; selectionCellStyle: string; useExtraClassesOptions: boolean; }; } interface Config { video: { /** * Custom function for parsing video URL to embed code * ```javascript * Jodit.make('#editor', { * video: { * // Defaul behavior * parseUrlToVideoEmbed: (url, size) => Jodit.modules.Helpers.convertMediaUrlToVideoEmbed(url, size) * } * }); * ``` */ parseUrlToVideoEmbed?: (url: string, { width, height }?: { width?: number; height?: number; }) => string; /** * Default width for video iframe. Default: 400 */ defaultWidth?: number; /** * Default height for video iframe. Default: 345 */ defaultHeight?: number; }; } interface Config { wrapNodes: { /** * List of tags that should not be wrapped * Default: `new Set(['hr', 'style', 'br'])` */ exclude: Set; /** * If the editor is empty, then insert an empty paragraph into it * ```javascript * Jodit.make('#editor', { * wrapNodes: { * emptyBlockAfterInit: true * } * }); * ``` * Default: `true` */ emptyBlockAfterInit: boolean; }; } interface Config { /** * Show the element breadcrumb path (e.g. `body > p > strong`) in the statusbar */ showXPathInStatusbar: boolean; }