gutenberg_span-1.0.1/blocks/span/index.js

import spanIcon  from './components/span-icon';
import { RichTextToolbarButton  } from '@wordpress/block-editor';
import { applyFormat, toggleFormat } from '@wordpress/rich-text';
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Popover} from '@wordpress/components';
import { TextControl } from '@wordpress/components';


const MyPopover = ({ isActive, onChange, value }) => {
  const [ isVisible, setIsVisible ] = useState( false );
    const toggleVisible = () => {
        setIsVisible( ( state ) => ! state );
    };
};




const Span = {
  title: 'Infobulle',
  tagName: 'span',
  className: 'custom-span',
  attributes: {
    //caption: 'data-caption',
    class: 'class'    
  },  
  edit: ( props ) => {
    //const anchorRef = useAnchor( { editableContentElement: contentRef.current, value } );
console.log('props', props)
//console.log('attributes', props.activeAttributes.caption)
var isActive = props.isActive;
var value = props.value;
var onChange = props.onChange;
var attributes = props.attributes;
    const [ isVisible, setIsVisible ] = useState( false );
    const toggleVisible = () => { 
      setIsVisible( ( state ) => ! state ); console.log(isVisible, isActive);
    };
    const highlighterIcon = spanIcon;

    const [ popoverAnchor, setPopoverAnchor ] = useState(props.contentRef.current);

    return (
      <>
        <RichTextToolbarButton
            icon={ highlighterIcon }
            title={ __( 'Span', 'gutenberg-span' ) }
            isActive={ isActive }
            onClick={ () => { 
              onChange(
                  toggleFormat( value, {
                      type: 'gutenberg-span/span-output',
                  }
                  )
                  
              ); 
              
              //console.log('value', value)
              //console.log('attributes', props.activeAttributes.caption)
              //console.log('attributes', props.activeAttributes.class)
              //toggleVisible(); console.log('iic', isVisible, isActive)
            } }
        />
        { isActive && <Popover
        anchor={ popoverAnchor }
        headerTitle="Class CSS"
        position='top left'
        className= "block-editor-url-popover"
        >
          <div class="block-editor-link-control">
          <TextControl 
          label="Class"
          className="block-editor-link-control__field block-editor-link-control__text-content"
          value = { props.activeAttributes.class || '' }
          onChange={ 
            (classCss) => { //setClassCss(classCss) 
                //console.log(value) 
                //console.log('classCss', classCss) 
                //console.log('attributes', props.activeAttributes.caption)
                //console.log('attributes', props.activeAttributes.class)
                //console.log('attributes', props.activeObjectAttributes.class)
                //console.log('props', props)
                //props.activeAttributes({ caption: value })
                //props.activeAttributes.class = value
                var newval = applyFormat(
                  value,
                  {
                    type: 'gutenberg-span/span-output',
                    attributes: {
                      //caption: classCss,
                      class: classCss
                    }
                  }
                );
                props.onChange( newval );
              }
          }
          
          />
          </div>
        </Popover> }
        
      </>
    );
  },
};


export default Span;