From fb4e80a1b1d56e92d8b5a5e27c6d1266c53b3591 Mon Sep 17 00:00:00 2001 From: Simon Legner Date: Thu, 17 Oct 2024 22:53:49 +0200 Subject: [PATCH] Move HtmlUtils from mmv.bootstrap to mmv module HtmlUtils is used for stripping HTML code. This is the responsibility of the individual UI components. More specifically, MultimediaViewerBootstrap.processParsoidThumb no longer strips HTML code. Various UI components were already calling HtmlUtils.htmlToTextWithLinks. Only the error case in MultimediaViewer.loadImage newly needs HTML stripping applied. Bug: T65504 Change-Id: If24b9c220a6ec43f35251a4ec6a716fd4ba03df6 --- bundlesize.config.json | 4 ++-- extension.json | 4 ++-- resources/mmv.bootstrap/mmv.bootstrap.autostart.js | 3 +-- resources/mmv.bootstrap/mmv.bootstrap.js | 7 ++----- resources/mmv.ui.reuse/mmv.EmbedFileFormatter.js | 3 ++- resources/{mmv.bootstrap => mmv}/mmv.HtmlUtils.js | 0 resources/mmv/mmv.js | 6 +++++- resources/mmv/model/mmv.model.License.js | 2 +- resources/mmv/ui/mmv.ui.canvas.js | 2 +- resources/mmv/ui/mmv.ui.description.js | 2 +- resources/mmv/ui/mmv.ui.metadataPanel.js | 2 +- resources/mmv/ui/mmv.ui.permission.js | 2 +- resources/mmv/ui/mmv.ui.truncatableTextField.js | 2 +- tests/qunit/mmv/mmv.HtmlUtils.test.js | 2 +- 14 files changed, 21 insertions(+), 20 deletions(-) rename resources/{mmv.bootstrap => mmv}/mmv.HtmlUtils.js (100%) diff --git a/bundlesize.config.json b/bundlesize.config.json index 9d4716295..a7e88849d 100644 --- a/bundlesize.config.json +++ b/bundlesize.config.json @@ -2,7 +2,7 @@ "modules": [ { "resourceModule": "mmv", - "maxSize": "24.6 kB" + "maxSize": "25.2 kB" }, { "resourceModule": "mmv.ui.restriction", @@ -18,7 +18,7 @@ }, { "resourceModule": "mmv.bootstrap", - "maxSize": "5.3 kB" + "maxSize": "4.8 kB" } ] } diff --git a/extension.json b/extension.json index 5448c682a..9dfa7c038 100644 --- a/extension.json +++ b/extension.json @@ -62,6 +62,7 @@ "mmv/provider/mmv.provider.ThumbnailInfo.js", "mmv/provider/mmv.provider.GuessedThumbnailInfo.js", "mmv/provider/mmv.provider.Image.js", + "mmv/mmv.HtmlUtils.js", "mmv/mmv.ThumbnailWidthCalculator.js", "mmv/ui/mmv.ui.js", "mmv/ui/mmv.ui.dialog.js", @@ -281,8 +282,7 @@ "mmv.bootstrap/mmv.bootstrap.autostart.js", "mmv.bootstrap/mmv.bootstrap.js", "mmv.bootstrap/mmv.lightboximage.js", - "mmv.bootstrap/mmv.Config.js", - "mmv.bootstrap/mmv.HtmlUtils.js" + "mmv.bootstrap/mmv.Config.js" ], "styles": [ "mmv.bootstrap/mmv.bootstrap.less" diff --git a/resources/mmv.bootstrap/mmv.bootstrap.autostart.js b/resources/mmv.bootstrap/mmv.bootstrap.autostart.js index 8806b73cc..d7f9bf0dc 100644 --- a/resources/mmv.bootstrap/mmv.bootstrap.autostart.js +++ b/resources/mmv.bootstrap/mmv.bootstrap.autostart.js @@ -21,10 +21,9 @@ const Config = require( './mmv.Config.js' ); const MultimediaViewerBootstrap = require( './mmv.bootstrap.js' ); const LightboxImage = require( './mmv.lightboximage.js' ); -const HtmlUtils = require( './mmv.HtmlUtils.js' ); const bootstrap = new MultimediaViewerBootstrap(); $( bootstrap.setupEventHandlers.bind( bootstrap ) ); -module.exports = { MultimediaViewerBootstrap, LightboxImage, Config, HtmlUtils }; +module.exports = { MultimediaViewerBootstrap, LightboxImage, Config }; diff --git a/resources/mmv.bootstrap/mmv.bootstrap.js b/resources/mmv.bootstrap/mmv.bootstrap.js index f62784502..f5d19919a 100644 --- a/resources/mmv.bootstrap/mmv.bootstrap.js +++ b/resources/mmv.bootstrap/mmv.bootstrap.js @@ -16,7 +16,6 @@ */ const Config = require( './mmv.Config.js' ); -const HtmlUtils = require( './mmv.HtmlUtils.js' ); const LightboxImage = require( './mmv.lightboximage.js' ); const { extensions } = require( './config.json' ); const mwRouter = require( 'mediawiki.router' ); @@ -332,7 +331,6 @@ class MultimediaViewerBootstrap { ); const title = mw.Title.newFromImg( $thumb ); let caption; - let $thumbCaption; if ( !this.isValidExtension( title ) ) { // Short-circuit event handler and interface setup, because @@ -349,8 +347,7 @@ class MultimediaViewerBootstrap { } if ( ( $thumbContainer.prop( 'tagName' ) || '' ).toLowerCase() === 'figure' ) { - $thumbCaption = $thumbContainer.find( 'figcaption' ); - caption = HtmlUtils.htmlToTextWithTags( $thumbCaption.html() || '' ); + caption = $thumbContainer.find( 'figcaption' ).html() || ''; } else { caption = $link.prop( 'title' ) || undefined; } @@ -482,7 +479,7 @@ class MultimediaViewerBootstrap { $thumbCaption.find( '.magnify' ).remove(); } - return HtmlUtils.htmlToTextWithTags( $thumbCaption.html() || '' ); + return $thumbCaption.html() || ''; } /** diff --git a/resources/mmv.ui.reuse/mmv.EmbedFileFormatter.js b/resources/mmv.ui.reuse/mmv.EmbedFileFormatter.js index 30825740b..678d6339d 100644 --- a/resources/mmv.ui.reuse/mmv.EmbedFileFormatter.js +++ b/resources/mmv.ui.reuse/mmv.EmbedFileFormatter.js @@ -15,7 +15,8 @@ * along with MediaViewer. If not, see . */ -const { Config, HtmlUtils } = require( 'mmv.bootstrap' ); +const { Config } = require( 'mmv.bootstrap' ); +const { HtmlUtils } = require( 'mmv' ); /** * Converts data in various formats needed by the Embed sub-dialog diff --git a/resources/mmv.bootstrap/mmv.HtmlUtils.js b/resources/mmv/mmv.HtmlUtils.js similarity index 100% rename from resources/mmv.bootstrap/mmv.HtmlUtils.js rename to resources/mmv/mmv.HtmlUtils.js diff --git a/resources/mmv/mmv.js b/resources/mmv/mmv.js index 620d3bfda..d76b0d73a 100644 --- a/resources/mmv/mmv.js +++ b/resources/mmv/mmv.js @@ -16,6 +16,7 @@ */ const { Config } = require( 'mmv.bootstrap' ); +const HtmlUtils = require( './mmv.HtmlUtils.js' ); const ViewLogger = require( './logging/mmv.logging.ViewLogger.js' ); const Api = require( './provider/mmv.provider.Api.js' ); const GuessedThumbnailInfo = require( './provider/mmv.provider.GuessedThumbnailInfo.js' ); @@ -265,7 +266,9 @@ class MultimediaViewer { if ( this.currentIndex === image.index ) { // Set title to caption or file name if caption is not available; // see setTitle() in mmv.ui.metadataPanel for extended caption fallback - this.ui.panel.showError( image.caption || image.filePageTitle.getNameText(), error ); + this.ui.panel.showError( image.caption ? + HtmlUtils.htmlToTextWithTags( image.caption ) : + image.filePageTitle.getNameText(), error ); } return $.Deferred().reject( error ); @@ -871,6 +874,7 @@ module.exports = { Description, Dialog, GuessedThumbnailInfo, + HtmlUtils, ImageInfo, ImageModel, ImageProvider, diff --git a/resources/mmv/model/mmv.model.License.js b/resources/mmv/model/mmv.model.License.js index 614005ed3..2ef483d1d 100644 --- a/resources/mmv/model/mmv.model.License.js +++ b/resources/mmv/model/mmv.model.License.js @@ -15,7 +15,7 @@ * along with MediaViewer. If not, see . */ -const { HtmlUtils } = require( 'mmv.bootstrap' ); +const HtmlUtils = require( '../mmv.HtmlUtils.js' ); /** * Class for storing license information about an image. For available fields, see diff --git a/resources/mmv/ui/mmv.ui.canvas.js b/resources/mmv/ui/mmv.ui.canvas.js index b770c67fd..de45039ff 100644 --- a/resources/mmv/ui/mmv.ui.canvas.js +++ b/resources/mmv/ui/mmv.ui.canvas.js @@ -15,7 +15,7 @@ * along with MediaViewer. If not, see . */ -const { HtmlUtils } = require( 'mmv.bootstrap' ); +const HtmlUtils = require( '../mmv.HtmlUtils.js' ); const ThumbnailWidthCalculator = require( '../mmv.ThumbnailWidthCalculator.js' ); const UiElement = require( './mmv.ui.js' ); diff --git a/resources/mmv/ui/mmv.ui.description.js b/resources/mmv/ui/mmv.ui.description.js index 0bc4a99a9..00e9af82d 100644 --- a/resources/mmv/ui/mmv.ui.description.js +++ b/resources/mmv/ui/mmv.ui.description.js @@ -15,7 +15,7 @@ * along with MultimediaViewer. If not, see . */ -const { HtmlUtils } = require( 'mmv.bootstrap' ); +const HtmlUtils = require( '../mmv.HtmlUtils.js' ); const UiElement = require( './mmv.ui.js' ); /** diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.js b/resources/mmv/ui/mmv.ui.metadataPanel.js index 4ffe17b1f..683979f07 100644 --- a/resources/mmv/ui/mmv.ui.metadataPanel.js +++ b/resources/mmv/ui/mmv.ui.metadataPanel.js @@ -15,7 +15,7 @@ * along with MultimediaViewer. If not, see . */ -const { HtmlUtils } = require( 'mmv.bootstrap' ); +const HtmlUtils = require( '../mmv.HtmlUtils.js' ); const Description = require( './mmv.ui.description.js' ); const UiElement = require( './mmv.ui.js' ); const MetadataPanelScroller = require( './mmv.ui.metadataPanelScroller.js' ); diff --git a/resources/mmv/ui/mmv.ui.permission.js b/resources/mmv/ui/mmv.ui.permission.js index 40b4dab94..6502c36f8 100644 --- a/resources/mmv/ui/mmv.ui.permission.js +++ b/resources/mmv/ui/mmv.ui.permission.js @@ -15,7 +15,7 @@ * along with MediaViewer. If not, see . */ -const { HtmlUtils } = require( 'mmv.bootstrap' ); +const HtmlUtils = require( '../mmv.HtmlUtils.js' ); const UiElement = require( './mmv.ui.js' ); const MetadataPanelScroller = require( './mmv.ui.metadataPanelScroller.js' ); diff --git a/resources/mmv/ui/mmv.ui.truncatableTextField.js b/resources/mmv/ui/mmv.ui.truncatableTextField.js index d2cca35c0..34260e39e 100644 --- a/resources/mmv/ui/mmv.ui.truncatableTextField.js +++ b/resources/mmv/ui/mmv.ui.truncatableTextField.js @@ -15,7 +15,7 @@ * along with MultimediaViewer. If not, see . */ -const { HtmlUtils } = require( 'mmv.bootstrap' ); +const HtmlUtils = require( '../mmv.HtmlUtils.js' ); const UiElement = require( './mmv.ui.js' ); /** diff --git a/tests/qunit/mmv/mmv.HtmlUtils.test.js b/tests/qunit/mmv/mmv.HtmlUtils.test.js index e046dc9f7..af6be0dfe 100644 --- a/tests/qunit/mmv/mmv.HtmlUtils.test.js +++ b/tests/qunit/mmv/mmv.HtmlUtils.test.js @@ -15,7 +15,7 @@ * along with MediaViewer. If not, see . */ -const { HtmlUtils } = require( 'mmv.bootstrap' ); +const { HtmlUtils } = require( 'mmv' ); ( function () { /* eslint-disable no-jquery/no-parse-html-literal */