MODIF_DE_OUF_ENFIN_EXCELLENTE_EVOLUTION

Jean-Baptiste-Lasselle commented 5 years ago

Donc dans le conteneur :

# Là où je fais le `npm start`
export REPERTOIRE_GRAPEJS=/rapido
export REPERTOIRE_ESPACE_DE_TRAVAIL_WEB_DESIGNER=$REPERTOIRE_GRAPEJS/public/webdesigner-playground

# on suppose que l'archive téléchargée est nécessairement un zip
export URL_TEMPLATE_HTML5=https://templated.co/picturesque/download

# dans $REPERTOIRE_GRAPEJS  ,  le build grapesjs a déjà été fait, mais l'application n'est pas démarrée

mkdir -p $REPERTOIRE_ESPACE_DE_TRAVAIL_WEB_DESIGNER

curl -L $URL_TEMPLATE_HTML5  -o template-HTML5-current.zip

unzip  template-HTML5-current.zip  -d  $REPERTOIRE_ESPACE_DE_TRAVAIL_WEB_DESIGNER

Jean-Baptiste-Lasselle commented 5 years ago

An interesting Express tutorial :

https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes
https://expressjs.com/en/advanced/best-practice-performance.html#use-a-reverse-proxy (moralité : utiliser Varnish dans un docker-compose.yml)

Jean-Baptiste-Lasselle commented 5 years ago

cf. https://github.com/artf/grapesjs/issues/1438 :+1:

In your react component's componentDidMount() you can initialize the editor like below:

var editor;
componentDidMount{
 editor = grapesjs.init({
      container: "#editor-portal",
      allowScripts: 1,
      height: "100vh",
      canvas: {
        styles: selectedTemplateExternalStyles,
        scripts: selectedTemplateExternalScripts
      },
      plugins: ["gjs-preset-webpage", "grapesjs-custom-code"],
      pluginsOpts: {
        "gjs-preset-webpage": {
          exportOpts: {
            filenamePfx: "hc",
            filename: null,
            addExportBtn: 1,
            btnLabel: "Export to ZIP"
          }
        },
        "grapesjs-custom-code": {}
      },
      storageManager: {
        id: "gjs-",
        type: "remote",
        autosave: 1,
        autoload: 1,
        stepsBeforeSave: 1, // If autosave enabled, indicates how many steps (general changes to structure), need to be done before save. Useful with remoteStorage to reduce remote calls
        urlLoad: API_ROOT + "/template/get/" + this.state.editorType + "/" + this.props.templateId,// Endpoint where to fetch data
        urlStore: API_ROOT + "/template/save/" + this.props.templateId, // Endpoint where to save all stuff
        headers: { "x-apiKey": "XXXXXXXXXXXX" },
        contentTypeJson: true // false: 'x-www-form-urlencoded' // true: application/json; charset=utf-8'   // set contentType paramater of $.ajax
      }
    });
}

Jean-Baptiste-Lasselle commented 5 years ago

https://grapesjs.com/docs/modules/Storage.html#store-and-load-templates

Jean-Baptiste-Lasselle commented 5 years ago

J'ai pu vérifier que l'instruction suivante, permet de recharger le template dans le browser :

editor.load(res => console.log('Load callback'));
editor.load(res => console.log('Load callback with res : [' + res + '] '));

Jean-Baptiste-Lasselle commented 5 years ago

En voilà un qui m'avzait caché cela... :

editor.load(res => console.log('Load callback with res : [' + res.html + '] '));
Load callback with res : [<div data-gjs="navbar" class="navbar"><div class="navbar-container"><a href="/" class="navbar-brand"></a><div id="id5ba-2" class="navbar-burger"><div class="navbar-burger-line"></div><div class="navbar-burger-line"></div><div class="navbar-burger-line"></div></div><div data-gjs="navbar-items" class="navbar-items-c"><nav data-gjs="navbar-menu" class="navbar-menu"><a href="#" class="navbar-menu-link">Home</a><a href="#" class="navbar-menu-link">About</a><a href="#" class="navbar-menu-link">Contact</a></nav></div></div></div><h1>Ok Vinse !</h1><div class="row"><div class="cell"></div><div class="cell"></div></div><script>var items = document.querySelectorAll('#id5ba-2');
        for (var i = 0, len = items.length; i < len; i++) {
          (function(){var e,t=0,n=function(){var e,t=document.createElement("void"),n={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(e in n)if(void 0!==t.style[e])return n[e]}(),r=function(e){var t=window.getComputedStyle(e),n=t.display,r=(t.position,t.visibility,t.height,parseInt(t["max-height"]));if("none"!==n&&"0"!==r)return e.offsetHeight;e.style.height="auto",e.style.display="block",e.style.position="absolute",e.style.visibility="hidden";var i=e.offsetHeight;return e.style.height="",e.style.display="",e.style.position="",e.style.visibility="",i},i=function(e){t=1;var n=r(e),i=e.style;i.display="block",i.transition="max-height 0.25s ease-in-out",i.overflowY="hidden",""==i["max-height"]&&(i["max-height"]=0),0==parseInt(i["max-height"])?(i["max-height"]="0",setTimeout(function(){i["max-height"]=n+"px"},10)):i["max-height"]="0"},a=function(r){if(r.preventDefault(),!t){var a=this.closest("[data-gjs=navbar]"),o=a.querySelector("[data-gjs=navbar-items]");i(o),e||(o.addEventListener(n,function(){t=0;var e=o.style;0==parseInt(e["max-height"])&&(e.display="",e["max-height"]="")}),e=1)}};"gjs-collapse"in this||this.addEventListener("click",a),this["gjs-collapse"]=1}.bind(items[i]))();
        }</script>] debugger eval code:1:20

Donc (cf. https://github.com/Jean-Baptiste-Lasselle/grapejs-server/blob/910184cd09bffddaaa19626724ecd744304513cd/grapes.html#L84 ) :

editor.load(res => console.log('Load callback with HTML : [' + res.html + '] '));
editor.load(res => console.log('Load callback with HTML : [' + res.css + '] '));
editor.load(res => console.log('Load callback with HTML : [' + res.style + '] '));
editor.load(res => console.log('Load callback with HTML : [' + res.components + '] '));

Jean-Baptiste-Lasselle commented 5 years ago

Ok, trouvé une autre indication :

l'auteur de grapesjs parle de listeners pour l'éditeur, et notamment de re-définir l'évènement onload de l'éditeur

Are you able to see the ajax call in inspector? Have you tried to add storage listeners?

editor.on('storage:load', function(e) {
      console.log('Loaded ', e);
})
editor.on('storage:store', function(e) {
      console.log('Stored ', e);
})

Jean-Baptiste-Lasselle commented 5 years ago

ça y est , désormais, le index.html du template choisis au départ, est automatiquement chargé dans l'éditeur GrapesJS :+1:

Pour en terminer avec un premier use case simple de webdesigner, je dois encore :

Avant de retourner le HTML au client, transformer les URL présentes dans les attributs de balise src et href , et ce sauf lorsque leur valeur commence par le caractère dièse #.
La transformation doit avoir lieu sur l'objet template, exactement à ce point du code, et consiste à :
- valider le format de l'URL avec un validateur standard nodejs :
```
const myURL =
new URL('https://user:pass@sub.example.com:8080/p/a/t/h?query=string#hash');
```
- récupérer chaque attribut href et src, de balise HTML, à l'aide de cheerio (l'équivalent de jackson en java pour parser le XML)
```
const cheerio = require('cheerio')
const $ = cheerio.load('<h2 class="title">Hello world</h2>')
```

$('h2.title').text('Hello there!') $('h2').addClass('welcome')

$.html()

  * si l'URL commence par un point : insérer `/omega` juste après le caractères point `.`
  * si l'URL commence par `http://` ou `https://` : alors il faut insérer `/omega` juste après le `$HOSTNAME:PORT_NO`
  * si l'URL ne commence ni par un point, ni par un `http://` ou par un `https://` , alors   il faut insérer `/omega` en préfixe de la chaîne de caractères.
* Faire usage du module [`replace-string`](https://www.npmjs.com/package/replace-string) pour faire les substitions des points précédents.

* ajouter un composant graphique de type arbre de fichiers, pour sélectionner un des fichiers HTML que 'lon veut charger pour l'édition
* Ce composant Graphqiue fera appel au endpoint serveur, pour récupérer le HTML, et devra mettre à jour l'éditeur , avec quelque chose comme :+1: 

```JavaScript
  editor.html = "le HTML qui a été retourné du serveur"
  editor.css = null
  editor.style = null
  // editor.components = "le HMTL qui a été retourné du serveur"

Note :

Concernant les mails, il y a du templating qui semble boien efficace en NodeJS :

https://www.npmjs.com/package/string-template

The WHATWG URL API

La Classe URL parse bien l'URL renseignée, ds l'instanciation, et lève les exceptions nécessaires, s'il en est :


Content Security Policy: Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive.
const myURL =
  new URL('https://user:pass@sub.example.com:8080/p/a/t/h?query=string#hash');
undefined
const myURL =
  new URL('\\https://user:pass@sub.example.com:8080/p/a/t/h?query=string#hash');
SyntaxError: redeclaration of const myURL debugger eval code:1:1
```-

Jean-Baptiste-Lasselle commented 5 years ago

Le traitement de substitution à 4 choix, doit se faire à ce point du code :

https://github.com/Jean-Baptiste-Lasselle/grapejs-server/blob/1b5c9a484f275f3cfcd6dbcde5e5e6ba4edbd4e3/omega/storage-endpoint.js#L38

à noter de plus :

https://github.com/artf/grapesjs/issues/597

cheerio donne des problèmes pour changer les valeurs d'attributs
jsdom ne me paraît pas évident à utilsier, je tombe difficilemet sur des docs claires, pour changer al valeur d'un attribut
Prochain candidat : https://github.com/mfahlandt/node-xml-stream-parser

Jean-Baptiste-Lasselle commented 5 years ago

dernier tests faits avec :

https://templated.co/hielo

avec :

https://www.npmjs.com/package/node-xml-stream-parser pour parser le ttout
https://www.npmjs.com/package/stringbuffer pour reconstruire la page à la volée

Jean-Baptiste-Lasselle / grapejs-server

MODIF_DE_OUF_ENFIN_EXCELLENTE_EVOLUTION #1

The WHATWG URL API