4144e9ffd0
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
326 lines
8.8 KiB
TypeScript
326 lines
8.8 KiB
TypeScript
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;
|
|
}
|
|
}
|