@codeparticle/strapi-plugin-grapejs 1.3.0

package/README.md

@@ -0,0 +1,48 @@
+# README #
+
+To run this plugin it must be installed into a strapi application.
+
+## Usage
+
+Please refer to https://codeparticle.atlassian.net/wiki/spaces/CP/pages/2528313373/Plugin+GrapeJS.
+
+## Dev
+
+You need to create a new strapi project or just use an existing example one:
+```
+pnpm run dev
+```
+
+## Publishing
+
+Publishing should already be setup. Just follow these steps to publish the project:
+
+- After code merged to `main/master`
+- Checkout the `main/master` branch
+- Run `pnpm version [patch|minor|major]`
+- Push to remote with `git push --tags` to trigger the tag pipeline
+
+## Modifying GrapeJS editor when it is initialized
+
+Create config.js file in `admin/src/config.js`, then add the default code exported from that file in strapi-admin and set the `window.onGrapeInit` function, which takes as an argument the `editor`, which is the grapeJS editor object.
+
+Example:
+```js
+// File where we can initialize front end code for GrapeJS plugin
+
+// Refer to https://grapesjs.com/docs for editor docs
+window.onGrapeInit = (editor) => {
+  const { BlockManager } = editor;
+
+  // 'my-first-block' is the ID of the block
+  BlockManager.add('my-first-block', {
+    label: 'Simple block',
+    content: '<div class="my-block">This is a simple block</div>',
+  });
+};
+
+// Default code of the config.js file in strapi-admin
+export const LOGIN_LOGO = null;
+export const SHOW_TUTORIALS = true;
+export const SETTINGS_BASE_URL = '/settings';
+```

package/admin/src/components/InputGrape/assets-view-override.js

@@ -0,0 +1,87 @@
+import debounce from 'lodash/debounce';
+
+const INPUT_DEBOUNCE_TIME = 300;
+
+export const assetsViewOverride = (editor, onSearch) => {
+  // Render so AssetsView() can be defined after the timeout
+  editor.AssetManager.render();
+
+  setTimeout(() => {
+    const view = editor.AssetManager.AssetsView();
+
+    // Overring the template to add a search input to the html
+    // eslint-disable-next-line func-names
+    view.template = function template({ pfx, ppfx, em }) {
+      let form = '';
+
+      // eslint-disable-next-line react/no-this-in-sfc
+      if (this.config.showUrlInput) {
+        form = `
+            <form class="${pfx}add-asset">
+              <div class="${ppfx}field ${pfx}add-field">
+                <input placeholder="${em && em.t('assetManager.inputPlh')}"/>
+              </div>
+              <button class="${ppfx}btn-prim">${em && em.t('assetManager.addButton')}</button>
+              <div style="clear:both"></div>
+            </form>
+        `;
+      }
+
+      return `
+      <div class="${pfx}assets-cont">
+        <div class="${pfx}assets-header">
+          ${form}
+          <div class="gjs-am-assets-search-container">
+            Search
+            <div class="gjs-field">
+              <input class="${pfx}assets-search" />
+            </div>
+          </div>
+        </div>
+        <div class="${pfx}searching" style="display: none;">Searching...</div>
+        <div class="${pfx}assets" data-el="assets"></div>
+        <div style="clear:both"></div>
+      </div>
+      `;
+    };
+
+    // Override render to add the oninput event listener on the search input
+    // eslint-disable-next-line func-names
+    view.render = function render() {
+      const fuRendered = this.options.fu.render().el;
+      this.$el.empty();
+      this.$el.append(fuRendered).append(this.template(this));
+      this.el.className = `${this.ppfx}asset-manager`;
+      this.renderAssets();
+      this.rendered = 1;
+
+      const searchInput = this.$el.find('.gjs-am-assets-search')[0];
+
+      if (searchInput) {
+        const onInput = debounce(({ target: { value } }) => {
+          const searchingElement = this.$el.find('.gjs-am-searching')[0];
+          const assetsElement = this.$el.find('.gjs-am-assets')[0];
+
+          this.searching = true;
+          this.searchValue = value;
+          searchingElement.style.display = 'block';
+          assetsElement.style.display = 'none';
+
+          const onFinishSearch = () => {
+            this.searching = false;
+            searchingElement.style.display = 'none';
+            assetsElement.style.display = 'flex';
+          };
+
+          onSearch(value).then(onFinishSearch).catch(onFinishSearch);
+        }, INPUT_DEBOUNCE_TIME);
+
+        searchInput.oninput = onInput;
+      }
+
+      return this;
+    };
+
+    view.render();
+  });
+};

package/admin/src/components/InputGrape/components.js

@@ -0,0 +1,123 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  margin-bottom: 23px;
+
+  & > label {
+    color: ${({ theme }) => theme.colors.neutral1000};
+    display: block;
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1.33;
+    margin-bottom: 4px;
+  }
+
+  .gjs-cv-canvas {
+    width: 75%;
+  }
+
+  .gjs {
+    border: 1px solid #E3E9F3;
+    border-radius: 2px;
+    height: 300px;
+
+    &.fullscreen {
+      bottom: 0;
+      height: auto !important;
+      left: 0;
+      position: fixed;
+      right: 0;
+      top: 0;
+      width: auto !important;
+      z-index: 999999;
+    }
+
+    .gjs-am-add-asset .gjs-btn-prim {
+      font-size: 0.9rem;
+    }
+
+    .gjs-pn-options {
+      right: 25%;
+    }
+
+    .gjs-pn-views {
+      width: 25%;
+    }
+
+    .gjs-pn-views-container {
+      height: calc(100% - 42px);
+      margin-top: 42px;
+      padding-top: 0;
+      width: 25%;
+    }
+
+    .gjs-pn-btn {
+      font-size: 18px !important;
+    }
+
+    .fa {
+      font-family: FontAwesome !important;
+    }
+
+    .gjs-pn-btn {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+    }
+
+    .gjs-layer-move {
+      padding: 5px 7px 5px 5px;
+    }
+
+    .gjs-layer-caret {
+      padding: 0;
+    }
+
+    .gjs-layer-vis {
+      padding-top: 9px;
+    }
+
+    .gjs-block {
+      display: flex;
+      font-size: 1em;
+      flex-direction: column;
+      padding: 14px !important;
+
+      &::before {
+        flex: 1;
+        font-size: 3em !important;
+      }
+
+      &.fa::before {
+        align-items: center;
+        display: flex;
+        font: normal normal normal 2.5em FontAwesome !important;
+        justify-content: center;
+        margin-bottom: 10px;
+      }
+    }
+
+    .sp-container {
+      position: fixed !important;
+    }
+
+    .gjs-am-assets {
+      height: 230px !important;
+    }
+
+    .gjs-am-assets-search-container {
+      align-items: center;
+      display: flex;
+      margin-top: 10px;
+
+      .gjs-field {
+        flex: 1;
+        margin-left: 10px;
+      }
+    }
+  }
+`;
+
+export {
+  Wrapper,
+};

package/admin/src/components/InputGrape/edit-code-btn.js

@@ -0,0 +1,70 @@
+export const addEditCodeBtn = (editor) => {
+  const pfx = editor.getConfig().stylePrefix;
+  const modal = editor.Modal;
+  const cmdm = editor.Commands;
+  const codeViewer = editor.CodeManager.getViewer('CodeMirror').clone();
+  const pnm = editor.Panels;
+  const container = document.createElement('div');
+  const btnEdit = document.createElement('button');
+
+  codeViewer.set({
+    codeName: 'htmlmixed',
+    readOnly: 0,
+    theme: 'hopscotch',
+    autoBeautify: true,
+    autoCloseTags: true,
+    autoCloseBrackets: true,
+    lineWrapping: true,
+    styleActiveLine: true,
+    smartIndent: true,
+    indentWithTabs: true,
+  });
+
+  btnEdit.innerHTML = 'Edit';
+  btnEdit.className = `${pfx}btn-prim ${pfx}btn-import`;
+  btnEdit.onclick = (e) => {
+    e.preventDefault();
+    const code = codeViewer.editor.getValue();
+    editor.DomComponents.getWrapper().set('content', '');
+    editor.setComponents(code.trim());
+    modal.close();
+  };
+
+  cmdm.add('html-edit', {
+    run: (e, sender) => {
+      if (sender) {
+        sender.set('active', 0);
+      }
+
+      let viewer = codeViewer.editor;
+      modal.setTitle('Edit code');
+
+      if (!viewer) {
+        const txtarea = document.createElement('textarea');
+        container.appendChild(txtarea);
+        container.appendChild(btnEdit);
+        codeViewer.init(txtarea);
+        viewer = codeViewer.editor;
+      }
+
+      const InnerHtml = editor.getHtml();
+      const Css = editor.getCss();
+      modal.setContent('');
+      modal.setContent(container);
+      codeViewer.setContent(`${InnerHtml}\n<style>\n${Css}\n</style>`);
+      modal.open();
+      viewer.refresh();
+    },
+  });
+
+  pnm.addButton('options', [
+    {
+      id: 'edit',
+      className: 'fa fa-edit',
+      command: 'html-edit',
+      attributes: {
+        title: 'Edit',
+      },
+    },
+  ]);
+};

package/admin/src/components/InputGrape/index.js

@@ -0,0 +1,361 @@
+import grapesjs from 'grapesjs';
+import 'grapesjs/dist/css/grapes.min.css';
+import defaultPlugin from 'grapesjs-preset-webpage';
+import blocksPlugin from 'grapesjs-blocks-basic';
+import formsPlugin from 'grapesjs-plugin-forms';
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { useIntl } from 'react-intl';
+import { request, useCMEditViewDataManager } from '@strapi/helper-plugin';
+import { useStableUniqueId } from 'react-stable-uniqueid';
+import eotFont from 'grapesjs/dist/fonts/main-fonts.eot';
+import woffFont from 'grapesjs/dist/fonts/main-fonts.woff';
+import svgFont from 'grapesjs/dist/fonts/main-fonts.svg';
+import ttfFont from 'grapesjs/dist/fonts/main-fonts.ttf';
+import { Wrapper } from './components';
+import { addEditCodeBtn } from './edit-code-btn';
+import { assetsViewOverride } from './assets-view-override';
+
+// Load grapejs font face (It usually loads from the grapejs.min.css, but with latest strapi it isnt working anymore)
+const style = document.createElement('style');
+style.innerHTML = `
+@font-face {
+  font-family: 'font3336';
+  src: url('${eotFont}.eot?v=20');
+  src:
+    url('${woffFont}?v=20') format('woff'),
+    url('${ttfFont}.ttf?v=20') format('truetype'),
+    url('${svgFont}.svg?v=20') format('svg'),
+    url('${eotFont}.eot?v=20') format('embedded-opentype');
+  font-weight: normal;
+  font-style: normal;
+}
+`;
+document.head.appendChild(style);
+
+const getFullUrl = path => (/^http/.test(path) ? path : `${strapi.backendURL}${path}`);
+
+let imageFetchListeners = [];
+let globalImagesFetching = false;
+
+const textCleanCanvas = 'Are you sure to clean the canvas?';
+
+const getSaveData = (value, valueData) => {
+  // Parse initial value
+  const parsedValue = value || '';
+  // Remove <div>, </div>, and get all content before <style>
+  let html = parsedValue.replace('<div>', '');
+  const lastIndexOfStyle = parsedValue.lastIndexOf('<style>');
+  html = html.slice(0, lastIndexOfStyle);
+  // Get all content after <style> and remove </style>
+  const css = parsedValue.slice(lastIndexOfStyle).replace('</div>', '').replace('<style>', '').replace('</style>', '');
+
+  const isValueDataString = typeof valueData === 'string';
+  let savedData = isValueDataString ? {} : (valueData || {});
+
+  if (isValueDataString) {
+    try {
+      savedData = JSON.parse(valueData || '{}');
+    } catch (err) {
+      // ignore error
+    }
+  }
+
+  return {
+    components: savedData?.components || html.trim(),
+    style: savedData?.style || css.trim(),
+  };
+};
+
+const InputGrapeJs = ({
+  name,
+  label,
+  intlLabel,
+  onChange,
+  plugin = defaultPlugin,
+}) => {
+  const {
+    modifiedData: {
+      [`${name}_data`]: valueData,
+      value,
+    },
+  } = useCMEditViewDataManager();
+
+  const { formatMessage } = useIntl();
+
+  if (window.FontAwesome) {
+    // Fixes for FontAwesome icons
+    window.FontAwesome.config.autoReplaceSvg = 'nest';
+    window.FontAwesome.noAuto();
+  }
+
+  const baseUrl = `${strapi.backendURL}/upload`;
+  const getUrl = `${baseUrl}/files`;
+
+  const mounted = useRef(true);
+  const [editor, setEditor] = useState();
+  const containerId = useStableUniqueId('gjs-');
+  const lastSearchValue = useRef('');
+  const editorRef = useRef(editor);
+  editorRef.current = editor;
+  const valueRef = useRef(value);
+  valueRef.current = value;
+
+  useEffect(() => {
+    if (editorRef.current) {
+      const editorData = JSON.stringify({
+        components: editorRef.current.getComponents(),
+        style: editorRef.current.getStyle(),
+      });
+
+      if (editorData !== valueData) {
+        const savedData = getSaveData(value, valueData);
+
+        editorRef.current.setComponents(savedData.components);
+        editorRef.current.setStyle(savedData.style);
+      }
+    }
+  }, [value, valueData]);
+
+  useEffect(() => {
+    const savedData = getSaveData(value, valueData);
+
+    // Initialize grapeJS
+    const newEditor = grapesjs.init({
+      canvas: {
+        styles: window.getGrapeJSStyles ? window.getGrapeJSStyles() : [],
+      },
+
+      height: '300px',
+      container: `#${containerId}`,
+
+      components: savedData.components,
+      style: savedData.style,
+      styleManager: {},
+
+      plugins: [plugin, blocksPlugin, formsPlugin, ...(window.getGrapeJSPlugins ? window.getGrapeJSPlugins() : [])],
+      pluginsOpts: {
+        [plugin]: {},
+        [blocksPlugin]: {},
+        [formsPlugin]: {},
+      },
+
+      // Disable storage manager so edits dont persist for all input types
+      storageManager: { type: null },
+
+      assetManager: {
+        // custom: true,
+        // Custom upload method so we save images on Media Library from strapi
+        upload: baseUrl,
+        uploadName: 'files',
+        uploadFile: (e) => {
+          const files = Array.from(e.dataTransfer ? e.dataTransfer.files : e.target.files);
+
+          return Promise.all(files.map(async (file) => {
+            const formData = new FormData();
+
+            formData.append('files', file);
+
+            const response = await request(
+              '/upload',
+              {
+                body: formData,
+                method: 'POST',
+                headers: {},
+              },
+              false,
+              false,
+            );
+
+            // Add image to editor after upload
+            response.forEach(({ mime, name: imgName, url }) => {
+              if (`${mime}${imgName}${url}`.includes(lastSearchValue.current.toLowerCase())) {
+                newEditor.AssetManager.add(getFullUrl(url));
+              }
+            });
+          }));
+        },
+      },
+    });
+
+    const assetManager = newEditor.AssetManager;
+    const commands = newEditor.Commands;
+    const pnm = newEditor.Panels;
+    const optionsPanel = pnm.getPanel('options');
+    const cmdClear = 'canvas-clear';
+
+    // Remove default clear button because newsletter plugin doesn't add one, only webpage plugin does
+    optionsPanel.buttons.remove(cmdClear);
+
+    optionsPanel.buttons.add({
+      id: cmdClear,
+      className: 'fa fa-trash',
+      command: e => e.runCommand(cmdClear),
+    });
+
+    // eslint-disable-next-line no-restricted-globals, no-alert
+    commands.add(cmdClear, e => confirm(textCleanCanvas) && e.runCommand('core:canvas-clear'));
+
+    // Override fullscreen command (original one makes whole browser full screen)
+    commands.add('fullscreen', {
+      run: () => {
+        newEditor.getContainer().classList.add('fullscreen');
+        newEditor.refresh();
+      },
+      stop: () => {
+        newEditor.getContainer().classList.remove('fullscreen');
+        newEditor.refresh();
+      },
+    });
+
+    const addFetchedImages = (images) => {
+      if (mounted.current) {
+        const existingModels = assetManager.getAll().models.slice();
+
+        existingModels.forEach(({ id }) => assetManager.remove(id));
+
+        // Map images and make sure there are no duplicates
+        images.reverse().forEach(({
+          created_at: createdAt,
+          height,
+          id,
+          mime,
+          name: imageName,
+          url,
+          width,
+        }) => {
+          assetManager.add({
+            createdAt,
+            height,
+            id,
+            mime,
+            name: imageName,
+            src: getFullUrl(url),
+            width,
+          });
+        });
+      }
+    };
+
+    const onSearch = (q = '') => new Promise((resolve, reject) => {
+      lastSearchValue.current = q;
+
+      request(getUrl, {
+        params: {
+          pageSize: 50,
+          _sort: 'updated_at:DESC',
+          'filters[$and][0][name][$contains]': q,
+        },
+      }).then(({ results: images }) => {
+        globalImagesFetching = false;
+        addFetchedImages(images);
+
+        imageFetchListeners.forEach(listener => listener(images, q));
+        imageFetchListeners = [];
+
+        resolve(images);
+      }).catch((err) => {
+        console.log('Error fetching images', err);
+        globalImagesFetching = false;
+
+        reject(err);
+      });
+    });
+
+    // Fetch images from Media Library
+    if (!globalImagesFetching) {
+      globalImagesFetching = true;
+      onSearch('');
+    } else {
+      // If images already fetching, just listen for callback
+      imageFetchListeners.push(addFetchedImages);
+    }
+
+    addEditCodeBtn(newEditor);
+    assetsViewOverride(newEditor, onSearch);
+    setEditor(newEditor);
+
+    if (window.onGrapeInit) {
+      window.onGrapeInit(newEditor);
+    }
+
+    return () => {
+      mounted.current = false;
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Update strapi value when template is updated
+  useEffect(() => {
+    if (!editor) {
+      return () => {};
+    }
+
+    const onUpdate = () => {
+      const html = editor.getHtml();
+      const css = editor.getCss({ avoidProtected: true });
+      let newValue = '';
+
+      if (html.length || css.length) {
+        newValue = `\
+<div>
+  ${html.replace(/ draggable="true"/g, '')/* Remove draggable attribute from text elements */}
+  <style>
+    ${css}
+  </style>
+</div>\
+`;
+      }
+
+      if (valueRef.current === newValue) {
+        return;
+      }
+
+      onChange({
+        target: {
+          name,
+          value: newValue,
+        },
+      });
+
+      const editorData = JSON.stringify({
+        components: editor.getComponents(),
+        style: editor.getStyle(),
+      });
+
+      onChange({
+        target: {
+          name: `${name}_data`,
+          value: editorData,
+        },
+      });
+    };
+
+    editor.on('update', onUpdate);
+    
+    return () => editor.off('update', onUpdate);
+  }, [editor, name, onChange]);
+
+  // Don't submit the form when editing inputs inside the GrapeJS editor
+  const preventFormSubmission = useCallback((e) => {
+    if (e.which === 13) {
+      e.preventDefault();
+    }
+  }, []);
+
+  return (
+    <Wrapper onKeyDown={preventFormSubmission}>
+      {/* eslint-disable-next-line jsx-a11y/label-has-for */}
+      <label htmlFor={name}>
+        {intlLabel ? formatMessage(intlLabel) : label}
+      </label>
+      <div className="gjs" id={containerId} />
+    </Wrapper>
+  );
+};
+
+export default InputGrapeJs;

package/admin/src/components/InputGrape/storage.js

@@ -0,0 +1,18 @@
+// Cache config for Media
+const MEDIA_CACHE_KEY = 'gjs-media';
+
+export const storeMedia = (images) => {
+  localStorage.setItem(MEDIA_CACHE_KEY, JSON.stringify(images));
+};
+
+export const loadMedia = () => {
+  let images = [];
+
+  try {
+    images = JSON.parse(localStorage.getItem(MEDIA_CACHE_KEY) || '[]');
+  } catch (err) {
+    // Nothing
+  }
+
+  return images;
+};

package/admin/src/components/InputGrapeNewsletter/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import defaultPlugin from 'grapesjs-preset-newsletter';
+import InputGrape from '../InputGrape';
+
+const InputGrapeNewsletter = (props) => (
+  <InputGrape {...props} plugin={defaultPlugin} />
+);
+
+export default InputGrapeNewsletter;

package/admin/src/containers/App/index.js

@@ -0,0 +1,25 @@
+/**
+ *
+ * This component is the skeleton around the actual pages, and should only
+ * contain code that should be seen on all pages. (e.g. navigation bar)
+ *
+ */
+
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+import { NotFound } from '@strapi/helper-plugin';
+// Utils
+import pluginId from '../../pluginId';
+// Containers
+import HomePage from '../HomePage';
+
+const App = () => (
+  <div>
+    <Switch>
+      <Route path={`/plugins/${pluginId}`} component={HomePage} exact />
+      <Route component={NotFound} />
+    </Switch>
+  </div>
+);
+
+export default App;

package/admin/src/containers/HomePage/index.js

@@ -0,0 +1,18 @@
+/*
+ *
+ * HomePage
+ *
+ */
+
+import React, { memo } from 'react';
+// import PropTypes from 'prop-types';
+import pluginId from '../../pluginId';
+
+const HomePage = () => (
+  <div>
+    <h1>{pluginId}&apos;s HomePage</h1>
+    <p>Happy coding</p>
+  </div>
+);
+
+export default memo(HomePage);

package/admin/src/index.js

@@ -0,0 +1,52 @@
+import { prefixPluginTranslations } from '@strapi/helper-plugin';
+import pluginPkg from '../../package.json';
+import pluginId from './pluginId';
+import trads from './translations';
+import InputGrape from './components/InputGrape';
+import InputGrapeNewsletter from './components/InputGrapeNewsletter';
+
+const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
+const name = pluginPkg.strapi.name;
+const icon = pluginPkg.strapi.icon;
+
+export default {
+  register(app) {
+    const plugin = {
+      description: pluginDescription,
+      icon,
+      name,
+      id: pluginId,
+      trads,
+    };
+
+    InputGrape.baseType = 'richtext';
+    InputGrapeNewsletter.baseType = 'richtext';
+    app.addComponents({ name: 'PluginGrapeInput', Component: InputGrape });
+    app.addComponents({ name: 'PluginGrapeNewsletterInput', Component: InputGrapeNewsletter });
+
+    app.registerPlugin(plugin);
+  },
+  async registerTrads({ locales }) {
+    const importedTrads = await Promise.all(
+      locales.map((locale) => {
+        return import(
+          /* webpackChunkName: "grapejs-trads" */ `./translations/${locale}.json`
+        )
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, pluginId),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
+};

package/admin/src/lifecycles.js

@@ -0,0 +1,3 @@
+function lifecycles() {}
+
+export default lifecycles;

package/admin/src/pluginId.js

@@ -0,0 +1,5 @@
+const pluginPkg = require('../../package.json');
+
+const pluginId = pluginPkg.name.replace(/^strapi-plugin-/i, '');
+
+module.exports = pluginId;

package/admin/src/translations/ar.json

@@ -0,0 +1 @@
+{}

package/admin/src/translations/cs.json

@@ -0,0 +1 @@
+{}

package/admin/src/translations/de.json

@@ -0,0 +1 @@
+{}

package/admin/src/translations/en.json

@@ -0,0 +1 @@
+{}

package/admin/src/translations/es.json

@@ -0,0 +1 @@
+{}

package/admin/src/translations/fr.json

@@ -0,0 +1 @@
+{}

package/admin/src/translations/index.js

@@ -0,0 +1,43 @@
+import ar from './ar.json';
+import cs from './cs.json';
+import de from './de.json';
+import en from './en.json';
+import es from './es.json';
+import fr from './fr.json';
+import it from './it.json';
+import ko from './ko.json';
+import ms from './ms.json';
+import nl from './nl.json';
+import pl from './pl.json';
+import ptBR from './pt-BR.json';
+import pt from './pt.json';
+import ru from './ru.json';
+import tr from './tr.json';
+import vi from './vi.json';
+import zhHans from './zh-Hans.json';
+import zh from './zh.json';
+import sk from './sk.json';
+
+const trads = {
+  ar,
+  cs,
+  de,
+  en,
+  es,
+  fr,
+  it,
+  ko,
+  ms,
+  nl,
+  pl,
+  'pt-BR': ptBR,
+  pt,
+  ru,
+  tr,
+  vi,
+  'zh-Hans': zhHans,
+  zh,
+  sk,
+};
+
+export default trads;

package/admin/src/translations/it.json

@@ -0,0 +1 @@
+{}

package/admin/src/translations/ko.json

@@ -0,0 +1 @@
+{}

package/admin/src/translations/ms.json

@@ -0,0 +1 @@
+{}

package/admin/src/translations/nl.json

@@ -0,0 +1 @@
+{}

package/admin/src/translations/pl.json

@@ -0,0 +1 @@
+{}

package/admin/src/translations/pt-BR.json

@@ -0,0 +1 @@
+{}

package/admin/src/translations/pt.json

@@ -0,0 +1 @@
+{}

package/admin/src/translations/ru.json

@@ -0,0 +1 @@
+{}

package/admin/src/translations/sk.json

@@ -0,0 +1 @@
+{}

package/admin/src/translations/tr.json

@@ -0,0 +1 @@
+{}

package/admin/src/translations/vi.json

@@ -0,0 +1 @@
+{}

package/admin/src/translations/zh-Hans.json

@@ -0,0 +1 @@
+{}

package/admin/src/translations/zh.json

@@ -0,0 +1 @@
+{}

package/admin/src/utils/getTrad.js

@@ -0,0 +1,5 @@
+import pluginId from '../pluginId';
+
+const getTrad = id => `${pluginId}.${id}`;
+
+export default getTrad;

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@codeparticle/strapi-plugin-grapejs",
+  "version": "1.3.0",
+  "description": "Integrated GrapeJS as a content editor",
+  "strapi": {
+    "name": "grapejs",
+    "icon": "plug",
+    "description": "Integrated GrapeJS as a content editor",
+    "kind": "plugin"
+  },
+  "author": {
+    "name": "CodeParticle",
+    "email": "",
+    "url": ""
+  },
+  "maintainers": [
+    {
+      "name": "CodeParticle",
+      "email": "",
+      "url": ""
+    }
+  ],
+  "engines": {
+    "node": "22.x",
+    "pnpm": "10.x"
+  },
+  "license": "MIT",
+  "files": [
+    "README.md",
+    "admin",
+    "package.json",
+    "pnpm-workspace.yaml",
+    "server",
+    "strapi-admin.js",
+    "strapi-server.js"
+  ],
+  "dependencies": {
+    "@strapi/helper-plugin": "4.9.2",
+    "@strapi/strapi": "4.9.2",
+    "grapesjs": "^0.19.4",
+    "grapesjs-blocks-basic": "^1.0.2",
+    "grapesjs-plugin-forms": "^2.0.6",
+    "grapesjs-preset-newsletter": "^1.0.2",
+    "grapesjs-preset-webpage": "^1.0.3",
+    "lodash": "4.17.19",
+    "react": "^17.0.2",
+    "react-router-dom": "^5.0.0",
+    "react-stable-uniqueid": "^1.2.2",
+    "styled-components": "^5.0.0"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^7.6.0",
+    "babel-eslint": "^10.1.0",
+    "commitlint": "^7.6.1",
+    "eslint": "7.32.0",
+    "eslint-config-airbnb": "18.2.1",
+    "eslint-config-airbnb-base": "14.2.1",
+    "eslint-config-prettier": "6.15.0",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-jsx-a11y": "6.5.1",
+    "eslint-plugin-node": "11.1.0",
+    "eslint-plugin-react": "7.29.4",
+    "eslint-plugin-react-hooks": "4.5.0"
+  },
+  "scripts": {
+    "dev": "pnpm run link-plugin && cd example-app && pnpm install && pnpm run develop --watch-admin",
+    "link-plugin": "mkdir -p ./example-app/src/plugins && if [ ! -d \"$(pwd)/example-app/src/plugins/grapejs\" ]; then ln -s $(pwd) $(pwd)/example-app/src/plugins/grapejs; fi",
+    "lint": "eslint --ignore-path .gitignore --ignore-path .eslintignore .",
+    "lint-example-app": "cd example-app && pnpm run lint",
+    "postversion": "git push && git push --tags"
+  }
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,6 @@
+onlyBuiltDependencies:
+  - '@strapi/strapi'
+  - core-js
+  - core-js-pure
+  - esbuild
+  - sharp

package/server/controllers/grape.js

@@ -0,0 +1,7 @@
+module.exports = () => ({
+  index: function index(ctx) {
+    ctx.send({
+      message: 'ok',
+    });
+  },
+});

package/server/controllers/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const grape = require('./grape');
+
+module.exports = {
+  grape
+};

package/server/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+const services = require('./services');
+const routes = require('./routes');
+const controllers = require('./controllers');
+const register = require('./register');
+
+module.exports = {
+  controllers,
+  routes,
+  services,
+  register
+};

package/server/register.js

@@ -0,0 +1,29 @@
+const _ = require('lodash');
+
+module.exports = ({ strapi }) => {
+  addDataAttribute(strapi);
+};
+
+const addDataAttribute = (strapi) => {
+  Object.values(strapi.contentTypes).forEach(({ attributes, uid }) => {
+    Object.entries(attributes).forEach(([key, entry]) => {
+      if (entry.customInput === 'PluginGrapeInput' || entry.customInput === 'PluginGrapeNewsletterInput') {
+        const attrKey = `${key}_data`;
+
+        if (attributes[attrKey]) {
+          console.warn(`Grapejs plugin could not initialize data attribute on model ${uid} because there is already an attribute with key ${attrKey}`);
+        } else {
+          _.set(attributes, attrKey, {
+            type: 'json',
+            writable: true,
+            configurable: false,
+            visible: false,
+            ignoreInFindMany: true,
+            ignoreInUserApi: true,
+            ignoreInLocalizationsPopulate: true,
+          });
+        }
+      }
+    });
+  });
+};

package/server/routes/index.js

@@ -0,0 +1,11 @@
+module.exports = {
+	'content-api': {
+		type: 'content-api',
+		routes: [{
+      method: 'GET',
+      path: '/',
+      handler: 'grape.index',
+      config: { policies: [] }
+    }],
+	},
+};

package/server/services/grape.js

@@ -0,0 +1 @@
+module.exports = () => ({});

package/server/services/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const grape = require('./grape');
+
+module.exports = {
+  grape
+};

package/strapi-admin.js

@@ -0,0 +1 @@
+module.exports = require('./admin/src').default;

package/strapi-server.js

@@ -0,0 +1 @@
+module.exports = require('./server');