Fix "do-not-translate" and link are mutally exclusive

[MizukiTemma]

Short description

This PR fixes the bug that <a href> and "do-not-translate" marking are removing the other tag each other.

Proposed changes

• Manually set the attributes for "do-not-translate" instead of inserting

Side effects

• Less irritated users

Faithfulness to issue description and design

There are no intended deviations from the issue and design.

How to test

Resolved issues

Fixes: #4017

---

Pull Request Review Guidelines

[PeterNerlich]

Sorry, but this makes matters much worse:

Write a paragraph, select something in it and mark it with do not translate → the whole paragraph turns do not translate instead of only the selection

[MizukiTemma]

@PeterNerlich
Thank you for review 😸

I hope the new approach is doing fine 🙈

[PeterNerlich]

Suggested change

	en: Fix the bug that "do-not-translate" and link are mutally exclusive
	de: Behebe den Fehler, dass "do-not-translate" und link sich gegenseitig ausschließen
	en: Fix the bug that "do-not-translate" and a link are mutally exclusive
	de: Behebe den Fehler, dass "do-not-translate" und eine Verlinkung sich gegenseitig ausschließen

[PeterNerlich]

What is the idea behind getting the nearest span element? Is it on purpose that one should not be able to make a smaller substring of a do not translate a link? If yes, would it make sense to make this leave other spans alone and only exhibit this behaviour for nodes actually marked as do not translate?

[hannaseithe]

Thank you for the PR 🐈‍⬛

I made one suggestion. But I am also wondering if there was a good reason you included .closest("span") (as Peter already asked). So if that doesn't work as I imagine, let me know.

[hannaseithe]

Suggested change

	let selectedText = editor.selection.getNode().closest("span");
	if (!selectedText) {
	selectedText = editor.selection.getContent({ format: "html" });
	}
	const link = editor.dom.create(
	"a",
	{
	href: `${realUrl}${autoupdate ? ' data-integreat-auto-update="true"' : ""}`,
	},
	selectedText
	let selectedNode = editor.selection.getNode();
	if (!selectedNode) {
	selectedText = editor.selection.getContent({ format: "html" });
	}
	const link = editor.dom.create(
	"a",
	{
	href: `${realUrl}${autoupdate ? ' data-integreat-auto-update="true"' : ""}`,
	},
	selectedNode ?? selectedText

Two reasons for this suggestion:

1. Code readability: Assigning a node to a variable with the naming selectedText might cause confusion
2. By deleting the .closest("span"), we also make sure that other elements like <strong> do not get overwritten when creating a link ... hope that doesn't break something else though