MDL-78613 TinyMCE: Add source code formatting and styling

Add code formatting (indenting) as well as code style (tag color) via a TinyMC plugin. To make it easier to make code edits when viewing the editor content in source code view.
2023-08-03 13:43:40 +10:00
parent a1d5d1b2f7
commit 07e2b61128
33 changed files with 36828 additions and 3 deletions
@@ -0,0 +1,108 @@
+<?php
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * TinyMCE HTML plugin custom behat steps definitions.
+ *
+ * @package    tiny_html
+ * @category   test
+ * @copyright  2023 Matt Porritt <[email protected]>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+use Behat\Mink\Exception\ExpectationException;
+use Behat\Gherkin\Node\{PyStringNode};
+
+// NOTE: no MOODLE_INTERNAL test here, this file may be required by behat before including /config.php.
+require_once(__DIR__ . '/../../../../tests/behat/editor_tiny_helpers.php');
+require_once(__DIR__ . '/../../../../../../behat/behat_base.php');
+
+/**
+ * TinyMCE HTML plugin custom behat steps definitions.
+ *
+ * @package    tiny_html
+ * @category   test
+ * @copyright  2023 Matt Porritt <[email protected]>
+ */
+class behat_tiny_html extends behat_base {
+    use editor_tiny_helpers;
+
+    /**
+     * Get Javascript to navigate to the shadow DOM of the editor,
+     * and find specified sourcecode text.
+     *
+     * @param string $editorid The editor id to search within.
+     * @param string $sourcecode The sourcecode to find.
+     * @return string The Javascript to execute.
+     */
+    protected function get_javascript_sourcecode_search(string $editorid, string $sourcecode): string {
+        return <<<EOF
+            const container = document.getElementById('{$editorid}_codeMirrorContainer');
+            const shadowRoot = container.shadowRoot;
+            const sourceCode = shadowRoot.querySelector('.modal-codemirror-container [contenteditable="true"]').innerText
+            const textToFind = `$sourcecode`;
+
+            if (sourceCode == textToFind) {
+              resolve(true);
+            } else {
+              resolve(false);
+            }
+        EOF;
+    }
+
+    /**
+     * Gets the specified formatted single line source code from the editor
+     * and compares it to what is expected.
+     *
+     * @When /^I should see "(?P<sourcecodelocator_string>(?:[^"]|\\")*)" source code for the "(?P<locator_string>(?:[^"]|\\")*)" TinyMCE editor$/
+     * @throws ExpectationException
+     * @param string $sourcecode The type of element to select (for example `p` or `span`)
+     * @param string $locator The editor to select within
+     */
+    public function get_source_code(string $sourcecode, string $locator): void {
+        $this->require_tiny_tags();
+
+        $editor = $this->get_textarea_for_locator($locator);
+        $editorid = $editor->getAttribute('id');
+        $js = $this->get_javascript_sourcecode_search($editorid, $sourcecode);
+
+        if ($this->evaluate_javascript_for_editor($editorid, $js) != 'true') {
+            throw new ExpectationException("Source code does not match expected.", $this->getSession());
+        }
+    }
+
+    /**
+     * Gets the specified formatted multiline source code from the editor
+     * and compares it to what is expected.
+     *
+     * @When /^I should see this multiline source code for the "(?P<locator_string>(?:[^"]|\\")*)" TinyMCE editor:$/
+     * @throws ExpectationException
+     * @param string $locator
+     * @param PyStringNode $sourcecode
+     * @return void
+     */
+    public function get_multiline_source_code(string $locator, PyStringNode $sourcecode): void {
+        $this->require_tiny_tags();
+
+        $editor = $this->get_textarea_for_locator($locator);
+        $editorid = $editor->getAttribute('id');
+        $js = $this->get_javascript_sourcecode_search($editorid, $sourcecode);
+
+        if ($this->evaluate_javascript_for_editor($editorid, $js) != 'true') {
+            throw new ExpectationException("Source code is not indented as expected.", $this->getSession());
+        }
+    }
+}
@@ -0,0 +1,24 @@
+@editor @editor_tiny @tiny_html @javascript
+Feature: Edit HTML in TinyMCE
+  To write rich text - I need to be able to easily edit the HTML.
+
+  Scenario: View HTML in TinyMCE source code view
+    Given I log in as "admin"
+    When I open my profile in edit mode
+    And I set the field "Description" to "This is my draft"
+    And I click on the "View > Source code" menu item for the "Description" TinyMCE editor
+    And I should see "Source code"
+    Then I should see "<p>This is my draft</p>" source code for the "Description" TinyMCE editor
+
+  Scenario: View multiline HTML with indenting in TinyMCE source code view
+    Given I log in as "admin"
+    When I open my profile in edit mode
+    And I set the field "Description" to "<div><p>This is my draft</p></div>"
+    And I click on the "View > Source code" menu item for the "Description" TinyMCE editor
+    And I should see "Source code"
+    Then I should see this multiline source code for the "Description" TinyMCE editor:
+      """
+      <div>
+        <p>This is my draft</p>
+      </div>
+      """