Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Table extended bug #4017

Open
1 of 2 tasks
Liszt-Fly opened this issue May 6, 2023 · 2 comments
Open
1 of 2 tasks

[Bug]: Table extended bug #4017

Liszt-Fly opened this issue May 6, 2023 · 2 comments
Labels
Category: Open Source The issue or pull reuqest is related to the open source packages of Tiptap. Triage: Open A new issue or pullrequest that requires triage (added by default) Type: Bug The issue or pullrequest is related to a bug

Comments

@Liszt-Fly
Copy link

Which packages did you experience the bug in?

extension-table

What Tiptap version are you using?

2.0.3

What’s the bug you are facing?

I try to extend table, and I want to use addCommand

export const CaptionedTable = Table.extend({
	name: "captionedTable",


	addKeyboardShortcuts() {
		return {
			[insert_table]: () => this.editor.commands.insertTable(),
			"Tab": () => this.editor.commands.goToNextCell(),

		}
	},
	addInputRules() {
		return [
			nodeInputRuleWithContent({
				find: /\|\|\s/,
				type: this.type,
				content: createTableRow(this.editor, false, 2, 1)
			})
		]
	},
	addCommands() {
		return {

		}
	}
})

but if I use the addCommand method, the default method cannot be used, for example, I want to use tab to go to next cell, but it failed.
image

add this is the custom nodeInput method:

import { ExtendedRegExpMatchArray, InputRule, InputRuleFinder, callOrReturn, nodeInputRule } from "@tiptap/core"
import { TextSelection } from "@tiptap/pm/state"
import { Node, NodeType } from "prosemirror-model"

export function nodeInputRuleWithContent(config: {
	find: InputRuleFinder
	type: NodeType
	content: Node[]
	getAttributes?:
	| Record<string, any>
	| ((match: ExtendedRegExpMatchArray) => Record<string, any>)
	| false
	| null
}) {
	return new InputRule({
		find: config.find,
		handler: ({ state, range, match }) => {
			const attributes = callOrReturn(config.getAttributes, undefined, match) || {}
			const { tr } = state
			const start = range.from
			let end = range.to

			console.log('match', match)
			if (match[1]) {
				const offset = match[0].lastIndexOf(match[1])
				let matchStart = start + offset

				if (matchStart > end) {
					matchStart = end
				} else {
					end = matchStart + match[1].length
				}


				// insert last typed character
				const lastChar = match[0][match[0].length - 1]

				tr.insertText(lastChar, start + match[0].length - 1)

				// insert node from input rule
				tr.replaceWith(matchStart, end, config.type.create(attributes, config.content)).scrollIntoView()
					.setSelection(TextSelection.near(tr.doc.resolve(offset)))
				alert(6)
			} else if (match[0]) {
				const offset = tr.selection.anchor + 1
				tr.replaceWith(start, end, config.type.create(attributes, config.content)).scrollIntoView()
					.setSelection(TextSelection.near(tr.doc.resolve(offset)))
			}

		},

	})
}

What browser are you using?

Chrome

Code example

No response

What did you expect to happen?

I hope when I use addCommand method, these default method can be used. Everything works for custom-header plugin, but the table doesn't

Anything to add? (optional)

No response

Did you update your dependencies?

  • Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

  • Yes, I’m a sponsor. 💖
@Liszt-Fly Liszt-Fly added Category: Open Source The issue or pull reuqest is related to the open source packages of Tiptap. Triage: Open A new issue or pullrequest that requires triage (added by default) Type: Bug The issue or pullrequest is related to a bug labels May 6, 2023
@vinoddotcom
Copy link

We have encountered an issue while integrating @tiptap-pro/extension-mathematics katex
with @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell. While each extension works individually, when integrated into
the same editor, we receive an error when attempting to insert or manipulate a table.

image

We are currently experiencing this issue while using the latest version of Chrome,
and have commented on an existing GitHub issue related to this problem.
If possible, we would greatly appreciate any assistance in resolving this issue.

image

@rezaffm
Copy link

rezaffm commented May 26, 2023

not sure if it helps, but I also tried to change my Tables a bit by adding a width attribute: https://gist.github.com/hanspagel/de6cd0c30ece7afb3f2ba663768f373f

However, once I used "configure" on the extension, it kind of "resetted" the extension, if just using it without, so just doing "extend" lead to the table not being wrapped in a div anymore.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Category: Open Source The issue or pull reuqest is related to the open source packages of Tiptap. Triage: Open A new issue or pullrequest that requires triage (added by default) Type: Bug The issue or pullrequest is related to a bug
Projects
Status: Triage open
Development

No branches or pull requests

5 participants