How can I get react component html code ？ #4665

Dearest · 2022-10-14T10:48:45Z

Dearest
Oct 14, 2022

I follow those code #1970 ， I can add a react component to canvas. But how can I get html code use editor.getHtml()?
https://codesandbox.io/s/grapesjs-react-components-n6sff

I want to get a static html file

now, I only can get this

> editor.getHtml()
'<body><div>Hello Components</div><Listing user="[object Object]" editable><div></div></Listing></body>'

the <Listing /> is a react componet 。

component.addType('react-component', {
  model: {
    // How should I rewrite this method ？
    toHTML(opts = {}) {
      this.attributes.tagName = this.attributes.type
      return defaultModel.prototype.toHTML.apply(this, opts)
    },
  },
})

the full code I use to render react component

import { createRoot } from 'react-dom/client'
import React from 'react'
import grapesjs from 'grapesjs'

const BaseReactComponent = (editor: grapesjs.Editor) => {
  const component = editor.Components
  const defaultType = component.getType('default')
  const defaultModel = defaultType.model
  const wrapperChild = 'data-child'

  // Main React component
  component.addType('react-component', {
    model: {
      toHTML(opts = {}) {
        this.attributes.tagName = this.attributes.type
        return defaultModel.prototype.toHTML.apply(this, opts)
      },
    },
    view: {
      tagName: 'div',

      init() {
        const { model } = this
        this.listenTo(model, 'change:attributes', this.render)
        this.listenTo(model.components(), 'add remove reset', this.__upRender)
      },

      getChildrenContainer() {
        const { childrenContainer } = this
        if (childrenContainer) return childrenContainer

        this.childrenContainer = document.createElement('childc')

        return this.childrenContainer
      },

      /**
       * We need this container to understand if the React component is able
       * to render children
       */
      createReactChildWrap() {
        return React.createElement('span', { [wrapperChild]: true })
      },

      createReactEl(cmp, props) {
        return React.createElement(cmp, props, this.createReactChildWrap())
      },

      mountReact(cmp, el) {
        // ReactDOM.render(cmp, el)
       // for React 18
        createRoot(el).render(cmp)
      },

      render() {
        const { model, el } = this
        this.updateAttributes()
        this.renderChildren()
        const reactEl = this.createReactEl(model.get('component'), {
          ...model.get('attributes'),
        })
        this.mountReact(reactEl, el)
        const child = el.querySelector(`span[${wrapperChild}]`)

        // If the container is found, the react component is able to render children
        if (child) {
          const childContainer = this.getChildrenContainer()
          while (childContainer.firstChild) {
            child.appendChild(childContainer.firstChild)
          }
        }

        return this
      },

      __upRender() {
        clearTimeout(this._upr)
        this._upr = setTimeout(() => this.render())
      },
    },
  })
}

export default BaseReactComponent

avin-madhu · 2022-10-16T14:54:42Z

avin-madhu
Oct 16, 2022

There are two ways actually:
You can use renderToString of react-dom/server and use it like

import ReactDOMServer from 'react-dom/server'
const htmlString = ReactDOMServer.renderToString(<App />)

Two points know:

ReactDOMServer is used for SSR (Server Side Rendering) of react components.
renderToString converts your React component to string. So, You will get string html from JSX of your component.

0 replies

Navigation Menu

Uh oh!

Uh oh!

How can I get react component html code ？ #4665

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Uh oh!

How can I get react component html code ？ #4665

Uh oh!

Uh oh!

Dearest Oct 14, 2022

Replies: 1 comment

Uh oh!

avin-madhu Oct 16, 2022

Dearest
Oct 14, 2022

avin-madhu
Oct 16, 2022