code-snippets / js / components / EditMenu / EditorSidebar / actions / ShortcodeInfo.tsx

ShortcodeInfo.tsx in Code Snippets 4.0.0-beta.2, at js/components/EditMenu/EditorSidebar/actions/ShortcodeInfo.tsx

159 lines 4.4 KB

Raw Download Zip

1	import React, { useState } from 'react'
2	import { CheckboxControl, ExternalLink, Modal } from '@wordpress/components'
3	import { __ } from '@wordpress/i18n'
4	import { useSnippetForm } from '../../SnippetForm/WithSnippetFormContext'
5	import { Button } from '../../../common/Button'
6	import { CopyToClipboardButton } from '../../../common/CopyToClipboardButton'
7	import type { Dispatch, SetStateAction} from 'react'
8
9	type ShortcodeAtts = Record<string, unknown>
10
11	const buildShortcodeTag = (tag: string, atts: ShortcodeAtts): string =>
12	`[${[
13	tag,
14	...Object.entries(atts)
15	.filter(([, value]) => Boolean(value))
16	.map(([att, value]) =>
17	'boolean' === typeof value ? att : `${att}=${JSON.stringify(value)}`)
18	].filter(Boolean).join(' ')}]`
19
20	const SHORTCODE_TAG = 'code_snippet'
21
22	interface ShortcodeOptions {
23	php: boolean
24	format: boolean
25	shortcodes: boolean
26	}
27
28	interface CheckboxListProps<T extends string> {
29	options: T[]
30	checked: Record<T, boolean>
31	disabled: boolean
32	setChecked: Dispatch<SetStateAction<Record<T, boolean>>>
33	optionLabels: Partial<Record<T, string>>
34	optionDescriptions: Partial<Record<T, string>>
35	}
36
37	const CheckboxList = <T extends string>({
38	options,
39	checked,
40	disabled,
41	setChecked,
42	optionLabels,
43	optionDescriptions
44	}: CheckboxListProps<T>) =>
45	<ul>
46	{options.map(option =>
47	<li key={option}>
48	<CheckboxControl
49	label={optionLabels[option]}
50	help={optionDescriptions[option]}
51	checked={checked[option]}
52	disabled={disabled}
53	onChange={value =>
54	setChecked(previous => ({ ...previous, [option]: value }))}
55	/>
56	</li>)}
57	</ul>
58
59	const ShortcodeDescription = () =>
60	<p className="description">
61	{__('Copy the below shortcode to insert this snippet into a post, page, or other content.', 'code-snippets')}{'\n'}
62	{__('You can also use the Classic Editor button, Block editor (Pro) or Elementor widget (Pro).', 'code-snippets')}{'\n'}
63
64	<ExternalLink
65	href={__('https://codesnippets.pro/doc/inserting-content-snippets/', 'code-snippets')}
66	>
67	{__('Learn more', 'code-snippets')}
68	</ExternalLink>
69	</p>
70
71	const OPTION_LABELS: Record<keyof ShortcodeOptions, string> = {
72	php: __('Evaluate PHP code', 'code-snippets'),
73	format: __('Add paragraphs and formatting', 'code-snippets'),
74	shortcodes: __('Evaluate additional shortcode tags', 'code-snippets')
75	}
76
77	const OPTION_DESCRIPTIONS: Record<keyof ShortcodeOptions, string> = {
78	php: __('Run code within <?php ?> tags.', 'code-snippets'),
79	format: __('Wrap output in paragraphs and apply formatting.', 'code-snippets'),
80	shortcodes: __('Replace [shortcodes] embedded within the snippet.', 'code-snippets')
81	}
82
83	const ModalContent = () => {
84	const { snippet, isReadOnly } = useSnippetForm()
85
86	const [options, setOptions] = useState<ShortcodeOptions>(() => ({
87	php: snippet.code.includes('<?'),
88	format: true,
89	shortcodes: false
90	}))
91
92	const shortcodeAtts: ShortcodeAtts = {
93	id: snippet.id,
94	network: snippet.network,
95	...options,
96	name: snippet.name
97	}
98
99	const shortcodeTag = buildShortcodeTag(SHORTCODE_TAG, shortcodeAtts)
100
101	return (
102	<>
103	<ShortcodeDescription />
104
105	<p className="shortcode-tag-wrapper">
106	<code className="shortcode-tag">{shortcodeTag}</code>
107	<CopyToClipboardButton primary text={shortcodeTag} />
108	</p>
109
110	<h2>{__('Shortcode Options', 'code-snippets')}</h2>
111
112	<hr className="wp-header-end" />
113
114	<CheckboxList
115	options={['php', 'format', 'shortcodes']}
116	checked={options}
117	disabled={isReadOnly}
118	setChecked={setOptions}
119	optionLabels={OPTION_LABELS}
120	optionDescriptions={OPTION_DESCRIPTIONS}
121	/>
122	</>
123	)
124	}
125
126	export const ShortcodeInfo: React.FC = () => {
127	const { snippet, isReadOnly } = useSnippetForm()
128	const [isModalOpen, setIsModalOpen] = useState(false)
129
130	return 'content' === snippet.scope && snippet.id
131	? <div className="inline-form-field">
132	<strong>{__('Shortcode', 'code-snippets')}</strong>
133
134	<Button onClick={() => setIsModalOpen(true)} disabled={isReadOnly}>
135	{__('See options', 'code-snippets')}
136	</Button>
137
138	{isModalOpen
139	? <Modal
140	size="medium"
141	className="code-snippets-modal"
142	title={__('Embed Snippet with Shortcode', 'code-snippets')}
143	onRequestClose={() => setIsModalOpen(false)}
144	>
145	<div className="modal-content">
146	<ModalContent />
147	</div>
148
149	<div className="modal-footer">
150	<Button link large onClick={() => setIsModalOpen(false)}>
151	{__('Close Popup', 'code-snippets')}
152	</Button>
153	</div>
154	</Modal>
155	: null}
156	</div>
157	: null
158	}
159