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 / doc-content / src / edit.js

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

216 lines 6.8 KB

Raw Download Zip

1	import { __ } from "@wordpress/i18n";
2	import { useEffect } from "@wordpress/element";
3	import { select } from "@wordpress/data";
4	import { useBlockProps } from "@wordpress/block-editor";
5
6	import Inspector from "./inspector";
7	import { DOC_CONTENT_MARGIN, DOC_CONTENT_PADDING } from "./constants";
8	import { PrintIcon } from "../icons/PrintIcon";
9	import { typoPrefix_Doc_content } from "./typographyPrefixConstants";
10	import {
11	duplicateBlockIdFix,
12	generateTypographyStyles,
13	softMinifyCssStrings,
14	isCssExists,
15	generateDimensionsControlStyles,
16	} from "../../../util/helpers";
17	import { usePreviewDeviceType } from "../../../hooks";
18
19	const edit = ({ attributes, setAttributes, isSelected, clientId }) => {
20	const {
21	resOption,
22	blockId,
23	blockMeta,
24	doc_content_color,
25	} = attributes;
26
27	const blockProps = useBlockProps({
28	className: `bd-guten-block-main-parent-wrapper`,
29	});
30
31	const {
32	typoStylesDesktop: docContentTypoDesk,
33	typoStylesTab: docContentTypoTab,
34	typoStylesMobile: docContentTypoMob,
35	} = generateTypographyStyles({
36	prefixConstant: typoPrefix_Doc_content,
37	attributes: attributes,
38	});
39
40	const {
41	dimensionStylesDesktop: docContentPadDesk,
42	dimensionStylesTab: docContentPadTab,
43	dimensionStylesMobile: docContentPadMob,
44	} = generateDimensionsControlStyles({
45	controlName: DOC_CONTENT_PADDING,
46	styleFor: "padding",
47	attributes: attributes,
48	});
49
50	const {
51	dimensionStylesDesktop: docContentMarDesk,
52	dimensionStylesTab: docContentMarTab,
53	dimensionStylesMobile: docContentMarMob,
54	} = generateDimensionsControlStyles({
55	controlName: DOC_CONTENT_MARGIN,
56	styleFor: "margin",
57	attributes: attributes,
58	});
59
60	const desktopStyles = `
61	.betterdocs-entry-content.${blockId}{
62	${docContentPadDesk}
63	${docContentMarDesk}
64	}
65
66	.betterdocs-entry-content.${blockId} #betterdocs-single-content{
67	${docContentTypoDesk}
68	color:${doc_content_color};
69	}
70	`;
71
72	const tabStyles = `
73	.betterdocs-entry-content.${blockId}{
74	${docContentPadTab}
75	${docContentMarTab}
76	}
77
78	.betterdocs-entry-content.${blockId} #betterdocs-single-content{
79	${docContentTypoTab}
80	${docContentPadTab}
81	color:${doc_content_color};
82	}
83	`;
84
85	const mobileStyles = `
86	.betterdocs-entry-content.${blockId}{
87	${docContentPadMob}
88	${docContentMarMob}
89	}
90
91	.betterdocs-entry-content.${blockId} #betterdocs-single-content{
92	${docContentPadMob}
93	${docContentTypoMob}
94	color:${doc_content_color};
95	}
96	`;
97
98	// all css styles for large screen width (desktop/laptop) in strings ⬇
99	const desktopAllStyles = softMinifyCssStrings(`
100	${isCssExists(desktopStyles) ? desktopStyles : " "}
101	`);
102
103	// all css styles for Tab in strings ⬇
104	const tabAllStyles = softMinifyCssStrings(`
105	${isCssExists(tabStyles) ? tabStyles : " "}
106	`);
107
108	// all css styles for Mobile in strings ⬇
109	const mobileAllStyles = softMinifyCssStrings(`
110	${isCssExists(mobileStyles) ? mobileStyles : " "}
111	`);
112
113	useEffect(() => {
114	const styleObject = {
115	desktop: desktopAllStyles,
116	tab: tabAllStyles,
117	mobile: mobileAllStyles,
118	};
119	if (JSON.stringify(blockMeta) != JSON.stringify(styleObject)) {
120	setAttributes({ blockMeta: styleObject });
121	}
122	}, [attributes]);
123
124	/**
125	* resOption: __experimentalPreviewDeviceType()
126	* Set Responsive Option
127	*/
128	usePreviewDeviceType(setAttributes);
129
130	//Generate Unique Block ID For Every Block Instance
131	useEffect(() => {
132	const BLOCK_PREFIX = "single-doc-content";
133	duplicateBlockIdFix({
134	BLOCK_PREFIX,
135	blockId,
136	setAttributes,
137	select,
138	clientId,
139	});
140	});
141
142	return (
143	<>
144	{isSelected && (
145	<Inspector
146	attributes={attributes}
147	setAttributes={setAttributes}
148	/>
149	)}
150	<div {...blockProps}>
151	<style>
152	{`
153	${desktopAllStyles}
154
155	${resOption === "Tablet" ? tabAllStyles : ""}
156	${resOption === "Mobile" ? mobileAllStyles : ""}
157
158	@media all and (max-width: 1024px) {
159	${tabAllStyles}
160	}
161
162	@media all and (max-width: 767px) {
163	${mobileAllStyles}
164	}
165	`}
166	</style>
167	<div className={`betterdocs-entry-content ${blockId}`}>
168	<div id="betterdocs-single-content">
169	<h1>Heading 1</h1>
170	<p>
171	Lorem ipsum dolor sit amet, consectetur adipiscing
172	elit. Duis at augue a arcu efficitur interdum. Lorem
173	ipsum dolor sit amet, consectetur adipiscing elit.
174	Duis at augue a arcu efficitur interdum. Lorem ipsum
175	dolor sit amet, consectetur adipiscing elit. Duis at
176	augue a arcu efficitur interdum.
177	</p>
178
179	<h2>Heading 2</h2>
180	<p>
181	Lorem ipsum dolor sit amet, consectetur adipiscing
182	elit. Duis at augue a arcu efficitur interdum. Lorem
183	ipsum dolor sit amet, consectetur adipiscing elit.
184	Duis at augue a arcu efficitur interdum. Lorem ipsum
185	dolor sit amet, consectetur adipiscing elit. Duis at
186	augue a arcu efficitur interdum.
187	</p>
188
189	<h3>Heading 3</h3>
190	<p>
191	Lorem ipsum dolor sit amet, consectetur adipiscing
192	elit. Duis at augue a arcu efficitur interdum. Lorem
193	ipsum dolor sit amet, consectetur adipiscing elit.
194	Duis at augue a arcu efficitur interdum. Lorem ipsum
195	dolor sit amet, consectetur adipiscing elit. Duis at
196	augue a arcu efficitur interdum.
197	</p>
198
199	<h4>Heading 4</h4>
200	<p>
201	Lorem ipsum dolor sit amet, consectetur adipiscing
202	elit. Duis at augue a arcu efficitur interdum. Lorem
203	ipsum dolor sit amet, consectetur adipiscing elit.
204	Duis at augue a arcu efficitur interdum. Lorem ipsum
205	dolor sit amet, consectetur adipiscing elit. Duis at
206	augue a arcu efficitur interdum.
207	</p>
208	</div>
209	</div>
210	</div>
211	</>
212	);
213	};
214
215	export default edit;
216