Commands

// Set content
editor.commands.setContent('<p>Hello World!</p>')

// Toggle formatting
editor.commands.toggleBold()
editor.commands.toggleItalic()

// Insert content
editor.commands.insertContent('<p>New paragraph</p>')

// Set node type
editor.commands.setParagraph()
editor.commands.setHeading({ level: 1 })

const success = editor.commands.toggleBold()

if (success) {
  console.log('Bold was toggled')
} else {
  console.log('Bold could not be toggled')
}

editor
  .chain()
  .focus()
  .toggleBold()
  .toggleItalic()
  .run()

// If toggleBold fails, toggleItalic won't run
editor
  .chain()
  .toggleBold() // fails
  .toggleItalic() // won't run
  .run()

const success = editor
  .chain()
  .toggleBold()
  .toggleItalic()
  .run()

console.log(success) // true or false

if (editor.can().toggleBold()) {
  console.log('Bold can be toggled')
}

// Disable a button if the command can't run
const isBoldDisabled = !editor.can().toggleBold()

if (editor.can().chain().toggleBold().toggleItalic().run()) {
  console.log('Both bold and italic can be toggled')
}

import { Extension } from '@tiptap/core'

declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    myExtension: {
      insertGreeting: () => ReturnType
      setColor: (color: string) => ReturnType
    }
  }
}

export const MyExtension = Extension.create({
  name: 'myExtension',
  
  addCommands() {
    return {
      insertGreeting: () => ({ commands }) => {
        return commands.insertContent('<p>Hello!</p>')
      },
      
      setColor: (color: string) => ({ commands, tr, state }) => {
        // Access to transaction and state
        return commands.updateAttributes('textStyle', { color })
      },
    }
  },
})

addCommands() {
  return {
    myCommand: (arg1, arg2) => ({ commands, editor, state, tr, dispatch, chain, can }) => {
      // commands: Access to all other commands
      // editor: The editor instance
      // state: Current editor state
      // tr: Current transaction
      // dispatch: Function to dispatch the transaction
      // chain: Create a command chain
      // can: Check if commands can run
      
      return true // Return true if successful
    },
  }
}

addCommands() {
  return {
    setParagraph: () => ({ commands }) => {
      return commands.setNode(this.name)
    },
  }
}

addCommands() {
  return {
    setBold: () => ({ commands }) => {
      return commands.setMark(this.name)
    },
    toggleBold: () => ({ commands }) => {
      return commands.toggleMark(this.name)
    },
    unsetBold: () => ({ commands }) => {
      return commands.unsetMark(this.name)
    },
  }
}

editor
  .chain()
  .focus()
  .command(({ tr, state }) => {
    // Custom command logic
    if (state.selection.empty) {
      return false
    }
    
    // Do something with the transaction
    tr.insertText('Hello')
    
    return true
  })
  .run()

const customCommand = () => ({ tr, state, dispatch }) => {
  const { selection } = state
  const { from, to } = selection
  
  // Get selected text
  const text = state.doc.textBetween(from, to)
  
  console.log('Selected text:', text)
  
  if (dispatch) {
    tr.insertText(text.toUpperCase(), from, to)
  }
  
  return true
}

editor.commands.command(customCommand)

const success = editor
  .chain()
  .focus()
  .toggleBold()
  .toggleItalic()
  .run()

if (!success) {
  console.error('Commands failed to execute')
}

const toggleBold = () => {
  if (editor.can().toggleBold()) {
    editor.chain().focus().toggleBold().run()
  }
}

const setHeadingLevel = (level: number) => {
  editor
    .chain()
    .focus()
    .toggleHeading({ level })
    .run()
}

const insertLink = (href: string) => {
  editor
    .chain()
    .focus()
    .extendMarkRange('link')
    .setLink({ href })
    .run()
}

const removeLink = () => {
  editor
    .chain()
    .focus()
    .extendMarkRange('link')
    .unsetLink()
    .run()
}

const toggleBulletList = () => {
  editor
    .chain()
    .focus()
    .toggleBulletList()
    .run()
}

import type { 
  SingleCommands, 
  ChainedCommands, 
  CanCommands,
  CommandProps,
} from '@tiptap/core'

// Command function type
type CommandFunction = (props: CommandProps) => boolean

// Declare custom commands
declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    myExtension: {
      myCommand: (arg: string) => ReturnType
    }
  }
}