balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

editor.js (3010B)

      1 /**
      2  * WordPress dependencies.
      3  */
      4 const { __ } = wp.i18n;
      5 
      6 const {
      7 	Fragment,
      8 	useEffect,
      9 	useRef
     10 } = wp.element;
     11 
     12 const CSSEditor = ({
     13 	                   attributes,
     14 	                   setAttributes,
     15 	                   clientId
     16                    }) => {
     17 	useEffect( () => {
     18 		let classes = getClassName();
     19 
     20 		if ( attributes.customCSS ) {
     21 			const generatedCSS = ( attributes.customCSS ).replace( /.ticss-[a-zA-Z0-9_-]*/g, 'selector' );
     22 			customCSSRef.current = generatedCSS;
     23 		} else {
     24 			customCSSRef.current = 'selector {\n}\n';
     25 		}
     26 
     27 		editorRef.current = wp.CodeMirror( document.getElementById( 'redux-css-editor' ), {
     28 			value: customCSSRef.current,
     29 			autoCloseBrackets: true,
     30 			continueComments: true,
     31 			lineNumbers: true,
     32 			lineWrapping: true,
     33 			matchBrackets: true,
     34 			lint: true,
     35 			gutters: [ 'CodeMirror-lint-markers' ],
     36 			styleActiveLine: true,
     37 			styleActiveSelected: true,
     38 			extraKeys: {
     39 				'Ctrl-Space': 'autocomplete',
     40 				'Alt-F': 'findPersistent',
     41 				'Cmd-F': 'findPersistent'
     42 			}
     43 		});
     44 
     45 		editorRef.current.on( 'change', () => {
     46 			const regex = new RegExp( 'selector', 'g' );
     47 			const generatedCSS = editorRef.current.getValue().replace( regex, `.${ classArRef.current }` );
     48 			customCSSRef.current = generatedCSS;
     49 
     50 			if ( ( 'selector {\n}\n' ).replace( /\s+/g, '' ) === customCSSRef.current.replace( /\s+/g, '' ) ) {
     51 				return setAttributes({ customCSS: null });
     52 			}
     53 
     54 			setAttributes({ customCSS: customCSSRef.current });
     55 		});
     56 	}, []);
     57 
     58 	useEffect( () => {
     59 		let classes = getClassName();
     60 
     61 		setAttributes({
     62 			hasCustomCSS: true,
     63 			className: classes
     64 		});
     65 	}, [ attributes ]);
     66 
     67 	const getClassName = () => {
     68 		let classes;
     69 
     70 		const uniqueId = clientId.substr( 0, 8 );
     71 
     72 		if ( null !== customCSSRef.current && ( 'selector {\n}\n' ).replace( /\s+/g, '' ) === customCSSRef.current.replace( /\s+/g, '' ) ) {
     73 			return attributes.className;
     74 		}
     75 
     76 		if ( attributes.className ) {
     77 			classes = attributes.className;
     78 
     79 			if ( ! classes.includes( 'ticss-' ) ) {
     80 				classes = classes.split( ' ' );
     81 				classes.push( `ticss-${ uniqueId }` );
     82 				classes = classes.join( ' ' );
     83 			}
     84 
     85 			classArRef.current = classes.split( ' ' );
     86 			classArRef.current = classArRef.current.find( i => i.includes( 'ticss' ) );
     87 		} else {
     88 			classes = `ticss-${ uniqueId }`;
     89 			classArRef.current = classes;
     90 		}
     91 
     92 		return classes;
     93 	};
     94 
     95 	const editorRef = useRef( null );
     96 	const customCSSRef = useRef( null );
     97 	const classArRef = useRef( null );
     98 
     99 	return (
    100 		<Fragment>
    101 			<p>{ __( 'Add your custom CSS.' ) }</p>
    102 
    103 			<div id="redux-css-editor" className="redux-css-editor"/>
    104 
    105 			<p>{ __( 'Use' ) } <code>selector</code> { __( 'to target block wrapper.' ) }</p>
    106 			<p>{ __( '' ) }</p>
    107 			<p>{ __( 'Example:' ) }</p>
    108 
    109 			<pre className="redux-css-editor-help">
    110 				{ 'selector {\n    background: #000;\n}\n\nselector img {\n    border-radius: 100%;\n}'}
    111 			</pre>
    112 
    113 			<p>{ __( 'You can also use other CSS syntax here, such as media queries.' ) }</p>
    114 		</Fragment>
    115 	);
    116 };
    117 
    118 export default CSSEditor;