TablePress – Tables in WordPress made easy / 3.2

TablePress – Tables in WordPress made easy v3.2

tablepress / blocks / table / src / transforms.js

transforms.js in TablePress – Tables in WordPress made easy 3.2, at blocks/table/src/transforms.js

125 lines 3.9 KB

Raw Download Zip

1	/**
2	* JavaScript code for the TablePress table block in the block editor.
3	*
4	* @package TablePress
5	* @subpackage Blocks
6	* @author Tobias Bäthge
7	* @since 2.0.0
8	*/
9
10	/* globals tp */
11
12	/**
13	* WordPress dependencies.
14	*/
15	import { createBlock } from '@wordpress/blocks';
16	import shortcode from '@wordpress/shortcode';
17
18	/**
19	* Get the block name from the block.json.
20	*/
21	import block from '../block.json';
22
23	/**
24	* Internal dependencies.
25	*/
26	import { shortcodeAttrsToString } from './common/functions';
27
28	/**
29	* Converts a set of parsed Shortcode attributes to a parameters string.
30	*
31	* @param {Object} shortcodeAttrs The Shortcode attributes.
32	* @return {string} The parameters string.
33	*/
34	const convertShortcodeAttrsToParametersString = ( shortcodeAttrs ) => {
35	// Remove the `id` attribute from the Shortcode parameters, as it is handled separately.
36	delete shortcodeAttrs.named.id;
37
38	let parameters = shortcodeAttrsToString( shortcodeAttrs );
39
40	// Replace curly quotation marks around a value with normal ones.
41	parameters = parameters.replace( /=“([^”]*)”/g, '="$1"' );
42
43	// Decode HTML entities like `&`, `<`, `>`, `[`, and `]` that were encoded in the Shortcode.
44	parameters = parameters.replaceAll( '&', '&' ).replaceAll( '<', '<' ).replaceAll( '>', '>' ).replaceAll( '[', '[' ).replaceAll( ']', ']' );
45
46	return parameters;
47	};
48
49	/**
50	* Converts a textual Shortcode to a TablePress table block.
51	*
52	* @param {string} content The Shortcode as a text string.
53	* @return {Object} TablePress table block.
54	*/
55	const convertShortcodeTextToBlock = ( content ) => {
56	let shortcodeAttrs = shortcode.next( tp.table.shortcode, content ).shortcode.attrs;
57	shortcodeAttrs = { named: { ...shortcodeAttrs.named }, numeric: [ ...shortcodeAttrs.numeric ] }; // Use object destructuring to get a clone of the object.
58	const id = shortcodeAttrs.named.id;
59	const parameters = convertShortcodeAttrsToParametersString( shortcodeAttrs );
60	return createBlock( block.name, { id, parameters } );
61	};
62
63	const transforms = {
64	from: [
65	// Detect table Shortcodes that are pasted into the block editor.
66	{
67	type: 'shortcode',
68	tag: tp.table.shortcode,
69	attributes: {
70	id: {
71	type: 'string',
72	shortcode: ( { named: { id = '' } } ) => {
73	return id;
74	},
75	},
76	parameters: {
77	type: 'string',
78	shortcode: ( shortcodeAttrs ) => {
79	shortcodeAttrs = { named: { ...shortcodeAttrs.named }, numeric: [ ...shortcodeAttrs.numeric ] }; // Use object destructuring to get a clone of the object.
80	return convertShortcodeAttrsToParametersString( shortcodeAttrs );
81	},
82	},
83	},
84	},
85
86	// Detect table Shortcodes that are typed into the block editor.
87	{
88	type: 'enter',
89	regExp: shortcode.regexp( tp.table.shortcode ),
90	transform: ( { content } ) => convertShortcodeTextToBlock( content ),
91	},
92
93	// Add conversion option from "Shortcode" to "TablePress table" block.
94	{
95	type: 'block',
96	blocks: [ 'core/shortcode' ],
97	transform: ( { text: content } ) => convertShortcodeTextToBlock( content ),
98	isMatch: ( { text } ) => {
99	return ( undefined !== shortcode.next( tp.table.shortcode, text ) );
100	},
101	isMultiBlock: false,
102	},
103	],
104
105	to: [
106	// Add conversion option from "TablePress table" to "Shortcode" block.
107	{
108	type: 'block',
109	blocks: [ 'core/shortcode' ],
110	transform: ( { id, parameters } ) => {
111	parameters = parameters.trim();
112	if ( '' !== parameters ) {
113	parameters += ' ';
114	// Encode characters that cause problems in Shortcodes, e.g. due to sanitization, like `&`, `<`, `>`, `[`, and `]` to HTML entities.
115	parameters = parameters.replaceAll( '&', '&' ).replaceAll( '<', '<' ).replaceAll( '>', '>' ).replaceAll( '[', '[' ).replaceAll( ']', ']' );
116	}
117	const text = `[${ tp.table.shortcode } id=${ id } ${ parameters }/]`;
118	return createBlock( 'core/shortcode', { text } );
119	},
120	},
121	],
122	};
123
124	export default transforms;
125