diff --git a/plugins/discourse-details/assets/javascripts/initializers/apply-details.js.es6 b/plugins/discourse-details/assets/javascripts/initializers/apply-details.js.es6
index 367607f8f2c..55421b68eea 100644
--- a/plugins/discourse-details/assets/javascripts/initializers/apply-details.js.es6
+++ b/plugins/discourse-details/assets/javascripts/initializers/apply-details.js.es6
@@ -1,11 +1,35 @@
 import { withPluginApi } from 'discourse/lib/plugin-api';
 
+function initializeDetails(api) {
+  api.decorateCooked($elem => $("details", $elem).details());
+
+  api.addToolbarPopupMenuOptionsCallback(() => {
+    return {
+      action: 'insertDetails',
+      icon: 'caret-right',
+      label: 'details.title'
+    };
+  });
+
+  const ComposerController = api.container.lookup("controller:composer");
+
+  ComposerController.reopen({
+    actions: {
+      insertDetails() {
+        this.get("toolbarEvent").applySurround(
+          "[details=",
+          `]${I18n.t("composer.details_text")}[/details]`,
+          "details_title")
+        ;
+      }
+    }
+  });
+}
+
 export default {
   name: "apply-details",
 
   initialize() {
-    withPluginApi('0.1', api => {
-      api.decorateCooked($elem => $("details", $elem).details());
-    });
+    withPluginApi('0.1', initializeDetails);
   }
 };
diff --git a/plugins/discourse-details/config/locales/client.en.yml b/plugins/discourse-details/config/locales/client.en.yml
new file mode 100644
index 00000000000..d17c9a5c65e
--- /dev/null
+++ b/plugins/discourse-details/config/locales/client.en.yml
@@ -0,0 +1,8 @@
+en:
+  js:
+    details:
+      title: Insert Details
+    composer:
+      details_title: Summary
+      details_text: "This text will be hidden"
+