Integrating GrapesJS tui image editor

JeremyZXi

Hi Silex community,
I am trying to enhance the image related function, but I encountered several issues while integrating the GrapesJS plugin grapesjs-tui-image-editor. I added it to the client-side by modifying the index.ts file at Silex/src/ts/client/grapesjs/index.ts.

import tuiImage from 'grapesjs-tui-image-editor';
// original code
const plugins = [
  { name: 'grapesjs-tui-image-editor', value: tuiImage },
// rest of the code

The UI and functionality work well and appear in the editor.

screenshot

However, I encountered the following issue when trying to publish a page that contains a image edited by the tui image editor to file system hosting:

PayloadTooLargeError: request entity too large
    at readStream (/Users/xiyan.zhang/IdeaProjects/silex_test4/Silex/node_modules/raw-body/index.js:163:17)
    at getRawBody (/Users/xiyan.zhang/IdeaProjects/silex_test4/Silex/node_modules/raw-body/index.js:116:12)
    at read (/Users/xiyan.zhang/IdeaProjects/silex_test4/Silex/node_modules/body-parser/lib/read.js:79:3)
    at jsonParser (/Users/xiyan.zhang/IdeaProjects/silex_test4/Silex/node_modules/body-parser/lib/types/json.js:138:5)
    at Layer.handle [as handle_request] (/Users/xiyan.zhang/IdeaProjects/silex_test4/Silex/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/xiyan.zhang/IdeaProjects/silex_test4/Silex/node_modules/express/lib/router/index.js:328:13)
    at /Users/xiyan.zhang/IdeaProjects/silex_test4/Silex/node_modules/express/lib/router/index.js:286:9
    at Function.process_params (/Users/xiyan.zhang/IdeaProjects/silex_test4/Silex/node_modules/express/lib/router/index.js:346:12)
    at next (/Users/xiyan.zhang/IdeaProjects/silex_test4/Silex/node_modules/express/lib/router/index.js:280:10)
    at compression (/Users/xiyan.zhang/IdeaProjects/silex_test4/Silex/node_modules/compression/index.js:220:5)

Another error I ran into was

An error occured, your site is not published. Error publishing the website. ENAMETOOLONG: name too long, open '/Users/xiyan.zhang/IdeaProjects/silex_test4/Silex/silex/default/assets/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAT4AAACzCAYAAAAQYXCCAAAAAXNSR0IArs4c6QAAIABJREFUeF7dnQm8ZVlV3vcbauyunulucERUECFxQIxzjIgRx8RZ0AQ1DAZRo0bFqIiAA4KKoCZqFMWIiRocQCPGiCgoKiggIgoqoEA30GN1dY0vfufedeq73/3W2vu+qgaS+4Nf17v3nL3XXsN/rb3PPudsXX755Xtt+dna2op/zv/d25t/Xvktjo3f9Vw+D/O2ubv+Rx8n/UdgmR94/eRc7W/7e3tlTHG766frH33vRs7d6S6XDNCMh6nI6d3p2Mea09XoU8cpzpSWzjZdfw8Xt

with a lot more behind...
I haven't figured out what operation will lead to either of the errors. In general, they appear if I use the tui-image-editor.

Anyone have any ideas on how to fix it?

Regards

lexoyo

Hello JeremyZXi
Nice idea, I hope to have a demo of this 🙂

The way to go to add grapesjs plugins is described here: https://docs.silex.me/en/dev/plugins

Start in an empty folder

1. You create a front end silex plugin (which is just another config file really)

create a file client-config.js

export default async function (config) {
  // Add grapesjs plugins
  config.on('silex:grapesjs:start', () => {
    // Or change other config from GrapesJs: config.grapesJsConfig.autoLoad = false
    config.grapesJsConfig.plugins = [{
      ...config.grapesJsConfig.plugins,
      // here your plugin as you would in grapesjs config
    }]
  })
}

2. The server config

You need to have the grapesjs plugin code accessible to the front end
If you use a cdn to load the grapesjs plugin then you don't need that

create a file server-config.js

const StaticPlugin = require('@silexlabs/silex/dist/plugins/server/plugins/server/StaticPlugin').default

module.exports = (config, opts) => {
  config.addPlugin(StaticPlugin, {
    routes: [
      {
        route: '/plugins/',
        path: __dirname + '/node_modules/THE_GRAPESJS_PLUGIN/', // This assumes you have installed your plugin with npm
      },
    ],
  })
}

3. You start silex with the config files

npx @silexlabs/silex --client-config /path/to/client-config.js --server-config /path/to/server-config.js

JeremyZXi

lexoyo
Thank you very much.

I discovered that the editor might have treated the base64 encoded images as file paths.

In website.json:

{"assets":[{"type":"image","src":"data:image/png;base64,iVBORw0KGgoAAA more characters}

This caused the publication to fail and triggered the ENAMETOOLONG error. I am working on adding a solution to FsStorage to resolve this issue.

async readAsset(session: object, websiteId: string, fileName: string): Promise<ConnectorFileContent> {
    const id = requiredParam<WebsiteId>(websiteId, 'website id')
    const path = join(this.options.path, id, this.options.assetsFolder, fileName)
    return await fs.readFile(path) //the readFile function got base64 encode instead of file path which is obviously too long
  }
```

lexoyo

JeremyZXi oh nice! Let me know how it goes