Skip to content

Commit

Permalink
[Master] Fix integration with vue js (#12)
Browse files Browse the repository at this point in the history 
* Fix wrong destroy attachment params

* Fix style ci

* Add functionality to render css styles using js windo.onload

* Add v-pre to skip vue js compilation

* Remove redundant docs from Readme.md
  • Loading branch information
@amaelftah
amaelftah authored Dec 1, 2019
1 parent 13827e9 commit fd117c8
Show file tree
Hide file tree
Showing 7 changed files with 26 additions and 14 deletions.
1 change: 0 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,6 @@ if you want to hide buttons or toolbar you can do this. for more configuration r
| hideToolbar | Boolean | True or False | hides the the toolbar
| hideTools | Array | ['text-tools', 'block-tools', 'file-tools', 'history-tools'] | hides group of buttons
| hideButtonIcons | Array | ['attach', 'bold', 'italic', 'strike', 'link', 'heading-1', 'quote', 'code', 'bullet-list', 'number-list', 'decrease-nesting-level', 'increase-nesting-level'] | hides a single button
| hideTools | Array | ['text-tools', 'block-tools', 'file-tools', 'history-tools'] | hides group of buttons
| disk | String | 'local' or 's3' or 'any-disk' | sets the attachment storage per field
| id | String | 'any-value-you-want' | the id of input which renders [trix. check this link](https://github.com/basecamp/trix#integrating-with-forms) . current id follows this convention `(model lowered class name)-field-modelId` like `post-content-1` or `post-content-new-model`
| containerElement | String | valid html tag like `span` or `div` | default container tag is set to `span` you can change it as you want
Expand Down
13 changes: 13 additions & 0 deletions resources/views/trixassets.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,4 +120,17 @@ function laravelTrixConfig (event) {
return JSON.parse(event.target.getAttribute("data-config"));
}
window.onload = function() {
var laravelTrixInstanceStyles = document.getElementsByTagName('laravel-trix-instance-style');
var style = document.createElement('style');
style.type = 'text/css';
for (var tag of laravelTrixInstanceStyles) {
style.innerHTML += tag.textContent + ' ';
}
document.getElementsByTagName('head')[0].appendChild(style);
}
</script>
2 changes: 1 addition & 1 deletion src/LaravelTrix.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ public function renderContainer()
return function () {
$tag = $this->config['containerElement'] ?? 'span';

return "<$tag id='container-{$this->config['id']}'> $this->html </$tag>";
return "<$tag v-pre id='container-{$this->config['id']}'> $this->html </$tag>";
};
}
}
2 changes: 1 addition & 1 deletion src/LaravelTrixServiceProvider.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ public function boot()
'prefix' => 'laravel-trix',
], function () {
Route::post('attachment', config('laravel-trix.store_attachment_action'))->name('laravel-trix.store');
Route::delete('attachment/{url}', config('laravel-trix.destroy_attachment_action'))->name('laravel-trix.destroy');
Route::delete('attachment/{attachment}', config('laravel-trix.destroy_attachment_action'))->name('laravel-trix.destroy');
});

$this->loadViewsFrom(__DIR__.'/../resources/views', 'laravel-trix');
Expand Down
2 changes: 1 addition & 1 deletion src/Pipes/Styles.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ public function handle(LaravelTrix $trix, \Closure $next)
$this->hideTools($trix);
$this->hideButtonIcons($trix);

$trix->html = "<style> {$trix->html} </style>";
$trix->html = "<laravel-trix-instance-style style='display:none;'> {$trix->html} </laravel-trix-instance-style>";

return $next($trix);
}
Expand Down
4 changes: 2 additions & 2 deletions tests/Feature/TrixAttachmentControllerTest.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ public function it_can_store_attachment_request()
{
Storage::fake('fooDisk');

$response = $this->json('POST', 'laravel-trix/attachment', [
$response = $this->json('POST', route('laravel-trix.store'), [
'file' => UploadedFile::fake()->image('foo.jpg'),
'modelClass' => Post::class,
'field' => 'fooField',
Expand All @@ -44,7 +44,7 @@ public function it_destroy_attachment()
'disk' => 'fooDisk',
]);

$this->delete('laravel-trix/attachment/randomImage.jpg');
$this->delete(route('laravel-trix.destroy', ['attachment' => 'randomImage.jpg']));

$this->assertTrue(
TrixAttachment::where('attachment', 'randomImage.jpg')
Expand Down
16 changes: 8 additions & 8 deletions tests/Unit/LaravelTrixTest.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ class LaravelTrixTest extends TestCase
public function it_returns_default_trix_html()
{
$expected = <<<EOT
<span id='container-post-description-1'> <style> </style><input id='post-description-1' value='' name='post-trixFields[description]' type='hidden'><input id='attachment-post-description-1' value='[]' name='attachment-post-trixFields[description]' type='hidden'><trix-editor class='trix-content' input='post-description-1' data-config='{"id":"post-description-1","modelClass":"Te7aHoudini\\\LaravelTrix\\\Tests\\\Models\\\Post","field":"description"}'></trix-editor> </span>
<span v-pre id='container-post-description-1'> <laravel-trix-instance-style style='display:none;'> </laravel-trix-instance-style><input id='post-description-1' value='' name='post-trixFields[description]' type='hidden'><input id='attachment-post-description-1' value='[]' name='attachment-post-trixFields[description]' type='hidden'><trix-editor class='trix-content' input='post-description-1' data-config='{"id":"post-description-1","modelClass":"Te7aHoudini\\\LaravelTrix\\\Tests\\\Models\\\Post","field":"description"}'></trix-editor> </span>
EOT;

$this->assertEquals(
Expand All @@ -25,7 +25,7 @@ public function it_returns_default_trix_html()
public function it_hides_toolbar()
{
$expected = <<<'EOT'
<style> #container-post-description-1 trix-toolbar{display:none;} </style>
<laravel-trix-instance-style style='display:none;'> #container-post-description-1 trix-toolbar{display:none;} </laravel-trix-instance-style>
EOT;

$this->assertTrue(
Expand All @@ -37,7 +37,7 @@ public function it_hides_toolbar()
public function it_hides_tools()
{
$expected = <<<'EOT'
<style> #container-post-description-1 .trix-button-group--foo,#container-post-description-1 .trix-button-group--bar{display:none;} </style>
<laravel-trix-instance-style style='display:none;'> #container-post-description-1 .trix-button-group--foo,#container-post-description-1 .trix-button-group--bar{display:none;} </laravel-trix-instance-style>
EOT;

$this->assertTrue(
Expand All @@ -49,7 +49,7 @@ public function it_hides_tools()
public function it_hides_button_icons()
{
$expected = <<<'EOT'
<style> #container-post-description-1 .trix-button--icon-foo,#container-post-description-1 .trix-button--icon-bar{display:none;} </style>
<laravel-trix-instance-style style='display:none;'> #container-post-description-1 .trix-button--icon-foo,#container-post-description-1 .trix-button--icon-bar{display:none;} </laravel-trix-instance-style>
EOT;

$this->assertTrue(
Expand All @@ -61,7 +61,7 @@ public function it_hides_button_icons()
public function it_changes_id()
{
$expected = <<<EOT
<span id='container-foo'> <style> </style><input id='foo' value='' name='post-trixFields[description]' type='hidden'><input id='attachment-foo' value='[]' name='attachment-post-trixFields[description]' type='hidden'><trix-editor class='trix-content' input='foo' data-config='{"id":"foo","modelClass":"Te7aHoudini\\\LaravelTrix\\\Tests\\\Models\\\Post","field":"description"}'></trix-editor> </span>
<span v-pre id='container-foo'> <laravel-trix-instance-style style='display:none;'> </laravel-trix-instance-style><input id='foo' value='' name='post-trixFields[description]' type='hidden'><input id='attachment-foo' value='[]' name='attachment-post-trixFields[description]' type='hidden'><trix-editor class='trix-content' input='foo' data-config='{"id":"foo","modelClass":"Te7aHoudini\\\LaravelTrix\\\Tests\\\Models\\\Post","field":"description"}'></trix-editor> </span>
EOT;

$this->assertTrue(
Expand All @@ -85,7 +85,7 @@ public function it_changes_disk()
public function it_change_container_element()
{
$expected = <<<EOT
<fooElement id='container-post-description-1'> <style> </style><input id='post-description-1' value='' name='post-trixFields[description]' type='hidden'><input id='attachment-post-description-1' value='[]' name='attachment-post-trixFields[description]' type='hidden'><trix-editor class='trix-content' input='post-description-1' data-config='{"containerElement":"fooElement","id":"post-description-1","modelClass":"Te7aHoudini\\\LaravelTrix\\\Tests\\\Models\\\Post","field":"description"}'></trix-editor> </fooElement>
<fooElement v-pre id='container-post-description-1'> <laravel-trix-instance-style style='display:none;'> </laravel-trix-instance-style><input id='post-description-1' value='' name='post-trixFields[description]' type='hidden'><input id='attachment-post-description-1' value='[]' name='attachment-post-trixFields[description]' type='hidden'><trix-editor class='trix-content' input='post-description-1' data-config='{"containerElement":"fooElement","id":"post-description-1","modelClass":"Te7aHoudini\\\LaravelTrix\\\Tests\\\Models\\\Post","field":"description"}'></trix-editor> </fooElement>
EOT;

$this->assertTrue(
Expand All @@ -97,7 +97,7 @@ public function it_change_container_element()
public function it_renders_correct_id_for_new_model()
{
$expected = <<<EOT
<span id='container-post-description-new-model'> <style> </style><input id='post-description-new-model' value='' name='post-trixFields[description]' type='hidden'><input id='attachment-post-description-new-model' value='[]' name='attachment-post-trixFields[description]' type='hidden'><trix-editor class='trix-content' input='post-description-new-model' data-config='{"id":"post-description-new-model","modelClass":"Te7aHoudini\\\LaravelTrix\\\Tests\\\Models\\\Post","field":"description"}'></trix-editor> </span>
<span v-pre id='container-post-description-new-model'> <laravel-trix-instance-style style='display:none;'> </laravel-trix-instance-style><input id='post-description-new-model' value='' name='post-trixFields[description]' type='hidden'><input id='attachment-post-description-new-model' value='[]' name='attachment-post-trixFields[description]' type='hidden'><trix-editor class='trix-content' input='post-description-new-model' data-config='{"id":"post-description-new-model","modelClass":"Te7aHoudini\\\LaravelTrix\\\Tests\\\Models\\\Post","field":"description"}'></trix-editor> </span>
EOT;

$this->assertTrue(
Expand All @@ -109,7 +109,7 @@ public function it_renders_correct_id_for_new_model()
public function it_returns_new_model_using_app_make()
{
$expected = <<<'EOT'
<span id='container-foomodel-BarField-new-model'> <style> </style><input id='foomodel-BarField-new-model' value='' name='foomodel-trixFields[BarField]' type='hidden'><input id='attachment-foomodel-BarField-new-model' value='[]' name='attachment-foomodel-trixFields[BarField]' type='hidden'><trix-editor class='trix-content' input='foomodel-BarField-new-model' data-config='{"id":"foomodel-BarField-new-model","modelClass":"FooModel","field":"BarField"}'></trix-editor> </span>
<span v-pre id='container-foomodel-BarField-new-model'> <laravel-trix-instance-style style='display:none;'> </laravel-trix-instance-style><input id='foomodel-BarField-new-model' value='' name='foomodel-trixFields[BarField]' type='hidden'><input id='attachment-foomodel-BarField-new-model' value='[]' name='attachment-foomodel-trixFields[BarField]' type='hidden'><trix-editor class='trix-content' input='foomodel-BarField-new-model' data-config='{"id":"foomodel-BarField-new-model","modelClass":"FooModel","field":"BarField"}'></trix-editor> </span>
EOT;

$this->assertTrue(
Expand Down

0 comments on commit fd117c8

Please sign in to comment.