Open AaronAnz opened 10 months ago
HMarzban
commented
10 months ago Hi, as demonstrated in the example here, it works, and I have tested a bunch of other methods. However, I did not encounter that error! It would be great to see it in action or to review the main code.
AaronAnz
commented
10 months ago Strange. I am using Blazor which is a pretty unique frontend but every single plugin for tiptap works fine but yours. Unable to get a dumbed down example at the moment, I ended up just writing my own function to handle setting it.
SENNQQ
commented
3 months ago Strange. I am using Blazor which is a pretty unique frontend but every single plugin for tiptap works fine but yours. Unable to get a dumbed down example at the moment, I ended up just writing my own function to handle setting it.
Hi, could you please share your implementation. I am also facing mismatched transaction and can't figure out how to fix it.
AaronAnz
commented
3 months ago Strange. I am using Blazor which is a pretty unique frontend but every single plugin for tiptap works fine but yours. Unable to get a dumbed down example at the moment, I ended up just writing my own function to handle setting it.
Hi, could you please share your implementation. I am also facing mismatched transaction and can't figure out how to fix it.
I got busy and kind of abandoned working on the project for a while and hadn't fully finished everything but here is some probably broken ass code which can point you in the direction I was heading
import Link from '@tiptap/extension-link' // https://tiptap.dev/api/marks/link
Link.extend({ inclusive: false }).configure({
autolink: true,
HTMLAttributes: {
class: "mud-typography mud-link mud-primary-text mud-link-underline-hover mud-typography-body1"
},
linkOnPaste: true,
openOnClick: false,
}),
public editLink = (url, text, target) => {
var link = this.getFocusedAnchorTag();
const nodePos = this.tiptap.view.posAtDOM(link, 0);
var transaction = this.tiptap.view.state.tr;
transaction.deleteRange(nodePos, nodePos + (link?.innerText || "")?.length).replaceWith(
nodePos,
nodePos,
this.tiptap.schema.text(text, [
this.tiptap.schema.marks.link.create({
href: url,
}),
])
);
this.tiptap.view.dispatch(transaction);
}
public getFocusedAnchorTag = () => {
if (this.tiptap.isActive('link')) {
const { state, dispatch } = this.tiptap.view;
const { from, to } = state.selection;
let link: HTMLAnchorElement | null = null;
var test = (to - 1 <= from) ? from : to - 1;
const selectedNode = this.tiptap.view.domAtPos(test).node as HTMLElement;
const nodeName = selectedNode?.nodeName;
if (nodeName === "#text") {
return (selectedNode.parentNode as HTMLElement)?.closest("a");
} else {
return selectedNode?.closest("a");
}
}
return null;
}
public setLink = (url, text, target) => {
if (this.tiptap.isActive('link')) {
// get the focused anchor tag element
var link = this.getFocusedAnchorTag();
// get bounds of anchor tag text
const nodePos = this.tiptap.view.posAtDOM(link, 0);
var startPos = nodePos;
var endPos = nodePos + (link?.innerText ?? "").length;
} else {
// get current selection bounds
var selection = this.tiptap.state.selection;
var startPos = selection.$from.pos;
var endPos = selection.$to.pos;
}
// create a new transaction
var transaction = this.tiptap.view.state.tr;
// set transaction to replace range
transaction.replaceWith(
startPos,
endPos,
// set text
this.tiptap.schema.text(text, [
// set link mark
this.tiptap.schema.marks.link.create({
href: url,
}),
])
);
// dispatch the transaction to the editor.
this.tiptap.view.dispatch(transaction);
}
Was interested in trying this plugin because the default one is lacking the ability to easily set the text for a link and I didnt want to bake my own solution but when I run :
results in "HResult=0x80131500 Message=Applying a mismatched transaction".
and so does this: