block editor - applyformat in gutenberg doesnt work and no errors

admin管理员组

文章数量:1394210

I am trying to apply a format to the selected text, but the apply format method of gutenberg doesnt return any error and fails silently.

I am registering my format type like this

import { registerFormatType } from "@wordpress/rich-text";

registerFormatType(BLOCK_NAME, {
          title: "Answer",
          tagName: "span",
          className: SOME_CLASS
        });

and trying to apply like this

    on(SOME_EVENT, result => {
    applyFormat(props.value, { type: BLOCK_NAME });
}

The applyformat method doesn't throw any errors but when i try to apply the format to the text selection it didnt create the wrapper around it.It fails silently, any reason why its not working?

Update: I did a console.log on result from apply format, but it didnt return the formatted text.

const result = applyFormat(props.value, { type: BLOCK_NAME });
console.log(result)

props.value in console

{formats: Array(16), text: "qwe qwewq eqweq?", start: 4, end: 11}

value of result from applyFormat

{formats: Array(16), text: "qwe qwewq eqweq?", start: 4, end: 11}

I expect the applyFormat to add a span with a class name around the selected text, what am i doing wrong in the code?

I am trying to apply a format to the selected text, but the apply format method of gutenberg doesnt return any error and fails silently.

I am registering my format type like this

import { registerFormatType } from "@wordpress/rich-text";

registerFormatType(BLOCK_NAME, {
          title: "Answer",
          tagName: "span",
          className: SOME_CLASS
        });

and trying to apply like this

    on(SOME_EVENT, result => {
    applyFormat(props.value, { type: BLOCK_NAME });
}

The applyformat method doesn't throw any errors but when i try to apply the format to the text selection it didnt create the wrapper around it.It fails silently, any reason why its not working?

Update: I did a console.log on result from apply format, but it didnt return the formatted text.

const result = applyFormat(props.value, { type: BLOCK_NAME });
console.log(result)

props.value in console

{formats: Array(16), text: "qwe qwewq eqweq?", start: 4, end: 11}

value of result from applyFormat

{formats: Array(16), text: "qwe qwewq eqweq?", start: 4, end: 11}

I expect the applyFormat to add a span with a class name around the selected text, what am i doing wrong in the code?

• block-editor

Share Improve this question edited Feb 24, 2020 at 7:18 Naveen asked Feb 21, 2020 at 9:59 NaveenNaveen 12733 bronze badges 3

• Can you expand your code snippets to include more? It's unclear how/where you're calling applyFormat. By trying to hide what you're doing you've made it too generic – Tom J Nowell ♦ Commented Feb 21, 2020 at 10:55
• @TomJNowell I am calling it inside a event handler, which i can assure getting triggered ( i didnt hide it intentionally, i just wanted to provide a mwe (stackoverflow/help/minimal-reproducible-example)), i am adding some data again to the post. – Naveen Commented Feb 21, 2020 at 11:36
• 1 @TomJNowell added some more details to the snippet. – Naveen Commented Feb 21, 2020 at 11:47

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

You won't see applied format in result's text attribute, however your result should have new activeFormats attribute. To get HTML with applied formats you can use wp.richText.toHTMLString({result}). This answer might help with some ideas.

Alright, after 5 hrs i have learnt this, you need to call applyFormat inside the props.onChange method, so the code would look like this

props.onChange( applyFormat(props.value, { type: BLOCK_NAME }) );

if you didnt execute the applyformat inside this props.onChange, no error would be thrown, but it would fail silently.

本文标签： block editorapplyformat in gutenberg doesnt work and no errors