Extension talk:VisualEditor/Flow

Please note that the Wikimedia Foundation does not provide support for installing VisualEditor on third-party wikis. However, if you have a question we may try to help.

I am currently working on a gadget to apply custom text colors in VisualEditor, but it is not working as expected. Specifically, when I select a color, the text does not change color, and only a tag is generated.

MediaWiki 1.39.0 PHP 7.4.33 (fpm-fcgi) VisualEditor 0.1.2 Issues When a color is selected, the text does not change color, and only a tag is generated. Console logs indicate that the annotation is being applied, but it does not reflect in the editor. Questions Is there an issue with my code, or are there any improvements that can be made? What is the correct way to apply custom text colors in VisualEditor?

Here is a summary of my code:

mw.loader.using([

    'ext.visualEditor.core',

    'ext.visualEditor.desktopArticleTarget.init',

    'ext.visualEditor.targetLoader',

    'ext.visualEditor.data'

]).then(function() {

    const toolGroup = document.querySelector(".oo-ui-toolbar-tools");

    if (toolGroup) {

        const newTool = document.createElement("span");

        newTool.className = "oo-ui-widget oo-ui-tool oo-ui-popupToolGroup";

        newTool.innerHTML = `

           

               

               

                字色

               

           

           

               

                   

                        <a class="oo-ui-tool-link" style="color: red;">赤</a>

                   

                   

                        <a class="oo-ui-tool-link" style="color: blue;">青</a>

                   

                   

                        <a class="oo-ui-tool-link" style="color: green;">緑</a>

                   

               

           

        `;

        const handle = newTool.querySelector('.oo-ui-popupToolGroup-handle');

        const tools = newTool.querySelector('.oo-ui-popupToolGroup-tools');

        handle.addEventListener('click', () => {

            const isExpanded = handle.getAttribute('aria-expanded') === 'true';

            handle.setAttribute('aria-expanded', !isExpanded);

            tools.style.display = isExpanded ? 'none' : 'block';

        });

        newTool.querySelectorAll('.oo-ui-tool[data-color]').forEach(colorTool => {

            colorTool.addEventListener('click', () => {

                const color = colorTool.dataset.color;

                const veTarget = ve.init.target;

                if (!veTarget) return;

                const surface = veTarget.getSurface();

                if (!surface) return;

                const fragment = surface.getModel().getFragment();

                if (!fragment.getText()) return;

                const annotation = new ve.dm.TextStyleAnnotation({

                    type: 'textStyle/span',

                    attributes: {

                        style: `color: ${color};`

                    }

                });

               

                fragment.annotateContent('set', annotation);

                tools.style.display = 'none';

                handle.setAttribute('aria-expanded', 'false');

            });

        });

        toolGroup.appendChild(newTool);

    }

});

If the topic is off or if any information is missing, I apologize in advance.

Any help would be greatly appreciated. Thank you!

I also asked this at the Help Desk (this is an exact copy of the question asked there):

So i've trying to install the VisualEditor extension and keep running into the same problem. After I install parsoid and visual editor I keep getting the following error:

Error loading data from server:ve-api:Revision IDs (doc=0,api=2). returned by server do not match. Would you like to retry?

Googling the error leads to page telling me to install parsoid, which is installed.

running:

Ubuntu Linux 14.04.3 LTS 64-bit

Mediawiki 1.26.2

Php 5.6.21 (fpm-fcgi)

Visual Editor -- correct branch for 1.26

nodejs v0.10.25

Tried installing on three different wikis and always the same error.

I've tried having the settings.js be both the actual api & http://localhost:8142

I get a curl error if it's set to localhost, but with api I get the revision id error.

In the localsettings.php I have:

url => as the actual api

prefix is set to localhost, but I've also tried other terms (mediawiki).

So far I've, I think, I've tried all the different suggestions on:

Extension:VisualEditor

Parsoid

Parsoid/Setup

Parsoid/Installing Node

Parsoid/Troubleshooting#Configuration

Also outside of Mediawiki I've tried these suggestions:

http://edutechwiki.unige.ch/en/VisualEditor

Any help would be greatly valued. Thanks

I'm also having the same issue, did you manage to solve it?

No such luck. No one's replied, except for you. Was going to investigate it more this coming weekend. I'm thinking it's most likely some type of path issue, but I could be completely wrong (& most likely I am). But if I find a solution I'll post it here. Please do the same if you find the answer.

Of course, will post if I find something.

Got it to work, make sure your $wgVirtualRestConfig['modules']['parsoid'] - url, points towards http://Example:8083 This port can probably be chosen to whatever as long as it is not blocked in the firewall and as long as it corresponds to the one you set in ../parsoid/localsettings.js with the command parsoidConfig.serverPort = 8083;.

This was the issue for me, the uri in localsettings.js should still point towards http://example/mediawiki/api.php without specifying a port. Other than this make sure you have loadWMF = true and useSelser = true in ../parsoid/localsettings.js aswell

Hope this helps!

To solve this I just opened it in the "Edit source" mode, saved it, then was able to save it with VisualEditor again.

My wiki's style keeps reverting to the default active skin's CSS, even though I've modified both the Vector.css and Common.css. In fact, this happens even when using other skins. I have to resort to refreshing the page with CTRL + SHIFT + R, which is obviously not a sustainable solution.

I've noticed that disabling the VisualEditor in LocalSettings.php fixes the issue. So, I'm wondering: is there a cache file for VisualEditor that's causing the original CSS to reappear whenever I reload the page?

This problem has been driving me crazy for a week.

Please help!

My wiki: sonic-city.net/wiki

I have a personal wiki running on mediawiki and don't think I really need to track the page edit summary or whatsoever, so is there anyway to skip it? which means when I am done with editing on a page and click on Save, it just Save the page without asking me to describe what I changed..

Thank you!

Same here, it would be a nice option

Did u find a way to this problem or is it still unsolved?

Not yet.

Looking for this as well.

Would appreciate a solution for this as well!

Hello all,

I have had a quick look at this, and decided it was too much of a specific hack. But for all of you asking this question, see the file:

 VisualEditor/modules/ve-mw/init/targets/ve.init.mw.ArticleTarget.js

where you will find this function:

 ve.init.mw.ArticleTarget.prototype.showSaveDialog

and I'm pretty sure that is where the magic happens. It isn't just a simple case of saying "skip the dialogue" because there are numerous messages that are handled.

HtH,

DanShearer (talk) 01:25, 11 December 2022 (UTC)

Adding this at the beginning of ve.init.mw.ArticleTarget.prototype.showSaveDialog

this.save(this.getDocToSave(), this.getSaveOptions());

this.tryTeardown(true);

return;

Seems to save the changes without annoying popup and leave the editing mode. But it still requires a manual page refresh (or clicking the Page tab) to see the saved changes.

A better way is to replace

`var openPromise = windowAction.open( 'mwSave', data, action );` with `var openPromise = windowAction.open( 'mwSave', data, 'save' );`

This opens the pop-up, but closes it again immediately and the user is taken back to the reading view without having to refresh the page. The briefly opened pop-up bothers me less than having to manually switch back to the reading view.

Read tab, not the Page tab

Well both are fine actually ;-)

I am facing a strange issue on my wiki. After saving the content once without refresing the page the subsequent edits are not saved. No actions takes place on clicking the save button of the save changes dialog box tinyurl.com/2ypssbqd

I am using mediawiki 1.40.0-wmf.25

Kindly help!

Product	Version
MediaWiki	1.36.1
PHP	7.4.20 (fpm-fcgi)
MariaDB	10.5.11-MariaDB
ICU	67.1
Lua	5.1.5
Elasticsearch	6.8.16

I had this error with 1.36.0 so I upgraded to 1.36.1 and still have it sometimes. It is a small private wiki farm. One way I can consistently cause the error is to use the VisualEditor on my User page. It does work on other pages though which is strange.

I have $wgGroupPermissions['user']['writeapi'] = true; set for all wikis in the farm.

I have the follow example in my vhost with the rewrite rules

<VirtualHost *:443>
   ServerAdmin webmaster@un9.io
   DocumentRoot [redacted]
   ServerName mitm.un9.io

   AllowEncodedSlashes NoDecode

   SSLEngine on
   Include /etc/letsencrypt/options-ssl-apache.conf
   SSLCertificateChainFile /etc/letsencrypt/live/un9.io/chain.pem
   SSLCertificateFile /etc/letsencrypt/live/un9.io/cert.pem
   SSLCertificateKeyFile /etc/letsencrypt/live/un9.io/privkey.pem

   RewriteEngine On
   RewriteRule ^/(.*):(.*) /index.php/$1:$2
   <Directory [redacted]>
      AllowOverride AuthConfig FileInfo Limit Options=FollowSymLinks
      Require all granted
      RewriteBase /
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteRule ^(.*) /index.php/$1 [L,QSA]
   </Directory>
</VirtualHost>

I enabled debug logging and code this

[http] HTTP complete: GET https://mitm.un9.io/rest.php/mitm.un9.io/v3/page/html/User%3ATestUser/16?redirect=false&stash=true code=400 size=194 total=0.887740 connect=0.530200
[VisualEditor] ApiParsoidTrait::requestRestbase: Received HTTP 400 from RESTBase

I've not seen errors in apache or php-fpm logs or audit/setroubleshoot logs. It looks a bit strange to me to see the domain in the URL twice. Is that because of the rewrite rules and how do I fix it.

Thanks

No wiki farm on my end, but getting the HTTP 400 error as well on my single wiki running 1.36.1. NGINX web server. Also getting the same debug log code as you. I'll post more if I find any resolution.

Edit: Specifically, it works when creating a new page, but it doesn't work when editing an existing page. See mention of it here: https://www.mediawiki.org/w/index.php?title=Topic:Vunt92vkiyisn8cu&topic_showPostId=vupnmgwaasz9pvfm#flow-post-vupnmgwaasz9pvfm

One consistent way I found so far, is editing my user page - I always get the error

Same issue here on 1.35.6 downloaded today (no added extensions installed, no short URLs, default config from the installer), not on a farm, same message also:

ApiParsoidTrait::requestRestbase: Received HTTP 400 from RESTBase

VE of course was from the installer package, so no mismatched packages or anything weird going on there either.

MediaWiki	1.35.6
PHP	7.4.25 (cgi-fcgi)
MySQL	8.0.28-0ubuntu0.20.04.3

Adding to hosts file ie; /etc/hosts on Linux, fixed it until the solution is known

127.0.0.1 yourwikidomain.com

Adding my external hostnames to /etc/hosts (mapping them to 127.0.0.1) fixed this for me. If the local server cannot resolve its own public-facing hostname+domain, then VisualEditor fails in this way. In my case, I was iterating on a new server build to upgrade from 1.27 to 1.38, and I kept hitting this problem because my host is not yet officially deployed, with DNS updated appropriately.

Alas, this did not fix for me on MW 1.38

I noticed in the apache2 access log that it was trying to get /wiki/rest.php/https(link)://my.fullqualifiedwiki.domain/v3/page/html/Main_page instead of /wiki/rest.php/my.fullqualifiedwiki.domain/v3/page/html/Main_page (there is no"(link)" but I'm trying to get around the "abusefilter-warning-linkspam")

So in LocalSettings.php I added 'domain' => 'my.fullyqualifiedwiki.domain' to the

$wgVirtualRestConfig['modules']['parsoid'] = array(
    'url' => $wgServer . $wgScriptPath . '/rest.php',
    'domain' => 'my.fullyqualifiedwiki.domain',
);

This worked for me.

My wiki fixed after add text to Nginx config files srrver block. location /rest.php/ { try_files $uri $uri/ /zw/rest.php?$query_string; }

Hi!

This is a very good extension, but it should be even better!

Is there any hope that the developers will add a function to change the color of the text?

@Derek Jones Smr: Usually that's done with templates created on individual wikis, such as {{Green }}, {{Red }}, etc.

Of course, it's a bit easier with templates. Thanks!

But as a basic functionality of the add-on itself, it would be even better

I add internal link to some namespace page using widget. This widget insert link with text "Namespace:Page". Where is option or extension that will add link without namespace in text? Just "Page".

Visual Editor allows you to use a custom label for any link, though I'm guessing you want the label to be added automatically, right? In that case, you may be better off using the DisplayTitle extension to customise the link label for any wiki page (provided that the page exists on the wiki).

How do I activate this for Wiktionary?

How do I allow my users to choose wikitext/source-edit or VisualEditor AND use the wikitext/source-edit by default, not VisualEditor?

My users like VisualEditor, but it isn't always the right feature for editing pages that are primarily transclusions or conditional code. I would like MediaWiki to default to using "Edit Source" aka raw wikitext, but still keep the option to click the (Visual) "Edit" button to switch to VisualEditor.

I have tried many things in settings, but most just seem to remove the option for using VisualEditor entirely.

On all existing pages, things work fine: There are two buttons shown:

• "Edit" (VisualEditor) and
• "Edit source" (wikitext).

Users may click whichever button they prefer. However, following a redlink (URL ends in ./{pagename}&action=edit&redlink=1) always opens up a page in VisualEditor and furthermore does not allow the user to switch to "Edit source". Source editing button does not work

Thank you for your time.

P.S. I am using Skin:Citizen, a known compatible skin.