Create a generic AI plugin layer for CKEditor (#3462674) · Issues · project / ai

Create a generic AI plugin layer for CKEditor

>>> [!note] Migrated issue   Reported by: [kevinquillen](https://www.drupal.org/user/317279) Related to !28 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> The CKEditor code from OpenAI worked to an extent but falls short on maintenance and extendability. Part of what I was waiting on was to see if the CKEditor API introduced better UI layers for enhancing what you see, better dialogs, better ways of selecting options, dialog handling, etc. As it stands, the CKEditor UI API seems too complex for fast changes. What we should have is a generic plugin layer that lets you register editor functionality via PHP plugins, and their actions open in Drupal dialogs and returned via AJAX. This would reduce the code needed for pure CKEditor JS and move it back to Drupal which is more native for this audience. That way, we can provide the current actions as PHP plugins and the community could extend it further. Also, we could get the ability to do 'retry' or 'regenerate' responses if the initial answer for an action is not satisfactory. <h3 id="summary-proposed-resolution">Proposed resolution</h3> Implement a plugin layer that can be used. The default plugin should pre configure and handle Drupal dialog handling so any implemented plugins just need to provide the form and submission action. Here is partial WIP code of what a plugin form would do. When selecting an action in the CKEditor dropdown in the editor, the JS fires a callback to a Drupal route (provided by the plugin layer somehow). The response is a Drupal form within the dialog. This is the Tone action converted to a FormBase form: <div class="codeblock"> <pre><?php   public function buildForm(array $form, FormStateInterface $form_state) {     $form['tone'] = [       '#type' => 'select',       '#title' => t('Choose tone'),       '#description' => t('Selecting one of the options will adjust/reword the body content to be appropriate for the target audience.'),       '#options' => [         'friendly' => t('Friendly'),         'professional' => t('Professional'),         'helpful' => t('Helpful'),         'easier for a high school educated reader' => t('High school level reader'),         'easier for a college educated reader' => t('College level reader'),         'explained to a five year old' => t('Explain like I\'m 5'),       ],     ];     $form['actions'] = [       '#type' => 'actions',     ];     $form['actions']['submit'] = [       '#type' => 'button',       '#value' => $this->t('Submit'),       '#ajax' => [         'callback' => [$this, 'ajaxSubmitForm'],       ],     ];     return $form;   }   /**    * {@inheritdoc}    */   public function validateForm(array &$form, FormStateInterface $form_state) {   }   /**    * {@inheritdoc}    */   public function ajaxSubmitForm(array &$form, FormStateInterface $form_state) {     $response = new AjaxResponse();     $response->addCommand(new EditorDialogSave([       'attributes' => [         'prompt' => 'Change the tone of the following text to be more ' . $form_state->getValue(['tone']) . ' using the same language as the following text: ',         'endpoint' => 'api/openai-ckeditor/completion',         'options' => [           'model' => 'gpt-3.5-turbo',           'max_tokens' => 2048,           'temperature' => 0.4,         ]       ],     ]));     $response->addCommand(new CloseModalDialogCommand());     return $response;   } ?></pre></div> <code>$response->addCommand(new EditorDialogSave</code> (<a href="https://api.drupal.org/api/drupal/core%21modules%21editor%21src%21Ajax%21EditorDialogSave.php/11.x">https://api.drupal.org/api/drupal/core%21modules%21editor%21src%21Ajax%21EditorDialogSave.php/11.x</a>) is the key part that puts the response directly back into the editor. <pre>  /**    * Command to save the contents of an editor-provided modal.    *    * This command does not close the open modal. It should be followed by a    * call to `Drupal.AjaxCommands.prototype.closeDialog`. Editors that are    * integrated with dialogs must independently listen for an    * `editor:dialogsave` event to save the changes into the contents of their    * interface.    *    * @param {Drupal.Ajax} [ajax]    *   The Drupal.Ajax object.    * @param {object} response    *   The server response from the ajax request.    * @param {Array} response.values    *   The values that were saved.    * @param {number} [status]    *   The status code from the ajax request.    *    * @fires event:editor:dialogsave    */   Drupal.AjaxCommands.prototype.editorDialogSave = function (     ajax,     response,     status,   ) {     $(window).trigger('editor:dialogsave', [response.values]);   };</pre>At this point it would not be a stretch to add additional dialog action buttons for Re-generate, Save to (prompt entity?), etc. This should help drive innovation around this instead of force everyone to learn CKEditor 5 JS API layer which is not really happening at large. <h3 id="summary-remaining-tasks">Remaining tasks</h3> tbd <h3 id="summary-ui-changes">User interface changes</h3> The CKEditor AI drop down would look the same, but the option list would be derived from registered plugins and not hardcoded. <h3 id="summary-api-changes">API changes</h3> tbd <h3 id="summary-data-model-changes">Data model changes</h3> tbd

issue