ASPxHtmlEditor - Custom default dialogs after 14.2?

So, here is the "now is a good time to re-implement all the standard image settings (size settings, style settings) and their client-side handling logic on your own" response I was so afraid of.
I wouldn't be so angry about all this if I didn't have to upgrade to 15.1 to have a number of bugs in your Document Server fixed urgently. I had to upgrade because you cannot create a fix for 13.2. So, I hoped to upgrade fast (how naive!), get all the issues fixed and roll out a maintenance release of my app to get rid of the Doc Server issues in it. And now my plans and release dates are ruined as I have to re-implement a critical part of my application from scratch first. What's next? Get rid of some other inconvenient functionality you don't like, even though it is used by your users? Terminate some of your existing controls? Deny customization of ASPxGridView? Is it a normal practice for DX to remove functionality which existed in your products for years?
I was not upgrading to 15.1 for so long because based on my experience every upgrade to a major version of your controls takes several weeks of unexpected extra development and bug fixes (just remember that time when you forced the Lightweight render mode and broke all my layout or the need to recreate my custom themes every time). But now you just remove something I've been paying for and say: "OK, now you will do it on your own, and by the way here is a quote to prolong your ASP.NET subscription, which expires in 30 days, so you can have more pain and spend another month upgrading to 16.1 in the future". Really? Have you ever heard of backward compatibility at all?
Nickolay, Software Architect
ClickHelp - Online Documentation Tool
http://clickhelp.co

I have an idea on how to resolve this. I bet you know the standard ASPxHtmlEditor functionality much better than me. So, provide me with a complete (client side + server side + .ascx) working implementation of the two problematic dialogs (Insert / Change Link (no Document Selector needed), Insert / Change Image (Image Properties is a must-have)) converted to custom dialogs according to your suggestion. This can become a new public code example for other people like me who used to have custom Insert Image / Insert Link dialogs previously and are not willing to spend days converting to 14.2/15.1.
If you do remove existing functionality form your products, I think it would be fair if you at least minimize the impact for your existing customers this way.
Nickolay, Software Architect
ClickHelp - Online Documentation Tool
http://clickhelp.co

Also, adding a customizable implementation of the Insert Video dialog to the example would be appreciated. Not required for my migration to 15.1, but appreciated.
Nickolay, Software Architect
ClickHelp - Online Documentation Tool
http://clickhelp.co

Nickolay, while I understand your frustration, please note that this was not a sudden decision on our part. We removed the "Copy Default Dialog Forms to the Project…" option from the smart tag menu in version 14.2 and openly indicated in response to customer inquiries this functionality will no longer be supported in the future. We recommend keeping your major version up-to-date and upgrading existing projects accordingly. In this case, it will be easier to migrate to each newer version (but not through 3 versions at once) and maintaining your solution. With every release, we publish major and breaking changes — this case was no exception.

As always, we're here to address your concerns. I've attached a custom Insert Link dialog implementation you can use as a starting point. Your requested Insert Image / Insert Video dialogs will be added later.

Please drop me a line if there is anything else I can do for you.

>>>
I've attached a custom Insert Link dialog implementation you can use as a starting point.
<<<
I did some quick tests and the implementation seems to work. Note however that I do not use jQuery in my project (yes, you can call me a dinosaur if you like) and HTML editor dialogs are not a good enough reason for me to start using it. Could you please avoid using jQuery when creating the dialogs implementation?
>>>
We removed the "Copy Default Dialog Forms to the Project…" option from the smart tag menu in version 14.2 and openly indicated in response to customer inquiries this functionality will no longer be supported in the future.
<<<
I understand why you did this - indeed, upgrading the forms is a pain every time. I don't like this, but I do understand your motivation. My frustration is caused by the fact that you did not try to minimize the efforts required for your customers to upgrade. It's not my fault that you decided to remove the feature, so if I do have to suffer from your decision then why don't you make me suffer less? Especially considering the fact that you do provide project converter to automate the upgrade and even wrote a special utility to update grid view button settings automatically. If you recommend migrating to custom dialogs as a solution for people like me then you should've published the dialogs implementation to minimize efforts required to do this.
>>>
We recommend keeping your major version up-to-date and upgrading existing projects accordingly.
<<<
As I said, every major upgrade tends to take several weeks of adopting various CSS style changes, fixing layout issues, reporting new bugs noticed in the new version and doing other migration changes (see my original comment), so I try to minimize the total amount of time spent in the upgrades - that's why I upgrade only when I have no other choice (like in this case). I really really wish this to end and hope that some day upgrading to a new major version of your controls will not break anything in my application and will be as easy as just running the project converter utility once, but apparently this day is yet to come.
Anyway, I'm fine with all this if you provide me with the dialogs implementation - that's an acceptable solution.
Nickolay, Software Architect
ClickHelp - Online Documentation Tool
http://clickhelp.co

Sure, I will avoid using jQuery. Currently, I'm in the process of preparing the image dialog for you. We will update this thread once we have the result.

Thank you for your patience. Attached is the modified project that now contains a possible implementation of the "Insert Image" dialog. I've slightly modified the "Insert Link" dialog as well, to remove jQuery and change the dialog footer.
I believe that the provided implementation should be sufficient to serve as the basis for other dialogs as well. The main idea is that the original content is modified by the client-side ExecuteCommand method. Note that you can always check how any dialog functionality is implemented by checking the JS code that is loaded by the browser (DXR.axd). In addition, we are always happy to answer any question that may arise during implementation.

Anthony,
Thanks for that, I'll check how the dialogs work and will let you know if I find any issues with them (and if I'll need your help to fix them).
>>>Your requested Insert Image / Insert Video dialogs will be added later.
What about the Insert Video dialog?
>>>
I believe that the provided implementation should be sufficient to serve as the basis for other dialogs as well. The main idea is that the original content is modified by the client-side ExecuteCommand method.
<<<
Of course, I can do all that myself. However, several years ago I thought that it would be a good idea to save some time and pay your company for implementing controls for me. Back then, I did not expect you will start removing features I needed, but as I said I can live with that if you care to minimize the impact.
Nickolay, Software Architect
ClickHelp - Online Documentation Tool
http://clickhelp.co

>>What about the Insert Video dialog?
Almost the entire dialog's code can be copy-pasted from the "Insert Image" dialog. The only difference would be as follows:

1. The "ASPxClientCommandConsts.INSERTVIDEO_COMMAND" command is used;
2. An additional tab is added with the ASPxFileManager control in it to update the preview path;
3. Additional parameters are passed to the command: autoPlay, repeat, preload, showControls, poster. They reflect values of the following editors:
   

However, we can provide you with the implementation if you wish.

Anthony,
Well, you promised me that you'll provide me with the dialog implementation. So yes, I do wish that.
Nickolay, Software Architect
ClickHelp - Online Documentation Tool
http://clickhelp.co

Sure, we will update this thread once it is ready.

Hello,

Thank you for your patience. I've attached the modified project, which contains a possible implementation of the "Insert Video" dialog.
The video insertion is controlled by the ExecuteCommand method with corresponding arguments (see the InsertVideo.js file for more information about these arguments).
If you have any questions regarding the implementation of the custom dialog, feel free to ask.

Best regards,
Pavlo

I finally got to this case, so I'm now integrating your custom dialogs into my application. During this process, I've faced an issue which was not covered in your sample.
In order to replace the standard Insert Link dialog, just adding a button to the toolbar (the ribbon in my case) is not enough. You also need to override the dialog which gets displayed when you invoke the Change Link… context menu command and when you click the Properties button in the Tag Inspector panel. To solve this task, I added the following code to my client-side CommandExecuted event handler:
   case ASPxClientCommandConsts.INSERTLINK_DIALOG_COMMAND:
   case ASPxClientCommandConsts.CHANGELINK_DIALOG_COMMAND:
     // Init my own "Insert Link" dialog
     htmlEditor.ExecuteCommand(HtmlEditorCommandConsts.INSERT_LINK);
     break;
This is the approach which was recommended in the https://www.devexpress.com/Support/Center/Question/Details/T263850 case to override the dialog which is going to be displayed. Indeed, my custom dialog is opened in this case. However, its initialization logic fails with the "Cannot read property 'AddHandler' of undefined" exception and the following call stack:
ASPx.CreateClass.prepareEditorsWithNullText (DXR.axd?r=4_76,…2,4_68,…:12982)
ASPx.CreateClass.InitializeDialogFields (DXR.axd?r=4_76,…2,4_68,…:12972)
ASPx.CreateClass.InitializeDialogFields (DXR.axd?r=4_76,…2,4_68,…:13201)
ASPx.CreateClass.OnInitComplete (DXR.axd?r=4_76,…_22,4_68,…:789)
ASPx.CreateClass.OnInitComplete (DXR.axd?r=4_76,…2,4_68,…:12826)
ASPx.CreateClass.Execute (DXR.axd?r=4_76,…_22,4_68,…:664)
ASPx.CreateClass.Execute (DXR.axd?r=4_76,…2,4_68,…:12762)
(anonymous function) (DXR.axd?r=4_76,…2,4_68,…:17825)
Function.aspxBind (DXR.axd?r=1_225…01,1_151…:3476)
ASPx.HtmlEditorClasses.Wrappers.BaseWrapper.ASPx.CreateClass.tryInvoke (DXR.axd?r=4_76,…2,4_68,…:16543)
ASPx.HtmlEditorClasses.Wrappers.BaseWrapper.ASPx.CreateClass.executeDialog (DXR.axd?r=4_76,…2,4_68,…:16527)
ASPx.HtmlEditorClasses.Commands.DialogCommand.ASPx.CreateClass.Execute (DXR.axd?r=4_76,…2,4_68,…:11057)
ASPx.HtmlEditorClasses.Managers.DesignCommandManager.ASPx.CreateClass.executeCommand (DXR.axd?r=4_76,…22,4_68,…:3875)
ASPx.CreateClass.executeCommandToDesignView (DXR.axd?r=4_76,…2,4_68,…:18216)
ASPx.CreateClass.ExecuteCommand (DXR.axd?r=4_76,…2,4_68,…:18201)
ASPx.HEToolbarCommand (DXR.axd?r=4_18-CwXgb:291)
(anonymous function) (DXR.axd?r=4_76,…2,4_68,…:14686)
ASPx.CreateClass.FireEvent (DXR.axd?r=1_225…01,1_151…:3591)
ASPx.CreateClass.raiseEvent (DXR.axd?r=1_214-EwXgb:451)
ASPx.CreateClass.onExecCommand (DXR.axd?r=1_214-EwXgb:444)
ASPx.CreateClass.execute (DXR.axd?r=1_214-EwXgb:1414)
ASPx.CreateClass.onClick (DXR.axd?r=1_214-EwXgb:1411)
(anonymous function) (DXR.axd?r=1_214-EwXgb:1396)
Function.aspxBind (DXR.axd?r=1_225…01,1_151…:3476)
This does not happen if I invoke the custom dialog explicitly via toolbar / ribbon button click. I believe you'll be able to reproduce this exception easily if you add a CommandExecuted handler to the sample project provided above.
Due to this exception, the custom link dialog does not get initialized, so this is a blocker issue for the custom dialogs implementation, which is supposed to be a complete replacement for the functionality you've removed. Please resolve it or suggest another approach which can be used to substitute standard Change Link / Change Image / Change Video dialogs invoked with my custom dialogs.
Nickolay, Software Architect
ClickHelp - Online Documentation Tool
http://clickhelp.co

Hello Nickolay,

We've discussed this issue and decided that the best way would be inserting a custom code inside the non-public executeCommand function:

JavaScript
function OnInit(s, e) {  
    var commandManager = s.getDesignViewWrapper().commandManager; //not public  
    var original = commandManager.executeCommand;  
    commandManager.executeCommand = function (cmdID, cmdValue) {  
        if (cmdID == ASPxClientCommandConsts.INSERTLINK_DIALOG_COMMAND ||  
            cmdID == ASPxClientCommandConsts.CHANGELINK_DIALOG_COMMAND ||  
            (cmdID == ASPxClientCommandConsts.CHANGEELEMENTPROPERTIES_DIALOG_COMMAND && s.GetSelection().selectedElement.tagName == "A")) {  
            cmdID = "customdialog";  
            cmdValue = "CustomInsertLink";  
        }  
        else if (cmdID == ASPxClientCommandConsts.INSERTIMAGE_DIALOG_COMMAND ||  
            cmdID == ASPxClientCommandConsts.CHANGEIMAGE_DIALOG_COMMAND ||  
            (cmdID == ASPxClientCommandConsts.CHANGEELEMENTPROPERTIES_DIALOG_COMMAND && GetImgCommand(s) == ASPxClientCommandConsts.CHANGEIMAGE_DIALOG_COMMAND)) {  
            cmdID = "customdialog";  
            cmdValue = "CustomInsertImage";  
        }  
        else if (cmdID == ASPxClientCommandConsts.INSERTVIDEO_DIALOG_COMMAND ||  
            cmdID == ASPxClientCommandConsts.CHANGEVIDEO_DIALOG_COMMAND ||  
            (cmdID == ASPxClientCommandConsts.CHANGEELEMENTPROPERTIES_DIALOG_COMMAND && GetImgCommand(s) == ASPxClientCommandConsts.CHANGEVIDEO_DIALOG_COMMAND)) {  
            cmdID = "customdialog";  
            cmdValue = "CustomInsertVideo";  
        }  
        original.apply(commandManager, arguments);  
    }  
}  

Here, the original function is stored in the "original" variable and the passed command is modified accordingly. With this code, the custom dialog is shown whenever the original dialog is called (standard menu / ribbon item / context menu / tag inspector button). Please refer to the attached modified project.

I'll try that approach, thanks.
In the meantime, I have another related question: I see that I'm not the only person looking to replace the standard Insert Image / Insert Link dialogs (I've noticed this case: https://www.devexpress.com/Support/Center/Question/Details/T290756). So, if it's not just me, maybe you will consider implementing a more straightforward (and officially supported) way to replace standard dialogs? After all, we had an officially documented ability to properly do so in proper versions, so now this should be treated as a lost functionality.
The reason why I ask this is that after my upgrade from 13.2 to 15.1 I had to re-implement my ASPxHtmlEditor-based control from scratch due to changes in your undocumented API (I was relying heavily on it). Of course, I cannot blame you - that why it's called "undocumented", and I will keep using your undocumented API solutions further, but unfortunately the redesign took weeks, so I am terrified by the idea of losing my custom dialogs once again when the undocumented approach suggested in this case will stop working due to some future changes.
I believe that an OnBeforeCommandExecuted client-side event which will allow cancelling the default handling and running custom handling for any commands instead would be a proper solution to this problem and to my Tag Inspector behavior customization questions in my other case.
Nickolay, Software Architect
ClickHelp - Online Documentation Tool
http://clickhelp.co

BTW, the suggested approach for replacing standard commands with custom ones seems to work, but for whatever reason I had to do a small change to your code:
original.apply(commandManager, arguments);
was replaced with
original.apply(commandManager, [cmdID, cmdValue]);
Without that, I faced a "custom dialog not found" error when double-clicking an image, because the cmdValue argument was not in the "arguments" array passed to original.apply in that case for whatever reason.
Nickolay, Software Architect
ClickHelp - Online Documentation Tool
http://clickhelp.co

Oh, and I've found two critical issues with your latest T263833.zip sample in Chrome (works fine in Firefox, though):

1. Image insert action cannot be cancelled.
2. An additional image is inserted if you put a caret somewhere, then double-click an image and click OK in the Change image dialog (see attached video).
   Not sure whether the behavior will be the same for all other dialog invocation approaches (toolbar button click, right-click and Tag Inspector button click).
   Nickolay, Software Architect
   ClickHelp - Online Documentation Tool
   http://clickhelp.co

Yeah, and it's not just about inserting images. Undo history no longer works at all in Chrome and neither do any other ribbon commands (like Bold, for example). Apparently, the suggested command replacement approach breaks something in ASPxHtmlEditor and what is more important you did not even test it (probably because you knew I will do that for you).
The attached image demonstrates my vision of the situation with this case started 2.5 months ago. It would never take that long if your devs ever care to provide a proper solution for the functionality they removed (custom dialogs) and your QA guys ever care to test that solution. But well, considering the number of bugs (including backward compatibility bugs) I see in 15.1, it looks like you don't really have QA guys…
Nickolay, Software Architect
ClickHelp - Online Documentation Tool
http://clickhelp.co

And one more issue with the solution: styles for the constrain proportions and reset image size classes specified in the solution work when no theme is applied, but in my Metropolis-based custom theme I cannot find any classes similar to dxHtmlEditor_heConstrainProportionsBottom. So, these images are not displayed for me. Looks like I need some other class names, not those provided in the sample? I tried looking for HtmlEditor CSS file in my theme sources, but did not even found the "constrain" string anywhere in there.
Nickolay, Software Architect
ClickHelp - Online Documentation Tool
http://clickhelp.co

Hello Nickolay,

I am aware of your product based on our ASPxHtmlEditor. When I examined it, I saw that you were using its undocumented functionality heavily. Many control features were modified. It is very impressive! You seem to be the only person who is familiar with this control almost as well as our developers. :)
I understand that there was no way to achieve this result without using undocumented methods. At the same time, I clearly saw that difficulties that would appear if you upgrade your project to a recent version. In version 14.2, ASPxHtmlEditor internal implementation was drastically reorganized. I hope that you remember my email regarding beta-testing of the v14.2 ASPxHtmlEditor witch I sent you in November 2014. Version 15.1 includes all the changes made in version 14.2 as well as its own changes. So, upgrading to version 15.1. seemed to be even harder. Therefore, I greatly appreciate your decision to upgrade and your understanding and patience in this situation!

You are right, de-facto, we removed automatically generated dialogs in the ASPxHtmlEditor. As far as I know, our R&D team does not plan to restore them. Currently, we introduced the ASPxHtmlEditor.SettingsDialogs settings list that allows to customize the built-in dialog. Using these settings, you can hide inappropriate dialog elements or replace them with your own components using Templates. Our experience shows that this meets most user's scenario requirements. On the other hand, 'most' does not mean 'all'. Therefore, DevExpress Support is here to address all your concerns.

I see that my colleagues implemented a rather detailed solution for this issue. Unfortunately, it could not be tested thoroughly enough on our side because we do not know all the requirements and conditions of your scenario. Therefore, I wish to thank you for the detailed description of the found issues. We are working on them and will get back to you once we have any results.

Should you have any other questions, do not hesitate to contact me at any time.

Vladimir,
Yes, I do remember your email, so I was ready for some difficulties indeed, I just did not expect that you completely remove a feature without providing an alternative solution which will cover 100% of the previously existing functionality. That's not what software companies normally do and that's why all the frustration here. I faced a lot of issues with the quality of your 15.1 release (you can easily see cases I've created on them), but this one is outstanding due to its complexity and the time it takes for your team and me - the time which, I believe, should've been invested by your devs, not by the Support team, and before the release, not after it. Honestly, I don't think it's so hard to predict that some people are using fully customized Insert Link and Insert Image dialogs and that these people will want to keep using them further ;-) As for testing, well, Chrome is one of the most popular browsers nowadays, so it's strange that the solutions provided were not tested with it. For me, it took a few seconds to notice that commands no longer work in Chrome with the suggested command replacement solution applied.
However, to be honest, I cannot blame you or the DX support team here. This case is not something you should normally do. Providing implementation of standard dialogs along with some proper way to integrate them into ASPxHtmlEditor smoothly is a job for developers and proper testing of the suggested solution (which is, indeed, complicated as it involves multiple moving parts) is a job for your QA team. Unfortunately, I cannot contact them directly, so I kindly ask you to forward my feedback to the dev team and especially the decision maker(s) who decided to remove the possibility of customizing the Insert Link / Insert Image dialogs without providing a replacement solution. Feel free to forward the image I posted above to them, tell them that my release date has already been shifted by several weeks for now (and still counting) due to this issue and ask them to think twice (or more) before they decide to remove some existing feature next time. The specific use case (customization of the two most popular dialogs) is not really that unique, so I believe they haven't considered possible consequences of the change thoroughly.
BTW, I've found the relevant CSS class names for my theme, so don't spend your time on this small item - I was just looking at a wrong CSS file in my theme sources (should've checked sprite.css). Please focus on the duplicated images and not working commands issues. Good luck to us both looking for alternative solutions in this case as I still hope to release a new version of ClickHelp in October and I'm going to run some long and heavy testing prior to that release.
Nickolay, Software Architect
ClickHelp - Online Documentation Tool
http://clickhelp.co

Hello Nickolay,

I have fixed these issues with a custom Image dialog. Please see the attached project.
I would also like to clarify some details for you.

>>> And one more issue with the solution: styles for the constrain proportions and reset image size classes specified in the solution work when no theme is applied

This issue occurred because the CSS class names were incorrectly used. They were without a theme prefix.
To resolve the issue, add the necessary suffix to the constraint images (see the code below):

Default.aspx:

ASPx
<dx:ASPxHtmlEditor ID="HtmlEditor" Theme="DevEx" ... >  
...  
</dx:ASPxHtmlEditor>  

InsertImage.ascx.cs:

C#
public string ThemeSuffix { get { return (string.IsNullOrEmpty(HtmlEditor.Theme) || HtmlEditor.Theme == "Default") ? "" : ("_" + HtmlEditor.Theme); } }  

InsertImage.ascx:

HTML
<img class="dxHtmlEditor_heConstrainProportionsTop<%= ThemeSuffix %>" src="Images/empty.gif" alt="" />  

>>> 1. Image insert action cannot be cancelled.
I have reproduced this issue, and we will fix it in the context of the "ASPxHtmlEditor - Uploading process cannot be canceled in the InsertImageDialog" ticket.

>>> 2. An additional image is inserted if you put a caret somewhere, then double-click an image and click OK in the Change image dialog

I have fixed this behavior. It occurred because ASPxClientCommandConsts.INSERTIMAGE_COMMAND was passed instead of ASPxClientCommandConsts.CHANGEIMAGE_COMMAND.

>>> Yeah, and it's not just about inserting images. Undo history no longer works at all in Chrome and neither do any other ribbon commands (like Bold, for example)

It was caused by skipping an additional parameter on calling the mocked executeCommand function (see the code below):

JavaScript
var original = commandManager.executeCommand;  
commandManager.executeCommand = function (cmdID, cmdValue, addToUndoHistory) {  
...  
original.call(commandManager, cmdID, cmdValue, addToUndoHistory);  
}  

Nickolay, I appreciate your feedback. Our Support and R&D teams work in touch and our developers see all user feedback including this one.
My colleague has attached the updated sample. Please check it an let us know if you have any other questions.

I've checked the updated project - yes, the two issues (additional images insertion and disabled Undo) seem to be working now. I've also did comparison of the code with its previous version and I see that you've fixed a number of additional issues, like typo in the "height" property name - thanks for that, you saved me a bit of debugging time.
However, I have a few notes:
- Is it really safe to use GetSelection().selectedElement in commandManager.executeCommand and GetImgCommand for detection of the element which is currently selected in Tag Inspector? For example, when you put caret into a table cell, then click the "table" tag link in Tag Inspector and then invoke the properties dialog, the GetSelection().selectedElement property will return td, while tagInspector.currentElement will return the table tag.
- The current solution relies heavily on undocumented functionality, which will, based on my experience, eventually stop working in a couple of releases (maybe in 16.1 or 16.2), making me lose another weeks to track bugs, report bugs and then integrate new workarounds into my code. So, can you guys confirm you'll implement a proper solution for Insert Link / Insert Image dialogs replacement in a new version? I don't feel safe with the hacky undocumented solution of custom commandManager I have for now. The dialog type detection based on the selected image class in the GetImgCommand method alone is enough for me to feel bad when I imagine how many things can go wrong and how many use cases I must test in order to make sure everything works correctly and nothing gets broken after updating to a new version of your controls. Even if you use the same logic in your code internally, now it's a part of my code and apparently it will not be auto-updated in when I install a new version of your controls…
- I wish I've noticed your responses in this case earlier :-/ For whatever reason, I did not seem to get notifications on the two latest comments you made in this case. That's not the first time this happens - I've already missed a couple of notifications on your co-workers comments with solutions in my other cases. I check my email (including the Spam folder) thoroughly on a regular basis, so I doubt that I could've missed them. So, if you have any means of checking whether email notifications were sent on the two latest comments by Alexander K and Vladimir made on Sept 22, please do so. Of course, there is a chance of some issues on my side, but it is important for me to notice your responses timely, so I'd like to check everything I can in order to make sure I'll never miss your responses.
Nickolay, Software Architect
ClickHelp - Online Documentation Tool
http://clickhelp.co

Hello Nickolay,

The use of GetSelection().selectedElement is not safe since this property can contain a reference to another element.

I have double checked our plans about the dialogs with our R&D team. We are unlikely to get them back in the future, but the guys have a couple of ideas about how to extend the customization of the default dialogs, including changing its client-side functionality. However, it won't be released in the upcoming version (15.2).

Let me know if you have any other questions.

>>>
The use of GetSelection().selectedElement is not safe since this property can contain a reference to another element.
<<<
If it's not safe then why is it used in your sample code? :) OK, maybe I was not clear enough. What I really meant was: are you sure it is safe to use it in the specific code snippet you've provided?
>>>
I have double checked our plans about the dialogs with our R&D team. We are unlikely to get them back in the future, but the guys have a couple of ideas about how to extend the customization of the default dialogs, including changing its client-side functionality. However, it won't be released in the upcoming version (15.2).
<<<
No-no-no, I don't want the previous "copy dialogs" feature back! I'm totally fine with making the Insert Image / Insert Link dialogs fully custom once and maintaining the fully custom implementation in the future. It was hard, but strategically correct thing to do, because upgrade of the dialogs was one of my "pain points" when migrating from one version of your controls to another (I had to copy new versions of those dialogs into my project, look for differences since the old version, update my customized dialogs, etc. every time I upgraded - this took significant amount of time).
However, what I wanted to point out is:
- Prior to 14.2 Insert Link / Insert Image dialogs were replaced smoothly by custom dialogs. Just copy the .ascx to your project and customize it. The custom dialogs will be invoked when you double-click an element, when you select an element and click the relevant ribbon item, or when you right-click an element and select the corresponding context menu command.
- After 14.2 we need to use a lot of undocumented and potentially unreliable code in order to integrate custom Insert Link / Insert Image dialogs into ASPxHtmlEditor and I see that I'm not the only person who needs this (see https://www.devexpress.com/Support/Center/Question/Details/T290756, for example).
So, I still think that this lack of proper integration is lost functionality in 14.2+ because it's no longer avaialbe with the public API. I think you should at least implement the BeforeCommand / CommandExecuting event and write a help topic explaining which code should be placed there to replace standard insert link / image dialogs with custom dialogs smoothly for all possible insert / change scenarios, including invocation via the Tag Inspector Properties button. Or maybe provide some easier integration approach so people don't have to verify element CSS classes in order to figure out what dialog should be invoked ;-) After all, checking whether the code in the help topic has changed in the new release is not a very good practice. New releases of your controls shouldn't break my custom insert link / image dialogs integrated into ASPxHtmlEditor without any warnings, right?
BTW, note that I'm not speaking of replacing other custom dialogs (YouTube video, Video, Table / rows / cells, Change Element Properties, etc.) here, but in theory there should be a consistent, easy and documented solution for replacing all the standard dialogs with custom ones. Again, note that I'm not speaking of copying some standard .ascx files as previously, I'm talking about integration of existing custom .ascx files into ASPxHtmlEditor.
>>>
Regarding the notifications. It seems that you removed this ticket from your Favorites on August 27th.
<<<
Ooops, I did not expect it would be that easy. Apparently it was a random click I did not notice timely. And a suggestion for you: please show a simple confirmation dialog prior to removing an item from Favorites. Now, when I'm thinking of this, I remember other cases when I unintentionally "unfavored" some cases just because a wrong button was clicked. I just noticed it timely back then.
Thanks for your continuous support, guys! I feel that my two "nightmare cases" (this one and another one regarding Tag Inspector) are going to be finally resolved soon :)
Nickolay, Software Architect
ClickHelp - Online Documentation Tool
http://clickhelp.co

Hello Nickolay,

Thank you for your clarification regarding custom dialogs. As far as I know, our developers have a similar view of developing this feature. I am not certain whether or not our developers will fully release them in the upcoming version (15.2), but we definitely continue developing in this direction. I have forwarded your thoughts to our teams.

I also appreciate your suggestion about displaying an alert before removing tickets from Favorites.  I will forward it to our website team.

I need additional time to research the issue related to element selection and will get back to you once I have any results.

Hello Nickolay,

>>> What I really meant was: are you sure it is safe to use it in the specific code snippet you've provided?
>>> s.GetSelection().selectedElement

Yes, it should be safe to use it to detect if this "selectedElement" represents an image/link/video element, but not your custom "snippet" element.
It will be better to call the GetSelectedElement method instead of the property (see the code below):

JavaScript
var selectedElement = s.GetSelection().GetSelectedElement();  

Alexander,
OK, changed to .GetSelectedElement() in the getImgCommand function.
As for elements detection in my own code which handles availability of Tag Inspector Properties / Unwrap buttons (the latter one is my own, I added it with JavaScript) in SelectionChanged event handler, this code uses the undocumented ASPxHtmlEditor.tagInspector.currentElement property, not the selected element. I do this because tagInspector.currentElement and GetSelection().GetSelectedElement() are different things when you click a table tag in Tag Inspector and I need to hide my Unwrap button for tables timely.
Nickolay, Software Architect
ClickHelp - Online Documentation Tool
http://clickhelp.co

I see, Nickolay. Let us know if you need our additional assistant.

Hello Nickolay,
I also registered your fight with new "CustomDIalogs" and I keep my fists, that you "skate out" from this in the best possible :)
Michal

Michal,
Based on the latest questions in your profile, I see that you are customizing ASPxHtmlEditor a lot, just like I do. Good to know I'm not the only person doing this :)
Yes, the 13.2 => 15.1 dialogs upgrade was a nightmare which consumed tons of my time. However, the latest version of the code from this thread currently seems to work for me - I haven't faced new problems with it so far. I've customized it a lot when integrating into my project and big pre-release testing is yet to be done, though.
Also, I'm still deeply concerned with the hacky approach we had to use to overload the default dialogs, specifically with the fact that we have to replace ASPxHtmlEditor's internal command handling logic and use image CSS classes (whose names are retrieved via undocumented properties) to detect which dialog (edit image, edit video, etc.) needs to be invoked. Based on my experience, this code will stop working after a major release or two, so it definitely is not a long-term solution, just a short-time hack to somehow replace the lost functionality. And then, when a proper way to overload the default insert / change dialogs is implemented, I'll need to change my code again to adopt that new way…
Nickolay, Software Architect
ClickHelp - Online Documentation Tool
http://clickhelp.co

I've installed the 15.1.7.15292 hotfix and now the custom Insert Image dialog no longer works in Firefox 41.0.2 (not 100% sure it worked before, though). It makes Firefox hang.
Here are the steps:

1. Run the https://www.devexpress.com/Support/Center/Attachment/GetAttachmentFile/02d7c6f3-613c-11e5-80bf-00155d62480c sample project (the CustomDialogs.zip file posted in a comment higher in this thread).
2. In the Design tab, type:
   test
   test
   |
   So that you have two "test" paragraphs and your caret is on an empty third line.
3. Click the insert image button on the ribbon to invoke the custom dialog.
4. Drop an image in the dialog and click OK to insert it. You'll see thousands of JavaScript errors in the Firebug console and your Firefox will die. I've attached a video of it. For whatever reason, the issue did not happen for the first time in it (although it usually does), not sure why, maybe because I started recording in Jing and switched ASPxHtmlEditor focused/unfocused state which is known to produce bugs. But then, during the second attempt, the error was reproduced.
   Back then, in July, I was going to migrate from 13.2 to 15.1 fast (planned a month for it), but look at me: four months have passed and I'm still reporting bugs to you. I've already moved my release date a couple of times due to more and more issues I've found in ASPxHtmlEditor. My latest idea was to release a new version of my app at the end of October and image insertion during HTML editing is a central part of it, so I cannot stress more how tired I am of this custom dialog problems and related bug hunting and how important this is for me.
   Nickolay, Software Architect
   ClickHelp - Online Documentation Tool
   http://clickhelp.co

Before you notice that this does not happen with standard Insert Image dialogs, figure out the difference between the command parameter objects, assign the missing imageElement, htmlBeforeChange and id properties of the result object in the prepareImageParameters method and think this will solve the problem: NO, THIS WILL NOT solve the problem. However, the problem will be harder to reproduce if you do this. It will just take you some 5-10 subsequent insert/change image actions in various places of the HTML content to reproduce the issue, instead of 1-2 actions you needed previously.
Nickolay, Software Architect
ClickHelp - Online Documentation Tool
http://clickhelp.co

I think I've found some better steps: you need to insert one image, then put the caret right before this newly inserted image and insert another image - that's when the script will crash and that's why it did not happen for the first time in my video. I think there are other scenarios as I saw this happen with inserting a single image only as well, but that scenario (inserting one image before the other one), causes a 100% rock solid Firefox crash (after 16 K of JavaScript errors).
Nickolay, Software Architect
ClickHelp - Online Documentation Tool
http://clickhelp.co

Also, the image aspect is not preserved correctly in the custom dialog implementation you provided, unlike in the standard Insert Image dialog. Here are the steps:

1. Open the Insert Image dialog.
2. Drop a rectangular (not square) image into the dialog.
3. Go to the options, choose Custom size. Note that aspect ratio is supposed to be preserved.
4. Specify some width for the image, say 100px.
5. Specify some height for the image. For the http://demos.devexpress.com/ASPxHTMLEditorDemos/Features/General.aspx sample, this will lead to proper Width value auto-adjustment, considering the image aspect ratio. In the custom dialog implementation you provided, the Height value will be simply copied to the Width field, as if the ratio is 1 (although it's not).
   My current code is quite different from the sample, so please highlight specific JavaScript changes which must be done in your reply so I don't have to do any WinMerging on the sources.
   Nickolay, Software Architect
   ClickHelp - Online Documentation Tool
   http://clickhelp.co

Hello Nickolay,

I've successfully reproduced the issue.
It occurs because of parallel selection processing in case an image is inserted and the dialog is closed. See the code below.

JavaScript
htmlHelper.htmlEditor.ExecuteCommand(this.GetCommandName(), insertImageDialog.prepareImageParameters(), true);  
ASPxClientHtmlEditor.CustomDialogComplete(1, null);  

To fix this behavior, I suggest you use the following approach:

1. Pass a callback function to the ASPxClientHtmlEditor.CustomDialogComplete method.
2. Handle the ASPxClientHtmlEditor.CustomDialogClosed event to run the passed callback function if it's present (see the code below).

Main.js

JavaScript
function OnInit(s, e) {  
    s.CustomDialogClosed.AddHandler(onCustomDialogClosed);  
    ...  
}  

JavaScript
function onCustomDialogClosed(s, e) {  
    if (e.status == "success" && e.data && e.data.action)  
        e.data.action();  
}  

InsertImage.js

JavaScript
...  
OnSubmit: function () {  
    if (!ASPxClientEdit.AreEditorsValid(insertImageFL.GetMainElement(), null, false)) return;  

    var cmdName = this.GetCommandName();  
    var args = insertImageDialog.prepareImageParameters();  
    ASPxClientHtmlEditor.CustomDialogComplete("success", {  
        action: function () {  
            htmlHelper.htmlEditor.ExecuteCommand(cmdName, args, true);  
        }  
    });  
}  
...  

Unfortunately, I was not able to reproduce the second issue (incorrect image size calculation).
I tried to reproduce it in the specified sample project ( CustomDialogs ) but failed (see the attached screencast).
Please attach a sample project that we can use to reproduce the problem on our side or describe steps to recreate the problem so that we can see it in action.

Regarding the Firefox crash:

1. The solution seems to work, but OMG, what a hacky solution. Is there a good reason why I have to pass a callback function as a return argument? It just feels like doing something strange, like eval(myFunc.toString()) or if(myBool.toString().length == 4). At the same time, it seems to keep crashing if I simply pass the command name and the argument (not a callback function) to DialogClosed and try to execute the command explicitly from the DialogClosed handler. So, since the solution is so strange and fragile, I'd like to understand it better.
2. Should I do the same thing for my Insert Link dialog as well to avoid similar problems?
   Regarding the aspect ratio issue - see the attached video for steps. It shows that the image becomes a square, while in your http://demos.devexpress.com/ASPxHTMLEditorDemos/Features/General.aspx sample the image aspect ratio persists. Also, in your online sample the width and height fields are populated automatically when an image is uploaded, while this is not the case for the custom dialogs project. Of course, I can debug and resolve this one myself, but I've already invested enough in debugging your code and besides I think you want to get a complete working solution for other customers on your side, right? ;-)
   Nickolay, Software Architect
   ClickHelp - Online Documentation Tool
   http://clickhelp.co

Hello Nickolay,

>>> it seems to keep crashing if I simply pass the command name and the argument to DialogClosed and try to execute the command explicitly from the DialogClosed handler.

I re-wrote the code to meet your requirements, but did not face any errors (see the code below and the attached video).

Main.js

JavaScript
function onCustomDialogClosed(s, e) {  
    if (e.status == "success" && e.data && e.data.cmdName && e.data.args)  
        s.ExecuteCommand(e.data.cmdName, e.data.args, true);  
}  

InsertImage.js

JavaScript
OnSubmit: function () {  
    if (!ASPxClientEdit.AreEditorsValid(insertImageFL.GetMainElement(), null, false)) return;  

    var cmdName = this.GetCommandName();  
    var args = insertImageDialog.prepareImageParameters();  
    ASPxClientHtmlEditor.CustomDialogComplete("success", { cmdName: cmdName, args: args });  
}  

I also attached the sample project. Would you please modify it to reproduce the issue?

>>> 2. Should I do the same thing for my Insert Link dialog as well to avoid similar problems?

Yes, the described approach should help you avoid selection 'race conditions' (parallel selection processing in case an image is inserted and the dialog is closed).

>>> Regarding the aspect ratio issue - see the attached video for steps.

Thank you for the attached screencast.
I have reproduced the same issue during inserting an image. Since a browser had cached the image earlier (when it was loaded first time), it did not request the image next time and the load event was not raised.
I suggest you modify the updateSizeIfValidImage method to resolve this issue (see the code below).

InsertImage.js

JavaScript
updateSizeIfValidImage: function (url) {  
    var image = new Image();  
    image.src = url;  
    if(this.isImageLoaded(image))  
        insertImageDialog.updateSizeFields(image.naturalWidth || image.width, image.naturalHeight || image.height, image.style.width, image.style.height);  
    else  
        image.onload = function () {  
            insertImageDialog.updateSizeFields(image.naturalWidth || image.width, image.naturalHeight || image.height, image.style.width, image.style.height);  
        };  
}  

JavaScript
isImageLoaded: function(image) {  
    if(ASPx.Browser.IE && image.complete)  
        return true;  
    if(image.naturalWidth && image.naturalHeight)  
        return true;  
    return false;  
}  

JavaScript
initializeEditors: function (el) {  
    ...  
    this.imageName = el.getAttribute("src");  
    this.updateSizeIfValidImage(this.imageName);  
    ...  
}  

I think the behavior I observed was due to the first parameter of the ASPxClientHtmlEditor.CustomDialogComplete method calls in your sample. They were 1 for OK and 0 for cancel, which does not seem to be correct, while in the new version you replaced them with "success" (and I replaced 0 with "cancel" in the other call as I have my own DialogClosed handler for which the success / cancel marks are important). Anyway, the simplified version seems to work and I like it better than the previous strange solution :)
As for the root cause, considering the fact that the number of errors raised to 16 K in a few seconds, it looks like you used setTimeout / setInterval to perform Firefox-specific delayed processing after the dialog is closed and that code got into an infinite loop, because the image was inserted too early. Now, if I remember the mysterious Firefox-specific 200 ms timeout for elements deletion from your other code sample provided in my Tag Inspector case, this gives me an idea of the whole picture (looks like selection is restored in Firefox after a dialog is closed, and this takes some time), and a rule for the future: never change anything in the HTML when a custom dialog is being closed, unless the DialogClosed handler is invoked. In fact, I already use the handler to handle custom HTML insertion for a bunch of my own custom dialogs, so the only reason why I left the ExecuteCommand call where it was is that you provided me with that sample and I thought you know the internals better than me :))
I've merged the proportions-related changes to my code and it seems to work. BTW, it may make sense to collapse isImageLoaded to a shorter form which is easier to read:
return ASPx.Browser.IE && image.complete
   || image.naturalWidth && image.naturalHeight;
Also, I don't think direct onload assignment is a 100% cross-browser way to assign event handlers dynamically, but I used my own routine for that, so never mind.
Nickolay, Software Architect
ClickHelp - Online Documentation Tool
http://clickhelp.co

Another small addition for those using these samples:
In the InsertLinkForm.js file, make sure to change the OnInsertLinkOk handler in the following way:
ASPxClientHtmlEditor.CustomDialogComplete("success", {
   arg: {
…
     text: insertLinkText.GetValue() ? insertLinkText.GetValue() : "",
   }
That's because null text (default uninitialized value) will cause JavaScript errors when clicking OK. This happens every time you edit image links (not text links).
Nickolay, Software Architect
ClickHelp - Online Documentation Tool
http://clickhelp.co

Hi all,
we have some trouble with your custom dialogs sample publicated in this ticket by DevExpress support.
In InsertLink and InsertImage dialog is this bug: when I type text in any dialog textboxes with Internet Explorer, the TextBox not show letter "z". In other tested browsers (Chrome and Firefox) thats working well.
I debuging events OnKeyPress, OnKeyUp in DXR.axd, but I dont find what is bad.
Can you hepl me, please?
Thank you.
Michal Jehlar
OpenOne a.s.

Hello,

I tested the project attached by Alex in his last comment, but could not reproduce the issue (see the attached video). Would you please provide me with detailed steps to reproduce the issue?