Skip to content

Commit 8d2d869

Browse files
anthoulaanthoula
committed
MC-17823: Access Images/Widgets/Variable from HTML content type
- add component and class - add template
1 parent d89bd6d commit 8d2d869

File tree

4 files changed

+191
-1
lines changed

4 files changed

+191
-1
lines changed

‎app/code/Magento/PageBuilder/Component/Form/HtmlCode.php

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<?php
2+
/**
3+
* Copyright © Magento, Inc. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
7+
namespace Magento\PageBuilder\Component\Form;
8+
9+
use Magento\Backend\Model\UrlInterface as BackendUrlInterface;
10+
use Magento\Cms\Helper\Wysiwyg\Images;
11+
use Magento\Framework\View\Element\UiComponentFactory;
12+
use Magento\Framework\View\Element\UiComponent\ContextInterface;
13+
use Magento\Variable\Model\Variable\Config as VariableConfig;
14+
15+
/**
16+
* Updates field element with HTML Code specific config
17+
*/
18+
class HtmlCode extends \Magento\Ui\Component\Form\Field
19+
{
20+
const HTML_ID = 'HTML_ID';
21+
22+
/**
23+
* @var BackendUrlInterface
24+
*/
25+
private $backendUrl;
26+
27+
/**
28+
* @var Images
29+
*/
30+
private $imagesHelper;
31+
32+
/**
33+
* @var VariableConfig
34+
*/
35+
private $variableConfig;
36+
37+
/**
38+
* @var string
39+
*/
40+
private $currentTreePath;
41+
42+
/**
43+
* @param ContextInterface $context
44+
* @param UiComponentFactory $uiComponentFactory
45+
* @param BackendUrlInterface $backendUrl
46+
* @param Images $imagesHelper
47+
* @param VariableConfig $variableConfig
48+
* @param string $currentTreePath
49+
* @param array $components
50+
* @param array $data
51+
*/
52+
public function __construct(
53+
ContextInterface $context,
54+
UiComponentFactory $uiComponentFactory,
55+
BackendUrlInterface $backendUrl,
56+
Images $imagesHelper,
57+
VariableConfig $variableConfig,
58+
$currentTreePath = 'wysiwyg',
59+
$components = [],
60+
array $data = []
61+
) {
62+
$this->backendUrl = $backendUrl;
63+
$this->imagesHelper = $imagesHelper;
64+
$this->variableConfig = $variableConfig;
65+
$this->currentTreePath = $currentTreePath;
66+
parent::__construct($context, $uiComponentFactory, $components, $data);
67+
}
68+
69+
/**
70+
* Prepare component configuration
71+
*
72+
* @return void
73+
* @throws \Magento\Framework\Exception\LocalizedException
74+
*/
75+
public function prepare()
76+
{
77+
$config = $this->getData('config');
78+
$config['widgetUrl'] = $this->backendUrl->getUrl('adminhtml/widget/index')
79+
. 'widget_target_id/' . self::HTML_ID . '/';
80+
81+
$fileBrowserUrlParams = [
82+
'current_tree_path' => $this->imagesHelper->idEncode($this->currentTreePath),
83+
];
84+
85+
$config['imageUrl'] = $this->backendUrl->getUrl('cms/wysiwyg_images/index', $fileBrowserUrlParams)
86+
. 'target_element_id/' . self::HTML_ID . '/';
87+
$config['variableUrl'] = $this->variableConfig->getVariablesWysiwygActionUrl();
88+
$this->setData('config', $config);
89+
parent::prepare();
90+
}
91+
}

‎app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_html_form.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
<settings>
7575
<label/>
7676
</settings>
77-
<field name="html" formElement="textarea" sortOrder="10">
77+
<field name="html" formElement="textarea" sortOrder="10" component="Magento_PageBuilder/js/form/element/html-code" class="Magento\PageBuilder\Component\Form\HtmlCode">
7878
<argument name="data" xsi:type="array">
7979
<item name="config" xsi:type="array">
8080
<item name="source" xsi:type="string">page</item>

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/html-code.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/**
2+
* Copyright © Magento, Inc. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
6+
/*eslint-disable vars-on-top, strict */
7+
8+
define([
9+
'Magento_Ui/js/form/element/textarea',
10+
'mage/adminhtml/wysiwyg/widget',
11+
], function (Textarea) {
12+
'use strict';
13+
14+
return Textarea.extend({
15+
defaults: {
16+
elementTmpl: 'Magento_PageBuilder/form/element/html-code',
17+
htmlId: 'HTML_ID'
18+
},
19+
20+
/**
21+
* Click event for Insert Widget Button
22+
*/
23+
clickInsertWidget: function () {
24+
return widgetTools.openDialog(
25+
this.widgetUrl.replace(this.htmlId, this.uid)
26+
);
27+
},
28+
29+
/**
30+
* Click event for Insert Image Button
31+
*/
32+
clickInsertImage: function () {
33+
return MediabrowserUtility.openDialog(
34+
this.imageUrl.replace(this.htmlId, this.uid)
35+
);
36+
},
37+
38+
/**
39+
* Click event for Insert Variable Button
40+
*/
41+
clickInsertVariable: function () {
42+
return MagentovariablePlugin.loadChooser(
43+
this.variableUrl, this.uid
44+
);
45+
},
46+
});
47+
});

‎app/code/Magento/PageBuilder/view/adminhtml/web/template/form/element/html-code.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!--
2+
/**
3+
* Copyright © Magento, Inc. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
-->
7+
8+
<div class="admin__control-wysiwig">
9+
<div id="buttonspagebuilder_html_form_html" class="buttons-set">
10+
<button type="button"
11+
class="scalable action-add-widget plugin"
12+
click="clickInsertWidget">
13+
<span data-bind="attr: {id: $data.baseUrl}">
14+
<span>
15+
<span>Insert Widget...</span>
16+
</span>
17+
</span>
18+
</button>
19+
<button type="button"
20+
class="scalable action-add-image plugin"
21+
click="clickInsertImage">
22+
<span>
23+
<span>
24+
<span>Insert Image...</span>
25+
</span>
26+
</span>
27+
</button>
28+
<button type="button"
29+
class="scalable add-variable plugin"
30+
click="clickInsertVariable">
31+
<span>
32+
<span>
33+
<span>Insert Variable...</span>
34+
</span>
35+
</span>
36+
</button>
37+
</div>
38+
</div>
39+
<textarea class="admin__control-textarea" data-bind="
40+
value: value,
41+
valueUpdate: valueUpdate,
42+
hasFocus: focused,
43+
attr: {
44+
name: inputName,
45+
cols: cols,
46+
rows: rows,
47+
'aria-describedby': noticeId,
48+
placeholder: placeholder,
49+
id: uid,
50+
disabled: disabled
51+
}"
52+
/>

0 commit comments

Comments
 (0)