Move components to pop up menu; add superscript, subscript

about.json

@@ -4,6 +4,6 @@
   "license_url": null,
   "about_url": "https://www.mon-discourse.fr/themes/md-composer-extras/",
   "authors": "Steven",
-  "theme_version": "1.3",
+  "theme_version": "1.4",
   "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
 }

common/head_tag.html

@@ -14,7 +14,7 @@ api.onToolbarCreate(toolbar => {
         id: "strikethrough_button",
         group: "fontStyles",
         icon: "strikethrough",
-        perform: e => e.applySurround('<s>', '</s>', 'strikethrough_prompt')
+        perform: e => e.applySurround('<s>', '</s>', 'strikethrough_text')
     });
 });
 api.onToolbarCreate(toolbar => {
@@ -41,22 +41,46 @@ api.onToolbarCreate(toolbar => {
         perform: e => e.applySurround('[wrap="justify"]\n', '\n[/wrap]', 'align_justify_text')
     });
 });
-api.onToolbarCreate(toolbar => {
+
-    toolbar.addButton({
+// EXTRAS
-        id: "columns_button",
+api.addToolbarPopupMenuOptionsCallback(() => {
-        group: "extras",
+  return {
-        icon: "columns",
+      action: "floatleft",
-        perform: e => e.applySurround('[wrap="columns"]\n', '\n[/wrap]', 'columns_text')
-    });
-});
-api.onToolbarCreate(toolbar => {
-    toolbar.addButton({
-        id: "float_left_button",
-        group: "extras",
       icon: "indent",
-        perform: e => e.applySurround('[wrap="floatl"]\n', '\n[/wrap]', 'float_left_text')
+      label: "float_left_button"
+  };
 });
+api.addToolbarPopupMenuOptionsCallback(() => {
+  return {
+      action: "columns",
+      icon: "columns",
+      label: "columns_button"
+  };
 });
+api.addToolbarPopupMenuOptionsCallback(() => {
+  return {
+      action: "superscript",
+      icon: "superscript",
+      label: "superscript_button"
+  };
+});
+api.modifyClass("controller:composer", {
+  actions: {
+    floatleft() {
+      this.get("toolbarEvent").applySurround('[wrap="floatl"]\n', '\n[/wrap]', "float_left_text");
+    },
+	columns() {
+	  this.get("toolbarEvent").applySurround('[wrap="columns"]\n'), '\n[/wrap]', "columns_text"));
+	},
+	superscript() {
+	  this.get("toolbarEvent").applySurround("<sup>", "</sub>", "superscript_text");
+	},
+	subscript() {
+      this.get("toolbarEvent").applySurround("<sub>", "</sub>", "suvscript_text");
+    }
+  }
+});
+
 // TEXTS
 let translations = I18n.translations[I18n.currentLocale()].js;
 if (!translations) {
@@ -80,7 +104,13 @@ translations.composer.align_justify_text =
   settings.align_justify_text;
 translations.strikethrough_button = settings.strikethrough_button;
 translations.composer.strikethrough_prompt =
-  settings.strikethrough_prompt;
+  settings.strikethrough_text;
+translations.superscript_button = settings.superscript_button;
+translations.composer.superscript_text =
+  settings.superscript_text;
+translations.subscript_button = settings.subscript_button;
+translations.composer.subscript_prompt =
+  settings.subscript_text;
 translations.composer.columns_button_title = settings.columns_button;
 translations.composer.columns_text =
   settings.columns_text;

settings.yml

@@ -34,7 +34,7 @@ strikethrough_button:
   default: "Strike-through"
   description:
     en: Enter the text for the title of the button in the composer.
-strikethrough_prompt:
+strikethrough_text:
   default: "Text"
   description:
     en: Enter the placeholder text that appears in the composer after the user clicks the button.
@@ -46,6 +46,23 @@ float_left_text:
   default: "Text"
   description:
     en: Enter the placeholder text that appears in the composer after the user clicks the button.
+superscript_button:
+  default: "Superscript"
+  description:
+    en: Enter the text for the title of the button in the composer.
+superscript_text:
+  default: "Text"
+  description:
+    en: Enter the placeholder text that appears in the composer after the user clicks the button.
+subscript_button:
+  default: "Subscript"
+  description:
+    en: Enter the text for the title of the button in the composer.
+subscript_text:
+  default: "Text"
+  description:
+    en: Enter the placeholder text that appears in the composer after the user clicks the button.
+
 columns_button:
   default: "Columns"
   description:
@@ -58,6 +75,6 @@ columns_text:
 Svg_icons: 
   type: 'list'
   list_type: 'compact'
-  default: 'fa-align-center|fa-align-right|fa-align-justify|fa-strikethrough|fa-underline|fa-indent|fa-columns'
+  default: 'fa-align-center|fa-align-right|fa-align-justify|fa-strikethrough|fa-underline|fa-indent|fa-columns|fa-superscript|fa-subscript'
   description: 
     en: "Include FontAwesome 5 icon classes for each icon used in the list."