rewrite mayProse and default container

Pushword · May 4, 2021 · 5f9323b · 5f9323b
1 parent 1416f85
commit 5f9323b
Show file tree

Hide file tree

Showing 21 changed files with 113 additions and 58 deletions.
diff --git a/packages/admin-block-editor-tools/src/Hyperlink/Hyperlink.js b/packages/admin-block-editor-tools/src/Hyperlink/Hyperlink.js
@@ -122,7 +122,6 @@ export default class Hyperlink extends HyperlinkTool {
 
     insertLink(link, target = "", rel = "", design = "") {
         let anchorTag = this.initSelection ? this.initSelection : this.selection.findParentTag("A");
-        console.log(this.initSelection);
         if (anchorTag) {
             this.selection.expandToTag(anchorTag);
             anchorTag["href"] = link;

diff --git a/packages/admin-block-editor/src/BlockEditorFilter.php b/packages/admin-block-editor/src/BlockEditorFilter.php
@@ -21,7 +21,7 @@ final class BlockEditorFilter extends AbstractFilter
     /** @var array */
     private $appBlocks;
 
-    private bool $proseOpen = false;
+    private bool $proseOpen = true;
 
     /**
      * @return string
@@ -44,7 +44,10 @@ public function apply($propertyValue)
             $renderValue .= $this->mayProse($block->type).$blockRendered."\n";
         }
 
-        return $renderValue.($this->proseOpen ? "\n".'</div>'."\n" : '');
+        //$renderValue = '<div>'.$renderValue.'</div>'; // Avoid markdown bug
+        return $renderValue;
+        //.(!$this->proseOpen ? "\n".'<div'.$this->getHtmlClass($this->getEntity(), 'prose').'>'."\n" : '');
+        //"\n".'</div>'."\n" : '');
     }
 
     private function mayProse(string $type): string

diff --git a/packages/admin-block-editor/src/DependencyInjection/Configuration.php b/packages/admin-block-editor/src/DependencyInjection/Configuration.php
@@ -16,7 +16,7 @@ class Configuration implements ConfigurationInterface
         'admin_block_editor_type_to_prose',
     ];
 
-    const DEFAULT_TYPE_TO_PROSE = ['paragraph', 'image', 'list', 'blockquote', 'code'];
+    const DEFAULT_TYPE_TO_PROSE = ['paragraph', 'image', 'list', 'blockquote', 'code', 'delimiter', 'header'];
 
     public function getConfigTreeBuilder()
     {

diff --git a/packages/admin-block-editor/src/EventSuscriber/EnityFilterSuscriber.php b/packages/admin-block-editor/src/EventSuscriber/EnityFilterSuscriber.php
@@ -3,6 +3,7 @@
 namespace Pushword\AdminBlockEditor\EventSuscriber;
 
 use Pushword\AdminBlockEditor\BlockEditorFilter;
+use Pushword\Core\Component\App\AppConfig;
 use Pushword\Core\Component\EntityFilter\FilterEvent;
 use Pushword\Core\Entity\PageInterface;
 use Twig\Environment as Twig;
@@ -22,20 +23,31 @@ public static function getSubscribedEvents(): array
     public function convertJsBlockToHtml(FilterEvent $event): void
     {
         $page = $event->getManager()->getEntity();
+        $app = $this->apps->get($page->getHost());
 
         if (! $page instanceof PageInterface
             || 'MainContent' != $event->getProperty()
             || ! $this->mayUseEditorBlock($page)
-            || true === $this->apps->get($page->getHost())->get('admin_block_editor_disable_listener')) {
+            || true === $app->get('admin_block_editor_disable_listener')) {
             return;
         }
 
+        $this->removeMarkdownFilter($app);
+
         $blockEditorFilter = (new BlockEditorFilter())
-            ->setApp($this->apps->get($page->getHost()))
+            ->setApp($app)
             ->setEntity($page)
             ->setTwig($this->twig)
         ;
 
         $page->setMainContent($blockEditorFilter->apply($page->getMainContent()));
+        //dump($page->getMainContent());
+    }
+
+    private function removeMarkdownFilter(AppConfig $app): void
+    {
+        $filters = $app->getFilters();
+        $filters['main_content'] = str_replace(',markdown', '', $filters['main_content']);
+        $app->setFilters($filters);
     }
 }
diff --git a/packages/admin-block-editor/src/templates/block/attaches.html.twig b/packages/admin-block-editor/src/templates/block/attaches.html.twig
@@ -1,5 +1,5 @@
 {% apply unprose %}
-<div class="flex flex-row p-3 mx-3 my-6 border border-gray-400 rounded clickable">
+<div class="flex flex-row p-3 mx-3 my-6 border border-gray-400 rounded clickable cursor-pointer">
     <div class="w-16 px-3 text-gray-400">
         {{ svg('file-alt', {class: 'w-8 pt-2 fill-current'}) }}
     </div>

diff --git a/packages/admin-block-editor/src/templates/block/delimiter.html.twig b/packages/admin-block-editor/src/templates/block/delimiter.html.twig
@@ -1 +1 @@
-<!-- break -->
+<!--break-->
diff --git a/packages/admin-block-editor/src/templates/block/embed.html.twig b/packages/admin-block-editor/src/templates/block/embed.html.twig
@@ -1,5 +1,5 @@
 {% apply unprose %}
-{% if data.stretched is defined and data.stretched %}<div class="w-full-vw">{% endif %}
+{% if data.stretched is defined and data.stretched %}<div class="w-screen relative left-1/2 right-1/2 mr-[-50vw] ml-[-50vw]">{% endif %}
 
 {{ video(data.serviceUrl, data.image.url, data.alternativeText) }}
 

diff --git a/packages/admin-block-editor/src/templates/block/image.html.twig b/packages/admin-block-editor/src/templates/block/image.html.twig
@@ -1,4 +1,4 @@
-{% if data.stretched %}<div class="w-full-vw">{% endif %}
+{% if data.stretched %}<div class="w-screen relative left-1/2 right-1/2 mr-[-50vw] ml-[-50vw]">{% endif %}
 {% if data.withBackground %}<div class="px-12 py-1 text-center bg-gray-200 rounded">{% endif %}
 
     {% include view('/component/image_inline.html.twig') with {

diff --git a/packages/admin-block-editor/src/templates/block/paragraph.html.twig b/packages/admin-block-editor/src/templates/block/paragraph.html.twig
@@ -1,2 +1,2 @@
 
-<p{% if data.alignment is defined and data.alignment %} class="{{ 'text-' ~ data.alignment }}"{% endif %}>{{ data.text|raw }}</p>
+<p{% if data.alignment is defined and data.alignment and data.alignment != 'left' %} class="{{ 'text-' ~ data.alignment }}"{% endif %}>{{ data.text|raw }}</p>
diff --git a/packages/core/src/Component/App/AppConfig.php b/packages/core/src/Component/App/AppConfig.php
@@ -128,6 +128,11 @@ public function getFilters(): array
         return $this->filters;
     }
 
+    public function setFilters(array $filters): void
+    {
+        $this->filters = $filters;
+    }
+
     public function entityCanOverrideFilters(): bool
     {
         return $this->entityCanOverrideFilters;

diff --git a/packages/core/src/Component/EntityFilter/Filter/Email.php b/packages/core/src/Component/EntityFilter/Filter/Email.php
@@ -4,7 +4,6 @@
 
 use Pushword\Core\AutowiringTrait\RequiredAppTrait;
 use Pushword\Core\AutowiringTrait\RequiredTwigTrait;
-use Pushword\Core\Twig\EmailTwigTrait;
 use Pushword\Core\Twig\LinkTwigTrait;
 
 class Email extends AbstractFilter

diff --git a/packages/core/src/Component/EntityFilter/Filter/MainContentSplitter.php b/packages/core/src/Component/EntityFilter/Filter/MainContentSplitter.php
@@ -15,14 +15,19 @@ class MainContentSplitter extends AbstractFilter
     use RequiredEntityTrait;
     use RequiredTwigTrait;
 
-    private array $parts = ['chapeau', 'intro', 'toc', 'content', 'postContent'];
+    // delimiter <!--break-->
+    private array $parts = [
+        'chapeau', // content before the first *delimiter*
+        'intro', // when toc is active, content between the first delimiter (or from the begining) to the first hN
+        'toc',  // Table of Content
+        'content',
+    ];
 
     private string $chapeau = '';
     private string $intro = '';
     private string $toc = '';
     private string $content = '';
-    private string $postContent = '';
-    private array $contentPart = [];
+    private array $contentParts = [];
 
     /**
      * @return self
@@ -38,22 +43,27 @@ private function split($mainContent): void
     {
         $this->content = (string) $mainContent;
 
-        $parsedContent = explode('<!--break-->', $this->content);
+        $parsedContent = explode('<!--break-->', $this->content, 2);
 
         $this->chapeau = isset($parsedContent[1]) ? $parsedContent[0] : '';
         $this->content = $parsedContent[1] ?? $parsedContent[0];
 
-        if (isset($parsedContent[1])) {
-            unset($parsedContent[0], $parsedContent[1]);
-        } else {
-            unset($parsedContent[0]);
+        if (null !== $this->entity->getCustomProperty('toc')) {
+            $this->parseToc();
         }
 
-        $this->contentPart = array_values($parsedContent);
+        $this->splitContentToParts();
+    }
 
-        if (null !== $this->entity->getCustomProperty('toc')) {
-            $this->parseToc();
+    private function splitContentToParts(): void
+    {
+        $parsedContent = explode('<!--break-->', $this->content);
+        if (! isset($parsedContent[1])) {
+            return;
         }
+        $this->content = $parsedContent[0];
+        unset($parsedContent[0]);
+        $this->contentParts = array_values($parsedContent);
     }
 
     private function parseToc(): void
@@ -71,7 +81,7 @@ private function parseToc(): void
 
     public function getBody(bool $withChapeau = false): string
     {
-        return ($withChapeau ? $this->chapeau : '').$this->intro.$this->content.$this->postContent;
+        return ($withChapeau ? $this->chapeau : '').$this->intro.$this->content;
     }
 
     public function getChapeau(): string
@@ -84,9 +94,9 @@ public function getContent(): string
         return $this->content;
     }
 
-    public function getContentPart($key): string
+    public function getContentParts(): array
     {
-        return $this->contentPart[$key - 1];
+        return $this->contentParts;
     }
 
     public function getIntro(): string

diff --git a/packages/core/src/Resources/assets/tailwind.config.js b/packages/core/src/Resources/assets/tailwind.config.js
@@ -1,3 +1,5 @@
+const plugin = require("tailwindcss/plugin");
+
 module.exports = {
     mode: "jit",
     purge: {}, // directly in webpack
@@ -33,5 +35,16 @@ module.exports = {
         },
     },
     variants: {},
-    plugins: [require("@tailwindcss/typography"), require("@tailwindcss/aspect-ratio"), require("@tailwindcss/forms")],
+    plugins: [
+        require("@tailwindcss/typography"),
+        require("@tailwindcss/aspect-ratio"),
+        require("@tailwindcss/forms"),
+        plugin(function ({ addVariant, e }) {
+            addVariant("first-letter", ({ modifySelectors, separator }) => {
+                modifySelectors(({ className }) => {
+                    return `.${e(`first-letter${separator}${className}`)}:first-letter`;
+                });
+            });
+        }),
+    ],
 };
diff --git a/packages/core/src/Resources/public/tailwind.min.css b/packages/core/src/Resources/public/tailwind.min.css
diff --git a/packages/core/src/Twig/ClassTrait.php b/packages/core/src/Twig/ClassTrait.php
@@ -7,8 +7,8 @@
 
 trait ClassTrait
 {
-    private string $defaultContainerClass = 'max-w-screen-sm px-3 py-12 mx-auto mb-auto';
-    private string $defaultProseClass = 'prose max-w-none';
+    private string $defaultContainerClass = 'py-12 px-3';
+    private string $defaultProseClass = 'prose';
 
     abstract public function getApp(): AppConfig;
 

diff --git a/packages/core/src/Twig/LinkTwigTrait.php b/packages/core/src/Twig/LinkTwigTrait.php
@@ -6,7 +6,6 @@
 use Pushword\Core\Component\App\AppConfig;
 use Pushword\Core\Entity\PageInterface;
 use Pushword\Core\Router\RouterInterface;
-use Twig\Environment as Twig;
 
 trait LinkTwigTrait
 {
@@ -38,7 +37,7 @@ public function renderLink($anchor, $path, $attr = [], bool $encrypt = true): st
         }
 
         if ($encrypt) {
-            if(strpos($path, 'mailto:') !== false && filter_var($anchor, FILTER_VALIDATE_EMAIL)) {
+            if (false !== strpos($path, 'mailto:') && filter_var($anchor, \FILTER_VALIDATE_EMAIL)) {
                 return $this->renderEncodedMail($anchor);
             }
             $attr = array_merge($attr, ['data-rot' => self::encrypt($path)]);

diff --git a/packages/core/src/templates/component/images_gallery.html.twig b/packages/core/src/templates/component/images_gallery.html.twig
@@ -11,7 +11,7 @@
     {% set gallery_id = random(10, 1000) %}
     {% set grid_cols = grid_cols|default(images|length < 5 ? images|length : (images|length is odd ? 3 : 4)) %}
 
-        <div class="{{ gallery_container_class|default('my-3') }}">{# w-full-vw #}
+        <div class="{{ gallery_container_class|default('my-3') }}">{# w-screen relative left-1/2 right-1/2 mr-[-50vw] ml-[-50vw] #}
             <ul class="{{ gallery_class|default('grid sm:grid-cols-' ~ grid_cols ~ ' gap-1 md:gap-3 list-none unprose max-w-2xl mx-auto') }}">
                 {# sm:grid-cols-2 sm:grid-cols-3 sm:grid-cols-4 #}
                 {% for name, image in images %}

diff --git a/packages/core/src/templates/page/_content.html.twig b/packages/core/src/templates/page/_content.html.twig
@@ -1,6 +1,6 @@
 {% block content %}
-<div{{ class(page, 'container', 'max-w-screen-sm px-3 pt-3 pb-12 pt-3 mx-auto mb-auto') }}> {# /!\ must be sync with \Pushword\Core\Twig\ClassTrait::$defaultContainerClass #}
-    <div{{ class(page, 'prose', 'prose max-w-none') }}>
+<div{{ class(page, 'container', 'py-12 px-3') }}> {# /!\ must be sync with \Pushword\Core\Twig\ClassTrait::$defaultContainerClass #}
+    <div{{ class(page, 'prose', 'prose') }}>
 
         {% block content_header %}
             {% block h1 %}
@@ -37,7 +37,24 @@
             {% endif %}
         {% endblock %}
 
+        {# todo: if main.content.body finished with an opening div, remove it and remove the next div close :
+        preg_replace('#<div class="prose">\S*</div>#si', '', html) #}
 
     </div>
 </div>
+
+{% block content_part %}
+    {% if pw(page).mainContent.contentParts %}
+        {% for contentPart in pw(page).mainContent.contentParts %}
+        <div{{ class(page, 'partContainer', 'py-12 px-3 ' ~ cycle(['bg-gray-200', ''], loop.index0)) }}>
+            <div{{ class(page, 'prose', 'prose') }}>
+            {{ contentPart|raw }}
+            </div>
+        </div>
+        {% endfor %}
+    {% endif %}
+{% endblock %}
+
+
+
 {% endblock %}
diff --git a/packages/docs/content/upgrade.md b/packages/docs/content/upgrade.md
@@ -11,7 +11,15 @@ Run `composer update` and the job is done (almost).
 
 If you are doing a major upgrade, find the upgrade guide down there.
 
-## To 0.0.727
+## To 0.0.728
+
+-   Update stylesheets
+
+```
+cd assets && yarn && yarn encore production
+```
+
+-   Update doctrine
 
 ```
 bin/console make:migration && bin/console doctrine:migrations:migrate

diff --git a/packages/js-helper/src/tailwind.prose.scss b/packages/js-helper/src/tailwind.prose.scss
@@ -1,3 +1,11 @@
+/**
+ * Override tailwind prose
+ */
+.prose {
+    width: 100%;
+    margin: 0 auto;
+}
+
 /**
  * Relative to link
  */
@@ -32,10 +40,6 @@
     color: #fff !important;
 }
 
-.clickable {
-    cursor: pointer;
-}
-
 /**
  * Some smoothiness
  */
@@ -56,21 +60,7 @@ html {
     padding-top: 1rem;
 }
 
-/**
- * Special full-width from everywhere
- */
-
-.w-full-vw {
-    /* TODO : move to tailwind plugin */
-    width: 100vw;
-    position: relative;
-    left: 50%;
-    right: 50%;
-    margin-left: -50vw;
-    margin-right: -50vw;
-}
-
-.first-letter:text-lg {
-    font-size: 1.125rem;
-    line-height: 1.75rem;
-}
+/*
+ * Special full-width from everywhere alias .w-full-vw:
+ w-screen relative left-1/2 right-1/2 mr-[-50vw] ml-[-50vw]
+*/
diff --git a/packages/skeleton/var/app.db b/packages/skeleton/var/app.db