Repository: oppia/oppia
File: core/templates/components/ck-editor-helpers/ck-editor-4-widgets.initializer.ts (TypeScript)

Code before:
                    index
                      ? item.charAt(0).toUpperCase() +
                        item.slice(1).toLowerCase()
                      : item.toLowerCase()
                  );

                  /**
                   * If the component has not been initialized before with data,
                   * then set the default value or highlighted value as the
                   * component's data.
                   */
                  const selection = that.editor
                    .getSelection()
                    .getSelectedText();
                  if (!that.data[spec.name]) {
                    if (
                      spec.default_value_obtainable_from_highlight &&
                      selection
                    ) {
                      that.setData(spec.name, selection);
                    }
                  }

                  capital.join('');
                  const customEl = that.element.getChild(0).$;
                  (customEl as Record<string, unknown>)[
                    capital.join('') + 'WithValue'
                  ] = htmlEscaperService.objToEscapedJson(
                    that.data[spec.name] !== undefined
                      ? that.data[spec.name]
                      : ''
                  );
                  const childElement = that.element.getChild(
                    0
                  ) as CKEDITOR.dom.element;
                  childElement.setAttribute(
                    spec.name + '-with-value',
                    htmlEscaperService.objToEscapedJson(
                      that.data[spec.name] !== undefined
                        ? that.data[spec.name]
                        : ''
                    )
                  );
                });
              },
              init: function (this: WidgetDefinition) {
                editor.fire('lockSnapshot', {
                  dontUpdate: true,
                });
                var that = this;
                (

Review comment (suggestion):
We need to determine the exact type of this, using unknown or undefined is not the optimal solution.

Code after:
                      } else {
                        editor.loadSnapshot(that.initialSnapshot);
                        editor.fire('change');
                      }
                    }
                  }
                );
              },
              /**
               * This is how the widget will be represented in the outputs
               * source, so it is called when we call editor.getData().
               */
              downcast: function (element) {
                // Clear the angular rendering content, which we don't
                // want in the output.
                (element.children[0] as CKEDITOR.htmlParser.element).setHtml(
                  ''
                );
                // Return just the rich text component, without its wrapper.
                return element.children[0];
              },
              /**
               * This is how a widget is recognized by CKEditor, for example
               * when we first load data in. Returns a boolean,
               * true iff "element" is an instance of this widget.
               */
              upcast: function (element) {
                return (
                  element.name !== 'p' &&
                  element.children.length > 0 &&
                  (element.children[0] as CKEDITOR.htmlParser.element).name ===
                    tagName
                );
              },
              data: function (this: WidgetDefinition) {
                var that = this;
                // Set attributes of component according to data values.
                customizationArgSpecs.forEach(function (spec) {
                  let arr = spec.name.split('_');
                  let capital = arr.map((item, index) =>
                    // eslint-disable-next-line max-len
                    index
                      ? item.charAt(0).toUpperCase() +
                        item.slice(1).toLowerCase()
                      : item.toLowerCase()
                  );

                  /**
                   * If the component has not been initialized before with data,
                   * then set the default value or highlighted value as the
                   * component's data.