Taiga-front: Add edit button to wiki pages, remove click on entire page

[saelfaer]

A wiki works as sort of a documentation of your project.
it is therefor bound to happen that you are going to add details in the wiki page that others can and will have to copy to clipboard. It is very cumbersome to do so if clicking the entire page switches into the edit view of that wiki page.

you can easily change this by removing the entire page click, adding the edit action onto a button at the top and or bottom of the page, and perhaps even integrate previously suggested keybindings to activate the edit mode. (issue #219)

[superalex]

Thanks for your suggestion @saelfaer we will study it with the UX & design people! ;)

[Loubz]

+1 on this one.

[Rob-bb]

I see this was marked as an enhancement 1 year ago. Any progress on this? It really is quite annoying to be going in to edit mode with a click on the page. I haven't looked at the code yet but I doubt it is hard to change.

[superalex]

Hello @rob-bb,

I'm sorry but still had no time to improve this area.

Regards!,

[Rob-bb]

Ok, can you give me an idea on where to start looking?

[superalex]

Before starting to develop it would be great to have this two steps (as it affects the UI and design of Taiga):

User Experience The functionality will require some wireframes or ideas to be developed correctly. A good UX its an essential part of Taiga success.

Design The design should respect the Taiga style. Try to reproduce other areas of the site.

After these two steps the development step could start based on https://github.com/taigaio/taiga-front/tree/master/app/coffee/modules/wiki and https://github.com/taigaio/taiga-front/tree/master/app/partials/wiki

Regards!,

[Rob-bb]

I wasn't thinking too far ahead :-)

there is already an edit icon, a pen the pops up when someone mouses over the wiki text, my thoughts were the person must click on this icon rather than the whole text page. Any way I will probably have a look around this coming weekend.

Cheers,

[superalex]

@Xaviju @elhombretecla any comments about it? :)

[Xaviju]

Thanks @rob-bb

@superalex To me this is a biggest Story related to the whole WYSIWYG: https://tree.taiga.io/project/taiga/us/2114?kanban-status=27
I would be happy to see a proposal to improve the edition but probably not only moving the click to the tiny hidden icon.

[Rob-bb]

I am curious as to why the team does not want to use an edit button? Given that you already have the edit icon become visible when the mouse moves over the wiki text, why not make it the 'edit button'. I feel like I am missing something in the design concept? I do like the click to edit for the users stories however, I guess it's the size of wiki entries on the screen and that I like using the mouse to highlight and copy text on the wiki.

[Xaviju]

Hi @rob-bb we are not against the edit button but we decided to make it that way. My opinion is that a hidden tiny button in top left corner of the screen is not a good idea if we want to avoid the click on the text itself.
What I say is that Taiga could change its UI/UX, but removing the click from the text and leave it in the icon it is not enough for me. I did not have the time to make a exploration on how to solve that better but there are probably tons of examples of inline editing solutions and we could agree on a better one.
Your use case is very common, and we want to improve Taiga, as well as saving and editing text actions, so a fresh idea will be welcome :)

[Rob-bb]

I assume you have tried and then rejected a double click to edit?

[Xaviju]

No, we did not tried because double click is a bad practice in web development (although used in desktop environments, specially Windows).
Quoting Jakob Nielsen

In the future, however, double-click must die since it causes novice users great difficulties and since it conflicts with the single-click interaction style of the Web.
https://www.nngroup.com/articles/when-to-open-web-based-applications-in-a-new-window/

[Rob-bb]

What is the case against having a bigger more obvious edit button and no click on the text, or what is the case for having a click on the text = enter edit mode? Once a user has accidentally entered edit mode it's as hard to get out of it as it would be to enter with a little button. I just think it makes more sense that it is harder to enter edit mode than it is now.

Could it be a configurable option? People who prefer a click to enter could still have it that way, others could have it use a specific button?

And to make it more difficult I actually like that a single click on a user story goes to edit mode, just not in the wiki :-)

[adis-io]

Sorry, didn't read all messages, but I think there is already edit button, so no need for triggering edit page action when I click description text.

[Kels]

Hello, after another year, have you figure out this UI/UX issue ?
It's quite annoying when you have links into yours wiki pages.
Sometime the editor appears instead of following the link.

[TravisNutting]

I would like to +1 this as well

[wonson]

just double click would be also fine

[achiinto]

I think this feature is very important, I dont know if I am doing this wrong. I just want to click on a link on the wiki page. Instead of opening the link, it went to edit mode. Does that not make the whole wiki session unusable?

[Rob-bb]

Wow, THREE years and still they cant do this.

[saelfaer]

easy there, they most likely can but either don't see it as a priority or don't like the idea.
in case it's not their priority it would help if you open a PR and take away some of the burden for them...
obviously if it's the feature itself they don't like then there is nothing for us to do here.

[achiinto]

Okay, so to clarify the issue I have clicking link which would jump into edit mode, not opening the link, it only occur if you are in Markdown mode. Changing back to HTML mode would fix the issue.

[oderwat]

I would love the following:

A possibility to change the "single click" for editing any editable text field to a double click (or tap). I really hate, that I can't easily mark text without switching into edit mode all the time!

We can teach our people to double click for editing easily and having it optional would not change how it works for people which like the current way.

I also would love to have a hotkey for the "save" action (like shift return or alt return or even ctrl + s).

[haswalt]

I can't even highlight to copy something out of our wiki pages due to the first clicking automatically turning to edit mode.

We're having to move our wiki content to our GitLab instance because it's unusable day to day otherwise.

Would love to see this wiki improved to be on a feature par with the likes of GitLab and GitHub wikis

[raphaelyancey]

This UX design issue leave the wiki pages almost unusable, would love at least a hotfix or a workaround on this.

[wonson]

4 YEARS.

Just come here to celebrate the issues' 4 year anniversary.

I cannot understand why they insist on this crap UX design.

[Rob-bb]

Wohoo. 4 More Years, 4 More Years

[Gim6626]

Yesterday faced this trouble and found this thread. Spend half a day to find a workaround - I decided to make editor open by mouse double click.

Here is two patches - first is to Taiga front code, second is to npm dependency module "Medium Editor", both should be applied to development installation (see https://taigaio.github.io/taiga-doc/dist/setup-development.html) after npm install:

1. Change edit mode opening event at wysiwyg.directive.coffee from app/modules/components/wysiwyg/:

--- a/app/modules/components/wysiwyg/wysiwyg.directive.coffee
+++ b/app/modules/components/wysiwyg/wysiwyg.directive.coffee
@@ -514,7 +514,7 @@ Medium = ($translate, $confirm, $storage, wysiwygService, animationFrame, tgLoad
                 wysiwygCodeHightlighterService.addHightlighter(mediumInstance.elements[0])
                 refreshCodeBlocks(mediumInstance)

-        $(editorMedium[0]).on 'mousedown', (e) -> 
+        $(editorMedium[0]).on 'dblclick', (e) ->
             if e.target.href
                 e.preventDefault()
                 e.stopPropagation()

1. Disable toolbar when not in edit mode in medium-editor.js from node_modules/medium-editor/dist/js/ (or if you need source go to node_modules/medium-editor/src/js/extensions/toolbar.js):

--- ./node_modules/medium-editor/dist/js/medium-editor.js.orig  2019-05-30 08:20:39.749254817 +0000
+++ ./node_modules/medium-editor/dist/js/medium-editor.js       2019-05-30 09:39:39.122343275 +0000
@@ -6113,6 +6113,18 @@
         },

         showToolbar: function () {
+            let editors = this.document.getElementsByClassName('editor');
+            let found = false;
+            let i;
+            for (i = 0; i < editors.length; ++i) {
+                if (editors[i].className.includes('edit-mode')) {
+                   found = true;
+                   break;
+                }
+            }
+            if (!found) {
+                return;
+            }
             clearTimeout(this.hideTimeout);
             if (!this.isDisplayed()) {
                 this.getToolbarElement().classList.add('medium-editor-toolbar-active');

Then run gulp and go to your Taiga website, it should work.

P.S.: Since WYSIWYG component is common for Wiki, Issues, US etc, this fix will make all editors for all these entities work in a new way.

[stale[bot]]

We have been doing some housecleaning work prior to Taiga6 upcoming release and we are rejecting old issues that we didn't correctly attend back then. Since Taiga6 brings a significant UX/UI rework, we encourage you to wait and see if Taiga6 satisfies this need and open a new issue if that's not the case. This time we will make sure to review it when it comes through. Thank you very much on behalf of the Taiga Team!

[stale[bot]]

Closed