Merge pull request #25 from bolt/add-clips-and-more-settings

Add Clips and more settings

assets/redactor/redactor-backend-extras.css

@@ -0,0 +1,41 @@
+/* Default Styles and overrides */
+.redactor-source, .redactor-styles {
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+}
+
+.redactor-styles img {
+    max-width: 75%;
+}
+
+.redactor-styles blockquote {
+    background-color: #F5F5F5;
+    border-left: 5px solid #dbdbdb;
+    padding: 1.25em 1.5em;
+    font-style: italic;
+    color: #31363A;
+}
+
+.redactor-styles blockquote p {
+    margin: 0;
+}
+
+/* See: https://github.com/bolt/redactor/issues/3 */
+.redactor-air, .redactor-toolbar {
+    z-index: 40;
+}
+
+.redactor-air, .redactor-toolbar a {
+    text-decoration: none !important;
+}
+
+/* Clips */
+.callout-clip {
+    border: 1px solid #999;
+    background: #E8E8E8;
+    padding: 0.5rem;
+    margin: 1rem 0;
+}
+
+.callout-clip p {
+    font-weight: bold;
+}

config/config.yaml

@@ -4,36 +4,83 @@
 # parameters to the `$R('#content', { … })` call.
 # See vendor/bolt/redactor/src/RedactorConfig.php::getDefaults for the default values. The values
 # below will be merged or appended with those values.
+
 default:
-  # All options for buttons: html, format, bold, italic, deleted, lists, link, file, line, redo,
-  # undo, underline, ol, ul, indent, outdent, sup, sub
-  buttons: [ format, bold, italic, lists, link, html, image ]
-
-  # See https://imperavi.com/redactor/plugins/ for available plugins
-  # Common items include video, widget, counter, clips, imagemanager, definedlinks
-  plugins: [ fullscreen, table, video, imagemanager, definedlinks]
-
-  # Set this to false to hide the button to toggle showing the HTML source of the field. Setting it
-  # to plain `true` will override Redactor using the CodeMirror component, and it will show a plain
-  # source code editor instead.
-  # source: false
-
-  # By default, pressing the Enter key will start a new `<p>` paragraph. Set `breakline` to false
-  # to insert a `<br>` tag instead.
-  breakline: false
-
-  # Settings for images
-  # Note: The current editor can only upload / insert images if they are granted 
-  # the 'upload' and 'list_files:files' permissions in `permissions.yaml`.
-  image:
-    thumbnail: 1000×1000×max
-  imageResizable: false
-  imagePosition: true
-
-  # The tags to show in the 'Formatting' drop-down menu. Note: Block-level tags only!
-  # Use the `inlinestyles` plugin for inline tags
-  formatting: ['p', 'blockquote', 'pre', 'h2', 'h3', 'h4', 'h5']
-
-# If you have added custom plugins, add them to the mapping below.
-# plugins:
-#   myplugin: ['/assets/myplugin/myplugin.min.js', '/assets/myplugin/myplugin.min.css']
+    # All options for buttons: html, format, bold, italic, deleted, lists, link, file, line, redo,
+    # undo, underline, ol, ul, indent, outdent, sup, sub
+    buttons: [ format, bold, italic, lists, link, html, image ]
+
+    # See https://imperavi.com/redactor/plugins/ for available plugins
+    # Common items include video, widget, counter, clips, imagemanager, definedlinks
+    plugins: [ fullscreen, table, video, imagemanager, definedlinks, clips]
+
+    # Set this to false to hide the button to toggle showing the HTML source of the field. Setting it
+    # to plain `true` will override Redactor using the CodeMirror component, and it will show a plain
+    # source code editor instead.
+    # source: false
+
+    # By default, pressing the Enter key will start a new `<p>` paragraph. Set `breakline` to false
+    # to insert a `<br>` tag instead.
+    breakline: false
+
+    # Settings for images
+    # Note: The current editor can only upload / insert images if they are granted 
+    # the 'upload' and 'list_files:files' permissions in `permissions.yaml`.
+    image:
+        thumbnail: 1000×1000×max
+    imageResizable: false
+    imagePosition: true
+
+    # The tags to show in the 'Formatting' drop-down menu. Note: Block-level tags only!
+    # Use the `inlinestyles` plugin for inline tags
+    formatting: ['p', 'blockquote', 'pre', 'h2', 'h3', 'h4', 'h5']
+
+    clips:
+        - ['Lorem ipsum...', '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Respondent extrema primis, media utrisque, omnia omnibus. Sedulo, inquam, faciam. Expressa vero in iis aetatibus, quae iam confirmatae sunt. Duo Reges: constructio interrete. Si longus, levis; Bonum integritas corporis: misera debilitas.</p>']
+        - ['Callout (with list)', "<div class='callout-clip'><p>This is an example of the 'Callout clip'</p><ul><li>Item one</li><li>Item two</li><li>Item three</li></ul></div>"]
+
+    # Extra CSS and/or JS files to include in the backend. They can be sourced from the (provided) `/assets/` folder, or from the current theme
+    includes:
+        - 'assets/redactor/redactor-backend-extras.css'
+    #  - '%theme%/redactor-backend-extras.css'
+
+    # This setting allows to set minimum height for Redactor
+    minHeight: 200px
+
+    # This setting allows to set maximum height for Redactor
+    maxHeight: 700px
+
+    # This settings introduces visual indicators for HTML tags h1-h6 and div, helping users understand the structure of the document. 
+    structure: false
+
+    # This setting removes all new lines between tags in the Redactor source code
+    removeNewLines: true
+
+    # This setting removes the script tag in the HTML source.
+    removeScript: true
+
+    # To prevent Redactor from removing HTML comments, set this to false.
+    removeComments: false
+
+    # This setting will remove all tags and formatting from pasted text, excluding links and images.
+    pastePlainText: false
+
+    #  Whenever you need to exclude images from the content that users can paste, this setting is here for you.
+    pasteImages: false
+
+    # Set this to false, and all links will be pasted as plain text.
+    pasteLinks: false
+
+    # This setting allows to turn off a browser spell checking for Redactor.
+    spellcheck: true
+
+    # Whenever you need to control which block tags your users can paste, use this setting
+    # pasteBlockTags: ['blockquote', 'p']
+
+    # Whenever you need to control which inline tags your users can paste, use this setting.
+    # pasteInlineTags: ['a', 'br', 'strong', 'ins', 'code', 'del']
+
+    # If you have added custom plugins, place them in `/assets/redactor/plugins/`, add them to the mapping below.
+    # plugins:
+    #   myplugin: ['myplugin/myplugin.min.js', '/myplugin/myplugin.min.css']
+

src/RedactorConfig.php

@@ -112,14 +112,15 @@ public function getDefaults()
 
             'minHeight' => '200px',
             'maxHeight' => '700px',
-            'structure' => true,
+            'structure' => false,
             'pasteClean' => true,
             'source' => [
                 'codemirror' => [
                     'lineNumbers' => true,
                 ],
             ],
             'buttonsTextLabeled' => false,
+            'includes' => [],
         ];
 
         if (! $this->security->isGranted('upload')) {

src/TwigExtension.php

@@ -5,6 +5,9 @@
 namespace Bolt\Redactor;
 
 use Bolt\Common\Json;
+use Bolt\Configuration\Config;
+use Psr\Container\ContainerInterface;
+use Symfony\Component\DependencyInjection\Container;
 use Twig\Extension\AbstractExtension;
 use Twig\TwigFunction;
 use Webmozart\PathUtil\Path;
@@ -14,9 +17,17 @@ class TwigExtension extends AbstractExtension
     /** @var RedactorConfig */
     private $redactorConfig;
 
-    public function __construct(RedactorConfig $redactorConfig)
+    /** @var Config */
+    private $boltConfig;
+
+    /** @var Container */
+    private $container;
+
+    public function __construct(RedactorConfig $redactorConfig, Config $boltConfig, ContainerInterface $container)
     {
         $this->redactorConfig = $redactorConfig;
+        $this->boltConfig = $boltConfig;
+        $this->container = $container;
     }
 
     public function getFunctions(): array
@@ -40,6 +51,7 @@ public function redactorSettings(): string
 
     public function redactorIncludes(): string
     {
+        // First, the includes needed for the various activated plugins
         $used = $this->redactorConfig->getConfig()['plugins'];
         $plugins = collect($this->redactorConfig->getPlugins());
 
@@ -61,6 +73,32 @@ public function redactorIncludes(): string
             }
         }
 
+        // Next, if there are extra inludes configured, we add them here
+        $includes = $this->redactorConfig->getConfig()['includes'];
+
+        foreach ($includes as $item) {
+
+            $item = $this->makePath($item);
+
+            if (Path::getExtension($item) === 'css') {
+                $output .= sprintf('<link rel="stylesheet" href="%s">', $item);
+            }
+            if (Path::getExtension($item) === 'js') {
+                $output .= sprintf('<script src="%s"></script>', $item);
+            }
+            $output .= "\n";
+        }
+
         return $output;
     }
+
+    private function makePath(string $item): string
+    {
+        $path = $this->boltConfig->getPath($item, false);
+        $publicFolder = $this->container->getParameter('kernel.project_dir') . '/' . $this->container->getParameter('bolt.public_folder');
+
+        $path = '/' . Path::makeRelative($path, $publicFolder);
+
+        return $path;
+    }
 }

templates/injector.html.twig

@@ -2,7 +2,6 @@
 <link rel="stylesheet" href="{{ asset('assets/redactor/redactor.min.css', 'public') }}">
 {{ redactor_includes() }}
 <script>
-    
     $R.options = {
         callbacks: {
             image: {
@@ -19,49 +18,18 @@
             }
         }
     };
-    
+
     function initRedactors() {
         $('.redactor-field').removeClass('d-none');
         $R('.redactor-field', {{ redactor_settings() }});
     }
-    
+
     $(document).on('DOMNodeInserted', function(e) {
         if ( $(e.target).hasClass('collection-item') ) {
             initRedactors();
         }
     });
-    
-    initRedactors();
 
+    initRedactors();
 </script>
-<style>
-    .redactor-source, .redactor-styles {
-        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-    }
-
-    .redactor-styles img {
-        max-width: 75%;
-    }
-
-    .redactor-styles blockquote {
-        background-color: #F5F5F5;
-        border-left: 5px solid #dbdbdb;
-        padding: 1.25em 1.5em;
-        font-style: italic;
-        color: #31363A;
-    }
-
-    .redactor-styles blockquote p {
-        margin: 0;
-    }
-
-    {# See: https://github.com/bolt/redactor/issues/3 #}
-    .redactor-air, .redactor-toolbar {
-        z-index: 40;
-    }
-
-    .redactor-air, .redactor-toolbar a {
-        text-decoration: none !important;
-    }
-</style>