WordPress Gutenberg Block State Issue

Question

Я написал базовый блок формата c, который собирает текст и необязательное значение ссылки для создания новой встроенной сноски. Это представлено элементом img в выводе блока:

<img data-footnote-text="Foo bar baz" data-footnote-link="https://www.google.com/" data-widget="footnote" src="/wp-content/themes/mbm-custom-theme/bookmark.svg" class="footnote-placeholder">

Я сталкиваюсь с проблемой, когда несколько блоков формата сноски в пределах одного абзаца заканчивают состояние совместного использования , Какая бы сноска ни была выбрана первой, по-видимому, устанавливается состояние, которое затем используется всеми другими сносками в том же блоке абзаца. Например, в следующем примере обе сноски будут иметь текст «Foo bar baz», если первая сноска выбрана первой, и «» (пустая строка), если вторая сноска выбрана первой:

<!-- wp:paragraph --> <p>Trust fund jean shorts viral, deep v beard craft beer lomo yr gastropub brooklyn kale chips wayfarers dreamcatcher bushwick.<img data-footnote-text="Foo bar baz" data-footnote-link="https://www.google.com/" data-widget="footnote" src="/wp-content/themes/mbm-custom-theme/bookmark.svg" class="footnote-placeholder"> Next level 8-bit cornhole salvia cliche health goth bicycle rights stumptown fanny pack williamsburg. Thundercats brooklyn swag drinking vinegar tacos dreamcatcher.<img data-widget="footnote" src="/wp-content/themes/mbm-custom-theme/bookmark.svg" data-footnote-text="" data-footnote-link="" class="footnote-placeholder"> Cloud bread activated charcoal godard vegan knausgaard, portland twee. YOLO ennui air plant truffaut.</p> <!-- /wp:paragraph -->

Надеясь, что кто-то имеет некоторое представление об этой проблеме.

    registerFormatType,
    toggleFormat,
    insertObject,
  } = wp.richText;
  const {
    RichTextToolbarButton,
    RichTextShortcut,
  } = window.wp.editor;
  const {
    TextControl,
    TextareaControl,
    Popover,
    Button,
  } = wp.components;
  const { Component, Fragment } = wp.element;
  const { __ } = wp.i18n;

  function getRange() {
    const selection = window.getSelection();
    return selection.rangeCount ? selection.getRangeAt( 0 ) : null;
  }
  const stopKeyPropagation = ( event ) => event.stopPropagation();

  const formatHandle = 'lucida/footnote-format';

  class FootnoteEditor extends Component {
    constructor() {
      super(...arguments);
      this.state = {
      };
    }

    static getDerivedStateFromProps( props, state ) {
        const {
            activeObjectAttributes,
        } = props;

        // if ( activeObjectAttributes.footnoteText === state.prevFootnoteText ) {
        //  return null;
        // }
      //
        // if ( ! activeObjectAttributes.footnoteText ) {
        //  return {
        //      footnoteText: undefined,
        //      prevFootnoteText: activeObjectAttributes.footnoteText,
        //  };
        // }

      const newState = {
            footnoteText: activeObjectAttributes.footnoteText,
            // prevFootnoteText: activeObjectAttributes.footnoteText,
            footnoteLink: activeObjectAttributes.footnoteLink,
            // prevFootnoteLink: activeObjectAttributes.footnoteLink,
        };
        return newState;
    }

    onKeyDown( event ) {
        if (
            [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ].indexOf(
                event.keyCode
            ) > -1
        ) {
            // Stop the key event from propagating up to ObserveTyping.startTypingInTextField.
            event.stopPropagation();
        }
    }

    onChange(newValues) {
        this.setState( { ...newValues } );
    }
    render() {
      const {
        onChange,
        value,
        // isActive,
            isObjectActive,
            activeObjectAttributes,
      } = this.props;
      const {
        footnoteText,
        footnoteLink,
      } = this.state;

      // console.log(`state:`, this.state)

      return (
        <Fragment>
          <RichTextToolbarButton
            icon='book-alt'
            title='Footnote'
            onClick={() => {
              // console.log(`inserting element 2`);
              onChange(
                insertObject(
                  value,
                  {
                                type: formatHandle,
                                attributes: {
                                    'data-widget': `footnote`,
                      src: '/wp-content/themes/mbm-custom-theme/bookmark.svg',
                                },
                            }
                )
              );
            }}
            isActive={isObjectActive}
          />
          { isObjectActive && (
                    <Popover
                        position="bottom center"
                        focusOnMount={ false }
                        anchorRef={ getRange() }
                    >
              <form
                onKeyPress={ stopKeyPropagation }

                // onKeyDown={ this.onKeyDown }

                onSubmit={ ( event ) => {
                  event.preventDefault();

                  const newReplacements = value.replacements.slice();

                  const newAttributes = {
                    ...activeObjectAttributes,
                    src: '/wp-content/themes/mbm-custom-theme/bookmark.svg',
                    'data-widget': `footnote`,
                    'data-footnote-text': footnoteText,
                    'data-footnote-link': footnoteLink,
                  };

                  // console.log(`newAttributes:`, newAttributes)

                  newReplacements[ value.start ] = {
                    type: formatHandle,
                    attributes: newAttributes,
                  };

                  onChange( {
                    ...value,
                    replacements: newReplacements,
                  } );
                } }
              >
                <div
                  style={{
                    padding: '12px',
                  }}
                >
                  <TextareaControl
                    label={ __( 'Footnote description' ) }
                    value={ footnoteText }
                    onChange={(value) => this.onChange({footnoteText: value}) }
                  />
                  <TextControl
                    label={ __( 'Source link (optional)' ) }
                    value={ footnoteLink }
                    onChange={(value) => this.onChange({footnoteLink: value}) }
                    style={{marginBottom: '0', }}
                  />
                  <Button
                    isPrimary
                    isSmall
                    icon='yes'
                    label={ __( 'Apply' ) }
                    type="submit"
                  >
                    { __( 'Apply' ) }
                  </Button>
                </div>
              </form>
                    </Popover>
                ) }
        </Fragment>
      )
    }
  }

  registerFormatType(
    formatHandle,
    {
      title: 'Footnote',
      object: true,
      tagName: 'img',
      className: 'footnote-placeholder',
        attributes: {
            footnoteText: 'data-footnote-text',
            footnoteLink: 'data-footnote-link',
        },
      edit: FootnoteEditor,
    }
  );```