Errors with a new WYSIWYG

myurchenko · October 30, 2018, 2:18pm

Enonic version: 6.15.3
OS: Linux

Hi!

When some specific user is editing a WYSIWYG, he gets error in a console. The WYSIWYG also doesn’t appear.
Here is the error:

Uncaught TypeError: Cannot read property 'type' of undefined
    at Object.render (_all.js:22640)
    at Object.renderUI (_all.js:25423)
    at Object.renderUI (_all.js:26242)
    at Vb (_all.js:21319)
    at Hb (_all.js:21319)
    at mC.<anonymous> (_all.js:21319)
    at Array.<anonymous> (_all.js:21319)
    at St (_all.js:21319)
    at s (_all.js:21319)
    at r (_all.js:21319)
render @ _all.js:22640
renderUI @ _all.js:25423
renderUI @ _all.js:26242
Vb @ _all.js:21319
Hb @ _all.js:21319
(anonymous) @ _all.js:21319
(anonymous) @ _all.js:21319
St @ _all.js:21319
s @ _all.js:21319
r @ _all.js:21319
d @ _all.js:21319
load (async)
(anonymous) @ _all.js:21319
St @ _all.js:21319
s @ _all.js:21319
loadScripts @ _all.js:21319
loadQueue @ _all.js:21319
(anonymous) @ _all.js:21319
waitFor @ _all.js:21319
(anonymous) @ _all.js:21319
(anonymous) @ _all.js:21319
St @ _all.js:21319
s @ _all.js:21319
loadScripts @ _all.js:21319
loadQueue @ _all.js:21319
(anonymous) @ _all.js:21319
Wb @ _all.js:21319
Kb @ _all.js:21319
render @ _all.js:21319
l @ _all.js:21319
(anonymous) @ _all.js:21319
St @ _all.js:21319
u @ _all.js:21319
i.bind @ _all.js:21319
bind @ _all.js:21319
init @ _all.js:21319
HTMLAreaBuilder.createEditor @ _all.js:1
HtmlArea.initEditor @ _all.js:1
(anonymous) @ _all.js:1
(anonymous) @ _all.js:1
Element.notifyRendered @ _all.js:1
(anonymous) @ _all.js:1
_fulfilled @ _all.js:20191
(anonymous) @ _all.js:20220
Promise.promise.promiseDispatch @ _all.js:20153
(anonymous) @ _all.js:19913
flush @ _all.js:19512

This user does not have administrator rights and rights to edit a lot of other content. Administrator users can edit this WYSIWYG with no troubles. The WYSIWYG does not contain any specific data, just <p> and <em> tags and a text inside of them.

Thanks!

ase · October 31, 2018, 3:22pm

Did you switch back to the old editor (TinyMCE)? We had a similar support ticket and the problem was that customer was using the old editor.

myurchenko · November 1, 2018, 9:57am

No, we didn’t switch. We are using the new editor. Is there any other info I can provide to help?

ase · November 6, 2018, 9:22am

This is very strange - based on the stack trace the error comes from the old editor. Can you describe a bit more what kind of permissions that user has? Which roles are applied to him? Does the error happen only for that user or all users with the same role?

myurchenko · November 6, 2018, 12:27pm

This user has only two roles: Content Manager App and Administration Console Login. This user also has full access to an object, which he tries to modify.
If this can help somehow, the id of the body of the editor says it is “tinymce”.

<body id="tinymce" class="mce-content-body " data-id="api.ui.text.TextArea-3" contenteditable="true" style="overflow-y: hidden; padding-left: 1px; padding-right: 1px; padding-bottom: 0px;" data-mce-style="overflow-y: hidden; padding-left: 1px; padding-right: 1px; padding-bottom: 0px;"></body>

This article was created about a year ago(2017-11-29) and we were running Enonic 6.12.x or 6.11.x when it was created. User, which tries to modify the article is an old one.

Also, this WYSIWYG is not a part or text component, it is an attribute of an object.

I have just tried with another user and I got the same error.

As I mentioned before, admin user has no issues with this and can edit this WYSIWYG.

ase · November 6, 2018, 12:42pm

Ok, I’m pretty sure it’s the old editor then.

https://xp.readthedocs.io/en/stable/appendix/upgrade/index.html

Some of our customers misinterpreted our upgrade notes for 6.15 and thought they HAD to add the line to the config that switches to TinyMCE, but it should in fact be done only if you have issues with the new editor.

Anyway, can you check if you have a file called com.enonic.xp.app.contentstudio.cfg in the config folder of your XP installation and if you have this line there: htmlarea = tinymce? If you do, then comment this line and reload the page with the editor. This should switch to the new editor.

myurchenko · November 6, 2018, 1:01pm

Ok. This is getting more weird

I do not have this file in my config folder and there is no this line of code in any config file. No one from our team added this line.

When I try to edit text component inside of a region of the same object, the editor seems to be CKEditro, as it div seems to have it’s id:

<div data-portal-component-type="text" id="TextComponentViewCK" class="xp-page-editor-item-view xp-page-editor-text-view ui-sortable-handle _360-540 edit-mode not-draggable TextComponentViewCK editor-focused" data-live-edit-id="3">

Is there a possibility, that the attribute of the object is still using an old editor? By attribute I mean the HTML area, which is declared in xml file of the content type?

ase · November 6, 2018, 1:47pm

Can you take a screenshot of the editor (so that toolbar is visible) and post it here?

tsi · November 6, 2018, 1:59pm

No, the editor cannot be controlled by the content type. Are you sure you are using the same installation/server?

myurchenko · November 6, 2018, 2:08pm

These two screenshots were taken while editing the same object on the same instance. The difference is that the file new.png is the editor from a part and old.png is an attribute of a content-type.
old

ase · November 6, 2018, 2:36pm

If you create a new content of the same content type as that old article, do you get the same old editor or do you get the new one?

myurchenko · November 6, 2018, 2:46pm

If I create new content, the situation is the same:
the editor for object’s attribute is old, while text component and editor in parts is new.

ase · November 6, 2018, 2:50pm

Can you post content type XML here?

ase · November 6, 2018, 3:03pm

Also, if you open browser console in the Content Wizard and type

CONFIG.isCkeUsed

what is the output?

myurchenko · November 7, 2018, 8:23am

Hi!

Here is the content type:

<?xml version="1.0" encoding="UTF-8"?>
<content-type>
  <display-name>Article</display-name>
  <content-display-name-script>$('NEWS_TITLE')</content-display-name-script>
  <super-type>base:structured</super-type>
  <form>
    <input name="RELATED_LOCALE" type="ContentSelector">
      <label>Subject article page in other languages</label>
      <occurrences minimum="0" maximum="1"/>
      <config>
        <relationshipType>system:reference</relationshipType>
        <allowPath>*</allowPath>
        <allowContentType>subjectArticle</allowContentType>
      </config>
    </input>
    <input type="TextArea" name="NEWS_TITLE">
      <label>Title</label>
      <occurrences minimum="1" maximum="1"/>
    </input>
    <input type="ImageSelector" name="NEWS_IMAGE">
      <label>Main image</label>
      <occurrences minimum="1" maximum="1"/>
    </input>
    <input type="HTMLArea" name="NEWS_IMAGE_CAPTION">
      <label>Image caption</label>
      <occurrences minimum="0" maximum="1"/>
    </input>
    <input name="NEWS_BYLINE" type="ContentSelector">
      <label>News byline content selector</label>
      <occurrences minimum="0" maximum="1"/>
      <config>
        <relationshipType>system:reference</relationshipType>
        <allowPath>*</allowPath>
        <allowContentType>employee</allowContentType>
      </config>
    </input>
    <input name="NEWS_BYLINE_STRING" type="TextLine">
      <label>News byline string</label>
    </input>
    <input type="TextArea" name="NEWS_INGRESS_SHORT">
      <label>Short Description</label>
      <occurrences minimum="0" maximum="1"/>
    </input>
    <input type="TextArea" name="NEWS_INGRESS">
      <label>Long description</label>
      <occurrences minimum="0" maximum="1"/>
    </input>
    <input name="NEWS_CONTACT" type="ContentSelector">
      <label>Contact</label>
      <occurrences minimum="0" maximum="0"/>
      <config>
        <relationshipType>system:reference</relationshipType>
        <allowPath>*</allowPath>
        <allowContentType>employee</allowContentType>
      </config>
    </input>
    <input name="RELATED_PUBLICATIONS" type="ContentSelector">
      <label>Related publications</label>
      <occurrences minimum="0" maximum="0"/>
      <config>
        <relationshipType>system:reference</relationshipType>
        <allowPath>*</allowPath>
        <allowContentType>publication</allowContentType>
      </config>
    </input>
    <input name="RELATED_PROJECTS" type="ContentSelector">
      <label>Related projects</label>
      <occurrences minimum="0" maximum="0"/>
      <config>
        <relationshipType>system:reference</relationshipType>
        <allowPath>*</allowPath>
        <allowContentType>project</allowContentType>
      </config>
    </input>        
    <input name="RELATED_NEWS" type="ContentSelector">
      <label>Related news</label>
      <occurrences minimum="0" maximum="0"/>
      <config>
        <relationshipType>system:reference</relationshipType>
        <allowPath>*</allowPath>
        <allowContentType>news</allowContentType>
      </config>
    </input>
    <inline mixin="tags"/>
  </form>
</content-type>

This is the html area, which uses an old editor:

<input type="HTMLArea" name="NEWS_IMAGE_CAPTION">
    <label>Image caption</label>
    <occurrences minimum="0" maximum="1"/>
</input>

CONFIG.isCkeUsed returns true.

I have tried to update to 6.15.5, but the editor is still old.

ase · November 7, 2018, 10:09am

And I assume when you log in as administrator you get the same behaviour (old editor in the Wizard, new in the Page Editor), but without console errors?

Btw, correct input type is “HtmlArea”, not “HTMLArea”. This doesn’t really explain the problem as it’s most likely case-insensitive but you might want to try changing it to “HtmlArea” to see if that makes any difference.

Overall, this is very strange. Any change of getting temporary access to your admin? If it’s ok, send me a private mail/message with credentials and I’ll look at it.

ase · November 7, 2018, 11:31am

I double-checked and I’m almost certain that the reason is the incorrect input type (HTMLArea vs HtmlArea). We have a check in the code to support both editors: if input type equals “HtmlArea” and no special setting in the config - use the new editor, otherwise use the old one. Since “HTMLArea” doesn’t pass this check, it falls back to the old editor. We obviously should’ve made the check case-insensitive but oh well.

Changing “HTMLArea” to “HtmlArea” in the content type should do the trick.

myurchenko · November 7, 2018, 11:40am

Thanks!
After changing “HTMLArea” to “HtmlArea” everything works fine.
Thanks a lot for help!

ase · November 8, 2018, 8:14am

Errors with a new WYSIWYG

Enonic version: 6.15.3 OS: Linux

Enonic version: 6.15.3
OS: Linux