How to use the @remirror/core.fromHTML function in @remirror/core

// Check whether the editable prop has been updated
    if (this.props.editable !== editable && this.view && this.editorRef) {
      this.view.setProps({ ...this.view.props, editable: () => this.props.editable });
    }

    // Check if the manager has changed
    if (!prevManager.isEqual(this.props.manager)) {
      this.updateExtensionManager();
      this.view.setProps({ ...this.view.props, nodeViews: this.manager.data.nodeViews });

      // The following converts the current content to HTML and then uses the
      // new manager schema to convert it back into a ProsemirrorNode for
      // compatibility with the new manager.
      const htmlString = toHTML({ node: this.state.editor.newState.doc, schema: prevManager.schema });
      const newContent = fromHTML({ schema: this.manager.schema, content: htmlString, doc: this.doc });
      this.setContent(newContent, true);
    }

    const { newState } = this.state.editor;

    // Check if this is controlled component and run the post update handler
    if (this.props.onStateChange && newState !== prevState.editor.newState) {
      // The update was caused by an internal change
      this.controlledUpdate(newState);
    }
  }

it('parses the dom structure and finds itself', () => {
    const node = fromHTML({
      schema,
      content: `<a data-mention-name="${attrs.name}" data-mention-id="${attrs.id}" class="mention mention-at">${attrs.label}</a>`,
    });
    const expected = doc(p(mention(attrs.label)));
    expect(node).toEqualProsemirrorNode(expected);
  });
});

it('it can parse content', () => {
    ({ schema } = createBaseTestManager([{ extension: new ParagraphExtension(), priority: 1 }]));
    ({ doc, p } = pmBuild(schema, {
      p: { nodeType: 'paragraph', indent: 1, align: 'right', lineSpacing: '100%', id: 'never' },
    }));
    const node = fromHTML({
      content: `<p id="never" style="text-align: right; line-height: 100%;" data-indent="1">hello</p>`,
      schema,
    });
    const expected = doc(p('hello'));
    expect(node).toEqualProsemirrorNode(expected);
  });

it('parses the dom structure and finds itself', () => {
    const node = fromHTML({
      schema,
      content: `<pre><code data-code-block-language="${attrs.language}" class="language-${attrs.language}">${content}</code></pre>`,
    });
    const expected = doc(codeBlock(content));
    expect(node).toEqualProsemirrorNode(expected);
  });
});

it('it can parse content', () => {
    const node = fromHTML({ content: '<h2>Hello</h2>', schema });
    const expected = doc(h2('Hello'));
    expect(node).toEqualProsemirrorNode(expected);
  });

it('it can parse content', () => {
    const node = fromHTML({
      content: `<p><a href="${href}">link</a></p>`,
      schema,
    });
    const expected = doc(p(a('link')));
    expect(node).toEqualProsemirrorNode(expected);
  });

test('can parse the dom structure and find itself', () => {
  const node = fromHTML({
    schema,
    content: '<a data-mention-at-id="awesome" class="mention mention-at">@awesome</a>',
  });
  const expected = doc.create(
    {},
    paragraph.create({}, mentionAt.create({ id: 'awesome', label: '@awesome' })),
  );
  expect(node).toEqualRemirrorDocument(expected as any);
});