Skip to content

Commit 4e4d8b7

Browse files
matdavematdave
committed
feat: new MODX Link plugin
1 parent 6d33169 commit 4e4d8b7

File tree

7 files changed

+71
-41
lines changed

7 files changed

+71
-41
lines changed

‎_build/config.json‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"lowCaseName": "tinymcerte",
44
"description": "TinyMCE 5",
55
"author": "John Peca/Thomas Jakobi",
6-
"version": "2.1.1",
6+
"version": "3.0.0-beta1",
77
"package": {
88
"elements": {
99
"plugins": [
@@ -23,7 +23,7 @@
2323
"systemSettings": [
2424
{
2525
"key": "plugins",
26-
"value": "advlist autolink lists charmap preview anchor visualblocks searchreplace code fullscreen insertdatetime media table image modxlink modai",
26+
"value": "advlist autoresize autolink lists charmap preview anchor visualblocks searchreplace code fullscreen insertdatetime media table image quickbars link modxlink modai",
2727
"area": "tinymcerte.default"
2828
},
2929
{
@@ -124,9 +124,19 @@
124124
"value": "500",
125125
"area": "tinymcerte.default"
126126
},
127+
{
128+
"key": "insert_toolbar",
129+
"value": "image media quicktable modxlink unlink modai_generate",
130+
"area": "tinymcerte.toolbar"
131+
},
132+
{
133+
"key": "selection_toolbar",
134+
"value": "bold italic underline | modxlink unlink | h2 h3 h4 blockquote | modai_generate modai_enhance",
135+
"area": "tinymcerte.toolbar"
136+
},
127137
{
128138
"key": "toolbar1",
129-
"value": "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | modxlink image",
139+
"value": "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | modxlink unlink | image",
130140
"area": "tinymcerte.toolbar"
131141
},
132142
{

‎core/components/tinymcerte/src/Plugins/Events/OnRichTextEditorInit.php‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,9 @@ private function getTinyConfig()
109109
}
110110

111111
$config = array_merge([
112-
'plugins' => $this->tinymcerte->getOption('plugins', [], 'advlist autolink lists charmap preview anchor visualblocks searchreplace code fullscreen insertdatetime media table image modxlink modai'),
112+
'plugins' => $this->tinymcerte->getOption('plugins', [], 'advlist autoresize autolink lists charmap preview anchor visualblocks searchreplace code fullscreen insertdatetime media table image quickbars link modxlink modai'),
113+
'quickbars_insert_toolbar' => $this->tinymcerte->getOption('insert_toolbar', [], 'image media quicktable modxlink modai_generate'),
114+
'quickbars_selection_toolbar' => $this->tinymcerte->getOption('selection_toolbar', [], 'bold italic underline | modxlink h2 h3 h4 blockquote | modai_generate modai_enhance'),
113115
'toolbar1' => $this->tinymcerte->getOption('toolbar1', [], 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | modai_generate modai_generate_image modai_enhance'),
114116
'toolbar2' => $this->tinymcerte->getOption('toolbar2', [], ''),
115117
'toolbar3' => $this->tinymcerte->getOption('toolbar3', [], ''),

‎core/components/tinymcerte/src/Processors/SearchProcessor.php‎

Lines changed: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,30 +14,14 @@ class SearchProcessor extends modProcessor
1414

1515
public $languageTopics = ['tinymcerte:default'];
1616

17-
/** @var TinyMCERTE $tinymcerte */
18-
public $tinymcerte;
19-
20-
/**
21-
* {@inheritDoc}
22-
* @param modX $modx A reference to the modX instance
23-
* @param array $properties An array of properties
24-
*/
25-
public function __construct(modX &$modx, array $properties = [])
26-
{
27-
parent::__construct($modx, $properties);
28-
29-
$corePath = $this->modx->getOption('tinymcerte.core_path', null, $this->modx->getOption('core_path') . 'components/tinymcerte/');
30-
$this->tinymcerte = $this->modx->getService('tinymcerte', 'TinyMCERTE', $corePath . 'model/tinymcerte/');
31-
}
32-
3317
/**
3418
* {@inheritDoc}
3519
* @return string
3620
*/
3721
public function process()
3822
{
23+
$id = $this->getProperty('id');
3924
$query = $this->getProperty('query');
40-
$ctx = $this->getProperty('ctx');
4125
$limit = $this->getProperty('limit', 10);
4226
$c = $this->modx->newQuery('modResource');
4327
$c->where([
@@ -48,12 +32,12 @@ public function process()
4832
'pagetitle:LIKE' => '%' . $query . '%'
4933
]);
5034
}
51-
if (!empty($ctx)) {
35+
if (!empty($id)) {
5236
$c->where([
53-
'context_key' => $ctx
37+
'id:=' => $id,
5438
]);
5539
}
56-
$c->select('id, pagetitle, context_key');
40+
$c->select('id, concat(pagetitle, " <small>(", context_key, ")</small>") as pagetitle, id as value');
5741
$c->limit($limit);
5842
$results = [];
5943
if ($c->prepare() && $c->stmt->execute()) {

‎src/css/tinymcerte.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,19 @@
2525
padding: 5px 5.5px;
2626
resize: none;
2727
width: 100%;
28+
}
29+
30+
.tox .choices__list small {
31+
font-size: 12px;
32+
opacity: 0.8;
33+
}
34+
35+
.tox .choices__button {
36+
text-indent: -9999px;
37+
appearance: none;
38+
border: 0;
39+
background-color: transparent;
40+
background-repeat: no-repeat;
41+
background-position: center;
42+
cursor: pointer;
2843
}

‎src/js/Plugins/modxlink/Data.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,13 +64,13 @@ export default class Data {
6464
data.new_window = (this.element.getAttribute('target') === '_blank');
6565
data.link_text = this.element.innerHTML;
6666

67-
const linkType = this.element.dataset.fredLinkType;
67+
const linkType = this.element.dataset.linkType;
6868
let url = this.element.getAttribute('href') ?? '';
6969

7070
if (linkType === 'page') {
71-
data.page_page = this.element.getAttribute('data-fred-link-page') ?? '';
72-
data.page_anchor = this.element.getAttribute('data-fred-link-anchor') ?? '';
73-
data.page_parameters = this.element.getAttribute('data-fred-link-parameters') ?? '';
71+
data.page_page = this.element.getAttribute('data-link-page') ?? '';
72+
data.page_anchor = this.element.getAttribute('data-link-anchor') ?? '';
73+
data.page_parameters = this.element.getAttribute('data-link-parameters') ?? '';
7474

7575
if (data.page_page || data.page_anchor || data.page_parameters) {
7676
data.page_url = url.replace(('#' + data.page_anchor), '');

‎src/js/Plugins/modxlink/Link.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export default class Link {
3232

3333
static getGeneralAttributes(data, type) {
3434
const attributes = {
35-
'data-fred-link-type': type
35+
'data-link-type': type
3636
};
3737

3838
if (data.link_title) {
@@ -55,16 +55,16 @@ export default class Link {
5555

5656
const attributes = {
5757
...(Link.getGeneralAttributes(data, 'page')),
58-
'data-fred-link-page': data.page_page
58+
'data-link-page': data.page_page
5959
};
6060
attributes.href = data.page_url;
6161

6262
if (data.page_anchor) {
63-
attributes['data-fred-link-anchor'] = data.page_anchor;
63+
attributes['data-link-anchor'] = data.page_anchor;
6464
attributes.href = `${data.page_url}#${data.page_anchor}`;
6565
}
6666
if (data.page_parameters) {
67-
attributes['data-fred-link-parameters'] = data.page_parameters;
67+
attributes['data-link-parameters'] = data.page_parameters;
6868
attributes.href = `${attributes.href}?${data.page_parameters}`;
6969
}
7070

‎src/js/Plugins/modxlink/modxlink.js‎

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -210,23 +210,25 @@ export default (editor, url) => {
210210
const input = document.querySelector('#page_url');
211211
if (input) {
212212
templateInputChoices = new Choices(input, {
213-
removeItemButton: true
213+
removeItemButton: true,
214+
allowHTML: true,
214215
});
215216

217+
initLookup(data.page_page);
218+
216219
input.addEventListener('search', event => {
217220
clearTimeout(lookupTimeout);
218221
lookupTimeout = setTimeout(serverLookup, 200);
219222
});
220223

221224
input.addEventListener('choice', event => {
222225
templateInputChoices.setChoices(initData, 'value', 'pagetitle', true);
223-
224-
choicesData.page_page = event.detail.choice.value;
225-
choicesData.page_url = event.detail.choice.customProperties.url;
226+
choicesData.page_page = event.detail.value;
227+
choicesData.page_url = '[[~' + event.detail.value + ']]';
226228

227229
if (!data.link_text) {
228-
data.link_text = event.detail.choice.label;
229-
linkText.value(event.detail.choice.label);
230+
data.link_text = event.detail.label;
231+
linkText.value(event.detail.label);
230232
}
231233

232234
const pageAnchorEl = document.getElementById('page_anchor-l');
@@ -294,7 +296,7 @@ export default (editor, url) => {
294296

295297
const populateOptions = options => {
296298
const toRemove = [];
297-
299+
console.log(templateInputChoices);
298300
/* templateInputChoices.currentState.items.forEach(item => {
299301
if (item.active) {
300302
toRemove.push(item.value);
@@ -315,8 +317,6 @@ export default (editor, url) => {
315317
if (query in lookupCache) {
316318
populateOptions(lookupCache[query]);
317319
} else {
318-
// @todo implement server lookup
319-
console.info('TinyMCE RTE Choices server lookup');
320320
const resourceSearchUrl = TinyMCERTE.editorConfig.connector_url + '?action=mgr/resource/search' + (MODx.ctx ? ('&wctx=' + MODx.ctx) : '') + '&HTTP_MODAUTH=' + MODx.siteId + '&query=' + query + '&limit=10&sort=pagetitle&dir=ASC';
321321
fetch(resourceSearchUrl).then(function (response) {
322322
return response.json();
@@ -327,6 +327,25 @@ export default (editor, url) => {
327327
}
328328
};
329329

330+
const initLookup = (value) => {
331+
if (value) {
332+
const resourceSearchUrl = TinyMCERTE.editorConfig.connector_url + '?action=mgr/resource/search' + (MODx.ctx ? ('&wctx=' + MODx.ctx) : '') + '&HTTP_MODAUTH=' + MODx.siteId + '&id=' + value + '&limit=1';
333+
fetch(resourceSearchUrl).then(function (response) {
334+
return response.json();
335+
}).then(function (data) {
336+
initData = data.results;
337+
templateInputChoices.setValue([{
338+
id: data.results[0].id,
339+
highlighted: true,
340+
active: true,
341+
selected: true,
342+
label: data.results[0].pagetitle,
343+
value: data.results[0].value,
344+
}]);
345+
})
346+
}
347+
}
348+
330349
initChoices();
331350
}
332351

0 commit comments

Comments
 (0)