[Q] Interaction with the Issue Templates plugin - Githubissues

albrechtd commented 2 years ago

Hi,

I use the wysiwyg editor on a Debian Buster system, running Redmine 4.0.7, together with the Issue Templates plugin. Unfortunately, selecting a template from the latter applies the text only to the textile input, but not to the Visual Editor.

Whilst this is a flaw in the Issue Template plugin, I guess it might be simple to extend some Javascript callbacks in that plugin to fix this issue. E.g. it seems there is some support for the CkEditor (e.g. clear it).

My question: is there a simple method to set the visual editor contents to an interpreted version of some textile input? Or, as an alternative if the Visual Editor is selected: switch to textile input, set the contents from the template, and switch back?

Thanks in advance, Albrecht.

taqueci commented 2 years ago

Hi @albrechtd

Issue Template plugin does not work in my environment. Please tell me your Redmine environment (Administration » Information).

albrechtd commented 2 years ago

Hi @taqueci, thanks a lot for your feedback!

My environment is (installed from Debian Buster backports):

Environment:
  Redmine version                4.0.7.stable
  Ruby version                   2.5.5-p157 (2019-03-15) [x86_64-linux-gnu]
  Rails version                  5.2.4.3
  Environment                    production
  Database adapter               PostgreSQL
  Mailer queue                   ActiveJob::QueueAdapters::AsyncAdapter
  Mailer delivery                smtp
[…]
Redmine plugins:
  […]
  redmine_issue_templates        1.1.0
  […]
  redmine_wysiwyg_editor         0.22.0

I think I actually found a solution (or workaround) at least: The only change required in your plugin is a global variable exposing the RedmineWysiwygEditor object (I didn't want to make rwe global…):

--- redmine_wysiwyg_editor-0.22.0/app/views/redmine_wysiwyg_editor/_redmine_wysiwyg_editor_partial.html.erb     2021-06-19 10:42:35.000000000 +0200
+++ redmine_wysiwyg_editor-patched/app/views/redmine_wysiwyg_editor/_redmine_wysiwyg_editor_partial.html.erb    2021-09-17 13:07:41.000000000 +0200
@@ -46,7 +46,8 @@
   height: auto;
 }
     </style>
-    <script>
+  <script>
+var RWEGLOBAL = null;
 function initRedmineWysiwygEditor() {
   var setVisible = function() {
     // Fixed for IE 11
@@ -145,6 +146,7 @@
   };

   var rwe = new RedmineWysiwygEditor($(this), previewUrl);
+  RWEGLOBAL = rwe;

   rwe.setPostInitCallback(function() { postInit(rwe) });

In the Issues template Plugin, I can now access the RWEGLOBAL methods, like

--- redmine_issue_templates-1.1.0/app/views/issue_templates/_issue_select_form.html.erb 2020-08-06 01:46:50.000000000 +0200
+++ redmine_issue_templates-patched/app/views/issue_templates/_issue_select_form.html.erb       2021-09-17 13:13:00.000000000 +0200
@@ -88,8 +88,16 @@
   templateNS.setPulldown('<%= @issue.tracker.id %>')

   document.getElementById('issue_template').addEventListener('change', (event) => {
+    templateNS.eraseSubjectAndDescription()
     templateNS.changeTemplatePlace()
     templateNS.loadTemplate()
+    setTimeout(function() {
+      try {
+        switch (RWEGLOBAL._mode) {
+          case 'visual': RWEGLOBAL._setVisualContent(); break;
+          case 'preview': RWEGLOBAL._setPreview(); break;
+        }
+      } catch (e) { } }, 250);
   })

   // Show dialog
@@ -104,10 +112,22 @@
   // revert template
   document.getElementById('revert_template').addEventListener('click', (event) => {
     templateNS.revertAppliedTemplate()
+    try {
+      switch (RWEGLOBAL._mode) {
+      case 'visual': RWEGLOBAL._setVisualContent(); break;
+      case 'preview': RWEGLOBAL._setPreview(); break;
+      }
+    } catch (e) { }
   })

   document.getElementById('erase_template').addEventListener('click', (event) => {
     templateNS.eraseSubjectAndDescription()
+    try {
+      switch (RWEGLOBAL._mode) {
+      case 'visual': RWEGLOBAL._setVisualContent(); break;
+      case 'preview': RWEGLOBAL._setPreview(); break;
+      }
+    } catch (e) { }
   })

   // keydown keyup

Note that the timeout is required in the change event (and for some reason I don't understand I have to call templateNS.eraseSubjectAndDescription() first) as the template is loaded via a HTTP request.

Yes, this is some sort of an evil hack, and I am not happy with the timeout, but at least it seems to work just fine… Therefore, I'm still checking if I could replace the timeout by some other kind of callback function.

Of course, any further insight or improvement will be highly appreciated!

taqueci commented 2 years ago

Note to self:

The visual editor is updated by the Ajax request completion. _redmine_wysiwyg_editor_partial.html.erb

However, Issue Templates plugin no longer uses jQuery. https://github.com/agileware-jp/redmine_issue_templates#100

1.0.0

...

Rewrite JavaSctipt code from jQuery into plain JavaScript.

...

taqueci commented 2 years ago

Note to self:

This is just my two cents.

--- a/app/views/redmine_wysiwyg_editor/_redmine_wysiwyg_editor_partial.html.erb
+++ b/app/views/redmine_wysiwyg_editor/_redmine_wysiwyg_editor_partial.html.erb
@@ -141,6 +141,17 @@ function initRedmineWysiwygEditor() {
       }
     });

+    if (ISSUE_TEMPLATE) {
+      var replaceTemplateValue = ISSUE_TEMPLATE.prototype.replaceTemplateValue;
+
+      ISSUE_TEMPLATE.prototype.replaceTemplateValue = function(obj) {
+        var self = this;
+
+        replaceTemplateValue.call(self, obj);
+        rwe.updateVisualContent();
+      }
+    }
+
     setVisible();
   };

taqueci commented 2 years ago

Hi @albrechtd

I have committed a workaround in branch feature/issue-templates. I hope you try it in your environment.

albrechtd commented 2 years ago

Hi @taqueci, thanks a lot for your enhancements! It works mostly:

select the “Textile” tab and change or clear the template: OK!
select the “Visual Editor” tab and change or clear the template: OK (and without the delay I introduced with my hack – much better!)
select the “Preview” tab and change or clear the template: this one doesn't work – the preview isn't updated, I have to select an other tab and switch back to see the changed template.

I still had to add templateNS.eraseSubjectAndDescription() to the template plugin's change event, but that is a different issue I think.

Anyway, I think your approach is the correct one!

taqueci commented 2 years ago

Hi @albrechtd

Thank you for your feedback! I will include the enhancement in the next release.

select the “Preview” tab and change or clear the template: this one doesn't work – the preview isn't updated, I have to select an other tab and switch back to see the changed template.

This behavior is the same as the case without WYSIWYG Editor plugin. For the maintenance reason, I decided that the visual editor follows the original behavior.

albrechtd commented 2 years ago

I will include the enhancement in the next release.

Cool, looking forward to it! Thanks a lot for quick your help!

select the “Preview” tab and change or clear the template: this one doesn't work – the preview isn't updated, I have to select an other tab and switch back to see the changed template.

This behavior is the same as the case without WYSIWYG Editor plugin. For the maintenance reason, I decided that the visual editor follows the original behavior.

I see, makes sense - I must admit that I never tried the templates without your plugin… If any of my colleagues complains, I think I now know how I could tweak that behavior. ;-)

taqueci / redmine_wysiwyg_editor

[Q] Interaction with the Issue Templates plugin #134

1.0.0