add gen ai button in editor

app/views/components/editor/example-with-gen-ai-button.html

@@ -0,0 +1,45 @@
+
+<div class="row">
+  <div class="twelve columns">
+    <div class="field">
+      <label class="label" for="title">Title</label>
+      <input type="text" id="title" placeholder="Example"/>
+    </div>
+
+    <div class="field">
+      <span id="comments-label" class="label">Comments</span>
+      <div class="editor" id="editor1" aria-label="Comments" data-options="{attributes: [{name: 'id', value: 'example1'}, {name: 'data-automation-id', value: 'automation-id-example1'}]}">
+        <p>Embrace <a href="http://en.wikipedia.org/wiki/e-commerce" class="hyperlink">e-commerce action-items</a>, reintermediate, ecologies paradigms wireless share life-hacks create innovative harness. Evolve solutions rich-clientAPIs synergies harness relationships virtual vertical facilitate end-to-end, wireless, evolve synergistic synergies.</p>
+        <p>Cross-platform, evolve, ROI scale cultivate eyeballs addelivery, e-services content cross-platform leverage extensible viral incentivize integrateAJAX-enabled sticky evolve magnetic cultivate leverage; cutting-edge. Innovate, end-to-end podcasting, whiteboard streamline e-business social; compelling, "cross-media exploit infomediaries innovative integrate integrateAJAX-enabled." Killer interactive reinvent, cultivate widgets leverage morph.</p>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<script>
+  $('body').on('initialized', function () {
+    var editorElement = $('#editor1');
+    var loadingIndicator = $('<div class="ai-loading-indicator"><div class="bar"></div><div class="bar"></div><div class="bar"></div></div>');
+
+    editorElement.on('AIButtonClicked', function (e, elements) {
+      e.preventDefault();
+
+      // Cache the jQuery objects
+      var editor = $(elements.editor[0]);
+      var toolbar = $(elements.toolbar);
+
+      // Add the loading indicator to the editor element
+      loadingIndicator.appendTo(editor);
+
+      // Disable button interactions during processing
+      toolbar.find('.btn-gen-ai').css('pointer-events', 'none');
+
+      setTimeout(function () {
+        // Remove the loading indicator after a delay
+        editor.find('.ai-loading-indicator').remove();
+        toolbar.find('.btn-gen-ai').css('pointer-events', '');
+      }, 4000);
+    });
+  });
+</script>

src/components/editor/_editor.scss

@@ -454,6 +454,34 @@
     padding: 0;
     text-align: left;
 
+    &.btn-gen-ai {
+      background: var(--Copilot, $button-gen-ai-bg-color);
+      border: none;
+      padding-left: 1px;
+      width: 24px;
+
+      &:hover:not(.destructive):not(:disabled):not(.close):not(.btn-filter):not(.personalize-actionable) {
+        background: var(--Copliot---Hover, $button-gen-ai-hover-bg-color);
+        border: none;
+
+        svg.icon {
+          color: $button-color-gen-ai;
+        }
+      }
+
+      &:active {
+        background: var(--Copilot--Pressed, $button-gen-ai-active-bg-color);
+      }
+
+      &:disabled {
+        background: $button-primary-disabled-color-gen-ai;
+      }
+
+      svg.icon {
+        color: $button-color-gen-ai;
+      }
+    }
+
     span:not(.audible) {
       color: $editor-btn-color;
       display: inline-block;

src/components/editor/editor.js

@@ -66,6 +66,7 @@ const EDITOR_DEFAULTS = {
       'separator', 'anchor',
       'separator', 'image',
       'separator', 'clearFormatting',
+      'separator', 'genAIButton',
       'separator', 'source'
     ],
     source: [
@@ -77,6 +78,7 @@ const EDITOR_DEFAULTS = {
       'separator', 'anchor',
       'separator', 'image',
       'separator', 'clearFormatting',
+      'separator', 'genAIButton',
       'separator', 'visual'
     ]
   },
@@ -805,7 +807,8 @@ Editor.prototype = {
       h3: 51, // {Ctrl + 3} h3
       h4: 52, // {Ctrl + 4} h4
       space: 32, // {Ctrl + Space} Clear Formatting
-      sv: 192 // {Ctrl + ~} toggle source -or- visualview
+      sv: 192, // {Ctrl + ~} toggle source -or- visualview
+      g: 71 // {Ctrl + G} toggle for gen AI Button
     };
 
     currentElement.on('keydown.editor', (e) => {
@@ -873,6 +876,9 @@ Editor.prototype = {
         case keys.space:
           this.triggerClick(e, 'clearFormatting');
           break;
+        case keys.g:
+          this.triggerClick(e, 'genAIButton');
+          break;
         case keys.sv:
           this.triggerClick(e, currentElement === this.element ? 'source' : 'visual');
           break;
@@ -1100,6 +1106,8 @@ Editor.prototype = {
 
       clearFormatting: `<button type="button" class="btn btn-editor" title="${Locale.translate('ClearFormatting')}" data-action="clearFormatting" >${buttonLabels.clearFormatting}</button>`,
 
+      genAIButton: `<button type="button" class="btn btn-editor btn-gen-ai" title="${Locale.translate('GenAIButton')}" data-action="genAIButton">${buttonLabels.genAIButton}<button>`,
+
       source: `<button type="button" class="btn btn-editor" title="${Locale.translate('ViewSource')}" data-action="source" >${buttonLabels.source}</button>`,
 
       visual: `<button type="button" class="btn btn-editor" title="${Locale.translate('ViewVisual')}" data-action="visual" >${buttonLabels.visual}</button>`
@@ -1135,6 +1143,7 @@ Editor.prototype = {
       justifyCenter: this.getIcon('JustifyCenter', 'center-text'),
       justifyRight: this.getIcon('JustifyRight', 'right-text-align'),
       clearFormatting: this.getIcon('ClearFormatting', 'clear-formatting'),
+      genAIButton: this.getIcon('GenAIButton', 'insights-smart-panel'),
       source: this.getIcon('ViewSource', 'html', 'html-icon'),
       visual: this.getIcon('ViewVisual', 'visual', 'visual-icon')
     };
@@ -2308,6 +2317,8 @@ Editor.prototype = {
         this.execColorActions(action);
       } else if (action === 'clearFormatting') {
         this.clearFormatting();
+      } else if (action === 'genAIButton') {
+        this.genAIButtonAction();
       } else if (action === 'source' || action === 'visual') {
         this.toggleSource();
       } else {
@@ -2637,6 +2648,28 @@ Editor.prototype = {
     }
   },
 
+  /**
+   * Actions for Gen AI button
+   * @private
+   * @returns {void}
+   */
+  genAIButtonAction() {
+    const self = this;
+
+    /**
+     * Triggers the 'AIButtonClicked' event on the editor element.
+     *
+     * @memberof Editor
+     * @function
+     * @name triggerAIButtonClickedEvent
+     * @param {Object} eventData - Data to be passed along with the event.
+     * @param {jQuery} self - The main jQuery component.
+     * @param {jQuery} eventData.editor - The jQuery object representing the editor element.
+     * @param {jQuery} eventData.toolbar - The jQuery object representing the toolbar element.
+     */
+    self.element.triggerHandler('AIButtonClicked', [{ self, editor: self.element, toolbar: self.toolbar }]);
+  },
+
   /**
    * Get selection parent element.
    * @private

src/components/locale/cultures/en-US.js

@@ -249,6 +249,7 @@ Soho.Locale.addCulture('en-US', {
     French: { id: 'French', value: 'French', comment: 'Language name for French' },
     From: { id: 'From', value: 'From', comment: 'Start of a range (of dates)' },
     FullView: { id: 'FullView', value: 'Full view', comment: 'Full View tooltip' },
+    GenAIButton: { id: 'GenAIButton', value: 'Generative AI Button', comment: 'Button for Generative AI' },
     German: { id: 'German', value: 'German', comment: 'Language name for german' },
     Go: { id: 'Go', value: 'Go', comment: 'Go, perform a movement, start a search, move to the next thing in a workflow.' },
     GoBack: { id: 'GoBack', value: 'Go back', comment: 'Move Page / object this directionp' },