8000 Add EditorExtension · sulu/web-twig@73f60ad · GitHub
[go: up one dir, main page]
Skip to content

Commit 73f60ad

Browse files
alexander-schranzalexander-schranz
committed
Add EditorExtension
1 parent c32d596 commit 73f60ad

File tree

4 files changed

+264
-0
lines changed

4 files changed

+264
-0
lines changed

‎.php_cs.dist

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,13 @@ return PhpCsFixer\Config::create()
2525
'declare_strict_types' => true,
2626
'mb_str_functions' => true,
2727
'no_php4_constructor' => true,
28+
'no_superfluous_phpdoc_tags' => false,
2829
'no_unreachable_default_argument_value' => true,
2930
'no_useless_else' => true,
3031
'no_useless_return' => true,
3132
'php_unit_strict' => true,
3233
'phpdoc_order' => true,
34+
'single_line_throw' => false,
3335
'strict_comparison' => true,
3436
'strict_param' => true,
3537
'header_comment' => ['header' => $header],

‎docs/editor.md

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
# Editor Extension
2+
3+
Sometimes you have very special styling for ul, ol lists or other tags which are used in a text editor
4+
where you are not able to add class. This twig extension should help you to wrap that output in a div
5+
or add classes to it.
6+
7+
## Setup
8+
9+
### Service Registration
10+
11+
The editor extension need to be registered as [symfony service](http://symfony.com/doc/current/service_container.html).
12+
13+
```yml
14+
services:
15+
Sulu\Twig\Extensions\EditorExtension: ~
16+
17+
# Full configuration:
18+
Sulu\Twig\Extensions\EditorExtension:
19+
arguments:
20+
- { ul: 'list' }
21+
- 'div'
22+
- 'editor'
23+
```
24+
25+
If autoconfigure is not active you need to tag it with [twig.extension](https://symfony.com/doc/current/service_container.html#the-autoconfigure-option).
26+
27+
## Usage 'editor_classes' filter
28+
29+
### Basic Usage
30+
31+
```twig
32+
{% set yourHtml = '<ul><li>Test</li></ul>' %}
33+
{{ yourHtml|editor_classes }}
34+
```
35+
36+
This will output:
37+
38+
```html
39+
<ul class="list"><li>Test</li></ul>
40+
```
41+
42+
### Specify classes
43+
44+
```twig
45+
{% set yourHtml = '<ul><li>Test</li></ul>' %}
46+
{{ yourHtml|editor_classes({ul: 'special-list'}) }}
47+
```
48+
49+
This will output:
50+
51+
```html
52+
<ul class="special-list"><li>Test</li></ul>
53+
```
54+
55+
## Usage `editor` filter
56+
57+
### Basic Usage
58+
59+
```twig
60+
{% set yourHtml = '<p>Test</p>' %}
61+
{{ yourHtml|editor }}
62+
```
63+
64+
This will output:
65+
66+
```html
67+
<div class="editor"><p>Test</p></div>
68+
```
69+
70+
### Custom Tag
71+
72+
```twig
73+
{% set yourHtml = '<p>Test</p>' %}
74+
{{ yourHtml|editor('section') }}
75+
```
76+
77+
This will output:
78+
79+
```html
80+
<section class="editor"><p>Test</p></section>
81+
```
82+
83+
### Custom Tag
84+
85+
```twig
86+
{% set yourHtml = '<p>Test</p>' %}
87+
{{ yourHtml|editor('section') }}
88+
```
89+
90+
This will output:
91+
92+
```html
93+
<section class="editor"><p>Test</p></section>
94+
```
95+
96+
### Custom Class
97+
98+
```twig
99+
{% set yourHtml = '<p>Test</p>' %}
100+
{{ yourHtml|editor(null, 'custom') }}
101+
```
102+
103+
This will output:
104+
105+
```html
106+
<section class="custom"><p>Test</p></section>
107+
```

‎src/EditorExtension.php

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<?php
2+
3+
declare(strict_types=1);
4+
5+
/*
6+
* This file is part of Sulu.
7+
*
8+
* (c) Sulu GmbH
9+
*
10+
* This source file is subject to the MIT license that is bundled
11+
* with this source code in the file LICENSE.
12+
*/
13+
14+
namespace Sulu\Twig\Extensions;
15+
16+
use Twig\Extension\AbstractExtension;
17+
use Twig\TwigFilter;
18+
19+
/**
20+
* This Twig Extension to wrap text editor output with specific div.
21+
*/
22+
class EditorExtension extends AbstractExtension
23+
{
24+
/**
25+
* @var string[]
26+
*/
27+
protected $addClasses;
28+
29+
/**
30+
* @var string
31+
*/
32+
protected $className;
33+
34+
/**
35+
* @var string
36+
*/
37+
protected $tag;
38+
39+
/**
40+
* @param string[] $addClasses
41+
*/
42+
public function __construct(array $addClasses = [], string $className = 'editor', string $tag = 'div')
43+
{
44+
$this->addClasses = $addClasses;
45+
$this->className = $className;
46+
$this->tag = $tag;
47+
}
48+
49+
public function getFilters()
50+
{
51+
return [
52+
new TwigFilter('editor', [$this, 'editor'], ['is_safe' => ['html']]),
53+
new TwigFilter('editor_classes', [$this, 'editorClasses'], ['is_safe' => ['html']]),
54+
];
55+
}
56+
57+
/**
58+
* Returns a given html with a wrapped tag and class.
59+
*
60+
* @param string $html
61+
*
62+
* @return string
63+
*/
64+
public function editor(string $html, string $tag = null, string $className = null): string
65+
{
66+
$className = $className ?: $this->className;
67+
$tag = $tag ?: $this->tag;
68+
69+
return '<' . $tag . ' class="' . $className . '">' . $html . '</' . $tag . '>';
70+
}
71+
72+
/**
73+
* Add specified classes to tags.
74+
*
75+
* @param string $html
76+
* @param string[] $addClasses
77+
*
78+
* @return string
79+
*/
80+
public function editorClasses(string $html, array $addClasses = []): string
81+
{
82+
$addClasses = array_merge($this->addClasses, $addClasses);
83+
84+
$tags = [];
85+
$tagsWithClasses = [];
86+
foreach ($addClasses as $tag => $class) {
87+
$tags[] = '<' . $tag . '>';
88+
$tagsWithClasses[] = '<' . $tag . ' class="' . $class . '">';
89+
}
90+
91+
return str_replace($tags, $tagsWithClasses, $html);
92+
}
93+
}

‎tests/EditorExtensionTest.php

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<?php
2+
3+
declare(strict_types=1);
4+
5+
/*
6+
* This file is part of Sulu.
7+
*
8+
* (c) Sulu GmbH
9+
*
10+
* This source file is subject to the MIT license that is bundled
11+
* with this source code in the file LICENSE.
12+
*/
13+
14+
namespace Sulu\Twig\Extensions\Tests;
15+
16+
use PHPUnit\Framework\TestCase;
17+
use Sulu\Twig\Extensions\EditorExtension;
18+
19+
class EditorExtensionTest extends TestCase
20+
{
21+
/**
22+
* @var EditorExtension
23+
*/
24+
private $editorExtension;
25+
26+
public function setup()
27+
{
28+
$this->editorExtension = new EditorExtension();
29+
}
30+
31+
public function testEditor(): void
32+
{
33+
$this->assertSame(
34+
'<div class="editor"><p>Test</p></div>',
35+
$this->editorExtension->editor('<p>Test</p>')
36+
);
37+
}
38+
39+
public function testEditorCustomClass(): void
40+
{
41+
$this->assertSame(
42+
'<div class="custom"><p>Test</p></div>',
43+
$this->editorExtension->editor('<p>Test</p>', null, 'custom')
44+
);
45+
}
46+
47+
public function testEditorCustomTag(): void
48+
{
49+
$this->assertSame(
50+
'<div class="custom"><p>Test</p></div>',
51+
$this->editorExtension->editor('<p>Test</p>', null, 'custom')
52+
);
53+
}
54+
55+
public function testEditorAddClasses(): void
56+
{
57+
$this->assertSame(
58+
'<ul class="list"><li>List</li></ul>',
59+
$this->editorExtension->editorClasses('<ul><li>List</li></ul>', ['ul' => 'list'])
60+
);
61+
}
62+
}

0 commit comments

Comments
 (0)
0