import { FireProps, TestEditorView } from 'jest-prosemirror'; import { ActiveFromExtensions, AnyExtension, BuiltinPreset, ChainedFromExtensions, CommandFunctionProps, CommandsFromExtensions, EditorSchema, EditorState, HelpersFromExtensions, PrimitiveSelection, ProsemirrorNode, RemirrorManager, Transaction } from '@remirror/core'; import type { CorePreset } from '@remirror/preset-core'; import type { MarkWithAttributes, MarkWithoutAttributes, NodeWithAttributes, NodeWithoutAttributes, RenderEditorProps, TaggedProsemirrorNode, Tags } from './jest-remirror-types'; /** * This is the renderEditor test helper. * * @remarks * * This can be used to render your editor to the dom with all the desired * extensions and it returns chainable methods for inserting text and * dispatching commands. * * By default it already has the core preset applied. */ export declare function renderEditor(extensions: Extension[] | (() => Extension[]), { props, autoClean, ...options }?: RenderEditorProps): RemirrorTestChain; /** * This creates a chainable test helper for testing your remirror presets, * extensions and commands. * * @typeParam Extension - All the extensions being used within this editor */ export declare class RemirrorTestChain { #private; /** * A static method for creating the test helpers when testing your remirror * models. */ static create(manager: RemirrorManager): RemirrorTestChain; /** * The nodes available for building the prosemirror document. */ readonly nodes: Omit, 'text'>; /** * The marks available for building up the prosemirror document. */ readonly marks: MarkWithoutAttributes; /** * This is similar to the `node` except that each function returned here is * able to receive custom attributes. * * ```ts * import { HeadingExtension } from 'remirror/extensions'; * * const editor = renderEditor([new HeadingExtension()]) * const { heading } = editor.attributeNodes; * * heading({ level: 4, id: '1223' })('My custom heading'); * ``` * * This attaches the attributes `level` and `id` to the `heading` node and the * content `My custom heading` and would be rendered to HTML as: * ```html *

My custom heading

* ``` * * Use this when testing nodes that can take custom attributes. */ readonly attributeNodes: Omit, 'text'>; /** * This is very similar to the `attributeNodes` except for marks which can * need to provide custom attributes. * * Use this when testing marks that can take custom attributes. */ readonly attributeMarks: MarkWithAttributes; /** * Provide access to the editor manager. */ get manager(): RemirrorManager; /** * The editor view. */ get view(): TestEditorView; /** * The editor state. */ get state(): EditorState; /** * The editor state. */ get tr(): Transaction; /** * The editor schema. */ get schema(): EditorSchema; /** * The root node for the editor. */ get doc(): ProsemirrorNode; /** * The commands available in the editor. When updating the content of the * TestEditor make sure not to use a stale copy of the actions otherwise it * will throw errors due to using an outdated state. */ get commands(): CommandsFromExtensions; /** * The chainable commands available in the editor. When updating the content of the * TestEditor make sure not to use a stale copy of the actions otherwise it * will throw errors due to using an outdated state. */ get chain(): ChainedFromExtensions; /** * Access to which nodes and marks are active under the current selection. */ get active(): ActiveFromExtensions; /** * The helpers available in the editor. When updating the content of the * TestEditor make sure not to use a stale copy of the helpers object * otherwise it will throw errors due to using an outdated state. */ get helpers(): HelpersFromExtensions; /** * The start of the current selection */ get from(): number; /** * The end of the current selection. For a cursor selection this will be the * same as the start. */ get to(): number; /** * The content to write to the clipboard if copy the current selection. */ get copied(): { text: string; html: string; }; /** * All custom tags that have been added *not including* the following * - `` * - `` * - `` * - `` * - `` * - `` * * Which are all part of the formal cursor and selection API. */ get tags(): Tags; /** * The dom node holding the view. */ get dom(): HTMLElement; /** * The innerHTML for the editor. */ get innerHTML(): string; private constructor(); /** * Replace the manager with the newly cloned manager when cloned. */ private setupCloneListener; /** * Create the node and mark document builders. */ private createDocBuilders; /** * Add content to the editor. * * If content already exists it will be overwritten. */ readonly add: (taggedDocument: TaggedProsemirrorNode) => this; /** * Alias for add. */ readonly overwrite: (taggedDocument: TaggedProsemirrorNode) => this; /** * Updates the tags. */ readonly update: (tags?: Tags) => this; /** * Selects the text between the provided start and end. */ readonly selectText: (selection: PrimitiveSelection) => this; /** * Allows for the chaining of calls and is useful for running tests after * actions. * * You shouldn't use it to call any mutative functions that would change the * editor state. * * ```ts * const create = () => renderEditor({ plainNodes: [], others: [new EmojiExtension()] }); * const { * nodes: { p, doc }, * add, * } = create(); * * add(doc(p(''))).insertText(':-)') * .callback(content => { * expect(content.state.doc).toEqualRemirrorDocument(doc(p('πŸ˜ƒ'))); * }) * .insertText(' awesome') * .callback(content => { * expect(content.state.doc).toEqualRemirrorDocument(doc(p('πŸ˜ƒ awesome'))); * }); * ``` */ readonly callback: (fn: (content: Pick) => void) => this; /** * Runs a keyboard shortcut. e.g. `Mod-X` * * @param text */ readonly shortcut: (text: string) => this; /** * A simplistic implementation of pasting content into the editor. Underneath * it calls the paste handler `transformPaste` and that is all. * * @param content - The text or node to paste into the document at the current * β€”ion. */ readonly paste: (content: TaggedProsemirrorNode | string) => this; /** * Presses a key on the keyboard. e.g. `Mod-X` * * @param key - the key to press (or string representing a key) */ readonly press: (char: string, times?: number) => this; /** * Simulates a backspace keypress and deletes text backwards. */ readonly backspace: (times?: number) => this; /** * Simulates a forward deletion. */ readonly forwardDelete: (times?: number) => this; /** * Takes any command as an input and dispatches it within the document * context. * * @param command - the command function to run with the current state and * view */ readonly dispatchCommand: (command: (props: Required) => any) => this; /** * Fires a custom event at the specified dom node. e.g. `click` * * @param shortcut - the shortcut to type */ readonly fire: (parameters: FireProps) => this; /** * Set selection in the document to a certain position */ readonly jumpTo: (pos: 'start' | 'end' | number, endPos?: number) => this; /** * A function which replaces the current selection with the new content. * * This should be used to add new content to the dom. */ readonly replace: (...replacement: string[] | TaggedProsemirrorNode[]) => this; /** * Insert text at the current starting point for the cursor. Text will be * typed out with keys each firing a keyboard event. * * ! This doesn't currently support the use of tags and cursors. * * ! Adding multiple strings which create nodes creates an out of * position error */ insertText: (text: string) => this; /** * Logs the view to the dom for help debugging the html in your tests. */ readonly debug: (element?: HTMLElement) => this; /** * Cleanup the element from the dom. Use this if you decide against automatic * cleanup after tests. */ readonly cleanup: () => void; }