diff --git a/assets/redactor/redactor-backend-extras.css b/assets/redactor/redactor-backend-extras.css new file mode 100644 index 0000000..4104604 --- /dev/null +++ b/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; +} diff --git a/config/config.yaml b/config/config.yaml index cd93dae..8835941 100644 --- a/config/config.yaml +++ b/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 `

` paragraph. Set `breakline` to false - # to insert a `
` 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 `

` paragraph. Set `breakline` to false + # to insert a `
` 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...', '

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.

'] + - ['Callout (with list)', "

This is an example of the 'Callout clip'

"] + + # 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'] + diff --git a/src/RedactorConfig.php b/src/RedactorConfig.php index c13621e..97c77a9 100644 --- a/src/RedactorConfig.php +++ b/src/RedactorConfig.php @@ -112,7 +112,7 @@ public function getDefaults() 'minHeight' => '200px', 'maxHeight' => '700px', - 'structure' => true, + 'structure' => false, 'pasteClean' => true, 'source' => [ 'codemirror' => [ @@ -120,6 +120,7 @@ public function getDefaults() ], ], 'buttonsTextLabeled' => false, + 'includes' => [], ]; if (! $this->security->isGranted('upload')) { diff --git a/src/TwigExtension.php b/src/TwigExtension.php index b91f027..a7d1def 100644 --- a/src/TwigExtension.php +++ b/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('', $item); + } + if (Path::getExtension($item) === 'js') { + $output .= sprintf('', $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; + } } diff --git a/templates/injector.html.twig b/templates/injector.html.twig index 962904a..b75328e 100644 --- a/templates/injector.html.twig +++ b/templates/injector.html.twig @@ -2,7 +2,6 @@ {{ redactor_includes() }} -