@ministryofjustice/frontend 5.0.0 → 5.1.0

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

@@ -1 +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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"}
+{"version":3,"file":"rich-text-editor.bundle.js","sources":["../../../../src/moj/components/rich-text-editor/rich-text-editor.mjs"],"sourcesContent":["import { ConfigurableComponent } from 'govuk-frontend'\n\n/**\n * @augments {ConfigurableComponent<RichTextEditorConfig>}\n */\nexport class RichTextEditor extends ConfigurableComponent {\n  /**\n   * @param {Element | null} $root - HTML element to use for rich text editor\n   * @param {RichTextEditorConfig} config\n   */\n  constructor($root, config = {}) {\n    super($root, config)\n\n    if (!RichTextEditor.isSupported()) {\n      return this\n    }\n\n    const $textarea = this.$root.querySelector('.govuk-textarea')\n    if (!$textarea || !($textarea instanceof HTMLTextAreaElement)) {\n      return this\n    }\n\n    this.$textarea = $textarea\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.$root\n      .querySelector('label')\n      .addEventListener('click', this.onLabelClick.bind(this))\n\n    this.$toolbar.addEventListener('keydown', this.onToolbarKeydown.bind(this))\n  }\n\n  /**\n   * @param {KeyboardEvent} event - Click event\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\n        if ($focusableButton) {\n          const $nextButton = $focusableButton.nextElementSibling\n\n          if ($nextButton && $nextButton instanceof HTMLButtonElement) {\n            $nextButton.focus()\n            $focusableButton.setAttribute('tabindex', '-1')\n            $nextButton.setAttribute('tabindex', '0')\n          }\n        }\n\n        break\n      }\n\n      case this.keys.left:\n      case this.keys.up: {\n        $focusableButton = this.$buttons.find(\n          (button) => button.getAttribute('tabindex') === '0'\n        )\n\n        if ($focusableButton) {\n          const $previousButton = $focusableButton.previousElementSibling\n\n          if ($previousButton && $previousButton instanceof HTMLButtonElement) {\n            $previousButton.focus()\n            $focusableButton.setAttribute('tabindex', '-1')\n            $previousButton.setAttribute('tabindex', '0')\n          }\n        }\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.config.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.config.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.config.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.config.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.config.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.$root.append(this.$toolbar)\n\n    this.$content = /** @type {HTMLElement} */ (\n      this.$root.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.$root.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  /**\n   * @param {MouseEvent} event - Click event\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  /**\n   * @param {MouseEvent} event - Click event\n   */\n  onLabelClick(event) {\n    event.preventDefault()\n    this.$content.focus()\n  }\n\n  static isSupported() {\n    return 'contentEditable' in document.documentElement\n  }\n\n  /**\n   * Name for the component used when initialising using data-module attributes.\n   */\n  static moduleName = 'moj-rich-text-editor'\n\n  /**\n   * Rich text editor config\n   *\n   * @type {RichTextEditorConfig}\n   */\n  static defaults = Object.freeze({\n    toolbar: {\n      bold: false,\n      italic: false,\n      underline: false,\n      bullets: true,\n      numbers: true\n    }\n  })\n\n  /**\n   * Rich text editor config schema\n   *\n   * @satisfies {Schema<RichTextEditorConfig>}\n   */\n  static schema = Object.freeze(\n    /** @type {const} */ ({\n      properties: {\n        toolbar: { type: 'object' }\n      }\n    })\n  )\n}\n\n/**\n * Rich text editor config\n *\n * @typedef {object} RichTextEditorConfig\n * @property {RichTextEditorToolbar} [toolbar] - Toolbar options\n */\n\n/**\n * Rich text editor toolbar options\n *\n * @typedef {object} RichTextEditorToolbar\n * @property {boolean} [bold] - Show the bold button\n * @property {boolean} [italic] - Show the italic button\n * @property {boolean} [underline] - Show the underline button\n * @property {boolean} [bullets] - Show the bullets button\n * @property {boolean} [numbers] - Show the numbers button\n */\n\n/**\n * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'\n */\n"],"names":["RichTextEditor","ConfigurableComponent","constructor","$root","config","isSupported","$textarea","querySelector","HTMLTextAreaElement","createToolbar","hideDefault","configureToolbar","keys","left","right","up","down","$content","addEventListener","onEditorInput","bind","onLabelClick","$toolbar","onToolbarKeydown","event","$focusableButton","keyCode","$buttons","find","button","getAttribute","$nextButton","nextElementSibling","HTMLButtonElement","focus","setAttribute","$previousButton","previousElementSibling","getToolbarHtml","html","toolbar","bold","italic","underline","bullets","numbers","getEnhancedHtml","classList","add","document","createElement","className","innerHTML","append","value","Array","from","querySelectorAll","forEach","$button","index","onButtonClick","currentTarget","HTMLElement","execCommand","undefined","getContent","updateTextarea","preventDefault","documentElement","moduleName","defaults","Object","freeze","schema","properties","type"],"mappings":"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"}

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

@@ -1,28 +1,265 @@
-class RichTextEditor {
+function isInitialised($root, moduleName) {
+  return $root instanceof HTMLElement && $root.hasAttribute(`data-${moduleName}-init`);
+}
+
+/**
+ * Checks if GOV.UK Frontend is supported on this page
+ *
+ * Some browsers will load and run our JavaScript but GOV.UK Frontend
+ * won't be supported.
+ *
+ * @param {HTMLElement | null} [$scope] - (internal) `<body>` HTML element checked for browser support
+ * @returns {boolean} Whether GOV.UK Frontend is supported on this page
+ */
+function isSupported($scope = document.body) {
+  if (!$scope) {
+    return false;
+  }
+  return $scope.classList.contains('govuk-frontend-supported');
+}
+function isArray(option) {
+  return Array.isArray(option);
+}
+function isObject(option) {
+  return !!option && typeof option === 'object' && !isArray(option);
+}
+function formatErrorMessage(Component, message) {
+  return `${Component.moduleName}: ${message}`;
+}
+
+class GOVUKFrontendError extends Error {
+  constructor(...args) {
+    super(...args);
+    this.name = 'GOVUKFrontendError';
+  }
+}
+class SupportError extends GOVUKFrontendError {
+  /**
+   * Checks if GOV.UK Frontend is supported on this page
+   *
+   * @param {HTMLElement | null} [$scope] - HTML element `<body>` checked for browser support
+   */
+  constructor($scope = document.body) {
+    const supportMessage = 'noModule' in HTMLScriptElement.prototype ? 'GOV.UK Frontend initialised without `<body class="govuk-frontend-supported">` from template `<script>` snippet' : 'GOV.UK Frontend is not supported in this browser';
+    super($scope ? supportMessage : 'GOV.UK Frontend initialised without `<script type="module">`');
+    this.name = 'SupportError';
+  }
+}
+class ConfigError extends GOVUKFrontendError {
+  constructor(...args) {
+    super(...args);
+    this.name = 'ConfigError';
+  }
+}
+class ElementError extends GOVUKFrontendError {
+  constructor(messageOrOptions) {
+    let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';
+    if (typeof messageOrOptions === 'object') {
+      const {
+        component,
+        identifier,
+        element,
+        expectedType
+      } = messageOrOptions;
+      message = identifier;
+      message += element ? ` is not of type ${expectedType != null ? expectedType : 'HTMLElement'}` : ' not found';
+      message = formatErrorMessage(component, message);
+    }
+    super(message);
+    this.name = 'ElementError';
+  }
+}
+class InitError extends GOVUKFrontendError {
+  constructor(componentOrMessage) {
+    const message = typeof componentOrMessage === 'string' ? componentOrMessage : formatErrorMessage(componentOrMessage, `Root element (\`$root\`) already initialised`);
+    super(message);
+    this.name = 'InitError';
+  }
+}
+
+class Component {
+  /**
+   * Returns the root element of the component
+   *
+   * @protected
+   * @returns {RootElementType} - the root element of component
+   */
+  get $root() {
+    return this._$root;
+  }
+  constructor($root) {
+    this._$root = void 0;
+    const childConstructor = this.constructor;
+    if (typeof childConstructor.moduleName !== 'string') {
+      throw new InitError(`\`moduleName\` not defined in component`);
+    }
+    if (!($root instanceof childConstructor.elementType)) {
+      throw new ElementError({
+        element: $root,
+        component: childConstructor,
+        identifier: 'Root element (`$root`)',
+        expectedType: childConstructor.elementType.name
+      });
+    } else {
+      this._$root = $root;
+    }
+    childConstructor.checkSupport();
+    this.checkInitialised();
+    const moduleName = childConstructor.moduleName;
+    this.$root.setAttribute(`data-${moduleName}-init`, '');
+  }
+  checkInitialised() {
+    const constructor = this.constructor;
+    const moduleName = constructor.moduleName;
+    if (moduleName && isInitialised(this.$root, moduleName)) {
+      throw new InitError(constructor);
+    }
+  }
+  static checkSupport() {
+    if (!isSupported()) {
+      throw new SupportError();
+    }
+  }
+}
+
+/**
+ * @typedef ChildClass
+ * @property {string} moduleName - The module name that'll be looked for in the DOM when initialising the component
+ */
+
+/**
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
+ */
+Component.elementType = HTMLElement;
+
+const configOverride = Symbol.for('configOverride');
+class ConfigurableComponent extends Component {
+  [configOverride](param) {
+    return {};
+  }
+
+  /**
+   * Returns the root element of the component
+   *
+   * @protected
+   * @returns {ConfigurationType} - the root element of component
+   */
+  get config() {
+    return this._config;
+  }
+  constructor($root, config) {
+    super($root);
+    this._config = void 0;
+    const childConstructor = this.constructor;
+    if (!isObject(childConstructor.defaults)) {
+      throw new ConfigError(formatErrorMessage(childConstructor, 'Config passed as parameter into constructor but no defaults defined'));
+    }
+    const datasetConfig = normaliseDataset(childConstructor, this._$root.dataset);
+    this._config = mergeConfigs(childConstructor.defaults, config != null ? config : {}, this[configOverride](datasetConfig), datasetConfig);
+  }
+}
+function normaliseString(value, property) {
+  const trimmedValue = value ? value.trim() : '';
+  let output;
+  let outputType = property == null ? void 0 : property.type;
+  if (!outputType) {
+    if (['true', 'false'].includes(trimmedValue)) {
+      outputType = 'boolean';
+    }
+    if (trimmedValue.length > 0 && isFinite(Number(trimmedValue))) {
+      outputType = 'number';
+    }
+  }
+  switch (outputType) {
+    case 'boolean':
+      output = trimmedValue === 'true';
+      break;
+    case 'number':
+      output = Number(trimmedValue);
+      break;
+    default:
+      output = value;
+  }
+  return output;
+}
+function normaliseDataset(Component, dataset) {
+  if (!isObject(Component.schema)) {
+    throw new ConfigError(formatErrorMessage(Component, 'Config passed as parameter into constructor but no schema defined'));
+  }
+  const out = {};
+  const entries = Object.entries(Component.schema.properties);
+  for (const entry of entries) {
+    const [namespace, property] = entry;
+    const field = namespace.toString();
+    if (field in dataset) {
+      out[field] = normaliseString(dataset[field], property);
+    }
+    if ((property == null ? void 0 : property.type) === 'object') {
+      out[field] = extractConfigByNamespace(Component.schema, dataset, namespace);
+    }
+  }
+  return out;
+}
+function mergeConfigs(...configObjects) {
+  const formattedConfigObject = {};
+  for (const configObject of configObjects) {
+    for (const key of Object.keys(configObject)) {
+      const option = formattedConfigObject[key];
+      const override = configObject[key];
+      if (isObject(option) && isObject(override)) {
+        formattedConfigObject[key] = mergeConfigs(option, override);
+      } else {
+        formattedConfigObject[key] = override;
+      }
+    }
+  }
+  return formattedConfigObject;
+}
+function extractConfigByNamespace(schema, dataset, namespace) {
+  const property = schema.properties[namespace];
+  if ((property == null ? void 0 : property.type) !== 'object') {
+    return;
+  }
+  const newObject = {
+    [namespace]: {}
+  };
+  for (const [key, value] of Object.entries(dataset)) {
+    let current = newObject;
+    const keyParts = key.split('.');
+    for (const [index, name] of keyParts.entries()) {
+      if (isObject(current)) {
+        if (index < keyParts.length - 1) {
+          if (!isObject(current[name])) {
+            current[name] = {};
+          }
+          current = current[name];
+        } else if (key !== namespace) {
+          current[name] = normaliseString(value);
+        }
+      }
+    }
+  }
+  return newObject[namespace];
+}
+
+/**
+ * @augments {ConfigurableComponent<RichTextEditorConfig>}
+ */
+class RichTextEditor extends ConfigurableComponent {
   /**
-   * @param {RichTextEditorConfig} options
+   * @param {Element | null} $root - HTML element to use for rich text editor
+   * @param {RichTextEditorConfig} config
    */
-  constructor(options = {}) {
-    const {
-      textarea
-    } = options;
-    if (!textarea || !textarea.parentElement || !(textarea instanceof HTMLTextAreaElement) || !('contentEditable' in document.documentElement)) {
+  constructor($root, config = {}) {
+    super($root, config);
+    if (!RichTextEditor.isSupported()) {
       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')) {
+    const $textarea = this.$root.querySelector('.govuk-textarea');
+    if (!$textarea || !($textarea instanceof HTMLTextAreaElement)) {
       return this;
     }
-    this.container.setAttribute('data-rich-text-editor-init', '');
+    this.$textarea = $textarea;
     this.createToolbar();
     this.hideDefault();
     this.configureToolbar();
@@ -32,34 +269,42 @@ class RichTextEditor {
       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));
+    this.$content.addEventListener('input', this.onEditorInput.bind(this));
+    this.$root.querySelector('label').addEventListener('click', this.onLabelClick.bind(this));
+    this.$toolbar.addEventListener('keydown', this.onToolbarKeydown.bind(this));
   }
+
+  /**
+   * @param {KeyboardEvent} event - Click event
+   */
   onToolbarKeydown(event) {
-    let focusableButton;
+    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');
+          $focusableButton = this.$buttons.find(button => button.getAttribute('tabindex') === '0');
+          if ($focusableButton) {
+            const $nextButton = $focusableButton.nextElementSibling;
+            if ($nextButton && $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');
+          $focusableButton = this.$buttons.find(button => button.getAttribute('tabindex') === '0');
+          if ($focusableButton) {
+            const $previousButton = $focusableButton.previousElementSibling;
+            if ($previousButton && $previousButton instanceof HTMLButtonElement) {
+              $previousButton.focus();
+              $focusableButton.setAttribute('tabindex', '-1');
+              $previousButton.setAttribute('tabindex', '0');
+            }
           }
           break;
         }
@@ -68,19 +313,19 @@ class RichTextEditor {
   getToolbarHtml() {
     let html = '';
     html += '<div class="moj-rich-text-editor__toolbar" role="toolbar">';
-    if (this.options.toolbar.bold) {
+    if (this.config.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) {
+    if (this.config.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) {
+    if (this.config.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) {
+    if (this.config.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) {
+    if (this.config.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>';
@@ -90,27 +335,31 @@ class RichTextEditor {
     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');
+    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;
+    this.$toolbar = document.createElement('div');
+    this.$toolbar.className = 'moj-rich-text-editor';
+    this.$toolbar.innerHTML = this.getEnhancedHtml();
+    this.$root.append(this.$toolbar);
+    this.$content = /** @type {HTMLElement} */
+    this.$root.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));
+    this.$buttons = Array.from(/** @type {NodeListOf<HTMLButtonElement>} */
+    this.$root.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));
     });
   }
+
+  /**
+   * @param {MouseEvent} event - Click event
+   */
   onButtonClick(event) {
     if (!(event.currentTarget instanceof HTMLElement)) {
       return;
@@ -118,20 +367,80 @@ class RichTextEditor {
     document.execCommand(event.currentTarget.getAttribute('data-command'), false, undefined);
   }
   getContent() {
-    return this.content.innerHTML;
+    return this.$content.innerHTML;
   }
   onEditorInput() {
     this.updateTextarea();
   }
   updateTextarea() {
     document.execCommand('defaultParagraphSeparator', false, 'p');
-    this.textarea.value = this.getContent();
+    this.$textarea.value = this.getContent();
   }
+
+  /**
+   * @param {MouseEvent} event - Click event
+   */
   onLabelClick(event) {
     event.preventDefault();
-    this.content.focus();
+    this.$content.focus();
   }
+  static isSupported() {
+    return 'contentEditable' in document.documentElement;
+  }
+
+  /**
+   * Name for the component used when initialising using data-module attributes.
+   */
 }
 
+/**
+ * Rich text editor config
+ *
+ * @typedef {object} RichTextEditorConfig
+ * @property {RichTextEditorToolbar} [toolbar] - Toolbar options
+ */
+
+/**
+ * Rich text editor toolbar options
+ *
+ * @typedef {object} RichTextEditorToolbar
+ * @property {boolean} [bold] - Show the bold button
+ * @property {boolean} [italic] - Show the italic button
+ * @property {boolean} [underline] - Show the underline button
+ * @property {boolean} [bullets] - Show the bullets button
+ * @property {boolean} [numbers] - Show the numbers button
+ */
+
+/**
+ * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'
+ */
+RichTextEditor.moduleName = 'moj-rich-text-editor';
+/**
+ * Rich text editor config
+ *
+ * @type {RichTextEditorConfig}
+ */
+RichTextEditor.defaults = Object.freeze({
+  toolbar: {
+    bold: false,
+    italic: false,
+    underline: false,
+    bullets: true,
+    numbers: true
+  }
+});
+/**
+ * Rich text editor config schema
+ *
+ * @satisfies {Schema<RichTextEditorConfig>}
+ */
+RichTextEditor.schema = Object.freeze(/** @type {const} */{
+  properties: {
+    toolbar: {
+      type: 'object'
+    }
+  }
+});
+
 export { RichTextEditor };
 //# sourceMappingURL=rich-text-editor.bundle.mjs.map