Typescript.js in Netlify CMS Custom Previews

Netlify CMS
1

Is it possible to get typescript.js to show styles in Netlify CMS’s editor?

2

Hi @byebyers, not sure I fully understand you question but you can register CSS styles to be used in the editor preview:

3

Hey @erez, apologies for this is really confusing.

:person_facepalming: What I meant was typography.js from gatsby-plugin-typography

Its a javascript solution to theming typography for websites made by the creator of Gatsby. Link to the repo.

The plugin essential creates this tag in the head section

<style id="typography.js"></style>

And inlines the styling there. I wanted to give this a shot however I don’t think I can register this styling as a preview. Nor do I think I can register this a widget either. The js file for theming looks like this.

import Typography from "typography"
import kirkhamTheme from "typography-theme-kirkham"

const typography = new Typography(kirkhamTheme)

export default typography
export const rhythm = typography.rhythm

and is registered in the Gatsby config file like this

{
  resolve: `gatsby-plugin-typography`,
  options: {
    pathToConfigModule: `src/utils/typography`,
  },
},

I wanted to double-check though since I am new to Gatsby, Netlify, and React in general. Is it even possible to add something like this?

4

I think you should be able to export that style as a string using JavaScript and register it via registerPreviewStyle as a raw string, maybe by doing typography.toString() as described here:
https://kyleamathews.github.io/typography.js/

5

Thank you @erez, I am getting the hang of this. The raw string method did work. For those who want to know I had to add the following lines to my CMS.js file

import typography from '../utils/typography'

CMS.registerPreviewStyle(typography.toString(), { raw: true })

importing typography from ‘…/utils/typography’ means I get to keep my theme in the editor and typography.toString() was reference in the typography.js documentation.

1 Like