issues.json

[
  {
    "markdown": "[Skip to content](https://github.com/grapesjs/grapesjs/issues/4837#start-of-content)\n\nYou signed in with another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/4837) to refresh your session.You signed out in another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/4837) to refresh your session.You switched accounts on another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/4837) to refresh your session.Dismiss alert\n\n[GrapesJS](https://github.com/GrapesJS)/ **[grapesjs](https://github.com/GrapesJS/grapesjs)** Public\n\n- Sponsor\n\n\n\n\n\n\n\n# Sponsor GrapesJS/grapesjs\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n##### External links\n\n\n\n\n\n![open_collective](https://github.githubassets.com/assets/open_collective-0a706523753d.svg)\n\n\n\n[opencollective.com/ **grapesjs**](https://opencollective.com/grapesjs)\n\n\n\n\n\n\n\n\n\n[Learn more about funding links in repositories](https://docs.github.com/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/displaying-a-sponsor-button-in-your-repository).\n\n\n\n\n[Report abuse](https://github.com/contact/report-abuse?report=GrapesJS%2Fgrapesjs+%28Repository+Funding+Links%29)\n\n- [Notifications](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs) You must be signed in to change notification settings\n- [Fork\\\\\n4.2k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n- [Star\\\\\n23.4k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n\n\n# BUG: HTML elements ids are incremented on different pages loaded in projectData\\#4837\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/4837)\n\nCopy link\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/4837)\n\nCopy link\n\nOpen\n\nOpen\n\n[BUG: HTML elements ids are incremented on different pages loaded in projectData](https://github.com/grapesjs/grapesjs/issues/4837#top)#4837\n\nCopy link\n\n[![@quentin-bettoum](https://avatars.githubusercontent.com/u/63603941?u=61dad8ac5028440d952b080694ec29bd3c3614bb&v=4&size=80)](https://github.com/quentin-bettoum)\n\n## Description\n\n[![@quentin-bettoum](https://avatars.githubusercontent.com/u/63603941?u=61dad8ac5028440d952b080694ec29bd3c3614bb&v=4&size=48)](https://github.com/quentin-bettoum)\n\n[quentin-bettoum](https://github.com/quentin-bettoum)\n\nopened [on Jan 10, 2023](https://github.com/GrapesJS/grapesjs/issues/4837#issue-1527827709)\n\n### GrapesJS version\n\n- I confirm to use the latest version of GrapesJS\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n### What browser are you using?\n\nFirefox 109\n\n### Reproducible demo link\n\n[https://grapesjs.com/demo.html](https://grapesjs.com/demo.html)\n\n### Describe the bug\n\nHello,\n\nI noticed that when I load multiple pages in the projectData that have the same `id` used in the HTML, grapes will automatically increment the `id` on every page even though these are different pages.\n\nTo demonstrate this issue, you will find a piece of code below where I init grapesjs with a `projectData` containing two pages using identical ids on some HTML tags.\n\nOn the resulting HTML list, you can see the ids like `body` and `main-title` are incremented to `body-2` and `main-title-2` on the second page.\n\n```\nconst editortest = grapesjs.init({\n  headless: true,\n  projectData: {\n    pages: [\\\n      {\\\n        \"frames\": [\\\n          {\\\n            \"component\": {\\\n              \"type\": \"wrapper\",\\\n              \"stylable\": [\\\n                \"background\",\\\n                \"background-color\",\\\n                \"background-image\",\\\n                \"background-repeat\",\\\n                \"background-attachment\",\\\n                \"background-position\",\\\n                \"background-size\"\\\n              ],\\\n              \"attributes\": {\\\n                \"id\": \"body\"\\\n              },\\\n              \"components\": [\\\n                {\\\n                  \"tagName\": \"section\",\\\n                  \"components\": [\\\n                    {\\\n                      \"tagName\": \"h1\",\\\n                      \"type\": \"text\",\\\n                      \"attributes\": {\\\n                        \"id\": \"main-title\"\\\n                      },\\\n                      \"components\": [\\\n                        {\\\n                          \"type\": \"textnode\",\\\n                          \"content\": \"This is a simple title\"\\\n                        }\\\n                      ]\\\n                    },\\\n                    {\\\n                      \"type\": \"text\",\\\n                      \"components\": [\\\n                        {\\\n                          \"type\": \"textnode\",\\\n                          \"content\": \"This is just a Lorem text: Lorem ipsum dolor sit amet\"\\\n                        }\\\n                      ]\\\n                    }\\\n                  ]\\\n                }\\\n              ]\\\n            }\\\n          }\\\n        ],\\\n        \"id\": \"ljc0blhC1ZeiCYyY\"\\\n      },\\\n      {\\\n        \"frames\": [\\\n          {\\\n            \"component\": {\\\n              \"type\": \"wrapper\",\\\n              \"stylable\": [\\\n                \"background\",\\\n                \"background-color\",\\\n                \"background-image\",\\\n                \"background-repeat\",\\\n                \"background-attachment\",\\\n                \"background-position\",\\\n                \"background-size\"\\\n              ],\\\n              \"attributes\": {\\\n                \"id\": \"body\"\\\n              },\\\n              \"components\": [\\\n                {\\\n                  \"tagName\": \"section\",\\\n                  \"components\": [\\\n                    {\\\n                      \"tagName\": \"h1\",\\\n                      \"type\": \"text\",\\\n                      \"attributes\": {\\\n                        \"id\": \"main-title\"\\\n                      },\\\n                      \"components\": [\\\n                        {\\\n                          \"type\": \"textnode\",\\\n                          \"content\": \"This is another title\"\\\n                        }\\\n                      ]\\\n                    },\\\n                    {\\\n                      \"type\": \"text\",\\\n                      \"components\": [\\\n                        {\\\n                          \"type\": \"textnode\",\\\n                          \"content\": \"Some other text\"\\\n                        }\\\n                      ]\\\n                    }\\\n                  ]\\\n                }\\\n              ]\\\n            }\\\n          }\\\n        ],\\\n        \"id\": \"1zKkQnGVzy8nKXKE\"\\\n      }\\\n    ]\n  }\n})\n\nlet pages = editortest.Pages.getAll().map(page => {\n  const component = page.getMainComponent();\n  return editortest.getHtml({ component })\n});\n\nconsole.log(pages)\n```\n\nThe `pages` result:\n\n```\n[\\\n  \"<body id=\\\"body\\\"><section><h1 id=\\\"main-title\\\">This is a simple title</h1><div>This is just a Lorem text: Lorem ipsum dolor sit amet</div></section></body>\",\\\n  \"<body id=\\\"body-2\\\"><section><h1 id=\\\"main-title-2\\\">This is another title</h1><div>Some other text</div></section></body>\"\\\n]\n```\n\n### Code of Conduct\n\n- I agree to follow this project's Code of Conduct\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n👍2\n\n## Activity\n\n[![artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=80)](https://github.com/artf)\n\n### artf commented on Jan 17, 2023\n\n[![@artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=48)](https://github.com/artf)\n\n[artf](https://github.com/artf)\n\n[on Jan 17, 2023](https://github.com/GrapesJS/grapesjs/issues/4837#issuecomment-1386599586)\n\nMember\n\nEven with multiple pages all components have to maintain a unique id across whole project.\n\nI'd not expect the editor to output this so I'm wondering if you edited the JSON on purpose or you have reproducible steps to have this outcome?\n\n[![quentin-bettoum](https://avatars.githubusercontent.com/u/63603941?u=61dad8ac5028440d952b080694ec29bd3c3614bb&v=4&size=80)](https://github.com/quentin-bettoum)\n\n### quentin-bettoum commented on Jan 18, 2023\n\n[![@quentin-bettoum](https://avatars.githubusercontent.com/u/63603941?u=61dad8ac5028440d952b080694ec29bd3c3614bb&v=4&size=48)](https://github.com/quentin-bettoum)\n\n[quentin-bettoum](https://github.com/quentin-bettoum)\n\n[on Jan 18, 2023](https://github.com/GrapesJS/grapesjs/issues/4837#issuecomment-1386891739)\n\nContributorAuthor\n\nMy use case might explain how I had this result.\n\nI am building a CMS using GrapesJS as a Page Builder.\n\nTo create each page, I chose to load Grapes in \"single page mode\", if that makes sense. This is to avoid sending too much data to the client on a project containing a lot of pages.\n\nThen, to generate the final website, the goal is to load Grapes in headless mode serverside (using NodeJS) to merge all the pages and styles.\n\nI can live without ids at the moment, this is just something I noticed in my multiple tries.\n\nIn the long term, maybe it could make sense for Grapes to use some [data attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*) (something like `data-grapes-id`) as unique identifiers to leave the **id** free for some frontend scripts.\n\nI might open a **discussion** where we could speak more about this CMS I'm building. I'd be glad to have your opinions and advices on my design choices.\n\n[![artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=80)](https://github.com/artf)\n\n### artf commented on Jan 26, 2023\n\n[![@artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=48)](https://github.com/artf)\n\n[artf](https://github.com/artf)\n\n[on Jan 26, 2023](https://github.com/GrapesJS/grapesjs/issues/4837#issuecomment-1406183387)\n\nMember\n\n> Then, to generate the final website, the goal is to load Grapes in headless mode serverside (using NodeJS) to merge all the pages and styles.\n\nI'm wondering if it would make sense to you generating each page separately\n\n[![quentin-bettoum](https://avatars.githubusercontent.com/u/63603941?u=61dad8ac5028440d952b080694ec29bd3c3614bb&v=4&size=80)](https://github.com/quentin-bettoum)\n\n### quentin-bettoum commented on Jan 27, 2023\n\n[![@quentin-bettoum](https://avatars.githubusercontent.com/u/63603941?u=61dad8ac5028440d952b080694ec29bd3c3614bb&v=4&size=48)](https://github.com/quentin-bettoum)\n\n[quentin-bettoum](https://github.com/quentin-bettoum)\n\n[on Jan 27, 2023](https://github.com/GrapesJS/grapesjs/issues/4837#issuecomment-1406596467)\n\nContributorAuthor\n\nAt first, I wanted to generate all the pages together to have a single CSS output for all the pages. But now I'm trying another solution for the styles.\n\nSo for the `id` problem, generating each page separately could be a solution. Thanks for the idea.\n\n👍1\n\n[![vizardkill](https://avatars.githubusercontent.com/u/37307788?u=ec63ef1653c504d00599df662413bfa782a2e5aa&v=4&size=80)](https://github.com/vizardkill)\n\n### vizardkill commented on Feb 23, 2023\n\n[![@vizardkill](https://avatars.githubusercontent.com/u/37307788?u=ec63ef1653c504d00599df662413bfa782a2e5aa&v=4&size=48)](https://github.com/vizardkill)\n\n[vizardkill](https://github.com/vizardkill)\n\n[on Feb 23, 2023](https://github.com/GrapesJS/grapesjs/issues/4837#issuecomment-1441987301)\n\nI have a question regarding the StoreManager, if users start creating many pages, at what point does performance start to be lost? , taking into account that you must store the assets, and the styles and taking into account how you could store this information in a database without affecting the load of the API when processing so much information\n\n[![lexoyo](https://avatars.githubusercontent.com/u/715377?u=7aa7b55b3da813ca320ef07ec8019991c2f45b08&v=4&size=80)](https://github.com/lexoyo)\n\n### lexoyo commented on Apr 24, 2023\n\n[![@lexoyo](https://avatars.githubusercontent.com/u/715377?u=7aa7b55b3da813ca320ef07ec8019991c2f45b08&v=4&size=48)](https://github.com/lexoyo)\n\n[lexoyo](https://github.com/lexoyo)\n\n[on Apr 24, 2023](https://github.com/GrapesJS/grapesjs/issues/4837#issuecomment-1520820669)\n\nContributor\n\nHello\n\nIn Silex v3 I encounter this bug too and I have a use case for which it is a real issue unfortunately\n\nWe have a menu using a checkbox and a label to open/close it so we need to have an id on the checkbox (used in the `for` attribute of the label)\n\nWe use symbols to have the menu on all pages so it has to be the same id...\n\n[![bgrand-ch](https://avatars.githubusercontent.com/u/17108974?u=a878580172a2336888d8e890a05d2b1ac1ead192&v=4&size=80)](https://github.com/bgrand-ch)\n\n### bgrand-ch commented on Sep 25, 2023\n\n[![@bgrand-ch](https://avatars.githubusercontent.com/u/17108974?u=a878580172a2336888d8e890a05d2b1ac1ead192&v=4&size=48)](https://github.com/bgrand-ch)\n\n[bgrand-ch](https://github.com/bgrand-ch)\n\n[on Sep 25, 2023](https://github.com/GrapesJS/grapesjs/issues/4837#issuecomment-1734830031)\n\nContributor\n\n> Grapes to use some data attributes (something like `data-grapes-id`) as unique identifiers to leave the id free for some frontend scripts.\n\nI like this idea 💯\n\n👍1\n\n[![elfalem](https://avatars.githubusercontent.com/u/11811344?v=4&size=80)](https://github.com/elfalem)\n\n### elfalem commented on Aug 7, 2024\n\n[![@elfalem](https://avatars.githubusercontent.com/u/11811344?v=4&size=48)](https://github.com/elfalem)\n\n[elfalem](https://github.com/elfalem)\n\n[on Aug 7, 2024](https://github.com/GrapesJS/grapesjs/issues/4837#issuecomment-2273849122)\n\nI also have a use case where the content is initially generated outside of the editor so different pages can have elements with the same id.\n\n> Even with multiple pages all components have to maintain a unique id across whole project.\n\nIs it possible to relax this constraint so that ids are namespaced by pages?\n\n[![bgrand-ch](https://avatars.githubusercontent.com/u/17108974?u=a878580172a2336888d8e890a05d2b1ac1ead192&v=4&size=80)](https://github.com/bgrand-ch)\n\n### bgrand-ch commented on Jan 22, 2025\n\n[![@bgrand-ch](https://avatars.githubusercontent.com/u/17108974?u=a878580172a2336888d8e890a05d2b1ac1ead192&v=4&size=48)](https://github.com/bgrand-ch)\n\n[bgrand-ch](https://github.com/bgrand-ch)\n\n[on Jan 22, 2025](https://github.com/GrapesJS/grapesjs/issues/4837#issuecomment-2608214788)\n\nContributor\n\n[@artf](https://github.com/artf) Hello, I hope you are well. Do you agree with the proposal to use the data attribute instead of the id?\n\n[![artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=80)](https://github.com/artf)\n\n### artf commented on Jan 27, 2025\n\n[![@artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=48)](https://github.com/artf)\n\n[artf](https://github.com/artf)\n\n[on Jan 27, 2025](https://github.com/GrapesJS/grapesjs/issues/4837#issuecomment-2615645917)\n\nMember\n\nhey [@bgrand-ch](https://github.com/bgrand-ch) I think one day all grapesjs entities will have a global `uid`, so in long-term, I'd expect this issue to be fixed 🤞\n\n👍1🚀1\n\n[Sign up for free](https://github.com/signup?return_to=https://github.com/grapesjs/grapesjs/issues/4837)**to join this conversation on GitHub.** Already have an account? [Sign in to comment](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/4837)\n\n## Metadata\n\n### Assignees\n\nNo one assigned\n\n### Labels\n\nNo labels\n\nNo labels\n\n### Type\n\nNo type\n\n### Projects\n\nNo projects\n\n### Milestone\n\nNo milestone\n\n### Relationships\n\nNone yet\n\n### Development\n\nNo branches or pull requests\n\n### Participants\n\n[![@lexoyo](https://avatars.githubusercontent.com/u/715377?s=64&u=7aa7b55b3da813ca320ef07ec8019991c2f45b08&v=4)](https://github.com/lexoyo)[![@artf](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)](https://github.com/artf)[![@elfalem](https://avatars.githubusercontent.com/u/11811344?s=64&v=4)](https://github.com/elfalem)[![@bgrand-ch](https://avatars.githubusercontent.com/u/17108974?s=64&u=a878580172a2336888d8e890a05d2b1ac1ead192&v=4)](https://github.com/bgrand-ch)[![@vizardkill](https://avatars.githubusercontent.com/u/37307788?s=64&u=ec63ef1653c504d00599df662413bfa782a2e5aa&v=4)](https://github.com/vizardkill)\n\n+1\n\n## Issue actions\n\nYou can’t perform that action at this time.\n\n\nBUG: HTML elements ids are incremented on different pages loaded in projectData · Issue #4837 · GrapesJS/grapesjs",
    "metadata": {
      "url": "https://github.com/grapesjs/grapesjs/issues/4837",
      "ogUrl": "https://github.com/GrapesJS/grapesjs/issues/4837",
      "title": "BUG: HTML elements ids are incremented on different pages loaded in projectData · Issue #4837 · GrapesJS/grapesjs",
      "og:url": "https://github.com/GrapesJS/grapesjs/issues/4837",
      "favicon": {},
      "og:type": "object",
      "ogImage": "https://opengraph.githubassets.com/71c2cba2f1bc56ca510c7f1b1568707f05d0e0fdc7a95543d6ae68db60d9cf87/GrapesJS/grapesjs/issues/4837",
      "ogTitle": "BUG: HTML elements ids are incremented on different pages loaded in projectData · Issue #4837 · GrapesJS/grapesjs",
      "hostname": "github.com",
      "language": "en",
      "og:image": "https://opengraph.githubassets.com/71c2cba2f1bc56ca510c7f1b1568707f05d0e0fdc7a95543d6ae68db60d9cf87/GrapesJS/grapesjs/issues/4837",
      "og:title": "BUG: HTML elements ids are incremented on different pages loaded in projectData · Issue #4837 · GrapesJS/grapesjs",
      "scrapeId": "0a3c95b8-0c2f-4167-92b2-359d0bf262c8",
      "viewport": "width=device-width",
      "fb:app_id": "1401488693436528",
      "go-import": "github.com/GrapesJS/grapesjs git https://github.com/GrapesJS/grapesjs.git",
      "sourceURL": "https://github.com/grapesjs/grapesjs/issues/4837",
      "ogSiteName": "GitHub",
      "request-id": "B4AB:2E5F9B:3462E72:4928C0B:67AF54A0",
      "statusCode": 200,
      "user-login": "",
      "description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Firefox 109 Reproducible demo link https://grapesjs.com/demo.html Describe the bug Hello, I noticed that when I load multiple pages in the proje...",
      "theme-color": "#1e2327",
      "color-scheme": "light dark",
      "og:image:alt": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Firefox 109 Reproducible demo link https://grapesjs.com/demo.html Describe the bug Hello, I noticed that...",
      "og:site_name": "GitHub",
      "route-action": "issue_layout",
      "twitter:card": "summary_large_image",
      "twitter:site": "@github",
      "visitor-hmac": "7daf1dfb76703342584c74650f21e033881d4da52ef4a9e713dac88db8f6f1ae",
      "ogDescription": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Firefox 109 Reproducible demo link https://grapesjs.com/demo.html Describe the bug Hello, I noticed that...",
      "route-pattern": "/_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format)",
      "twitter:image": "https://opengraph.githubassets.com/71c2cba2f1bc56ca510c7f1b1568707f05d0e0fdc7a95543d6ae68db60d9cf87/GrapesJS/grapesjs/issues/4837",
      "twitter:title": "BUG: HTML elements ids are incremented on different pages loaded in projectData · Issue #4837 · GrapesJS/grapesjs",
      "octolytics-url": "https://collector.github.com/github/collect",
      "og:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Firefox 109 Reproducible demo link https://grapesjs.com/demo.html Describe the bug Hello, I noticed that...",
      "og:image:width": "1200",
      "html-safe-nonce": "c35b93b95fda10d67af2cbfa5fe744bcce282a886a960782d318996a30f86d09",
      "og:image:height": "600",
      "visitor-payload": "eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJCNEFCOjJFNUY5QjozNDYyRTcyOjQ5MjhDMEI6NjdBRjU0QTAiLCJ2aXNpdG9yX2lkIjoiNzI2OTY0Mzc1NDExNTM4ODU3NiIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9",
      "apple-itunes-app": "app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/grapesjs/grapesjs/4837/issue_layout",
      "route-controller": "voltron_issues_fragments",
      "browser-stats-url": "https://api.github.com/_private/browser/stats",
      "expected-hostname": "github.com",
      "analytics-location": "/<user-name>/<repo-name>/voltron/issues_fragments/issue_layout",
      "browser-errors-url": "https://api.github.com/_private/browser/errors",
      "og:author:username": "quentin-bettoum",
      "turbo-body-classes": "logged-out env-production page-responsive",
      "turbo-cache-control": "no-preview",
      "twitter:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Firefox 109 Reproducible demo link https://grapesjs.com/demo.html Describe the bug Hello, I noticed that...",
      "hovercard-subject-tag": "issue:1527827709",
      "google-site-verification": "Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I",
      "github-keyboard-shortcuts": "repository,issues,copilot",
      "current-catalog-service-hash": "81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114",
      "octolytics-dimension-user_id": "123950155",
      "octolytics-dimension-user_login": "GrapesJS",
      "octolytics-dimension-repository_id": "50146229",
      "octolytics-dimension-repository_nwo": "GrapesJS/grapesjs",
      "octolytics-dimension-repository_public": "true",
      "octolytics-dimension-repository_is_fork": "false",
      "octolytics-dimension-repository_network_root_id": "50146229",
      "octolytics-dimension-repository_network_root_nwo": "GrapesJS/grapesjs"
    }
  },
  {
    "markdown": "[Skip to content](https://github.com/grapesjs/grapesjs/issues#start-of-content)\n\nYou signed in with another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues) to refresh your session.You signed out in another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues) to refresh your session.You switched accounts on another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues) to refresh your session.Dismiss alert\n\n[GrapesJS](https://github.com/GrapesJS)/ **[grapesjs](https://github.com/GrapesJS/grapesjs)** Public\n\n- Sponsor\n\n\n\n\n\n\n\n# Sponsor GrapesJS/grapesjs\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n##### External links\n\n\n\n\n\n![open_collective](https://github.githubassets.com/assets/open_collective-0a706523753d.svg)\n\n\n\n[opencollective.com/ **grapesjs**](https://opencollective.com/grapesjs)\n\n\n\n\n\n\n\n\n\n[Learn more about funding links in repositories](https://docs.github.com/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/displaying-a-sponsor-button-in-your-repository).\n\n\n\n\n[Report abuse](https://github.com/contact/report-abuse?report=GrapesJS%2Fgrapesjs+%28Repository+Funding+Links%29)\n\n- [Notifications](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs) You must be signed in to change notification settings\n- [Fork\\\\\n4.2k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n- [Star\\\\\n23.4k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n\n\nPreview\n\n- [GrapesJS out in the wild](https://github.com/GrapesJS/grapesjs/issues/1798)\n\n\n\n#1798 · [chrisedington](https://github.com/chrisedington) opened on Feb 14, 2019\n\n48\n\n- [Roadmap](https://github.com/GrapesJS/grapesjs/issues/74)\n\n\n\n#74 · [artf](https://github.com/artf) opened on Apr 18, 2017\n\n51\n\n- [Hire GrapesJS developers](https://github.com/GrapesJS/grapesjs/issues/2686)\n\n\n\n#2686 · [JonyBlade](https://github.com/JonyBlade) opened on Mar 25, 2020\n\n12\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n# Issues\n\nSearch Issues\n\nis:issuestate:open\n\nis:issue state:open\n\nClear filter\n\nSearch\n\n[Labels](https://github.com/grapesjs/grapesjs/labels) [Milestones](https://github.com/grapesjs/grapesjs/milestones) [New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues)\n\n## Search results\n\n- [Open\\\\\n15 (15)](https://github.com/grapesjs/grapesjs/issues)\n- [Closed\\\\\n3,722 (3,722)](https://github.com/grapesjs/grapesjs/issues?q=is%3Aissue%20state%3Aclosed)\n\nAuthor\n\nLabels\n\nProjects\n\nMilestones\n\nAssignees\n\nTypes\n\nNewest\n\n### [BUG: layer manager bug on Safari Mac](https://github.com/grapesjs/grapesjs/issues/6394)\n\nStatus: Open.\n\n#6394In grapesjs/grapesjs;\n\n· [spyjo](https://github.com/grapesjs/grapesjs/issues?q=is%3Aissue%20state%3Aopen%20author%3Aspyjo) opened on Feb 1, 2025\n\n### [BUG: Cannot select + SHIFT to select bulk text](https://github.com/grapesjs/grapesjs/issues/6345)\n\nStatus: Open.\n\n#6345In grapesjs/grapesjs;\n\n· [VanTranTrucPhuong](https://github.com/grapesjs/grapesjs/issues?q=is%3Aissue%20state%3Aopen%20author%3AVanTranTrucPhuong) opened on Dec 5, 2024\n\n### [BUG: React Custom UI `Modal` Unable to display `Code`](https://github.com/grapesjs/grapesjs/issues/6308)\n\nStatus: Open.\n\n#6308In grapesjs/grapesjs;\n\n· [maxming2333](https://github.com/grapesjs/grapesjs/issues?q=is%3Aissue%20state%3Aopen%20author%3Amaxming2333) opened on Nov 12, 2024\n\n2 comments\n\n### [BUG: MJML Component `tagUpdated` will make it impossible to `hover`](https://github.com/grapesjs/grapesjs/issues/6307)\n\nStatus: Open.\n\n#6307In grapesjs/grapesjs;\n\n· [maxming2333](https://github.com/grapesjs/grapesjs/issues?q=is%3Aissue%20state%3Aopen%20author%3Amaxming2333) opened on Nov 12, 2024\n\n### [BUG: Duplicated links are added using rte](https://github.com/grapesjs/grapesjs/issues/6263)\n\nStatus: Open.\n\n#6263In grapesjs/grapesjs;\n\n· [yashvi2026](https://github.com/grapesjs/grapesjs/issues?q=is%3Aissue%20state%3Aopen%20author%3Ayashvi2026) opened on Oct 24, 2024\n\n### [BUG/\\[QUESTION\\]: How to correctly wrap a Component on add/mount?](https://github.com/grapesjs/grapesjs/issues/6143)\n\nStatus: Open.\n\n#6143In grapesjs/grapesjs;\n\n· [rhoenerSBS](https://github.com/grapesjs/grapesjs/issues?q=is%3Aissue%20state%3Aopen%20author%3ArhoenerSBS) opened on Sep 10, 2024\n\n### [BUG: Cannot set Block display value](https://github.com/grapesjs/grapesjs/issues/6039)\n\nStatus: Open.\n\n#6039In grapesjs/grapesjs;\n\n· [Gryphonn](https://github.com/grapesjs/grapesjs/issues?q=is%3Aissue%20state%3Aopen%20author%3AGryphonn) opened on Aug 6, 2024\n\n4 comments\n\n### [BUG: Image Component allows upload and selection of video files via drag and drop](https://github.com/grapesjs/grapesjs/issues/6032)\n\nStatus: Open.\n\n#6032In grapesjs/grapesjs;\n\n· [aswinkumar863](https://github.com/grapesjs/grapesjs/issues?q=is%3Aissue%20state%3Aopen%20author%3Aaswinkumar863) opened on Aug 3, 2024\n\n1 comment\n\n### [BUG: Name of @container directive is missing a space when exporting CSS](https://github.com/grapesjs/grapesjs/issues/5969)\n\nStatus: Open.\n\n#5969In grapesjs/grapesjs;\n\n· [uncldrw](https://github.com/grapesjs/grapesjs/issues?q=is%3Aissue%20state%3Aopen%20author%3Auncldrw) opened on Jun 25, 2024\n\n### [BUG: Css edits aren't persisted to the DOM](https://github.com/grapesjs/grapesjs/issues/4847)\n\n[bug](https://github.com/grapesjs/grapesjs/issues?q=is%3Aissue%20state%3Aopen%20label%3Abug)\n\n[help wanted](https://github.com/grapesjs/grapesjs/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22help%20wanted%22)\n\nStatus: Open.\n\n#4847In grapesjs/grapesjs;\n\n· [wunksert](https://github.com/grapesjs/grapesjs/issues?q=is%3Aissue%20state%3Aopen%20author%3Awunksert) opened on Jan 15, 2023\n\n2 comments\n\n### [BUG: HTML elements ids are incremented on different pages loaded in projectData](https://github.com/grapesjs/grapesjs/issues/4837)\n\nStatus: Open.\n\n#4837In grapesjs/grapesjs;\n\n· [quentin-bettoum](https://github.com/grapesjs/grapesjs/issues?q=is%3Aissue%20state%3Aopen%20author%3Aquentin-bettoum) opened on Jan 10, 2023\n\n10 comments\n\n### [BUG: Angular Component as Custom Color Picker is only created once](https://github.com/grapesjs/grapesjs/issues/4704)\n\nStatus: Open.\n\n#4704In grapesjs/grapesjs;\n\n· [PaulSchult](https://github.com/grapesjs/grapesjs/issues?q=is%3Aissue%20state%3Aopen%20author%3APaulSchult) opened on Nov 1, 2022\n\n### [\\[Feature\\]: Improve and fix absolute dragMode](https://github.com/grapesjs/grapesjs/issues/3770)\n\n[feature](https://github.com/grapesjs/grapesjs/issues?q=is%3Aissue%20state%3Aopen%20label%3Afeature)\n\nStatus: Open.\n\n#3770In grapesjs/grapesjs;\n\n· [damnslow](https://github.com/grapesjs/grapesjs/issues?q=is%3Aissue%20state%3Aopen%20author%3Adamnslow) opened on Sep 12, 2021\n\n10 comments\n\n### [\\[Feature\\]: Improve UndoManager API](https://github.com/grapesjs/grapesjs/issues/3639)\n\n[feature](https://github.com/grapesjs/grapesjs/issues?q=is%3Aissue%20state%3Aopen%20label%3Afeature)\n\n[help wanted](https://github.com/grapesjs/grapesjs/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22help%20wanted%22)\n\nStatus: Open.\n\n#3639In grapesjs/grapesjs;\n\n· [anatoli-dp](https://github.com/grapesjs/grapesjs/issues?q=is%3Aissue%20state%3Aopen%20author%3Aanatoli-dp) opened on Jul 23, 2021\n\n9 comments\n\n### [\\[Editor UI\\]: Replace the current View for the core editor UI components](https://github.com/grapesjs/grapesjs/issues/2282)\n\n[feature](https://github.com/grapesjs/grapesjs/issues?q=is%3Aissue%20state%3Aopen%20label%3Afeature)\n\nStatus: Open.\n\n#2282In grapesjs/grapesjs;\n\n· [pouyamiralayi](https://github.com/grapesjs/grapesjs/issues?q=is%3Aissue%20state%3Aopen%20author%3Apouyamiralayi) opened on Sep 19, 2019\n\n3 comments\n\nYou can’t perform that action at this time.\n\n\n0 suggestions",
    "metadata": {
      "url": "https://github.com/grapesjs/grapesjs/issues",
      "ogUrl": "https://github.com/GrapesJS/grapesjs",
      "title": "Issues · grapesjs/grapesjs",
      "og:url": "https://github.com/GrapesJS/grapesjs",
      "favicon": {},
      "og:type": "object",
      "ogImage": "https://repository-images.githubusercontent.com/50146229/13879253-d31e-42e2-8525-e08400884e44",
      "ogTitle": "GrapesJS/grapesjs",
      "hostname": "github.com",
      "language": "en",
      "og:image": "https://repository-images.githubusercontent.com/50146229/13879253-d31e-42e2-8525-e08400884e44",
      "og:title": "GrapesJS/grapesjs",
      "scrapeId": "f6f024d5-ea48-43af-8a5a-b07e131eb6ad",
      "viewport": "width=device-width",
      "fb:app_id": "1401488693436528",
      "go-import": "github.com/GrapesJS/grapesjs git https://github.com/GrapesJS/grapesjs.git",
      "sourceURL": "https://github.com/grapesjs/grapesjs/issues",
      "ogSiteName": "GitHub",
      "request-id": "B081:1D3B61:1F62B11:2C63F11:67AF5496",
      "statusCode": 200,
      "user-login": "",
      "description": "Free and Open source Web Builder Framework. Next generation tool for building templates without coding - GrapesJS/grapesjs",
      "theme-color": "#1e2327",
      "color-scheme": "light dark",
      "og:image:alt": "Free and Open source Web Builder Framework. Next generation tool for building templates without coding - GrapesJS/grapesjs",
      "og:site_name": "GitHub",
      "route-action": "index",
      "twitter:card": "summary_large_image",
      "twitter:site": "@github",
      "visitor-hmac": "ffbda1a8995d558116dd2d2fa862290fa42b3cc60a918f45e27b6dca573195d4",
      "ogDescription": "Free and Open source Web Builder Framework. Next generation tool for building templates without coding - GrapesJS/grapesjs",
      "route-pattern": "/:user_id/:repository/issues(.:format)",
      "twitter:image": "https://repository-images.githubusercontent.com/50146229/13879253-d31e-42e2-8525-e08400884e44",
      "twitter:title": "GrapesJS/grapesjs",
      "octolytics-url": "https://collector.github.com/github/collect",
      "og:description": "Free and Open source Web Builder Framework. Next generation tool for building templates without coding - GrapesJS/grapesjs",
      "html-safe-nonce": "a85aa021f3580af395e00fe3b295f5e8bd646b39db6d6cde8888b639c6461823",
      "visitor-payload": "eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJCMDgxOjFEM0I2MToxRjYyQjExOjJDNjNGMTE6NjdBRjU0OTYiLCJ2aXNpdG9yX2lkIjoiODY5NzI4Njg5MzI4MTE3MDU4MiIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9",
      "apple-itunes-app": "app-id=1477376905, app-argument=https://github.com/grapesjs/grapesjs/issues",
      "route-controller": "issues",
      "browser-stats-url": "https://api.github.com/_private/browser/stats",
      "expected-hostname": "github.com",
      "analytics-location": "/<user-name>/<repo-name>/issues/index",
      "browser-errors-url": "https://api.github.com/_private/browser/errors",
      "turbo-body-classes": "logged-out env-production page-responsive",
      "turbo-cache-control": [
        "no-preview",
        "no-cache"
      ],
      "twitter:description": "Free and Open source Web Builder Framework. Next generation tool for building templates without coding - GrapesJS/grapesjs",
      "hovercard-subject-tag": "repository:50146229",
      "google-site-verification": "Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I",
      "github-keyboard-shortcuts": "repository,issues,copilot",
      "current-catalog-service-hash": "81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114",
      "octolytics-dimension-user_id": "123950155",
      "octolytics-dimension-user_login": "GrapesJS",
      "octolytics-dimension-repository_id": "50146229",
      "octolytics-dimension-repository_nwo": "GrapesJS/grapesjs",
      "octolytics-dimension-repository_public": "true",
      "octolytics-dimension-repository_is_fork": "false",
      "octolytics-dimension-repository_network_root_id": "50146229",
      "octolytics-dimension-repository_network_root_nwo": "GrapesJS/grapesjs"
    }
  },
  {
    "markdown": "[Skip to content](https://github.com/grapesjs/grapesjs/issues/3770#start-of-content)\n\nYou signed in with another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/3770) to refresh your session.You signed out in another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/3770) to refresh your session.You switched accounts on another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/3770) to refresh your session.Dismiss alert\n\n[GrapesJS](https://github.com/GrapesJS)/ **[grapesjs](https://github.com/GrapesJS/grapesjs)** Public\n\n- Sponsor\n\n\n\n\n\n\n\n# Sponsor GrapesJS/grapesjs\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n##### External links\n\n\n\n\n\n![open_collective](https://github.githubassets.com/assets/open_collective-0a706523753d.svg)\n\n\n\n[opencollective.com/ **grapesjs**](https://opencollective.com/grapesjs)\n\n\n\n\n\n\n\n\n\n[Learn more about funding links in repositories](https://docs.github.com/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/displaying-a-sponsor-button-in-your-repository).\n\n\n\n\n[Report abuse](https://github.com/contact/report-abuse?report=GrapesJS%2Fgrapesjs+%28Repository+Funding+Links%29)\n\n- [Notifications](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs) You must be signed in to change notification settings\n- [Fork\\\\\n4.2k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n- [Star\\\\\n23.4k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n\n\n# \\[Feature\\]: Improve and fix absolute dragMode\\#3770\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/3770)\n\nCopy link\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/3770)\n\nCopy link\n\nOpen\n\nOpen\n\n[\\[Feature\\]: Improve and fix absolute dragMode](https://github.com/grapesjs/grapesjs/issues/3770#top)#3770\n\nCopy link\n\nLabels\n\n[feature](https://github.com/GrapesJS/grapesjs/issues?q=state%3Aopen%20label%3A%22feature%22)\n\n[![@damnslow](https://avatars.githubusercontent.com/u/2943020?v=4&size=80)](https://github.com/damnslow)\n\n## Description\n\n[![@damnslow](https://avatars.githubusercontent.com/u/2943020?v=4&size=48)](https://github.com/damnslow)\n\n[damnslow](https://github.com/damnslow)\n\nopened [on Sep 12, 2021](https://github.com/GrapesJS/grapesjs/issues/3770#issue-994280021)\n\n### GrapesJS version\n\n- I confirm to use the latest version of GrapesJS\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n### What browser are you using?\n\nChrome v93\n\n### Reproducible demo link\n\n[https://codepen.io/damnslow/pen/yLXXOxQ](https://codepen.io/damnslow/pen/yLXXOxQ)\n\n### Describe the bug\n\n**How to reproduce the bug?**\n\n1. Select both the elements\n2. Drag using drag icon\n\n**What is the expected behavior?**\n\nBoth elements should move together\n\n**What is the current behavior?**\n\nOnly one element moves.\n\nIf is necessary to execute some code in order to reproduce the bug, paste it here below:\n\nNo.\n\n### Code of Conduct\n\n- I agree to follow this project's Code of Conduct\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n👍2\n\n## Activity\n\n[![damnslow](https://avatars.githubusercontent.com/u/2943020?v=4&size=80)](https://github.com/damnslow)\n\n### damnslow commented on Sep 25, 2021\n\n[![@damnslow](https://avatars.githubusercontent.com/u/2943020?v=4&size=48)](https://github.com/damnslow)\n\n[damnslow](https://github.com/damnslow)\n\n[on Sep 25, 2021](https://github.com/GrapesJS/grapesjs/issues/3770#issuecomment-927134633)\n\nAuthor\n\nHi [@artf](https://github.com/artf), is there any workaround to solve this?\n\n[![](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)artf](https://github.com/artf)\n\nmentioned this in 4 issues [on Oct 16, 2021](https://github.com/GrapesJS/grapesjs/issues/3770#event-1142353773)\n\n- [Dragging items do not position on intital drag? #2824](https://github.com/GrapesJS/grapesjs/issues/2824)\n\n- [\\[BUG\\] Absolute dragmode does not work on touch devices #2419](https://github.com/GrapesJS/grapesjs/issues/2419)\n\n- [\\[BUG\\] In absolute dragmode the components are not dropped properly if zoom is applied #2423](https://github.com/GrapesJS/grapesjs/issues/2423)\n\n- [BUG: component droped position is wrong when I changed canvas size under Absolute/Designer mode #3115](https://github.com/GrapesJS/grapesjs/issues/3115)\n\n\n[![artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=80)](https://github.com/artf)\n\n### artf commented on Oct 16, 2021\n\n[![@artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=48)](https://github.com/artf)\n\n[artf](https://github.com/artf)\n\n[on Oct 16, 2021](https://github.com/GrapesJS/grapesjs/issues/3770#issuecomment-944915841) · edited by [artf](https://github.com/artf)\n\nEdits\n\nMember\n\nAbsolute positioning, right now, has more than one issue and I'd like to address them all here:\n\n- Wrong position on a different Devices\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nWrong position on a zoomed/panned canvas\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nWrong position for children of the absolute component\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSupport multiple selection\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSupport touch devices\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSupport `%` unit\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\nI don't know exactly when I'll start working on it but I hope soon, and as always, any help is appreciated.\n\n👍2👀6\n\n[![](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)artf](https://github.com/artf)\n\nchanged the title BUG: Multi-Selection Drag issue with dragMode: absoluteBUG: Drag issue with dragMode: absolute [on Oct 16, 2021](https://github.com/GrapesJS/grapesjs/issues/3770#event-5473077571)\n\n[![ahmet1340](https://avatars.githubusercontent.com/u/57478252?u=29a4569ea18ba9bb57ffcf3ea1246762ae02fb5b&v=4&size=80)](https://github.com/ahmet1340)\n\n### ahmet1340 commented on Nov 14, 2021\n\n[![@ahmet1340](https://avatars.githubusercontent.com/u/57478252?u=29a4569ea18ba9bb57ffcf3ea1246762ae02fb5b&v=4&size=48)](https://github.com/ahmet1340)\n\n[ahmet1340](https://github.com/ahmet1340)\n\n[on Nov 14, 2021](https://github.com/GrapesJS/grapesjs/issues/3770#issuecomment-968293359)\n\nDid you find time to deal with it? I'm currently working on a drag and drop project and I'm having an issue with mispositioning on different devices also I can't use the setzoom function for mobile. I would be very grateful if you would take care of this issue. (Google translate used.)\n\n[![](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)artf](https://github.com/artf)\n\nadded a commit that references this issue [on Nov 19, 2021](https://github.com/GrapesJS/grapesjs/issues/3770#event-5645680275)\n\n[Adjust position in Absolute Mode for children #3770](https://github.com/GrapesJS/grapesjs/commit/24e80e0938d27cbf014d14afa9c982f87182e2d7)\n\n[Adjust position in Absolute Mode for children #3770](https://github.com/GrapesJS/grapesjs/commit/24e80e0938d27cbf014d14afa9c982f87182e2d7)\n\n[Adjust position in Absolute Mode for children](https://github.com/GrapesJS/grapesjs/commit/24e80e0938d27cbf014d14afa9c982f87182e2d7) [#3770](https://github.com/GrapesJS/grapesjs/issues/3770)\n\n[24e80e0](https://github.com/GrapesJS/grapesjs/commit/24e80e0938d27cbf014d14afa9c982f87182e2d7)\n\n[![Adham380](https://avatars.githubusercontent.com/u/88552046?v=4&size=80)](https://github.com/Adham380)\n\n### Adham380 commented on Feb 24, 2022\n\n[![@Adham380](https://avatars.githubusercontent.com/u/88552046?v=4&size=48)](https://github.com/Adham380)\n\n[Adham380](https://github.com/Adham380)\n\n[on Feb 24, 2022](https://github.com/GrapesJS/grapesjs/issues/3770#issuecomment-1049789830)\n\nThese issues have still not been resolved and are frankly annoying. Changing the absolute dragging to a % instead of a px offset makes so much more sense and solves most issues, but for some reason wasn't chosen. Is there any plans to change this?\n\n[![artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=80)](https://github.com/artf)\n\n### artf commented on Mar 5, 2022\n\n[![@artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=48)](https://github.com/artf)\n\n[artf](https://github.com/artf)\n\n[on Mar 5, 2022](https://github.com/GrapesJS/grapesjs/issues/3770#issuecomment-1059784514)\n\nMember\n\n[@Adham380](https://github.com/Adham380) PRs are welcome\n\n[![](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)artf](https://github.com/artf)\n\nmentioned this [on Mar 7, 2022](https://github.com/GrapesJS/grapesjs/issues/3770#event-1172092682)\n\n- [BUG: Resizing canvas makes componenents end up with wrong positions once exported with dmode 'absolute' #4157](https://github.com/GrapesJS/grapesjs/issues/4157)\n\n\n[![](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)artf](https://github.com/artf)\n\nmentioned this [on Mar 16, 2022](https://github.com/GrapesJS/grapesjs/issues/3770#event-1174029511)\n\n- [Drag boundary issue with dragMode: absolute/translate #4192](https://github.com/GrapesJS/grapesjs/issues/4192)\n\n\n[![](https://avatars.githubusercontent.com/u/10958?s=64&v=4)contentfree](https://github.com/contentfree)\n\nadded a commit that references this issue [on May 24, 2022](https://github.com/GrapesJS/grapesjs/issues/3770#event-6673529356)\n\n[Use coordinates of drag event for placement in absolute mode. Relates…](https://github.com/contentfree/grapesjs/commit/e948315cc10ce12722a7afefb3b107e9f61dbe93)\n\n...\n\n[e948315](https://github.com/contentfree/grapesjs/commit/e948315cc10ce12722a7afefb3b107e9f61dbe93)\n\n[![](https://avatars.githubusercontent.com/u/10958?s=64&v=4)contentfree](https://github.com/contentfree)\n\nmentioned this [on May 24, 2022](https://github.com/GrapesJS/grapesjs/issues/3770#event-1188972505)\n\n- [Use coordinates of drag onEnd event for placement in absolute mode.  #4343](https://github.com/GrapesJS/grapesjs/pull/4343)\n\n\n[![](https://avatars.githubusercontent.com/u/10958?s=64&v=4)contentfree](https://github.com/contentfree)\n\nmentioned this [on Jun 14, 2022](https://github.com/GrapesJS/grapesjs/issues/3770#event-1193507216)\n\n- [Take canvas offsets into account when dropping a new block on the canvas.  #4387](https://github.com/GrapesJS/grapesjs/pull/4387)\n\n\n[![dalmatele](https://avatars.githubusercontent.com/u/7881684?u=d92c819fda53682c466fe3ba092829a9cb6e484c&v=4&size=80)](https://github.com/dalmatele)\n\n### dalmatele commented on Jul 10, 2022\n\n[![@dalmatele](https://avatars.githubusercontent.com/u/7881684?u=d92c819fda53682c466fe3ba092829a9cb6e484c&v=4&size=48)](https://github.com/dalmatele)\n\n[dalmatele](https://github.com/dalmatele)\n\n[on Jul 10, 2022](https://github.com/GrapesJS/grapesjs/issues/3770#issuecomment-1180056067)\n\nAgree. It also affects the menu of NavBar in Mobile mode. If you set dragMode to \"absolute\" and move items in NavBar then switch to Mobile Preview mode, you'll see NavBar does not work.\n\n[![](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)artf](https://github.com/artf)\n\nmentioned this [on Dec 19, 2022](https://github.com/GrapesJS/grapesjs/issues/3770#event-1239534911)\n\n- [BUG: Bug resize image #4784](https://github.com/GrapesJS/grapesjs/issues/4784)\n\n\n[![](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)artf](https://github.com/artf)\n\nmentioned this [on Jan 1, 2023](https://github.com/GrapesJS/grapesjs/issues/3770#event-1241595821)\n\n- [Absolute/Designer mode #1936](https://github.com/GrapesJS/grapesjs/issues/1936)\n\n\n[![vizardkill](https://avatars.githubusercontent.com/u/37307788?u=ec63ef1653c504d00599df662413bfa782a2e5aa&v=4&size=80)](https://github.com/vizardkill)\n\n### vizardkill commented on Feb 23, 2023\n\n[![@vizardkill](https://avatars.githubusercontent.com/u/37307788?u=ec63ef1653c504d00599df662413bfa782a2e5aa&v=4&size=48)](https://github.com/vizardkill)\n\n[vizardkill](https://github.com/vizardkill)\n\n[on Feb 23, 2023](https://github.com/GrapesJS/grapesjs/issues/3770#issuecomment-1442006137)\n\nup\n\n[![ghost](https://github.com/ghost.png?size=80)](https://github.com/ghost)\n\n### ghost commented on Mar 22, 2023\n\n[![@ghost](https://avatars.githubusercontent.com/u/10137?u=b1951d34a583cf12ec0d3b0781ba19be97726318&v=4&size=48)](https://github.com/ghost)\n\n[ghost](https://github.com/ghost)\n\n[on Mar 22, 2023](https://github.com/GrapesJS/grapesjs/issues/3770#issuecomment-1480572585)\n\nUp\n\n[![](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)artf](https://github.com/artf)\n\nmentioned this [on Mar 27, 2023](https://github.com/GrapesJS/grapesjs/issues/3770#event-1274509285)\n\n- [BUG: slow absolute drag on Chrome #5003](https://github.com/GrapesJS/grapesjs/issues/5003)\n\n\n[![](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)artf](https://github.com/artf)\n\nmentioned this [on Jul 17, 2023](https://github.com/GrapesJS/grapesjs/issues/3770#event-1300951186)\n\n- [BUG: Element absolute position is different from Cursor position when moving in the zoomed canvas #5241](https://github.com/GrapesJS/grapesjs/issues/5241)\n\n\n[![](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)artf](https://github.com/artf)\n\nchanged the title BUG: Drag issue with dragMode: absolute\\[Feature\\]: Improve and fix absolute dragMode [on Aug 10, 2023](https://github.com/GrapesJS/grapesjs/issues/3770#event-10058834395)\n\n[![](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)artf](https://github.com/artf)\n\nadded\n\n[feature](https://github.com/grapesjs/grapesjs/issues?q=state%3Aopen%20label%3A%22feature%22)\n\n[on Aug 10, 2023](https://github.com/GrapesJS/grapesjs/issues/3770#event-10058835851)\n\n[![fmfeit](https://avatars.githubusercontent.com/u/81036455?v=4&size=80)](https://github.com/fmfeit)\n\n### fmfeit commented on Apr 20, 2024\n\n[![@fmfeit](https://avatars.githubusercontent.com/u/81036455?v=4&size=48)](https://github.com/fmfeit)\n\n[fmfeit](https://github.com/fmfeit)\n\n[on Apr 20, 2024](https://github.com/GrapesJS/grapesjs/issues/3770#issuecomment-2067747282)\n\nHi [@artf](https://github.com/artf),\n\nthis feature is crucial for my current project, so I have two questions:\n\n1. Is it possible to pay you (or someone else) to prioritize this feature?\n2. If not, can you outline the steps necessary to resolve the issue and give me a starting point?\n\n👀1\n\n[![artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=80)](https://github.com/artf)\n\n### artf commented on May 27, 2024\n\n[![@artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=48)](https://github.com/artf)\n\n[artf](https://github.com/artf)\n\n[on May 27, 2024](https://github.com/GrapesJS/grapesjs/issues/3770#issuecomment-2134502430)\n\nMember\n\n[@fmfeit](https://github.com/fmfeit) here you can find the related source of the [command](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/ComponentDrag.ts).\n\n[Sign up for free](https://github.com/signup?return_to=https://github.com/grapesjs/grapesjs/issues/3770)**to join this conversation on GitHub.** Already have an account? [Sign in to comment](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/3770)\n\n## Metadata\n\n### Assignees\n\nNo one assigned\n\n### Labels\n\n[feature](https://github.com/GrapesJS/grapesjs/issues?q=state%3Aopen%20label%3A%22feature%22)\n\n### Type\n\nNo type\n\n### Projects\n\n[Roadmap](https://github.com/orgs/GrapesJS/projects/1)\n\n- Status\n\n\n\n📋 Accepted\n\n\n### Milestone\n\nNo milestone\n\n### Relationships\n\nNone yet\n\n### Development\n\nNo branches or pull requests\n\n### Participants\n\n[![@damnslow](https://avatars.githubusercontent.com/u/2943020?s=64&v=4)](https://github.com/damnslow)[![@dalmatele](https://avatars.githubusercontent.com/u/7881684?s=64&u=d92c819fda53682c466fe3ba092829a9cb6e484c&v=4)](https://github.com/dalmatele)[![@artf](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)](https://github.com/artf)[![@vizardkill](https://avatars.githubusercontent.com/u/37307788?s=64&u=ec63ef1653c504d00599df662413bfa782a2e5aa&v=4)](https://github.com/vizardkill)[![@ahmet1340](https://avatars.githubusercontent.com/u/57478252?s=64&u=29a4569ea18ba9bb57ffcf3ea1246762ae02fb5b&v=4)](https://github.com/ahmet1340)\n\n+2\n\n## Issue actions\n\nYou can’t perform that action at this time.\n\n\n\\[Feature\\]: Improve and fix absolute dragMode · Issue #3770 · GrapesJS/grapesjs",
    "metadata": {
      "url": "https://github.com/grapesjs/grapesjs/issues/3770",
      "ogUrl": "https://github.com/GrapesJS/grapesjs/issues/3770",
      "title": "[Feature]: Improve and fix absolute dragMode · Issue #3770 · GrapesJS/grapesjs",
      "og:url": "https://github.com/GrapesJS/grapesjs/issues/3770",
      "favicon": {},
      "og:type": "object",
      "ogImage": "https://opengraph.githubassets.com/73be4c538cc6ddd32ae77ce3040ddb0f4735efec8f7e2d672ae6cf48467732db/GrapesJS/grapesjs/issues/3770",
      "ogTitle": "[Feature]: Improve and fix absolute dragMode · Issue #3770 · GrapesJS/grapesjs",
      "hostname": "github.com",
      "language": "en",
      "og:image": "https://opengraph.githubassets.com/73be4c538cc6ddd32ae77ce3040ddb0f4735efec8f7e2d672ae6cf48467732db/GrapesJS/grapesjs/issues/3770",
      "og:title": "[Feature]: Improve and fix absolute dragMode · Issue #3770 · GrapesJS/grapesjs",
      "scrapeId": "446aad1e-6dfc-4aeb-9f9f-27615ffd9026",
      "viewport": "width=device-width",
      "fb:app_id": "1401488693436528",
      "go-import": "github.com/GrapesJS/grapesjs git https://github.com/GrapesJS/grapesjs.git",
      "sourceURL": "https://github.com/grapesjs/grapesjs/issues/3770",
      "ogSiteName": "GitHub",
      "request-id": "A47F:86099:359E456:4A7C7FB:67AF54A1",
      "statusCode": 200,
      "user-login": "",
      "description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome v93 Reproducible demo link https://codepen.io/damnslow/pen/yLXXOxQ Describe the bug How to reproduce the bug? Select both the elements Dr...",
      "theme-color": "#1e2327",
      "color-scheme": "light dark",
      "og:image:alt": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome v93 Reproducible demo link https://codepen.io/damnslow/pen/yLXXOxQ Describe the bug How to reprod...",
      "og:site_name": "GitHub",
      "route-action": "issue_layout",
      "twitter:card": "summary_large_image",
      "twitter:site": "@github",
      "visitor-hmac": "ac7596cef349d7fd8d2838e535d2a472ae1bab56660dca79e4b5c7ea2d637e2a",
      "ogDescription": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome v93 Reproducible demo link https://codepen.io/damnslow/pen/yLXXOxQ Describe the bug How to reprod...",
      "route-pattern": "/_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format)",
      "twitter:image": "https://opengraph.githubassets.com/73be4c538cc6ddd32ae77ce3040ddb0f4735efec8f7e2d672ae6cf48467732db/GrapesJS/grapesjs/issues/3770",
      "twitter:title": "[Feature]: Improve and fix absolute dragMode · Issue #3770 · GrapesJS/grapesjs",
      "octolytics-url": "https://collector.github.com/github/collect",
      "og:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome v93 Reproducible demo link https://codepen.io/damnslow/pen/yLXXOxQ Describe the bug How to reprod...",
      "og:image:width": "1200",
      "html-safe-nonce": "3b26d270dedc816beeb038ceca67644497a14741a7ad8f8d5db0b14f7be2f783",
      "og:image:height": "600",
      "visitor-payload": "eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJBNDdGOjg2MDk5OjM1OUU0NTY6NEE3QzdGQjo2N0FGNTRBMSIsInZpc2l0b3JfaWQiOiIzODM0NTczNDcxMDYwMjg0NTc3IiwicmVnaW9uX2VkZ2UiOiJpYWQiLCJyZWdpb25fcmVuZGVyIjoiaWFkIn0=",
      "apple-itunes-app": "app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/grapesjs/grapesjs/3770/issue_layout",
      "route-controller": "voltron_issues_fragments",
      "browser-stats-url": "https://api.github.com/_private/browser/stats",
      "expected-hostname": "github.com",
      "analytics-location": "/<user-name>/<repo-name>/voltron/issues_fragments/issue_layout",
      "browser-errors-url": "https://api.github.com/_private/browser/errors",
      "og:author:username": "damnslow",
      "turbo-body-classes": "logged-out env-production page-responsive",
      "turbo-cache-control": "no-preview",
      "twitter:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome v93 Reproducible demo link https://codepen.io/damnslow/pen/yLXXOxQ Describe the bug How to reprod...",
      "hovercard-subject-tag": "issue:994280021",
      "google-site-verification": "Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I",
      "github-keyboard-shortcuts": "repository,issues,copilot",
      "current-catalog-service-hash": "81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114",
      "octolytics-dimension-user_id": "123950155",
      "octolytics-dimension-user_login": "GrapesJS",
      "octolytics-dimension-repository_id": "50146229",
      "octolytics-dimension-repository_nwo": "GrapesJS/grapesjs",
      "octolytics-dimension-repository_public": "true",
      "octolytics-dimension-repository_is_fork": "false",
      "octolytics-dimension-repository_network_root_id": "50146229",
      "octolytics-dimension-repository_network_root_nwo": "GrapesJS/grapesjs"
    }
  },
  {
    "markdown": "[Skip to content](https://github.com/grapesjs/grapesjs/issues/6307#start-of-content)\n\nYou signed in with another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/6307) to refresh your session.You signed out in another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/6307) to refresh your session.You switched accounts on another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/6307) to refresh your session.Dismiss alert\n\n[GrapesJS](https://github.com/GrapesJS)/ **[grapesjs](https://github.com/GrapesJS/grapesjs)** Public\n\n- Sponsor\n\n\n\n\n\n\n\n# Sponsor GrapesJS/grapesjs\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n##### External links\n\n\n\n\n\n![open_collective](https://github.githubassets.com/assets/open_collective-0a706523753d.svg)\n\n\n\n[opencollective.com/ **grapesjs**](https://opencollective.com/grapesjs)\n\n\n\n\n\n\n\n\n\n[Learn more about funding links in repositories](https://docs.github.com/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/displaying-a-sponsor-button-in-your-repository).\n\n\n\n\n[Report abuse](https://github.com/contact/report-abuse?report=GrapesJS%2Fgrapesjs+%28Repository+Funding+Links%29)\n\n- [Notifications](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs) You must be signed in to change notification settings\n- [Fork\\\\\n4.2k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n- [Star\\\\\n23.4k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n\n\n# BUG: MJML Component `tagUpdated` will make it impossible to `hover`\\#6307\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/6307)\n\nCopy link\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/6307)\n\nCopy link\n\nOpen\n\nOpen\n\n[BUG: MJML Component `tagUpdated` will make it impossible to `hover`](https://github.com/grapesjs/grapesjs/issues/6307#top)#6307\n\nCopy link\n\n[![@maxming2333](https://avatars.githubusercontent.com/u/8816730?u=4e20647a0d19dac518d479093a78368e246d3c4c&v=4&size=80)](https://github.com/maxming2333)\n\n## Description\n\n[![@maxming2333](https://avatars.githubusercontent.com/u/8816730?u=4e20647a0d19dac518d479093a78368e246d3c4c&v=4&size=48)](https://github.com/maxming2333)\n\n[maxming2333](https://github.com/maxming2333)\n\nopened [on Nov 12, 2024](https://github.com/GrapesJS/grapesjs/issues/6307#issue-2651718318)\n\n### GrapesJS version\n\n- I confirm to use the latest version of GrapesJS\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n### What browser are you using?\n\n130.0.6723.117\n\n### Reproducible demo link\n\n[https://grapesjs.com/demo-mjml](https://grapesjs.com/demo-mjml)\n\n### Describe the bug\n\n**How to reproduce the bug?**\n\n1. Select a component at random, such as the second `mj-section` on the demo page\n\n2. Hover this component in the editor (you can see that it can be hovered)\n\n3. Find the id of this component and execute `editor.Components.getById('iv19a').tagUpdated()`\n\n4. Try to hover the component again and find that it cannot be hovered.\n\n\n**What is the expected behavior?**\n\nNo error is reported, and you can continue hovering\n\n**What is the current behavior?**\n\nan error is reported and cannot be hovered\n\n[![image](https://private-user-images.githubusercontent.com/8816730/385242280-11a28fd3-d0b4-47ce-9a3f-977639efc36d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1NDQwMDcsIm5iZiI6MTczOTU0MzcwNywicGF0aCI6Ii84ODE2NzMwLzM4NTI0MjI4MC0xMWEyOGZkMy1kMGI0LTQ3Y2UtOWEzZi05Nzc2MzllZmMzNmQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIxNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMTRUMTQzNTA3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9M2E2MDI2MzlkMTc2MDE4ZDg3OTc3ZWFhMTZjYjkyYTc3Y2Y2YzVjNzFiNWEwY2MyNTMwNTMwYjMzMDE3MWQ4OSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.UE40VO8fNDVKuO7S-4qcW4fd20sKe4YMlIkbjymRUnA)](https://private-user-images.githubusercontent.com/8816730/385242280-11a28fd3-d0b4-47ce-9a3f-977639efc36d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1NDQwMDcsIm5iZiI6MTczOTU0MzcwNywicGF0aCI6Ii84ODE2NzMwLzM4NTI0MjI4MC0xMWEyOGZkMy1kMGI0LTQ3Y2UtOWEzZi05Nzc2MzllZmMzNmQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIxNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMTRUMTQzNTA3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9M2E2MDI2MzlkMTc2MDE4ZDg3OTc3ZWFhMTZjYjkyYTc3Y2Y2YzVjNzFiNWEwY2MyNTMwNTMwYjMzMDE3MWQ4OSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.UE40VO8fNDVKuO7S-4qcW4fd20sKe4YMlIkbjymRUnA)\n\n### Code of Conduct\n\n- I agree to follow this project's Code of Conduct\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n## Activity\n\n[Sign up for free](https://github.com/signup?return_to=https://github.com/grapesjs/grapesjs/issues/6307)**to join this conversation on GitHub.** Already have an account? [Sign in to comment](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/6307)\n\n## Metadata\n\n### Assignees\n\nNo one assigned\n\n### Labels\n\nNo labels\n\nNo labels\n\n### Type\n\nNo type\n\n### Projects\n\nNo projects\n\n### Milestone\n\nNo milestone\n\n### Relationships\n\nNone yet\n\n### Development\n\nNo branches or pull requests\n\n### Participants\n\n[![@maxming2333](https://avatars.githubusercontent.com/u/8816730?s=64&u=4e20647a0d19dac518d479093a78368e246d3c4c&v=4)](https://github.com/maxming2333)\n\n## Issue actions\n\nYou can’t perform that action at this time.\n\n\nBUG: MJML Component \\`tagUpdated\\` will make it impossible to \\`hover\\` · Issue #6307 · GrapesJS/grapesjs",
    "metadata": {
      "url": "https://github.com/grapesjs/grapesjs/issues/6307",
      "ogUrl": "https://github.com/GrapesJS/grapesjs/issues/6307",
      "title": "BUG: MJML Component `tagUpdated` will make it impossible to `hover` · Issue #6307 · GrapesJS/grapesjs",
      "og:url": "https://github.com/GrapesJS/grapesjs/issues/6307",
      "favicon": {},
      "og:type": "object",
      "ogImage": "https://opengraph.githubassets.com/1738f19cbe7b232befea61654439117dc997600e9807b3bd5ff29178dad72538/GrapesJS/grapesjs/issues/6307",
      "ogTitle": "BUG: MJML Component `tagUpdated` will make it impossible to `hover` · Issue #6307 · GrapesJS/grapesjs",
      "hostname": "github.com",
      "language": "en",
      "og:image": "https://opengraph.githubassets.com/1738f19cbe7b232befea61654439117dc997600e9807b3bd5ff29178dad72538/GrapesJS/grapesjs/issues/6307",
      "og:title": "BUG: MJML Component `tagUpdated` will make it impossible to `hover` · Issue #6307 · GrapesJS/grapesjs",
      "scrapeId": "1a7206e7-8c9c-45e2-9258-7a8fc4348dc0",
      "viewport": "width=device-width",
      "fb:app_id": "1401488693436528",
      "go-import": "github.com/GrapesJS/grapesjs git https://github.com/GrapesJS/grapesjs.git",
      "sourceURL": "https://github.com/grapesjs/grapesjs/issues/6307",
      "ogSiteName": "GitHub",
      "request-id": "B0E9:214920:1E7F44F:2B09942:67AF549B",
      "statusCode": 200,
      "user-login": "",
      "description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? 130.0.6723.117 Reproducible demo link https://grapesjs.com/demo-mjml Describe the bug How to reproduce the bug? Select a component at random, su...",
      "theme-color": "#1e2327",
      "color-scheme": "light dark",
      "og:image:alt": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? 130.0.6723.117 Reproducible demo link https://grapesjs.com/demo-mjml Describe the bug How to reproduce t...",
      "og:site_name": "GitHub",
      "route-action": "issue_layout",
      "twitter:card": "summary_large_image",
      "twitter:site": "@github",
      "visitor-hmac": "d6c63eb6e1083a8638ad6c1ba0a2d0085b226ed63dd71415e7d71c065ac966d5",
      "ogDescription": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? 130.0.6723.117 Reproducible demo link https://grapesjs.com/demo-mjml Describe the bug How to reproduce t...",
      "route-pattern": "/_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format)",
      "twitter:image": "https://opengraph.githubassets.com/1738f19cbe7b232befea61654439117dc997600e9807b3bd5ff29178dad72538/GrapesJS/grapesjs/issues/6307",
      "twitter:title": "BUG: MJML Component `tagUpdated` will make it impossible to `hover` · Issue #6307 · GrapesJS/grapesjs",
      "octolytics-url": "https://collector.github.com/github/collect",
      "og:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? 130.0.6723.117 Reproducible demo link https://grapesjs.com/demo-mjml Describe the bug How to reproduce t...",
      "og:image:width": "1200",
      "html-safe-nonce": "6cec2f4ebac7c508a49539ef935afcbee2daa07feed640ffdec65cfe3a556edb",
      "og:image:height": "600",
      "visitor-payload": "eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJCMEU5OjIxNDkyMDoxRTdGNDRGOjJCMDk5NDI6NjdBRjU0OUIiLCJ2aXNpdG9yX2lkIjoiODI4MjEzMzUxMTkwODg0MDYwMyIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9",
      "apple-itunes-app": "app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/grapesjs/grapesjs/6307/issue_layout",
      "route-controller": "voltron_issues_fragments",
      "browser-stats-url": "https://api.github.com/_private/browser/stats",
      "expected-hostname": "github.com",
      "analytics-location": "/<user-name>/<repo-name>/voltron/issues_fragments/issue_layout",
      "browser-errors-url": "https://api.github.com/_private/browser/errors",
      "og:author:username": "maxming2333",
      "turbo-body-classes": "logged-out env-production page-responsive",
      "turbo-cache-control": "no-preview",
      "twitter:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? 130.0.6723.117 Reproducible demo link https://grapesjs.com/demo-mjml Describe the bug How to reproduce t...",
      "hovercard-subject-tag": "issue:2651718318",
      "google-site-verification": "Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I",
      "github-keyboard-shortcuts": "repository,issues,copilot",
      "current-catalog-service-hash": "81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114",
      "octolytics-dimension-user_id": "123950155",
      "octolytics-dimension-user_login": "GrapesJS",
      "octolytics-dimension-repository_id": "50146229",
      "octolytics-dimension-repository_nwo": "GrapesJS/grapesjs",
      "octolytics-dimension-repository_public": "true",
      "octolytics-dimension-repository_is_fork": "false",
      "octolytics-dimension-repository_network_root_id": "50146229",
      "octolytics-dimension-repository_network_root_nwo": "GrapesJS/grapesjs"
    }
  },
  {
    "markdown": "[Skip to content](https://github.com/grapesjs/grapesjs/issues/6308#start-of-content)\n\nYou signed in with another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/6308) to refresh your session.You signed out in another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/6308) to refresh your session.You switched accounts on another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/6308) to refresh your session.Dismiss alert\n\n[GrapesJS](https://github.com/GrapesJS)/ **[grapesjs](https://github.com/GrapesJS/grapesjs)** Public\n\n- Sponsor\n\n\n\n\n\n\n\n# Sponsor GrapesJS/grapesjs\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n##### External links\n\n\n\n\n\n![open_collective](https://github.githubassets.com/assets/open_collective-0a706523753d.svg)\n\n\n\n[opencollective.com/ **grapesjs**](https://opencollective.com/grapesjs)\n\n\n\n\n\n\n\n\n\n[Learn more about funding links in repositories](https://docs.github.com/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/displaying-a-sponsor-button-in-your-repository).\n\n\n\n\n[Report abuse](https://github.com/contact/report-abuse?report=GrapesJS%2Fgrapesjs+%28Repository+Funding+Links%29)\n\n- [Notifications](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs) You must be signed in to change notification settings\n- [Fork\\\\\n4.2k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n- [Star\\\\\n23.4k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n\n\n# BUG: React Custom UI `Modal` Unable to display `Code`\\#6308\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/6308)\n\nCopy link\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/6308)\n\nCopy link\n\nOpen\n\nOpen\n\n[BUG: React Custom UI `Modal` Unable to display `Code`](https://github.com/grapesjs/grapesjs/issues/6308#top)#6308\n\nCopy link\n\n[![@maxming2333](https://avatars.githubusercontent.com/u/8816730?u=4e20647a0d19dac518d479093a78368e246d3c4c&v=4&size=80)](https://github.com/maxming2333)\n\n## Description\n\n[![@maxming2333](https://avatars.githubusercontent.com/u/8816730?u=4e20647a0d19dac518d479093a78368e246d3c4c&v=4&size=48)](https://github.com/maxming2333)\n\n[maxming2333](https://github.com/maxming2333)\n\nopened [on Nov 12, 2024](https://github.com/GrapesJS/grapesjs/issues/6308#issue-2654015576)\n\n### GrapesJS version\n\n- I confirm to use the latest version of GrapesJS\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n### What browser are you using?\n\n130.0.6723.117\n\n### Reproducible demo link\n\n[https://stackblitz.com/edit/grapesjs-react-custom-ui?file=src%2FApp.tsx](https://stackblitz.com/edit/grapesjs-react-custom-ui?file=src%2FApp.tsx)\n\n### Describe the bug\n\n**How to reproduce the bug?**\n\n1. open [https://grapesjs-react-custom-ui.stackblitz.io/](https://grapesjs-react-custom-ui.stackblitz.io/)\n2. click this button\n\n[![image](https://private-user-images.githubusercontent.com/8816730/385573409-35d33966-60b6-4a88-96c6-0c260d523af7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1NDQwMDcsIm5iZiI6MTczOTU0MzcwNywicGF0aCI6Ii84ODE2NzMwLzM4NTU3MzQwOS0zNWQzMzk2Ni02MGI2LTRhODgtOTZjNi0wYzI2MGQ1MjNhZjcucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIxNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMTRUMTQzNTA3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MzM3NTZkYjcyY2RmMzUwNThkYjYyYjVkZTc5YTE1NGQ5YmIzOGNjZjkzY2Q0ZGFlNzE1YjUyOTk0NzA3ZTY5NyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.Aifx1NtSvaN3VRFCHbkT3uRBZbVxEnMT7Zf1Nsxsl6s)](https://private-user-images.githubusercontent.com/8816730/385573409-35d33966-60b6-4a88-96c6-0c260d523af7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1NDQwMDcsIm5iZiI6MTczOTU0MzcwNywicGF0aCI6Ii84ODE2NzMwLzM4NTU3MzQwOS0zNWQzMzk2Ni02MGI2LTRhODgtOTZjNi0wYzI2MGQ1MjNhZjcucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIxNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMTRUMTQzNTA3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MzM3NTZkYjcyY2RmMzUwNThkYjYyYjVkZTc5YTE1NGQ5YmIzOGNjZjkzY2Q0ZGFlNzE1YjUyOTk0NzA3ZTY5NyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.Aifx1NtSvaN3VRFCHbkT3uRBZbVxEnMT7Zf1Nsxsl6s)\n3. no code to show in `Modal`\n\n[![image](https://private-user-images.githubusercontent.com/8816730/385573559-761efaae-5061-4867-8367-832df023a9c8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1NDQwMDcsIm5iZiI6MTczOTU0MzcwNywicGF0aCI6Ii84ODE2NzMwLzM4NTU3MzU1OS03NjFlZmFhZS01MDYxLTQ4NjctODM2Ny04MzJkZjAyM2E5YzgucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIxNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMTRUMTQzNTA3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MmViZTI5NmVhZjhiZDc5OTQ1YzkxMzFiM2MwMDkxMDk4YjU1ZTQ2NmI5NTc2MzY4ZWNkMjk4YTY5ZjE3NGY3ZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.tSFW4ptk-6m8VHw_FsECalYBv_A0dJVUX3HvwfoSmSo)](https://private-user-images.githubusercontent.com/8816730/385573559-761efaae-5061-4867-8367-832df023a9c8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1NDQwMDcsIm5iZiI6MTczOTU0MzcwNywicGF0aCI6Ii84ODE2NzMwLzM4NTU3MzU1OS03NjFlZmFhZS01MDYxLTQ4NjctODM2Ny04MzJkZjAyM2E5YzgucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIxNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMTRUMTQzNTA3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MmViZTI5NmVhZjhiZDc5OTQ1YzkxMzFiM2MwMDkxMDk4YjU1ZTQ2NmI5NTc2MzY4ZWNkMjk4YTY5ZjE3NGY3ZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.tSFW4ptk-6m8VHw_FsECalYBv_A0dJVUX3HvwfoSmSo)\n\n**What is the expected behavior?**\n\nshow code in `Modal`\n\n**What is the current behavior?**\n\nno code to show in `Modal`\n\n### Code of Conduct\n\n- I agree to follow this project's Code of Conduct\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n## Activity\n\n[![danstarns](https://avatars.githubusercontent.com/u/35999252?u=24da81e3ba29b858f6cf2ba8dece5b136b02bc89&v=4&size=80)](https://github.com/danstarns)\n\n### danstarns commented on Nov 19, 2024\n\n[![@danstarns](https://avatars.githubusercontent.com/u/35999252?u=24da81e3ba29b858f6cf2ba8dece5b136b02bc89&v=4&size=48)](https://github.com/danstarns)\n\n[danstarns](https://github.com/danstarns)\n\n[on Nov 19, 2024](https://github.com/GrapesJS/grapesjs/issues/6308#issuecomment-2486956946)\n\nMember\n\nHi [@maxming2333](https://github.com/maxming2333), try clicking anywhere inside the highlighted area in the text box, for me it loads the code...\n\nScreen.Recording.2024-11-19.at.23.21.03.mov\n\n[![maxming2333](https://avatars.githubusercontent.com/u/8816730?u=4e20647a0d19dac518d479093a78368e246d3c4c&v=4&size=80)](https://github.com/maxming2333)\n\n### maxming2333 commented on Nov 21, 2024\n\n[![@maxming2333](https://avatars.githubusercontent.com/u/8816730?u=4e20647a0d19dac518d479093a78368e246d3c4c&v=4&size=48)](https://github.com/maxming2333)\n\n[maxming2333](https://github.com/maxming2333)\n\n[on Nov 21, 2024](https://github.com/GrapesJS/grapesjs/issues/6308#issuecomment-2493335240)\n\nAuthor\n\n> Hi [@maxming2333](https://github.com/maxming2333), try clicking anywhere inside the highlighted area in the text box, for me it loads the code...\n>\n> Screen.Recording.2024-11-19.at.23.21.03.mov\n\nYes, it can indeed be displayed after clicking on the pop-up window area, but it should be displayed as soon as the pop-up window is opened, not after clicking.\n\n[Sign up for free](https://github.com/signup?return_to=https://github.com/grapesjs/grapesjs/issues/6308)**to join this conversation on GitHub.** Already have an account? [Sign in to comment](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/6308)\n\n## Metadata\n\n### Assignees\n\nNo one assigned\n\n### Labels\n\nNo labels\n\nNo labels\n\n### Type\n\nNo type\n\n### Projects\n\nNo projects\n\n### Milestone\n\nNo milestone\n\n### Relationships\n\nNone yet\n\n### Development\n\nNo branches or pull requests\n\n### Participants\n\n[![@maxming2333](https://avatars.githubusercontent.com/u/8816730?s=64&u=4e20647a0d19dac518d479093a78368e246d3c4c&v=4)](https://github.com/maxming2333)[![@danstarns](https://avatars.githubusercontent.com/u/35999252?s=64&u=24da81e3ba29b858f6cf2ba8dece5b136b02bc89&v=4)](https://github.com/danstarns)\n\n## Issue actions\n\nYou can’t perform that action at this time.\n\n\nBUG: React Custom UI \\`Modal\\` Unable to display \\`Code\\` · Issue #6308 · GrapesJS/grapesjs",
    "metadata": {
      "url": "https://github.com/grapesjs/grapesjs/issues/6308",
      "ogUrl": "https://github.com/GrapesJS/grapesjs/issues/6308",
      "title": "BUG: React Custom UI `Modal` Unable to display `Code` · Issue #6308 · GrapesJS/grapesjs",
      "og:url": "https://github.com/GrapesJS/grapesjs/issues/6308",
      "favicon": {},
      "og:type": "object",
      "ogImage": "https://opengraph.githubassets.com/6b1546d9869a321b11acdcd6251cc055e5c281acc917f4db579d3c606a986980/GrapesJS/grapesjs/issues/6308",
      "ogTitle": "BUG: React Custom UI `Modal` Unable to display `Code` · Issue #6308 · GrapesJS/grapesjs",
      "hostname": "github.com",
      "language": "en",
      "og:image": "https://opengraph.githubassets.com/6b1546d9869a321b11acdcd6251cc055e5c281acc917f4db579d3c606a986980/GrapesJS/grapesjs/issues/6308",
      "og:title": "BUG: React Custom UI `Modal` Unable to display `Code` · Issue #6308 · GrapesJS/grapesjs",
      "scrapeId": "ed3b66c5-8f4b-4ac0-9ad9-765ce1e575d5",
      "viewport": "width=device-width",
      "fb:app_id": "1401488693436528",
      "go-import": "github.com/GrapesJS/grapesjs git https://github.com/GrapesJS/grapesjs.git",
      "sourceURL": "https://github.com/grapesjs/grapesjs/issues/6308",
      "ogSiteName": "GitHub",
      "request-id": "9D5F:17E1A2:1F2BCCC:2C0EA3A:67AF549B",
      "statusCode": 200,
      "user-login": "",
      "description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? 130.0.6723.117 Reproducible demo link https://stackblitz.com/edit/grapesjs-react-custom-ui?file=src%2FApp.tsx Describe the bug How to reproduce ...",
      "theme-color": "#1e2327",
      "color-scheme": "light dark",
      "og:image:alt": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? 130.0.6723.117 Reproducible demo link https://stackblitz.com/edit/grapesjs-react-custom-ui?file=src%2FAp...",
      "og:site_name": "GitHub",
      "route-action": "issue_layout",
      "twitter:card": "summary_large_image",
      "twitter:site": "@github",
      "visitor-hmac": "997954742498ac8a6fd9af2d23b6a4c6cc91ca0927211f0ab27e8fe15fea4d93",
      "ogDescription": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? 130.0.6723.117 Reproducible demo link https://stackblitz.com/edit/grapesjs-react-custom-ui?file=src%2FAp...",
      "route-pattern": "/_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format)",
      "twitter:image": "https://opengraph.githubassets.com/6b1546d9869a321b11acdcd6251cc055e5c281acc917f4db579d3c606a986980/GrapesJS/grapesjs/issues/6308",
      "twitter:title": "BUG: React Custom UI `Modal` Unable to display `Code` · Issue #6308 · GrapesJS/grapesjs",
      "octolytics-url": "https://collector.github.com/github/collect",
      "og:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? 130.0.6723.117 Reproducible demo link https://stackblitz.com/edit/grapesjs-react-custom-ui?file=src%2FAp...",
      "og:image:width": "1200",
      "html-safe-nonce": "2d79c32772144b1f8d50b8fd151d806aa703e8d82ce47aaafcc5dedfdd50922c",
      "og:image:height": "600",
      "visitor-payload": "eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiI5RDVGOjE3RTFBMjoxRjJCQ0NDOjJDMEVBM0E6NjdBRjU0OUIiLCJ2aXNpdG9yX2lkIjoiMjkwOTkxMDYxOTAzNDQ0MDg1OSIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9",
      "apple-itunes-app": "app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/grapesjs/grapesjs/6308/issue_layout",
      "route-controller": "voltron_issues_fragments",
      "browser-stats-url": "https://api.github.com/_private/browser/stats",
      "expected-hostname": "github.com",
      "analytics-location": "/<user-name>/<repo-name>/voltron/issues_fragments/issue_layout",
      "browser-errors-url": "https://api.github.com/_private/browser/errors",
      "og:author:username": "maxming2333",
      "turbo-body-classes": "logged-out env-production page-responsive",
      "turbo-cache-control": "no-preview",
      "twitter:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? 130.0.6723.117 Reproducible demo link https://stackblitz.com/edit/grapesjs-react-custom-ui?file=src%2FAp...",
      "hovercard-subject-tag": "issue:2654015576",
      "google-site-verification": "Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I",
      "github-keyboard-shortcuts": "repository,issues,copilot",
      "current-catalog-service-hash": "81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114",
      "octolytics-dimension-user_id": "123950155",
      "octolytics-dimension-user_login": "GrapesJS",
      "octolytics-dimension-repository_id": "50146229",
      "octolytics-dimension-repository_nwo": "GrapesJS/grapesjs",
      "octolytics-dimension-repository_public": "true",
      "octolytics-dimension-repository_is_fork": "false",
      "octolytics-dimension-repository_network_root_id": "50146229",
      "octolytics-dimension-repository_network_root_nwo": "GrapesJS/grapesjs"
    }
  },
  {
    "markdown": "[Skip to content](https://github.com/grapesjs/grapesjs/issues/6039#start-of-content)\n\nYou signed in with another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/6039) to refresh your session.You signed out in another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/6039) to refresh your session.You switched accounts on another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/6039) to refresh your session.Dismiss alert\n\n[GrapesJS](https://github.com/GrapesJS)/ **[grapesjs](https://github.com/GrapesJS/grapesjs)** Public\n\n- Sponsor\n\n\n\n\n\n\n\n# Sponsor GrapesJS/grapesjs\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n##### External links\n\n\n\n\n\n![open_collective](https://github.githubassets.com/assets/open_collective-0a706523753d.svg)\n\n\n\n[opencollective.com/ **grapesjs**](https://opencollective.com/grapesjs)\n\n\n\n\n\n\n\n\n\n[Learn more about funding links in repositories](https://docs.github.com/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/displaying-a-sponsor-button-in-your-repository).\n\n\n\n\n[Report abuse](https://github.com/contact/report-abuse?report=GrapesJS%2Fgrapesjs+%28Repository+Funding+Links%29)\n\n- [Notifications](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs) You must be signed in to change notification settings\n- [Fork\\\\\n4.2k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n- [Star\\\\\n23.4k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n\n\n# BUG: Cannot set Block display value\\#6039\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/6039)\n\nCopy link\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/6039)\n\nCopy link\n\nOpen\n\nOpen\n\n[BUG: Cannot set Block display value](https://github.com/grapesjs/grapesjs/issues/6039#top)#6039\n\nCopy link\n\n[![@Gryphonn](https://avatars.githubusercontent.com/u/21972383?v=4&size=80)](https://github.com/Gryphonn)\n\n## Description\n\n[![@Gryphonn](https://avatars.githubusercontent.com/u/21972383?v=4&size=48)](https://github.com/Gryphonn)\n\n[Gryphonn](https://github.com/Gryphonn)\n\nopened [on Aug 6, 2024](https://github.com/GrapesJS/grapesjs/issues/6039#issue-2451559167)\n\n### GrapesJS version\n\n- I confirm to use the latest version of GrapesJS\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n### What browser are you using?\n\nChrome 126\n\n### Reproducible demo link\n\n[https://jsfiddle.net/Gryphonn/ob1pznh6/](https://jsfiddle.net/Gryphonn/ob1pznh6/)\n\n### Describe the bug\n\n**How to reproduce the bug?**\n\n1. Select any word.\n2. Wrap it for style.\n3. Keep this word selected.\n4. Go to General -> Display\n5. I want Block. I click Block but nothing happens.\n\n**What is the expected behavior?**\n\nDisplay value must be either empty so that I can instantly choose whatever I need.\n\nOr it must show the current actual display value of the selected text. Which is Inline in this case and not Block.\n\n**What is the current behavior?**\n\nCurrently I need to click twice.\n\nFirst, click anything except Block. The display field is activated.\n\nThen I should click Block.\n\nIf is necessary to execute some code in order to reproduce the bug, paste it here below:\n\n```\n// your code here\n```\n\n### Code of Conduct\n\n- I agree to follow this project's Code of Conduct\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n## Activity\n\n[![](https://avatars.githubusercontent.com/u/21972383?s=64&v=4)Gryphonn](https://github.com/Gryphonn)\n\nchanged the title BUG: BUG: Cannot set Block display value [on Aug 6, 2024](https://github.com/GrapesJS/grapesjs/issues/6039#event-13783123863)\n\n[![danstarns](https://avatars.githubusercontent.com/u/35999252?u=24da81e3ba29b858f6cf2ba8dece5b136b02bc89&v=4&size=80)](https://github.com/danstarns)\n\n### danstarns commented on Aug 7, 2024\n\n[![@danstarns](https://avatars.githubusercontent.com/u/35999252?u=24da81e3ba29b858f6cf2ba8dece5b136b02bc89&v=4&size=48)](https://github.com/danstarns)\n\n[danstarns](https://github.com/danstarns)\n\n[on Aug 7, 2024](https://github.com/GrapesJS/grapesjs/issues/6039#issuecomment-2275006520)\n\nMember\n\nHi [@Gryphonn](https://github.com/Gryphonn),\n\nI tried to reproduce your issue but the steps aren't that clear, please rephrase.\n\n[![Gryphonn](https://avatars.githubusercontent.com/u/21972383?v=4&size=80)](https://github.com/Gryphonn)\n\n### Gryphonn commented on Aug 8, 2024\n\n[![@Gryphonn](https://avatars.githubusercontent.com/u/21972383?v=4&size=48)](https://github.com/Gryphonn)\n\n[Gryphonn](https://github.com/Gryphonn)\n\n[on Aug 8, 2024](https://github.com/GrapesJS/grapesjs/issues/6039#issuecomment-2276391106)\n\nAuthor\n\n> Hi [@Gryphonn](https://github.com/Gryphonn),\n>\n> I tried to reproduce your issue but the steps aren't that clear, please rephrase.\n\nbandicam.2024-08-08.21-07-14-667.mp4\n\n[![danstarns](https://avatars.githubusercontent.com/u/35999252?u=24da81e3ba29b858f6cf2ba8dece5b136b02bc89&v=4&size=80)](https://github.com/danstarns)\n\n### danstarns commented on Aug 8, 2024\n\n[![@danstarns](https://avatars.githubusercontent.com/u/35999252?u=24da81e3ba29b858f6cf2ba8dece5b136b02bc89&v=4&size=48)](https://github.com/danstarns)\n\n[danstarns](https://github.com/danstarns)\n\n[on Aug 8, 2024](https://github.com/GrapesJS/grapesjs/issues/6039#issuecomment-2276458409)\n\nMember\n\n> > Hi [@Gryphonn](https://github.com/Gryphonn),\n> >\n> > I tried to reproduce your issue but the steps aren't that clear, please rephrase.\n>\n> bandicam.2024-08-08.21-07-14-667.mp4\n\nThank you for a detailed report 🙏\n\nIt looks like we should better handle the default display so you don't have to first change to another display and back again.\n\n👍1\n\n[![artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=80)](https://github.com/artf)\n\n### artf commented on Aug 8, 2024\n\n[![@artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=48)](https://github.com/artf)\n\n[artf](https://github.com/artf)\n\n[on Aug 8, 2024](https://github.com/GrapesJS/grapesjs/issues/6039#issuecomment-2277259128)\n\nMember\n\nYeah, the issue is here:\n\n[grapesjs/src/style\\_manager/model/PropertyFactory.ts](https://github.com/GrapesJS/grapesjs/blob/1e3766f0060e6da502fccf9ba9eb938d5ac860bb/src/style_manager/model/PropertyFactory.ts#L267)\n\nLine 267\nin\n[1e3766f](https://github.com/GrapesJS/grapesjs/commit/1e3766f0060e6da502fccf9ba9eb938d5ac860bb)\n\n|     |     |\n| --- | --- |\n|  | \\['display',{type: this.typeSelect,default: 'block',options: this.opstDisplay}\\], |\n\nWould it make sense to add a new option like `initial` and make it the default one?\n\n👍2\n\n[Sign up for free](https://github.com/signup?return_to=https://github.com/grapesjs/grapesjs/issues/6039)**to join this conversation on GitHub.** Already have an account? [Sign in to comment](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/6039)\n\n## Metadata\n\n### Assignees\n\nNo one assigned\n\n### Labels\n\nNo labels\n\nNo labels\n\n### Type\n\nNo type\n\n### Projects\n\nNo projects\n\n### Milestone\n\nNo milestone\n\n### Relationships\n\nNone yet\n\n### Development\n\nNo branches or pull requests\n\n### Participants\n\n[![@artf](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)](https://github.com/artf)[![@Gryphonn](https://avatars.githubusercontent.com/u/21972383?s=64&v=4)](https://github.com/Gryphonn)[![@danstarns](https://avatars.githubusercontent.com/u/35999252?s=64&u=24da81e3ba29b858f6cf2ba8dece5b136b02bc89&v=4)](https://github.com/danstarns)\n\n## Issue actions\n\nYou can’t perform that action at this time.\n\n\nBUG: Cannot set Block display value · Issue #6039 · GrapesJS/grapesjs",
    "metadata": {
      "url": "https://github.com/grapesjs/grapesjs/issues/6039",
      "ogUrl": "https://github.com/GrapesJS/grapesjs/issues/6039",
      "title": "BUG: Cannot set Block display value · Issue #6039 · GrapesJS/grapesjs",
      "og:url": "https://github.com/GrapesJS/grapesjs/issues/6039",
      "favicon": {},
      "og:type": "object",
      "ogImage": "https://opengraph.githubassets.com/755241b3764dd94b6be15adf886bbe503f2ae2ecf5adc8bca45af12c316b4aac/GrapesJS/grapesjs/issues/6039",
      "ogTitle": "BUG: Cannot set Block display value · Issue #6039 · GrapesJS/grapesjs",
      "hostname": "github.com",
      "language": "en",
      "og:image": "https://opengraph.githubassets.com/755241b3764dd94b6be15adf886bbe503f2ae2ecf5adc8bca45af12c316b4aac/GrapesJS/grapesjs/issues/6039",
      "og:title": "BUG: Cannot set Block display value · Issue #6039 · GrapesJS/grapesjs",
      "scrapeId": "dfa10c95-853e-4c97-beda-51ce5cf8c525",
      "viewport": "width=device-width",
      "fb:app_id": "1401488693436528",
      "go-import": "github.com/GrapesJS/grapesjs git https://github.com/GrapesJS/grapesjs.git",
      "sourceURL": "https://github.com/grapesjs/grapesjs/issues/6039",
      "ogSiteName": "GitHub",
      "request-id": "8F7B:3DE045:1F045AE:2BEDDAF:67AF549B",
      "statusCode": 200,
      "user-login": "",
      "description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome 126 Reproducible demo link https://jsfiddle.net/Gryphonn/ob1pznh6/ Describe the bug How to reproduce the bug? Select any word. Wrap it fo...",
      "theme-color": "#1e2327",
      "color-scheme": "light dark",
      "og:image:alt": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome 126 Reproducible demo link https://jsfiddle.net/Gryphonn/ob1pznh6/ Describe the bug How to reprod...",
      "og:site_name": "GitHub",
      "route-action": "issue_layout",
      "twitter:card": "summary_large_image",
      "twitter:site": "@github",
      "visitor-hmac": "35668a8e3bf3e75140fc14edbca81b03880823502636df6605531c5cecd76d00",
      "ogDescription": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome 126 Reproducible demo link https://jsfiddle.net/Gryphonn/ob1pznh6/ Describe the bug How to reprod...",
      "route-pattern": "/_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format)",
      "twitter:image": "https://opengraph.githubassets.com/755241b3764dd94b6be15adf886bbe503f2ae2ecf5adc8bca45af12c316b4aac/GrapesJS/grapesjs/issues/6039",
      "twitter:title": "BUG: Cannot set Block display value · Issue #6039 · GrapesJS/grapesjs",
      "octolytics-url": "https://collector.github.com/github/collect",
      "og:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome 126 Reproducible demo link https://jsfiddle.net/Gryphonn/ob1pznh6/ Describe the bug How to reprod...",
      "og:image:width": "1200",
      "html-safe-nonce": "29c997ecea770b1f20978d1c4c7827338d851b6c6fc2948f751a6a63cb2ef755",
      "og:image:height": "600",
      "visitor-payload": "eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiI4RjdCOjNERTA0NToxRjA0NUFFOjJCRUREQUY6NjdBRjU0OUIiLCJ2aXNpdG9yX2lkIjoiMTE3NzA0NjY2ODM2MDUwNDQ3NSIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9",
      "apple-itunes-app": "app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/grapesjs/grapesjs/6039/issue_layout",
      "route-controller": "voltron_issues_fragments",
      "browser-stats-url": "https://api.github.com/_private/browser/stats",
      "expected-hostname": "github.com",
      "analytics-location": "/<user-name>/<repo-name>/voltron/issues_fragments/issue_layout",
      "browser-errors-url": "https://api.github.com/_private/browser/errors",
      "og:author:username": "Gryphonn",
      "turbo-body-classes": "logged-out env-production page-responsive",
      "turbo-cache-control": "no-preview",
      "twitter:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome 126 Reproducible demo link https://jsfiddle.net/Gryphonn/ob1pznh6/ Describe the bug How to reprod...",
      "hovercard-subject-tag": "issue:2451559167",
      "google-site-verification": "Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I",
      "github-keyboard-shortcuts": "repository,issues,copilot",
      "current-catalog-service-hash": "81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114",
      "octolytics-dimension-user_id": "123950155",
      "octolytics-dimension-user_login": "GrapesJS",
      "octolytics-dimension-repository_id": "50146229",
      "octolytics-dimension-repository_nwo": "GrapesJS/grapesjs",
      "octolytics-dimension-repository_public": "true",
      "octolytics-dimension-repository_is_fork": "false",
      "octolytics-dimension-repository_network_root_id": "50146229",
      "octolytics-dimension-repository_network_root_nwo": "GrapesJS/grapesjs"
    }
  },
  {
    "markdown": "[Skip to content](https://github.com/grapesjs/grapesjs/issues/6143#start-of-content)\n\nYou signed in with another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/6143) to refresh your session.You signed out in another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/6143) to refresh your session.You switched accounts on another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/6143) to refresh your session.Dismiss alert\n\n[GrapesJS](https://github.com/GrapesJS)/ **[grapesjs](https://github.com/GrapesJS/grapesjs)** Public\n\n- Sponsor\n\n\n\n\n\n\n\n# Sponsor GrapesJS/grapesjs\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n##### External links\n\n\n\n\n\n![open_collective](https://github.githubassets.com/assets/open_collective-0a706523753d.svg)\n\n\n\n[opencollective.com/ **grapesjs**](https://opencollective.com/grapesjs)\n\n\n\n\n\n\n\n\n\n[Learn more about funding links in repositories](https://docs.github.com/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/displaying-a-sponsor-button-in-your-repository).\n\n\n\n\n[Report abuse](https://github.com/contact/report-abuse?report=GrapesJS%2Fgrapesjs+%28Repository+Funding+Links%29)\n\n- [Notifications](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs) You must be signed in to change notification settings\n- [Fork\\\\\n4.2k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n- [Star\\\\\n23.4k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n\n\n# BUG/\\[QUESTION\\]: How to correctly wrap a Component on add/mount?\\#6143\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/6143)\n\nCopy link\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/6143)\n\nCopy link\n\nOpen\n\nOpen\n\n[BUG/\\[QUESTION\\]: How to correctly wrap a Component on add/mount?](https://github.com/grapesjs/grapesjs/issues/6143#top)#6143\n\nCopy link\n\n[![@rhoenerSBS](https://avatars.githubusercontent.com/u/163008385?v=4&size=80)](https://github.com/rhoenerSBS)\n\n## Description\n\n[![@rhoenerSBS](https://avatars.githubusercontent.com/u/163008385?v=4&size=48)](https://github.com/rhoenerSBS)\n\n[rhoenerSBS](https://github.com/rhoenerSBS)\n\nopened [on Sep 10, 2024](https://github.com/GrapesJS/grapesjs/issues/6143#issue-2516569636)\n\n### GrapesJS version\n\n- I confirm to use the latest version of GrapesJS\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n### What browser are you using?\n\nChrome v128\n\n### Reproducible demo link\n\n[https://jsfiddle.net/fjyk6n4a/2/](https://jsfiddle.net/fjyk6n4a/2/)\n\n### Describe the bug\n\nHi [@artf](https://github.com/artf),\n\nI am currently trying to wrap a component in a section component if its has not been wrapped yet. I am hooking into the component:mount event and replacing the added component with the section component (which has the added one as child).\n\nMy Code looks something like this:\n\n```\neditor.on('component:mount', (component) => {\n       if (component.parent().attributes.tagName !== 'body')\n            return;\n        if (component.is('section'))\n            return;\n        component.replaceWith({\n            type: 'section',\n            components: component\n        });\n})\n```\n\nThe issue I'm facing is that the UndoManager stack is not completely aligned with what is happening. After the add and wrap the stack has 3 Entries: remove of original component, add of section and add of original component. When clicking undo the section is removed and the original component stays. But it is buggy in means of it is not removable and not really there because the stack entries do not reflect the changes correctly (maybe missing the initial add).\n\n**How to reproduce what I described:**\n\n1. open reproducable demo link\n2. add text component (is wrapped in section as visible in layers)\n3. click ctrl+z to undo\n4. text is still in canvas and layers, section is gone. text is not removable\n\n**My Question:**\n\nIdeally I would like to change the UndoManager stack in that on undo either the section and original component are both removed at the same time and without bugs (currently the problem) or the original component is removed and if you click undo again then the section is removed (as if the section was added first). In component:mount event the stack does not have the newest entry of the add yet so I cant manipulate it at that time.\n\nWhat is the best way to wrap the Component without having problems with the UndoManager or how can I manipulate the stack to fix it?\n\n### Code of Conduct\n\n- I agree to follow this project's Code of Conduct\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n## Activity\n\n[Sign up for free](https://github.com/signup?return_to=https://github.com/grapesjs/grapesjs/issues/6143)**to join this conversation on GitHub.** Already have an account? [Sign in to comment](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/6143)\n\n## Metadata\n\n### Assignees\n\nNo one assigned\n\n### Labels\n\nNo labels\n\nNo labels\n\n### Type\n\nNo type\n\n### Projects\n\nNo projects\n\n### Milestone\n\nNo milestone\n\n### Relationships\n\nNone yet\n\n### Development\n\nNo branches or pull requests\n\n### Participants\n\n[![@rhoenerSBS](https://avatars.githubusercontent.com/u/163008385?s=64&v=4)](https://github.com/rhoenerSBS)\n\n## Issue actions\n\nYou can’t perform that action at this time.\n\n\nBUG/\\[QUESTION\\]: How to correctly wrap a Component on add/mount? · Issue #6143 · GrapesJS/grapesjs",
    "metadata": {
      "url": "https://github.com/grapesjs/grapesjs/issues/6143",
      "ogUrl": "https://github.com/GrapesJS/grapesjs/issues/6143",
      "title": "BUG/[QUESTION]: How to correctly wrap a Component on add/mount? · Issue #6143 · GrapesJS/grapesjs",
      "og:url": "https://github.com/GrapesJS/grapesjs/issues/6143",
      "favicon": {},
      "og:type": "object",
      "ogImage": "https://opengraph.githubassets.com/a022fb807d7332adfc2a007c28a183d505d77f14955666f7896bc37da6d66d63/GrapesJS/grapesjs/issues/6143",
      "ogTitle": "BUG/[QUESTION]: How to correctly wrap a Component on add/mount? · Issue #6143 · GrapesJS/grapesjs",
      "hostname": "github.com",
      "language": "en",
      "og:image": "https://opengraph.githubassets.com/a022fb807d7332adfc2a007c28a183d505d77f14955666f7896bc37da6d66d63/GrapesJS/grapesjs/issues/6143",
      "og:title": "BUG/[QUESTION]: How to correctly wrap a Component on add/mount? · Issue #6143 · GrapesJS/grapesjs",
      "scrapeId": "fcaa418e-52b0-412d-b623-33d49d04cf14",
      "viewport": "width=device-width",
      "fb:app_id": "1401488693436528",
      "go-import": "github.com/GrapesJS/grapesjs git https://github.com/GrapesJS/grapesjs.git",
      "sourceURL": "https://github.com/grapesjs/grapesjs/issues/6143",
      "ogSiteName": "GitHub",
      "request-id": "8DA1:5A910:1EC074B:2B976D9:67AF549B",
      "statusCode": 200,
      "user-login": "",
      "description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome v128 Reproducible demo link https://jsfiddle.net/fjyk6n4a/2/ Describe the bug Hi @artf, I am currently trying to wrap a component in a se...",
      "theme-color": "#1e2327",
      "color-scheme": "light dark",
      "og:image:alt": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome v128 Reproducible demo link https://jsfiddle.net/fjyk6n4a/2/ Describe the bug Hi @artf, I am curr...",
      "og:site_name": "GitHub",
      "route-action": "issue_layout",
      "twitter:card": "summary_large_image",
      "twitter:site": "@github",
      "visitor-hmac": "d2da0c670545fdf0454c5a2d83c68fed928c4daa8981fb2f64c309fb82a781e6",
      "ogDescription": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome v128 Reproducible demo link https://jsfiddle.net/fjyk6n4a/2/ Describe the bug Hi @artf, I am curr...",
      "route-pattern": "/_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format)",
      "twitter:image": "https://opengraph.githubassets.com/a022fb807d7332adfc2a007c28a183d505d77f14955666f7896bc37da6d66d63/GrapesJS/grapesjs/issues/6143",
      "twitter:title": "BUG/[QUESTION]: How to correctly wrap a Component on add/mount? · Issue #6143 · GrapesJS/grapesjs",
      "octolytics-url": "https://collector.github.com/github/collect",
      "og:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome v128 Reproducible demo link https://jsfiddle.net/fjyk6n4a/2/ Describe the bug Hi @artf, I am curr...",
      "og:image:width": "1200",
      "html-safe-nonce": "edc0c79bec8d3106035bfad2179561d83873f84f5941c7d7fb90a52a2e7edbda",
      "og:image:height": "600",
      "visitor-payload": "eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiI4REExOjVBOTEwOjFFQzA3NEI6MkI5NzZEOTo2N0FGNTQ5QiIsInZpc2l0b3JfaWQiOiI2NDM5NzI1NjgxNjE2MDQ5MzA3IiwicmVnaW9uX2VkZ2UiOiJpYWQiLCJyZWdpb25fcmVuZGVyIjoiaWFkIn0=",
      "apple-itunes-app": "app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/grapesjs/grapesjs/6143/issue_layout",
      "route-controller": "voltron_issues_fragments",
      "browser-stats-url": "https://api.github.com/_private/browser/stats",
      "expected-hostname": "github.com",
      "analytics-location": "/<user-name>/<repo-name>/voltron/issues_fragments/issue_layout",
      "browser-errors-url": "https://api.github.com/_private/browser/errors",
      "og:author:username": "rhoenerSBS",
      "turbo-body-classes": "logged-out env-production page-responsive",
      "turbo-cache-control": "no-preview",
      "twitter:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome v128 Reproducible demo link https://jsfiddle.net/fjyk6n4a/2/ Describe the bug Hi @artf, I am curr...",
      "hovercard-subject-tag": "issue:2516569636",
      "google-site-verification": "Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I",
      "github-keyboard-shortcuts": "repository,issues,copilot",
      "current-catalog-service-hash": "81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114",
      "octolytics-dimension-user_id": "123950155",
      "octolytics-dimension-user_login": "GrapesJS",
      "octolytics-dimension-repository_id": "50146229",
      "octolytics-dimension-repository_nwo": "GrapesJS/grapesjs",
      "octolytics-dimension-repository_public": "true",
      "octolytics-dimension-repository_is_fork": "false",
      "octolytics-dimension-repository_network_root_id": "50146229",
      "octolytics-dimension-repository_network_root_nwo": "GrapesJS/grapesjs"
    }
  },
  {
    "markdown": "[Skip to content](https://github.com/grapesjs/grapesjs/issues/4847#start-of-content)\n\nYou signed in with another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/4847) to refresh your session.You signed out in another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/4847) to refresh your session.You switched accounts on another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/4847) to refresh your session.Dismiss alert\n\n[GrapesJS](https://github.com/GrapesJS)/ **[grapesjs](https://github.com/GrapesJS/grapesjs)** Public\n\n- Sponsor\n\n\n\n\n\n\n\n# Sponsor GrapesJS/grapesjs\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n##### External links\n\n\n\n\n\n![open_collective](https://github.githubassets.com/assets/open_collective-0a706523753d.svg)\n\n\n\n[opencollective.com/ **grapesjs**](https://opencollective.com/grapesjs)\n\n\n\n\n\n\n\n\n\n[Learn more about funding links in repositories](https://docs.github.com/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/displaying-a-sponsor-button-in-your-repository).\n\n\n\n\n[Report abuse](https://github.com/contact/report-abuse?report=GrapesJS%2Fgrapesjs+%28Repository+Funding+Links%29)\n\n- [Notifications](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs) You must be signed in to change notification settings\n- [Fork\\\\\n4.2k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n- [Star\\\\\n23.4k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n\n\n# BUG: Css edits aren't persisted to the DOM\\#4847\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/4847)\n\nCopy link\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/4847)\n\nCopy link\n\nOpen\n\nOpen\n\n[BUG: Css edits aren't persisted to the DOM](https://github.com/grapesjs/grapesjs/issues/4847#top)#4847\n\nCopy link\n\nLabels\n\n[bug](https://github.com/GrapesJS/grapesjs/issues?q=state%3Aopen%20label%3A%22bug%22) [help wanted](https://github.com/GrapesJS/grapesjs/issues?q=state%3Aopen%20label%3A%22help%20wanted%22)\n\n[![@wunksert](https://avatars.githubusercontent.com/u/12617956?v=4&size=80)](https://github.com/wunksert)\n\n## Description\n\n[![@wunksert](https://avatars.githubusercontent.com/u/12617956?v=4&size=48)](https://github.com/wunksert)\n\n[wunksert](https://github.com/wunksert)\n\nopened [on Jan 15, 2023](https://github.com/GrapesJS/grapesjs/issues/4847#issue-1533995871) · edited by [wunksert](https://github.com/wunksert)\n\nEdits\n\n### GrapesJS version\n\n- I confirm to use the latest version of GrapesJS\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n### What browser are you using?\n\nChrome Version 109.0.5414.87\n\n### Describe the bug\n\n**How to reproduce the bug?**\n\n1. Create a [@Keyframes](https://github.com/Keyframes) animation on the GrapesJS canvas\n\n```notranslate\n@keyframes appear_1234{\n  0%: {opacity:0};\n  100%: {opacity:100%}\n}\n\n```\n\nIn JS, create a new CssRule by passing the following string into editor.Css.addRules:\n\n```notranslate\nlet updatedRule = `@keyframes appear_1234{\n  0%: {opacity:0};\n  100%: {opacity:90%};\n}`\n\n```\n\n3. Add it to the canvas: `editor.Css.addRules(updatedRule)`\n\n**What is the expected behavior?**\n\nThe DOM should be updated\n\n**What is the current behavior?**\n\nThe DOM is not updated. HOWEVER, if I call `editor.getCss()`, I can see the correct value for opacity is returning.\n\nIf is necessary to execute some code in order to reproduce the bug, paste it here below:\n\n```notranslate\nfunction setup(){\n    let initialAnimation = `\n    @keyframes appear_1234{\n        0%: {opacity:0};\n        100%: {opacity:100%}\n      }\n    `\n    editor.Css.addRules(initialAnimation);\n}\n\nfunction update(){\n    let updatedAnimation = `\n    @keyframes appear_1234{\n        0%: {opacity:0};\n        100%: {opacity:90%}\n      }\n    `\n    editor.Css.addRules(updatedAnimation);\n}\n\nsetup()\nupdate()\n//DOM is not updated.\n\n//Css string is updated though\neditor.getCss()\n\n```\n\n### Code of Conduct\n\n- I agree to follow this project's Code of Conduct\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n👍1\n\n## Activity\n\n[![artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=80)](https://github.com/artf)\n\n### artf commented on Jan 17, 2023\n\n[![@artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=48)](https://github.com/artf)\n\n[artf](https://github.com/artf)\n\n[on Jan 17, 2023](https://github.com/GrapesJS/grapesjs/issues/4847#issuecomment-1386616699)\n\nMember\n\nSeems to be related to CssGroupRuleView [here](https://github.com/artf/grapesjs/blob/e6a086afac77d8da73f225dd0aa84b3d178ec47b/src/css_composer/view/CssRulesView.ts#L64-L80). In case of at-rules like `@keyframes` we have to force the re-render of the parent container.\n\n[![](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)artf](https://github.com/artf)\n\nadded\n\n[bug](https://github.com/grapesjs/grapesjs/issues?q=state%3Aopen%20label%3A%22bug%22)\n\n[help wanted](https://github.com/grapesjs/grapesjs/issues?q=state%3Aopen%20label%3A%22help%20wanted%22)\n\n[on Jan 17, 2023](https://github.com/GrapesJS/grapesjs/issues/4847#event-8252935823)\n\n[![wunksert](https://avatars.githubusercontent.com/u/12617956?v=4&size=80)](https://github.com/wunksert)\n\n### wunksert commented on Aug 16, 2023\n\n[![@wunksert](https://avatars.githubusercontent.com/u/12617956?v=4&size=48)](https://github.com/wunksert)\n\n[wunksert](https://github.com/wunksert)\n\n[on Aug 16, 2023](https://github.com/GrapesJS/grapesjs/issues/4847#issuecomment-1681096576) · edited by [wunksert](https://github.com/wunksert)\n\nEdits\n\nAuthor\n\n[@artf](https://github.com/artf) facing this issue again with `editor.CssComposer.remove(myCssRule)`\n\nthe editor css removes the rule but it's not flushed through to the DOM. How to you recommend I force re-render of the DOM while keeping the state of my editor intact? `editor.refresh` isn't flushing the styles to the DOM\n\n[Sign up for free](https://github.com/signup?return_to=https://github.com/grapesjs/grapesjs/issues/4847)**to join this conversation on GitHub.** Already have an account? [Sign in to comment](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/4847)\n\n## Metadata\n\n### Assignees\n\nNo one assigned\n\n### Labels\n\n[bug](https://github.com/GrapesJS/grapesjs/issues?q=state%3Aopen%20label%3A%22bug%22) [help wanted](https://github.com/GrapesJS/grapesjs/issues?q=state%3Aopen%20label%3A%22help%20wanted%22)\n\n### Type\n\nNo type\n\n### Projects\n\nNo projects\n\n### Milestone\n\nNo milestone\n\n### Relationships\n\nNone yet\n\n### Development\n\nNo branches or pull requests\n\n### Participants\n\n[![@artf](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)](https://github.com/artf)[![@wunksert](https://avatars.githubusercontent.com/u/12617956?s=64&v=4)](https://github.com/wunksert)\n\n## Issue actions\n\nYou can’t perform that action at this time.\n\n\nBUG: Css edits aren't persisted to the DOM · Issue #4847 · GrapesJS/grapesjs",
    "metadata": {
      "url": "https://github.com/grapesjs/grapesjs/issues/4847",
      "ogUrl": "https://github.com/GrapesJS/grapesjs/issues/4847",
      "title": "BUG: Css edits aren't persisted to the DOM · Issue #4847 · GrapesJS/grapesjs",
      "og:url": "https://github.com/GrapesJS/grapesjs/issues/4847",
      "favicon": {},
      "og:type": "object",
      "ogImage": "https://opengraph.githubassets.com/ffd9a938308da1998b1dca77a20ae2333dbb440738a1c9d68d7c72e79769cba9/GrapesJS/grapesjs/issues/4847",
      "ogTitle": "BUG: Css edits aren't persisted to the DOM · Issue #4847 · GrapesJS/grapesjs",
      "hostname": "github.com",
      "language": "en",
      "og:image": "https://opengraph.githubassets.com/ffd9a938308da1998b1dca77a20ae2333dbb440738a1c9d68d7c72e79769cba9/GrapesJS/grapesjs/issues/4847",
      "og:title": "BUG: Css edits aren't persisted to the DOM · Issue #4847 · GrapesJS/grapesjs",
      "scrapeId": "f9b48a0c-887b-4f37-959d-6a5a8613a92a",
      "viewport": "width=device-width",
      "fb:app_id": "1401488693436528",
      "go-import": "github.com/GrapesJS/grapesjs git https://github.com/GrapesJS/grapesjs.git",
      "sourceURL": "https://github.com/grapesjs/grapesjs/issues/4847",
      "ogSiteName": "GitHub",
      "request-id": "9D4F:187945:35FFBF3:4B47F72:67AF54A1",
      "statusCode": 200,
      "user-login": "",
      "description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 109.0.5414.87 Describe the bug How to reproduce the bug? Create a @Keyframes animation on the GrapesJS canvas @keyframes appear_1...",
      "theme-color": "#1e2327",
      "color-scheme": "light dark",
      "og:image:alt": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 109.0.5414.87 Describe the bug How to reproduce the bug? Create a @Keyframes animation on...",
      "og:site_name": "GitHub",
      "route-action": "issue_layout",
      "twitter:card": "summary_large_image",
      "twitter:site": "@github",
      "visitor-hmac": "9e82aae386f20791130dc29cd756d87e34deef81f2afa794057e66343ae46ebe",
      "ogDescription": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 109.0.5414.87 Describe the bug How to reproduce the bug? Create a @Keyframes animation on...",
      "route-pattern": "/_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format)",
      "twitter:image": "https://opengraph.githubassets.com/ffd9a938308da1998b1dca77a20ae2333dbb440738a1c9d68d7c72e79769cba9/GrapesJS/grapesjs/issues/4847",
      "twitter:title": "BUG: Css edits aren't persisted to the DOM · Issue #4847 · GrapesJS/grapesjs",
      "octolytics-url": "https://collector.github.com/github/collect",
      "og:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 109.0.5414.87 Describe the bug How to reproduce the bug? Create a @Keyframes animation on...",
      "og:image:width": "1200",
      "html-safe-nonce": "d0a126704bd03043ea65628ba5e79f34a2cb45a75a06dc9286c987c7c3807b08",
      "og:image:height": "600",
      "visitor-payload": "eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiI5RDRGOjE4Nzk0NTozNUZGQkYzOjRCNDdGNzI6NjdBRjU0QTEiLCJ2aXNpdG9yX2lkIjoiODA0MzExMDc4MjIyNTgzMTA3MyIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9",
      "apple-itunes-app": "app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/grapesjs/grapesjs/4847/issue_layout",
      "route-controller": "voltron_issues_fragments",
      "browser-stats-url": "https://api.github.com/_private/browser/stats",
      "expected-hostname": "github.com",
      "analytics-location": "/<user-name>/<repo-name>/voltron/issues_fragments/issue_layout",
      "browser-errors-url": "https://api.github.com/_private/browser/errors",
      "og:author:username": "wunksert",
      "turbo-body-classes": "logged-out env-production page-responsive",
      "turbo-cache-control": "no-preview",
      "twitter:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 109.0.5414.87 Describe the bug How to reproduce the bug? Create a @Keyframes animation on...",
      "hovercard-subject-tag": "issue:1533995871",
      "google-site-verification": "Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I",
      "github-keyboard-shortcuts": "repository,issues,copilot",
      "current-catalog-service-hash": "81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114",
      "octolytics-dimension-user_id": "123950155",
      "octolytics-dimension-user_login": "GrapesJS",
      "octolytics-dimension-repository_id": "50146229",
      "octolytics-dimension-repository_nwo": "GrapesJS/grapesjs",
      "octolytics-dimension-repository_public": "true",
      "octolytics-dimension-repository_is_fork": "false",
      "octolytics-dimension-repository_network_root_id": "50146229",
      "octolytics-dimension-repository_network_root_nwo": "GrapesJS/grapesjs"
    }
  },
  {
    "markdown": "[Skip to content](https://github.com/grapesjs/grapesjs/issues/2282#start-of-content)\n\nYou signed in with another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/2282) to refresh your session.You signed out in another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/2282) to refresh your session.You switched accounts on another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/2282) to refresh your session.Dismiss alert\n\n[GrapesJS](https://github.com/GrapesJS)/ **[grapesjs](https://github.com/GrapesJS/grapesjs)** Public\n\n- Sponsor\n\n\n\n\n\n\n\n# Sponsor GrapesJS/grapesjs\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n##### External links\n\n\n\n\n\n![open_collective](https://github.githubassets.com/assets/open_collective-0a706523753d.svg)\n\n\n\n[opencollective.com/ **grapesjs**](https://opencollective.com/grapesjs)\n\n\n\n\n\n\n\n\n\n[Learn more about funding links in repositories](https://docs.github.com/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/displaying-a-sponsor-button-in-your-repository).\n\n\n\n\n[Report abuse](https://github.com/contact/report-abuse?report=GrapesJS%2Fgrapesjs+%28Repository+Funding+Links%29)\n\n- [Notifications](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs) You must be signed in to change notification settings\n- [Fork\\\\\n4.2k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n- [Star\\\\\n23.4k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n\n\n# \\[Editor UI\\]: Replace the current View for the core editor UI components\\#2282\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/2282)\n\nCopy link\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/2282)\n\nCopy link\n\nOpen\n\nOpen\n\n[\\[Editor UI\\]: Replace the current View for the core editor UI components](https://github.com/grapesjs/grapesjs/issues/2282#top)#2282\n\nCopy link\n\nLabels\n\n[feature](https://github.com/GrapesJS/grapesjs/issues?q=state%3Aopen%20label%3A%22feature%22)\n\n[![@pouyamiralayi](https://avatars.githubusercontent.com/u/53266765?u=99058555cd96ab7592e6c3964cb0cea66d980f2d&v=4&size=80)](https://github.com/pouyamiralayi)\n\n## Description\n\n[![@pouyamiralayi](https://avatars.githubusercontent.com/u/53266765?u=99058555cd96ab7592e6c3964cb0cea66d980f2d&v=4&size=48)](https://github.com/pouyamiralayi)\n\n[pouyamiralayi](https://github.com/pouyamiralayi)\n\nopened [on Sep 19, 2019](https://github.com/GrapesJS/grapesjs/issues/2282#issue-496047439) · edited by [pouyamiralayi](https://github.com/pouyamiralayi)\n\nEdits\n\nHi there! the currently used structure of grapesjs is based on leveraging _backbonejs model-view concept_ for implementing the **Virtual Dom** inside the ecosystem of grapesjs. Virtual Dom is a great practice which has a vast area of applications and benefits; but the **downside** of virtual dom is the _actual gap between virtual and actual dom itself_, what this means is that the usage of virtual dom is some sort of **performance sacrifice** in order to achieve the model-view concept which is the already established architecture of grapesjs, react, vue & etc.\n\nbased on the real-time nature of grapesjs and its ability to manage thousands of model objects based on each user interaction, there are cases that performance is poorly appreciated on model updates that as it's result there would be no real-time experience for the end user. as an example of this scenario think about calling **addAttributes** for _property changes on a complex component type_ that will be invoked every time the end user provides us with new inputs in the associated trait section; each time that user presses a key, there would be a noticeable delay for the model to updates the attributes of the target component according to the user input.\n\n**my proposal on this matter** is to get rid of virtual dom in the sack of **hyperhtml** that benefits from actual dom that are _bounded to a context object that acts as our current model_. the way hyperhtml is achieving the model-view concept for actual dom is leveraging js native **template literals** and it's _associated chunks and interpolations_. i know this is a very scary taboo for the current implementation :) but i think if grapesjs architecture has been started up with backbone, the sub parts of the ecosystem should not follow the same lead although this is a common implication in the development path of a complex project like grapesjs; _backbone can be really tempting to push developers mind to go with it until the end_, but i am suggesting more flexibility by separating grapesjs into a s **olid core with backbone** and all the other parts leveraging hyperhtml to introduce a more lightweight, performance friendly ecosystem that embraces the future with no fear of performance breakdowns.\n\ni am a very naive developer and please forgive me if i am going wrong with this.\n\n[hyperhtml](https://viperhtml.js.org/hyperhtml/documentation)\n\ncheers.\n\n👍3\n\n## Activity\n\n[![](https://avatars.githubusercontent.com/u/53266765?s=64&u=99058555cd96ab7592e6c3964cb0cea66d980f2d&v=4)pouyamiralayi](https://github.com/pouyamiralayi)\n\nmentioned this [on Oct 16, 2019](https://github.com/GrapesJS/grapesjs/issues/2282#event-1012760818)\n\n- [\\[HELP\\] Canvas clears component rendering after Traits value change event #2329](https://github.com/GrapesJS/grapesjs/issues/2329)\n\n\n[![](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)artf](https://github.com/artf)\n\nchanged the title \\[Feature Proposal\\] hyperhtml as a replacement for virtual dom\\[Feature\\]: Replace the current View for the core editor UI components [on Aug 10, 2023](https://github.com/GrapesJS/grapesjs/issues/2282#event-10058816260)\n\n[![](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)artf](https://github.com/artf)\n\nadded\n\n[feature](https://github.com/grapesjs/grapesjs/issues?q=state%3Aopen%20label%3A%22feature%22)\n\n[on Aug 10, 2023](https://github.com/GrapesJS/grapesjs/issues/2282#event-10058817980)\n\n[![](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)artf](https://github.com/artf)\n\nadded this to [Roadmap](https://github.com/orgs/GrapesJS/projects/1) [on Aug 10, 2023](https://github.com/GrapesJS/grapesjs/issues/2282#event-14872448390)\n\n[![](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)artf](https://github.com/artf)\n\nmoved this to 📋 Accepted in [Roadmap](https://github.com/orgs/GrapesJS/projects/1) [on Aug 10, 2023](https://github.com/GrapesJS/grapesjs/issues/2282)\n\n[![lexoyo](https://avatars.githubusercontent.com/u/715377?u=7aa7b55b3da813ca320ef07ec8019991c2f45b08&v=4&size=80)](https://github.com/lexoyo)\n\n### lexoyo commented on Nov 30, 2023\n\n[![@lexoyo](https://avatars.githubusercontent.com/u/715377?u=7aa7b55b3da813ca320ef07ec8019991c2f45b08&v=4&size=48)](https://github.com/lexoyo)\n\n[lexoyo](https://github.com/lexoyo)\n\n[on Nov 30, 2023](https://github.com/GrapesJS/grapesjs/issues/2282#issuecomment-1834323745)\n\nContributor\n\nNice idea\n\nI use lit-html quite lot, it's the same approach but also adds web components when/if needed\n\nBut i don't get where would backbone stop? And what would be without it. I guess it is a question that is broader about what [@artf](https://github.com/artf) announced in the roadmap (taking things out of the core)\n\n[![artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=80)](https://github.com/artf)\n\n### artf commented on Dec 7, 2023\n\n[![@artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=48)](https://github.com/artf)\n\n[artf](https://github.com/artf)\n\n[on Dec 7, 2023](https://github.com/GrapesJS/grapesjs/issues/2282#issuecomment-1845683657)\n\nMember\n\nYes [@lexoyo](https://github.com/lexoyo) the final goal here would be to stop relying on Backbone's View and migrate all editor UI elements to web components. In the end, there will be `@grapesjs/core` (no UI) and `@grapesjs/core-ui` with a set of reusable and extendable web components for the editor UI\n\n🚀4\n\n[![lexoyo](https://avatars.githubusercontent.com/u/715377?u=7aa7b55b3da813ca320ef07ec8019991c2f45b08&v=4&size=80)](https://github.com/lexoyo)\n\n### lexoyo commented on Dec 7, 2023\n\n[![@lexoyo](https://avatars.githubusercontent.com/u/715377?u=7aa7b55b3da813ca320ef07ec8019991c2f45b08&v=4&size=48)](https://github.com/lexoyo)\n\n[lexoyo](https://github.com/lexoyo)\n\n[on Dec 7, 2023](https://github.com/GrapesJS/grapesjs/issues/2282#issuecomment-1845754663)\n\nContributor\n\nOk that's interesting :)\n\nI can't wait to see that and i will contribute as much as i can\n\n❤️1\n\n[![](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)artf](https://github.com/artf)\n\nmentioned this [on Jan 11, 2024](https://github.com/GrapesJS/grapesjs/issues/2282#event-1346226064)\n\n- [Trait refactor #5562](https://github.com/GrapesJS/grapesjs/pull/5562)\n\n\n[![](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)artf](https://github.com/artf)\n\nchanged the title \\[Feature\\]: Replace the current View for the core editor UI components\\[Editor UI\\]: Replace the current View for the core editor UI components [on Jun 6, 2024](https://github.com/GrapesJS/grapesjs/issues/2282#event-13064190688)\n\n[Sign up for free](https://github.com/signup?return_to=https://github.com/grapesjs/grapesjs/issues/2282)**to join this conversation on GitHub.** Already have an account? [Sign in to comment](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/2282)\n\n## Metadata\n\n### Assignees\n\nNo one assigned\n\n### Labels\n\n[feature](https://github.com/GrapesJS/grapesjs/issues?q=state%3Aopen%20label%3A%22feature%22)\n\n### Type\n\nNo type\n\n### Projects\n\n[Roadmap](https://github.com/orgs/GrapesJS/projects/1)\n\n- Status\n\n\n\n📋 Accepted\n\n\n### Milestone\n\nNo milestone\n\n### Relationships\n\nNone yet\n\n### Development\n\nNo branches or pull requests\n\n### Participants\n\n[![@lexoyo](https://avatars.githubusercontent.com/u/715377?s=64&u=7aa7b55b3da813ca320ef07ec8019991c2f45b08&v=4)](https://github.com/lexoyo)[![@artf](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)](https://github.com/artf)[![@pouyamiralayi](https://avatars.githubusercontent.com/u/53266765?s=64&u=99058555cd96ab7592e6c3964cb0cea66d980f2d&v=4)](https://github.com/pouyamiralayi)\n\n## Issue actions\n\nYou can’t perform that action at this time.\n\n\n\\[Editor UI\\]: Replace the current View for the core editor UI components · Issue #2282 · GrapesJS/grapesjs",
    "metadata": {
      "url": "https://github.com/grapesjs/grapesjs/issues/2282",
      "ogUrl": "https://github.com/GrapesJS/grapesjs/issues/2282",
      "title": "[Editor UI]: Replace the current View for the core editor UI components · Issue #2282 · GrapesJS/grapesjs",
      "og:url": "https://github.com/GrapesJS/grapesjs/issues/2282",
      "favicon": {},
      "og:type": "object",
      "ogImage": "https://opengraph.githubassets.com/05000f5db691902d34474338b1284856b1626d243b734df61bf019b8667efa6c/GrapesJS/grapesjs/issues/2282",
      "ogTitle": "[Editor UI]: Replace the current View for the core editor UI components · Issue #2282 · GrapesJS/grapesjs",
      "hostname": "github.com",
      "language": "en",
      "og:image": "https://opengraph.githubassets.com/05000f5db691902d34474338b1284856b1626d243b734df61bf019b8667efa6c/GrapesJS/grapesjs/issues/2282",
      "og:title": "[Editor UI]: Replace the current View for the core editor UI components · Issue #2282 · GrapesJS/grapesjs",
      "scrapeId": "09abb5c4-9ef3-4089-bd22-bdaaf9adb224",
      "viewport": "width=device-width",
      "fb:app_id": "1401488693436528",
      "go-import": "github.com/GrapesJS/grapesjs git https://github.com/GrapesJS/grapesjs.git",
      "sourceURL": "https://github.com/grapesjs/grapesjs/issues/2282",
      "ogSiteName": "GitHub",
      "request-id": "A7D5:17E1A2:1F2BD0E:2C0EA94:67AF549B",
      "statusCode": 200,
      "user-login": "",
      "description": "Hi there! the currently used structure of grapesjs is based on leveraging backbonejs model-view concept for implementing the Virtual Dom inside the ecosystem of grapesjs. Virtual Dom is a great practice which has a vast area of applicati...",
      "theme-color": "#1e2327",
      "color-scheme": "light dark",
      "og:image:alt": "Hi there! the currently used structure of grapesjs is based on leveraging backbonejs model-view concept for implementing the Virtual Dom inside the ecosystem of grapesjs. Virtual Dom is a great pra...",
      "og:site_name": "GitHub",
      "route-action": "issue_layout",
      "twitter:card": "summary_large_image",
      "twitter:site": "@github",
      "visitor-hmac": "bd6a6c7b78687d4e65f20663eac3f2fc68f25920c8f59d97fa4208b335229375",
      "ogDescription": "Hi there! the currently used structure of grapesjs is based on leveraging backbonejs model-view concept for implementing the Virtual Dom inside the ecosystem of grapesjs. Virtual Dom is a great pra...",
      "route-pattern": "/_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format)",
      "twitter:image": "https://opengraph.githubassets.com/05000f5db691902d34474338b1284856b1626d243b734df61bf019b8667efa6c/GrapesJS/grapesjs/issues/2282",
      "twitter:title": "[Editor UI]: Replace the current View for the core editor UI components · Issue #2282 · GrapesJS/grapesjs",
      "octolytics-url": "https://collector.github.com/github/collect",
      "og:description": "Hi there! the currently used structure of grapesjs is based on leveraging backbonejs model-view concept for implementing the Virtual Dom inside the ecosystem of grapesjs. Virtual Dom is a great pra...",
      "og:image:width": "1200",
      "html-safe-nonce": "dda5c945e56def6a7724fc418a54a39e87b1bdea66633f440c06ac00c4c2b656",
      "og:image:height": "600",
      "visitor-payload": "eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJBN0Q1OjE3RTFBMjoxRjJCRDBFOjJDMEVBOTQ6NjdBRjU0OUIiLCJ2aXNpdG9yX2lkIjoiNjIxODAzNzcyMzQwNzUzNzMwNyIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9",
      "apple-itunes-app": "app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/grapesjs/grapesjs/2282/issue_layout",
      "route-controller": "voltron_issues_fragments",
      "browser-stats-url": "https://api.github.com/_private/browser/stats",
      "expected-hostname": "github.com",
      "analytics-location": "/<user-name>/<repo-name>/voltron/issues_fragments/issue_layout",
      "browser-errors-url": "https://api.github.com/_private/browser/errors",
      "og:author:username": "pouyamiralayi",
      "turbo-body-classes": "logged-out env-production page-responsive",
      "turbo-cache-control": "no-preview",
      "twitter:description": "Hi there! the currently used structure of grapesjs is based on leveraging backbonejs model-view concept for implementing the Virtual Dom inside the ecosystem of grapesjs. Virtual Dom is a great pra...",
      "hovercard-subject-tag": "issue:496047439",
      "google-site-verification": "Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I",
      "github-keyboard-shortcuts": "repository,issues,copilot",
      "current-catalog-service-hash": "81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114",
      "octolytics-dimension-user_id": "123950155",
      "octolytics-dimension-user_login": "GrapesJS",
      "octolytics-dimension-repository_id": "50146229",
      "octolytics-dimension-repository_nwo": "GrapesJS/grapesjs",
      "octolytics-dimension-repository_public": "true",
      "octolytics-dimension-repository_is_fork": "false",
      "octolytics-dimension-repository_network_root_id": "50146229",
      "octolytics-dimension-repository_network_root_nwo": "GrapesJS/grapesjs"
    }
  },
  {
    "markdown": "[Skip to content](https://github.com/grapesjs/grapesjs/issues/6394#start-of-content)\n\nYou signed in with another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/6394) to refresh your session.You signed out in another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/6394) to refresh your session.You switched accounts on another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/6394) to refresh your session.Dismiss alert\n\n[GrapesJS](https://github.com/GrapesJS)/ **[grapesjs](https://github.com/GrapesJS/grapesjs)** Public\n\n- Sponsor\n\n\n\n\n\n\n\n# Sponsor GrapesJS/grapesjs\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n##### External links\n\n\n\n\n\n![open_collective](https://github.githubassets.com/assets/open_collective-0a706523753d.svg)\n\n\n\n[opencollective.com/ **grapesjs**](https://opencollective.com/grapesjs)\n\n\n\n\n\n\n\n\n\n[Learn more about funding links in repositories](https://docs.github.com/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/displaying-a-sponsor-button-in-your-repository).\n\n\n\n\n[Report abuse](https://github.com/contact/report-abuse?report=GrapesJS%2Fgrapesjs+%28Repository+Funding+Links%29)\n\n- [Notifications](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs) You must be signed in to change notification settings\n- [Fork\\\\\n4.2k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n- [Star\\\\\n23.4k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n\n\n# BUG: layer manager bug on Safari Mac\\#6394\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/6394)\n\nCopy link\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/6394)\n\nCopy link\n\nOpen\n\nOpen\n\n[BUG: layer manager bug on Safari Mac](https://github.com/grapesjs/grapesjs/issues/6394#top)#6394\n\nCopy link\n\n[![@spyjo](https://avatars.githubusercontent.com/u/4271747?u=e1d815b2c9c98b0c9723a0726122f3a1b0bc5a05&v=4&size=80)](https://github.com/spyjo)\n\n## Description\n\n[![@spyjo](https://avatars.githubusercontent.com/u/4271747?u=e1d815b2c9c98b0c9723a0726122f3a1b0bc5a05&v=4&size=48)](https://github.com/spyjo)\n\n[spyjo](https://github.com/spyjo)\n\nopened [on Feb 1, 2025](https://github.com/GrapesJS/grapesjs/issues/6394#issue-2825305609) · edited by [spyjo](https://github.com/spyjo)\n\nEdits\n\n### GrapesJS version\n\n- I confirm to use the latest version of GrapesJS\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n### What browser are you using?\n\nSafari 18.3 Macos 14.7.3\n\n### Reproducible demo link\n\n[https://grapesjs.com/demo.html](https://grapesjs.com/demo.html)\n\n### Describe the bug\n\n**How to reproduce the bug?**\n\n1. Open the Layer Manager on the right panel\n2. Try to hide \"body\", or open it\n3. OR click on an element, the layers are appearing in the layer manager list, and then try to hide/open/drag\n\n**What is the expected behavior?**\n\nThe icons to hide , drag, or open a layer should appear\n\n**What is the current behavior?**\n\nNo icons are appearing, drag is not working\n\nBelow is a screenshot on Safari:\n\n[![Image](https://private-user-images.githubusercontent.com/4271747/408812264-fc9e60bd-2178-48a6-82dd-35fca17b74ff.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1NDQwMDcsIm5iZiI6MTczOTU0MzcwNywicGF0aCI6Ii80MjcxNzQ3LzQwODgxMjI2NC1mYzllNjBiZC0yMTc4LTQ4YTYtODJkZC0zNWZjYTE3Yjc0ZmYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIxNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMTRUMTQzNTA3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YzgwZGZlZTUwNjZiZmRhM2QxMmVhZDEwOTczMGM2NmQ2YjA4YjAyZWExNmFiZGQyMWMyYTc1NGJkMDdhNDFjMyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.pkdQjWplT96byCbQiaWaktMWjK6xtWJSiYLKcTC9s1s)](https://private-user-images.githubusercontent.com/4271747/408812264-fc9e60bd-2178-48a6-82dd-35fca17b74ff.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1NDQwMDcsIm5iZiI6MTczOTU0MzcwNywicGF0aCI6Ii80MjcxNzQ3LzQwODgxMjI2NC1mYzllNjBiZC0yMTc4LTQ4YTYtODJkZC0zNWZjYTE3Yjc0ZmYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIxNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMTRUMTQzNTA3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YzgwZGZlZTUwNjZiZmRhM2QxMmVhZDEwOTczMGM2NmQ2YjA4YjAyZWExNmFiZGQyMWMyYTc1NGJkMDdhNDFjMyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.pkdQjWplT96byCbQiaWaktMWjK6xtWJSiYLKcTC9s1s)\n\nThank you\n\n### Code of Conduct\n\n- I agree to follow this project's Code of Conduct\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n## Activity\n\n[Sign up for free](https://github.com/signup?return_to=https://github.com/grapesjs/grapesjs/issues/6394)**to join this conversation on GitHub.** Already have an account? [Sign in to comment](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/6394)\n\n## Metadata\n\n### Assignees\n\nNo one assigned\n\n### Labels\n\nNo labels\n\nNo labels\n\n### Type\n\nNo type\n\n### Projects\n\nNo projects\n\n### Milestone\n\nNo milestone\n\n### Relationships\n\nNone yet\n\n### Development\n\nNo branches or pull requests\n\n### Participants\n\n[![@spyjo](https://avatars.githubusercontent.com/u/4271747?s=64&u=e1d815b2c9c98b0c9723a0726122f3a1b0bc5a05&v=4)](https://github.com/spyjo)\n\n## Issue actions\n\nYou can’t perform that action at this time.\n\n\nBUG: layer manager bug on Safari Mac · Issue #6394 · GrapesJS/grapesjs",
    "metadata": {
      "url": "https://github.com/grapesjs/grapesjs/issues/6394",
      "ogUrl": "https://github.com/GrapesJS/grapesjs/issues/6394",
      "title": "BUG: layer manager bug on Safari Mac · Issue #6394 · GrapesJS/grapesjs",
      "og:url": "https://github.com/GrapesJS/grapesjs/issues/6394",
      "favicon": {},
      "og:type": "object",
      "ogImage": "https://opengraph.githubassets.com/12e5aa465681c361c7104f26bbc4bc5862864ce7e391e5969023660b7d829aed/GrapesJS/grapesjs/issues/6394",
      "ogTitle": "BUG: layer manager bug on Safari Mac · Issue #6394 · GrapesJS/grapesjs",
      "hostname": "github.com",
      "language": "en",
      "og:image": "https://opengraph.githubassets.com/12e5aa465681c361c7104f26bbc4bc5862864ce7e391e5969023660b7d829aed/GrapesJS/grapesjs/issues/6394",
      "og:title": "BUG: layer manager bug on Safari Mac · Issue #6394 · GrapesJS/grapesjs",
      "scrapeId": "2b544eb4-ae16-46a8-bf30-b9987d7ea8bf",
      "viewport": "width=device-width",
      "fb:app_id": "1401488693436528",
      "go-import": "github.com/GrapesJS/grapesjs git https://github.com/GrapesJS/grapesjs.git",
      "sourceURL": "https://github.com/grapesjs/grapesjs/issues/6394",
      "ogSiteName": "GitHub",
      "request-id": "9F99:14BF71:3754D9F:4CC0A33:67AF549B",
      "statusCode": 200,
      "user-login": "",
      "description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Safari 18.3 Macos 14.7.3 Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to reproduce the bug? Open the Layer Manager...",
      "theme-color": "#1e2327",
      "color-scheme": "light dark",
      "og:image:alt": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Safari 18.3 Macos 14.7.3 Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to r...",
      "og:site_name": "GitHub",
      "route-action": "issue_layout",
      "twitter:card": "summary_large_image",
      "twitter:site": "@github",
      "visitor-hmac": "4b4d7e8f1f0965febf0d862e485d3565fb793cf3b0b76c664c1eecc30d353511",
      "ogDescription": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Safari 18.3 Macos 14.7.3 Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to r...",
      "route-pattern": "/_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format)",
      "twitter:image": "https://opengraph.githubassets.com/12e5aa465681c361c7104f26bbc4bc5862864ce7e391e5969023660b7d829aed/GrapesJS/grapesjs/issues/6394",
      "twitter:title": "BUG: layer manager bug on Safari Mac · Issue #6394 · GrapesJS/grapesjs",
      "octolytics-url": "https://collector.github.com/github/collect",
      "og:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Safari 18.3 Macos 14.7.3 Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to r...",
      "og:image:width": "1200",
      "html-safe-nonce": "cb9a81fa4fb5f8ccb0b5071ec25b48750fa0c01bfb63f5b21f9c73e75e9cbe91",
      "og:image:height": "600",
      "visitor-payload": "eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiI5Rjk5OjE0QkY3MTozNzU0RDlGOjRDQzBBMzM6NjdBRjU0OUIiLCJ2aXNpdG9yX2lkIjoiNzYxODU0Njc0MDk2MDkwODQ0MyIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9",
      "apple-itunes-app": "app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/grapesjs/grapesjs/6394/issue_layout",
      "route-controller": "voltron_issues_fragments",
      "browser-stats-url": "https://api.github.com/_private/browser/stats",
      "expected-hostname": "github.com",
      "analytics-location": "/<user-name>/<repo-name>/voltron/issues_fragments/issue_layout",
      "browser-errors-url": "https://api.github.com/_private/browser/errors",
      "og:author:username": "spyjo",
      "turbo-body-classes": "logged-out env-production page-responsive",
      "turbo-cache-control": "no-preview",
      "twitter:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Safari 18.3 Macos 14.7.3 Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to r...",
      "hovercard-subject-tag": "issue:2825305609",
      "google-site-verification": "Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I",
      "github-keyboard-shortcuts": "repository,issues,copilot",
      "current-catalog-service-hash": "81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114",
      "octolytics-dimension-user_id": "123950155",
      "octolytics-dimension-user_login": "GrapesJS",
      "octolytics-dimension-repository_id": "50146229",
      "octolytics-dimension-repository_nwo": "GrapesJS/grapesjs",
      "octolytics-dimension-repository_public": "true",
      "octolytics-dimension-repository_is_fork": "false",
      "octolytics-dimension-repository_network_root_id": "50146229",
      "octolytics-dimension-repository_network_root_nwo": "GrapesJS/grapesjs"
    }
  },
  {
    "markdown": "[Skip to content](https://github.com/grapesjs/grapesjs/issues/6345#start-of-content)\n\nYou signed in with another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/6345) to refresh your session.You signed out in another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/6345) to refresh your session.You switched accounts on another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/6345) to refresh your session.Dismiss alert\n\n[GrapesJS](https://github.com/GrapesJS)/ **[grapesjs](https://github.com/GrapesJS/grapesjs)** Public\n\n- Sponsor\n\n\n\n\n\n\n\n# Sponsor GrapesJS/grapesjs\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n##### External links\n\n\n\n\n\n![open_collective](https://github.githubassets.com/assets/open_collective-0a706523753d.svg)\n\n\n\n[opencollective.com/ **grapesjs**](https://opencollective.com/grapesjs)\n\n\n\n\n\n\n\n\n\n[Learn more about funding links in repositories](https://docs.github.com/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/displaying-a-sponsor-button-in-your-repository).\n\n\n\n\n[Report abuse](https://github.com/contact/report-abuse?report=GrapesJS%2Fgrapesjs+%28Repository+Funding+Links%29)\n\n- [Notifications](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs) You must be signed in to change notification settings\n- [Fork\\\\\n4.2k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n- [Star\\\\\n23.4k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n\n\n# BUG: Cannot select + SHIFT to select bulk text\\#6345\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/6345)\n\nCopy link\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/6345)\n\nCopy link\n\nOpen\n\nOpen\n\n[BUG: Cannot select + SHIFT to select bulk text](https://github.com/grapesjs/grapesjs/issues/6345#top)#6345\n\nCopy link\n\n[![@VanTranTrucPhuong](https://avatars.githubusercontent.com/u/49053638?v=4&size=80)](https://github.com/VanTranTrucPhuong)\n\n## Description\n\n[![@VanTranTrucPhuong](https://avatars.githubusercontent.com/u/49053638?v=4&size=48)](https://github.com/VanTranTrucPhuong)\n\n[VanTranTrucPhuong](https://github.com/VanTranTrucPhuong)\n\nopened [on Dec 5, 2024](https://github.com/GrapesJS/grapesjs/issues/6345#issue-2722018318)\n\n### GrapesJS version\n\n- I confirm to use the latest version of GrapesJS\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n### What browser are you using?\n\nChrome Version 131.0.6778.109 (Official Build) (64-bit)\n\n### Reproducible demo link\n\n[https://grapesjs.com/demo-newsletter-editor](https://grapesjs.com/demo-newsletter-editor)\n\n### Describe the bug\n\n**How to reproduce the bug?**\n\n1. Place the mouse pointer at the starting position of the text you want to select.\n2. Press and hold the SHIFT key.\n3. Move the mouse pointer to the desired endpoint of the text selection.\n\n**What is the expected behavior?**\n\nThe selected text should automatically have a highlighted background indicating it has been selected.\n\n**What is the current behavior?**\n\nThe selected text does not have a highlighted background.\n\n### Code of Conduct\n\n- I agree to follow this project's Code of Conduct\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n## Activity\n\n[Sign up for free](https://github.com/signup?return_to=https://github.com/grapesjs/grapesjs/issues/6345)**to join this conversation on GitHub.** Already have an account? [Sign in to comment](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/6345)\n\n## Metadata\n\n### Assignees\n\nNo one assigned\n\n### Labels\n\nNo labels\n\nNo labels\n\n### Type\n\nNo type\n\n### Projects\n\nNo projects\n\n### Milestone\n\nNo milestone\n\n### Relationships\n\nNone yet\n\n### Development\n\nNo branches or pull requests\n\n### Participants\n\n[![@VanTranTrucPhuong](https://avatars.githubusercontent.com/u/49053638?s=64&v=4)](https://github.com/VanTranTrucPhuong)\n\n## Issue actions\n\nYou can’t perform that action at this time.\n\n\nBUG: Cannot select + SHIFT to select bulk text · Issue #6345 · GrapesJS/grapesjs",
    "metadata": {
      "url": "https://github.com/grapesjs/grapesjs/issues/6345",
      "ogUrl": "https://github.com/GrapesJS/grapesjs/issues/6345",
      "title": "BUG: Cannot select + SHIFT to select bulk text · Issue #6345 · GrapesJS/grapesjs",
      "og:url": "https://github.com/GrapesJS/grapesjs/issues/6345",
      "favicon": {},
      "og:type": "object",
      "ogImage": "https://opengraph.githubassets.com/2c18f2a41e73892dec1e0eaa19e02fdf728a7d8e4c51c7b366e8c73c56a6874b/GrapesJS/grapesjs/issues/6345",
      "ogTitle": "BUG: Cannot select + SHIFT to select bulk text · Issue #6345 · GrapesJS/grapesjs",
      "hostname": "github.com",
      "language": "en",
      "og:image": "https://opengraph.githubassets.com/2c18f2a41e73892dec1e0eaa19e02fdf728a7d8e4c51c7b366e8c73c56a6874b/GrapesJS/grapesjs/issues/6345",
      "og:title": "BUG: Cannot select + SHIFT to select bulk text · Issue #6345 · GrapesJS/grapesjs",
      "scrapeId": "aa9458cc-86b1-4007-b411-9b8d82954139",
      "viewport": "width=device-width",
      "fb:app_id": "1401488693436528",
      "go-import": "github.com/GrapesJS/grapesjs git https://github.com/GrapesJS/grapesjs.git",
      "sourceURL": "https://github.com/grapesjs/grapesjs/issues/6345",
      "ogSiteName": "GitHub",
      "request-id": "B13D:214920:1E7F4F0:2B09A05:67AF549B",
      "statusCode": 200,
      "user-login": "",
      "description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 131.0.6778.109 (Official Build) (64-bit) Reproducible demo link https://grapesjs.com/demo-newsletter-editor Describe the bug How ...",
      "theme-color": "#1e2327",
      "color-scheme": "light dark",
      "og:image:alt": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 131.0.6778.109 (Official Build) (64-bit) Reproducible demo link https://grapesjs.com/demo...",
      "og:site_name": "GitHub",
      "route-action": "issue_layout",
      "twitter:card": "summary_large_image",
      "twitter:site": "@github",
      "visitor-hmac": "748ca18e926e0e46dd9af6d737fe5c488d82b48c71745e6a6e1215cee3677281",
      "ogDescription": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 131.0.6778.109 (Official Build) (64-bit) Reproducible demo link https://grapesjs.com/demo...",
      "route-pattern": "/_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format)",
      "twitter:image": "https://opengraph.githubassets.com/2c18f2a41e73892dec1e0eaa19e02fdf728a7d8e4c51c7b366e8c73c56a6874b/GrapesJS/grapesjs/issues/6345",
      "twitter:title": "BUG: Cannot select + SHIFT to select bulk text · Issue #6345 · GrapesJS/grapesjs",
      "octolytics-url": "https://collector.github.com/github/collect",
      "og:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 131.0.6778.109 (Official Build) (64-bit) Reproducible demo link https://grapesjs.com/demo...",
      "og:image:width": "1200",
      "html-safe-nonce": "b4afc51bf410ff488bf88c6ea0a6af3e677d742e9f8d19cc53ccc60d447fb306",
      "og:image:height": "600",
      "visitor-payload": "eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJCMTNEOjIxNDkyMDoxRTdGNEYwOjJCMDlBMDU6NjdBRjU0OUIiLCJ2aXNpdG9yX2lkIjoiMzUwMjkwMzM5MTk0OTkwMzAwMyIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9",
      "apple-itunes-app": "app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/grapesjs/grapesjs/6345/issue_layout",
      "route-controller": "voltron_issues_fragments",
      "browser-stats-url": "https://api.github.com/_private/browser/stats",
      "expected-hostname": "github.com",
      "analytics-location": "/<user-name>/<repo-name>/voltron/issues_fragments/issue_layout",
      "browser-errors-url": "https://api.github.com/_private/browser/errors",
      "og:author:username": "VanTranTrucPhuong",
      "turbo-body-classes": "logged-out env-production page-responsive",
      "turbo-cache-control": "no-preview",
      "twitter:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 131.0.6778.109 (Official Build) (64-bit) Reproducible demo link https://grapesjs.com/demo...",
      "hovercard-subject-tag": "issue:2722018318",
      "google-site-verification": "Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I",
      "github-keyboard-shortcuts": "repository,issues,copilot",
      "current-catalog-service-hash": "81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114",
      "octolytics-dimension-user_id": "123950155",
      "octolytics-dimension-user_login": "GrapesJS",
      "octolytics-dimension-repository_id": "50146229",
      "octolytics-dimension-repository_nwo": "GrapesJS/grapesjs",
      "octolytics-dimension-repository_public": "true",
      "octolytics-dimension-repository_is_fork": "false",
      "octolytics-dimension-repository_network_root_id": "50146229",
      "octolytics-dimension-repository_network_root_nwo": "GrapesJS/grapesjs"
    }
  },
  {
    "markdown": "[Skip to content](https://github.com/grapesjs/grapesjs/issues/6032#start-of-content)\n\nYou signed in with another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/6032) to refresh your session.You signed out in another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/6032) to refresh your session.You switched accounts on another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/6032) to refresh your session.Dismiss alert\n\n[GrapesJS](https://github.com/GrapesJS)/ **[grapesjs](https://github.com/GrapesJS/grapesjs)** Public\n\n- Sponsor\n\n\n\n\n\n\n\n# Sponsor GrapesJS/grapesjs\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n##### External links\n\n\n\n\n\n![open_collective](https://github.githubassets.com/assets/open_collective-0a706523753d.svg)\n\n\n\n[opencollective.com/ **grapesjs**](https://opencollective.com/grapesjs)\n\n\n\n\n\n\n\n\n\n[Learn more about funding links in repositories](https://docs.github.com/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/displaying-a-sponsor-button-in-your-repository).\n\n\n\n\n[Report abuse](https://github.com/contact/report-abuse?report=GrapesJS%2Fgrapesjs+%28Repository+Funding+Links%29)\n\n- [Notifications](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs) You must be signed in to change notification settings\n- [Fork\\\\\n4.2k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n- [Star\\\\\n23.4k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n\n\n# BUG: Image Component allows upload and selection of video files via drag and drop\\#6032\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/6032)\n\nCopy link\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/6032)\n\nCopy link\n\nOpen\n\nOpen\n\n[BUG: Image Component allows upload and selection of video files via drag and drop](https://github.com/grapesjs/grapesjs/issues/6032#top)#6032\n\nCopy link\n\n[![@aswinkumar863](https://avatars.githubusercontent.com/u/32381261?u=59e5a018e215abe73d8fbbe2a31e4b58462fb951&v=4&size=80)](https://github.com/aswinkumar863)\n\n## Description\n\n[![@aswinkumar863](https://avatars.githubusercontent.com/u/32381261?u=59e5a018e215abe73d8fbbe2a31e4b58462fb951&v=4&size=48)](https://github.com/aswinkumar863)\n\n[aswinkumar863](https://github.com/aswinkumar863)\n\nopened [on Aug 3, 2024](https://github.com/GrapesJS/grapesjs/issues/6032#issue-2446340205)\n\n### GrapesJS version\n\n- I confirm to use the latest version of GrapesJS\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n### What browser are you using?\n\nChrome v126\n\n### Reproducible demo link\n\n[https://grapesjs.com/demo](https://grapesjs.com/demo)\n\n### Describe the bug\n\n**How to reproduce the bug?**\n\n1. Open the [demo](https://grapesjs.com/demo)\n2. Double-click on any existing image component to open the asset manager.\n3. Drag and drop a video file into the image upload drop zone.\n4. Wait for the video file to upload.\n5. Click on the uploaded video asset to select it.\n\n**Note:** This issue only occurs with the drag and drop. Video component also affected by this issue.\n\n**What is the expected behavior?**\n\nThe Image component should prevent the selection of incorrect file types. It would be better if the asset manager blocks the uploading of incorrect file types as the first step.\n\n### Code of Conduct\n\n- I agree to follow this project's Code of Conduct\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n## Activity\n\n[![artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=80)](https://github.com/artf)\n\n### artf commented on Aug 4, 2024\n\n[![@artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=48)](https://github.com/artf)\n\n[artf](https://github.com/artf)\n\n[on Aug 4, 2024](https://github.com/GrapesJS/grapesjs/issues/6032#issuecomment-2267484277)\n\nMember\n\nThanks [@aswinkumar863](https://github.com/aswinkumar863) for the report. I'll be happy to merge a PR of the fix.\n\n[Sign up for free](https://github.com/signup?return_to=https://github.com/grapesjs/grapesjs/issues/6032)**to join this conversation on GitHub.** Already have an account? [Sign in to comment](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/6032)\n\n## Metadata\n\n### Assignees\n\nNo one assigned\n\n### Labels\n\nNo labels\n\nNo labels\n\n### Type\n\nNo type\n\n### Projects\n\nNo projects\n\n### Milestone\n\nNo milestone\n\n### Relationships\n\nNone yet\n\n### Development\n\nNo branches or pull requests\n\n### Participants\n\n[![@artf](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)](https://github.com/artf)[![@aswinkumar863](https://avatars.githubusercontent.com/u/32381261?s=64&u=59e5a018e215abe73d8fbbe2a31e4b58462fb951&v=4)](https://github.com/aswinkumar863)\n\n## Issue actions\n\nYou can’t perform that action at this time.\n\n\nBUG: Image Component allows upload and selection of video files via drag and drop · Issue #6032 · GrapesJS/grapesjs",
    "metadata": {
      "url": "https://github.com/grapesjs/grapesjs/issues/6032",
      "ogUrl": "https://github.com/GrapesJS/grapesjs/issues/6032",
      "title": "BUG: Image Component allows upload and selection of video files via drag and drop · Issue #6032 · GrapesJS/grapesjs",
      "og:url": "https://github.com/GrapesJS/grapesjs/issues/6032",
      "favicon": {},
      "og:type": "object",
      "ogImage": "https://opengraph.githubassets.com/dd5b2c69660deda9226170e7aaba1ab96a447e6afd0c25f5802be70fc6534cce/GrapesJS/grapesjs/issues/6032",
      "ogTitle": "BUG: Image Component allows upload and selection of video files via drag and drop · Issue #6032 · GrapesJS/grapesjs",
      "hostname": "github.com",
      "language": "en",
      "og:image": "https://opengraph.githubassets.com/dd5b2c69660deda9226170e7aaba1ab96a447e6afd0c25f5802be70fc6534cce/GrapesJS/grapesjs/issues/6032",
      "og:title": "BUG: Image Component allows upload and selection of video files via drag and drop · Issue #6032 · GrapesJS/grapesjs",
      "scrapeId": "c63aea55-5604-49ad-a6dd-d0feb201f0e9",
      "viewport": "width=device-width",
      "fb:app_id": "1401488693436528",
      "go-import": "github.com/GrapesJS/grapesjs git https://github.com/GrapesJS/grapesjs.git",
      "sourceURL": "https://github.com/grapesjs/grapesjs/issues/6032",
      "ogSiteName": "GitHub",
      "request-id": "924F:ABCF4:35B42EA:4B20A34:67AF549B",
      "statusCode": 200,
      "user-login": "",
      "description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome v126 Reproducible demo link https://grapesjs.com/demo Describe the bug How to reproduce the bug? Open the demo Double-click on any existi...",
      "theme-color": "#1e2327",
      "color-scheme": "light dark",
      "og:image:alt": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome v126 Reproducible demo link https://grapesjs.com/demo Describe the bug How to reproduce the bug? ...",
      "og:site_name": "GitHub",
      "route-action": "issue_layout",
      "twitter:card": "summary_large_image",
      "twitter:site": "@github",
      "visitor-hmac": "7e7835e55e46ae682da7b65e186c60a0fdad38e2660968266a381cfcd9eb0a36",
      "ogDescription": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome v126 Reproducible demo link https://grapesjs.com/demo Describe the bug How to reproduce the bug? ...",
      "route-pattern": "/_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format)",
      "twitter:image": "https://opengraph.githubassets.com/dd5b2c69660deda9226170e7aaba1ab96a447e6afd0c25f5802be70fc6534cce/GrapesJS/grapesjs/issues/6032",
      "twitter:title": "BUG: Image Component allows upload and selection of video files via drag and drop · Issue #6032 · GrapesJS/grapesjs",
      "octolytics-url": "https://collector.github.com/github/collect",
      "og:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome v126 Reproducible demo link https://grapesjs.com/demo Describe the bug How to reproduce the bug? ...",
      "og:image:width": "1200",
      "html-safe-nonce": "afd100ac3597c63fad802f7f4fa0ebbe6295b9f2bf3c69c480dd5e5b08cb5f36",
      "og:image:height": "600",
      "visitor-payload": "eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiI5MjRGOkFCQ0Y0OjM1QjQyRUE6NEIyMEEzNDo2N0FGNTQ5QiIsInZpc2l0b3JfaWQiOiI4MjM4MjIwODg1ODA2MjQwOTIzIiwicmVnaW9uX2VkZ2UiOiJpYWQiLCJyZWdpb25fcmVuZGVyIjoiaWFkIn0=",
      "apple-itunes-app": "app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/grapesjs/grapesjs/6032/issue_layout",
      "route-controller": "voltron_issues_fragments",
      "browser-stats-url": "https://api.github.com/_private/browser/stats",
      "expected-hostname": "github.com",
      "analytics-location": "/<user-name>/<repo-name>/voltron/issues_fragments/issue_layout",
      "browser-errors-url": "https://api.github.com/_private/browser/errors",
      "og:author:username": "aswinkumar863",
      "turbo-body-classes": "logged-out env-production page-responsive",
      "turbo-cache-control": "no-preview",
      "twitter:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome v126 Reproducible demo link https://grapesjs.com/demo Describe the bug How to reproduce the bug? ...",
      "hovercard-subject-tag": "issue:2446340205",
      "google-site-verification": "Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I",
      "github-keyboard-shortcuts": "repository,issues,copilot",
      "current-catalog-service-hash": "81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114",
      "octolytics-dimension-user_id": "123950155",
      "octolytics-dimension-user_login": "GrapesJS",
      "octolytics-dimension-repository_id": "50146229",
      "octolytics-dimension-repository_nwo": "GrapesJS/grapesjs",
      "octolytics-dimension-repository_public": "true",
      "octolytics-dimension-repository_is_fork": "false",
      "octolytics-dimension-repository_network_root_id": "50146229",
      "octolytics-dimension-repository_network_root_nwo": "GrapesJS/grapesjs"
    }
  },
  {
    "markdown": "[Skip to content](https://github.com/grapesjs/grapesjs/issues/4704#start-of-content)\n\nYou signed in with another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/4704) to refresh your session.You signed out in another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/4704) to refresh your session.You switched accounts on another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/4704) to refresh your session.Dismiss alert\n\n[GrapesJS](https://github.com/GrapesJS)/ **[grapesjs](https://github.com/GrapesJS/grapesjs)** Public\n\n- Sponsor\n\n\n\n\n\n\n\n# Sponsor GrapesJS/grapesjs\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n##### External links\n\n\n\n\n\n![open_collective](https://github.githubassets.com/assets/open_collective-0a706523753d.svg)\n\n\n\n[opencollective.com/ **grapesjs**](https://opencollective.com/grapesjs)\n\n\n\n\n\n\n\n\n\n[Learn more about funding links in repositories](https://docs.github.com/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/displaying-a-sponsor-button-in-your-repository).\n\n\n\n\n[Report abuse](https://github.com/contact/report-abuse?report=GrapesJS%2Fgrapesjs+%28Repository+Funding+Links%29)\n\n- [Notifications](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs) You must be signed in to change notification settings\n- [Fork\\\\\n4.2k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n- [Star\\\\\n23.4k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n\n\n# BUG: Angular Component as Custom Color Picker is only created once\\#4704\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/4704)\n\nCopy link\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/4704)\n\nCopy link\n\nOpen\n\nOpen\n\n[BUG: Angular Component as Custom Color Picker is only created once](https://github.com/grapesjs/grapesjs/issues/4704#top)#4704\n\nCopy link\n\n[![@PaulSchult](https://avatars.githubusercontent.com/u/40341262?v=4&size=80)](https://github.com/PaulSchult)\n\n## Description\n\n[![@PaulSchult](https://avatars.githubusercontent.com/u/40341262?v=4&size=48)](https://github.com/PaulSchult)\n\n[PaulSchult](https://github.com/PaulSchult)\n\nopened [on Nov 1, 2022](https://github.com/GrapesJS/grapesjs/issues/4704#issue-1432617195)\n\n### GrapesJS version\n\n- I confirm to use the latest version of GrapesJS\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n### What browser are you using?\n\nVersion 104.0.5112.101\n\n### Reproducible demo link\n\n[https://codesandbox.io/s/awesome-dewdney-bwo5t1](https://codesandbox.io/s/awesome-dewdney-bwo5t1)\n\n### Describe the bug\n\n**How to reproduce the bug?**\n\n1. Add the Text block to the content of the editor\n2. Open the StyleManager and expand the Decorations Sector\n3. Notice the red placeholder text where normally the standard color picker is located (this text is a basic angular component)\n4. Next, scroll down to the \"Background\" tab and add a new background\n5. Notice again the red placeholder text\n6. Click on the main content of the grapes content, so the styleManager switches to the settings of the body\n7. Now click on the text block again and scroll down to the background tab and expand it\n8. Notice how the placeholder text for the color attribute isn't there\n9. If you look in the console of the browser you see that the angular component got destroyed when selecting another element, but never got created again\n\n**What is the expected behavior?**\n\nThe Angular Component should be created/rendered again when opening the Background Tab.\n\n**What is the current behavior?**\n\nThe Angular Component is destroyed when the Background Tab closes and we lose the ability to change the color until the whole grapes editor is opened again.\n\n### Code of Conduct\n\n- I agree to follow this project's Code of Conduct\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n👍4\n\n## Activity\n\n[Sign up for free](https://github.com/signup?return_to=https://github.com/grapesjs/grapesjs/issues/4704)**to join this conversation on GitHub.** Already have an account? [Sign in to comment](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/4704)\n\n## Metadata\n\n### Assignees\n\nNo one assigned\n\n### Labels\n\nNo labels\n\nNo labels\n\n### Type\n\nNo type\n\n### Projects\n\nNo projects\n\n### Milestone\n\nNo milestone\n\n### Relationships\n\nNone yet\n\n### Development\n\nNo branches or pull requests\n\n### Participants\n\n[![@PaulSchult](https://avatars.githubusercontent.com/u/40341262?s=64&v=4)](https://github.com/PaulSchult)\n\n## Issue actions\n\nYou can’t perform that action at this time.\n\n\nBUG: Angular Component as Custom Color Picker is only created once · Issue #4704 · GrapesJS/grapesjs",
    "metadata": {
      "url": "https://github.com/grapesjs/grapesjs/issues/4704",
      "ogUrl": "https://github.com/GrapesJS/grapesjs/issues/4704",
      "title": "BUG: Angular Component as Custom Color Picker is only created once · Issue #4704 · GrapesJS/grapesjs",
      "og:url": "https://github.com/GrapesJS/grapesjs/issues/4704",
      "favicon": {},
      "og:type": "object",
      "ogImage": "https://opengraph.githubassets.com/bc61e239051afef5f1afffcac42584ab6a3d1e938686b0f7e54cd39f8308e1c7/GrapesJS/grapesjs/issues/4704",
      "ogTitle": "BUG: Angular Component as Custom Color Picker is only created once · Issue #4704 · GrapesJS/grapesjs",
      "hostname": "github.com",
      "language": "en",
      "og:image": "https://opengraph.githubassets.com/bc61e239051afef5f1afffcac42584ab6a3d1e938686b0f7e54cd39f8308e1c7/GrapesJS/grapesjs/issues/4704",
      "og:title": "BUG: Angular Component as Custom Color Picker is only created once · Issue #4704 · GrapesJS/grapesjs",
      "scrapeId": "7e2b2b5b-e090-48c2-a464-77718ff9c6f6",
      "viewport": "width=device-width",
      "fb:app_id": "1401488693436528",
      "go-import": "github.com/GrapesJS/grapesjs git https://github.com/GrapesJS/grapesjs.git",
      "sourceURL": "https://github.com/grapesjs/grapesjs/issues/4704",
      "ogSiteName": "GitHub",
      "request-id": "A137:1F4EFE:3472F8F:49263C0:67AF54A1",
      "statusCode": 200,
      "user-login": "",
      "description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Version 104.0.5112.101 Reproducible demo link https://codesandbox.io/s/awesome-dewdney-bwo5t1 Describe the bug How to reproduce the bug? Add the...",
      "theme-color": "#1e2327",
      "color-scheme": "light dark",
      "og:image:alt": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Version 104.0.5112.101 Reproducible demo link https://codesandbox.io/s/awesome-dewdney-bwo5t1 Describe t...",
      "og:site_name": "GitHub",
      "route-action": "issue_layout",
      "twitter:card": "summary_large_image",
      "twitter:site": "@github",
      "visitor-hmac": "e262a17f5b8c3aacb1b3b119e61f82589159a273aad8026308df872673a00655",
      "ogDescription": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Version 104.0.5112.101 Reproducible demo link https://codesandbox.io/s/awesome-dewdney-bwo5t1 Describe t...",
      "route-pattern": "/_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format)",
      "twitter:image": "https://opengraph.githubassets.com/bc61e239051afef5f1afffcac42584ab6a3d1e938686b0f7e54cd39f8308e1c7/GrapesJS/grapesjs/issues/4704",
      "twitter:title": "BUG: Angular Component as Custom Color Picker is only created once · Issue #4704 · GrapesJS/grapesjs",
      "octolytics-url": "https://collector.github.com/github/collect",
      "og:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Version 104.0.5112.101 Reproducible demo link https://codesandbox.io/s/awesome-dewdney-bwo5t1 Describe t...",
      "og:image:width": "1200",
      "html-safe-nonce": "6fadec67c482358b2497bbdeb09cb62d824efdb034bfdce0bb66096e0223b30f",
      "og:image:height": "600",
      "visitor-payload": "eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJBMTM3OjFGNEVGRTozNDcyRjhGOjQ5MjYzQzA6NjdBRjU0QTEiLCJ2aXNpdG9yX2lkIjoiMjc2NDY0ODM2OTc0Nzg3NDk3NyIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9",
      "apple-itunes-app": "app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/grapesjs/grapesjs/4704/issue_layout",
      "route-controller": "voltron_issues_fragments",
      "browser-stats-url": "https://api.github.com/_private/browser/stats",
      "expected-hostname": "github.com",
      "analytics-location": "/<user-name>/<repo-name>/voltron/issues_fragments/issue_layout",
      "browser-errors-url": "https://api.github.com/_private/browser/errors",
      "og:author:username": "PaulSchult",
      "turbo-body-classes": "logged-out env-production page-responsive",
      "turbo-cache-control": "no-preview",
      "twitter:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Version 104.0.5112.101 Reproducible demo link https://codesandbox.io/s/awesome-dewdney-bwo5t1 Describe t...",
      "hovercard-subject-tag": "issue:1432617195",
      "google-site-verification": "Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I",
      "github-keyboard-shortcuts": "repository,issues,copilot",
      "current-catalog-service-hash": "81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114",
      "octolytics-dimension-user_id": "123950155",
      "octolytics-dimension-user_login": "GrapesJS",
      "octolytics-dimension-repository_id": "50146229",
      "octolytics-dimension-repository_nwo": "GrapesJS/grapesjs",
      "octolytics-dimension-repository_public": "true",
      "octolytics-dimension-repository_is_fork": "false",
      "octolytics-dimension-repository_network_root_id": "50146229",
      "octolytics-dimension-repository_network_root_nwo": "GrapesJS/grapesjs"
    }
  },
  {
    "markdown": "[Skip to content](https://github.com/grapesjs/grapesjs/issues/5969#start-of-content)\n\nYou signed in with another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/5969) to refresh your session.You signed out in another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/5969) to refresh your session.You switched accounts on another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/5969) to refresh your session.Dismiss alert\n\n[GrapesJS](https://github.com/GrapesJS)/ **[grapesjs](https://github.com/GrapesJS/grapesjs)** Public\n\n- Sponsor\n\n\n\n\n\n\n\n# Sponsor GrapesJS/grapesjs\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n##### External links\n\n\n\n\n\n![open_collective](https://github.githubassets.com/assets/open_collective-0a706523753d.svg)\n\n\n\n[opencollective.com/ **grapesjs**](https://opencollective.com/grapesjs)\n\n\n\n\n\n\n\n\n\n[Learn more about funding links in repositories](https://docs.github.com/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/displaying-a-sponsor-button-in-your-repository).\n\n\n\n\n[Report abuse](https://github.com/contact/report-abuse?report=GrapesJS%2Fgrapesjs+%28Repository+Funding+Links%29)\n\n- [Notifications](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs) You must be signed in to change notification settings\n- [Fork\\\\\n4.2k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n- [Star\\\\\n23.4k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n\n\n# BUG: Name of @container directive is missing a space when exporting CSS\\#5969\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/5969)\n\nCopy link\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/5969)\n\nCopy link\n\nOpen\n\nOpen\n\n[BUG: Name of @container directive is missing a space when exporting CSS](https://github.com/grapesjs/grapesjs/issues/5969#top)#5969\n\nCopy link\n\n[![@uncldrw](https://avatars.githubusercontent.com/u/68686915?u=a25f940444eebdd0d5275dcba788af9c0fd65734&v=4&size=80)](https://github.com/uncldrw)\n\n## Description\n\n[![@uncldrw](https://avatars.githubusercontent.com/u/68686915?u=a25f940444eebdd0d5275dcba788af9c0fd65734&v=4&size=48)](https://github.com/uncldrw)\n\n[uncldrw](https://github.com/uncldrw)\n\nopened [on Jun 25, 2024](https://github.com/GrapesJS/grapesjs/issues/5969#issue-2372722997)\n\n### GrapesJS version\n\n- I confirm to use the latest version of GrapesJS\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n### What browser are you using?\n\nChrome LTS\n\n### Reproducible demo link\n\n/\n\n### Describe the bug\n\nI noticed that the [@container](https://github.com/container) directive is missing a whitespace when exporting the code.\n\nThis is the code I provide:\n\n```\n@container portable (max-width: 639px) {\n    .teaser-paa__headline {\n      font-size: 24px;\n      line-height: 29px;\n      max-width: 272px;\n      margin: 0 auto;\n    }\n  }\n```\n\nTo use it in a custom block, I save the CSS into the style attribute of a block, which looks like this:\n\n```\n@container portable (max-width:639px){.teaser-paa__wrapper{max-width:calc(100% - 24px)}}\n```\n\nTo ensure proper spacing, I tried adding an escaped space without success:\n\n```\n@container portable\\u0020(max-width:639px){.teaser-paa__wrapper{max-width:calc(100% - 24px)}}\n```\n\nWhen opening the code export, there is a missing space after the [@container](https://github.com/container) name, which results in broken CSS that does not work in HTML.\n\nResulting CSS:\n\n```\n@container portable(max-width: 639px) { // missing whitespace after portable\n    .teaser-paa__headline {\n      font-size: 24px;\n      line-height: 29px;\n      max-width: 272px;\n      margin: 0 auto;\n    }\n  }\n```\n\nThis issue needs to be addressed to ensure the [@container](https://github.com/container) queries function correctly in the exported CSS.\n\n### Code of Conduct\n\n- I agree to follow this project's Code of Conduct\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n## Activity\n\n[Sign up for free](https://github.com/signup?return_to=https://github.com/grapesjs/grapesjs/issues/5969)**to join this conversation on GitHub.** Already have an account? [Sign in to comment](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/5969)\n\n## Metadata\n\n### Assignees\n\nNo one assigned\n\n### Labels\n\nNo labels\n\nNo labels\n\n### Type\n\nNo type\n\n### Projects\n\nNo projects\n\n### Milestone\n\nNo milestone\n\n### Relationships\n\nNone yet\n\n### Development\n\nNo branches or pull requests\n\n### Participants\n\n[![@uncldrw](https://avatars.githubusercontent.com/u/68686915?s=64&u=a25f940444eebdd0d5275dcba788af9c0fd65734&v=4)](https://github.com/uncldrw)\n\n## Issue actions\n\nYou can’t perform that action at this time.\n\n\nBUG: Name of @container directive is missing a space when exporting CSS · Issue #5969 · GrapesJS/grapesjs",
    "metadata": {
      "url": "https://github.com/grapesjs/grapesjs/issues/5969",
      "ogUrl": "https://github.com/GrapesJS/grapesjs/issues/5969",
      "title": "BUG: Name of @container directive is missing a space when exporting CSS · Issue #5969 · GrapesJS/grapesjs",
      "og:url": "https://github.com/GrapesJS/grapesjs/issues/5969",
      "favicon": {},
      "og:type": "object",
      "ogImage": "https://opengraph.githubassets.com/a58ead602f7e573ec9e827a33bee8430ed7f18a402c446beed4f069d066d24c9/GrapesJS/grapesjs/issues/5969",
      "ogTitle": "BUG: Name of @container directive is missing a space when exporting CSS · Issue #5969 · GrapesJS/grapesjs",
      "hostname": "github.com",
      "language": "en",
      "og:image": "https://opengraph.githubassets.com/a58ead602f7e573ec9e827a33bee8430ed7f18a402c446beed4f069d066d24c9/GrapesJS/grapesjs/issues/5969",
      "og:title": "BUG: Name of @container directive is missing a space when exporting CSS · Issue #5969 · GrapesJS/grapesjs",
      "scrapeId": "6961c48e-fe67-49e3-8c94-247c7995b85c",
      "viewport": "width=device-width",
      "fb:app_id": "1401488693436528",
      "go-import": "github.com/GrapesJS/grapesjs git https://github.com/GrapesJS/grapesjs.git",
      "sourceURL": "https://github.com/grapesjs/grapesjs/issues/5969",
      "ogSiteName": "GitHub",
      "request-id": "9255:1A5769:36F746F:4D05BD0:67AF549B",
      "statusCode": 200,
      "user-login": "",
      "description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome LTS Reproducible demo link / Describe the bug I noticed that the @container directive is missing a whitespace when exporting the code. Th...",
      "theme-color": "#1e2327",
      "color-scheme": "light dark",
      "og:image:alt": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome LTS Reproducible demo link / Describe the bug I noticed that the @container directive is missing ...",
      "og:site_name": "GitHub",
      "route-action": "issue_layout",
      "twitter:card": "summary_large_image",
      "twitter:site": "@github",
      "visitor-hmac": "67636defb1866742157587af8aff9580e0950b4c177b96a8145ed3e314417760",
      "ogDescription": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome LTS Reproducible demo link / Describe the bug I noticed that the @container directive is missing ...",
      "route-pattern": "/_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format)",
      "twitter:image": "https://opengraph.githubassets.com/a58ead602f7e573ec9e827a33bee8430ed7f18a402c446beed4f069d066d24c9/GrapesJS/grapesjs/issues/5969",
      "twitter:title": "BUG: Name of @container directive is missing a space when exporting CSS · Issue #5969 · GrapesJS/grapesjs",
      "octolytics-url": "https://collector.github.com/github/collect",
      "og:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome LTS Reproducible demo link / Describe the bug I noticed that the @container directive is missing ...",
      "og:image:width": "1200",
      "html-safe-nonce": "bf5d54a0df14ec69f30b3413938aa07f1d19f78b49d15e50b8e96014b0e9a3f0",
      "og:image:height": "600",
      "visitor-payload": "eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiI5MjU1OjFBNTc2OTozNkY3NDZGOjREMDVCRDA6NjdBRjU0OUIiLCJ2aXNpdG9yX2lkIjoiNDA1NTg0NDA3MDExNjc3NTA2NyIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9",
      "apple-itunes-app": "app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/grapesjs/grapesjs/5969/issue_layout",
      "route-controller": "voltron_issues_fragments",
      "browser-stats-url": "https://api.github.com/_private/browser/stats",
      "expected-hostname": "github.com",
      "analytics-location": "/<user-name>/<repo-name>/voltron/issues_fragments/issue_layout",
      "browser-errors-url": "https://api.github.com/_private/browser/errors",
      "og:author:username": "uncldrw",
      "turbo-body-classes": "logged-out env-production page-responsive",
      "turbo-cache-control": "no-preview",
      "twitter:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome LTS Reproducible demo link / Describe the bug I noticed that the @container directive is missing ...",
      "hovercard-subject-tag": "issue:2372722997",
      "google-site-verification": "Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I",
      "github-keyboard-shortcuts": "repository,issues,copilot",
      "current-catalog-service-hash": "81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114",
      "octolytics-dimension-user_id": "123950155",
      "octolytics-dimension-user_login": "GrapesJS",
      "octolytics-dimension-repository_id": "50146229",
      "octolytics-dimension-repository_nwo": "GrapesJS/grapesjs",
      "octolytics-dimension-repository_public": "true",
      "octolytics-dimension-repository_is_fork": "false",
      "octolytics-dimension-repository_network_root_id": "50146229",
      "octolytics-dimension-repository_network_root_nwo": "GrapesJS/grapesjs"
    }
  },
  {
    "markdown": "[Skip to content](https://github.com/grapesjs/grapesjs/issues/6263#start-of-content)\n\nYou signed in with another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/6263) to refresh your session.You signed out in another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/6263) to refresh your session.You switched accounts on another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/6263) to refresh your session.Dismiss alert\n\n[GrapesJS](https://github.com/GrapesJS)/ **[grapesjs](https://github.com/GrapesJS/grapesjs)** Public\n\n- Sponsor\n\n\n\n\n\n\n\n# Sponsor GrapesJS/grapesjs\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n##### External links\n\n\n\n\n\n![open_collective](https://github.githubassets.com/assets/open_collective-0a706523753d.svg)\n\n\n\n[opencollective.com/ **grapesjs**](https://opencollective.com/grapesjs)\n\n\n\n\n\n\n\n\n\n[Learn more about funding links in repositories](https://docs.github.com/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/displaying-a-sponsor-button-in-your-repository).\n\n\n\n\n[Report abuse](https://github.com/contact/report-abuse?report=GrapesJS%2Fgrapesjs+%28Repository+Funding+Links%29)\n\n- [Notifications](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs) You must be signed in to change notification settings\n- [Fork\\\\\n4.2k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n- [Star\\\\\n23.4k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n\n\n# BUG: Duplicated links are added using rte\\#6263\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/6263)\n\nCopy link\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/6263)\n\nCopy link\n\nOpen\n\nOpen\n\n[BUG: Duplicated links are added using rte](https://github.com/grapesjs/grapesjs/issues/6263#top)#6263\n\nCopy link\n\n[![@yashvi2026](https://avatars.githubusercontent.com/u/133509113?v=4&size=80)](https://github.com/yashvi2026)\n\n## Description\n\n[![@yashvi2026](https://avatars.githubusercontent.com/u/133509113?v=4&size=48)](https://github.com/yashvi2026)\n\n[yashvi2026](https://github.com/yashvi2026)\n\nopened [on Oct 24, 2024](https://github.com/GrapesJS/grapesjs/issues/6263#issue-2611426836) · edited by [yashvi2026](https://github.com/yashvi2026)\n\nEdits\n\n### GrapesJS version\n\n- I confirm to use the latest version of GrapesJS\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n### What browser are you using?\n\nChrome\n\n### Reproducible demo link\n\n[https://codepen.io/Harshsne/pen/xxoOyXO](https://codepen.io/Harshsne/pen/xxoOyXO)\n\n### Describe the bug\n\n**How to reproduce the bug?**\n\n1. add link to a word using rte, link component is added\n2. Now type something after the link component without space and select that word again add link to it .\n3. after adding it ,click outside the textbox.\n\n**What is the expected behavior?**\n\nSecond Added link should be wrapped around the first link and the text.\n\n**What is the current behavior?**\n\nTwo link component is added.\n\n**code**\n\nvar url = window.prompt('Enter the URL to link to:');\n\nrte.insertHTML( `<a class=\"link\" href=${url}>${rte.selection()}</a>`);\n\n[![edi11](https://private-user-images.githubusercontent.com/133509113/379765895-f1c6f0a4-b355-45df-8dcf-137777374fdf.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1NDQwMDcsIm5iZiI6MTczOTU0MzcwNywicGF0aCI6Ii8xMzM1MDkxMTMvMzc5NzY1ODk1LWYxYzZmMGE0LWIzNTUtNDVkZi04ZGNmLTEzNzc3NzM3NGZkZi5naWY_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxNFQxNDM1MDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02OTQ1MGRhN2Y5NzJhZTYzY2Y4NTIxZTlmY2UzNDkwMzhlYTdjYTI2NDM3NTE2NGZmYzAyNmRmOTdhNTk2NzgxJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.jWZH_p4cJra79828br_J9jtcvLW0-RjTpiCEOgqzXps)](https://private-user-images.githubusercontent.com/133509113/379765895-f1c6f0a4-b355-45df-8dcf-137777374fdf.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1NDQwMDcsIm5iZiI6MTczOTU0MzcwNywicGF0aCI6Ii8xMzM1MDkxMTMvMzc5NzY1ODk1LWYxYzZmMGE0LWIzNTUtNDVkZi04ZGNmLTEzNzc3NzM3NGZkZi5naWY_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxNFQxNDM1MDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02OTQ1MGRhN2Y5NzJhZTYzY2Y4NTIxZTlmY2UzNDkwMzhlYTdjYTI2NDM3NTE2NGZmYzAyNmRmOTdhNTk2NzgxJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.jWZH_p4cJra79828br_J9jtcvLW0-RjTpiCEOgqzXps)[![edi11](https://private-user-images.githubusercontent.com/133509113/379765895-f1c6f0a4-b355-45df-8dcf-137777374fdf.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1NDQwMDcsIm5iZiI6MTczOTU0MzcwNywicGF0aCI6Ii8xMzM1MDkxMTMvMzc5NzY1ODk1LWYxYzZmMGE0LWIzNTUtNDVkZi04ZGNmLTEzNzc3NzM3NGZkZi5naWY_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxNFQxNDM1MDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02OTQ1MGRhN2Y5NzJhZTYzY2Y4NTIxZTlmY2UzNDkwMzhlYTdjYTI2NDM3NTE2NGZmYzAyNmRmOTdhNTk2NzgxJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.jWZH_p4cJra79828br_J9jtcvLW0-RjTpiCEOgqzXps)](https://private-user-images.githubusercontent.com/133509113/379765895-f1c6f0a4-b355-45df-8dcf-137777374fdf.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1NDQwMDcsIm5iZiI6MTczOTU0MzcwNywicGF0aCI6Ii8xMzM1MDkxMTMvMzc5NzY1ODk1LWYxYzZmMGE0LWIzNTUtNDVkZi04ZGNmLTEzNzc3NzM3NGZkZi5naWY_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxNFQxNDM1MDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02OTQ1MGRhN2Y5NzJhZTYzY2Y4NTIxZTlmY2UzNDkwMzhlYTdjYTI2NDM3NTE2NGZmYzAyNmRmOTdhNTk2NzgxJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.jWZH_p4cJra79828br_J9jtcvLW0-RjTpiCEOgqzXps)[Open in new window](https://private-user-images.githubusercontent.com/133509113/379765895-f1c6f0a4-b355-45df-8dcf-137777374fdf.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1NDQwMDcsIm5iZiI6MTczOTU0MzcwNywicGF0aCI6Ii8xMzM1MDkxMTMvMzc5NzY1ODk1LWYxYzZmMGE0LWIzNTUtNDVkZi04ZGNmLTEzNzc3NzM3NGZkZi5naWY_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxNFQxNDM1MDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02OTQ1MGRhN2Y5NzJhZTYzY2Y4NTIxZTlmY2UzNDkwMzhlYTdjYTI2NDM3NTE2NGZmYzAyNmRmOTdhNTk2NzgxJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.jWZH_p4cJra79828br_J9jtcvLW0-RjTpiCEOgqzXps)\n\n### Code of Conduct\n\n- I agree to follow this project's Code of Conduct\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n## Activity\n\n[![](https://avatars.githubusercontent.com/u/133509113?s=64&v=4)yashvi2026](https://github.com/yashvi2026)\n\nchanged the title BUG: Two link component is added suing rteBUG: Two link component is added using rte [on Oct 24, 2024](https://github.com/GrapesJS/grapesjs/issues/6263#event-14850897284)\n\n[![](https://avatars.githubusercontent.com/u/133509113?s=64&v=4)yashvi2026](https://github.com/yashvi2026)\n\nchanged the title BUG: Two link component is added using rteBUG: Duplicated links are added using rte [on Oct 24, 2024](https://github.com/GrapesJS/grapesjs/issues/6263#event-14851304593)\n\n[Sign up for free](https://github.com/signup?return_to=https://github.com/grapesjs/grapesjs/issues/6263)**to join this conversation on GitHub.** Already have an account? [Sign in to comment](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/6263)\n\n## Metadata\n\n### Assignees\n\nNo one assigned\n\n### Labels\n\nNo labels\n\nNo labels\n\n### Type\n\nNo type\n\n### Projects\n\nNo projects\n\n### Milestone\n\nNo milestone\n\n### Relationships\n\nNone yet\n\n### Development\n\nNo branches or pull requests\n\n### Participants\n\n[![@yashvi2026](https://avatars.githubusercontent.com/u/133509113?s=64&v=4)](https://github.com/yashvi2026)\n\n## Issue actions\n\nYou can’t perform that action at this time.\n\n\nBUG: Duplicated links are added using rte · Issue #6263 · GrapesJS/grapesjs",
    "metadata": {
      "url": "https://github.com/grapesjs/grapesjs/issues/6263",
      "ogUrl": "https://github.com/GrapesJS/grapesjs/issues/6263",
      "title": "BUG: Duplicated  links are added using rte · Issue #6263 · GrapesJS/grapesjs",
      "og:url": "https://github.com/GrapesJS/grapesjs/issues/6263",
      "favicon": {},
      "og:type": "object",
      "ogImage": "https://opengraph.githubassets.com/5f8ee27f03bd312f97213c09b676fed5d73602a5f5900d1858b31b0274bf097a/GrapesJS/grapesjs/issues/6263",
      "ogTitle": "BUG: Duplicated  links are added using rte · Issue #6263 · GrapesJS/grapesjs",
      "hostname": "github.com",
      "language": "en",
      "og:image": "https://opengraph.githubassets.com/5f8ee27f03bd312f97213c09b676fed5d73602a5f5900d1858b31b0274bf097a/GrapesJS/grapesjs/issues/6263",
      "og:title": "BUG: Duplicated  links are added using rte · Issue #6263 · GrapesJS/grapesjs",
      "scrapeId": "50591a66-9a42-4b69-a5a5-66854a4c701b",
      "viewport": "width=device-width",
      "fb:app_id": "1401488693436528",
      "go-import": "github.com/GrapesJS/grapesjs git https://github.com/GrapesJS/grapesjs.git",
      "sourceURL": "https://github.com/grapesjs/grapesjs/issues/6263",
      "ogSiteName": "GitHub",
      "request-id": "9401:370F48:1E7EDF3:2AFD5D9:67AF549B",
      "statusCode": 200,
      "user-login": "",
      "description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://codepen.io/Harshsne/pen/xxoOyXO Describe the bug How to reproduce the bug? add link to a word using rte, l...",
      "theme-color": "#1e2327",
      "color-scheme": "light dark",
      "og:image:alt": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://codepen.io/Harshsne/pen/xxoOyXO Describe the bug How to reproduce ...",
      "og:site_name": "GitHub",
      "route-action": "issue_layout",
      "twitter:card": "summary_large_image",
      "twitter:site": "@github",
      "visitor-hmac": "b67144764eca40e3075b59ce878a4cba966c200097aef0cca42f16ba50e547b7",
      "ogDescription": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://codepen.io/Harshsne/pen/xxoOyXO Describe the bug How to reproduce ...",
      "route-pattern": "/_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format)",
      "twitter:image": "https://opengraph.githubassets.com/5f8ee27f03bd312f97213c09b676fed5d73602a5f5900d1858b31b0274bf097a/GrapesJS/grapesjs/issues/6263",
      "twitter:title": "BUG: Duplicated  links are added using rte · Issue #6263 · GrapesJS/grapesjs",
      "octolytics-url": "https://collector.github.com/github/collect",
      "og:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://codepen.io/Harshsne/pen/xxoOyXO Describe the bug How to reproduce ...",
      "og:image:width": "1200",
      "html-safe-nonce": "1b05961d64f74d4b5e3bc722a6fcf4db5159a6d0d09193096ca3ad56e0114aa4",
      "og:image:height": "600",
      "visitor-payload": "eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiI5NDAxOjM3MEY0ODoxRTdFREYzOjJBRkQ1RDk6NjdBRjU0OUIiLCJ2aXNpdG9yX2lkIjoiMTAwODg1MjI0ODY1MDc5ODIzNSIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9",
      "apple-itunes-app": "app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/grapesjs/grapesjs/6263/issue_layout",
      "route-controller": "voltron_issues_fragments",
      "browser-stats-url": "https://api.github.com/_private/browser/stats",
      "expected-hostname": "github.com",
      "analytics-location": "/<user-name>/<repo-name>/voltron/issues_fragments/issue_layout",
      "browser-errors-url": "https://api.github.com/_private/browser/errors",
      "og:author:username": "yashvi2026",
      "turbo-body-classes": "logged-out env-production page-responsive",
      "turbo-cache-control": "no-preview",
      "twitter:description": "GrapesJS version I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://codepen.io/Harshsne/pen/xxoOyXO Describe the bug How to reproduce ...",
      "hovercard-subject-tag": "issue:2611426836",
      "google-site-verification": "Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I",
      "github-keyboard-shortcuts": "repository,issues,copilot",
      "current-catalog-service-hash": "81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114",
      "octolytics-dimension-user_id": "123950155",
      "octolytics-dimension-user_login": "GrapesJS",
      "octolytics-dimension-repository_id": "50146229",
      "octolytics-dimension-repository_nwo": "GrapesJS/grapesjs",
      "octolytics-dimension-repository_public": "true",
      "octolytics-dimension-repository_is_fork": "false",
      "octolytics-dimension-repository_network_root_id": "50146229",
      "octolytics-dimension-repository_network_root_nwo": "GrapesJS/grapesjs"
    }
  },
  {
    "markdown": "[Skip to content](https://github.com/grapesjs/grapesjs/issues/3639#start-of-content)\n\nYou signed in with another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/3639) to refresh your session.You signed out in another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/3639) to refresh your session.You switched accounts on another tab or window. [Reload](https://github.com/grapesjs/grapesjs/issues/3639) to refresh your session.Dismiss alert\n\n[GrapesJS](https://github.com/GrapesJS)/ **[grapesjs](https://github.com/GrapesJS/grapesjs)** Public\n\n- Sponsor\n\n\n\n\n\n\n\n# Sponsor GrapesJS/grapesjs\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n##### External links\n\n\n\n\n\n![open_collective](https://github.githubassets.com/assets/open_collective-0a706523753d.svg)\n\n\n\n[opencollective.com/ **grapesjs**](https://opencollective.com/grapesjs)\n\n\n\n\n\n\n\n\n\n[Learn more about funding links in repositories](https://docs.github.com/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/displaying-a-sponsor-button-in-your-repository).\n\n\n\n\n[Report abuse](https://github.com/contact/report-abuse?report=GrapesJS%2Fgrapesjs+%28Repository+Funding+Links%29)\n\n- [Notifications](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs) You must be signed in to change notification settings\n- [Fork\\\\\n4.2k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n- [Star\\\\\n23.4k](https://github.com/login?return_to=%2FGrapesJS%2Fgrapesjs)\n\n\n# \\[Feature\\]: Improve UndoManager API\\#3639\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/3639)\n\nCopy link\n\n[New issue](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/3639)\n\nCopy link\n\nOpen\n\nOpen\n\n[\\[Feature\\]: Improve UndoManager API](https://github.com/grapesjs/grapesjs/issues/3639#top)#3639\n\nCopy link\n\nLabels\n\n[feature](https://github.com/GrapesJS/grapesjs/issues?q=state%3Aopen%20label%3A%22feature%22) [help wanted](https://github.com/GrapesJS/grapesjs/issues?q=state%3Aopen%20label%3A%22help%20wanted%22)\n\n[![@anatoli-dp](https://avatars.githubusercontent.com/u/75029364?v=4&size=80)](https://github.com/anatoli-dp)\n\n## Description\n\n[![@anatoli-dp](https://avatars.githubusercontent.com/u/75029364?v=4&size=48)](https://github.com/anatoli-dp)\n\n[anatoli-dp](https://github.com/anatoli-dp)\n\nopened [on Jul 23, 2021](https://github.com/GrapesJS/grapesjs/issues/3639#issue-951513195) · edited by [anatoli-dp](https://github.com/anatoli-dp)\n\nEdits\n\nOne thing i think would add great functionality is a more detailed history stack. U can get the undo stack and build a sort of history report from it of all the edits one has made but it is a little unclear as to what each edit was (at least to me so if I am missing something please let me know). Maybe like a formulaic description that is like component \\[component name\\] added/deleted/edited at \\[location on page or component added to\\], or component \\[component\\] text edited, . . . (please excuse the general description as even i have no clue how i would phrase it) just some quick description that can give a brief overview of what that particular undo/redo history was for each item on the stack. I am aware of only the id of each history item atm, so if this is currently possible I am just unaware of how i should go about extracting this information to create a history sidebar outside of just the id so please give me a clue as what to look for\n\n**Is there an alternative at the latest version?**\n\n- - Yes (describe the alternative)\n\n- \\[ x\\] No\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n**Is this related to an issue?**\n\n- - Yes (Give a link to the issue)\n\n- \\[ x\\] No\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n👍1\n\n## Activity\n\n[![artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=80)](https://github.com/artf)\n\n### artf commented on Aug 2, 2021\n\n[![@artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=48)](https://github.com/artf)\n\n[artf](https://github.com/artf)\n\n[on Aug 2, 2021](https://github.com/GrapesJS/grapesjs/issues/3639#issuecomment-891005923)\n\nMember\n\nHi [@anatoli-dp](https://github.com/anatoli-dp) the ability to view the undo history would be actually super cool and I was already thinking about how to extend the UndoManager module in order to allow this kind of functionality via a plugin (eg. you can render the UI with your framework of choice).\n\nThe UndoManager stack is updated, with a new UndoAction object (containing infos about the action), on any change of listened models/collections (components, css rules, etc.). One thing worth noting is that one change can generate multiple UndoActions:\n\n```\n// This will generate one UndoAction for a new component\n// and another one for a new CSS Rule\neditor.addComponents(`\n  <div class=\"test\">Hi</div>\n  <style>.test{color: red}</style>\n`);\n```\n\nHere is an [example](https://github.com/artf/grapesjs/blob/80462964dd7412f763f8a878763d9b0380f1c69d/src/undo_manager/index.js#L312) of how you could retrieve an array of grouped UndoActions (the private method I made during the last refactoring).\n\nOne thing to understand is how to identify each group of UndoActions with the proper description/label (as you have described).\n\n[![anatoli-dp](https://avatars.githubusercontent.com/u/75029364?v=4&size=80)](https://github.com/anatoli-dp)\n\n### anatoli-dp commented on Aug 2, 2021\n\n[![@anatoli-dp](https://avatars.githubusercontent.com/u/75029364?v=4&size=48)](https://github.com/anatoli-dp)\n\n[anatoli-dp](https://github.com/anatoli-dp)\n\n[on Aug 2, 2021](https://github.com/GrapesJS/grapesjs/issues/3639#issuecomment-891328049)\n\nAuthor\n\nyeah im aware of how to access the stack i just dont know how to intepret it to give a more meaningful description to the end user\n\n[![artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=80)](https://github.com/artf)\n\n### artf commented on Aug 3, 2021\n\n[![@artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=48)](https://github.com/artf)\n\n[artf](https://github.com/artf)\n\n[on Aug 3, 2021](https://github.com/GrapesJS/grapesjs/issues/3639#issuecomment-891830466)\n\nMember\n\n> i just dont know how to intepret it to give a more meaningful description to the end user\n\nEach UndoAction (each instance of the stack) tells you the action `type` (eg. `add`, `remove`, `reset`, `change`) and details about the updated model (eg. Component, CssRule, etc.). You can try to read those data but I was thinking more about how to make each operation easily recognizable.\n\n[![Agobin](https://avatars.githubusercontent.com/u/12595410?u=750d479b5418576b1c94b41df5ed0d9f90c49a5b&v=4&size=80)](https://github.com/Agobin)\n\n### Agobin commented on Aug 28, 2021\n\n[![@Agobin](https://avatars.githubusercontent.com/u/12595410?u=750d479b5418576b1c94b41df5ed0d9f90c49a5b&v=4&size=48)](https://github.com/Agobin)\n\n[Agobin](https://github.com/Agobin)\n\n[on Aug 28, 2021](https://github.com/GrapesJS/grapesjs/issues/3639#issuecomment-907715405)\n\nJust an idea.\n\nIf there was a way to add a data-label attribute to trait controls when they are defined to describe the action they perform. And when this trait element performs an action, the label can be used to describe that change.\n\nBefore the trait element applies the change, we get the location of the undomanager's pointer (that is the index of the model it is currently pointing to). After the trait element applies the change, we update the magic fusion index attribute of all the models created when that change was performed to have the same magic fusion index (the magic fusion of the last model could be used).\n\nNow we can store a list of changes that has the description of the change and the magic fusion index of the models that resulted from the change. With this list, we can display a history of changes and easily navigate the stack to switch between states.\n\nTo switch between states, since we know the magic fusion index of the state, depending on the location of the stack pointer, we could perform a series of undo(true) or redo(true) to move the stack pointer until we reach a model whose magic fusion index is the magic fusion index of the target state.\n\nSpecial cases:\n\nFor editor functions like addComponents, setStyle we could add an option for the user to add a description and use the same concept as mentioned above.\n\nFor RTE edits, we could use the rte:enable and rte:disable events to track the models created during the edit, since the description is text change, we could use the type of component to complete the description.\n\nMy two cents, maybe it could be worth exploring.\n\n[![artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=80)](https://github.com/artf)\n\n### artf commented on Sep 2, 2021\n\n[![@artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=48)](https://github.com/artf)\n\n[artf](https://github.com/artf)\n\n[on Sep 2, 2021](https://github.com/GrapesJS/grapesjs/issues/3639#issuecomment-911645229) · edited by [artf](https://github.com/artf)\n\nEdits\n\nMember\n\nThanks [@Agobin](https://github.com/Agobin) I've been actually thinking the same, adding an extra option for each meaningful top APIs, eg:\n\n```\neditor.addComponents(`\n  <div class=\"test\">Hi</div>\n  <style>.test{color: red}</style>\n`, { undoLabel: 'add-components' });\n```\n\nthen a new API method (eg. `getGroupedStack`) on UndoManager which returns a similar array of UndoActionGroup:\n\n```\n{\n    [\\\n        index: 1, // Magix index to use to jump on this state\\\n        labels: ['add-components'], // probably we might have multiple labels\\\n        actions: [{}, {}, ...], // all grouped UndoActions which contain more details for each change\\\n    ],\n    // ...\n    [\\\n        index: 5,\\\n        labels: ['custom-label-1', 'custom-label-2'],\\\n        actions: [{}, {}],\\\n    ],\n}\n```\n\nAnd probably an easier way to select the current undo index `undoManager.setIndex(UndoActionGroup.index)` to switch the state.\n\nI'd really appreciate a PR if anybody wants to try.\n\n[![](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)artf](https://github.com/artf)\n\nadded\n\n[help wanted](https://github.com/grapesjs/grapesjs/issues?q=state%3Aopen%20label%3A%22help%20wanted%22)\n\n[on Sep 2, 2021](https://github.com/GrapesJS/grapesjs/issues/3639#event-5247238988)\n\n[![](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)artf](https://github.com/artf)\n\nchanged the title FEAT: Detailed History ReportFEAT: Detailed History Report (Improve UndoManager API) [on Oct 30, 2021](https://github.com/GrapesJS/grapesjs/issues/3639#event-5543814980)\n\n[![](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)artf](https://github.com/artf)\n\nmentioned this [on Oct 30, 2021](https://github.com/GrapesJS/grapesjs/issues/3639#event-1144618578)\n\n- [How to add/remove class undo manager #1486](https://github.com/GrapesJS/grapesjs/issues/1486)\n\n\n[![artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=80)](https://github.com/artf)\n\n### artf commented on Oct 30, 2021\n\n[![@artf](https://avatars.githubusercontent.com/u/11614725?u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4&size=48)](https://github.com/artf)\n\n[artf](https://github.com/artf)\n\n[on Oct 30, 2021](https://github.com/GrapesJS/grapesjs/issues/3639#issuecomment-955197769)\n\nMember\n\nOther features to add in UndoManager:\n\n- Ability to clear the history at a specific index\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nRegister new Models/Collections to track, eg.\n\n\n\n\n```\nconst obj = um.addModel({ prop1: 'value1', prop2: 'value2' });\nobj.set({ prop2: 'value2' }); // Change tracked\n```\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n\n\n[![mihir-khandekar](https://avatars.githubusercontent.com/u/65526895?v=4&size=80)](https://github.com/mihir-khandekar)\n\n### mihir-khandekar commented on Dec 13, 2021\n\n[![@mihir-khandekar](https://avatars.githubusercontent.com/u/65526895?v=4&size=48)](https://github.com/mihir-khandekar)\n\n[mihir-khandekar](https://github.com/mihir-khandekar)\n\n[on Dec 13, 2021](https://github.com/GrapesJS/grapesjs/issues/3639#issuecomment-992506263)\n\nHi [@artf](https://github.com/artf), is there any update on these changes?\n\n[#3639 (comment)](https://github.com/GrapesJS/grapesjs/issues/3639#issuecomment-955197769)\n\n[![vizardkill](https://avatars.githubusercontent.com/u/37307788?u=ec63ef1653c504d00599df662413bfa782a2e5aa&v=4&size=80)](https://github.com/vizardkill)\n\n### vizardkill commented on Feb 23, 2023\n\n[![@vizardkill](https://avatars.githubusercontent.com/u/37307788?u=ec63ef1653c504d00599df662413bfa782a2e5aa&v=4&size=48)](https://github.com/vizardkill)\n\n[vizardkill](https://github.com/vizardkill)\n\n[on Feb 23, 2023](https://github.com/GrapesJS/grapesjs/issues/3639#issuecomment-1442012575)\n\nup\n\n[![](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)artf](https://github.com/artf)\n\nchanged the title FEAT: Detailed History Report (Improve UndoManager API)\\[Feature\\]: Improve UndoManager API [on Aug 10, 2023](https://github.com/GrapesJS/grapesjs/issues/3639#event-10058669693)\n\n[![](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)artf](https://github.com/artf)\n\nadded\n\n[feature](https://github.com/grapesjs/grapesjs/issues?q=state%3Aopen%20label%3A%22feature%22)\n\nand removed\n\n[help wanted](https://github.com/grapesjs/grapesjs/issues?q=state%3Aopen%20label%3A%22help%20wanted%22)\n\n[on Aug 10, 2023](https://github.com/GrapesJS/grapesjs/issues/3639#event-10058670557)\n\n[![](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)artf](https://github.com/artf)\n\nadded this to [Roadmap](https://github.com/orgs/GrapesJS/projects/1) [on Aug 10, 2023](https://github.com/GrapesJS/grapesjs/issues/3639#event-14891933400)\n\n[![](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)artf](https://github.com/artf)\n\nadded\n\n[help wanted](https://github.com/grapesjs/grapesjs/issues?q=state%3Aopen%20label%3A%22help%20wanted%22)\n\n[on Aug 10, 2023](https://github.com/GrapesJS/grapesjs/issues/3639#event-10058673553)\n\n[![jogibear9988](https://avatars.githubusercontent.com/u/364896?v=4&size=80)](https://github.com/jogibear9988)\n\n### jogibear9988 commented on Apr 15, 2024\n\n[![@jogibear9988](https://avatars.githubusercontent.com/u/364896?v=4&size=48)](https://github.com/jogibear9988)\n\n[jogibear9988](https://github.com/jogibear9988)\n\n[on Apr 15, 2024](https://github.com/GrapesJS/grapesjs/issues/3639#issuecomment-2057470097)\n\nI created this in my Designer via a API to open a UNDO group: [https://github.com/node-projects/web-component-designer/blob/656ef532088731eb4fa7998b612ca3f273d27f9f/packages/web-component-designer/src/elements/services/undoService/IUndoService.ts#L6](https://github.com/node-projects/web-component-designer/blob/656ef532088731eb4fa7998b612ca3f273d27f9f/packages/web-component-designer/src/elements/services/undoService/IUndoService.ts#L6)\n\nThis group you hand over a description, and all undo items are then put into this group (also nested groups are possible) until I call commit on the group.\n\n[Sign up for free](https://github.com/signup?return_to=https://github.com/grapesjs/grapesjs/issues/3639)**to join this conversation on GitHub.** Already have an account? [Sign in to comment](https://github.com/login?return_to=https://github.com/grapesjs/grapesjs/issues/3639)\n\n## Metadata\n\n### Assignees\n\nNo one assigned\n\n### Labels\n\n[feature](https://github.com/GrapesJS/grapesjs/issues?q=state%3Aopen%20label%3A%22feature%22) [help wanted](https://github.com/GrapesJS/grapesjs/issues?q=state%3Aopen%20label%3A%22help%20wanted%22)\n\n### Type\n\nNo type\n\n### Projects\n\n[Roadmap](https://github.com/orgs/GrapesJS/projects/1)\n\n- Status\n\n\n\n📋 Accepted\n\n\n### Milestone\n\nNo milestone\n\n### Relationships\n\nNone yet\n\n### Development\n\nNo branches or pull requests\n\n### Participants\n\n[![@jogibear9988](https://avatars.githubusercontent.com/u/364896?s=64&v=4)](https://github.com/jogibear9988)[![@artf](https://avatars.githubusercontent.com/u/11614725?s=64&u=970e4f8468e76ca99c0a27eac06fc625cfd6e3c4&v=4)](https://github.com/artf)[![@Agobin](https://avatars.githubusercontent.com/u/12595410?s=64&u=750d479b5418576b1c94b41df5ed0d9f90c49a5b&v=4)](https://github.com/Agobin)[![@vizardkill](https://avatars.githubusercontent.com/u/37307788?s=64&u=ec63ef1653c504d00599df662413bfa782a2e5aa&v=4)](https://github.com/vizardkill)[![@mihir-khandekar](https://avatars.githubusercontent.com/u/65526895?s=64&v=4)](https://github.com/mihir-khandekar)\n\n+1\n\n## Issue actions\n\nYou can’t perform that action at this time.\n\n\n\\[Feature\\]: Improve UndoManager API · Issue #3639 · GrapesJS/grapesjs",
    "metadata": {
      "url": "https://github.com/grapesjs/grapesjs/issues/3639",
      "ogUrl": "https://github.com/GrapesJS/grapesjs/issues/3639",
      "title": "[Feature]: Improve UndoManager API · Issue #3639 · GrapesJS/grapesjs",
      "og:url": "https://github.com/GrapesJS/grapesjs/issues/3639",
      "favicon": {},
      "og:type": "object",
      "ogImage": "https://opengraph.githubassets.com/7b7c0063f7d51cf29ad381d5816506c1cb8dbd2a30cef6ea184808600fdb4192/GrapesJS/grapesjs/issues/3639",
      "ogTitle": "[Feature]: Improve UndoManager API · Issue #3639 · GrapesJS/grapesjs",
      "hostname": "github.com",
      "language": "en",
      "og:image": "https://opengraph.githubassets.com/7b7c0063f7d51cf29ad381d5816506c1cb8dbd2a30cef6ea184808600fdb4192/GrapesJS/grapesjs/issues/3639",
      "og:title": "[Feature]: Improve UndoManager API · Issue #3639 · GrapesJS/grapesjs",
      "scrapeId": "a58971bc-ff10-4191-966f-12a0f38772c5",
      "viewport": "width=device-width",
      "fb:app_id": "1401488693436528",
      "go-import": "github.com/GrapesJS/grapesjs git https://github.com/GrapesJS/grapesjs.git",
      "sourceURL": "https://github.com/grapesjs/grapesjs/issues/3639",
      "ogSiteName": "GitHub",
      "request-id": "9F2F:187945:35FFC26:4B47FAE:67AF54A1",
      "statusCode": 200,
      "user-login": "",
      "description": "One thing i think would add great functionality is a more detailed history stack. U can get the undo stack and build a sort of history report from it of all the edits one has made but it is a little unclear as to what each edit was (at l...",
      "theme-color": "#1e2327",
      "color-scheme": "light dark",
      "og:image:alt": "One thing i think would add great functionality is a more detailed history stack. U can get the undo stack and build a sort of history report from it of all the edits one has made but it is a littl...",
      "og:site_name": "GitHub",
      "route-action": "issue_layout",
      "twitter:card": "summary_large_image",
      "twitter:site": "@github",
      "visitor-hmac": "626126e0b9b0edcf4eef3173cd9c9ff9d25c8160a0c50e44690deb3f0c91caf3",
      "ogDescription": "One thing i think would add great functionality is a more detailed history stack. U can get the undo stack and build a sort of history report from it of all the edits one has made but it is a littl...",
      "route-pattern": "/_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format)",
      "twitter:image": "https://opengraph.githubassets.com/7b7c0063f7d51cf29ad381d5816506c1cb8dbd2a30cef6ea184808600fdb4192/GrapesJS/grapesjs/issues/3639",
      "twitter:title": "[Feature]: Improve UndoManager API · Issue #3639 · GrapesJS/grapesjs",
      "octolytics-url": "https://collector.github.com/github/collect",
      "og:description": "One thing i think would add great functionality is a more detailed history stack. U can get the undo stack and build a sort of history report from it of all the edits one has made but it is a littl...",
      "og:image:width": "1200",
      "html-safe-nonce": "bbc7cd0e6c64183e79a57b648090fd1177f997a74963026ad99680a727ad5d77",
      "og:image:height": "600",
      "visitor-payload": "eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiI5RjJGOjE4Nzk0NTozNUZGQzI2OjRCNDdGQUU6NjdBRjU0QTEiLCJ2aXNpdG9yX2lkIjoiODk5NzYwMDM4MjUzMTA5Nzc2MSIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9",
      "apple-itunes-app": "app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/grapesjs/grapesjs/3639/issue_layout",
      "route-controller": "voltron_issues_fragments",
      "browser-stats-url": "https://api.github.com/_private/browser/stats",
      "expected-hostname": "github.com",
      "analytics-location": "/<user-name>/<repo-name>/voltron/issues_fragments/issue_layout",
      "browser-errors-url": "https://api.github.com/_private/browser/errors",
      "og:author:username": "anatoli-dp",
      "turbo-body-classes": "logged-out env-production page-responsive",
      "turbo-cache-control": "no-preview",
      "twitter:description": "One thing i think would add great functionality is a more detailed history stack. U can get the undo stack and build a sort of history report from it of all the edits one has made but it is a littl...",
      "hovercard-subject-tag": "issue:951513195",
      "google-site-verification": "Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I",
      "github-keyboard-shortcuts": "repository,issues,copilot",
      "current-catalog-service-hash": "81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114",
      "octolytics-dimension-user_id": "123950155",
      "octolytics-dimension-user_login": "GrapesJS",
      "octolytics-dimension-repository_id": "50146229",
      "octolytics-dimension-repository_nwo": "GrapesJS/grapesjs",
      "octolytics-dimension-repository_public": "true",
      "octolytics-dimension-repository_is_fork": "false",
      "octolytics-dimension-repository_network_root_id": "50146229",
      "octolytics-dimension-repository_network_root_nwo": "GrapesJS/grapesjs"
    }
  }
]