@ministryofjustice/frontend 4.0.1 → 5.0.0

package/moj/components/rich-text-editor/README.md

@@ -4,13 +4,19 @@
 
 ## Example
 
-```html
-<script>
-  new MOJFrontend.RichTextEditor({
-    textarea: $('.js-editor'),
-    toolbar: { 'bold': true, 'italic': true, 'underline': true, 'bullets': true, 'numbers': true }
-  })
-</script>
-```
+```mjs
+import { RichTextEditor } from '@ministryofjustice/frontend'
+
+const $richTextEditor = document.querySelector('.app-rich-text-editor')
 
-## Options
+new RichTextEditor({
+  textarea: $richTextEditor,
+  toolbar: {
+    bold: true,
+    italic: true,
+    underline: true,
+    bullets: true,
+    numbers: true
+  }
+})
+```

package/moj/components/rich-text-editor/_rich-text-editor.scss

@@ -75,3 +75,5 @@
   resize: vertical;
   outline: none;
 }
+
+/*# sourceMappingURL=_rich-text-editor.scss.map */

package/moj/components/rich-text-editor/_rich-text-editor.scss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/moj/components/rich-text-editor/_rich-text-editor.scss"],"names":[],"mappings":"AAAA,iCAAiC;AACjC,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,uBAAuB;EACvB,+BAA+B;AACjC;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,iBAAiB;EACjB,WAAW;EACX,uCAAuC;EACvC,UAAU;EACV,4BAA4B;EAC5B,uCAAuC;EACvC,4BAA4B;EAC5B,4BAA4B;EAC5B,0BAA0B;EAC1B,qBAAqB;EACrB,mBAAmB;EACnB,eAAe;;EAEf;IACE,cAAc;EAChB;;EAEA,wCAAwC;EACxC;IACE,UAAU;IACV,SAAS;EACX;;EAEA;IACE,kBAAkB;IAClB,UAAU;IACV,aAAa;IACb,+BAA+B;IAC/B,qCAAqC;IACrC;;oCAEgC;EAClC;AACF;;AAEA;EACE,+DAA+D;AACjE;;AAEA;EACE,iEAAiE;AACnE;;AAEA;EACE,oEAAoE;AACtE;;AAEA;EACE,6BAA6B;EAC7B,yEAAyE;AAC3E;;AAEA;EACE,uEAAuE;AACzE;;AAEA;EACE,iBAAiB;EACjB,cAAc;EACd,gBAAgB;EAChB,aAAa;AACf","file":"_rich-text-editor.scss","sourcesContent":["@use \"../../settings/assets\" as *;\n@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n   #RICH TEXT EDITOR\n   ========================================================================== */\n\n.moj-rich-text-editor__toolbar {\n  @include govuk-clearfix;\n  margin-bottom: govuk-spacing(2);\n}\n\n.moj-rich-text-editor__toolbar-button {\n  width: 40px;\n  height: 40px;\n  margin-left: -2px;\n  float: left;\n  border: 2px solid govuk-colour(\"black\");\n  outline: 0;\n  color: govuk-colour(\"black\");\n  background-color: govuk-colour(\"white\");\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n  background-size: 40px 40px;\n  text-decoration: none;\n  vertical-align: top;\n  cursor: pointer;\n\n  &:first-child {\n    margin-left: 0;\n  }\n\n  // Fix unwanted button padding in Firefox\n  &::-moz-focus-inner {\n    padding: 0;\n    border: 0;\n  }\n\n  &:focus {\n    position: relative;\n    z-index: 2;\n    outline: none;\n    color: $govuk-focus-text-colour;\n    background-color: $govuk-focus-colour;\n    box-shadow:\n      0 -2px $govuk-focus-colour,\n      0 4px $govuk-focus-text-colour;\n  }\n}\n\n.moj-rich-text-editor__toolbar-button--bold {\n  background-image: url(#{$moj-images-path}icon-wysiwyg-bold.svg);\n}\n\n.moj-rich-text-editor__toolbar-button--italic {\n  background-image: url(#{$moj-images-path}icon-wysiwyg-italic.svg);\n}\n\n.moj-rich-text-editor__toolbar-button--underline {\n  background-image: url(#{$moj-images-path}icon-wysiwyg-underline.svg);\n}\n\n.moj-rich-text-editor__toolbar-button--unordered-list {\n  margin-left: govuk-spacing(2);\n  background-image: url(#{$moj-images-path}icon-wysiwyg-unordered-list.svg);\n}\n\n.moj-rich-text-editor__toolbar-button--ordered-list {\n  background-image: url(#{$moj-images-path}icon-wysiwyg-ordered-list.svg);\n}\n\n.moj-rich-text-editor__content {\n  min-height: 130px;\n  overflow: auto;\n  resize: vertical;\n  outline: none;\n}\n"]}

package/moj/components/rich-text-editor/rich-text-editor.bundle.js

@@ -0,0 +1,145 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MOJFrontend = global.MOJFrontend || {}));
+})(this, (function (exports) { 'use strict';
+
+  class RichTextEditor {
+    /**
+     * @param {RichTextEditorConfig} options
+     */
+    constructor(options = {}) {
+      const {
+        textarea
+      } = options;
+      if (!textarea || !textarea.parentElement || !(textarea instanceof HTMLTextAreaElement) || !('contentEditable' in document.documentElement)) {
+        return this;
+      }
+      options.toolbar = options.toolbar || {
+        bold: false,
+        italic: false,
+        underline: false,
+        bullets: true,
+        numbers: true
+      };
+      this.textarea = textarea;
+      this.container = this.textarea.parentElement;
+      this.options = options;
+      if (this.container.hasAttribute('data-rich-text-editor-init')) {
+        return this;
+      }
+      this.container.setAttribute('data-rich-text-editor-init', '');
+      this.createToolbar();
+      this.hideDefault();
+      this.configureToolbar();
+      this.keys = {
+        left: 37,
+        right: 39,
+        up: 38,
+        down: 40
+      };
+      this.content.addEventListener('input', this.onEditorInput.bind(this));
+      this.container.querySelector('label').addEventListener('click', this.onLabelClick.bind(this));
+      this.toolbar.addEventListener('keydown', this.onToolbarKeydown.bind(this));
+    }
+    onToolbarKeydown(event) {
+      let focusableButton;
+      switch (event.keyCode) {
+        case this.keys.right:
+        case this.keys.down:
+          {
+            focusableButton = this.buttons.find(button => button.getAttribute('tabindex') === '0');
+            const nextButton = focusableButton.nextElementSibling;
+            if (nextButton instanceof HTMLButtonElement) {
+              nextButton.focus();
+              focusableButton.setAttribute('tabindex', '-1');
+              nextButton.setAttribute('tabindex', '0');
+            }
+            break;
+          }
+        case this.keys.left:
+        case this.keys.up:
+          {
+            focusableButton = this.buttons.find(button => button.getAttribute('tabindex') === '0');
+            const previousButton = focusableButton.previousElementSibling;
+            if (previousButton instanceof HTMLButtonElement) {
+              previousButton.focus();
+              focusableButton.setAttribute('tabindex', '-1');
+              previousButton.setAttribute('tabindex', '0');
+            }
+            break;
+          }
+      }
+    }
+    getToolbarHtml() {
+      let html = '';
+      html += '<div class="moj-rich-text-editor__toolbar" role="toolbar">';
+      if (this.options.toolbar.bold) {
+        html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--bold" type="button" data-command="bold"><span class="govuk-visually-hidden">Bold</span></button>';
+      }
+      if (this.options.toolbar.italic) {
+        html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--italic" type="button" data-command="italic"><span class="govuk-visually-hidden">Italic</span></button>';
+      }
+      if (this.options.toolbar.underline) {
+        html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--underline" type="button" data-command="underline"><span class="govuk-visually-hidden">Underline</span></button>';
+      }
+      if (this.options.toolbar.bullets) {
+        html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--unordered-list" type="button" data-command="insertUnorderedList"><span class="govuk-visually-hidden">Unordered list</span></button>';
+      }
+      if (this.options.toolbar.numbers) {
+        html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--ordered-list" type="button" data-command="insertOrderedList"><span class="govuk-visually-hidden">Ordered list</span></button>';
+      }
+      html += '</div>';
+      return html;
+    }
+    getEnhancedHtml() {
+      return `${this.getToolbarHtml()}<div class="govuk-textarea moj-rich-text-editor__content" contenteditable="true" spellcheck="false"></div>`;
+    }
+    hideDefault() {
+      this.textarea.classList.add('govuk-visually-hidden');
+      this.textarea.setAttribute('aria-hidden', 'true');
+      this.textarea.setAttribute('tabindex', '-1');
+    }
+    createToolbar() {
+      this.toolbar = document.createElement('div');
+      this.toolbar.className = 'moj-rich-text-editor';
+      this.toolbar.innerHTML = this.getEnhancedHtml();
+      this.container.append(this.toolbar);
+      this.content = /** @type {HTMLDivElement} */
+      this.container.querySelector('.moj-rich-text-editor__content');
+      this.content.innerHTML = this.$textarea.value;
+    }
+    configureToolbar() {
+      this.buttons = Array.from(/** @type {NodeListOf<HTMLButtonElement>} */
+      this.container.querySelectorAll('.moj-rich-text-editor__toolbar-button'));
+      this.buttons.forEach((button, index) => {
+        button.setAttribute('tabindex', !index ? '0' : '-1');
+        button.addEventListener('click', this.onButtonClick.bind(this));
+      });
+    }
+    onButtonClick(event) {
+      if (!(event.currentTarget instanceof HTMLElement)) {
+        return;
+      }
+      document.execCommand(event.currentTarget.getAttribute('data-command'), false, undefined);
+    }
+    getContent() {
+      return this.content.innerHTML;
+    }
+    onEditorInput() {
+      this.updateTextarea();
+    }
+    updateTextarea() {
+      document.execCommand('defaultParagraphSeparator', false, 'p');
+      this.textarea.value = this.getContent();
+    }
+    onLabelClick(event) {
+      event.preventDefault();
+      this.content.focus();
+    }
+  }
+
+  exports.RichTextEditor = RichTextEditor;
+
+}));
+//# sourceMappingURL=rich-text-editor.bundle.js.map

package/moj/components/rich-text-editor/rich-text-editor.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-text-editor.bundle.js","sources":["../../../../src/moj/components/rich-text-editor/rich-text-editor.mjs"],"sourcesContent":["export class RichTextEditor {\n  /**\n   * @param {RichTextEditorConfig} options\n   */\n  constructor(options = {}) {\n    const { textarea } = options\n\n    if (\n      !textarea ||\n      !textarea.parentElement ||\n      !(textarea instanceof HTMLTextAreaElement) ||\n      !('contentEditable' in document.documentElement)\n    ) {\n      return this\n    }\n\n    options.toolbar = options.toolbar || {\n      bold: false,\n      italic: false,\n      underline: false,\n      bullets: true,\n      numbers: true\n    }\n\n    this.textarea = textarea\n    this.container = this.textarea.parentElement\n    this.options = options\n\n    if (this.container.hasAttribute('data-rich-text-editor-init')) {\n      return this\n    }\n\n    this.container.setAttribute('data-rich-text-editor-init', '')\n\n    this.createToolbar()\n    this.hideDefault()\n    this.configureToolbar()\n\n    this.keys = {\n      left: 37,\n      right: 39,\n      up: 38,\n      down: 40\n    }\n\n    this.content.addEventListener('input', this.onEditorInput.bind(this))\n\n    this.container\n      .querySelector('label')\n      .addEventListener('click', this.onLabelClick.bind(this))\n\n    this.toolbar.addEventListener('keydown', this.onToolbarKeydown.bind(this))\n  }\n\n  onToolbarKeydown(event) {\n    let focusableButton\n    switch (event.keyCode) {\n      case this.keys.right:\n      case this.keys.down: {\n        focusableButton = this.buttons.find(\n          (button) => button.getAttribute('tabindex') === '0'\n        )\n        const nextButton = focusableButton.nextElementSibling\n        if (nextButton instanceof HTMLButtonElement) {\n          nextButton.focus()\n          focusableButton.setAttribute('tabindex', '-1')\n          nextButton.setAttribute('tabindex', '0')\n        }\n        break\n      }\n      case this.keys.left:\n      case this.keys.up: {\n        focusableButton = this.buttons.find(\n          (button) => button.getAttribute('tabindex') === '0'\n        )\n        const previousButton = focusableButton.previousElementSibling\n        if (previousButton instanceof HTMLButtonElement) {\n          previousButton.focus()\n          focusableButton.setAttribute('tabindex', '-1')\n          previousButton.setAttribute('tabindex', '0')\n        }\n        break\n      }\n    }\n  }\n\n  getToolbarHtml() {\n    let html = ''\n\n    html += '<div class=\"moj-rich-text-editor__toolbar\" role=\"toolbar\">'\n\n    if (this.options.toolbar.bold) {\n      html +=\n        '<button class=\"moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--bold\" type=\"button\" data-command=\"bold\"><span class=\"govuk-visually-hidden\">Bold</span></button>'\n    }\n\n    if (this.options.toolbar.italic) {\n      html +=\n        '<button class=\"moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--italic\" type=\"button\" data-command=\"italic\"><span class=\"govuk-visually-hidden\">Italic</span></button>'\n    }\n\n    if (this.options.toolbar.underline) {\n      html +=\n        '<button class=\"moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--underline\" type=\"button\" data-command=\"underline\"><span class=\"govuk-visually-hidden\">Underline</span></button>'\n    }\n\n    if (this.options.toolbar.bullets) {\n      html +=\n        '<button class=\"moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--unordered-list\" type=\"button\" data-command=\"insertUnorderedList\"><span class=\"govuk-visually-hidden\">Unordered list</span></button>'\n    }\n\n    if (this.options.toolbar.numbers) {\n      html +=\n        '<button class=\"moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--ordered-list\" type=\"button\" data-command=\"insertOrderedList\"><span class=\"govuk-visually-hidden\">Ordered list</span></button>'\n    }\n\n    html += '</div>'\n    return html\n  }\n\n  getEnhancedHtml() {\n    return `${this.getToolbarHtml()}<div class=\"govuk-textarea moj-rich-text-editor__content\" contenteditable=\"true\" spellcheck=\"false\"></div>`\n  }\n\n  hideDefault() {\n    this.textarea.classList.add('govuk-visually-hidden')\n    this.textarea.setAttribute('aria-hidden', 'true')\n    this.textarea.setAttribute('tabindex', '-1')\n  }\n\n  createToolbar() {\n    this.toolbar = document.createElement('div')\n    this.toolbar.className = 'moj-rich-text-editor'\n    this.toolbar.innerHTML = this.getEnhancedHtml()\n    this.container.append(this.toolbar)\n\n    this.content = /** @type {HTMLDivElement} */ (\n      this.container.querySelector('.moj-rich-text-editor__content')\n    )\n\n    this.content.innerHTML = this.$textarea.value\n  }\n\n  configureToolbar() {\n    this.buttons = Array.from(\n      /** @type {NodeListOf<HTMLButtonElement>} */\n      (this.container.querySelectorAll('.moj-rich-text-editor__toolbar-button'))\n    )\n\n    this.buttons.forEach((button, index) => {\n      button.setAttribute('tabindex', !index ? '0' : '-1')\n      button.addEventListener('click', this.onButtonClick.bind(this))\n    })\n  }\n\n  onButtonClick(event) {\n    if (!(event.currentTarget instanceof HTMLElement)) {\n      return\n    }\n\n    document.execCommand(\n      event.currentTarget.getAttribute('data-command'),\n      false,\n      undefined\n    )\n  }\n\n  getContent() {\n    return this.content.innerHTML\n  }\n\n  onEditorInput() {\n    this.updateTextarea()\n  }\n\n  updateTextarea() {\n    document.execCommand('defaultParagraphSeparator', false, 'p')\n    this.textarea.value = this.getContent()\n  }\n\n  onLabelClick(event) {\n    event.preventDefault()\n    this.content.focus()\n  }\n}\n"],"names":["RichTextEditor","constructor","options","textarea","parentElement","HTMLTextAreaElement","document","documentElement","toolbar","bold","italic","underline","bullets","numbers","container","hasAttribute","setAttribute","createToolbar","hideDefault","configureToolbar","keys","left","right","up","down","content","addEventListener","onEditorInput","bind","querySelector","onLabelClick","onToolbarKeydown","event","focusableButton","keyCode","buttons","find","button","getAttribute","nextButton","nextElementSibling","HTMLButtonElement","focus","previousButton","previousElementSibling","getToolbarHtml","html","getEnhancedHtml","classList","add","createElement","className","innerHTML","append","$textarea","value","Array","from","querySelectorAll","forEach","index","onButtonClick","currentTarget","HTMLElement","execCommand","undefined","getContent","updateTextarea","preventDefault"],"mappings":"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"}

package/moj/components/rich-text-editor/rich-text-editor.bundle.mjs

@@ -0,0 +1,137 @@
+class RichTextEditor {
+  /**
+   * @param {RichTextEditorConfig} options
+   */
+  constructor(options = {}) {
+    const {
+      textarea
+    } = options;
+    if (!textarea || !textarea.parentElement || !(textarea instanceof HTMLTextAreaElement) || !('contentEditable' in document.documentElement)) {
+      return this;
+    }
+    options.toolbar = options.toolbar || {
+      bold: false,
+      italic: false,
+      underline: false,
+      bullets: true,
+      numbers: true
+    };
+    this.textarea = textarea;
+    this.container = this.textarea.parentElement;
+    this.options = options;
+    if (this.container.hasAttribute('data-rich-text-editor-init')) {
+      return this;
+    }
+    this.container.setAttribute('data-rich-text-editor-init', '');
+    this.createToolbar();
+    this.hideDefault();
+    this.configureToolbar();
+    this.keys = {
+      left: 37,
+      right: 39,
+      up: 38,
+      down: 40
+    };
+    this.content.addEventListener('input', this.onEditorInput.bind(this));
+    this.container.querySelector('label').addEventListener('click', this.onLabelClick.bind(this));
+    this.toolbar.addEventListener('keydown', this.onToolbarKeydown.bind(this));
+  }
+  onToolbarKeydown(event) {
+    let focusableButton;
+    switch (event.keyCode) {
+      case this.keys.right:
+      case this.keys.down:
+        {
+          focusableButton = this.buttons.find(button => button.getAttribute('tabindex') === '0');
+          const nextButton = focusableButton.nextElementSibling;
+          if (nextButton instanceof HTMLButtonElement) {
+            nextButton.focus();
+            focusableButton.setAttribute('tabindex', '-1');
+            nextButton.setAttribute('tabindex', '0');
+          }
+          break;
+        }
+      case this.keys.left:
+      case this.keys.up:
+        {
+          focusableButton = this.buttons.find(button => button.getAttribute('tabindex') === '0');
+          const previousButton = focusableButton.previousElementSibling;
+          if (previousButton instanceof HTMLButtonElement) {
+            previousButton.focus();
+            focusableButton.setAttribute('tabindex', '-1');
+            previousButton.setAttribute('tabindex', '0');
+          }
+          break;
+        }
+    }
+  }
+  getToolbarHtml() {
+    let html = '';
+    html += '<div class="moj-rich-text-editor__toolbar" role="toolbar">';
+    if (this.options.toolbar.bold) {
+      html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--bold" type="button" data-command="bold"><span class="govuk-visually-hidden">Bold</span></button>';
+    }
+    if (this.options.toolbar.italic) {
+      html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--italic" type="button" data-command="italic"><span class="govuk-visually-hidden">Italic</span></button>';
+    }
+    if (this.options.toolbar.underline) {
+      html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--underline" type="button" data-command="underline"><span class="govuk-visually-hidden">Underline</span></button>';
+    }
+    if (this.options.toolbar.bullets) {
+      html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--unordered-list" type="button" data-command="insertUnorderedList"><span class="govuk-visually-hidden">Unordered list</span></button>';
+    }
+    if (this.options.toolbar.numbers) {
+      html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--ordered-list" type="button" data-command="insertOrderedList"><span class="govuk-visually-hidden">Ordered list</span></button>';
+    }
+    html += '</div>';
+    return html;
+  }
+  getEnhancedHtml() {
+    return `${this.getToolbarHtml()}<div class="govuk-textarea moj-rich-text-editor__content" contenteditable="true" spellcheck="false"></div>`;
+  }
+  hideDefault() {
+    this.textarea.classList.add('govuk-visually-hidden');
+    this.textarea.setAttribute('aria-hidden', 'true');
+    this.textarea.setAttribute('tabindex', '-1');
+  }
+  createToolbar() {
+    this.toolbar = document.createElement('div');
+    this.toolbar.className = 'moj-rich-text-editor';
+    this.toolbar.innerHTML = this.getEnhancedHtml();
+    this.container.append(this.toolbar);
+    this.content = /** @type {HTMLDivElement} */
+    this.container.querySelector('.moj-rich-text-editor__content');
+    this.content.innerHTML = this.$textarea.value;
+  }
+  configureToolbar() {
+    this.buttons = Array.from(/** @type {NodeListOf<HTMLButtonElement>} */
+    this.container.querySelectorAll('.moj-rich-text-editor__toolbar-button'));
+    this.buttons.forEach((button, index) => {
+      button.setAttribute('tabindex', !index ? '0' : '-1');
+      button.addEventListener('click', this.onButtonClick.bind(this));
+    });
+  }
+  onButtonClick(event) {
+    if (!(event.currentTarget instanceof HTMLElement)) {
+      return;
+    }
+    document.execCommand(event.currentTarget.getAttribute('data-command'), false, undefined);
+  }
+  getContent() {
+    return this.content.innerHTML;
+  }
+  onEditorInput() {
+    this.updateTextarea();
+  }
+  updateTextarea() {
+    document.execCommand('defaultParagraphSeparator', false, 'p');
+    this.textarea.value = this.getContent();
+  }
+  onLabelClick(event) {
+    event.preventDefault();
+    this.content.focus();
+  }
+}
+
+export { RichTextEditor };
+//# sourceMappingURL=rich-text-editor.bundle.mjs.map

package/moj/components/rich-text-editor/rich-text-editor.bundle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-text-editor.bundle.mjs","sources":["../../../../src/moj/components/rich-text-editor/rich-text-editor.mjs"],"sourcesContent":["export class RichTextEditor {\n  /**\n   * @param {RichTextEditorConfig} options\n   */\n  constructor(options = {}) {\n    const { textarea } = options\n\n    if (\n      !textarea ||\n      !textarea.parentElement ||\n      !(textarea instanceof HTMLTextAreaElement) ||\n      !('contentEditable' in document.documentElement)\n    ) {\n      return this\n    }\n\n    options.toolbar = options.toolbar || {\n      bold: false,\n      italic: false,\n      underline: false,\n      bullets: true,\n      numbers: true\n    }\n\n    this.textarea = textarea\n    this.container = this.textarea.parentElement\n    this.options = options\n\n    if (this.container.hasAttribute('data-rich-text-editor-init')) {\n      return this\n    }\n\n    this.container.setAttribute('data-rich-text-editor-init', '')\n\n    this.createToolbar()\n    this.hideDefault()\n    this.configureToolbar()\n\n    this.keys = {\n      left: 37,\n      right: 39,\n      up: 38,\n      down: 40\n    }\n\n    this.content.addEventListener('input', this.onEditorInput.bind(this))\n\n    this.container\n      .querySelector('label')\n      .addEventListener('click', this.onLabelClick.bind(this))\n\n    this.toolbar.addEventListener('keydown', this.onToolbarKeydown.bind(this))\n  }\n\n  onToolbarKeydown(event) {\n    let focusableButton\n    switch (event.keyCode) {\n      case this.keys.right:\n      case this.keys.down: {\n        focusableButton = this.buttons.find(\n          (button) => button.getAttribute('tabindex') === '0'\n        )\n        const nextButton = focusableButton.nextElementSibling\n        if (nextButton instanceof HTMLButtonElement) {\n          nextButton.focus()\n          focusableButton.setAttribute('tabindex', '-1')\n          nextButton.setAttribute('tabindex', '0')\n        }\n        break\n      }\n      case this.keys.left:\n      case this.keys.up: {\n        focusableButton = this.buttons.find(\n          (button) => button.getAttribute('tabindex') === '0'\n        )\n        const previousButton = focusableButton.previousElementSibling\n        if (previousButton instanceof HTMLButtonElement) {\n          previousButton.focus()\n          focusableButton.setAttribute('tabindex', '-1')\n          previousButton.setAttribute('tabindex', '0')\n        }\n        break\n      }\n    }\n  }\n\n  getToolbarHtml() {\n    let html = ''\n\n    html += '<div class=\"moj-rich-text-editor__toolbar\" role=\"toolbar\">'\n\n    if (this.options.toolbar.bold) {\n      html +=\n        '<button class=\"moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--bold\" type=\"button\" data-command=\"bold\"><span class=\"govuk-visually-hidden\">Bold</span></button>'\n    }\n\n    if (this.options.toolbar.italic) {\n      html +=\n        '<button class=\"moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--italic\" type=\"button\" data-command=\"italic\"><span class=\"govuk-visually-hidden\">Italic</span></button>'\n    }\n\n    if (this.options.toolbar.underline) {\n      html +=\n        '<button class=\"moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--underline\" type=\"button\" data-command=\"underline\"><span class=\"govuk-visually-hidden\">Underline</span></button>'\n    }\n\n    if (this.options.toolbar.bullets) {\n      html +=\n        '<button class=\"moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--unordered-list\" type=\"button\" data-command=\"insertUnorderedList\"><span class=\"govuk-visually-hidden\">Unordered list</span></button>'\n    }\n\n    if (this.options.toolbar.numbers) {\n      html +=\n        '<button class=\"moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--ordered-list\" type=\"button\" data-command=\"insertOrderedList\"><span class=\"govuk-visually-hidden\">Ordered list</span></button>'\n    }\n\n    html += '</div>'\n    return html\n  }\n\n  getEnhancedHtml() {\n    return `${this.getToolbarHtml()}<div class=\"govuk-textarea moj-rich-text-editor__content\" contenteditable=\"true\" spellcheck=\"false\"></div>`\n  }\n\n  hideDefault() {\n    this.textarea.classList.add('govuk-visually-hidden')\n    this.textarea.setAttribute('aria-hidden', 'true')\n    this.textarea.setAttribute('tabindex', '-1')\n  }\n\n  createToolbar() {\n    this.toolbar = document.createElement('div')\n    this.toolbar.className = 'moj-rich-text-editor'\n    this.toolbar.innerHTML = this.getEnhancedHtml()\n    this.container.append(this.toolbar)\n\n    this.content = /** @type {HTMLDivElement} */ (\n      this.container.querySelector('.moj-rich-text-editor__content')\n    )\n\n    this.content.innerHTML = this.$textarea.value\n  }\n\n  configureToolbar() {\n    this.buttons = Array.from(\n      /** @type {NodeListOf<HTMLButtonElement>} */\n      (this.container.querySelectorAll('.moj-rich-text-editor__toolbar-button'))\n    )\n\n    this.buttons.forEach((button, index) => {\n      button.setAttribute('tabindex', !index ? '0' : '-1')\n      button.addEventListener('click', this.onButtonClick.bind(this))\n    })\n  }\n\n  onButtonClick(event) {\n    if (!(event.currentTarget instanceof HTMLElement)) {\n      return\n    }\n\n    document.execCommand(\n      event.currentTarget.getAttribute('data-command'),\n      false,\n      undefined\n    )\n  }\n\n  getContent() {\n    return this.content.innerHTML\n  }\n\n  onEditorInput() {\n    this.updateTextarea()\n  }\n\n  updateTextarea() {\n    document.execCommand('defaultParagraphSeparator', false, 'p')\n    this.textarea.value = this.getContent()\n  }\n\n  onLabelClick(event) {\n    event.preventDefault()\n    this.content.focus()\n  }\n}\n"],"names":["RichTextEditor","constructor","options","textarea","parentElement","HTMLTextAreaElement","document","documentElement","toolbar","bold","italic","underline","bullets","numbers","container","hasAttribute","setAttribute","createToolbar","hideDefault","configureToolbar","keys","left","right","up","down","content","addEventListener","onEditorInput","bind","querySelector","onLabelClick","onToolbarKeydown","event","focusableButton","keyCode","buttons","find","button","getAttribute","nextButton","nextElementSibling","HTMLButtonElement","focus","previousButton","previousElementSibling","getToolbarHtml","html","getEnhancedHtml","classList","add","createElement","className","innerHTML","append","$textarea","value","Array","from","querySelectorAll","forEach","index","onButtonClick","currentTarget","HTMLElement","execCommand","undefined","getContent","updateTextarea","preventDefault"],"mappings":"AAAO,MAAMA,cAAc,CAAC;AAC1B;AACF;AACA;AACEC,EAAAA,WAAWA,CAACC,OAAO,GAAG,EAAE,EAAE;IACxB,MAAM;AAAEC,MAAAA;AAAS,KAAC,GAAGD,OAAO;IAE5B,IACE,CAACC,QAAQ,IACT,CAACA,QAAQ,CAACC,aAAa,IACvB,EAAED,QAAQ,YAAYE,mBAAmB,CAAC,IAC1C,EAAE,iBAAiB,IAAIC,QAAQ,CAACC,eAAe,CAAC,EAChD;AACA,MAAA,OAAO,IAAI;AACb;AAEAL,IAAAA,OAAO,CAACM,OAAO,GAAGN,OAAO,CAACM,OAAO,IAAI;AACnCC,MAAAA,IAAI,EAAE,KAAK;AACXC,MAAAA,MAAM,EAAE,KAAK;AACbC,MAAAA,SAAS,EAAE,KAAK;AAChBC,MAAAA,OAAO,EAAE,IAAI;AACbC,MAAAA,OAAO,EAAE;KACV;IAED,IAAI,CAACV,QAAQ,GAAGA,QAAQ;AACxB,IAAA,IAAI,CAACW,SAAS,GAAG,IAAI,CAACX,QAAQ,CAACC,aAAa;IAC5C,IAAI,CAACF,OAAO,GAAGA,OAAO;IAEtB,IAAI,IAAI,CAACY,SAAS,CAACC,YAAY,CAAC,4BAA4B,CAAC,EAAE;AAC7D,MAAA,OAAO,IAAI;AACb;IAEA,IAAI,CAACD,SAAS,CAACE,YAAY,CAAC,4BAA4B,EAAE,EAAE,CAAC;IAE7D,IAAI,CAACC,aAAa,EAAE;IACpB,IAAI,CAACC,WAAW,EAAE;IAClB,IAAI,CAACC,gBAAgB,EAAE;IAEvB,IAAI,CAACC,IAAI,GAAG;AACVC,MAAAA,IAAI,EAAE,EAAE;AACRC,MAAAA,KAAK,EAAE,EAAE;AACTC,MAAAA,EAAE,EAAE,EAAE;AACNC,MAAAA,IAAI,EAAE;KACP;AAED,IAAA,IAAI,CAACC,OAAO,CAACC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAACC,aAAa,CAACC,IAAI,CAAC,IAAI,CAAC,CAAC;IAErE,IAAI,CAACd,SAAS,CACXe,aAAa,CAAC,OAAO,CAAC,CACtBH,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAACI,YAAY,CAACF,IAAI,CAAC,IAAI,CAAC,CAAC;AAE1D,IAAA,IAAI,CAACpB,OAAO,CAACkB,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAACK,gBAAgB,CAACH,IAAI,CAAC,IAAI,CAAC,CAAC;AAC5E;EAEAG,gBAAgBA,CAACC,KAAK,EAAE;AACtB,IAAA,IAAIC,eAAe;IACnB,QAAQD,KAAK,CAACE,OAAO;AACnB,MAAA,KAAK,IAAI,CAACd,IAAI,CAACE,KAAK;AACpB,MAAA,KAAK,IAAI,CAACF,IAAI,CAACI,IAAI;AAAE,QAAA;AACnBS,UAAAA,eAAe,GAAG,IAAI,CAACE,OAAO,CAACC,IAAI,CAChCC,MAAM,IAAKA,MAAM,CAACC,YAAY,CAAC,UAAU,CAAC,KAAK,GAClD,CAAC;AACD,UAAA,MAAMC,UAAU,GAAGN,eAAe,CAACO,kBAAkB;UACrD,IAAID,UAAU,YAAYE,iBAAiB,EAAE;YAC3CF,UAAU,CAACG,KAAK,EAAE;AAClBT,YAAAA,eAAe,CAACjB,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC;AAC9CuB,YAAAA,UAAU,CAACvB,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC;AAC1C;AACA,UAAA;AACF;AACA,MAAA,KAAK,IAAI,CAACI,IAAI,CAACC,IAAI;AACnB,MAAA,KAAK,IAAI,CAACD,IAAI,CAACG,EAAE;AAAE,QAAA;AACjBU,UAAAA,eAAe,GAAG,IAAI,CAACE,OAAO,CAACC,IAAI,CAChCC,MAAM,IAAKA,MAAM,CAACC,YAAY,CAAC,UAAU,CAAC,KAAK,GAClD,CAAC;AACD,UAAA,MAAMK,cAAc,GAAGV,eAAe,CAACW,sBAAsB;UAC7D,IAAID,cAAc,YAAYF,iBAAiB,EAAE;YAC/CE,cAAc,CAACD,KAAK,EAAE;AACtBT,YAAAA,eAAe,CAACjB,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC;AAC9C2B,YAAAA,cAAc,CAAC3B,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC;AAC9C;AACA,UAAA;AACF;AACF;AACF;AAEA6B,EAAAA,cAAcA,GAAG;IACf,IAAIC,IAAI,GAAG,EAAE;AAEbA,IAAAA,IAAI,IAAI,4DAA4D;AAEpE,IAAA,IAAI,IAAI,CAAC5C,OAAO,CAACM,OAAO,CAACC,IAAI,EAAE;AAC7BqC,MAAAA,IAAI,IACF,4LAA4L;AAChM;AAEA,IAAA,IAAI,IAAI,CAAC5C,OAAO,CAACM,OAAO,CAACE,MAAM,EAAE;AAC/BoC,MAAAA,IAAI,IACF,kMAAkM;AACtM;AAEA,IAAA,IAAI,IAAI,CAAC5C,OAAO,CAACM,OAAO,CAACG,SAAS,EAAE;AAClCmC,MAAAA,IAAI,IACF,2MAA2M;AAC/M;AAEA,IAAA,IAAI,IAAI,CAAC5C,OAAO,CAACM,OAAO,CAACI,OAAO,EAAE;AAChCkC,MAAAA,IAAI,IACF,+NAA+N;AACnO;AAEA,IAAA,IAAI,IAAI,CAAC5C,OAAO,CAACM,OAAO,CAACK,OAAO,EAAE;AAChCiC,MAAAA,IAAI,IACF,yNAAyN;AAC7N;AAEAA,IAAAA,IAAI,IAAI,QAAQ;AAChB,IAAA,OAAOA,IAAI;AACb;AAEAC,EAAAA,eAAeA,GAAG;AAChB,IAAA,OAAO,GAAG,IAAI,CAACF,cAAc,EAAE,CAA4G,0GAAA,CAAA;AAC7I;AAEA3B,EAAAA,WAAWA,GAAG;IACZ,IAAI,CAACf,QAAQ,CAAC6C,SAAS,CAACC,GAAG,CAAC,uBAAuB,CAAC;IACpD,IAAI,CAAC9C,QAAQ,CAACa,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;IACjD,IAAI,CAACb,QAAQ,CAACa,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC;AAC9C;AAEAC,EAAAA,aAAaA,GAAG;IACd,IAAI,CAACT,OAAO,GAAGF,QAAQ,CAAC4C,aAAa,CAAC,KAAK,CAAC;AAC5C,IAAA,IAAI,CAAC1C,OAAO,CAAC2C,SAAS,GAAG,sBAAsB;IAC/C,IAAI,CAAC3C,OAAO,CAAC4C,SAAS,GAAG,IAAI,CAACL,eAAe,EAAE;IAC/C,IAAI,CAACjC,SAAS,CAACuC,MAAM,CAAC,IAAI,CAAC7C,OAAO,CAAC;IAEnC,IAAI,CAACiB,OAAO;AACV,IAAA,IAAI,CAACX,SAAS,CAACe,aAAa,CAAC,gCAAgC,CAC9D;IAED,IAAI,CAACJ,OAAO,CAAC2B,SAAS,GAAG,IAAI,CAACE,SAAS,CAACC,KAAK;AAC/C;AAEApC,EAAAA,gBAAgBA,GAAG;AACjB,IAAA,IAAI,CAACgB,OAAO,GAAGqB,KAAK,CAACC,IAAI;AAEtB,IAAA,IAAI,CAAC3C,SAAS,CAAC4C,gBAAgB,CAAC,uCAAuC,CAC1E,CAAC;IAED,IAAI,CAACvB,OAAO,CAACwB,OAAO,CAAC,CAACtB,MAAM,EAAEuB,KAAK,KAAK;MACtCvB,MAAM,CAACrB,YAAY,CAAC,UAAU,EAAE,CAAC4C,KAAK,GAAG,GAAG,GAAG,IAAI,CAAC;AACpDvB,MAAAA,MAAM,CAACX,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAACmC,aAAa,CAACjC,IAAI,CAAC,IAAI,CAAC,CAAC;AACjE,KAAC,CAAC;AACJ;EAEAiC,aAAaA,CAAC7B,KAAK,EAAE;AACnB,IAAA,IAAI,EAAEA,KAAK,CAAC8B,aAAa,YAAYC,WAAW,CAAC,EAAE;AACjD,MAAA;AACF;AAEAzD,IAAAA,QAAQ,CAAC0D,WAAW,CAClBhC,KAAK,CAAC8B,aAAa,CAACxB,YAAY,CAAC,cAAc,CAAC,EAChD,KAAK,EACL2B,SACF,CAAC;AACH;AAEAC,EAAAA,UAAUA,GAAG;AACX,IAAA,OAAO,IAAI,CAACzC,OAAO,CAAC2B,SAAS;AAC/B;AAEAzB,EAAAA,aAAaA,GAAG;IACd,IAAI,CAACwC,cAAc,EAAE;AACvB;AAEAA,EAAAA,cAAcA,GAAG;IACf7D,QAAQ,CAAC0D,WAAW,CAAC,2BAA2B,EAAE,KAAK,EAAE,GAAG,CAAC;IAC7D,IAAI,CAAC7D,QAAQ,CAACoD,KAAK,GAAG,IAAI,CAACW,UAAU,EAAE;AACzC;EAEApC,YAAYA,CAACE,KAAK,EAAE;IAClBA,KAAK,CAACoC,cAAc,EAAE;AACtB,IAAA,IAAI,CAAC3C,OAAO,CAACiB,KAAK,EAAE;AACtB;AACF;;;;"}