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

Code before:
              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).
                     */
                    if (componentIsNewlyCreated) {
                      // Actually create the widget, if we have not already.
                      editor.widgets.finalizeCreation(container);
                    }

                    if (isInline) {
                      var range = editor.createRange();
                      var widgetContainer = that.element.getParent();
                      range.moveToPosition(
                        widgetContainer,
                        CKEDITOR.POSITION_AFTER_END
                      );
                      editor.getSelection().selectRanges([range]);

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

Code after:
        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,
                  function (
                    customizationArgsDict: Partial<CustomizationArgsForRteType>
                  ) {
                    (
                      that.data as Record<
                        string,
                        string | number | boolean | object
                      >
                    ).isCopied = false;
                    for (var arg in customizationArgsDict) {
                      if (customizationArgsDict.hasOwnProperty(arg)) {
                        that.setData(
                          arg,