codemirror style and editor cleanup

4 files changed, 76 insertions, 49 deletions

diff --git a/README.md b/README.md
index 9474ccf..fec1bab 100644
--- a/README.md
+++ b/README.md
@@ -26,16 +26,14 @@ Highlights
 
 W try to help you create pages more spontaneously.
 
-- low latency page loading
-- Use markdown synthax, HTML, CSS and Javascript
-- [url based command interface](MANUAL.md#url-based-command-interface)
+- Very lightweight page loading and editor
+- Use standards to edit your pages : markdown, HTML, CSS and Javascript
 - [Media manager](MANUAL.md#media-manager)
-- Font manager
 - Multi-users
-- No hierarchy between pages
-- Configured without landing-page (by default)
-- optional javascript ergonomic enhancement (no-script proof)
-
+- Flat file database
+- Great website architecture design freedom
+- [url based command interface](MANUAL.md#url-based-command-interface)
+- works perfectly even with javascript disabled
 
 Overview
 --------
@@ -58,7 +56,18 @@ There is lot more you can by altering the `BODY`.
 
 
 
-[Old webpage of the project (in french)](http://vincent.club1.fr/w/?id=w)
+Devellopement team
+------------------
+
+W is a project created and maintained by [Vincent Peugnet](https://github.com/vincent-peugnet), an amateur computer science enthousiast who can only code in PHP. It now includes [Nicolas Peugnet](https://github.com/n-peugnet) (his brother) as JS develloper, technical advisor and every challenges that are too complicated for Vincent.
+We can also mention [Guilhem Prévost Leygonie]() as legendary number one user and now as an issue writer too.
+
+
+- [James Moss's Flywheel Database](https://github.com/jamesmoss/flywheel)
+- [Michel Fortin's Markdown Extra](https://github.com/michelf/php-markdown)
+- [Plates](https://github.com/thephpleague/plates) as template engine.
+- [Nicolas Peugnet](https://nicolas.club1.fr/) for the technical support
+
 
 
 How to install
@@ -80,13 +89,6 @@ W will ask you for the path you've installed it, if you installed it at the root
 
 
 
-### Thanks to
-
-- [James Moss's Flywheel Database](https://github.com/jamesmoss/flywheel)
-- [Michel Fortin's Markdown Extra](https://github.com/michelf/php-markdown)
-- [Plates](https://github.com/thephpleague/plates) as template engine.
-- [Nicolas Peugnet](https://nicolas.club1.fr/) for the technical support
-
 # Development informations
 
 If you want to contribute to the project.
@@ -102,7 +104,8 @@ If you want to contribute to the project.
 
     sudo apt install php php-curl php-mbstring composer nodejs
 
-## Install from sources
+Install from sources
+--------------------
 
 1.  Clone the git repository.
 2.  Install PHP dependencies.
@@ -128,13 +131,15 @@ There are 3 different build environments that `make` can use:
 
 The build environment can be set either for each `make` command by changing it in the `.env` file or on a per command basis by adding it at the end of the command (e.g. `make build ENV=prod`).
 
-## JS development
+JS development
+--------------
 
 While developing the JS sources it is useful to run webpack in watch mode so that the bundles get built at each file change. To do so, use the following command:
 
     make watch
 
-## Publish a new release
+Publish a new release
+---------------------
 
 The release process uses [release-it](https://github.com/release-it/release-it) and uploads sourcemaps to [Sentry](https://sentry.io/). So to create and publish a new release you will need two access tokens:
 -   a [GitHub personnal access token](https://github.com/settings/tokens) with `repository` access
diff --git a/app/view/templates/edithelp.php b/app/view/templates/edithelp.php
index e354f7c..d3c7a33 100644
--- a/app/view/templates/edithelp.php
+++ b/app/view/templates/edithelp.php
@@ -6,40 +6,40 @@
     <kbd>CTRL</kbd> + <kbd>D</kbd>
     <h4>Search</h4>
     <kbd>ALT</kbd> + <kbd>F</kbd>
+
     <h4>Markdown synthax</h4>
     <ul>
-    <li><code>[<i>hello</i>](<i>PAGE_ID</i>)</code>link</li>
-    <li><code>![<i>alt</i>](<i>imagepath</i>)</code>img</li>
-    <li><code><<i>e@mail.net</i>></code></li>
-    <li><code># <i>h</i>* <i>title</i></code></li>
-    <li><code>*<i>emphasis</i>*</code></li>
-    <li><code>**<i><b>strong</b></i>**</code></li>
-    <li><code>- <i>list item</i></code></li>
-    <li><code>><i>blockquote</i></code></li>
-    <li><code>    <i>code</i></code></li>
-    <li><code>------</code>horizontal line</li>
+        <li><code>[<i>hello</i>](<i>PAGE_ID</i>)</code>link</li>
+        <li><code>![<i>alt</i>](<i>imagepath</i>)</code>img</li>
+        <li><code><<i>e@mail.net</i>></code></li>
+        <li><code># <i>h</i>* <i>title</i></code></li>
+        <li><code>*<i>emphasis</i>*</code></li>
+        <li><code>**<i><b>strong</b></i>**</code></li>
+        <li><code>- <i>list item</i></code></li>
+        <li><code>><i>blockquote</i></code></li>
+        <li><code>    <i>code</i></code></li>
+        <li><code>------</code>horizontal line</li>
     </ul>
+
     <h4>W synthax</h4>
     <ul>
-    <li><code>[<i>PAGE_ID</i>]</code>quick link</li>
-    <li><code>%TITLE%</code>page title</li>
-    <li><code>%DESCRIPTION%</code>page desc'</li>
-    <li><code>%DATE%</code>date of page</li>
-    <li><code>%TIME%</code>time of page</li>
-    <li><code>%SUMMARY%</code>Summary</li>
-    <li><code>===<i>id</i></code>article separator</li>
-    <li><code>%TAG:<i>tag</i>%</code>page list by <i>tag</i></li>
-    <li><code>%MEDIA:<i>dir</i>%</code>media list</li>
-    <li><code>%LINK%<i>text</i>%LINK%</code>auto link</li>
+        <li><code>===<i>id</i></code> article separator</li>
+        <li><code>[<i>page_id</i>]</code> quick link</li>
+        <li><code>%TITLE%</code> print page title</li>
+        <li><code>%DESCRIPTION%</code> print page description</li>
+        <li><code>%DATE%</code> print date of page</li>
+        <li><code>%TIME%</code> print time of page</li>
+        <li><code>%SUMMARY?<i>option</i>=<i>value</i>%</code> generate summary</li>
+        <li><code>%LIST?<i>option</i>=<i>value</i>%</code> generate list of page</li>
+        <li><code>%MEDIA?<i>option</i>=<i>value</i>%</code> generate media list</li>
     </ul>
 
     <h4>BODY synthax</h4>
     <ul>
-    <li><code>%<i>ELEMENT</i>%</code>invoke page element</li>
-    <li><code>%<i>ELEMENT</i>:<i>page_id</i>%</code>invoke element of specific page</li>
-    <li>You cant use Markdown in the BODY</li>
+    <li><code>%<i>ELEMENT</i>?<i>option</i>=<i>value</i>%</code> include specified element</li>
     </ul>
 
+    BODY don't support <strong>Markdown</strong> encoding.
 
     <h4>More infos</h4>
 
diff --git a/assets/css/edit.css b/assets/css/edit.css
index 17465fa..f43684c 100644
--- a/assets/css/edit.css
+++ b/assets/css/edit.css
@@ -380,8 +380,13 @@ div#showthumbnail img {
 }
 
 /* CodeMirror Wcms mode */
-.cm-wcms {
-    color: red;
+.cm-wcms, .cm-wkeyword {
+    color: black;
+    background-color: #7b97b9d9;
+}
+
+span.cm-wkeyword {
+    color: white;
 }
 
 
diff --git a/src/edit.js b/src/edit.js
index 7496adf..7be4c06 100644
--- a/src/edit.js
+++ b/src/edit.js
@@ -16,7 +16,7 @@ CodeMirror.defineSimpleMode('wcms', {
     // detect a Wcms markup then pass to 'wcms' mode
     start: [
         {
-            regex: /%(?=(HEADER|NAV|ASIDE|MAIN|FOOTER|SUMMARY|LIST|MEDIA)(\?[^\s]*)?%)/,
+            regex: /%(?=(HEADER|NAV|ASIDE|MAIN|FOOTER|SUMMARY|LIST|MEDIA|TITLE|DESCRIPTION|DATE|TIME|THUMBNAIL)(\?[^\s]*)?%)/,
             token: 'wcms',
             next: 'wcms',
         },
@@ -35,16 +35,33 @@ CodeMirror.defineSimpleMode('wcms', {
         { regex: /.*%/, token: 'wcms', next: 'start' },
     ],
     // 'element' mode, parameters' keywords of 'element' macros
-    element: [{ regex: null, push: 'wcms' }],
+    element: [
+        {
+            regex: /id|autolink|markdown|headerid/,
+            token: 'wkeyword',
+            push: 'wcms',
+        },
+        { regex: null, push: 'wcms' },
+    ],
     // 'summary' mode, parameters' keywords of the 'summary' macro
     summary: [
-        { regex: /min|max/, token: 'keyword', push: 'wcms' },
+        { regex: /min|max|element/, token: 'wkeyword', push: 'wcms' },
         { regex: null, push: 'wcms' },
     ],
     // 'list' mode, parameters' keywords of the 'list' macro
-    list: [{ regex: null, push: 'wcms' }],
+    list: [
+        {
+            regex: /sortby|order|secure|tagcompare|authorcompare|tagfilter|authorfilter|linkto|limit|description|thumbnail|date|time|author|style/,
+            token: 'wkeyword',
+            push: 'wcms',
+        },
+        { regex: null, push: 'wcms' },
+    ],
     // 'media' mode, parameters' keywords of the 'media' macro
-    media: [{ regex: null, push: 'wcms' }],
+    media: [
+        { regex: /path|sortby|order|type/, token: 'wkeyword', push: 'wcms' },
+        { regex: null, push: 'wcms' },
+    ],
 });
 
 CodeMirror.defineMode('wcms-markdown', (config, parserConfig) => {