SimpleTOC – Table of Contents Block / 5.0.25.1

SimpleTOC – Table of Contents Block v5.0.25.1

simpletoc / src / edit.js

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

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