A Renderer that draws on a canvas

import type { RasterChartRenderer } from '@tiptap-pro/extension-diagrams'
import { Chart, registerables } from 'chart.js'

Chart.register(...registerables)

export const chartJsRenderer: RasterChartRenderer = {
  id: 'chartjs',
  label: 'Chart.js',
  types: ['bar', 'line', 'pie', 'doughnut'],
  mount(target, input) {
    const canvas = document.createElement('canvas')
    target.replaceChildren(canvas)
    const chart = new Chart(canvas, toChartJsConfig(input))
    return {
      update: (next) => {
        const config = toChartJsConfig(next)
        chart.data = config.data
        chart.options = config.options
        chart.update('none')
      },
      destroy: () => chart.destroy(),
    }
  },
  toImage(input) {
    const canvas = document.createElement('canvas')
    canvas.width = input.size.width
    canvas.height = input.size.height
    const chart = new Chart(canvas, { ...toChartJsConfig(input), options: { animation: false } })
    return new Promise((resolve, reject) =>
      canvas.toBlob((blob) => {
        chart.destroy()
        blob ? resolve(blob) : reject(new Error('No picture.'))
      }, 'image/png'),
    )
  },
}