BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot / 4.9.5

BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot v4.9.5

betterdocs / react-src / gutenberg / blocks / reading-time / src / inspector.js

inspector.js in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 4.9.5, at react-src/gutenberg/blocks/reading-time/src/inspector.js

422 lines 25.2 KB

Raw Download Zip

1	import { PanelBody, TabPanel, TextControl, ToggleControl } from "@wordpress/components";
2	import { InspectorControls } from '@wordpress/block-editor';
3	import objAttributes from './attributes';
4	import { __ } from "@wordpress/i18n";
5	import {
6	WRAPPER_BACKGROUND,
7	WRAPPER_BORDER,
8	WRAPPER_PADDING,
9	WRAPPER_MARGIN,
10	READING_TIME_SIZE,
11	AI_ACTIONS_PADDING,
12	AI_ACTIONS_BACKGROUND,
13	AI_ACTIONS_BORDER,
14	AI_ACTIONS_ICON_SIZE,
15	LISTEN_PADDING,
16	LISTEN_BACKGROUND,
17	LISTEN_BORDER,
18	LISTEN_ICON_SIZE
19	} from "./constants";
20	import { typoPrefix_reading_time, typoPrefix_ai_actions, typoPrefix_listen } from "./typographyPrefixConstants";
21	import { AI_ACTION_TOGGLES } from "./aiActions";
22	import { settingFlag } from "./settingDefaults";
23	import ColorControl from "../../../util/color-control";
24	import TypographyDropdown from "../../../util/typography-control-v2";
25	import ResponsiveRangeController from "../../../util/responsive-range-control";
26	import ResponsiveDimensionsControl from "../../../util/dimensions-control-v2";
27	import BorderShadowControl from "../../../util/border-shadow-control";
28	import BackgroundControl from "../../../util/background-control";
29
30	const Inspector = ({attributes, setAttributes}) => {
31	const {
32	enableReadingTime,
33	readingTimeTitle,
34	readingTimeText,
35	resOption,
36	readingTimeTextColor,
37	singularReadingTimeText,
38	enableAIActions,
39	aiButtonLabel,
40	aiPromptTemplate,
41	aiActionsTextColor,
42	aiActionsIconColor,
43	enableListen,
44	listenButtonLabel,
45	listenShowSpeed,
46	listenTextColor,
47	listenIconColor,
48	listenAccentColor
49	} = attributes;
50	const resRequiredProps = {
51	setAttributes,
52	resOption,
53	attributes,
54	objAttributes
55	};
56
57	return (
58	<InspectorControls key="controls">
59	<div className="eb-panel-control">
60	<TabPanel className="eb-parent-tab-panel" activeClass="active-tab" tabs={[
61	{
62	name: "general",
63	title: __("General", "betterdocs"),
64	className: "eb-tab styles",
65	},
66	{
67	name:"styles",
68	title:__("Styles", "betterdocs"),
69	className:"eb-tab styles"
70	}
71	]}>
72	{
73	(tab) => {
74	return (
75	<div className={"eb-tab-controls " + tab.name}>
76	{tab.name === "general" && (
77	<>
78	<PanelBody
79	title={__("Reading Time", "betterdocs")}
80	initialOpen={true}
81	>
82	<ToggleControl
83	label={__("Enable Reading Time", "betterdocs")}
84	checked={enableReadingTime}
85	onChange={() => {
86	setAttributes({
87	enableReadingTime: !enableReadingTime,
88	});
89	}}
90	/>
91	{enableReadingTime && (
92	<>
93	<TextControl
94	label={__("Reading Time Title", "betterdocs")}
95	value={readingTimeTitle}
96	onChange={(value) => {
97	setAttributes({
98	readingTimeTitle: value,
99	});
100	}}
101	/>
102	<TextControl
103	label={__("Reading Time Text", "betterdocs")}
104	value={readingTimeText}
105	onChange={(value) => {
106	setAttributes({
107	readingTimeText: value,
108	});
109	}}
110	/>
111	<TextControl
112	label={__("Singular Reading Time Text", "betterdocs")}
113	value={singularReadingTimeText}
114	onChange={(value) => {
115	setAttributes({
116	singularReadingTimeText: value,
117	});
118	}}
119	/>
120	</>
121	)}
122	</PanelBody>
123	<PanelBody
124	title={__("AI Actions", "betterdocs")}
125	initialOpen={false}
126	>
127	{/*
128	* The site-wide switch is a hard kill switch:
129	* Core\AIActions lets a block switch its own
130	* instance off but never on. Without this the
131	* toggle below looks broken — on, yet nothing
132	* renders on either side.
133	*/}
134	{!settingFlag("enable_ai_actions") && (
135	<p style={{ color: "#cc1818" }}>
136	{__(
137	"AI Actions is switched off in BetterDocs → Settings, so nothing below will render. Turn it on there first.",
138	"betterdocs"
139	)}
140	</p>
141	)}
142	<ToggleControl
143	label={__("Enable AI Actions", "betterdocs")}
144	help={__(
145	'Adds a "Copy page" button that copies the doc as Markdown, or hands it to ChatGPT, Claude or another assistant as context.',
146	"betterdocs"
147	)}
148	checked={enableAIActions}
149	onChange={() => {
150	setAttributes({
151	enableAIActions: !enableAIActions,
152	});
153	}}
154	/>
155	{enableAIActions && (
156	<>
157	<TextControl
158	label={__("Button Label", "betterdocs")}
159	value={aiButtonLabel}
160	onChange={(value) => {
161	setAttributes({
162	aiButtonLabel: value,
163	});
164	}}
165	/>
166	<TextControl
167	label={__("AI Prompt Template", "betterdocs")}
168	help={__(
169	"Sent to the AI assistant when a reader opens this doc there. Use {URL} for the doc address.",
170	"betterdocs"
171	)}
172	value={aiPromptTemplate}
173	onChange={(value) => {
174	setAttributes({
175	aiPromptTemplate: value,
176	});
177	}}
178	/>
179	{AI_ACTION_TOGGLES.map(({ attribute, label }) => (
180	<ToggleControl
181	key={attribute}
182	label={label}
183	checked={!!attributes[attribute]}
184	onChange={() => {
185	setAttributes({
186	[attribute]: !attributes[attribute],
187	});
188	}}
189	/>
190	))}
191	</>
192	)}
193	</PanelBody>
194	<PanelBody
195	title={__("Listen", "betterdocs")}
196	initialOpen={false}
197	>
198	{/*
199	* The site-wide switch is a hard kill
200	* switch, exactly as for AI Actions:
201	* Core\Listen lets a block switch its own
202	* instance off but never on. Without this
203	* the toggle below looks broken — on, yet
204	* nothing renders on either side.
205	*/}
206	{!settingFlag("enable_listen") && (
207	<p style={{ color: "#cc1818" }}>
208	{__(
209	"Listen is switched off in BetterDocs → Settings, so nothing below will render. Turn it on there first.",
210	"betterdocs"
211	)}
212	</p>
213	)}
214	<ToggleControl
215	label={__("Enable Listen", "betterdocs")}
216	help={__(
217	"Adds a button that turns into a small player and reads the doc aloud using the visitor's own browser — no audio files and no third-party service.",
218	"betterdocs"
219	)}
220	checked={enableListen}
221	onChange={() => {
222	setAttributes({
223	enableListen: !enableListen,
224	});
225	}}
226	/>
227	{enableListen && (
228	<>
229	<TextControl
230	label={__("Button Label", "betterdocs")}
231	value={listenButtonLabel}
232	onChange={(value) => {
233	setAttributes({
234	listenButtonLabel: value,
235	});
236	}}
237	/>
238	<ToggleControl
239	label={__("Speed Control", "betterdocs")}
240	help={__(
241	"Let readers cycle the playback speed between 0.75× and 2×.",
242	"betterdocs"
243	)}
244	checked={listenShowSpeed}
245	onChange={() => {
246	setAttributes({
247	listenShowSpeed: !listenShowSpeed,
248	});
249	}}
250	/>
251	</>
252	)}
253	</PanelBody>
254	</>
255	)}
256	{tab.name === "styles" && (
257	<>
258	<PanelBody title={__("Wrapper", "betterdocs")}>
259	<ResponsiveDimensionsControl
260	baseLabel={__("Padding", "betterdocs")}
261	resRequiredProps={resRequiredProps}
262	controlName={WRAPPER_PADDING}
263	/>
264	<ResponsiveDimensionsControl
265	baseLabel={__("Margin", "betterdocs")}
266	resRequiredProps={resRequiredProps}
267	controlName={WRAPPER_MARGIN}
268	/>
269	<BackgroundControl
270	controlName={WRAPPER_BACKGROUND}
271	resRequiredProps={resRequiredProps}
272	noOverlay={true}
273	/>
274	<BorderShadowControl
275	controlName={WRAPPER_BORDER}
276	resRequiredProps={resRequiredProps}
277	noShadow={true}
278	noShdowHover={true}
279	/>
280	</PanelBody>
281	<PanelBody title={__("Reading Time", "betterdocs")}>
282	<ColorControl
283	label={__("Reading Time Color", "betterdocs")}
284	color={readingTimeTextColor}
285	onChange={(value) => {
286	setAttributes({readingTimeTextColor:value})
287	}}
288	/>
289	<TypographyDropdown
290	baseLabel={__("Typography", "betterdocs")}
291	typographyPrefixConstant={typoPrefix_reading_time}
292	resRequiredProps={resRequiredProps}
293	/>
294	<ResponsiveRangeController
295	baseLabel={__("Icon Size", "betterdocs")}
296	controlName={READING_TIME_SIZE}
297	resRequiredProps={resRequiredProps}
298	min={1}
299	max={500}
300	step={1}
301	/>
302	</PanelBody>
303	<PanelBody title={__("AI Actions", "betterdocs")} initialOpen={false}>
304	<ColorControl
305	label={__("Text Color", "betterdocs")}
306	color={aiActionsTextColor}
307	onChange={(value) => {
308	setAttributes({aiActionsTextColor:value})
309	}}
310	/>
311	<ColorControl
312	label={__("Icon Color", "betterdocs")}
313	color={aiActionsIconColor}
314	onChange={(value) => {
315	setAttributes({aiActionsIconColor:value})
316	}}
317	/>
318	<TypographyDropdown
319	baseLabel={__("Typography", "betterdocs")}
320	typographyPrefixConstant={typoPrefix_ai_actions}
321	resRequiredProps={resRequiredProps}
322	/>
323	<ResponsiveRangeController
324	baseLabel={__("Icon Size", "betterdocs")}
325	controlName={AI_ACTIONS_ICON_SIZE}
326	resRequiredProps={resRequiredProps}
327	min={8}
328	max={64}
329	step={1}
330	/>
331	<ResponsiveDimensionsControl
332	baseLabel={__("Padding", "betterdocs")}
333	resRequiredProps={resRequiredProps}
334	controlName={AI_ACTIONS_PADDING}
335	/>
336	<BackgroundControl
337	controlName={AI_ACTIONS_BACKGROUND}
338	resRequiredProps={resRequiredProps}
339	noOverlay={true}
340	/>
341	<BorderShadowControl
342	controlName={AI_ACTIONS_BORDER}
343	resRequiredProps={resRequiredProps}
344	noShadow={true}
345	noShdowHover={true}
346	/>
347	</PanelBody>
348	<PanelBody title={__("Listen", "betterdocs")} initialOpen={false}>
349	<ColorControl
350	label={__("Text Color", "betterdocs")}
351	color={listenTextColor}
352	onChange={(value) => {
353	setAttributes({listenTextColor:value})
354	}}
355	/>
356	<ColorControl
357	label={__("Icon Color", "betterdocs")}
358	color={listenIconColor}
359	onChange={(value) => {
360	setAttributes({listenIconColor:value})
361	}}
362	/>
363	{/*
364	* One control for three things — the play
365	* button, the progress bar and its handle
366	* — because listen.scss publishes them as
367	* a single custom property. Three controls
368	* would be three chances to end up with a
369	* play button that does not match its own
370	* progress bar.
371	*/}
372	<ColorControl
373	label={__("Player Accent Color", "betterdocs")}
374	color={listenAccentColor}
375	onChange={(value) => {
376	setAttributes({listenAccentColor:value})
377	}}
378	/>
379	<TypographyDropdown
380	baseLabel={__("Typography", "betterdocs")}
381	typographyPrefixConstant={typoPrefix_listen}
382	resRequiredProps={resRequiredProps}
383	/>
384	<ResponsiveRangeController
385	baseLabel={__("Icon Size", "betterdocs")}
386	controlName={LISTEN_ICON_SIZE}
387	resRequiredProps={resRequiredProps}
388	min={8}
389	max={64}
390	step={1}
391	/>
392	<ResponsiveDimensionsControl
393	baseLabel={__("Padding", "betterdocs")}
394	resRequiredProps={resRequiredProps}
395	controlName={LISTEN_PADDING}
396	/>
397	<BackgroundControl
398	controlName={LISTEN_BACKGROUND}
399	resRequiredProps={resRequiredProps}
400	noOverlay={true}
401	/>
402	<BorderShadowControl
403	controlName={LISTEN_BORDER}
404	resRequiredProps={resRequiredProps}
405	noShadow={true}
406	noShdowHover={true}
407	/>
408	</PanelBody>
409	</>
410	)}
411	</div>
412	)
413	}
414	}
415	</TabPanel>
416	</div>
417	</InspectorControls>
418	);
419	}
420
421	export default Inspector;
422