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

Code before:
            tagName +
            '>' +
            '<div class="component-overlay"></div>' +
            '</div>';
        }
        CKEDITOR.plugins.add(ckName, {
          init: function (editor) {
            // Create the widget itself.
            editor.widgets.add(ckName, {
              button: componentDefn.tooltip,
              inline: isInline,
              template: componentTemplate,
              draggable: false,
              edit: function (this: WidgetDefinition) {
                // The following check allows the editing of the RTE components
                // only in editor pages.
                if (!pageContextService.canAddOrEditComponents()) {
                  return;
                }
                editor.fire('lockSnapshot', {
                  dontUpdate: true,
                });
                // Save this for creating the widget later.
                var container = this.wrapper.getParent(true);
                var that = this;
                var customizationArgs: Record<string, unknown> = {};
                customizationArgSpecs.forEach(function (spec) {
                  customizationArgs[spec.name] =
                    that.data[spec.name] || spec.default_value;
                });

                const componentIsNewlyCreated: boolean = !that.isReady();

                rteHelperService.openCustomizationModal(
                  componentIsNewlyCreated,
                  componentId,
                  customizationArgSpecs,
                  customizationArgs,
                  function (customizationArgsDict: Record<string, unknown>) {
                    that.data.isCopied = false;
                    for (var arg in customizationArgsDict) {
                      if (customizationArgsDict.hasOwnProperty(arg)) {
                        that.setData(arg, customizationArgsDict[arg]);
                      }
                    }
                    /**
                     * This checks whether the widget has already been inited
                     * and set up before (if we are editing a widget that
                     * has already been inserted into the RTE, we do not
                     * need to finalizeCreation again).
                     */

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

Code after:
          var componentTemplate =
            '<div class="oppia-rte-component-container"' +
            ' type="' +
            tagName +
            '">' +
            '<' +
            tagName +
            '></' +
            tagName +
            '>' +
            '<div class="component-overlay"></div>' +
            '</div>';
        }
        CKEDITOR.plugins.add(ckName, {
          init: function (editor) {
            // Create the widget itself.
            editor.widgets.add(ckName, {
              button: componentDefn.tooltip,
              inline: isInline,
              template: componentTemplate,
              draggable: false,
              edit: function (this: WidgetDefinition) {
                // The following check allows the editing of the RTE components
                // only in editor pages.
                if (!pageContextService.canAddOrEditComponents()) {
                  return;
                }
                editor.fire('lockSnapshot', {
                  dontUpdate: true,
                });
                // Save this for creating the widget later.
                var container = this.wrapper.getParent(true);
                var that = this;
                var customizationArgs: Partial<CustomizationArgsForRteType> =
                  {};
                customizationArgSpecs.forEach(function (spec) {
                  (
                    customizationArgs as Record<
                      string,
                      string | number | boolean | object
                    >
                  )[spec.name] = that.data[spec.name] || spec.default_value;
                });

                const componentIsNewlyCreated: boolean = !that.isReady();

                rteHelperService.openCustomizationModal(
                  componentIsNewlyCreated,
                  componentId,
                  customizationArgSpecs,
                  customizationArgs,