shims-tiptap.d.ts

declare module 'tiptap' {
  import {
    MarkSpec,
    MarkType,
    Node as ProsemirrorNode,
    NodeSpec,
    NodeType,
    ParseOptions,
    Schema
  } from "prosemirror-model";
  import {EditorState, Plugin, Transaction} from "prosemirror-state";
  import {Command, CommandFunction} from "tiptap-commands";
  import {EditorProps, EditorView} from "prosemirror-view";
  import {VueConstructor} from "vue";

  export const EditorContent: VueConstructor;
  export const EditorMenuBubble: VueConstructor;
  export const EditorMenuBar: VueConstructor;
  export type ExtensionOption = Extension | Node | Mark;

// there are some props available
// `node` is a Prosemirror Node Object
// `updateAttrs` is a function to update attributes defined in `schema`
// `view` is the ProseMirror view instance
// `options` is an array of your extension options
// `selected`
  export interface NodeView {
    /** A Prosemirror Node Object */
    node?: ProsemirrorNode;
    /** A function to update attributes defined in `schema` */
    updateAttrs?: (attrs: { [key: string]: any }) => any;
    /** The ProseMirror view instance */
    view?: EditorView;
    /** An array of your extension options */
    options?: { [key: string]: any };
    /** Whether the node view is selected */
    selected?: boolean;
  }

  export type CommandGetter =
    ({ [key: string]: (() => Command) | Command })
    | (() => Command)
    | Command
    | (() => Command)[];

  export interface EditorUpdateEvent {
    state: EditorState;
    getHTML: () => string;
    getJSON: () => object;
    transaction: Transaction;
  }

  export interface EditorOptions {
    editorProps?: EditorProps,
    /** defaults to true */
    editable?: boolean,
    /** defaults to false */
    autoFocus?: boolean,
    extensions?: ExtensionOption[],
    content?: Object | string,
    emptyDocument?: {
      type: 'doc',
      content: [{
        type: 'paragraph',
      }],
    },
    /** defaults to false */
    useBuiltInExtensions?: boolean,
    /** defaults to false */
    disableInputRules?: boolean,
    /** defaults to false */
    disablePasteRules?: boolean,
    dropCursor?: {},
    parseOptions?: ParseOptions,
    /** defaults to true */
    injectCSS?: boolean,
    onInit?: ({view, state}: { view: EditorView, state: EditorState }) => void,
    onTransaction?: (event: EditorUpdateEvent) => void,
    onUpdate?: (event: EditorUpdateEvent) => void,
    onFocus?: ({event, state, view}: { event: FocusEvent, state: EditorState, view: EditorView }) => void,
    onBlur?: ({event, state, view}: { event: FocusEvent, state: EditorState, view: EditorView }) => void,
    onPaste?: (...args:any) => void,
    onDrop?: (...args:any) => void,
  }

  export class Editor {
    commands: { [key: string]: Command };
    defaultOptions: { [key: string]: any };
    element: Element;
    extensions: Extension[];
    inputRules: any[];
    keymaps: any[];
    marks: Mark[];
    nodes: Node[];
    pasteRules: any[];
    plugins: Plugin[];
    schema: Schema;
    state: EditorState;
    view: EditorView;
    activeMarks: { [markName: string]: () => boolean };
    activeNodes: { [nodeName: string]: () => boolean };
    activeMarkAttrs: { [markName: string]: { [attr: string]: any } };


    /**
     * Creates an [Editor]
     * @param options - An object of Editor options.
     */
    constructor(options?: EditorOptions);

    /**
     * Replace the current content. You can pass an HTML string or a JSON document that matches the editor's schema.
     * @param content Defaults to {}.
     * @param emitUpdate Defaults to false.
     */
    setContent(content?: string | object, emitUpdate?: boolean):void;

    /**
     * Clears the current editor content.
     *
     * @param emitUpdate Whether or not the change should trigger the onUpdate callback.
     */
    clearContent(emitUpdate?: boolean):void;

    /**
     * Overwrites the current editor options.
     * @param options Options an object of Editor options
     */
    setOptions(options: EditorOptions):void;

    /**
     * Register a ProseMirror plugin.
     * @param plugin
     */
    registerPlugin(plugin: Plugin):void;

    /** Get the current content as JSON. */
    getJSON(): {}

    /** Get the current content as HTML. */
    getHTML(): string;

    /** Focus the editor */
    focus():void;

    /** Removes the focus from the editor. */
    blur():void;

    /** Destroy the editor and free all Prosemirror-related objects from memory.
     * You should always call this method on beforeDestroy() lifecycle hook of the Vue component wrapping the editor.
     */
    destroy():void;

    on(event: string, callbackFn: (params: any) => void):void;

    off(event: string, callbackFn: (params: any) => void):void;

    getMarkAttrs(markName: string): { [attributeName: string]: any };
  }

  export class Extension<Options = any> {
    /** Define a name for your extension */
    name?: string | null;
    /** Define some default options.The options are available as this.$options. */
    defaultOptions?: Options;
    /** Define a list of Prosemirror plugins. */
    plugins?: Plugin[];
    /** Called when options of extension are changed via editor.extensions.options */
    update?: (view: EditorView) => any;
    /** Options for that are either passed in from the extension constructor or set by defaultOptions() */
    options?: Options;

    constructor(options?: Options);

    /** Define some keybindings. */
    keys?({schema}: { schema: Schema | NodeSpec | MarkSpec }): { [keyCombo: string]: CommandFunction };

    /** Define commands. */
    commands?({schema, attrs}: { schema: Schema | NodeSpec | MarkSpec, attrs: { [key: string]: string } }): CommandGetter;

    inputRules?({schema}: { schema: Schema }): any[];

    pasteRules?({schema}: { schema: Schema }): Plugin[];
  }

  export class Node<V extends NodeView = any> extends Extension {
    schema?: NodeSpec;
    /** Reference to a view component constructor
     *  See https://stackoverflow.com/questions/38311672/generic-and-typeof-t-in-the-parameters
     */
    view?: { new(): V };

    commands?({type, schema, attrs}: { type: NodeType, schema: NodeSpec, attrs: { [key: string]: string } }): CommandGetter;

    keys?({type, schema}: { type: NodeType, schema: NodeSpec }): { [keyCombo: string]: CommandFunction };

    inputRules?({type, schema}: { type: NodeType, schema: Schema }): any[];

    pasteRules?({type, schema}: { type: NodeType, schema: Schema }): Plugin[];
  }

  export class Mark<V extends NodeView = any> extends Extension {
    schema?: MarkSpec;
    /** Reference to a view component constructor
     *  See https://stackoverflow.com/questions/38311672/generic-and-typeof-t-in-the-parameters
     */
    view?: { new(): V };

    commands?({type, schema, attrs}: { type: MarkType, schema: MarkSpec, attrs: { [key: string]: string } }): CommandGetter;

    keys?({type, schema}: { type: MarkType, schema: MarkSpec }): { [keyCombo: string]: CommandFunction };

    inputRules?({type, schema}: { type: MarkType, schema: Schema }): any[];

    pasteRules?({type, schema}: { type: MarkType, schema: Schema }): Plugin[];
  }

  export class Text extends Node {
  }

  export class Paragraph extends Node {
  }

  export class Doc extends Node {
  }

  /** A set of commands registered to the editor. */
  export interface EditorCommandSet {
    [key: string]: Command;
  }

  /**
   * The properties passed into <editor-menu-bar /> component
   */
  export interface MenuData {
    /** Whether the editor has focus. */
    focused: boolean;
    /** Function to focus the editor. */
    focus: () => void;
    /** A set of commands registered. */
    commands: EditorCommandSet;
    /** Check whether a node or mark is currently active. */
    isActive: IsActiveChecker;
    /** A function to get all mark attributes of the current selection.  */
    getMarkAttrs: (markName: string) => { [attributeName: string]: any };
  }

  export interface FloatingMenuData extends MenuData {
    /** An object for positioning the menu. */
    menu: MenuDisplayData;
  }

  /**
   * A data object passed to a menu bubble to help it determine its position
   * and visibility.
   */
  export interface MenuDisplayData {
    /** Left position of the cursor. */
    left: number;
    /** Bottom position of the cursor. */
    bottom: number;
    /** Whether or not there is an active selection. */
    isActive: boolean;
  }

  /**
   * A map containing functions to check if a node/mark is currently selected.
   * The name of the node/mark is used as the key.
   */
  export interface IsActiveChecker {
    [name: string]: () => boolean
  }
}

For others finding this gist, you also need to install some prosemirror types:

 yarn add @types/prosemirror-model -D 
 yarn add @types/prosemirror-state -D  
 yarn add @types/prosemirror-inputrules -D