Editor freeze on edit
complete
Carlos Benitez Field
The editor continues to freeze when you try to edit a block of text in a simple creative.
It seems to affect more when there are blocks with columns.
We have a lot of customers complaining about it.
The editor throws up a message in Javascript stating that it is 'not responding'. We have videos of customers showing the problem, and lots of screenshots.
Video:
This post was marked as
complete
Carlos Benitez Field
The problem is not resolved! We have many users with this issue... By now, we've set the version to 1.5, which works, but it's not a definitive solution.
Bruno Lemos
Carlos Benitez Field: please send the reproduction link to bruno@unlayer.com
Carlos Benitez Field
Bruno Lemos: One of my colleagues has sent you an email with all the instructions to reproduce the error online. Check your spam folder if you haven't received it.
Diego Sanchez
Carlos Benitez Field: we are still having this issue as well. Are you using
version 1.5.0?
Diego Sanchez
Bruno Lemos: are there any updates on this issue? we have many customers with this issue too.
Carlos Benitez Field
Diego Sanchez: Yes, we had to downgrade the version to 1.5. We have given access to the Unlayer technical support to our system, with a demo where the error is reproduced perfectly. Unfortunately, we have not had any response or solution. We've been dealing with this problem for weeks.
I
Indigo Bus
We are also observing many users having this issue.
This post was marked as
in progress
Bruno Lemos
Could not reproduce this. Tried on macOS and Windows. Tried using Firefox as well. Please provide more information, like Operating System name and version, and also Browser name and version. Maybe also try using your browser in Private/Incognito Mode, with no extensions enabled, since they may affect it.
Carlos Benitez Field
Bruno Lemos: The problem is not just mine, but general. It happens to our customers and we have a lot of open tickets about it.
I can also reproduce it using the JSON I have put below.
I work in Edge, with a Windows 11. We've tested both Private and Normal.
However, our customers have all kinds of configurations: Mac, Windows, Linux... Edge, Chrome, Opera, Brave...
We have also tested Firefox without extensions and always with the same result: the browser freezes and the alert 'Pages Unresponsive: editor.unlayer.com' appears.
Within our settings, we have the social media plugin activated, and we also use custom JS and custom CSS to extend the tools (we use registerPropertyEditor).
All of this worked well until last week, when suddenly, this error began to occur in a general way.
We also use both the 'inlineFontControls: true' parameter and pixel-based custom fontSizes within the text blocks (which are the ones that cause the error). We thought that some recent Unlayer change would break with these options, but after disabling them, the error continues.
I'm pasting below our configuration JSON in case it's useful as a reference:
{
projectId: this.EDITOR_PROJECT_ID,
displayMode: this.EDITOR_DISPLAY_MODE,
locale: i18n.lng(),
id: this.EDITOR_CONTAINER_ID,
editor: {
autoSelectOnDrop: true
},
user: {
id: this.empId,
},
tools: {
social: {
enabled: true,
properties: {
icons: {
value: {
iconType: 'squared',
icons: this.buildSocialConfig() // Building icons here...
}
}
}
},
'custom#timer_widget': {
properties: {
timezone: {
editor: {
data: {
// Some data here...
},
},
},
},
}
},
appearance: {
theme: 'light',
panels: {
tools: {
dock: 'left'
}
}
},
customCSS: [ this.getCustomCSS() ],
customJS: this.getCustomJS(),
audit: true,
textEditor: {
fontSizes: [
'6px',
'7px',
'8px',
'9px',
'10px',
'11px',
'12px',
'13px',
'14px',
'15px',
'16px',
'17px',
'18px',
'20px',
'22px',
'24px',
'26px',
'28px',
'30px',
'32px',
'34px',
'36px',
'38px',
'40px',
'44px',
'48px',
'52px',
'56px',
'72px',
]
},
features: {
textEditor: {
inlineFontControls: true
}
}
}
It is important to note that in the 'data' property within the 'custom@timer_widget', a large JSON (27KB) is being passed to the editor. We insist that until last week, none of this had been a problem.
Carlos Benitez Field
We have also tried removing the 'custom js' and the result remains the same: the editor freezes.
Carlos Benitez Field
More data: after the editor freezes, when we refresh the page using F5, or Shift+F5, the editor no longer loads with any other creatives.
Looking at the console, we see that the request stays at 'Pending'.
Attached screenshot.
Carlos Benitez Field
There's no way. We've left the configuration to a minimum and the problem persists:
{
projectId: this.EDITOR_PROJECT_ID,
displayMode: this.EDITOR_DISPLAY_MODE,
locale: i18n.lng(),
id: this.EDITOR_CONTAINER_ID,
editor: {
autoSelectOnDrop: true
},
user: {
id: this.empId,
},
appearance: {
theme: 'light',
panels: {
tools: {
dock: 'left'
}
}
},
features: {
audit: false,
userUploads: false,
},
tools: {
social: {
enabled: false
}
}
}
When the editor makes requests to the Unlayer service, it freezes and goes unanswered.
Carlos Benitez Field
And more data!
Now, the error happens less, but when it does, we see four almost simultaneous messages on the console.
I imagine that with this, the support team can keep track.
It seems that the error is in the 'dom' property, which does not exist inside the 'e' object at the time of adding the text box. It is seen in the second screenshot that I attached.
Bruno Lemos
Carlos Benitez Field: please provide a link we can access to reproduce the issue
Carlos Benitez Field
Bruno Lemos: Ok, we have to prepare a personalized access for you because this tool is only accessible to users registered on our site.
As soon as I have it ready, I'll send it to you by private email. Please tell me the support email and what I have to put for you to identify it as part of this thread.
Bruno Lemos
Carlos Benitez Field: Our team has sent you an email
Travis Smith
The issue is not reproducible, can you share the screenshot of the Console log?
Carlos Benitez Field
Travis Smith: I don't see any errors on the console (I've cleaned up all previous messages that aren't relevant in my screenshot.). The only strange thing is that in the 'Network' tab, there is a 'Save' request that has been left pending.
Carlos Benitez Field
Well, I've modified the settings to load an older version of Unlayer, 1.5.0 using:
version: "1.5.0",
And everything works like a charm. It's obvious that the problem is with the recent versions.
Carlos Benitez Field
We've seen many other related issues, like this one:
Its status is Resolved.
However, the problem continues.
Here is a simple JSON that freezes the editor:
{
"counters": {
"u_column": 13,
"u_row": 8,
"u_content_image": 10,
"u_content_text": 7,
"u_content_heading": 2,
"u_content_divider": 1
},
"body": {
"id": "7lQ1BEQht2",
"rows": [
{
"id": "U_OI_V1E1p",
"cells": [
1,
1
],
"columns": [
{
"id": "wOYOX01ENo",
"contents": [
{
"id": "sGIA1hGPhS",
"type": "image",
"values": {
"containerPadding": "10px",
"anchor": "",
"src": {
"url": "https://static.mdirector.com/files/campanias/112700/images/image_54c4caacc365f.png",
"width": 272,
"height": 114,
"source": "user"
},
"textAlign": "center",
"altText": "",
"action": {
"name": "web",
"values": {
"href": "",
"target": "_blank"
}
},
"hideDesktop": false,
"displayCondition": null,
"_meta": {
"htmlID": "u_content_image_9",
"htmlClassNames": "u_content_image"
},
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true
}
}
],
"values": {
"backgroundColor": "",
"padding": "0px",
"border": [],
"borderRadius": "0px",
"_meta": {
"htmlID": "u_column_3",
"htmlClassNames": "u_column"
}
}
},
{
"id": "RNfgrJGSdv",
"contents": [
{
"id": "EBqriR8Y4T",
"type": "text",
"values": {
"containerPadding": "10px",
"anchor": "",
"fontSize": "14px",
"textAlign": "left",
"lineHeight": "140%",
"linkStyle": {
"inherit": true,
"linkColor": "#0000ee",
"linkHoverColor": "#0000ee",
"linkUnderline": true,
"linkHoverUnderline": true
},
"hideDesktop": false,
"displayCondition": null,
"_meta": {
"htmlID": "u_content_text_7",
"htmlClassNames": "u_content_text"
},
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"text": "<p style=\"line-height: 140%;\">This is a new Text block. Change the text.</p>"
}
}
],
"values": {
"backgroundColor": "",
"padding": "0px",
"border": [],
"borderRadius": "0px",
"_meta": {
"htmlID": "u_column_4",
"htmlClassNames": "u_column"
}
}
}
],
"values": {
"displayCondition": null,
"columns": false,
"backgroundColor": "",
"columnsBackgroundColor": "",
"backgroundImage": {
"url": "",
"fullWidth": true,
"repeat": "no-repeat",
"size": "custom",
"position": "center"
},
"padding": "0px",
"anchor": "",
"hideDesktop": false,
"_meta": {
"htmlID": "u_row_3",
"htmlClassNames": "u_row"
},
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true
}
},
{
"id": "NJCkcuvhgk",
"cells": [
1,
1
],
"columns": [
{
"id": "2Nr-lxsMYX",
"contents": [
{
"id": "-ZVXnVf_2_",
"type": "image",
"values": {
"containerPadding": "10px",
"anchor": "",
"src": {
"url": "https://static.mdirector.com/files/campanias/112700/images/image_54c7a687a4ce5.png",
"width": 265,
"height": 175
},
"textAlign": "center",
"altText": "",
"action": {
"name": "web",
"values": {
"href": "",
"target": "_blank"
}
},
"hideDesktop": false,
"displayCondition": null,
"_meta": {
"htmlID": "u_content_image_8",
"htmlClassNames": "u_content_image"
},
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true
}
}
],
"values": {
"backgroundColor": "",
"padding": "0px",
"border": [],
"borderRadius": "0px",
"_meta": {
"htmlID": "u_column_5",
"htmlClassNames": "u_column"
}
}
},
{
"id": "WgALXUfIGB",
"contents": [],
"values": {
"backgroundColor": "",
"padding": "0px",
"border": [],
"borderRadius": "0px",
"_meta": {
"htmlID": "u_column_6",
"htmlClassNames": "u_column"
}
}
}
],
"values": {
"displayCondition": null,
"columns": false,
"backgroundColor": "",
"columnsBackgroundColor": "",
"backgroundImage": {
"url": "",
"fullWidth": true,
"repeat": "no-repeat",
"size": "custom",
"position": "center"
},
"padding": "0px",
"anchor": "",
"hideDesktop": false,
"_meta": {
"htmlID": "u_row_4",
"htmlClassNames": "u_row"
},
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true
}
},
{
"id": "MIE_4l_Bqm",
"cells": [
1,
1
],
"columns": [
{
"id": "ZDpPVoOlG1",
"contents": [
{
"id": "u0zH1KAByX",
"type": "text",
"values": {
"containerPadding": "10px",
"anchor": "",
"fontSize": "14px",
"textAlign": "left",
"lineHeight": "140%",
"linkStyle": {
"inherit": true,
"linkColor": "#0000ee",
"linkHoverColor": "#0000ee",
"linkUnderline": true,
"linkHoverUnderline": true
},
"hideDesktop": false,
"displayCondition": null,
"_meta": {
"htmlID": "u_content_text_6",
"htmlClassNames": "u_content_text"
},
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"text": "<p style=\"line-height: 140%;\">This is a new Text block. Change the text.</p>"
}
}
],
"values": {
"backgroundColor": "",
"padding": "0px",
"border": [],
"borderRadius": "0px",
"_meta": {
"htmlID": "u_column_7",
"htmlClassNames": "u_column"
}
}
},
{
"id": "LJjC4_y1LH",
"contents": [
{
"id": "QRTIWccEXc",
"type": "image",
"values": {
"containerPadding": "10px",
"anchor": "",
"src": {
"url": "https://static.mdirector.com/files/campanias/112700/images/eiffelviajes.png",
"width": 97,
"height": 94
},
"textAlign": "center",
"altText": "",
"action": {
"name": "web",
"values": {
"href": "",
"target": "_blank"
}
},
"hideDesktop": false,
"displayCondition": null,
"_meta": {
"htmlID": "u_content_image_10",
"htmlClassNames": "u_content_image"
},
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true
}
}
],
"values": {
"backgroundColor": "",
"padding": "0px",
"border": [],
"borderRadius": "0px",
"_meta": {
"htmlID": "u_column_8",
"htmlClassNames": "u_column"
}
}
}
],
"values": {
"displayCondition": null,
"columns": false,
"backgroundColor": "",
"columnsBackgroundColor": "",
"backgroundImage": {
"url": "",
"fullWidth": true,
"repeat": "no-repeat",
"size": "custom",
"position": "center"
},
"padding": "0px",
"anchor": "",
"hideDesktop": false,
"_meta": {
"htmlID": "u_row_5",
"htmlClassNames": "u_row"
},
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true
}
}
],
"headers": [],
"footers": [],
"values": {
"popupPosition": "center",
"popupWidth": "600px",
"popupHeight": "auto",
"borderRadius": "10px",
"contentAlign": "center",
"contentVerticalAlign": "center",
"contentWidth": "600px",
"fontFamily": {
"label": "Arial",
"value": "arial,helvetica,sans-serif"
},
"textColor": "#000000",
"popupBackgroundColor": "#FFFFFF",
"popupBackgroundImage": {
"url": "",
"fullWidth": true,
"repeat": "no-repeat",
"size": "cover",
"position": "center"
},
"popupOverlay_backgroundColor": "rgba(0, 0, 0, 0.1)",
"popupCloseButton_position": "top-right",
"popupCloseButton_backgroundColor": "#DDDDDD",
"popupCloseButton_iconColor": "#000000",
"popupCloseButton_borderRadius": "0px",
"popupCloseButton_margin": "0px",
"popupCloseButton_action": {
"name": "close_popup",
"attrs": {
"onClick": "document.querySelector('.u-popup-container').style.display = 'none';"
}
},
"backgroundColor": "#ffffff",
"backgroundImage": {
"url": "",
"fullWidth": true,
"repeat": "no-repeat",
"size": "custom",
"position": "center"
},
"preheaderText": "",
"linkStyle": {
"body": true,
"linkColor": "#0000ee",
"linkHoverColor": "#0000ee",
"linkUnderline": true,
"linkHoverUnderline": true
},
"_meta": {
"htmlID": "u_body",
"htmlClassNames": "u_body"
}
}
},
"schemaVersion": 16
}
I'm attaching a screenshot showing the problem.
