Issues/#68

[Sohila-Hashem]

Issue

#68

Issue Cause

The old implementation did not operate directly on the pasted element and instead relied on the querySelectors for identifying lists and list items through getting only the direct children of the root element on each recursive iteration resulting into an empty array on nested lists and rendering the content through innerHTML, which sometimes created viusally incorrect lists and broken clean data ignoring formatting nested lists when onsave is fired.

Issue Fix workflow

moved the new logic into a separate funciton and implemented new flow that operates directly on the pasted content, making sure that if the pasted content contains mixed lists, it perserves the list style of the root element, yet renderes correct clean data output

[neSpecc]

meta is always empty.

[Sohila-Hashem]

Thanks for alerting me, i did the adjustments, however it was always empty on pasted content due to other reason mentinoed in PR #145 and you can see that below in the output data shown in the screenshot below:

[neSpecc]

Thanks for the fix. Could you explain the exact problem and prepare the smallest significant change without rewriting the existing code? Thus we can review it faster.

[Sohila-Hashem]

Thanks for the fix. Could you explain the exact problem and prepare the smallest significant change without rewriting the existing code? Thus we can review it faster.

I sincerely apologize for for the late reply, i got busy 😅.

So, I had to rewrite that piece of code for a couple of reasons, i have explained the core of the problem in the description, but to explain even more, the issue cause resides mainly in 2 parts that i will discuss below.

1. how we set the content of each child element in case of nested element

taking into account the following code snippet;

public pasteHandler(element: PasteEvent['detail']['data']): ListData {
...
 // get text content of the li element.
 const content = child.innerHTML ?? '';
...
}

this return the content of the element AND it's descendants as documented by MDN and shown below:

ref link: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

so this will create an output that looks like the below:

2. how we operate on the pasted content

• query selectors are used to initially retrieve the children of the copied element, this returns a static (not-live) NodeList of type Element then we use the same technique to identify nested lists in a recursive manner. the only downside of this approach is that it's hard to identify each type of Node such as HTML elements, comment nodes and text nodes when relying on the innerHTML property solely for each element. refer to the screenshot below:

ref link: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Result

• visually duplicated elements
• incorrect/corrupted "outpute data" when the save method is called

I hope i was able to provide a comprehensive explanation this time, please let me know if there is any wrong info or misunderstanding, i'm new to open-source contributions 😅

[Sohila-Hashem]

@neSpecc hello, any updates?