Skip to content

Commit 41d0cfa

Browse files
MonDiscourseMonDiscourse
authored
Merge pull request #18 from bluefroguk1/API
Move to API and add Highlighter
2 parents bb0abac + 538422d commit 41d0cfa

File tree

10 files changed

+210
-244
lines changed

10 files changed

+210
-244
lines changed

‎README.md

+3-2
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@ This Discourse theme component adds formatting options to your Discourse compose
77
* superscript
88
* subscript
99
* center
10+
* align left
1011
* align right
1112
* justify
1213
* float left
13-
* float right
14-
* columns.
14+
* columns
15+
* Highlighter
1516

1617
These additions are responsive for desktops and phones, but not for horizon orientation or tablets. These additions have taken into consideration [Slick](https://github.com/discourse/Discourse-Slick-image-gallery), [Tiles](https://github.com/discourse/Discourse-Tiles-image-gallery), and [Events](https://github.com/angusmcleod/discourse-events) when determining what should be placed on the composer bar or in the composer pop out menu.
1718

‎about.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
2-
"name": "md-composer-extras",
2+
"name": "MD Composer Extras",
33
"component": true,
44
"license_url": null,
55
"about_url": "https://www.mon-discourse.fr/themes/md-composer-extras/",
66
"authors": "Steven",
7-
"theme_version": "1.5",
7+
"theme_version": "1.6",
88
"learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
99
}

‎common/common.scss

+5
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,12 @@
66
text-align: right;
77
}
88

9+
[data-wrap="left"] {
10+
text-align: left;
11+
}
12+
913
[data-wrap="justify"] {
1014
text-align: justify;
1115
}
1216

17+

‎desktop/desktop.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
}
1313

1414
[data-wrap="floatl"] {
15-
float: left;
16-
margin-right: 10px;
15+
padding-left: 20px;
16+
display: block;
1717
}
1818

1919
[data-wrap="floatr"] {

‎desktop/head_tag.html

-123
This file was deleted.

‎javascripts/discourse/api-initializers/api-setup.js

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import { apiInitializer } from "discourse/lib/api";
2+
import loadScript from "discourse/lib/load-script";
3+
import I18n from "I18n";
4+
5+
async function applyHighlight(element) {
6+
const highlights = element.querySelectorAll("mark");
7+
if (!highlights.length) {
8+
return;
9+
}
10+
}
11+
12+
// Helper function to get raw text without translation
13+
function getRawText(text) {
14+
return text.replace(/\[.*?\]/g, '');
15+
}
16+
17+
export default apiInitializer("0.11.1", (api) => {
18+
const { iconNode } = require("discourse-common/lib/icon-library");
19+
const currentLocale = I18n.currentLocale();
20+
21+
// Localization setup - keep only the button titles in translations
22+
I18n.translations[currentLocale].js.underline_button_title = settings.underline_button;
23+
I18n.translations[currentLocale].js.align_center_button_title = settings.align_center_button;
24+
I18n.translations[currentLocale].js.align_right_button_title = settings.align_right_button;
25+
I18n.translations[currentLocale].js.align_justify_button_title = settings.align_justify_button;
26+
I18n.translations[currentLocale].js.strikethrough_button_title = settings.strikethrough_button;
27+
I18n.translations[currentLocale].js.superscript_button_title = settings.superscript_button;
28+
I18n.translations[currentLocale].js.subscript_button_title = settings.subscript_button;
29+
I18n.translations[currentLocale].js.columns_button_title = settings.columns_button;
30+
I18n.translations[currentLocale].js.align_left_button_title = settings.align_left_button;
31+
I18n.translations[currentLocale].js.float_left_button = settings.float_left_button;
32+
I18n.translations[currentLocale].js.highlight_button_title = settings.highlighter_button;
33+
I18n.translations[currentLocale].js.composer.highlighter_text = settings.highlighter_text;
34+
I18n.translations[currentLocale].js.composer.underline_text = settings.underline_text;
35+
I18n.translations[currentLocale].js.composer.align_center_text = settings.align_center_text;
36+
I18n.translations[currentLocale].js.composer.align_left_text = settings.align_left_text;
37+
I18n.translations[currentLocale].js.composer.align_right_text = settings.align_right_text;
38+
I18n.translations[currentLocale].js.composer.align_justify_text = settings.align_justify_text;
39+
I18n.translations[currentLocale].js.composer.strikethrough_text = settings.strikethrough_text;
40+
I18n.translations[currentLocale].js.composer.superscript_text = settings.superscript_text;
41+
I18n.translations[currentLocale].js.composer.subscript_text = settings.subscript_text;
42+
I18n.translations[currentLocale].js.composer.columns_text = settings.columns_text;
43+
I18n.translations[currentLocale].js.composer.float_left_text = settings.float_left_text;
44+
45+
// Toolbar Button Definitions
46+
api.onToolbarCreate((toolbar) => {
47+
const buttons = [
48+
{
49+
id: "underline_button",
50+
group: "fontStyles",
51+
icon: "underline",
52+
shortcut: "U",
53+
title: "underline_button_title",
54+
perform: (e) => e.applySurround("[u]", "[/u]", "underline_text"),
55+
},
56+
{
57+
id: "strikethrough_button",
58+
group: "fontStyles",
59+
icon: "strikethrough",
60+
title: "strikethrough_button_title",
61+
perform: (e) => e.applySurround("<s>", "</s>", "strikethrough_text"),
62+
},
63+
{
64+
id: "superscript_button",
65+
group: "fontStyles",
66+
icon: "superscript",
67+
title: "superscript_button_title",
68+
perform: (e) => e.applySurround("<sup>", "</sup>", "superscript_text"),
69+
},
70+
{
71+
id: "subscript_button",
72+
group: "fontStyles",
73+
icon: "subscript",
74+
title: "subscript_button_title",
75+
perform: (e) => e.applySurround("<sub>", "</sub>", "subscript_text"),
76+
},
77+
{
78+
id: "align_left_button",
79+
group: "extras",
80+
icon: "align-left",
81+
title: "align_left_button_title",
82+
perform: (e) => e.applySurround('[wrap="left"]\n', "\n[/wrap]", "float_left_text"),
83+
},
84+
{
85+
id: "align_center_button",
86+
group: "extras",
87+
icon: "align-center",
88+
title: "align_center_button_title",
89+
perform: (e) => e.applySurround('[wrap="center"]\n', "\n[/wrap]", "align_center_text"),
90+
},
91+
{
92+
id: "align_right_button",
93+
group: "extras",
94+
icon: "align-right",
95+
title: "align_right_button_title",
96+
perform: (e) => e.applySurround('[wrap="right"]\n', "\n[/wrap]", "align_right_text"),
97+
},
98+
{
99+
id: "align_justify_button",
100+
group: "extras",
101+
icon: "align-justify",
102+
title: "align_justify_button_title",
103+
perform: (e) => e.applySurround('[wrap="justify"]\n', "\n[/wrap]", "align_justify_text"),
104+
},
105+
];
106+
107+
buttons.forEach((button) => toolbar.addButton(button));
108+
});
109+
110+
api.addComposerToolbarPopupMenuOption({
111+
action: (toolbarEvent) => {
112+
toolbarEvent.applySurround('<mark>', '</mark>', "highlighter_text");
113+
},
114+
icon: "highlighter",
115+
label: "highlight_button_title",
116+
shortcut: "H",
117+
});
118+
119+
api.addComposerToolbarPopupMenuOption({
120+
action: (toolbarEvent) =>
121+
toolbarEvent.applySurround('[wrap="columns"]\n', "\n[/wrap]", "columns_text"),
122+
icon: "table-columns",
123+
label: "columns_button_title",
124+
});
125+
126+
api.addComposerToolbarPopupMenuOption({
127+
action: (toolbarEvent) => {
128+
toolbarEvent.applySurround('[wrap="floatl"]\n', '\n[/wrap]', "float_left_text");
129+
},
130+
icon: 'indent',
131+
label: 'float_left_button',
132+
});
133+
134+
// Decorate cooked elements with highlight processing
135+
api.decorateCookedElement(
136+
async (elem, helper) => {
137+
const id = helper ? `post_${helper.getModel().id}` : "composer";
138+
applyHighlight(elem, id);
139+
},
140+
{ id: "wrap-mark" }
141+
);
142+
});

‎locales/en.yml

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
en:
2+
js:
3+
highlight_button_title: "Highlight Text"
4+
underline_button_title: "Underline"
5+
align_center_button_title: "Center"
6+
align_right_button_title: "Align Right"
7+
align_justify_button_title: "Justify"
8+
strikethrough_button_title: "Strike-through"
9+
superscript_button_title: "Superscript"
10+
subscript_button_title: "Subscript"
11+
columns_button_title: "Columns"
12+
align_left_button_title: "Align Left"
13+
float_left_button: "Float Left"
14+
underline_text: "Text"
15+
highlighter_text: "Text"
16+
align_center_text: "Text"
17+
align_left_text: "Text"
18+
align_right_text: "Text"
19+
align_justify_text: "Text"
20+
strikethrough_text: "Text"
21+
superscript_text: "Text"
22+
subscript_text: "Text"
23+
columns_text: "Text"
24+
float_left_text: "Text"
25+
columns_text: "Enter the placeholder text that appears in the composer after the user clicks the button."

0 commit comments

Comments
 (0)