umberto 9.0.0 → 9.1.0

package/scripts/utils/gloria-after-post-render/append-copy-heading-buttons.js

@@ -0,0 +1,119 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+const { parseDocument } = require( 'htmlparser2' );
+const { Element } = require( 'domhandler' );
+const { selectAll, selectOne } = require( 'css-select' );
+const {
+	getAttributeValue,
+	appendChild,
+	removeElement,
+	replaceElement,
+	textContent
+} = require( 'domutils' );
+
+const createPrerenderPugTemplate = require( '../pug-renderer/create-prerender-pug-template' );
+
+/**
+ * Renders the button using Pug template.
+ */
+const renderButton = createPrerenderPugTemplate( {
+	requires: [
+		'_components/svg/index',
+		'_components/icon/index',
+		'_components/tooltip-popover/index',
+		'_components/heading-link/index'
+	],
+	component: 'heading-link',
+	componentAttrs: {
+		mask: [ 'headingId' ]
+	}
+} );
+
+module.exports = function appendCopyHeadingButtons( doc ) {
+	// Do not process h1 tags as it's processed further by Umberto and may be removed.
+	for ( const heading of selectAll( 'h2, h3, h4, h5, h6', doc ) ) {
+		if ( hasClassOrParentWithClass( heading, 'no-transform' ) ) {
+			continue;
+		}
+
+		removeAllEmptyAnchors( heading );
+
+		const headingId = getAttributeValue( heading, 'id' );
+		const container = new Element( 'div', { class: 'doc b-heading' } );
+
+		// Create the copy button from the Pug template and parse it into nodes.
+		const buttonHtml = renderButton( { headingId } );
+		const buttonNodes = parseFragmentElements( buttonHtml );
+
+		// Put the container where the heading was, then move heading and append the button.
+		replaceElement( heading, container );
+		appendChild( container, heading );
+		for ( const n of buttonNodes ) {
+			appendChild( container, n );
+		}
+	}
+
+	return doc;
+};
+
+/**
+ * Removes all empty anchors that were created to hold the heading links buttons.
+ * "Empty" = no element children AND text content (after trimming and removing a single '#') is empty.
+ */
+function removeAllEmptyAnchors( heading ) {
+	for ( const a of selectAll( 'a', heading ) ) {
+		const hasElementChildren = ( a.children || [] ).some( c => c && c.type === 'tag' );
+		const text = ( textContent ? textContent( a ) : getTextFallback( a ) ).trim().replace( '#', '' );
+
+		if ( !hasElementChildren && !text ) {
+			removeElement( a );
+		}
+	}
+}
+
+/**
+ * Checks if the element itself or any of its parents has the specified class.
+ */
+function hasClassOrParentWithClass( el, className ) {
+	for ( let n = el; n; n = n.parent ) {
+		const cls = getAttributeValue( n, 'class' );
+		if ( cls && cls.split( /\s+/ ).includes( className ) ) {
+			return true;
+		}
+	}
+	return false;
+}
+
+/**
+ * Parses an HTML fragment into an array of element nodes (skips stray text nodes/whitespace).
+ */
+function parseFragmentElements( html ) {
+	const frag = parseDocument( html );
+	const body = selectOne( 'body', frag );
+	const nodes = body ? body.children : frag.children;
+
+	return ( nodes || [] ).filter( n => n && n.type === 'tag' );
+}
+
+/**
+ * Small fallback in case domutils.textContent isn't available.
+ */
+function getTextFallback( node ) {
+	let out = '';
+	if ( !node || !node.children ) {
+		return out;
+	}
+	for ( const ch of node.children ) {
+		if ( ch.type === 'text' && typeof ch.data === 'string' ) {
+			out += ch.data;
+		} else if ( ch.children && ch.children.length ) {
+			out += getTextFallback( ch );
+		}
+	}
+	return out;
+}

package/scripts/utils/gloria-after-post-render/apply-design-doc-classes.js

@@ -0,0 +1,157 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+const { selectAll } = require( 'css-select' );
+const { getAttributeValue } = require( 'domutils' );
+
+/**
+ * Global mapping of HTML elements to their corresponding design system classes.
+ */
+const ELEMENTS_CLASSES_MAPPINGS = {
+	'h1': [ 'b-h1' ],
+	'h2': [ 'b-h2' ],
+	'h3': [ 'b-h3' ],
+	'h4': [ 'b-h4' ],
+	'h5': [ 'b-h5' ],
+	'h6': [ 'b-h6' ],
+	'a': [ 'b-link' ],
+
+	// Text formatting elements
+	'p': [ 'b-paragraph' ],
+	'strong': [ 'b-bold' ],
+	'b': [ 'b-bold' ],
+	'em': [ 'b-italic' ],
+	'i': [ 'b-italic' ],
+	'code': [ 'b-inline-code' ],
+	'pre': [ 'b-code-block' ],
+	'blockquote': [ 'b-quote' ],
+	'hr': [ 'b-separator' ],
+	'span': [ 'b-text' ],
+	'small': [ 'b-small-text' ],
+	'sub': [ 'b-subscript' ],
+	'sup': [ 'b-superscript' ],
+
+	// List elements
+	'ul': [ 'b-list', 'b-list--unordered' ],
+	'ol': [ 'b-list', 'b-list--ordered' ],
+	'li': [ 'b-list__item' ],
+	'dl': [ 'b-description' ],
+	'dt': [ 'b-description__term' ],
+	'dd': [ 'b-description__details' ],
+
+	// Details
+	'details': [ 'b-details' ],
+	'summary': [ 'b-reset-button', 'b-details__summary' ],
+
+	// Table elements
+	'table': node => {
+		const variant = getAttributeValue( node, 'data-variant' ) || 'striped';
+
+		return [ 'b-table', `b-table--${ variant }` ];
+	},
+	'thead': [ 'b-table__header' ],
+	'tbody': [ 'b-table__body' ],
+	'tr': [ 'b-table__row' ],
+	'td': [ 'b-table__cell' ],
+	'th': [ 'b-table__cell', 'b-table__cell-header' ],
+
+	// Image and media elements
+	'img': [ 'b-image' ],
+	'figure': [ 'b-figure' ],
+	'figcaption': [ 'b-figure-caption' ],
+	'iframe': [ 'b-iframe' ],
+
+	// Accessibility elements
+	'kbd': [ 'c-keyboard-shortcut', 'c-keyboard-shortcut--raised' ],
+	'mark': [ 'b-highlight' ]
+};
+
+/**
+ * Classes that are allowed to be added to elements with existing classes.
+ */
+const ELEMENTS_WITH_WHITELIST_CLASSES = [
+	'headerlink'
+];
+
+/**
+ * Add design system classes to the parsed document elements. If element has 0 CSS classes
+ * it'll be considered as not styled and the design system classes will be applied.
+ *
+ * @param doc - The parsed document to apply design classes to.
+ */
+module.exports = function applyDesignDocClasses( doc ) {
+	// Apply classes based on the global mapping.
+	for ( const [ selector, classesOrCallback ] of Object.entries( ELEMENTS_CLASSES_MAPPINGS ) ) {
+		for ( const element of selectAll( selector, doc ) ) {
+			if ( hasClassOrParentWithClass( element, 'no-transform' ) ) {
+				continue;
+			}
+
+			// Add the 'doc' class to each element that gets styled.
+			addClass( element, 'doc' );
+
+			const classList = getClasses( element ).filter( className => !ELEMENTS_WITH_WHITELIST_CLASSES.includes( className ) );
+
+			// Avoid applying classes to elements that already have one non-whitelisted class
+			// (besides 'doc' which we just added).
+			if ( classList.length > 1 ) {
+				continue;
+			}
+
+			const classesToAdd = typeof classesOrCallback === 'function' ?
+				classesOrCallback( element ) :
+				classesOrCallback;
+
+			addClass( element, classesToAdd.join( ' ' ) );
+		}
+	}
+
+	return doc;
+};
+
+/**
+ * Checks if the element itself or any of its parents has the specified class.
+ *
+ * @param element - The DOM element to check.
+ * @param className - The class name to look for.
+ * @returns True if the element or any parent has the class, false otherwise.
+ */
+function hasClassOrParentWithClass( element, className ) {
+	for ( let node = element; node; node = node.parent ) {
+		if ( node.attribs?.class?.includes( className ) ) {
+			return true;
+		}
+	}
+
+	return false;
+}
+
+/**
+ * Adds class to a DOM element.
+ *
+ * @param element - The DOM element.
+ * @param className - Class name to add.
+ */
+function addClass( element, className ) {
+	const existing = getClasses( element );
+
+	if ( !existing.includes( className ) ) {
+		existing.push( className );
+		element.attribs.class = existing.join( ' ' );
+	}
+}
+
+/**
+ * Gets classes of a DOM element.
+ *
+ * @param element - The DOM element.
+ * @returns Array of class names.
+ */
+function getClasses( element ) {
+	const existing = getAttributeValue( element, 'class' ) || '';
+	return existing.split( /\s+/ ).filter( Boolean );
+}

package/scripts/utils/gloria-after-post-render/wrap-table-into-wrappers.js

@@ -0,0 +1,25 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+const { Element } = require( 'domhandler' );
+const { selectAll } = require( 'css-select' );
+const { replaceElement, appendChild, isTag, getName } = require( 'domutils' );
+
+module.exports = function wrapTableIntoWrappers( doc ) {
+	for ( const table of selectAll( 'table', doc ) ) {
+		const parent = table.parent;
+		const parentIsFigure = isTag( parent ) && getName( parent ).toUpperCase() === 'FIGURE';
+
+		if ( !parentIsFigure ) {
+			const figure = new Element( 'figure', { class: 'doc b-table-wrapper' } );
+			replaceElement( table, figure );
+			appendChild( figure, table );
+		}
+	}
+
+	return doc;
+};

package/scripts/utils/inline-svg.js

@@ -5,148 +5,117 @@
 
 'use strict';
 
-const cheerio = require( 'cheerio' );
 const fs = require( 'fs' );
 const path = require( 'path' );
-
-const HexoManager = require( '../../src/hexo-manager' );
-
-/**
- * Cache for parsed SVG elements.
- */
-const SVG_CACHE = new Map();
-
-module.exports = function inlineSvg( str, isDocument = true ) {
-	const $ = cheerio.load( str, null, isDocument );
-
-	// Find all elements with data-inline-svg-image attribute.
-	$( '[data-inline-svg-image]' ).each( function() {
-		const element = $( this );
-		const svgPath = element.attr( 'data-inline-svg-image' );
-		const fillColor = element.attr( 'data-inline-svg-fill-color' );
-		const trimDimensions = element.attr( 'data-inline-svg-trim-dimensions' ) !== undefined;
-		const title = element.attr( 'data-inline-svg-title' );
+const { parseDocument } = require( 'htmlparser2' );
+const { Element, Text } = require( 'domhandler' );
+const { selectAll, selectOne } = require( 'css-select' );
+const { getAttributeValue, hasAttrib, replaceElement, appendChild, prependChild } = require( 'domutils' );
+
+module.exports = function inlineSvg( doc, themeDir ) {
+	for ( const el of selectAll( '[data-inline-svg-image]', doc ) ) {
+		const svgPath = getAttributeValue( el, 'data-inline-svg-image' );
+		const fillColor = getAttributeValue( el, 'data-inline-svg-fill-color' );
+		const trimDimensions = hasAttrib( el, 'data-inline-svg-trim-dimensions' );
+		const title = getAttributeValue( el, 'data-inline-svg-title' );
 
 		// Construct the absolute path to the SVG file.
 		// Assuming the path is relative to the Hexo root.
-		const absolutePath = path.join( HexoManager.hexo.theme_dir, svgPath );
+		const absolutePath = path.join( themeDir, svgPath );
 
 		// Read the SVG file content
 		if ( !fs.existsSync( absolutePath ) ) {
 			console.warn( `SVG file not found: ${ absolutePath }` );
-			return;
+			continue;
 		}
 
-		// Generate a cache key based on file path, fill color, trim dimensions and title
-		const cacheKey = JSON.stringify( {
-			path: absolutePath,
-			fillColor: fillColor || 'default',
-			trimDimensions,
-			title: title || null
-		} );
+		// Parse the SVG.
+		const svgContent = fs.readFileSync( absolutePath, 'utf8' );
+		const svgDoc = parseDocument( svgContent, { xmlMode: true } );
+		const svgRoot = selectOne( 'svg', svgDoc );
 
-		let $svg;
-
-		// Try to get the SVG from cache first.
-		if ( SVG_CACHE.has( cacheKey ) ) {
-			$svg = SVG_CACHE.get( cacheKey );
-		} else {
-			// Parse the SVG.
-			const svgContent = fs.readFileSync( absolutePath, 'utf8' );
-
-			$svg = cheerio.load( svgContent, { xmlMode: true } )( 'svg' );
-
-			// Apply fill color if specified.
-			if ( fillColor ) {
-				applyFillColor( $, $svg, fillColor );
-			}
-
-			// Remove width and height if trimDimensions is true
-			if ( trimDimensions ) {
-				trimSvgDimensions( $, $svg );
-			}
+		// Apply fill color if specified.
+		if ( fillColor ) {
+			applyFillColor( svgRoot, fillColor );
+		}
 
-			// Add title if specified
-			if ( title ) {
-				addTitle( $, $svg, title );
-			}
+		// Remove width and height if trimDimensions is true
+		if ( trimDimensions ) {
+			trimSvgDimensions( svgRoot );
+		}
 
-			// Store in cache.
-			SVG_CACHE.set( cacheKey, $svg );
+		// Add title if specified
+		if ( title ) {
+			addTitle( svgRoot, title );
 		}
 
 		// Copy original element's attributes to SVG.
-		const elementAttributes = element.attr();
-		let svgCloned = false;
-
-		for ( const attr in elementAttributes ) {
-			if ( attr.startsWith( 'data-inline-svg-' ) ) {
+		for ( const [ name, value ] of Object.entries( el.attribs ) ) {
+			if ( name.startsWith( 'data-inline-svg-' ) ) {
 				continue;
 			}
 
-			if ( !svgCloned ) {
-				$svg = $svg.clone();
-				svgCloned = true;
-			}
-
-			$svg.attr( attr, elementAttributes[ attr ] );
+			svgRoot.attribs[ name ] = value;
 		}
 
-		// Replace the original element with the SVG.
-		element.replaceWith( $svg.toString() );
-	} );
+		// Replace the original element with the prepared <svg>.
+		replaceElement( el, svgRoot );
+	};
 
-	$( '[data-inline-svg-image]' ).removeAttr( 'data-spritesheet-svg' );
+	for ( const el of selectAll( '[data-inline-svg-image]', doc ) ) {
+		delete el.attribs[ 'data-spritesheet-svg' ];
+	}
 
-	return $.html();
+	return doc;
 };
 
 /**
- * Applies fill color to an SVG element.
+ * Applies fill color to an SVG element (root and any descendant with [fill]).
+ * Uses css-select for querying and direct attrib updates for speed.
  */
-function applyFillColor( $, $svg, fillColor ) {
+function applyFillColor( svg, fillColor ) {
 	// Replace all fill attributes with the specified color.
-	$svg.find( '[fill]' ).each( function() {
-		$( this ).attr( 'fill', fillColor );
-	} );
+	for ( const node of selectAll( '[fill]', svg ) ) {
+		node.attribs.fill = fillColor;
+	}
 
 	// Also check the root SVG for fill attribute.
-	if ( $svg.attr( 'fill' ) ) {
-		$svg.attr( 'fill', fillColor );
+	if ( hasAttrib( svg, 'fill' ) ) {
+		svg.attribs.fill = fillColor;
 	}
-
-	return $svg;
 }
 
 /**
  * Removes width and height attributes from SVG elements.
  */
-function trimSvgDimensions( $, $svg ) {
-	$svg.removeAttr( 'width' );
-	$svg.removeAttr( 'height' );
-	return $svg;
+function trimSvgDimensions( svg ) {
+	delete svg.attribs.width;
+	delete svg.attribs.height;
 }
 
 /**
- * Adds or updates a title element in the SVG.
+ * Adds or updates a <title> element in the SVG.
+ * - If any <title> exists anywhere under the root, update all of them (mirrors Cheerio .find('title').text()).
+ * - Otherwise, prepend a new <title> as the first child of the root <svg>.
  */
-function addTitle( $, $svg, title ) {
+function addTitle( svg, title ) {
 	if ( [ '', 'none', 'false', 'null' ].includes( title ) ) {
-		return $svg;
+		return;
 	}
 
 	// Check if SVG already has a title
-	const existingTitle = $svg.find( 'title' );
+	const titles = selectAll( 'title', svg );
 
-	if ( existingTitle.length ) {
+	if ( titles.length ) {
+		for ( const t of titles ) {
 		// Update existing title
-		existingTitle.text( title );
+			t.children = [];
+			appendChild( t, new Text( title ) );
+		}
 	} else {
 		// Create new title and add it as the first child
-		const $title = $( '<title></title>' ).text( title );
-		$svg.prepend( $title );
+		const t = new Element( 'title', {} );
+		appendChild( t, new Text( title ) );
+		prependChild( svg, t );
 	}
-
-	return $svg;
 }
-