-
-
Notifications
You must be signed in to change notification settings - Fork 2.1k
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
The insertContent command adds unnecessary blank paragraphs with HTML as value #2720
Comments
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
@bdbch This issue still exists, do you think this could be reopened, and possibly some attention? |
This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days |
bump |
The same with u, instead , i call insertcontent, value is the json
|
Errr... My situation is that I use the Enter key to break a line in the editor. The next time the editor reads the HTML, a like this: <p>
<br> //<--- this is redundant
<br class="ProseMirror-trailingBreak">
</p> I offer a temporary solution here const TiptapBugPatch = (html: string) => {
const savedHtmlString = html;
// 創建一個暫時的 div 元素來解析 HTML 字串
const tempDiv = document.createElement("div");
tempDiv.innerHTML = savedHtmlString;
// 找到所有具有 class 為 "ProseMirror-trailingBreak" 的元素
const trailingBreakElements = tempDiv.querySelectorAll(
".ProseMirror-trailingBreak"
);
// 遍歷這些元素
trailingBreakElements.forEach((element) => {
// 檢查前一個元素是否為 <br>
const previousElement = element.previousElementSibling;
if (previousElement && previousElement.tagName === "BR") {
// 如果前一個元素是 <br>,刪除它
previousElement.remove();
}
// 刪除具有 class 為 "ProseMirror-trailingBreak" 的元素
element.remove();
});
// 取得最終處理後的 HTML 字串
const processedHtmlString = tempDiv.innerHTML;
return processedHtmlString;
}; Use the return value obtained as the HTML that will eventually be read by the Tiptap editor. Again, this is only a temporary solution, please deprecate it after the original author releases a fix. |
@determinationlove I don't think that comment like this is appropriate.
This is open source project that you can use for free. Unless you're paying for it, you can only appreciate the work of the maintainers that they put into it. And also report bugs and issues, but always in a polite way! They are not working for you. |
Hello, is there a way to solve this problem ? |
@sakshi-klaarhq did you experience it by using insertContentAt manually to insert a taskList or was your issue caused by the taskList extension itself? |
Was running into the same issue, but adding
Here's a before after video comparison Screen.Recording.2023-09-30.at.14.53.04.mov |
This bug is still here. Inserting html code with a list, tiptap adds paragraph tags on every line. For example: When using With:
The HTML in TipTap editor is the following:
Anyone found a workaround for this bug? |
This is a codesandbox repo where you can see and reproduce the bug in action: https://codesandbox.io/p/devbox/editor-forked-p376l7?file=%2Fsrc%2FApp.js
See the resulted list broken 😭 |
I have been able to fix it: Just remove any space between your HTML tags and the layout will be fine. |
Could you show me your solution in code? @rdewolff |
Sure, I just use regexp to cleanup the HTML code, as follow: export const cleanHTML = (htmlString) => {
// This will remove all the spaces between HTML tags and words. It is too aggressive.
// return htmlString.replace(/\s*(<[^>]+>)\s*/g, '$1')
// This pattern specifically targets spaces that occur between a closing tag (>) and an opening tag (<), effectively removing only those spaces.
return htmlString.replace(/>\s+</g, '><')
} Let me know if that works for you 😉 |
What’s the bug you are facing?
The
insertCommand
seems to be adding unnecessary blank paragraphs to the editor when newlines are found between HTML tags.Which browser was this experienced in? Are any special extensions installed?
n/a
How can we reproduce the bug on our side?
Take the following HTML as an example:
And then call
editor.commands.insertCommand(htmlInput)
. This is what gets rendered by Tiptap:As you can see, there's one paragraph before and after the header that shouldn't be there.
Can you provide a CodeSandbox?
No response
What did you expect to happen?
Based on the example above, Tiptpa should've rendered this:
Anything to add? (optional)
No response
Did you update your dependencies?
Are you sponsoring us?
The text was updated successfully, but these errors were encountered: