Merge pull request #254 from petitbx/feat/sylius-2.0

Author: maximehuran

.github/workflows/recipe.yaml

@@ -14,8 +14,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        php: ['8.1', '8.2', '8.3']
-        sylius: ["~1.12.0", "~1.13.0", "1.14.0"]
+        php: ['8.2', '8.3']
+        sylius: ["~2.0.0"]
 
     steps:
       - name: Setup PHP

.github/workflows/security.yaml

@@ -13,7 +13,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        php: ['8.1', '8.2', '8.3']
+        php: ['8.2', '8.3']
 
     steps:
       - uses: actions/checkout@v3

.github/workflows/tests.yaml

@@ -14,7 +14,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        php: ['8.1', '8.2', '8.3']
+        php: ['8.2', '8.3']
+        node: ['20']
 
     env:
       SYMFONY_ARGS: --no-tls
@@ -25,7 +26,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: ${{ matrix.node }}
       - name: Setup PHP
         uses: shivammathur/setup-php@v2
         with:

Makefile

@@ -1,7 +1,7 @@
 .DEFAULT_GOAL := help
 SHELL=/bin/bash
 APP_DIR=tests/Application
-SYLIUS_VERSION=1.14.0
+SYLIUS_VERSION=2.0.0
 SYMFONY=cd ${APP_DIR} && symfony
 COMPOSER=symfony composer
 CONSOLE=${SYMFONY} console
@@ -23,9 +23,8 @@ down: server.stop docker.down ## Down the project (removes docker containers, st
 
 reset: ## Stop docker and remove dependencies
 	${MAKE} docker.down || true
-	rm -rf ${APP_DIR}/node_modules ${APP_DIR}/yarn.lock
 	rm -rf ${APP_DIR}
-	rm -rf vendor composer.lock
+	rm -rf node_modules yarn.lock vendor composer.lock
 .PHONY: reset
 
 dependencies: composer.lock node_modules ## Setup the dependencies
@@ -46,6 +45,7 @@ yarn.install: ${APP_DIR}/yarn.lock
 
 ${APP_DIR}/yarn.lock:
 	ln -sf ${APP_DIR}/node_modules node_modules
+	touch ${APP_DIR}/yarn.lock
 	cd ${APP_DIR} && ${YARN} install && ${YARN} build
 # No CSS and JS on this plugin yet
 #	${YARN} install

README.md

@@ -9,18 +9,19 @@
 
 This plugin adds a rich editor on the fields you want. Now you can manage your content very easily!
 
-![Example of rich editor field](docs/images/screenshots/demo.gif)
+![Example of rich editor panel](docs/images/screenshots/elements.png)
+![Example of admin form](docs/images/screenshots/admin.png)
+![Example of front display](docs/images/screenshots/front.png)
 
 ## Compatibility
 
 | Sylius Version | PHP Version     |
 |----------------|-----------------|
-| 1.12           | 8.1 - 8.2 - 8.3 |
-| 1.13           | 8.1 - 8.2 - 8.3 |
-| 1.14           | 8.1 - 8.2 - 8.3 |
+| 2.0            | 8.1 - 8.2       |
 
-## Installation
+ℹ️ For Sylius 1.x, see our branch [branch 2.x] (https://github.com/monsieurbiz/SyliusRichEditorPlugin/tree/2.0) and all 2.x releases.
 
+## Installation
 
 ### Require the plugin
 
@@ -45,6 +46,7 @@ Change your `config/bundles.php` file to add the line for the plugin :
 
 return [
     //..
+    Twig\Extra\TwigExtraBundle\TwigExtraBundle::class => ['all' => true],
     MonsieurBiz\SyliusRichEditorPlugin\MonsieurBizSyliusRichEditorPlugin::class => ['all' => true],
 ];
 ```
@@ -66,12 +68,13 @@ monsieurbiz_richeditor_admin:
 </p>
 </details>
 
-### Correct `Twig\Extra\Intl\IntlExtension` conflict
+### Correct `Twig\Extra\Intl\IntlExtension` and `Twig\Extra\String\StringExtension` conflict
 
-If the recipe did not comment it, update the file `config/packages/twig.yaml` to comment or remove the `IntlExtension` declaration :
+If the recipe did not comment it, update the file `config/packages/twig.yaml` to comment or remove the `IntlExtension` and `StringExtension` declarations :
 
 ```yaml
 # Twig\Extra\Intl\IntlExtension: ~
+#Twig\Extra\String\StringExtension: ~
 ```
 
 ### Install the assets
@@ -84,17 +87,8 @@ bin/console asset:install
 
 ## Use it with the [Sylius Media Manager](https://github.com/monsieurbiz/SyliusMediaManagerPlugin/)
 
-You don't need to do something, everything is compatible.
-
-```
-composer require monsieurbiz/sylius-media-manager-plugin="^1.0"
-```
-
-If you used the rich editor before using the media manager, you need to override the form theme of the media manager plugin :
-```
-mkdir -p templates/bundles/MonsieurBizSyliusMediaManagerPlugin/Admin/MediaManager/Form/;
-cp dist/templates/bundles/MonsieurBizSyliusMediaManagerPlugin/Admin/MediaManager/Form/_theme.html.twig templates/bundles/MonsieurBizSyliusMediaManagerPlugin/Admin/MediaManager/Form/_theme.html.twig;
-```
+The Media Manager is not compatible yet with Rich Editor v3.
+We are doing our best to make it work with it. Stay tuned!
 
 ## Use the Rich Editor
 
@@ -106,11 +100,9 @@ We have an example of implementation in the [file for the test application](/dis
 If your field has some data already, like some previous text before installing this plugin, 
 then we will convert it for you as an HTML Element which contains… HTML.
 
-![Example of a rich editor field](docs/images/screenshots/form_field.png)
-
 This way you will be able to use our plugin right away without risking any data lost!
 
-To make it clear: to have rich editor for original admin fields, like _Product description_, _Taxon desription_ etc. you have to update each form type by an extension as the example shows above.
+⚠️ To have rich editor for original admin fields, like _Product description_, _Taxon desription_ etc. you have to update each form type by an extension as the example shows above.
 
 ### Call twig render
 
@@ -201,75 +193,21 @@ monsieurbiz_sylius_richeditor:
 
 ## Available elements
 
-### Row Element (Layout)
-
-It contains another rich editor field, each element will be displayed one below the other (as rows…).
-
-### Column Element (Layout)
-
-It contains another rich editor field, each element will be displayed side by side (as columns…).
-
-By using this element in the `Row` element, you will be able to build some layout like the screenshot below.  
-You can distinguish the `Row` element and the `Column` element by their dotted borders.
-
-![The Columns and Rows elements](docs/images/screenshots/columns_and_rows.jpg)
-
-### HTML Element
-
-![The HTML element](docs/images/screenshots/html.png)
-
-### Markdown Element
-
-![The Markdown element](docs/images/screenshots/markdown.png)
-
-You can use `MONSIEURBIZ_SYLIUS_RICH_EDITOR_ENABLED_HIGHLIGHT_JS_SHOP` to enable code highlighting in the shop.
-Also you can change the theme with `MONSIEURBIZ_SYLIUS_RICH_EDITOR_ENABLED_HIGHLIGHT_JS_THEME`.
-
-### Text element
-
-![The text element](docs/images/screenshots/text.png)
-
-### Quote element
-
-![The quote element](docs/images/screenshots/quote.png)
-
-### Image element
-
-![The image element](docs/images/screenshots/image.png)
-
-### Video element
-
-![The video element](docs/images/screenshots/video.png)
-
-### Button element
-
-![The button element](docs/images/screenshots/button.png)
-
-### Title element
-
-![The title element](docs/images/screenshots/title.png)
-
-### Separator element
-
-![The separator element](docs/images/screenshots/separator.png)
-
-### Youtube element
-
-![The Youtube element](docs/images/screenshots/youtube.png)
-
-### Image collection element
-
-![The Image collection element](docs/images/screenshots/image_collection.png)
-
-## Example of a rich product description
-
-### Admin form with preview
-
-![Admin full form](docs/images/screenshots/full_back.png)
-
-### Front display
-
-![Front full display](docs/images/screenshots/full_front.png)
+- Two columns element (Layout)
+- Row Element (Layout)
+- Column Element (Layout)
+- HTML Element
+- Markdown Element
+- Text element
+- Quote element
+- Image element
+- Video element
+- Button element
+- Title element
+- Separator element
+- Youtube element
+- Image collection element
+- Anchor element
 
 ## Create your own elements
 
@@ -413,27 +351,6 @@ Here is an example of a simple template for this our which can be used in front
 <iframe id="gmap_canvas" src="{{ element.link }}" scrolling="no" marginheight="0" marginwidth="0" width="600" height="500" frameborder="0"></iframe>
 ```
 
-
-### The result !
-
-#### The element is in the UI Elements list
-
-![The Google Maps element](docs/images/screenshots/gmap_element.png)
-
-#### You now have a form to edit it (your form!)
-
-![The Google Maps form](docs/images/screenshots/gmap_form.png)
-
-#### And we use your templates to render your UiElement
-
-In admin : 
-
-![The GMap display](docs/images/screenshots/gmap_render_admin.png)
-
-In front : 
-
-![The GMap display](docs/images/screenshots/gmap_render.png)
-
 ## File in fixtures management
 
 In some cases you will want to add UI elements to your content fixtures which are Rich Editor fields. If you need files in your UI elements, you can use a dedicated fixture. It is used as follows.   

UPGRADE-3.0.md

@@ -0,0 +1,6 @@
+# Upgrade from v2 to v3
+
+## Title UI Elements
+
+H1, H2 and H3 are now Title element.
+The element stills available for existing contents, but you cannot add new ones.

assets/css/app.scss

@@ -60,9 +60,9 @@ html.is-disabled body {
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: 999;
+    z-index: 1020;
     display: none;
-    padding: 0.714rem 0 0.714rem 5%;
+    padding: 0 0 0 15rem;
     -webkit-user-select: none;
     -ms-user-select: none;
     user-select: none;
@@ -99,6 +99,7 @@ html.is-disabled body {
     border-right-width: 0;
     border-radius: 0.286rem 0 0 0.286rem;
     box-shadow: 1px 3px 3px 0 rgba(0, 0, 0, 0.2), 1px 3px 15px 2px rgba(0, 0, 0, 0.2);
+    overflow: auto;
 }
 
 [aria-hidden=false] .uie-panels__content {
@@ -124,6 +125,10 @@ html.is-disabled body {
     box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
 }
 
+.uie-panels__new>.row {
+    height: 100%;
+}
+
 .uie-panels__new[aria-hidden=false] {
     display: flex;
 }
@@ -190,10 +195,6 @@ html.is-disabled body {
     cursor: pointer;
 }
 
-.uie-card .content {
-    padding-top: 1.5rem !important;
-}
-
 .uie-card .header {
     display: flex !important;
     justify-content: space-between;