search

silexlabs / grapesjs-symbols

Symbols plugin for GrapesJS: reuse elements in a website accross pages
GNU Affero General Public License v3.0
16 stars 7 forks source link

Inconsistent performance of the same symbols #8

Closed pittleCheung closed 1 year ago

pittleCheung commented 1 year ago

I was playing with Symbols on grapes and saw your project, An amazing plugin，Below is my problem I create symbol Test title page 1

image

page2

image

after when change the text page 2

image

page 1

image

I just changed the symbol text on page2 and then went back to page1 and it disappeared

lexoyo commented 1 year ago

Hi! Thank you for the big report Would you pls check the console and see if there are errors? Can you reproduce that every time ? I'll need precise instructions to be able to reproduce it Also what is your browser ?

On May 31, 2023, 17:43, at 17:43, pittleCheung @.***> wrote:

I was playing with Symbols on grapes and saw your project, An amazing plugin，Below is my problem I create symbol Test title page 1 <img width="1656" alt="image" src="https://github.com/silexlabs/grapesjs-symbols/assets/114127651/3b3acde5-c5b3-4c31-9b86-cc5ea50148b7">

page2 <img width="1666" alt="image" src="https://github.com/silexlabs/grapesjs-symbols/assets/114127651/756b245e-501d-45b3-be62-71849ce45779">

after when change the text page 2 <img width="1669" alt="image" src="https://github.com/silexlabs/grapesjs-symbols/assets/114127651/da04ab97-106c-4983-8146-c64cd008e00e">

page 1 <img width="1673" alt="image" src="https://github.com/silexlabs/grapesjs-symbols/assets/114127651/3ae2a651-913b-471c-b11b-b1237dc77438">

I just changed the symbol text on page2 and then went back to page1 and it disappeared

-- Reply to this email directly or view it on GitHub: https://github.com/silexlabs/grapesjs-symbols/issues/8 You are receiving this because you are subscribed to this thread.

Message ID: @.***>

pittleCheung commented 1 year ago

I am using google browser but this problem also occurs in safari

Scenes 1

image

Scenes 2

image

Scenes 3

image

Scenes 4

image

do you know what i mean？

pittleCheung commented 1 year ago

When the symbol I created is a text component, and then I change the text component, this will appear

lexoyo commented 1 year ago

Ok I I can try to reproduce now thank you

On Jun 1, 2023, 06:01, at 06:01, pittleCheung @.***> wrote:

I am using google browser but this problem also occurs in safari

Scenes 1 <img width="1676" alt="image" src="https://github.com/silexlabs/grapesjs-symbols/assets/114127651/1dfcec9e-efa4-4f2d-a1e6-70c6ff20b3cc"> Scenes 2 <img width="1677" alt="image" src="https://github.com/silexlabs/grapesjs-symbols/assets/114127651/0a4a7c8f-8a5f-4fb8-b33d-720b5bf8f323"> Scenes 3 <img width="1676" alt="image" src="https://github.com/silexlabs/grapesjs-symbols/assets/114127651/c59e03d9-09bb-47f5-8c1f-4c7f7400ec9d"> Scenes 4 <img width="1678" alt="image" src="https://github.com/silexlabs/grapesjs-symbols/assets/114127651/14fd40cf-6e7f-43f6-b7d8-9eafdff5ee27">

do you know what i mean？

-- Reply to this email directly or view it on GitHub: https://github.com/silexlabs/grapesjs-symbols/issues/8#issuecomment-1571298122 You are receiving this because you commented.

Message ID: @.***>

pittleCheung commented 1 year ago

Thank you for reply ! i'm not familiar with backbone, but I can learn，Your amazing plugin is too complicated for me now so can you help me with this problem，

pittleCheung commented 1 year ago

https://github.com/GrapesJS/grapesjs/discussions/4317

image

I want to ask if you have solved this problem, I also encountered this situation, I am cmp.replaceWith this api, this problem will occur when changing the edited text real-time update component

lexoyo commented 1 year ago

Hi Not sure I understand but yes I solved this problem You have performance issues?

On Jun 1, 2023, 17:51, at 17:51, pittleCheung @.***> wrote:

https://github.com/GrapesJS/grapesjs/discussions/4317 <img width="717" alt="image" src="https://github.com/silexlabs/grapesjs-symbols/assets/114127651/9700ac4b-2470-4ed5-baac-59d1243c4fb0"> I want to ask if you have solved this problem, I also encountered this situation, I am cmp.replaceWith this api, this problem will occur when changing the edited text real-time update component

-- Reply to this email directly or view it on GitHub: https://github.com/silexlabs/grapesjs-symbols/issues/8#issuecomment-1572309426 You are receiving this because you commented.

Message ID: @.***>

lexoyo commented 1 year ago

Sure ! I'll try to find a few hours next week and hopefully will sort this out

On Jun 1, 2023, 16:17, at 16:17, pittleCheung @.***> wrote:

Thank you for reply ! i'm not familiar with backbone, but I can learn，Your amazing plugin is too complicated for me now so can you help me with this problem，

-- Reply to this email directly or view it on GitHub: https://github.com/silexlabs/grapesjs-symbols/issues/8#issuecomment-1572136521 You are receiving this because you commented.

Message ID: @.***>

pittleCheung commented 1 year ago

Hi Not sure I understand but yes I solved this problem You have performance issues? … On Jun 1, 2023, 17:51, at 17:51, pittleCheung @.> wrote: GrapesJS/grapesjs#4317 image I want to ask if you have solved this problem, I also encountered this situation, I am cmp.replaceWith this api, this problem will occur when changing the edited text real-time update component -- Reply to this email directly or view it on GitHub: #8 (comment) You are receiving this because you commented. Message ID: @.>

this's great, So what do you think caused the problem of this text disappearing？ I'm really not familiar with Backbone.js, I think I should learn it ，

What I want to ask is how do you deal with this text sync problem on the same page, I use editor.on( "component:update",(component) => { replaceWith(component. clone()) }), it leads to the issue of the sync the change of text element，the cursor is sent back to the beginning of the element.

pittleCheung commented 1 year ago

I found this problem. When the editor is in the state of editing text, trigger the component:update hook to get the latest component and then use component.clone to get the textNode component out of the latest text data

pittleCheung commented 1 year ago

https://github.com/GrapesJS/grapesjs/discussions/5152

pittleCheung commented 1 year ago

I'm guessing this could be the cause, but I'm not sure

lexoyo commented 1 year ago

I solved it by just not updating the component which is changing i think

lexoyo commented 1 year ago

Here i set the carret position too https://github.com/silexlabs/grapesjs-symbols/blob/main/src/model/Symbol.js#L215

lexoyo commented 1 year ago

hi @pittleCheung i'm working on that right now i ported all the code to typescript, it will be more robust

lexoyo commented 1 year ago

I just published a new version after porting all to typescript I think it is solved as I can not reproduce it with this latest version (1.0.20)

Would you let me know if it is fixed?