CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tiptap--vue-3

Vue 3 components and composables for building rich text editors with tiptap

Pending
Overview
Eval results
Files

core-editor-api.mddocs/

Core Editor API

Complete tiptap core functionality re-exported by @tiptap/vue-3, providing the full editor API for content manipulation, state management, and extension development.

Capabilities

Extension System

Base classes for creating custom extensions, nodes, and marks.

/**
 * Base class for creating extensions
 */
class Extension<Options = any, Storage = any> {
  constructor(options?: Partial<Options>);
  static create<O = any, S = any>(config?: ExtensionConfig<O, S>): Extension<O, S>;
  configure(options?: Partial<Options>): Extension<Options, Storage>;
}

/**
 * Base class for creating node extensions
 */
class Node<Options = any, Storage = any> extends Extension<Options, Storage> {
  static create<O = any, S = any>(config?: NodeConfig<O, S>): Node<O, S>;
}

/**
 * Base class for creating mark extensions
 */
class Mark<Options = any, Storage = any> extends Extension<Options, Storage> {
  static create<O = any, S = any>(config?: MarkConfig<O, S>): Mark<O, S>;
}

interface ExtensionConfig<Options = any, Storage = any> {
  name: string;
  priority?: number;
  defaultOptions?: Options;
  addOptions?: () => Options;
  addStorage?: () => Storage;
  addCommands?: () => Commands;
  addKeyboardShortcuts?: () => Record<string, Command>;
  addInputRules?: () => InputRule[];
  addPasteRules?: () => PasteRule[];
  addGlobalAttributes?: () => GlobalAttributes;
  onCreate?: (this: { editor: Editor; options: Options }) => void;
  onUpdate?: (this: { editor: Editor; options: Options }) => void;
  onDestroy?: (this: { editor: Editor; options: Options }) => void;
}

Commands API

Comprehensive command system for manipulating editor content and state.

// Content manipulation commands
function insertContent(content: Content): Command;
function insertContentAt(position: number | Range, content: Content): Command;
function setContent(content: Content, emitUpdate?: boolean): Command;
function clearContent(emitUpdate?: boolean): Command;

// Selection commands
function blur(): Command;
function focus(position?: FocusPosition): Command;
function selectAll(): Command;
function selectParentNode(): Command;
function selectTextblockStart(): Command;
function selectTextblockEnd(): Command;
function setTextSelection(position: number | { from: number; to?: number }): Command;

// Formatting commands
function toggleMark(typeOrName: string | MarkType, attributes?: Record<string, any>): Command;
function setMark(typeOrName: string | MarkType, attributes?: Record<string, any>): Command;
function unsetMark(typeOrName: string | MarkType): Command;
function extendMarkRange(typeOrName: string | MarkType): Command;

function toggleNode(typeOrName: string | NodeType, toggleTypeOrName?: string | NodeType, attributes?: Record<string, any>): Command;
function setNode(typeOrName: string | NodeType, attributes?: Record<string, any>): Command;
function replaceRange(range: Range, typeOrName: string | NodeType, attributes?: Record<string, any>): Command;

// List and wrapping commands
function toggleWrap(typeOrName: string | NodeType, attributes?: Record<string, any>): Command;
function wrapIn(typeOrName: string | NodeType, attributes?: Record<string, any>): Command;
function lift(typeOrName?: string | NodeType): Command;
function liftEmptyBlock(): Command;
function liftListItem(typeOrName: string | NodeType): Command;

// Structure commands
function joinUp(): Command;
function joinDown(): Command;
function joinBackward(): Command;
function joinForward(): Command;
function joinItemBackward(): Command;
function joinItemForward(): Command;
function joinTextblockBackward(): Command;
function joinTextblockForward(): Command;

function splitBlock(): Command;
function splitListItem(typeOrName: string | NodeType): Command;

// History commands
function undo(): Command;
function redo(): Command;
function clearHistory(): Command;

// Deletion commands
function deleteSelection(): Command;
function deleteRange(range: Range): Command;
function deleteCurrentNode(): Command;
function deleteNode(typeOrName: string | NodeType): Command;

// Utility commands
function scrollIntoView(): Command;
function keyboardShortcut(name: string): Command;
function createParagraphNear(): Command;
function cut(originRange: Range, targetPos: number): Command;
function enter(): Command;
function exitCode(): Command;
function newlineInCode(): Command;

// Attribute commands
function resetAttributes(typeOrName: string | NodeType | MarkType, attributes: string | string[]): Command;
function updateAttributes(typeOrName: string | NodeType | MarkType, attributes: Record<string, any>): Command;

type Command = (props: CommandProps) => boolean;
type CommandProps = { tr: Transaction; state: EditorState; dispatch?: (tr: Transaction) => void; view?: EditorView; editor: Editor };

Helper Functions

Utility functions for document manipulation and state inspection.

// Document creation and conversion
function createDocument(content: Content, schema: Schema, parseOptions?: ParseOptions): ProseMirrorNode;
function generateHTML(doc: JSONContent, extensions: Extensions): string;
function generateJSON(html: string, extensions: Extensions): JSONContent;
function generateText(doc: JSONContent | ProseMirrorNode, options?: { blockSeparator?: string; textSerializers?: Record<string, TextSerializer> }): string;

// Content analysis
function findChildren(node: ProseMirrorNode, predicate: (node: ProseMirrorNode) => boolean): NodeWithPos[];
function findChildrenInRange(node: ProseMirrorNode, range: Range, predicate: (node: ProseMirrorNode) => boolean): NodeWithPos[];
function findParentNode(predicate: (node: ProseMirrorNode) => boolean): (selection: Selection) => NodeWithPos | undefined;
function findParentNodeClosestToPos($pos: ResolvedPos, predicate: (node: ProseMirrorNode) => boolean): NodeWithPos | undefined;

// Attribute extraction
function getAttributes(state: EditorState, typeOrName: string | NodeType | MarkType): Record<string, any>;
function getMarkAttributes(state: EditorState, typeOrName: string | MarkType): Record<string, any>;
function getNodeAttributes(state: EditorState, typeOrName: string | NodeType): Record<string, any>;

// Text extraction
function getText(node: ProseMirrorNode, options?: { blockSeparator?: string; textSerializers?: Record<string, TextSerializer> }): string;
function getTextBetween(node: ProseMirrorNode, from: number, to: number, options?: { blockSeparator?: string; textSerializers?: Record<string, TextSerializer> }): string;
function getTextSerializersFromSchema(schema: Schema): Record<string, TextSerializer>;

// State checking
function isActive(state: EditorState, name: string | null, attributes?: Record<string, any>): boolean;
function isMarkActive(state: EditorState, typeOrName: string | MarkType, attributes?: Record<string, any>): boolean;
function isNodeActive(state: EditorState, typeOrName: string | NodeType, attributes?: Record<string, any>): boolean;
function isNodeEmpty(node: ProseMirrorNode): boolean;
function isTextSelection(value: unknown): value is TextSelection;
function isNodeSelection(value: unknown): value is NodeSelection;

// Position and range utilities
function getMarkRange($pos?: ResolvedPos, typeOrName?: string | MarkType): Range | undefined;
function getMarksBetween(from: number, to: number, doc: ProseMirrorNode): MarkRange[];
function getNodeAtPosition(state: EditorState, typeOrName: string | NodeType, pos?: number): NodeWithPos | undefined;
function posToDOMRect(view: EditorView, from: number, to: number): DOMRect;

// Schema utilities
function getSchema(extensions: Extensions, editor?: Editor): Schema;
function getSchemaByResolvedExtensions(extensions: Extensions, editor?: Editor): Schema;
function getSchemaTypeByName(name: string, schema: Schema): NodeType | MarkType | null;

// Extension utilities
function resolveExtensions(extensions: Extensions): Extension[];
function flattenExtensions(extensions: Extensions): Extension[];
function sortExtensions(extensions: Extension[]): Extension[];
function splitExtensions(extensions: Extension[]): { baseExtensions: Extension[]; nodeExtensions: Extension[]; markExtensions: Extension[] };

Input and Paste Rules

Rule creation utilities for handling user input and pasted content.

// Input rule creators
function markInputRule(config: { find: RegExp; type: MarkType; getAttributes?: (match: RegExpMatchArray) => Record<string, any> | false | null }): InputRule;
function nodeInputRule(config: { find: RegExp; type: NodeType; getAttributes?: (match: RegExpMatchArray) => Record<string, any> | false | null }): InputRule;
function textInputRule(config: { find: RegExp; replace: string }): InputRule;
function textblockTypeInputRule(config: { find: RegExp; type: NodeType; getAttributes?: (match: RegExpMatchArray) => Record<string, any> | false | null }): InputRule;
function wrappingInputRule(config: { find: RegExp; type: NodeType; getAttributes?: (match: RegExpMatchArray) => Record<string, any> | false | null }): InputRule;

// Paste rule creators
function markPasteRule(config: { find: RegExp; type: MarkType; getAttributes?: (match: RegExpMatchArray, event: ClipboardEvent) => Record<string, any> | false | null }): PasteRule;
function nodePasteRule(config: { find: RegExp; type: NodeType; getAttributes?: (match: RegExpMatchArray, event: ClipboardEvent) => Record<string, any> | false | null }): PasteRule;
function textPasteRule(config: { find: RegExp; replace: string }): PasteRule;

class InputRule {
  constructor(config: { find: RegExp; handler: (state: EditorState, match: RegExpMatchArray, from: number, to: number) => Transaction | null });
}

class PasteRule {
  constructor(config: { find: RegExp; handler: (props: { state: EditorState; range: Range; match: RegExpMatchArray; pasteEvent: ClipboardEvent }) => Transaction | null });
}

Built-in Extensions

Core extensions that provide essential editor functionality.

// Available built-in extensions
const extensions: {
  ClipboardTextSerializer: Extension;
  Commands: Extension;
  Delete: Extension;
  Drop: Extension;
  Editable: Extension;
  FocusEvents: Extension;
  Keymap: Extension;
  Paste: Extension;
  Tabindex: Extension;
};

// Focus events plugin key for accessing plugin state
const focusEventsPluginKey: PluginKey;

Utility Functions

Miscellaneous utility functions for type checking, object manipulation, and DOM operations.

// Type checking utilities
function isFunction(value: unknown): value is Function;
function isNumber(value: unknown): value is number;
function isString(value: unknown): value is string;
function isRegExp(value: unknown): value is RegExp;
function isPlainObject(value: unknown): value is Record<string, any>;
function isEmptyObject(value: unknown): boolean;

// Platform detection
function isAndroid(): boolean;
function isiOS(): boolean;
function isMacOS(): boolean;

// Object manipulation
function mergeAttributes(...objects: Record<string, any>[]): Record<string, any>;
function mergeDeep(target: Record<string, any>, source: Record<string, any>): Record<string, any>;
function deleteProps(obj: Record<string, any>, propOrProps: string | string[]): Record<string, any>;
function objectIncludes(object: Record<string, any>, searchObject: Record<string, any>): boolean;

// Array utilities
function findDuplicates<T>(items: T[]): T[];
function removeDuplicates<T>(array: T[], by?: (item: T) => any): T[];
function minMax(value: number, min: number, max: number): number;

// String utilities
function escapeForRegEx(string: string): string;
function fromString(value: any, fallback?: string, delimiter?: string): string;

// DOM utilities
function elementFromString(value: string): HTMLElement;
function createStyleTag(style: string, nonce?: string, suffix?: string): HTMLStyleElement;
function canInsertNode(state: EditorState, node: ProseMirrorNode): boolean;

// Functional utilities
function callOrReturn<T>(value: T | ((args?: any) => T), context?: any, ...props: any[]): T;

Types

// Core content types
type Content = string | JSONContent | HTMLContent | ProseMirrorNode | ProseMirrorNode[] | null;
type JSONContent = { type?: string; attrs?: Record<string, any>; content?: JSONContent[]; marks?: { type: string; attrs?: Record<string, any> }[]; text?: string };
type HTMLContent = string;

// Extension and configuration types
type Extensions = (Extension | Node | Mark)[];
type AnyExtension = Extension | Node | Mark;
type ExtensionConfig<Options = any, Storage = any> = Partial<{ name: string; priority: number; /* ... other config properties */ }>;

// Command types
type Commands<ReturnType = any> = Record<string, (...args: any[]) => ReturnType>;
type RawCommands = Record<string, (...args: any[]) => Command>;
type SingleCommands = Record<string, (...args: any[]) => boolean>;
type ChainedCommands = Record<string, (...args: any[]) => ChainedCommands> & { run: () => boolean };
type CanCommands = Record<string, (...args: any[]) => boolean>;

// Range and selection types
type Range = { from: number; to: number };
type NodeRange = Range & { node: ProseMirrorNode };
type MarkRange = Range & { mark: ProseMirrorMark };
type FocusPosition = 'start' | 'end' | 'all' | number | boolean | null;

// Node and attribute types
type NodeWithPos = { node: ProseMirrorNode; pos: number };
type Attribute = { default?: any; rendered?: boolean; renderHTML?: (attributes: Record<string, any>) => Record<string, any> | null; parseHTML?: (element: HTMLElement) => any | null; keepOnSplit?: boolean; isRequired?: boolean };
type Attributes = Record<string, Attribute>;
type GlobalAttributes = { types: string[]; attributes: Record<string, Attribute> }[];

// Text serialization
type TextSerializer = (props: { node: ProseMirrorNode; pos: number; parent: ProseMirrorNode; index: number; range: Range }) => string;

// View renderers
type NodeViewRenderer = (props: NodeViewRendererProps) => NodeView;
type MarkViewRenderer = (props: MarkViewRendererProps) => MarkView;

// Editor events
interface EditorEvents {
  beforeCreate: { editor: Editor };
  create: { editor: Editor };
  update: { editor: Editor; transaction: Transaction };
  selectionUpdate: { editor: Editor; transaction: Transaction };
  transaction: { editor: Editor; transaction: Transaction };
  focus: { editor: Editor; event: FocusEvent; transaction: Transaction };
  blur: { editor: Editor; event: FocusEvent; transaction: Transaction };
  destroy: void;
}

Install with Tessl CLI

npx tessl i tessl/npm-tiptap--vue-3

docs

core-editor-api.md

editor-management.md

index.md

menu-components.md

vue-components.md

vue-renderers.md

tile.json