Постоянно применять формат, используя диапазон (начальный и конечный индекс) в блоке WordPress Gutenberg

Я работаю над плагином боковой панели Gutenberg, который выполняет некоторый анализ текста и, исходя из этого, должен аннотировать текст в блоках абзацев. Это более простая часть, и она достигается с помощью аннотаций. API, перебирая каждый блок следующим образом:

wp.data.dispatch( 'core/annotations' ).__experimentalAddAnnotation( {
    source: "my-annotations-plugin",
    blockClientId: wp.data.select( 'core/editor' ).getBlockOrder()[0],
    richTextIdentifier: "content",
    range: {
        start: 50,
        end: 100,
    },
} );

Теперь проблема, с которой я столкнулся, заключается в том, чтобы сохранить эти аннотации (поскольку это требование плагина). Я понял, что API аннотаций внутренне использует applyFormat метод пакета @ wordpress / rich-text, но я не могу понять, как использовать applyFormat напрямую. Документация неадекватна, в ней отсутствуют примеры кода.

Если вы работали с этим, было бы полезно иметь образец рабочего (ES5 или ES6) кода для правильного использования applyFormat.


wordpress wordpress-gutenberg
person Akshay Raje    schedule 15.01.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я наконец-то понял. Просто разместите его здесь, если кому-то нужно это сделать, поскольку в документации Гутенберга нет примеров кода.

Что касается приведенного ниже кода, blockIndex - это блок, с которым вы имеете дело; и startIndex и endIndex - это диапазоны для аннотирования в контексте блока:

// Get latest modified content of the block
let html = wp.data.select( "core/editor" ).getBlocks()[blockIndex].attributes.content;
// Get uuid of the block
let blockUid = wp.data.select( "core/editor" ).getBlocks()[blockIndex].clientId;
// Create a RichText value from HTML string of block content
let value = wp.richText.create({
  html
});
// Apply a format object to a Rich Text value from the given startIndex to the given endIndex
value = wp.richText.applyFormat(value, { type: 'strong' }, startIndex, endIndex);
// Update the block with new content
wp.data.dispatch( 'core/editor' ).updateBlock( blockUid, {
    attributes: {
      content: wp.richText.toHTMLString({
        value
      })
    }
  } );
person Akshay Raje    schedule 17.01.2019