CODEWITHSUNDEEP
javascriptreactjshtml5-canvashtml2canvasgrommet
Anton Serov
Anton Serov

Reputation: 301

Grommet TextArea exports multiline text as a single line in the image

I want to export Grommet TextArea as an image. The following code works if there is just a single line of text. But if I adjust the TextArea component in a way to make the text fill multiple lines, this won't be exported in the output image.

This is how it looks (1 - is the page which contains the multiline TextArea I want to export, 2 - the exported TextArea, containing just a single line of text) enter image description here

Seems like I'm just missing something about HTML canvas. Or maybe there is some property in Grommet TextArea which helps with changing that behavior?

App.js:

import React, { Component } from "react";
import { TextArea } from "grommet";
import "./styles.css";
import { exportComponentAsPNG } from "react-component-export-image";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.textRef = React.createRef();

    this.state = { text: "" };
  }

  render() {
    const { text } = this.state;
    return (
      <div className="App">
        <TextArea
          ref={this.textRef}
          value={text}
          onChange={(event) => this.setState({ text: event.target.value })}
        />
        <button onClick={() => exportComponentAsPNG(this.textRef)}>
          Click
        </button>
      </div>
    );
  }
}

index.js:

import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

index.html:

<div id="root"></div>

Upvotes: 0

Views: 518

Answers (2)

Anton Serov
Anton Serov

Reputation: 301

The issue came out from html2canvas library, which is a core of react-component-export-image. There are a couple of threads for this issue in the html2canvas community, including this one (the main one, I guess): https://github.com/niklasvh/html2canvas/issues/2008

The best solution (which also helped in my case) is to use contenteditable div instead of textarea element

Upvotes: 1

Shimi
Shimi

Reputation: 1218

I think that the issue lay in the way the image is being exported. I created a quick test using only 'textarea' of HTML instead of the Grommet TextArea component and the issue still occurs: enter image description here

I've verified that the behavior you've described is the expected behavior from react-component-export-image package by running the HTML example on their demo app, and it seems that this is their core functionality behavior. You might want to file an enhancement request that asks to support multiline screenshots. Here is the screenshot example from running the HTML example on their demo app:

enter image description here

Upvotes: 2

Related Questions