Merge pull request #20 from The-3Labs-Team/19-button-faq

Create FAQ button

src/faq.js

@@ -0,0 +1,72 @@
+/* global tinymce */
+
+tinymce.PluginManager.add('faq', function (editor, url) {
+  const openDialog = function () {
+    return editor.windowManager.open({
+      title: 'Faq',
+      body: {
+        type: 'panel',
+        items: [
+          {
+            type: 'input',
+            inputMode: 'text',
+            name: 'title',
+            label: 'Add Title',
+          },
+          {
+            type: 'textarea',
+            name: 'content',
+            label: 'Add Content',
+          }
+        ]
+      },
+      buttons: [
+        {
+          type: 'cancel',
+          text: 'Close'
+        },
+        {
+          type: 'submit',
+          text: 'Save',
+          primary: true
+        }
+      ],
+      onSubmit: function (api) {
+        const data = api.getData()
+        /* Insert content when the window form is submitted */
+        editor.insertContent('[faq title="' + data.title + '"]' + data.content + '[/faq]')
+        api.close()
+      }
+    })
+  }
+
+  /* Add a spoiler icon */
+  editor.ui.registry.addIcon('faq', '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>')
+
+  /* Add a button that opens a window */
+  editor.ui.registry.addButton('faq', {
+    icon: 'faq',
+    tooltip: 'Add Faq',
+    onAction: function () {
+      /* Open window */
+      openDialog()
+    }
+  })
+  /* Adds a menu item, which can then be included in any menu via the menu/menubar configuration */
+  editor.ui.registry.addMenuItem('faq', {
+    text: 'Faq',
+    onAction: function () {
+      /* Open window */
+      openDialog()
+    }
+  })
+  /* Return the metadata for the help plugin */
+  return {
+    getMetadata: function () {
+      return {
+        name: 'Faq Shortcode',
+        url: 'https://github.com/The-3Labs-Team/tinymce-laravel-shortcode-plus'
+      }
+    }
+  }
+})