Guide on creating a custom command within the declaration of Tiptap while extending an existing extension with TypeScript

I'm currently working on extending a table extension from tiptap and incorporating an additional command.

declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    table: {
      setTableClassName: () => ReturnType;
    };
  }
}
export const CustomTable = Table.extend({
  addAttributes() {}, 
  addCommands() {}
})

After adding the above code, I encountered the following error:

Subsequent property declarations must have the same type. Property 'table' must be of type '{ insertTable: (options?: { rows?: number | undefined; cols?: number | undefined; withHeaderRow?: boolean | undefined; } | undefined) => ReturnType; addColumnBefore: () => ReturnType; ... 16 more ...; setCellSelection: (position: { ...; }) => ReturnType; }', but here has type '{ setTableClassName: () => ReturnType; }'.ts(2717)
table.d.ts(14, 9): 'table' was also declared here.

How can I go about resolving this issue?

Answer №1

I encountered a similar issue which I believe occurred because the table is already being used. To resolve this, consider changing the table in your declaration to a unique name like customTable, and then make sure to set the name in the function CustomTable.

declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    customTable: {
      setTableClassName: () => ReturnType;
    };
  }
}
export const CustomTable = Table.extend({
  name: "customTable",
  addAttributes() {}, 
  addCommands() {}
})

Keep in mind that your table nodes will now be labeled as "customTable".

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Typescript TypeError: Unable to call function this.array[i].greet as it is not defined

When attempting to call my function, I am encountering an error. Interestingly, everything works fine when I create just one object of someClass and then utilize the greet function. This is what does not work (someArray being an array of type someClass): ...

AmplifyJS is throwing an error: TypeError - It seems like the property 'state' is undefined and cannot be read

I am currently working on integrating the steps outlined in the Amplify walkthrough with an Angular cli application. My app is a brand new Angular cli project following the mentioned guide. My objective is to utilize the standalone auth components a ...

What steps can I take to guarantee that the observer receives the latest value immediately upon subscribing?

In my Angular 2 and Typescript project, I am utilizing rxjs. The goal is to share a common web-resource (referred to as a "project" in the app) among multiple components. To achieve this, I implemented a service that provides an observable to be shared by ...

The term "define" is not recognized when constructing a Next.js application

Currently, I am working with Next version 10.0.1 and React 17.0.2. While attempting to build my Next app, I encountered the following error: ReferenceError: define is not defined at Object.<anonymous> (/Users/username/Desktop/project/node_module ...

Using CreateMany within a Prisma Create query

Hello, I have been working on implementing a create statement that accepts an array of another model. Below are my schemas: model House { id String @id createdAt DateTime @default(now()) updatedAt DateTime @updatedAt property_name String ...

Using TypeScript for Routing in Angular

I encountered an error message that says the module 'route' is not available. I'm not sure why this is happening, any thoughts? "Uncaught Error: [$injector:nomod] Module 'route' is not available! You either misspelled the module n ...

The received data object appears to be currently undefined

I am currently using MapBox to display multiple coordinates on a map, but I am encountering an issue where the longitude and latitude values in my return object are showing up as undefined. Could there be a missing configuration that is preventing the data ...

What is the best way to save an array of objects from an Axios response into a React State using TypeScript?

Apologies in advance, as I am working on a professional project and cannot provide specific details. Therefore, I need to describe the situation without revealing actual terms. I am making a GET request to an API that responds in the following format: [0: ...

Developing a TypeScript NodeJS module

I've been working on creating a Node module using TypeScript, and here is my progress so far: MysqlMapper.ts export class MysqlMapper{ private _config: Mysql.IConnectionConfig; private openConnection(): Mysql.IConnection{ ... } ...

What is causing the duplication of leaves when using this DFS implementation?

I created an algorithm to compare if two trees have the same leaves. Both trees display matching leaf numbers in the exact order, resulting in a true outcome. Below is the code that I formulated: function leafSimilar(root1: TreeNode | null, root2: TreeNo ...

Ensure all promises are resolved inside of for loops before moving on to the next

Within my angular 11 component, I have a process that iterates through elements on a page and converts them from HTML to canvas to images, which are then appended to a form. The problem I am encountering is that the promise always resolves after the ' ...

Step-by-step guide on incorporating an external JavaScript library into an Ionic 3 TypeScript project

As part of a project, I am tasked with creating a custom thermostat app. While I initially wanted to use Ionic for this task, I encountered some difficulty in integrating the provided API into my project. The API.js file contains all the necessary function ...

How does [name] compare to [attr.name]?

Question regarding the [attr.name] and [name], I am utilizing querySelectorAll in my Typescript as shown below: this._document.querySelectorAll("input[name='checkModel-']") However, when I define it in the HTML like this: <input [name]="check ...

How can I make the snackbar open multiple times in a row?

Check out this codesandbox I created to show an issue. When you click the button, a MUI snackbar opens. However, if you close it and try to reopen it, nothing happens. Do you think the problem is related to how I'm using hooks? Explore the sandbox h ...

Guidelines for creating a routing for a child component using Angular

Seeking assistance with setting up routing in an Angular application. I have a main component called public.component, and the auth.component component is inserted from the child module Auth.module using the selector. How can I configure the routing for th ...

Make the if statement easier - Angular

Would you like to know a more efficient way to streamline this If statement? The variables are all strings and are reused in both conditions, but the outcome varies depending on whether it returns true or false. if(params.province && !params.str ...

Is it necessary to manually validate parameters in TypeScript when developing a library?

Understanding the basic workings of TypeScript, it's clear that TypeScript transpiles code to JavaScript without adding extra behavior like type checking during execution. For instance, function example(parameter: string): void { console.log(paramet ...

The Ngrx action fails to finish despite encountering an error during execution

An Issue with Action Completion Post-Error Within my application, I have implemented an action for deleting a user. Prior to deletion, the user is prompted on screen with a Dialog to input the administrator password. If the correct password is provided, t ...

Experiencing a compilation issue while attempting to apply the class-transformer

Encountering an issue while working with a basic example that involves class-transformer. error TS1240: Unable to resolve signature of property decorator when called as an expression. Argument of type 'ClassFieldDecoratorContext<Root, Project[]> ...

Using a functional wrapper component to reset the modal field in Reactstrap upon closing and reopening

In the main component that displays a list of to-do tasks, we have the ability to add or edit existing tasks. To facilitate this functionality, a separate wrapper was created. import React, { useEffect, useState } from 'react'; import { Label ...