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 / code-snippet / src / style.js

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

250 lines 9.0 KB

Raw Download Zip

1	import { useEffect } from "@wordpress/element";
2	import { select } from "@wordpress/data";
3
4	import {
5	generateDimensionsControlStyles,
6	generateTypographyStyles,
7	duplicateBlockIdFix,
8	softMinifyCssStrings,
9	isCssExists
10	} from "../../../util/helpers";
11
12	import { usePreviewDeviceType } from '../../../hooks';
13
14	import {
15	CODE_SNIPPET_WRAPPER_MARGIN,
16	CODE_SNIPPET_WRAPPER_PADDING,
17	CODE_SNIPPET_HEADER_PADDING,
18	CODE_SNIPPET_LINE_NUMBERS_PADDING,
19	CODE_SNIPPET_CODE_PADDING,
20	} from './constants';
21
22	import {
23	typoPrefix_fileName
24	} from "./typographyPrefixConstants";
25
26	const Style = ({ attributes, setAttributes, clientId }) => {
27	const {
28	blockId,
29	blockMeta,
30	resOption,
31	lineNumberColor,
32	lineNumberBgColor,
33	lineNumberBorderColor,
34	lineNumberBorderWidth,
35	wrapperBackgroundColor,
36	wrapperBorderColor,
37	wrapperBorderWidth,
38	wrapperBorderRadius,
39	headerBackgroundColor,
40	headerBorderColor,
41	headerBorderWidth,
42	fileNameColor,
43	copyButtonColor,
44	copyButtonBorderColor,
45	codeBackgroundColor,
46	} = attributes;
47
48	// Generate wrapper dimension styles
49	const { dimensionStylesDesktop: wrapperMarginDesk, dimensionStylesMobile: wrapperMarginMob, dimensionStylesTab: wrapperMarginTab } = generateDimensionsControlStyles({
50	controlName: CODE_SNIPPET_WRAPPER_MARGIN,
51	styleFor: 'margin',
52	attributes
53	});
54
55	const { dimensionStylesDesktop: wrapperPaddingDesk, dimensionStylesMobile: wrapperPaddingMob, dimensionStylesTab: wrapperPaddingTab } = generateDimensionsControlStyles({
56	controlName: CODE_SNIPPET_WRAPPER_PADDING,
57	styleFor: 'padding',
58	attributes
59	});
60
61	// Generate header dimension styles
62	const { dimensionStylesDesktop: headerPaddingDesk, dimensionStylesMobile: headerPaddingMob, dimensionStylesTab: headerPaddingTab } = generateDimensionsControlStyles({
63	controlName: CODE_SNIPPET_HEADER_PADDING,
64	styleFor: 'padding',
65	attributes
66	});
67
68	// Generate line numbers dimension styles
69	const { dimensionStylesDesktop: lineNumbersPaddingDesk, dimensionStylesMobile: lineNumbersPaddingMob, dimensionStylesTab: lineNumbersPaddingTab } = generateDimensionsControlStyles({
70	controlName: CODE_SNIPPET_LINE_NUMBERS_PADDING,
71	styleFor: 'padding',
72	attributes
73	});
74
75	// Generate code content dimension styles
76	const { dimensionStylesDesktop: codePaddingDesk, dimensionStylesMobile: codePaddingMob, dimensionStylesTab: codePaddingTab } = generateDimensionsControlStyles({
77	controlName: CODE_SNIPPET_CODE_PADDING,
78	styleFor: 'padding',
79	attributes
80	});
81
82	// Generate file name typography styles
83	const { typoStylesDesktop: fileNameTypoDesk, typoStylesTab: fileNameTypoTab, typoStylesMobile: fileNameTypoMobile } = generateTypographyStyles({
84	attributes,
85	defaultFontSize: 14,
86	prefixConstant: typoPrefix_fileName,
87	});
88
89	// Generate CSS styles
90	const desktopStyles = `
91	.betterdocs-code-snippet-wrapper.${blockId} {
92	${wrapperMarginDesk}
93	${wrapperPaddingDesk}
94	${wrapperBackgroundColor ? `background-color: ${wrapperBackgroundColor} !important;` : ''}
95	${wrapperBorderColor ? `border-color: ${wrapperBorderColor} !important;` : ''}
96	${wrapperBorderWidth !== undefined ? `border-width: ${wrapperBorderWidth}px !important;` : ''}
97	${wrapperBorderWidth > 0 ? `border-style: solid !important;` : ''}
98	${wrapperBorderRadius !== undefined ? `border-radius: ${wrapperBorderRadius}px !important;` : ''}
99	}
100
101	.betterdocs-code-snippet-wrapper.${blockId} .betterdocs-code-snippet-header.betterdocs-file-preview-header {
102	${headerPaddingDesk}
103	${headerBackgroundColor ? `background-color: ${headerBackgroundColor} !important;` : ''}
104	${headerBorderColor ? `border-bottom-color: ${headerBorderColor} !important;` : ''}
105	${headerBorderWidth !== undefined ? `border-bottom-width: ${headerBorderWidth}px !important;` : ''}
106	${headerBorderWidth > 0 ? `border-bottom-style: solid !important;` : ''}
107	}
108
109	.betterdocs-code-snippet-wrapper.${blockId} .betterdocs-code-snippet-header .betterdocs-file-name .file-name-text {
110	${fileNameTypoDesk ? fileNameTypoDesk.trim() : ''}
111	${fileNameColor ? `color: ${fileNameColor}; !important;` : ''}
112	}
113
114	.betterdocs-code-snippet-wrapper.${blockId} .betterdocs-code-snippet-header .betterdocs-code-snippet-copy-button {
115	${copyButtonColor ? `color: ${copyButtonColor} !important;` : ''}
116	${copyButtonBorderColor ? `border-color: ${copyButtonBorderColor} !important;` : ''}
117	}
118
119	.betterdocs-code-snippet-wrapper.${blockId} .betterdocs-code-snippet-content .betterdocs-code-snippet-line-numbers {
120	${lineNumbersPaddingDesk}
121	${lineNumberBgColor ? `background-color: ${lineNumberBgColor} !important;` : ''}
122	${lineNumberBorderColor ? `border-right-color: ${lineNumberBorderColor} !important;` : ''}
123	${lineNumberBorderWidth !== undefined ? `border-right-width: ${lineNumberBorderWidth}px !important;` : ''}
124	${lineNumberBorderWidth > 0 ? `border-right-style: solid !important;` : ''}
125	}
126
127	.betterdocs-code-snippet-wrapper.${blockId} .betterdocs-code-snippet-content .betterdocs-code-snippet-line-numbers .line-number {
128	${lineNumberColor ? `color: ${lineNumberColor} !important;` : ''}
129	}
130
131	.betterdocs-code-snippet-wrapper.${blockId} .betterdocs-code-snippet-code {
132	${codePaddingDesk}
133	${codeBackgroundColor ? `background-color: ${codeBackgroundColor} !important;` : ''}
134	}
135	`;
136
137	const tabStyles = `
138	.betterdocs-code-snippet-wrapper.${blockId} {
139	${wrapperMarginTab}
140	${wrapperPaddingTab}
141	}
142
143	.betterdocs-code-snippet-wrapper.${blockId} .betterdocs-code-snippet-header.betterdocs-file-preview-header {
144	${headerPaddingTab}
145	}
146
147	.betterdocs-code-snippet-wrapper.${blockId} .betterdocs-code-snippet-header .betterdocs-file-name .file-name-text {
148	${fileNameTypoTab ? fileNameTypoTab.trim() : ''}
149	}
150
151	.betterdocs-code-snippet-wrapper.${blockId} .betterdocs-code-snippet-content .betterdocs-code-snippet-line-numbers {
152	${lineNumbersPaddingTab}
153	}
154
155	.betterdocs-code-snippet-wrapper.${blockId} .betterdocs-code-snippet-code {
156	${codePaddingTab}
157	}
158	`;
159
160	const mobileStyles = `
161	.betterdocs-code-snippet-wrapper.${blockId} {
162	${wrapperMarginMob}
163	${wrapperPaddingMob}
164	}
165
166	.betterdocs-code-snippet-wrapper.${blockId} .betterdocs-code-snippet-header.betterdocs-file-preview-header {
167	${headerPaddingMob}
168	}
169
170	.betterdocs-code-snippet-wrapper.${blockId} .betterdocs-code-snippet-header .betterdocs-file-name .file-name-text {
171	${fileNameTypoMobile ? fileNameTypoMobile.trim() : ''}
172	}
173
174	.betterdocs-code-snippet-wrapper.${blockId} .betterdocs-code-snippet-content .betterdocs-code-snippet-line-numbers {
175	${lineNumbersPaddingMob}
176	}
177
178	.betterdocs-code-snippet-wrapper.${blockId} .betterdocs-code-snippet-code {
179	${codePaddingMob}
180	}
181	`;
182
183	//Desktop CSS Styles
184	const desktopAllStyles = softMinifyCssStrings(`
185	${isCssExists(desktopStyles) ? desktopStyles : ''}
186	`);
187
188	//Tablet CSS Styles
189	const tabAllStyles = softMinifyCssStrings(`
190	${isCssExists(tabStyles) ? tabStyles : ''}
191	`);
192
193	//Mobile CSS Styles
194	const mobileAllStyles = softMinifyCssStrings(`
195	${isCssExists(mobileStyles) ? mobileStyles : ''}
196	`);
197
198	//Save Styles In An Object Form On Block Meta Attribute
199	useEffect(() => {
200	const styleObject = {
201	desktop: desktopAllStyles,
202	tab: tabAllStyles,
203	mobile: mobileAllStyles,
204	};
205
206	if (JSON.stringify(blockMeta) != JSON.stringify(styleObject)) {
207	setAttributes({ blockMeta: styleObject });
208	}
209	}, [attributes]);
210
211	/**
212	* resOption: __experimentalPreviewDeviceType()
213	* Set Responsive Option
214	*/
215	usePreviewDeviceType(setAttributes);
216
217	//Generate Unique Block ID For Every Block Instance
218	useEffect(() => {
219	const BLOCK_PREFIX = "betterdocs-code-snippet";
220	duplicateBlockIdFix({
221	BLOCK_PREFIX,
222	blockId,
223	setAttributes,
224	select,
225	clientId,
226	});
227	});
228
229	return (
230	<style>
231	{`
232	${desktopAllStyles}
233
234	${resOption === 'Tablet' ? tabAllStyles : ''}
235	${resOption === 'Mobile' ? mobileAllStyles : ''}
236
237	@media all and (max-width: 1024px) {
238	${tabAllStyles}
239	}
240
241	@media all and (max-width: 767px) {
242	${mobileAllStyles}
243	}
244	`}
245	</style>
246	);
247	};
248
249	export default Style;
250