Replace deprecated String#substr with String#slice (#8314)

src/Avatar.ts

@@ -57,7 +57,7 @@ function isValidHexColor(color: string): boolean {
     return typeof color === "string" &&
         (color.length === 7 || color.length === 9) &&
         color.charAt(0) === "#" &&
-        !color.substr(1).split("").some(c => isNaN(parseInt(c, 16)));
+        !color.slice(1).split("").some(c => isNaN(parseInt(c, 16)));
 }
 
 function urlForColor(color: string): string {

src/autocomplete/CommandProvider.tsx

@@ -55,7 +55,7 @@ export default class CommandProvider extends AutocompleteProvider {
         // check if the full match differs from the first word (i.e. returns false if the command has args)
         if (command[0] !== command[1]) {
             // The input looks like a command with arguments, perform exact match
-            const name = command[1].substr(1); // strip leading `/`
+            const name = command[1].slice(1); // strip leading `/`
             if (CommandMap.has(name) && CommandMap.get(name).isEnabled()) {
                 // some commands, namely `me` don't suit having the usage shown whilst typing their arguments
                 if (CommandMap.get(name).hideCompletionAfterSpace) return [];

src/components/views/dialogs/CreateRoomDialog.tsx

@@ -103,7 +103,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
             createOpts.preset = Preset.PublicChat;
             opts.guestAccess = false;
             const { alias } = this.state;
-            createOpts.room_alias_name = alias.substr(1, alias.indexOf(":") - 1);
+            createOpts.room_alias_name = alias.substring(1, alias.indexOf(":"));
         } else {
             // If we cannot change encryption we pass `true` for safety, the server should automatically do this for us.
             opts.encryption = this.state.canChangeEncryption ? this.state.isEncrypted : true;

src/components/views/elements/EffectsOverlay.tsx

@@ -55,7 +55,7 @@ const EffectsOverlay: FunctionComponent<IProps> = ({ roomWidth }) => {
         const onAction = (payload: { action: string }) => {
             const actionPrefix = 'effects.';
             if (payload.action.indexOf(actionPrefix) === 0) {
-                const effect = payload.action.substr(actionPrefix.length);
+                const effect = payload.action.slice(actionPrefix.length);
                 lazyLoadEffectModule(effect).then((module) => module?.start(canvasRef.current));
             }
         };

src/components/views/rooms/BasicMessageComposer.tsx

@@ -364,7 +364,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
     private insertText(textToInsert: string, inputType = "insertText"): void {
         const sel = document.getSelection();
         const { caret, text } = getCaretOffsetAndText(this.editorRef.current, sel);
-        const newText = text.substr(0, caret.offset) + textToInsert + text.substr(caret.offset);
+        const newText = text.slice(0, caret.offset) + textToInsert + text.slice(caret.offset);
         caret.offset += textToInsert.length;
         this.modifiedFlag = true;
         this.props.model.update(newText, inputType, caret);

src/components/views/rooms/MemberList.tsx

@@ -274,7 +274,7 @@ export default class MemberList extends React.Component<IProps, IState> {
 
             this.sortNames.set(
                 member,
-                (member.name[0] === '@' ? member.name.substr(1) : member.name).replace(SORT_REGEX, ""),
+                (member.name[0] === '@' ? member.name.slice(1) : member.name).replace(SORT_REGEX, ""),
             );
 
             // XXX: this user may have no lastPresenceTs value!

src/components/views/spaces/SpaceCreateMenu.tsx

@@ -56,7 +56,7 @@ export const createSpace = async (
                 events_default: 100,
                 invite: isPublic ? 0 : 50,
             },
-            room_alias_name: isPublic && alias ? alias.substr(1, alias.indexOf(":") - 1) : undefined,
+            room_alias_name: isPublic && alias ? alias.substring(1, alias.indexOf(":")) : undefined,
             topic,
             ...createOpts,
         },

src/editor/deserialize.ts

@@ -97,7 +97,7 @@ function parseCodeBlock(n: Node, pc: PartCreator): Part[] {
     if (n.firstChild?.nodeName === "CODE") {
         for (const className of (n.firstChild as HTMLElement).classList) {
             if (className.startsWith("language-") && !className.startsWith("language-_")) {
-                language = className.substr("language-".length);
+                language = className.slice("language-".length);
                 break;
             }
         }
@@ -118,7 +118,7 @@ function parseCodeBlock(n: Node, pc: PartCreator): Part[] {
 }
 
 function parseHeader(n: Node, pc: PartCreator): Part[] {
-    const depth = parseInt(n.nodeName.substr(1), 10);
+    const depth = parseInt(n.nodeName.slice(1), 10);
     const prefix = pc.plain("#".repeat(depth) + " ");
     return [prefix, ...parseChildren(n, pc)];
 }

src/editor/diff.ts

@@ -33,16 +33,16 @@ function firstDiff(a: string, b: string): number {
 
 function diffStringsAtEnd(oldStr: string, newStr: string): IDiff {
     const len = Math.min(oldStr.length, newStr.length);
-    const startInCommon = oldStr.substr(0, len) === newStr.substr(0, len);
+    const startInCommon = oldStr.slice(0, len) === newStr.slice(0, len);
     if (startInCommon && oldStr.length > newStr.length) {
-        return { removed: oldStr.substr(len), at: len };
+        return { removed: oldStr.slice(len), at: len };
     } else if (startInCommon && oldStr.length < newStr.length) {
-        return { added: newStr.substr(len), at: len };
+        return { added: newStr.slice(len), at: len };
     } else {
         const commonStartLen = firstDiff(oldStr, newStr);
         return {
-            removed: oldStr.substr(commonStartLen),
-            added: newStr.substr(commonStartLen),
+            removed: oldStr.slice(commonStartLen),
+            added: newStr.slice(commonStartLen),
             at: commonStartLen,
         };
     }
@@ -55,7 +55,7 @@ export function diffDeletion(oldStr: string, newStr: string): IDiff {
     }
     const firstDiffIdx = firstDiff(oldStr, newStr);
     const amount = oldStr.length - newStr.length;
-    return { at: firstDiffIdx, removed: oldStr.substr(firstDiffIdx, amount) };
+    return { at: firstDiffIdx, removed: oldStr.slice(firstDiffIdx, firstDiffIdx + amount) };
 }
 
 /**
@@ -70,7 +70,7 @@ export function diffDeletion(oldStr: string, newStr: string): IDiff {
 export function diffAtCaret(oldValue: string, newValue: string, caretPosition: number): IDiff {
     const diffLen = newValue.length - oldValue.length;
     const caretPositionBeforeInput = caretPosition - diffLen;
-    const oldValueBeforeCaret = oldValue.substr(0, caretPositionBeforeInput);
-    const newValueBeforeCaret = newValue.substr(0, caretPosition);
+    const oldValueBeforeCaret = oldValue.substring(0, caretPositionBeforeInput);
+    const newValueBeforeCaret = newValue.substring(0, caretPosition);
     return diffStringsAtEnd(oldValueBeforeCaret, newValueBeforeCaret);
 }

src/editor/operations.ts

@@ -281,7 +281,7 @@ export function toggleInlineFormat(range: Range, prefix: string, suffix = prefix
         if (isFormatted) {
             // remove prefix and suffix formatting string
             const partWithoutPrefix = parts[base].serialize();
-            partWithoutPrefix.text = partWithoutPrefix.text.substr(prefix.length);
+            partWithoutPrefix.text = partWithoutPrefix.text.slice(prefix.length);
             parts[base] = partCreator.deserializePart(partWithoutPrefix);
 
             const partWithoutSuffix = parts[index - 1].serialize();

src/editor/parts.ts

@@ -106,8 +106,8 @@ abstract class BasePart {
     }
 
     public split(offset: number): IBasePart {
-        const splitText = this.text.substr(offset);
-        this._text = this.text.substr(0, offset);
+        const splitText = this.text.slice(offset);
+        this._text = this.text.slice(0, offset);
         return new PlainPart(splitText);
     }
 
@@ -115,7 +115,7 @@ abstract class BasePart {
     // if the part would become invalid if it removed everything.
     public remove(offset: number, len: number): string | undefined {
         // validate
-        const strWithRemoval = this.text.substr(0, offset) + this.text.substr(offset + len);
+        const strWithRemoval = this.text.slice(0, offset) + this.text.slice(offset + len);
         for (let i = offset; i < (len + offset); ++i) {
             const chr = this.text.charAt(i);
             if (!this.acceptsRemoval(i, chr)) {
@@ -131,8 +131,8 @@ abstract class BasePart {
         for (let i = 0; i < str.length; ++i) {
             const chr = str.charAt(i);
             if (!this.acceptsInsertion(chr, offset + i, inputType)) {
-                this._text = this._text + str.substr(0, i);
-                return str.substr(i);
+                this._text = this._text + str.slice(0, i);
+                return str.slice(i);
             }
         }
         this._text = this._text + str;
@@ -147,8 +147,8 @@ abstract class BasePart {
                 return false;
             }
         }
-        const beforeInsert = this._text.substr(0, offset);
-        const afterInsert = this._text.substr(offset);
+        const beforeInsert = this._text.slice(0, offset);
+        const afterInsert = this._text.slice(offset);
         this._text = beforeInsert + str + afterInsert;
         return true;
     }
@@ -156,8 +156,8 @@ abstract class BasePart {
     public createAutoComplete(updateCallback: UpdateCallback): void {}
 
     protected trim(len: number): string {
-        const remaining = this._text.substr(len);
-        this._text = this._text.substr(0, len);
+        const remaining = this._text.slice(len);
+        this._text = this._text.slice(0, len);
         return remaining;
     }
 

src/languageHandler.tsx

@@ -290,7 +290,7 @@ export function replaceByRegexes(text: string, mapping: IVariables | Tags): stri
             matchFoundSomewhere = true;
 
             // The textual part before the first match
-            const head = inputText.substr(0, match.index);
+            const head = inputText.slice(0, match.index);
 
             const parts = [];
             // keep track of prevMatch
@@ -326,9 +326,9 @@ export function replaceByRegexes(text: string, mapping: IVariables | Tags): stri
                 let tail;
                 if (match) {
                     const startIndex = prevMatch.index + prevMatch[0].length;
-                    tail = inputText.substr(startIndex, match.index - startIndex);
+                    tail = inputText.slice(startIndex, match.index);
                 } else {
-                    tail = inputText.substr(prevMatch.index + prevMatch[0].length);
+                    tail = inputText.slice(prevMatch.index + prevMatch[0].length);
                 }
                 if (tail) {
                     parts.push(tail);
@@ -500,7 +500,7 @@ export function pickBestLanguage(langs: string[]): string {
 
     {
         // Failing that, a different dialect of the same language
-        const closeLangIndex = normalisedLangs.findIndex((l) => l.substr(0, 2) === currentLang.substr(0, 2));
+        const closeLangIndex = normalisedLangs.findIndex((l) => l.slice(0, 2) === currentLang.slice(0, 2));
         if (closeLangIndex > -1) return langs[closeLangIndex];
     }
 

src/stores/widgets/StopGapWidget.ts

@@ -115,7 +115,7 @@ export class ElementWidget extends Widget {
 
         let theme = new ThemeWatcher().getEffectiveTheme();
         if (theme.startsWith("custom-")) {
-            const customTheme = getCustomTheme(theme.substr(7));
+            const customTheme = getCustomTheme(theme.slice(7));
             // Jitsi only understands light/dark
             theme = customTheme.is_dark ? "dark" : "light";
         }

src/theme.ts

@@ -230,7 +230,7 @@ export async function setTheme(theme?: string): Promise<void> {
     clearCustomTheme();
     let stylesheetName = theme;
     if (theme.startsWith("custom-")) {
-        const customTheme = getCustomTheme(theme.substr(7));
+        const customTheme = getCustomTheme(theme.slice(7));
         stylesheetName = customTheme.is_dark ? "dark-custom" : "light-custom";
         setCustomThemeVars(customTheme);
     }

test/PosthogAnalytics-test.ts

@@ -59,7 +59,7 @@ describe("PosthogAnalytics", () => {
                     const hexHash = shaHashes[message];
                     const bytes = [];
                     for (let c = 0; c < hexHash.length; c += 2) {
-                        bytes.push(parseInt(hexHash.substr(c, 2), 16));
+                        bytes.push(parseInt(hexHash.slice(c, c + 2), 16));
                     }
                     return bytes as unknown as ArrayBuffer;
                 },

test/components/views/rooms/MemberList-test.tsx

@@ -199,8 +199,8 @@ describe('MemberList', () => {
             }
 
             if (!groupChange) {
-                const nameA = memberA.name[0] === '@' ? memberA.name.substr(1) : memberA.name;
-                const nameB = memberB.name[0] === '@' ? memberB.name.substr(1) : memberB.name;
+                const nameA = memberA.name[0] === '@' ? memberA.name.slice(1) : memberA.name;
+                const nameB = memberB.name[0] === '@' ? memberB.name.slice(1) : memberB.name;
                 const nameCompare = compare(nameB, nameA);
                 console.log("Comparing name");
                 expect(nameCompare).toBeGreaterThanOrEqual(0);

test/end-to-end-tests/src/rest/session.ts

@@ -42,7 +42,7 @@ export class RestSession {
     }
 
     userName(): string {
-        return this.credentials.userId.split(":")[0].substr(1);
+        return this.credentials.userId.split(":")[0].slice(1);
     }
 
     displayName(): string {