Any way to use as an ES6 super class?

[guncha]

The library would be much easier to use with Typescript if it was possible to use it as a super class. E.g.,

import {GSAPComponent} from "react-gsap-enhancer"

class MyComponent extends GSAPComponent {
  componentDidMount(prevProps, prevState) {
    super.componentDidMount(prevProps, prevState)
    this.myController = this.addAnimation(...)
  }
  render() {
    // I understand that the enhancer render function needs to add refs, so
    // perhaps the API can be something like this:
    super.render(() => {
      // the usual render function business..
      return <div... />
    })
  }
}

[Mr0grog]

Interesting! It's very subtle, but in the second block, the space between the two words has been formatted to use Arial as the font instead of Roboto Mono. I didn't even realize you could do that with the code blocks feature in Google Docs.

So what's happening here is that, when you copy/paste from a Google Doc, it loses information about code blocks. We detect that something was probably a block by looking for lines that are all monospaced (relevant code: convert monospaced to code, then later looking for lines that are all code) since we can't actually see if it was a "code block" object from Google Docs. In other words, we look for something like this in HTML:

<p><span style="font-family: monospace;">foo bar</span></p>

Since the second block in this doc has a non-monospaced bit of text in the middle, it comes through as a line with mixed mono and non-mono text, and we interpret it as a paragraph with some normal text and some inline mono, or code. E.g. we see something like this in the doc:

<p>
  <span style="font-family: monospace;">foo</span>
  <span style="font-family: Arial;"> </span>
  <span style="font-family: monospace;">bar</span>
</p>

I think we could potentially work around this by ignoring the formatting of space characters when detecting code blocks, but you'd still run into a similar problem if you formatted some text differently in the code block.

---

An aside: when you copy from a Google Doc, it puts 3 different versions of the text you copied on your clipboard. Plain text for basic text editors to use, HTML for other applications that understand rich formatting, and a special in-memory format for pasting back into that or another Google Doc and that is different from how a doc looks in Google's APIs. We use the HTML because it's meant for third-party tools and because I’m a little worried about both the stability and complexity of the third format. But the HTML version is a little lossy in terms of how it represents things, leading to stuff like this.