Replace Grapes with Craft.js

.github/workflows/tests.yml

@@ -2,13 +2,13 @@ name: Tests
 
 on:
   push:
-    branches: [main]
+    branches: [main, feature/**]
   pull_request:
-    branches: [main]
+    branches: [main, feature/**]
   workflow_dispatch:
     inputs:
       mode:
-        description: 'Runtime Mode: "standard" or "interactive"'    
+        description: 'Runtime Mode: "standard" or "interactive"'
         required: false
         default: 'standard'
 
@@ -21,15 +21,16 @@ jobs:
         node-version: [16.x]
 
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-      - run: npm i -g [email protected]
+      - uses: actions/cache@v3
+        id: playwright-cache
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-1.28.0
       - run: npm ci
-      - run: cd lib/destack && npm run build
-      - name: Setup tmate session
-        uses: mxschmitt/action-tmate@v3
-        if: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.mode == 'interactive' }}
-      - run: npm test
+      - run: npx playwright install --with-deps
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+      - run: CI=true npm run test:e2e

.gitignore

@@ -7,6 +7,7 @@
 
 # testing
 /coverage
+test-results
 
 # next.js
 /.next/

README.md

@@ -2,7 +2,7 @@
 
 Build landing pages visually right in your React or Next.js projects. Deploy them zero further configuration!
 
-**Examples:** [prettyfunnels.com](https://www.prettyfunnels.com/landing), [Destack Online Builder](https://destack-page.vercel.app/)
+**🏭 Examples:** [prettyfunnels.com](https://www.prettyfunnels.com/landing), [getdestack.com](https://www.getdestack.com/)
 
 # Announcements
 
@@ -18,9 +18,9 @@ You can check it out at [destack-starter-beta](https://github.com/LiveDuo/destac
 
 # What's Destack?
 
-It's a tool to build landing pages within your [React](https://reactjs.org/) or [Next.js](https://nextjs.org/) projects. It's powered by [Grapes.js](https://grapesjs.com/) and includes the complete set of blocks from [Tailblocks](https://tailblocks.cc/), [Meraki UI](https://merakiui.com/) and [Hyper UI](https://www.hyperui.dev/). Supports asset uploading, form submission and a variaty of Tailwind colors. 
+It's a tool to build landing pages within your [React](https://reactjs.org/) or [Next.js](https://nextjs.org/) projects. Destack includes multiple components from [Tailblocks](https://tailblocks.cc/), [Meraki UI](https://merakiui.com/) and [Hyper UI](https://www.hyperui.dev/). It also supports image uploads and form submissions.
 
-*Destack is a tool to help you stop worrying about the marketing pages and focus on your project.*
+*Destack helps you stop worrying about marketing pages so you can focus on your project.*
 
 # Themes
 
@@ -30,7 +30,7 @@ Destack now supports theme selection.
 
  <tr>
     <td width="48%">
-    <img src="https://github.com/LiveDuo/destack/raw/main/assets/theme-modal.png"/>    
+    <img src="https://raw.githubusercontent.com/LiveDuo/destack/feature/craftjs/assets/themes/screenshot-craft.png"/>    
     Theme selection
 </td>
     <td width="48%"><img src="https://github.com/LiveDuo/destack/raw/main/assets/theme-meraki-ui.png"/>Meraki UI (<a href="https://merakiui.com/components">Components</a>)</td>
@@ -41,9 +41,10 @@ Destack now supports theme selection.
  </tr>
 </table>
 
-<p>
-<b>Tip:</b> Change theme by clicking the theme icon. <img align="center" width="80px" src="https://github.com/LiveDuo/destack/raw/main/assets/theme-icon.png"/>
-</p>
+
+### Contribute (add a new theme)
+
+There are many open source Tailwind themes that Destack can support. If you want to help adding a new theme create a new topic in [discussions](https://github.com/LiveDuo/destack/discussions) or reach out to me on [twitter](https://twitter.com/andreas_tzionis).
 
 # Features
 
@@ -53,7 +54,7 @@ There are hundreds of well designed and heavily functional blocks from [Tailbloc
 
 #### 🃏 Delightful Builder
 
-Powered by [Grapes.js](https://grapesjs.com/), a flexible and feature-full editor similar to Webflow that supports margins, paddings, borders and a lot of others CSS-like options that are familiar to developers.
+Powered by [Craft.js](https://craft.js.org/), a minimal page-builder framework. The builder was created with simplicity in mind and aims to be quickest way to build a landing page for a side-project.
 
 #### 🕹 Data Ownership
 
@@ -89,20 +90,20 @@ npm i destack
 
 Create `pages/api/builder/handle.js` and add the following:
 ```js
-export { handleData as default, config } from 'destack/build/server'
+export { handleEditor as default, config } from 'destack/build/server'
 ```
 
 ##### 3. Then create a new page
 
 On any Next.js page you want to setup Destack:
 ```js
-import 'grapesjs/dist/css/grapes.min.css'
+import 'destack/build/browser/index.css'
 export { getStaticProps } from 'destack/build/server'
 export { ContentProvider as default } from 'destack'
 ```
 
 <details>
-<summary>How to use along other components</summary>
+<summary>How to use the legacy page-builder (Grapesjs)</summary>
 <br>
 
 ```js
@@ -147,13 +148,13 @@ In `package.json`:
 
 In any React.js component you want to setup Destack:
 ```js
-import 'grapesjs/dist/css/grapes.min.css'
+import 'destack/build/browser/index.css'
 export { ContentProviderReact as default } from 'destack'
 
 ```
 
 <details>
-<summary>How to use along other components</summary>
+<summary>How to use the legacy page-builder (Grapesjs)</summary>
 <br>
 
 ```js
@@ -203,33 +204,6 @@ export default App
 - Select the image you want to update and click on it to add it to the page
 - Note: Images are uploaded to `public/uploaded` with their original filenames
 
-### Show editor in production
-
-- Install Destack to a new or existing project
-- Set `showEditorInProd={true}` in the `ContentProvider` component
-- The result should be similar to [Destack Online Builder](https://destack-page.vercel.app/)
-
-Note: this is only available for Next.js.
-
-<details>
-<summary>Code snippet</summary>
-<br>
-
-```js
-import { ContentProvider } from 'destack'
-import 'grapesjs/dist/css/grapes.min.css'
-
-export { getStaticProps } from 'destack/build/server'
-
-export default function Page(props) { 
-  return (
-    <div style={{height: '100%'}}>
-      <ContentProvider {...props} showEditorInProd={true}/>
-    </div>)
-}
-```
-</details>
-
 # Multi-page Support
 
 ### Next.js
@@ -248,7 +222,7 @@ Install a routing library such as `react-router-dom` or `router-tutorial` in the
 
 This project was nothing that was planned and design in depth in advance. Instead it was evolved out of the need and enjoyment of using some amazing tools and prototype quickly. These projects heavily improved my developer life and a few of my friends'.
 
-> Next.js 🅧 ➕ Tailwind CSS 🍃 ➕ Grapes.js 🍇 = 💣💣
+> Next.js 🅧 ➕ Tailwind CSS 🍃 ➕ Craft.js 🧶 = 💣💣
 
 Please go and show these projects some love (⭐️). 
 
@@ -262,7 +236,5 @@ Don't forget to check out [Tailblocks](https://tailblocks.cc/), [Meraki UI](http
 Made with [contributors-img](https://contrib.rocks).  
 
 # Upcoming Tasks
-- [ ] Custom tailwind.config.js file
 - [ ] Add admin UI as a Next.js route
-- [ ] Migrate to Craft.js (or similar)
 

assets/saved/RenderState.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from 'react'
+
+import Banner1 from '../themes/hyperui/Banner1'
+
+const Components = {
+  Banner1: Banner1,
+}
+
+const parse = (json, nodeId: string, parentNodeId?: string) => {
+  const childNodeNames: string[] = json[nodeId]?.nodes || []
+  const ReactComponent = Components[json[nodeId].type.resolvedName]
+  const extendedProps = { ...json[nodeId].props, parentNodeId, nodeId, key: nodeId }
+
+  if (childNodeNames.length === 0) {
+    return <ReactComponent {...extendedProps} />
+  } else {
+    const childNodes = childNodeNames.map((childNodeId) => parse(json, childNodeId, nodeId))
+    if (ReactComponent) {
+      return <ReactComponent {...extendedProps}>{childNodes}</ReactComponent>
+    } else {
+      return <div>{childNodes}</div>
+    }
+  }
+}
+
+const RenderFromState = ({ data }) => {
+  const [json, setJson] = useState(null)
+
+  useEffect(() => {
+    setJson(JSON.parse(data[0].content))
+  }, [])
+
+  return json && parse(json, 'ROOT')
+}
+export default RenderFromState

dev/nextjs-project/data/another.json

@@ -0,0 +1,12 @@
+{
+  "ROOT": {
+    "type": { "resolvedName": "Container" },
+    "isCanvas": true,
+    "props": { "width": "100%", "height": "800px" },
+    "displayName": "Container",
+    "custom": { "displayName": "App" },
+    "hidden": false,
+    "nodes": [],
+    "linkedNodes": {}
+  }
+}

dev/nextjs-project/data/grapes.json

@@ -0,0 +1 @@
+{"html":"<section class=\"text-gray-600 body-font\"><div class=\"container px-5 py-24 mx-auto\"><div class=\"text-center mb-20\"><h1 class=\"sm:text-3xl text-2xl font-medium title-font text-gray-900 mb-4\">Raw Denim Heirloom Man Braid</h1><p class=\"text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto text-gray-500s\">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi pug.</p><div class=\"flex mt-6 justify-center\"><div class=\"w-16 h-1 rounded-full bg-indigo-500 inline-flex\"></div></div></div><div class=\"flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6\"><div class=\"p-4 md:w-1/3 flex flex-col text-center items-center\"><div class=\"w-20 h-20 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5 flex-shrink-0\"><svg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 24 24\" class=\"w-10 h-10\"><path d=\"M22 12h-4l-3 9L9 3l-3 9H2\"></path></svg></div><div class=\"flex-grow\"><h2 class=\"text-gray-900 text-lg title-font font-medium mb-3\">Shooting Stars</h2><p class=\"leading-relaxed text-base\">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi pug VHS try-hard.</p><a class=\"mt-3 text-indigo-500 inline-flex items-center\">Learn More\n            <svg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 24 24\" class=\"w-4 h-4 ml-2\"><path d=\"M5 12h14M12 5l7 7-7 7\"></path></svg></a></div></div><div class=\"p-4 md:w-1/3 flex flex-col text-center items-center\"><div class=\"w-20 h-20 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5 flex-shrink-0\"><svg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 24 24\" class=\"w-10 h-10\"><circle cx=\"6\" cy=\"6\" r=\"3\"></circle><circle cx=\"6\" cy=\"18\" r=\"3\"></circle><path d=\"M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12\"></path></svg></div><div class=\"flex-grow\"><h2 class=\"text-gray-900 text-lg title-font font-medium mb-3\">The Catalyzer</h2><p class=\"leading-relaxed text-base\">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi pug VHS try-hard.</p><a class=\"mt-3 text-indigo-500 inline-flex items-center\">Learn More\n            <svg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 24 24\" class=\"w-4 h-4 ml-2\"><path d=\"M5 12h14M12 5l7 7-7 7\"></path></svg></a></div></div><div class=\"p-4 md:w-1/3 flex flex-col text-center items-center\"><div class=\"w-20 h-20 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5 flex-shrink-0\"><svg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 24 24\" class=\"w-10 h-10\"><path d=\"M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2\"></path><circle cx=\"12\" cy=\"7\" r=\"4\"></circle></svg></div><div class=\"flex-grow\"><h2 class=\"text-gray-900 text-lg title-font font-medium mb-3\">Neptune</h2><p class=\"leading-relaxed text-base\">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi pug VHS try-hard.</p><a class=\"mt-3 text-indigo-500 inline-flex items-center\">Learn More\n            <svg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 24 24\" class=\"w-4 h-4 ml-2\"><path d=\"M5 12h14M12 5l7 7-7 7\"></path></svg></a></div></div></div><button type=\"button\" class=\"flex mx-auto mt-16 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg\">Button</button></div></section>","components":"[{\"tagName\":\"section\",\"classes\":[\"text-gray-600\",\"body-font\"],\"components\":[{\"classes\":[\"container\",\"px-5\",\"py-24\",\"mx-auto\"],\"components\":[{\"classes\":[\"text-center\",\"mb-20\"],\"components\":[{\"tagName\":\"h1\",\"type\":\"text\",\"classes\":[\"sm:text-3xl\",\"text-2xl\",\"font-medium\",\"title-font\",\"text-gray-900\",\"mb-4\"],\"components\":[{\"type\":\"textnode\",\"content\":\"Raw Denim Heirloom Man Braid\"}]},{\"tagName\":\"p\",\"type\":\"text\",\"classes\":[\"text-base\",\"leading-relaxed\",\"xl:w-2/4\",\"lg:w-3/4\",\"mx-auto\",\"text-gray-500s\"],\"components\":[{\"type\":\"textnode\",\"content\":\"Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi pug.\"}]},{\"classes\":[\"flex\",\"mt-6\",\"justify-center\"],\"components\":[{\"classes\":[\"w-16\",\"h-1\",\"rounded-full\",\"bg-indigo-500\",\"inline-flex\"]}]}]},{\"classes\":[\"flex\",\"flex-wrap\",\"sm:-m-4\",\"-mx-4\",\"-mb-10\",\"-mt-4\",\"md:space-y-0\",\"space-y-6\"],\"components\":[{\"classes\":[\"p-4\",\"md:w-1/3\",\"flex\",\"flex-col\",\"text-center\",\"items-center\"],\"components\":[{\"classes\":[\"w-20\",\"h-20\",\"inline-flex\",\"items-center\",\"justify-center\",\"rounded-full\",\"bg-indigo-100\",\"text-indigo-500\",\"mb-5\",\"flex-shrink-0\"],\"components\":[{\"type\":\"svg\",\"classes\":[\"w-10\",\"h-10\"],\"attributes\":{\"fill\":\"none\",\"stroke\":\"currentColor\",\"stroke-linecap\":\"round\",\"stroke-linejoin\":\"round\",\"stroke-width\":\"2\",\"viewBox\":\"0 0 24 24\"},\"components\":[{\"tagName\":\"path\",\"type\":\"svg-in\",\"attributes\":{\"d\":\"M22 12h-4l-3 9L9 3l-3 9H2\"}}]}]},{\"classes\":[\"flex-grow\"],\"components\":[{\"tagName\":\"h2\",\"type\":\"text\",\"classes\":[\"text-gray-900\",\"text-lg\",\"title-font\",\"font-medium\",\"mb-3\"],\"components\":[{\"type\":\"textnode\",\"content\":\"Shooting Stars\"}]},{\"tagName\":\"p\",\"type\":\"text\",\"classes\":[\"leading-relaxed\",\"text-base\"],\"components\":[{\"type\":\"textnode\",\"content\":\"Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi pug VHS try-hard.\"}]},{\"type\":\"link\",\"classes\":[\"mt-3\",\"text-indigo-500\",\"inline-flex\",\"items-center\"],\"components\":[{\"type\":\"textnode\",\"content\":\"Learn More\\n            \"},{\"type\":\"svg\",\"classes\":[\"w-4\",\"h-4\",\"ml-2\"],\"attributes\":{\"fill\":\"none\",\"stroke\":\"currentColor\",\"stroke-linecap\":\"round\",\"stroke-linejoin\":\"round\",\"stroke-width\":\"2\",\"viewBox\":\"0 0 24 24\"},\"components\":[{\"tagName\":\"path\",\"type\":\"svg-in\",\"attributes\":{\"d\":\"M5 12h14M12 5l7 7-7 7\"}}]}]}]}]},{\"classes\":[\"p-4\",\"md:w-1/3\",\"flex\",\"flex-col\",\"text-center\",\"items-center\"],\"components\":[{\"classes\":[\"w-20\",\"h-20\",\"inline-flex\",\"items-center\",\"justify-center\",\"rounded-full\",\"bg-indigo-100\",\"text-indigo-500\",\"mb-5\",\"flex-shrink-0\"],\"components\":[{\"type\":\"svg\",\"classes\":[\"w-10\",\"h-10\"],\"attributes\":{\"fill\":\"none\",\"stroke\":\"currentColor\",\"stroke-linecap\":\"round\",\"stroke-linejoin\":\"round\",\"stroke-width\":\"2\",\"viewBox\":\"0 0 24 24\"},\"components\":[{\"tagName\":\"circle\",\"type\":\"svg-in\",\"attributes\":{\"cx\":\"6\",\"cy\":\"6\",\"r\":\"3\"}},{\"tagName\":\"circle\",\"type\":\"svg-in\",\"attributes\":{\"cx\":\"6\",\"cy\":\"18\",\"r\":\"3\"}},{\"tagName\":\"path\",\"type\":\"svg-in\",\"attributes\":{\"d\":\"M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12\"}}]}]},{\"classes\":[\"flex-grow\"],\"components\":[{\"tagName\":\"h2\",\"type\":\"text\",\"classes\":[\"text-gray-900\",\"text-lg\",\"title-font\",\"font-medium\",\"mb-3\"],\"components\":[{\"type\":\"textnode\",\"content\":\"The Catalyzer\"}]},{\"tagName\":\"p\",\"type\":\"text\",\"classes\":[\"leading-relaxed\",\"text-base\"],\"components\":[{\"type\":\"textnode\",\"content\":\"Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi pug VHS try-hard.\"}]},{\"type\":\"link\",\"classes\":[\"mt-3\",\"text-indigo-500\",\"inline-flex\",\"items-center\"],\"components\":[{\"type\":\"textnode\",\"content\":\"Learn More\\n            \"},{\"type\":\"svg\",\"classes\":[\"w-4\",\"h-4\",\"ml-2\"],\"attributes\":{\"fill\":\"none\",\"stroke\":\"currentColor\",\"stroke-linecap\":\"round\",\"stroke-linejoin\":\"round\",\"stroke-width\":\"2\",\"viewBox\":\"0 0 24 24\"},\"components\":[{\"tagName\":\"path\",\"type\":\"svg-in\",\"attributes\":{\"d\":\"M5 12h14M12 5l7 7-7 7\"}}]}]}]}]},{\"classes\":[\"p-4\",\"md:w-1/3\",\"flex\",\"flex-col\",\"text-center\",\"items-center\"],\"components\":[{\"classes\":[\"w-20\",\"h-20\",\"inline-flex\",\"items-center\",\"justify-center\",\"rounded-full\",\"bg-indigo-100\",\"text-indigo-500\",\"mb-5\",\"flex-shrink-0\"],\"components\":[{\"type\":\"svg\",\"classes\":[\"w-10\",\"h-10\"],\"attributes\":{\"fill\":\"none\",\"stroke\":\"currentColor\",\"stroke-linecap\":\"round\",\"stroke-linejoin\":\"round\",\"stroke-width\":\"2\",\"viewBox\":\"0 0 24 24\"},\"components\":[{\"tagName\":\"path\",\"type\":\"svg-in\",\"attributes\":{\"d\":\"M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2\"}},{\"tagName\":\"circle\",\"type\":\"svg-in\",\"attributes\":{\"cx\":\"12\",\"cy\":\"7\",\"r\":\"4\"}}]}]},{\"classes\":[\"flex-grow\"],\"components\":[{\"tagName\":\"h2\",\"type\":\"text\",\"classes\":[\"text-gray-900\",\"text-lg\",\"title-font\",\"font-medium\",\"mb-3\"],\"components\":[{\"type\":\"textnode\",\"content\":\"Neptune\"}]},{\"tagName\":\"p\",\"type\":\"text\",\"classes\":[\"leading-relaxed\",\"text-base\"],\"components\":[{\"type\":\"textnode\",\"content\":\"Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi pug VHS try-hard.\"}]},{\"type\":\"link\",\"classes\":[\"mt-3\",\"text-indigo-500\",\"inline-flex\",\"items-center\"],\"components\":[{\"type\":\"textnode\",\"content\":\"Learn More\\n            \"},{\"type\":\"svg\",\"classes\":[\"w-4\",\"h-4\",\"ml-2\"],\"attributes\":{\"fill\":\"none\",\"stroke\":\"currentColor\",\"stroke-linecap\":\"round\",\"stroke-linejoin\":\"round\",\"stroke-width\":\"2\",\"viewBox\":\"0 0 24 24\"},\"components\":[{\"tagName\":\"path\",\"type\":\"svg-in\",\"attributes\":{\"d\":\"M5 12h14M12 5l7 7-7 7\"}}]}]}]}]}]},{\"type\":\"button\",\"classes\":[\"flex\",\"mx-auto\",\"mt-16\",\"text-white\",\"bg-indigo-500\",\"border-0\",\"py-2\",\"px-8\",\"focus:outline-none\",\"hover:bg-indigo-600\",\"rounded\",\"text-lg\"],\"attributes\":{\"type\":\"button\"},\"components\":[{\"type\":\"textnode\",\"content\":\"Button\"}],\"text\":\"Button\"}]}]}]","assets":"[]","css":"* { box-sizing: border-box; } body {margin: 0;}","styles":"[]"}

dev/nextjs-project/pages/_app.js

@@ -1,3 +1,5 @@
+require('../../../lib/build/browser/index.css')
+
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />
 }

dev/nextjs-project/pages/editor.js → dev/nextjs-project/pages/another.js

@@ -1,11 +1,10 @@
-require('./styles/index.module.css')
 export { getStaticProps } from 'destack/build/server'
 import { ContentProvider } from 'destack'
 
 const Index = (props) => {
   return (
     <div style={{ height: '100%' }}>
-      <ContentProvider {...props} showEditorInProd={true} />
+      <ContentProvider {...props} />
     </div>
   )
 }

dev/nextjs-project/pages/api/builder/handle.js

@@ -1 +1 @@
-export { handleData as default, config } from 'destack/build/server'
+export { handleEditor as default, config } from 'destack/build/server'