SimpleTOC – Table of Contents Block / 5.0.24

SimpleTOC – Table of Contents Block v5.0.24

simpletoc / src / edit.js

edit.js in SimpleTOC – Table of Contents Block 5.0.24, at src/edit.js

210 lines 6.9 KB

Raw Download Zip

1	import { __ } from '@wordpress/i18n';
2	import { InspectorControls, BlockControls } from "@wordpress/block-editor";
3	import ServerSideRender from "@wordpress/server-side-render";
4	import {
5	SelectControl,
6	ToolbarGroup,
7	ToolbarButton,
8	ToggleControl,
9	Panel,
10	PanelBody,
11	PanelRow,
12	} from "@wordpress/components";
13	import { useBlockProps } from "@wordpress/block-editor";
14	import { select, subscribe } from '@wordpress/data';
15	import {useEffect, useState} from 'react';
16
17
18	export default function Edit({ attributes, setAttributes }) {
19	const blockProps = useBlockProps();
20
21	/* Update SimpleTOC if the post is saved successfully. */
22	/* Source: https://github.com/WordPress/gutenberg/issues/17632 */
23
24	const { isSavingPost } = select( 'core/editor' );
25	const [isSavingProcess, setSavingProcess] = useState(false);
26
27	subscribe(() => {
28	if (isSavingPost()) {
29	setSavingProcess(true);
30	} else {
31	setSavingProcess(false);
32	}
33	});
34	const updatePost = function () {
35	setAttributes({ updated: Date.now() });
36	};
37
38	useEffect(() => {
39	if (isSavingProcess) {
40	updatePost();
41	}
42	}, [isSavingProcess]);
43
44	return (
45	<div {...blockProps}>
46	<InspectorControls>
47	<Panel>
48	<PanelBody>
49	<PanelRow>
50	<SelectControl
51	label={__("Maximum level", "simpletoc")}
52	help={__("Maximum depth of the headings.", "simpletoc")}
53	value={attributes.max_level}
54	options={[
55	{
56	label:
57	__("Including", "simpletoc") +
58	" H6 (" +
59	__("default", "simpletoc") +
60	")",
61	value: "6",
62	},
63	{
64	label: __("Including", "simpletoc") + " H5",
65	value: "5",
66	},
67	{
68	label: __("Including", "simpletoc") + " H4",
69	value: "4",
70	},
71	{
72	label: __("Including", "simpletoc") + " H3",
73	value: "3",
74	},
75	{
76	label: __("Including", "simpletoc") + " H2",
77	value: "2",
78	},
79	{
80	label: __("Including", "simpletoc") + " H1",
81	value: "1",
82	},
83	]}
84	onChange={(level) =>
85	setAttributes({ max_level: Number(level) })
86	}
87	/>
88	</PanelRow>
89	<PanelRow>
90	<SelectControl
91	label={__("Minimum level", "simpletoc")}
92	help={__("Minimum depth of the headings.", "simpletoc")}
93	value={attributes.min_level}
94	options={[
95	{
96	label: __("Including", "simpletoc") + " H6",
97	value: "6",
98	},
99	{
100	label: __("Including", "simpletoc") + " H5",
101	value: "5",
102	},
103	{
104	label: __("Including", "simpletoc") + " H4",
105	value: "4",
106	},
107	{
108	label: __("Including", "simpletoc") + " H3",
109	value: "3",
110	},
111	{
112	label: __("Including", "simpletoc") + " H2",
113	value: "2",
114	},
115	{
116	label: __("Including", "simpletoc") +
117	" H1 (" +
118	__("default", "simpletoc") +
119	")",
120	value: "1",
121	},
122	]}
123	onChange={(level) =>
124	setAttributes({ min_level: Number(level) })
125	}
126	/>
127	</PanelRow>
128	<PanelRow>
129	<ToggleControl
130	label={__("Remove heading", "simpletoc")}
131	help={__(
132	'Disable the "Table of contents" block heading and add your own heading block.',
133	"simpletoc"
134	)}
135	checked={attributes.no_title}
136	onChange={() =>
137	setAttributes({ no_title: !attributes.no_title })
138	}
139	/>
140	</PanelRow>
141	<PanelRow>
142	<ToggleControl
143	label={__("Use an ordered list", "simpletoc")}
144	help={__(
145	"Replace the <ul> tag with an <ol> tag. This adds decimal numbers to each heading in the TOC.",
146	"simpletoc"
147	)}
148	checked={attributes.use_ol}
149	onChange={() => setAttributes({ use_ol: !attributes.use_ol })}
150	/>
151	</PanelRow>
152	<PanelRow>
153	<ToggleControl
154	label={__("Remove list indent", "simpletoc")}
155	help={__(
156	"No bullet points or numbers at the first level.",
157	"simpletoc"
158	)}
159	checked={attributes.remove_indent}
160	onChange={() => setAttributes({ remove_indent: !attributes.remove_indent })}
161	/>
162	</PanelRow>
163	<PanelRow>
164	<ToggleControl
165	label={__("Use absolute urls", "simpletoc")}
166	help={__(
167	"Adds the permalink url to the fragment.",
168	"simpletoc"
169	)}
170	checked={attributes.use_absolute_urls}
171	onChange={() =>
172	setAttributes({
173	use_absolute_urls: !attributes.use_absolute_urls,
174	})
175	}
176	/>
177	</PanelRow>
178	<PanelRow>
179	<ToggleControl
180	label={__("Smooth scrolling support", "simpletoc")}
181	help={__(
182	'Add the css class "smooth-scroll" to the links. This enables smooth scrolling in some themes like GeneratePress.',
183	"simpletoc"
184	)}
185	checked={attributes.add_smooth}
186	onChange={() =>
187	setAttributes({
188	add_smooth: !attributes.add_smooth,
189	})
190	}
191	/>
192	</PanelRow>
193	</PanelBody>
194	</Panel>
195	</InspectorControls>
196	<BlockControls>
197	<ToolbarGroup>
198	<ToolbarButton
199	className="components-icon-button components-toolbar__control"
200	label={__("Update table of contents", "simpletoc")}
201	onClick={() => setAttributes({ updated: Date.now() })}
202	icon="update"
203	/>
204	</ToolbarGroup>
205	</BlockControls>
206	<ServerSideRender block="simpletoc/toc" attributes={attributes} />
207	</div>
208	);
209	}
210