Permalink
Browse files

EZP-29554: As an editor, I want to be able to apply custom styles to …

…part of my text (#2427)

* EZP-29554: Added Custom Styles support for RichText Field Type

Added a way to declare and use custom "styles" in richtext (https://alloyeditor.com/docs/features/styles.html)

* EZP-29554: Added improvements after code review
  • Loading branch information...
florianalexandre authored and alongosz committed Sep 13, 2018
1 parent 4892d15 commit 36f372c3b7c21adec7970439af8e2ca9e775097e
Showing with 750 additions and 75 deletions.
  1. +38 −3 eZ/Bundle/EzPublishCoreBundle/DependencyInjection/Configuration.php
  2. +40 −0 eZ/Bundle/EzPublishCoreBundle/DependencyInjection/Configuration/Parser/FieldType/RichText.php
  3. +7 −0 eZ/Bundle/EzPublishCoreBundle/DependencyInjection/EzPublishCoreExtension.php
  4. +12 −0 eZ/Bundle/EzPublishCoreBundle/Resources/config/default_settings.yml
  5. +12 −0 eZ/Bundle/EzPublishCoreBundle/Resources/config/fieldtype_services.yml
  6. +1 −0 eZ/Bundle/EzPublishCoreBundle/Resources/views/FieldType/RichText/style/default.html.twig
  7. +1 −0 eZ/Bundle/EzPublishCoreBundle/Resources/views/FieldType/RichText/style/default_inline.html.twig
  8. +177 −0 eZ/Publish/Core/FieldType/RichText/Converter/Render/Style.php
  9. +11 −0 eZ/Publish/Core/FieldType/RichText/RendererInterface.php
  10. +57 −0 eZ/Publish/Core/FieldType/RichText/Resources/schemas/docbook/ezpublish.rng
  11. +28 −0 eZ/Publish/Core/FieldType/RichText/Resources/stylesheets/docbook/xhtml5/edit/core.xsl
  12. +6 −0 eZ/Publish/Core/FieldType/RichText/Resources/stylesheets/docbook/xhtml5/output/core.xsl
  13. +23 −0 eZ/Publish/Core/FieldType/RichText/Resources/stylesheets/xhtml5/edit/docbook.xsl
  14. +1 −0 eZ/Publish/Core/FieldType/Tests/RichText/Converter/Render/EmbedTest.php
  15. +155 −0 eZ/Publish/Core/FieldType/Tests/RichText/Converter/Render/StyleTest.php
  16. +1 −0 eZ/Publish/Core/FieldType/Tests/RichText/Converter/Render/TemplateTest.php
  17. +16 −0 eZ/Publish/Core/FieldType/Tests/RichText/Converter/Xslt/_fixtures/docbook/031-ezstyle.xml
  18. +8 −0 eZ/Publish/Core/FieldType/Tests/RichText/Converter/Xslt/_fixtures/docbook/032-ezstyleinline.xml
  19. +12 −0 eZ/Publish/Core/FieldType/Tests/RichText/Converter/Xslt/_fixtures/xhtml5/edit/031-ezstyle.xml
  20. +4 −0 eZ/Publish/Core/FieldType/Tests/RichText/Converter/Xslt/_fixtures/xhtml5/edit/032-ezstyleinline.xml
  21. +2 −0 eZ/Publish/Core/FieldType/Tests/RichText/Converter/Xslt/_fixtures/xhtml5/output/031-ezstyle.xml
  22. +4 −0 ...ublish/Core/FieldType/Tests/RichText/Converter/Xslt/_fixtures/xhtml5/output/032-ezstyleinline.xml
  23. +133 −72 eZ/Publish/Core/MVC/Symfony/FieldType/RichText/Renderer.php
  24. +1 −0 eZ/Publish/Core/MVC/Symfony/FieldType/Tests/RichText/RendererTest.php
@@ -479,9 +479,10 @@ private function addRouterSection(ArrayNodeDefinition $rootNode)
*/
private function addRichTextSection(ArrayNodeDefinition $rootNode)
{
$this->addCustomTagsSection(
$rootNode->children()->arrayNode('ezrichtext')->children()
)->end()->end()->end();
$ezRichTextNode = $rootNode->children()->arrayNode('ezrichtext')->children();
$this->addCustomTagsSection($ezRichTextNode);
$this->addCustomStylesSection($ezRichTextNode);
$ezRichTextNode->end()->end()->end();
}
/**
@@ -571,6 +572,40 @@ function ($v) {
;
}
/**
* Define RichText Custom Styles Semantic Configuration.
*
* The configuration is available at:
* <code>
* ezpublish:
* ezrichtext:
* custom_styles:
* </code>
*
* @param \Symfony\Component\Config\Definition\Builder\NodeBuilder $ezRichTextNode
*
* @return \Symfony\Component\Config\Definition\Builder\ArrayNodeDefinition
*/
private function addCustomStylesSection(NodeBuilder $ezRichTextNode)
{
return $ezRichTextNode
->arrayNode('custom_styles')
// workaround: take into account Custom Styles names when merging configs
->useAttributeAsKey('style')
->arrayPrototype()
->children()
->scalarNode('template')
->defaultNull()
->end()
->scalarNode('inline')
->defaultFalse()
->end()
->end()
->end()
->end()
;
}
/**
* Defines configuration the images placeholder generation.
*
@@ -167,6 +167,13 @@ public function addFieldTypeSemanticConfig(NodeBuilder $nodeBuilder)
->info('List of RichText Custom Tags enabled for the current scope. The Custom Tags must be defined in ezpublish.ezrichtext.custom_tags Node.')
->scalarPrototype()->end()
->end();
// RichText Custom Styles configuration (list of Custom Styles enabled for current SiteAccess scope)
$nodeBuilder
->arrayNode('custom_styles')
->info('List of RichText Custom Styles enabled for the current scope. The Custom Styles must be defined in ezpublish.ezrichtext.custom_styles Node.')
->scalarPrototype()->end()
->end();
}
/**
@@ -217,6 +224,17 @@ public function mapConfig(array &$scopeSettings, $currentScope, ContextualizerIn
$scopeSettings['fieldtypes']['ezrichtext']['custom_tags']
);
}
if (isset($scopeSettings['fieldtypes']['ezrichtext']['custom_styles'])) {
$this->validateCustomStylesConfiguration(
$contextualizer->getContainer(),
$scopeSettings['fieldtypes']['ezrichtext']['custom_styles']
);
$contextualizer->setContextualParameter(
'fieldtypes.ezrichtext.custom_styles',
$currentScope,
$scopeSettings['fieldtypes']['ezrichtext']['custom_styles']
);
}
if (isset($scopeSettings['fieldtypes']['ezrichtext']['tags'])) {
foreach ($scopeSettings['fieldtypes']['ezrichtext']['tags'] as $name => $tagSettings) {
@@ -269,6 +287,28 @@ private function validateCustomTagsConfiguration(
}
}
/**
* Validate SiteAccess-defined Custom Styles configuration against global one.
*
* @param \Symfony\Component\DependencyInjection\ContainerInterface $container
* @param array $enabledCustomStyles List of Custom Styles enabled for the current scope/SiteAccess
*/
private function validateCustomStylesConfiguration(
ContainerInterface $container,
array $enabledCustomStyles
) {
$definedCustomStyles = array_keys(
$container->getParameter(EzPublishCoreExtension::RICHTEXT_CUSTOM_STYLES_PARAMETER)
);
foreach ($enabledCustomStyles as $customStyleName) {
if (!in_array($customStyleName, $definedCustomStyles)) {
throw new InvalidConfigurationException(
"Unknown RichText Custom Style '{$customStyleName}'"
);
}
}
}
/**
* Add BC setup for deprecated configuration.
*
@@ -27,6 +27,7 @@
class EzPublishCoreExtension extends Extension
{
const RICHTEXT_CUSTOM_STYLES_PARAMETER = 'ezplatform.ezrichtext.custom_styles';
const RICHTEXT_CUSTOM_TAGS_PARAMETER = 'ezplatform.ezrichtext.custom_tags';
/**
@@ -297,6 +298,12 @@ private function registerRichTextConfiguration(array $config, ContainerBuilder $
$config['ezrichtext']['custom_tags']
);
}
if (isset($config['ezrichtext']['custom_styles'])) {
$container->setParameter(
static::RICHTEXT_CUSTOM_STYLES_PARAMETER,
$config['ezrichtext']['custom_styles']
);
}
}
/**
@@ -26,6 +26,11 @@ parameters:
# Rich Text Custom Tags default scope (for SiteAccess) configuration
ezsettings.default.fieldtypes.ezrichtext.custom_tags: []
# Rich Text Custom Styles global configuration
ezplatform.ezrichtext.custom_styles: {}
# Rich Text Custom Styles default scope (for SiteAccess) configuration
ezsettings.default.fieldtypes.ezrichtext.custom_styles: []
# Image Asset mappings
ezsettings.default.fieldtypes.ezimageasset.mappings:
content_type_identifier: image
@@ -129,6 +134,13 @@ parameters:
ezsettings.default.fieldtypes.ezrichtext.tags.default_inline:
template: EzPublishCoreBundle:FieldType/RichText/tag:default_inline.html.twig
# RichText field type template style settings
# 'default' and 'default_inline' tag identifiers are reserved for fallback
ezsettings.default.fieldtypes.ezrichtext.styles.default:
template: EzPublishCoreBundle:FieldType/RichText/style:default.html.twig
ezsettings.default.fieldtypes.ezrichtext.styles.default_inline:
template: EzPublishCoreBundle:FieldType/RichText/style:default_inline.html.twig
# RichText field type embed settings
ezsettings.default.fieldtypes.ezrichtext.embed.content:
template: EzPublishCoreBundle:FieldType/RichText/embed:content.html.twig
@@ -21,9 +21,11 @@ parameters:
ezpublish.fieldType.ezrichtext.converter.link.class: eZ\Publish\Core\FieldType\RichText\Converter\Link
ezpublish.fieldType.ezrichtext.converter.embed.class: eZ\Publish\Core\FieldType\RichText\Converter\Render\Embed
ezpublish.fieldType.ezrichtext.converter.template.class: eZ\Publish\Core\FieldType\RichText\Converter\Render\Template
ezpublish.fieldType.ezrichtext.converter.style.class: eZ\Publish\Core\FieldType\RichText\Converter\Render\Style
ezpublish.fieldType.ezrichtext.embed_renderer.class: eZ\Publish\Core\MVC\Symfony\FieldType\RichText\EmbedRenderer
ezpublish.fieldType.ezrichtext.renderer.class: eZ\Publish\Core\MVC\Symfony\FieldType\RichText\Renderer
ezpublish.fieldType.ezrichtext.tag.namespace: fieldtypes.ezrichtext.tags
ezpublish.fieldType.ezrichtext.style.namespace: fieldtypes.ezrichtext.styles
ezpublish.fieldType.ezrichtext.embed.namespace: fieldtypes.ezrichtext.embed
ezpublish.fieldType.ezrichtext.converter.dispatcher.class: eZ\Publish\Core\FieldType\RichText\ConverterDispatcher
ezpublish.fieldType.ezrichtext.validator.xml.class: eZ\Publish\Core\FieldType\RichText\Validator
@@ -152,9 +154,19 @@ services:
- "@ezpublish.config.resolver"
- "@templating"
- "%ezpublish.fieldType.ezrichtext.tag.namespace%"
- "%ezpublish.fieldType.ezrichtext.style.namespace%"
- "%ezpublish.fieldType.ezrichtext.embed.namespace%"
- "@?logger"
- "%ezplatform.ezrichtext.custom_tags%"
- "%ezplatform.ezrichtext.custom_styles%"
ezpublish.fieldType.ezrichtext.converter.style:
class: "%ezpublish.fieldType.ezrichtext.converter.style.class%"
arguments:
- "@ezpublish.fieldType.ezrichtext.renderer"
- "@ezpublish.fieldType.ezrichtext.converter.output.xhtml5"
tags:
- {name: ezpublish.ezrichtext.converter.output.xhtml5, priority: 10}
ezpublish.fieldType.ezrichtext.converter.template:
class: "%ezpublish.fieldType.ezrichtext.converter.template.class%"
@@ -0,0 +1 @@
<div class="{% if align is defined %}align-{{ align }}{% endif %} ezstyle-{{ name }}">{% spaceless %}{{ content|raw }}{% endspaceless %}</div>
@@ -0,0 +1 @@
<span class="ezstyle-{{ name }}">{% spaceless %}{{ content|raw }}{% endspaceless %}</span>
@@ -0,0 +1,177 @@
<?php
/**
* File containing the eZ\Publish\Core\FieldType\RichText\Converter\Render\Style class.
*
* @copyright Copyright (C) eZ Systems AS. All rights reserved.
* @license For full copyright and license information view LICENSE file distributed with this source code.
*/
namespace eZ\Publish\Core\FieldType\RichText\Converter\Render;
use DOMDocument;
use DOMElement;
use DOMNode;
use DOMXPath;
use eZ\Publish\Core\FieldType\RichText\Converter;
use eZ\Publish\Core\FieldType\RichText\Converter\Render;
use eZ\Publish\Core\FieldType\RichText\RendererInterface;
/**
* RichText Style converter injects rendered style payloads into style elements.
*/
class Style extends Render implements Converter
{
/**
* @var Converter
*/
private $richTextConverter;
/**
* Style constructor.
*
* @param RendererInterface $renderer
* @param Converter $richTextConverter
*/
public function __construct(RendererInterface $renderer, Converter $richTextConverter)
{
$this->richTextConverter = $richTextConverter;
parent::__construct($renderer);
}
/**
* Injects rendered payloads into Custom Style elements.
*
* @param \DOMDocument $document
*
* @return \DOMDocument
*/
public function convert(DOMDocument $document)
{
$xpath = new DOMXPath($document);
$xpath->registerNamespace('docbook', 'http://docbook.org/ns/docbook');
$xpathExpression = '//docbook:ezstyle | //docbook:ezstyleinline';
$styles = $xpath->query($xpathExpression);
/** @var \DOMElement[] $stylesSorted */
$stylesSorted = [];
$maxDepth = 0;
foreach ($styles as $style) {
$depth = $this->getNodeDepth($style);
if ($depth > $maxDepth) {
$maxDepth = $depth;
}
$stylesSorted[$depth][] = $style;
}
ksort($stylesSorted, SORT_NUMERIC);
foreach ($stylesSorted as $styles) {
foreach ($styles as $style) {
$this->processStyle($document, $style);
}
}
return $document;
}
/**
* Processes given template $style in a given $document.
*
* @param \DOMDocument $document
* @param \DOMElement $style
*/
protected function processStyle(DOMDocument $document, DOMElement $style)
{
$content = null;
$styleName = $style->getAttribute('name');
$parameters = [
'name' => $styleName,
'content' => $this->saveNodeXML($style),
];
if ($style->hasAttribute('ezxhtml:align')) {
$parameters['align'] = $style->getAttribute('ezxhtml:align');
}
$content = $this->renderer->renderStyle(
$styleName,
$parameters,
$style->localName === 'ezstyleinline'
);
if (isset($content)) {
// If current tag is wrapped inside another Custom Style tag we can't use CDATA section
// for its content as these can't be nested.
// CDATA section will be used only for content of root wrapping tag, content of tags
// inside it will be added as XML fragments.
if ($this->isWrapped($style)) {
$fragment = $document->createDocumentFragment();
$fragment->appendXML($content);
$style->parentNode->replaceChild($fragment, $style);
} else {
$payload = $document->createElement('ezpayload');
$payload->appendChild($document->createCDATASection($content));
$style->appendChild($payload);
}
}
}
/**
* Returns if the given $node is wrapped inside another template node.
*
* @param \DOMNode $node
*
* @return bool
*/
protected function isWrapped(DomNode $node)
{
while ($node = $node->parentNode) {
if ($node->localName === 'ezstyle' || $node->localName === 'ezstyleinline') {
return true;
}
}
return false;
}
/**
* Returns depth of given $node in a DOMDocument.
*
* @param \DOMNode $node
*
* @return int
*/
protected function getNodeDepth(DomNode $node)
{
// initial depth for top level elements (to avoid "ifs")
$depth = -2;
while ($node) {
++$depth;
$node = $node->parentNode;
}
return $depth;
}
/**
* Returns XML fragment string for given $node.
*
* @param \DOMNode $node
*
* @return string
*/
protected function saveNodeXML(DOMNode $node)
{
$innerDoc = new DOMDocument();
/** @var \DOMNode $child */
foreach ($node->childNodes as $child) {
$innerDoc->appendChild($innerDoc->importNode($child, true));
}
$convertedInnerDoc = $this->richTextConverter->convert($innerDoc);
return trim($convertedInnerDoc ? $convertedInnerDoc->saveHTML() : $innerDoc->saveHTML());
}
}
@@ -13,6 +13,17 @@
*/
interface RendererInterface
{
/**
* Renders template style.
*
* @param string $name
* @param array $parameters
* @param bool $isInline
*
* @return string
*/
public function renderStyle($name, array $parameters, $isInline);
/**
* Renders template tag.
*
Oops, something went wrong.

0 comments on commit 36f372c

Please sign in to comment.