updateAppearenceFromState() {
      if (!self._spans?.length) return;

      if (self.parent?.canResizeSpans) {
        const start = self._spans[0].getAttribute("data-start");
        const end = self._spans.at(-1).getAttribute("data-end");
        const offsets = self.globalOffsets;

        // if spans have different offsets stored, then we resized the region and need to recreate spans
        if (isDefined(start) && (+start !== offsets.start || +end !== offsets.end)) {
          self.removeHighlight();
          self.applyHighlight();
        } else {
          self.parent.setStyles?.({ [self.identifier]: self.styles });
          self.updateSpans();
        }
      } else {
        self.parent.setStyles?.({ [self.identifier]: self.styles });
        self.updateSpans();
      }
    }
Update region's appearance if the label was changed