Netlify-cms: gatsby-plugin-netlify-cms - registerPreviewStyle

[pungggi]

Is there any possibility to use a css in js solution like styled components with the preview?

At the moment there is no style applied and registerPreviewStyle does just link to a css file..

[robertkarlsson]

See this issue:

https://github.com/netlify/netlify-cms/issues/793

I made a solution for styled components (not the prettiest) based on the discussion in that thread, see below.

This is in my cms.js where i register the previews:

import { StyleSheetManager } from 'styled-components'

//Component used to Enable netlify CMS to apply the styles added through styled-components
class CSSInjector extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      iframeRef: ''
    }
  }

  componentDidMount() {
    const iframe = document.querySelector(".nc-previewPane-frame")
    const iframeHeadElem = iframe.contentDocument.head;
    this.setState({ iframeRef: iframeHeadElem })
  }

  render() {
    return (
      <div>
        { this.state.iframeRef && (
          <StyleSheetManager target={this.state.iframeRef}>
            { this.props.children }
          </StyleSheetManager>
        )}
      </div>
    )
  }
}

//Used like
CMS.registerPreviewTemplate('index', props => (
  <CSSInjector>
    <IndexPagePreview {...props} />
  </CSSInjector>
))

[tech4him1]

Duplicate of #793.

[tech4him1]

Also note you can now pass strings into registerPreviewStyle: https://www.netlifycms.org/docs/beta-features/#raw-css-in-registerpreviewstyle.

[pungggi]

this solution does not work with v2:

this might be the problem: const iframe = document.querySelector(".nc-previewPane-frame");

[joserocha3]

Replace the first line in componentDidMount with

const iframe = document.getElementsByTagName('iframe')[0]

[a8t]

Here, implemented with hooks!

import React, { useState, useEffect } from 'react';
import { StyleSheetManager } from 'styled-components';

function StyleInjector({ children }) {
  const [iframeRef, setIframeRef] = useState(null);

  useEffect(() => {
    const iframe = document.getElementsByTagName('iframe')[0];
    const iframeHeadElem = iframe.contentDocument.head;
    setIframeRef(iframeHeadElem);
  }, []);

  return (
    iframeRef && (
      <StyleSheetManager target={iframeRef}>{children}</StyleSheetManager>
    )
  );
}

export default function withStyledComponentsRendered(Comp) {
  return props => (
    <StyleInjector>
      <Comp {...props} />
    </StyleInjector>
  );
}

and usage:

CMS.registerPreviewTemplate(
  'index',
  withStyledComponentsRendered(IndexPagePreview)
);

I'm now getting another problem now with a forever-loading StaticQuery. Not sure if it's related yet...
(another edit -- the above was because I was trying to access the CMS locally instead of on netlify)

[tbntdima]

@a8t, have you thought of putting this in a separate package, would be pretty nice? 🙂