search

singerdmx / flutter-quill

Rich text editor for Flutter
https://pub.dev/packages/flutter_quill
MIT License
2.58k stars 835 forks source link

Checkbox values are not being converted correctly in rich text pasting feature #2231

Open EchoEllet opened 1 month ago

EchoEllet commented 1 month ago

Is there an existing issue for this?

Flutter Quill version

10.6.0

Steps to reproduce

  1. Open the example (try on the desktop first) and open a new document
  2. Go to issue #2230 and copy the Type of Change section (as an example) and make sure you're selecting it in a similar way in the video, you will notice the checkbox value is always false
  3. Same as step 2 but this time make sure you're selecting it in a similar way in the video in the second time while trying to reproduce it, the checkboxes are all checked

https://github.com/user-attachments/assets/52c40029-7779-46d2-945e-de4b8b09d11f

You might notice the steps are not very clear, as I haven't understood the exact steps to reproduce it as more testing is needed, I'm currently in the middle of another issue however the video should give some hints.

Expected results

Would be useful to support the checkbox as well when copy and paste content from websites/apps into the editor.

IMO, this is a minor issue.

If the issue from the clipboard platform API then we will close this issue.is

Actual results

Issue is related to #2230 but the same issue can happen regardless of the plugin implementation, this issue is not a regression in version 10.6.0

Code sample

No response

Additional Context

The HTML when all the checkboxes are checked:

<meta charset='utf-8'><ul class="contains-task-list" style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px !important; position: relative; color: rgb(240, 246, 252); font-family: -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, &quot;Noto Sans&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(13, 17, 23); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><li class="task-list-item enabled" draggable="false" style="box-sizing: border-box; list-style-type: none; margin-left: -15px; padding: 2px 15px 2px 42px; margin-right: -15px; line-height: 1.5; border: 0px;"><input type="checkbox" id="" class="task-list-item-checkbox" checked="" style="box-sizing: border-box; font: inherit; margin: 0px 0.2em 0.25em -1.4em; overflow: visible; padding: 0px; vertical-align: middle;"><span> </span>✨<span> </span><strong style="box-sizing: border-box; font-weight: var(--base-text-weight-semibold, 600);">New feature:</strong><span> </span>Adds new functionality without breaking existing features.</li><li class="task-list-item enabled" draggable="false" style="box-sizing: border-box; list-style-type: none; margin-top: 0px; margin-left: -15px; padding: 2px 15px 2px 42px; margin-right: -15px; line-height: 1.5; border: 0px;"><span class="handle" style="box-sizing: border-box; display: block; float: left; width: 20px; padding: 2px 0px 0px 2px; margin-left: -43px; opacity: 0;"><svg class="drag-handle" aria-hidden="true" width="16" height="16"><path d="M10 13a1 1 0 100-2 1 1 0 000 2zm-4 0a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zm3 1a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zM6 5a1 1 0 100-2 1 1 0 000 2z"></path></svg></span><input type="checkbox" id="" class="task-list-item-checkbox" style="box-sizing: border-box; font: inherit; margin: 0px 0.2em 0.25em -1.4em; overflow: visible; padding: 0px; vertical-align: middle;"><span> </span>🛠️<span> </span><strong style="box-sizing: border-box; font-weight: var(--base-text-weight-semibold, 600);">Bug fix:</strong><span> </span>Resolves an issue without altering current behavior.</li><li class="task-list-item enabled" style="box-sizing: border-box; list-style-type: none; margin-top: 0px; margin-left: -15px; padding: 2px 15px 2px 42px; margin-right: -15px; line-height: 1.5; border: 0px;"><span class="handle" style="box-sizing: border-box; display: block; float: left; width: 20px; padding: 2px 0px 0px 2px; margin-left: -43px; opacity: 0;"><svg class="drag-handle" aria-hidden="true" width="16" height="16"><path d="M10 13a1 1 0 100-2 1 1 0 000 2zm-4 0a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zm3 1a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zM6 5a1 1 0 100-2 1 1 0 000 2z"></path></svg></span><input type="checkbox" id="" class="task-list-item-checkbox" style="box-sizing: border-box; font: inherit; margin: 0px 0.2em 0.25em -1.4em; overflow: visible; padding: 0px; vertical-align: middle;"><span> </span>🧹<span> </span><strong style="box-sizing: border-box; font-weight: var(--base-text-weight-semibold, 600);">Code refactor:</strong><span> </span>Code restructuring that does not affect behavior.</li><li class="task-list-item enabled" style="box-sizing: border-box; list-style-type: none; margin-top: 0px; margin-left: -15px; padding: 2px 15px 2px 42px; margin-right: -15px; line-height: 1.5; border: 0px;"><span class="handle" style="box-sizing: border-box; display: block; float: left; width: 20px; padding: 2px 0px 0px 2px; margin-left: -43px; opacity: 0;"><svg class="drag-handle" aria-hidden="true" width="16" height="16"><path d="M10 13a1 1 0 100-2 1 1 0 000 2zm-4 0a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zm3 1a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zM6 5a1 1 0 100-2 1 1 0 000 2z"></path></svg></span><input type="checkbox" id="" class="task-list-item-checkbox" style="box-sizing: border-box; font: inherit; margin: 0px 0.2em 0.25em -1.4em; overflow: visible; padding: 0px; vertical-align: middle;"><span> </span>❌<span> </span><strong style="box-sizing: border-box; font-weight: var(--base-text-weight-semibold, 600);">Breaking change:</strong><span> </span>Alters existing functionality and requires updates.</li><li class="task-list-item enabled" style="box-sizing: border-box; list-style-type: none; margin-top: 0px; margin-left: -15px; padding: 2px 15px 2px 42px; margin-right: -15px; line-height: 1.5; border: 0px;"><span class="handle" style="box-sizing: border-box; display: block; float: left; width: 20px; padding: 2px 0px 0px 2px; margin-left: -43px; opacity: 0;"><svg class="drag-handle" aria-hidden="true" width="16" height="16"><path d="M10 13a1 1 0 100-2 1 1 0 000 2zm-4 0a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zm3 1a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zM6 5a1 1 0 100-2 1 1 0 000 2z"></path></svg></span><input type="checkbox" id="" class="task-list-item-checkbox" style="box-sizing: border-box; font: inherit; margin: 0px 0.2em 0.25em -1.4em; overflow: visible; padding: 0px; vertical-align: middle;"><span> </span>🧪<span> </span><strong style="box-sizing: border-box; font-weight: var(--base-text-weight-semibold, 600);">Tests:</strong><span> </span>Adds new tests or modifies existing tests.</li><li class="task-list-item enabled" style="box-sizing: border-box; list-style-type: none; margin-top: 0px; margin-left: -15px; padding: 2px 15px 2px 42px; margin-right: -15px; line-height: 1.5; border: 0px;"><span class="handle" style="box-sizing: border-box; display: block; float: left; width: 20px; padding: 2px 0px 0px 2px; margin-left: -43px; opacity: 0;"><svg class="drag-handle" aria-hidden="true" width="16" height="16"><path d="M10 13a1 1 0 100-2 1 1 0 000 2zm-4 0a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zm3 1a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zM6 5a1 1 0 100-2 1 1 0 000 2z"></path></svg></span><input type="checkbox" id="" class="task-list-item-checkbox" style="box-sizing: border-box; font: inherit; margin: 0px 0.2em 0.25em -1.4em; overflow: visible; padding: 0px; vertical-align: middle;"><span> </span>📝<span> </span><strong style="box-sizing: border-box; font-weight: var(--base-text-weight-semibold, 600);">Documentation:</strong><span> </span>Updates or additions to documentation.</li><li class="task-list-item enabled" style="box-sizing: border-box; list-style-type: none; margin-top: 0px; margin-left: -15px; padding: 2px 15px 2px 42px; margin-right: -15px; line-height: 1.5; border: 0px;"><span class="handle" style="box-sizing: border-box; display: block; float: left; width: 20px; padding: 2px 0px 0px 2px; margin-left: -43px; opacity: 0;"><svg class="drag-handle" aria-hidden="true" width="16" height="16"><path d="M10 13a1 1 0 100-2 1 1 0 000 2zm-4 0a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zm3 1a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zM6 5a1 1 0 100-2 1 1 0 000 2z"></path></svg></span><input type="checkbox" id="" class="task-list-item-checkbox" style="box-sizing: border-box; font: inherit; margin: 0px 0.2em 0.25em -1.4em; overflow: visible; padding: 0px; vertical-align: middle;"><span> </span>🗑️<span> </span><strong style="box-sizing: border-box; font-weight: var(--base-text-weight-semibold, 600);">Chore:</strong><span> </span>Routine tasks, or maintenance.</li><li class="task-list-item enabled" style="box-sizing: border-box; list-style-type: none; margin-top: 0px; margin-left: -15px; padding: 2px 15px 2px 42px; margin-right: -15px; line-height: 1.5; border: 0px;"><span class="handle" style="box-sizing: border-box; display: block; float: left; width: 20px; padding: 2px 0px 0px 2px; margin-left: -43px; opacity: 0;"><svg class="drag-handle" aria-hidden="true" width="16" height="16"><path d="M10 13a1 1 0 100-2 1 1 0 000 2zm-4 0a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zm3 1a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zM6 5a1 1 0 100-2 1 1 0 000 2z"></path></svg></span><input type="checkbox" id="" class="task-list-item-checkbox" style="box-sizing: border-box; font: inherit; margin: 0px 0.2em 0.25em -1.4em; overflow: visible; padding: 0px; vertical-align: middle;"><span> </span>✅<span> </span><strong style="box-sizing: border-box; font-weight: var(--base-text-weight-semibold, 600);">Build configuration change:</strong><span> </span>Changes to build or deploy processes.</li></ul>

The HTML when all the checkboxes are unchecked:

<meta charset='utf-8'><ul class="contains-task-list" style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px !important; position: relative; color: rgb(240, 246, 252); font-family: -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, &quot;Noto Sans&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(13, 17, 23); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><li class="task-list-item enabled" draggable="false" style="box-sizing: border-box; list-style-type: none; margin-left: -15px; padding: 2px 15px 2px 42px; margin-right: -15px; line-height: 1.5; border: 0px;">✨<span> </span><strong style="box-sizing: border-box; font-weight: var(--base-text-weight-semibold, 600);">New feature:</strong><span> </span>Adds new functionality without breaking existing features.</li><li class="task-list-item enabled hovered" draggable="false" style="box-sizing: border-box; list-style-type: none; margin-top: 0px; margin-left: -15px; padding: 2px 15px 2px 42px; margin-right: -15px; line-height: 1.5; border: 0px;"><span class="handle" style="box-sizing: border-box; display: block; float: left; width: 20px; padding: 2px 0px 0px 2px; margin-left: -43px; opacity: 1;"><svg class="drag-handle" aria-hidden="true" width="16" height="16"><path d="M10 13a1 1 0 100-2 1 1 0 000 2zm-4 0a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zm3 1a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zM6 5a1 1 0 100-2 1 1 0 000 2z"></path></svg></span><input type="checkbox" id="" class="task-list-item-checkbox" style="box-sizing: border-box; font: inherit; margin: 0px 0.2em 0.25em -1.4em; overflow: visible; padding: 0px; vertical-align: middle;"><span> </span>🛠️<span> </span><strong style="box-sizing: border-box; font-weight: var(--base-text-weight-semibold, 600);">Bug fix:</strong><span> </span>Resolves an issue without altering current behavior.</li><li class="task-list-item enabled" style="box-sizing: border-box; list-style-type: none; margin-top: 0px; margin-left: -15px; padding: 2px 15px 2px 42px; margin-right: -15px; line-height: 1.5; border: 0px;"><span class="handle" style="box-sizing: border-box; display: block; float: left; width: 20px; padding: 2px 0px 0px 2px; margin-left: -43px; opacity: 0;"><svg class="drag-handle" aria-hidden="true" width="16" height="16"><path d="M10 13a1 1 0 100-2 1 1 0 000 2zm-4 0a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zm3 1a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zM6 5a1 1 0 100-2 1 1 0 000 2z"></path></svg></span><input type="checkbox" id="" class="task-list-item-checkbox" style="box-sizing: border-box; font: inherit; margin: 0px 0.2em 0.25em -1.4em; overflow: visible; padding: 0px; vertical-align: middle;"><span> </span>🧹<span> </span><strong style="box-sizing: border-box; font-weight: var(--base-text-weight-semibold, 600);">Code refactor:</strong><span> </span>Code restructuring that does not affect behavior.</li><li class="task-list-item enabled" style="box-sizing: border-box; list-style-type: none; margin-top: 0px; margin-left: -15px; padding: 2px 15px 2px 42px; margin-right: -15px; line-height: 1.5; border: 0px;"><span class="handle" style="box-sizing: border-box; display: block; float: left; width: 20px; padding: 2px 0px 0px 2px; margin-left: -43px; opacity: 0;"><svg class="drag-handle" aria-hidden="true" width="16" height="16"><path d="M10 13a1 1 0 100-2 1 1 0 000 2zm-4 0a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zm3 1a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zM6 5a1 1 0 100-2 1 1 0 000 2z"></path></svg></span><input type="checkbox" id="" class="task-list-item-checkbox" style="box-sizing: border-box; font: inherit; margin: 0px 0.2em 0.25em -1.4em; overflow: visible; padding: 0px; vertical-align: middle;"><span> </span>❌<span> </span><strong style="box-sizing: border-box; font-weight: var(--base-text-weight-semibold, 600);">Breaking change:</strong><span> </span>Alters existing functionality and requires updates.</li><li class="task-list-item enabled" style="box-sizing: border-box; list-style-type: none; margin-top: 0px; margin-left: -15px; padding: 2px 15px 2px 42px; margin-right: -15px; line-height: 1.5; border: 0px;"><span class="handle" style="box-sizing: border-box; display: block; float: left; width: 20px; padding: 2px 0px 0px 2px; margin-left: -43px; opacity: 0;"><svg class="drag-handle" aria-hidden="true" width="16" height="16"><path d="M10 13a1 1 0 100-2 1 1 0 000 2zm-4 0a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zm3 1a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zM6 5a1 1 0 100-2 1 1 0 000 2z"></path></svg></span><input type="checkbox" id="" class="task-list-item-checkbox" style="box-sizing: border-box; font: inherit; margin: 0px 0.2em 0.25em -1.4em; overflow: visible; padding: 0px; vertical-align: middle;"><span> </span>🧪<span> </span><strong style="box-sizing: border-box; font-weight: var(--base-text-weight-semibold, 600);">Tests:</strong><span> </span>Adds new tests or modifies existing tests.</li><li class="task-list-item enabled" style="box-sizing: border-box; list-style-type: none; margin-top: 0px; margin-left: -15px; padding: 2px 15px 2px 42px; margin-right: -15px; line-height: 1.5; border: 0px;"><span class="handle" style="box-sizing: border-box; display: block; float: left; width: 20px; padding: 2px 0px 0px 2px; margin-left: -43px; opacity: 0;"><svg class="drag-handle" aria-hidden="true" width="16" height="16"><path d="M10 13a1 1 0 100-2 1 1 0 000 2zm-4 0a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zm3 1a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zM6 5a1 1 0 100-2 1 1 0 000 2z"></path></svg></span><input type="checkbox" id="" class="task-list-item-checkbox" style="box-sizing: border-box; font: inherit; margin: 0px 0.2em 0.25em -1.4em; overflow: visible; padding: 0px; vertical-align: middle;"><span> </span>📝<span> </span><strong style="box-sizing: border-box; font-weight: var(--base-text-weight-semibold, 600);">Documentation:</strong><span> </span>Updates or additions to documentation.</li><li class="task-list-item enabled" style="box-sizing: border-box; list-style-type: none; margin-top: 0px; margin-left: -15px; padding: 2px 15px 2px 42px; margin-right: -15px; line-height: 1.5; border: 0px;"><span class="handle" style="box-sizing: border-box; display: block; float: left; width: 20px; padding: 2px 0px 0px 2px; margin-left: -43px; opacity: 0;"><svg class="drag-handle" aria-hidden="true" width="16" height="16"><path d="M10 13a1 1 0 100-2 1 1 0 000 2zm-4 0a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zm3 1a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zM6 5a1 1 0 100-2 1 1 0 000 2z"></path></svg></span><input type="checkbox" id="" class="task-list-item-checkbox" style="box-sizing: border-box; font: inherit; margin: 0px 0.2em 0.25em -1.4em; overflow: visible; padding: 0px; vertical-align: middle;"><span> </span>🗑️<span> </span><strong style="box-sizing: border-box; font-weight: var(--base-text-weight-semibold, 600);">Chore:</strong><span> </span>Routine tasks, or maintenance.</li><li class="task-list-item enabled" style="box-sizing: border-box; list-style-type: none; margin-top: 0px; margin-left: -15px; padding: 2px 15px 2px 42px; margin-right: -15px; line-height: 1.5; border: 0px;"><span class="handle" style="box-sizing: border-box; display: block; float: left; width: 20px; padding: 2px 0px 0px 2px; margin-left: -43px; opacity: 0;"><svg class="drag-handle" aria-hidden="true" width="16" height="16"><path d="M10 13a1 1 0 100-2 1 1 0 000 2zm-4 0a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zm3 1a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zM6 5a1 1 0 100-2 1 1 0 000 2z"></path></svg></span><input type="checkbox" id="" class="task-list-item-checkbox" style="box-sizing: border-box; font: inherit; margin: 0px 0.2em 0.25em -1.4em; overflow: visible; padding: 0px; vertical-align: middle;"><span> </span>✅<span> </span><strong style="box-sizing: border-box; font-weight: var(--base-text-weight-semibold, 600);">Build configuration change:</strong><span> </span>Changes to build or deploy processes.</li></ul>
EchoEllet commented 1 month ago

Use this Diffchecker link to see the differences between the two.

CatHood0 commented 1 month ago

I'll check if this could be an issue from flutter_quill_delta_from_html.

Edit: I tested both HTML examples, and both gives to me exactly the Delta what i expected. Can you provide exactly the HTML that you are copying?

EchoEllet commented 1 month ago

Can you provide exactly the HTML that you are copying?

I have copied the same content in a different way. The system clipboard API provided me with a different HTML, I will update this issue soon since I need more time to provide more specific details.

both gives to me exactly the Delta what i expected.

I didn't see the Delta that's being pasted into the editor. It can be rendering or visual issue. Did you try to replicate what I did in the example video on desktop?

Can you explain what you tried?

CatHood0 commented 1 month ago

I forgot to mention it. Since I thought it might be a bug in the package, I ran my tests (obviously I added a test that has the HTML you passed as an example) and the Deltas that came back to me contained what I expected (either a TODO list with its values, whether checked or unchecked). That's why I asked you for the exact HTML that you get when you copy the list (mostly to check if it's not that the package is confusing values ​​and returning unexpected Deltas).

Example

Assume that i testing with the HTML with all <li> checked. When i run my tests, this is the Delta resulting (i need to check why are empty inserts):

Captura de pantalla_2024-09-15_18-41-43

EchoEllet commented 1 month ago

Sure, but the issue can be either from the editor itself or from the HTML we're copying, which can be platfrom dependent and different based on the app, operating system.

If the HTML from the platfrom Clipboard we're getting doesn't have the values we expect from what we've copying, then we will probably close this issue as unplanned.