@scm-manager/ui-core 3.0.0-20240024-101702

package/src/base/shortcuts/iterator/keyboardIterator.tsx

@@ -0,0 +1,141 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { FC, useCallback, useContext, useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { useShortcut } from "../index";
+import { Callback, CallbackIterator, CallbackRegistry, useCallbackIterator } from "./callbackIterator";
+
+const KeyboardIteratorContext = React.createContext<CallbackRegistry>({
+  register: () => {
+    if (process.env.NODE_ENV === "development") {
+      // eslint-disable-next-line no-console
+      console.warn("Keyboard iterator targets have to be declared inside a KeyboardIterator");
+    }
+    return 0;
+  },
+  deregister: () => {
+    if (process.env.NODE_ENV === "development") {
+      // eslint-disable-next-line no-console
+      console.warn("Keyboard iterator targets have to be declared inside a KeyboardIterator");
+    }
+  },
+});
+
+export const useKeyboardIteratorItem = (item: Callback | CallbackIterator) => {
+  const { register, deregister } = useContext(KeyboardIteratorContext);
+  useEffect(() => {
+    const index = register(item);
+    return () => deregister(index);
+  }, [item, register, deregister]);
+};
+
+export const KeyboardSubIteratorContextProvider: FC<{ initialIndex?: number }> = ({ children, initialIndex }) => {
+  const callbackIterator = useCallbackIterator(initialIndex);
+
+  useKeyboardIteratorItem(callbackIterator);
+
+  return <KeyboardIteratorContext.Provider value={callbackIterator}>{children}</KeyboardIteratorContext.Provider>;
+};
+
+export const KeyboardIteratorContextProvider: FC<{ initialIndex?: number }> = ({ children, initialIndex }) => {
+  const [t] = useTranslation("commons");
+  const callbackIterator = useCallbackIterator(initialIndex);
+
+  useShortcut("k", callbackIterator.previous.bind(callbackIterator), {
+    description: t("shortcuts.iterator.previous"),
+  });
+
+  useShortcut("j", callbackIterator.next.bind(callbackIterator), {
+    description: t("shortcuts.iterator.next"),
+  });
+
+  useShortcut("tab", () => {
+    callbackIterator.reset();
+
+    return true;
+  });
+
+  return <KeyboardIteratorContext.Provider value={callbackIterator}>{children}</KeyboardIteratorContext.Provider>;
+};
+
+/**
+ * Use the {@link React.RefObject} returned from this hook to register a target to the nearest enclosing {@link KeyboardIterator} or {@link KeyboardSubIterator}.
+ *
+ * @example
+ * const ref = useKeyboardIteratorTarget();
+ * const target = <button ref={ref}>My Iteration Target</button>
+ */
+export function useKeyboardIteratorTarget(): React.RefCallback<HTMLElement> {
+  const ref = useRef<HTMLElement>();
+  const callback = useCallback(() => ref.current?.focus(), []);
+  const refCallback: React.RefCallback<HTMLElement> = useCallback((el) => {
+    if (el) {
+      ref.current = el;
+    }
+  }, []);
+  useKeyboardIteratorItem(callback);
+  return refCallback;
+}
+
+/**
+ * Allows keyboard users to iterate through a list of items, defined by enclosed {@link useKeyboardIteratorTarget} invocations.
+ *
+ * The order is determined by the render order of the target hooks.
+ *
+ * Press `k` to navigate backwards and `j` to navigate forward.
+ * Pressing `tab` will reset the iterator to its initial state.
+ *
+ * Use the {@link KeyboardSubIterator} to wrap asynchronously loaded targets.
+ */
+export const KeyboardIterator: FC = ({ children }) => (
+  <KeyboardIteratorContextProvider>{children}</KeyboardIteratorContextProvider>
+);
+
+/**
+ * Allows deferred {@link useKeyboardIteratorTarget} invocations enclosed in this sub-iterator to be registered in the correct order within a {@link KeyboardIterator}.
+ *
+ * This is especially useful for extension points which might contain further iterable elements that are loaded asynchronously.
+ *
+ * @example
+ *  <KeyboardIterator>
+ *     <KeyboardSubIterator>
+ *             <ExtensionPoint<extensionPoints.RepositoryOverviewTop>
+ *               name="repository.overview.top"
+ *               renderAll={true}
+ *               props={{
+ *                 page,
+ *                 search,
+ *                 namespace,
+ *               }}
+ *             />
+ *     </KeyboardSubIterator>
+ *     {groups.map((group) => {
+ *        return <RepositoryGroupEntry group={group} key={group.name} />;
+ *     })}
+ *  </KeyboardIterator>
+ */
+export const KeyboardSubIterator: FC = ({ children }) => (
+  <KeyboardSubIteratorContextProvider>{children}</KeyboardSubIteratorContextProvider>
+);

package/src/base/shortcuts/usePauseShortcuts.ts

@@ -0,0 +1,44 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { useEffect } from "react";
+import Mousetrap from "mousetrap";
+import "mousetrap/plugins/pause/mousetrap-pause.min.js";
+
+/**
+ * Pauses or unpauses all shortcuts provided by {@link useShortcut}.
+ *
+ * @param pause Whether shortcuts should be paused
+ */
+export default function usePauseShortcuts(pause: boolean) {
+  useEffect(() => {
+    if (pause) {
+      // @ts-ignore method comes from plugin
+      Mousetrap.pause();
+    } else {
+      // @ts-ignore method comes from plugin
+      Mousetrap.unpause();
+    }
+  }, [pause]);
+}

package/src/base/shortcuts/useShortcut.ts

@@ -0,0 +1,110 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { useEffect } from "react";
+import Mousetrap from "mousetrap";
+import useShortcutDocs from "./useShortcutDocs";
+
+export type UseShortcutOptions = {
+  /**
+   * Whether the shortcut is currently active
+   *
+   * @default true
+   */
+  active?: boolean;
+
+  /**
+   * The translated description used for the shortcut documentation.
+   *
+   * If no description is supplied, there will be no entry in the shortcut summary table.
+   */
+  description?: string | null;
+};
+
+/**
+ * ## Summary
+ *
+ * Binds a global keyboard shortcut to a given callback.
+ *
+ * The callback is automatically cleaned up upon unmount.
+ *
+ * ## Supported keys
+ *
+ * For modifier keys you can use shift, ctrl, alt, or meta.
+ *
+ * You can substitute option for alt and command for meta.
+ *
+ * Other special keys are backspace, tab, enter, return, capslock, esc, escape, space, pageup, pagedown, end, home, left, up, right, down, ins, del, and plus.
+ *
+ * Any other key you should be able to reference by name like a, /, $, *, or =.
+ *
+ * A "mod" helper exists which maps to either "command" on Mac and "ctrl" on Windows and Linux.
+ *
+ * ## Combinations
+ *
+ * Keys can be combined by separating them with a whitespace.
+ * For using modifiers, prefix the key with the modifier and concat them with a "+".
+ *
+ * Please also refer to the examples.
+ *
+ * @param key The keycode combination that triggers the callback
+ * @param callback The function that is executed when the key combination is pressed, returning `true` additionally executes default browser behaviour
+ * @param options Whether the shortcut is currently active, defaults to true
+ * @example useShortcut("a b", ...)
+ * @example useShortcut("ctrl+shift+k", ...)
+ * @see https://github.com/ccampbell/mousetrap
+ * @see https://craig.is/killing/mice
+ */
+export default function useShortcut(
+  key: string,
+  callback: (e: KeyboardEvent) => void | boolean,
+  options?: UseShortcutOptions
+) {
+  const { add, remove } = useShortcutDocs();
+  useEffect(() => {
+    const active = options?.active ?? true;
+    const description = options?.description;
+    if (active) {
+      if (description) {
+        add(key, description);
+      }
+      Mousetrap.bind(key, (e) => {
+        const callbackResult = callback(e);
+        /*
+         * Returning false by default disables standard browser event behaviour and stops event bubbling.
+         * Otherwise, a shortcut that moves focus to an input field would cause the key to be entered into the input at the same time.
+         * Shortcuts can explicitly return `true` to re-enable event bubbling and browser behaviour.
+         */
+        return callbackResult ?? false;
+      });
+    }
+
+    return () => {
+      if (description) {
+        remove(key);
+      }
+      Mousetrap.unbind(key);
+    };
+  }, [key, callback, add, remove, options]);
+}

package/src/base/shortcuts/useShortcutDocs.tsx

@@ -0,0 +1,54 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { FC } from "react";
+import React, { useContext, useMemo, useRef } from "react";
+
+export type ShortcutDocsContextType = {
+  docs: Readonly<Record<string, string>>;
+  add: (key: string, description: string) => void;
+  remove: (key: string) => void;
+};
+
+const ShortcutDocsContext = React.createContext<ShortcutDocsContextType>({} as ShortcutDocsContextType);
+
+export const ShortcutDocsContextProvider: FC = ({ children }) => {
+  const docs = useRef<Record<string, string>>({});
+  const value = useMemo(
+    () => ({
+      docs: docs.current,
+      add: (key: string, description: string) => (docs.current[key] = description),
+      remove: (key: string) => {
+        delete docs.current[key];
+      },
+    }),
+    []
+  );
+
+  return <ShortcutDocsContext.Provider value={value}>{children}</ShortcutDocsContext.Provider>;
+};
+
+export default function useShortcutDocs() {
+  return useContext(ShortcutDocsContext);
+}

package/src/base/text/SplitAndReplace.stories.tsx

@@ -0,0 +1,83 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from "react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import SplitAndReplace from "./SplitAndReplace";
+
+export default {
+  title: "SplitAndReplace",
+  component: SplitAndReplace,
+} as ComponentMeta<typeof SplitAndReplace>;
+
+const textOne = "'So this is it,` said Arthur, 'We are going to die.`";
+const textTwo = "'Yes,` said Ford, 'except... no! Wait a minute!`";
+
+export const ReplaceOnce: ComponentStory<typeof SplitAndReplace> = () => {
+  const replacements = [
+    {
+      textToReplace: "'",
+      replacement: <span>!</span>,
+      replaceAll: false,
+    },
+  ];
+  return (
+    <div>
+      <h3>Replace ' with ! once</h3>
+      <label>Original text:</label>
+      <p>{textOne}</p>
+      <label>Text with replacements:</label>
+      <p>
+        <SplitAndReplace text={textOne} replacements={replacements} />
+      </p>
+    </div>
+  );
+};
+
+export const ReplaceAll: ComponentStory<typeof SplitAndReplace> = () => {
+  const replacements = [
+    {
+      textToReplace: "'",
+      replacement: <span>!</span>,
+      replaceAll: true,
+    },
+    {
+      textToReplace: "`",
+      replacement: <span>?</span>,
+      replaceAll: true,
+    },
+  ];
+  return (
+    <div>
+      <h3>Replace all ` with ? and ' with !</h3>
+      <label>Original text:</label>
+      <p>{textTwo}</p>
+
+      <label> Text with replacements: </label>
+      <p>
+        <SplitAndReplace text={textTwo} replacements={replacements} />
+      </p>
+    </div>
+  );
+};

package/src/base/text/SplitAndReplace.tsx

@@ -0,0 +1,65 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { FC, ReactNode } from "react";
+import textSplitAndReplace from "./textSplitAndReplace";
+
+export type Replacement = {
+  textToReplace: string;
+  replacement: ReactNode;
+  replaceAll?: boolean;
+};
+
+export type Props = {
+  text: string;
+  replacements: Replacement[];
+  textWrapper?: (s: string) => ReactNode;
+};
+
+const defaultTextWrapper = (s: string) => {
+  const first = s.startsWith(" ") ? <>&nbsp;</> : "";
+  const last = s.endsWith(" ") ? <>&nbsp;</> : "";
+  return (
+    <>
+      {first}
+      {s}
+      {last}
+    </>
+  );
+};
+
+const SplitAndReplace: FC<Props> = ({ text, replacements, textWrapper = defaultTextWrapper }) => {
+  const parts = textSplitAndReplace<ReactNode>(text, replacements, textWrapper);
+  if (parts.length === 0) {
+    return <>{parts[0]}</>;
+  }
+  return (
+    <>
+      {parts.map((part, index) => (
+        <React.Fragment key={index}>{part}</React.Fragment>
+      ))}
+    </>
+  );
+};
+
+export default SplitAndReplace;

package/src/base/text/index.ts

@@ -0,0 +1,25 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export { default as SplitAndReplace, Replacement } from "./SplitAndReplace";

package/src/base/text/textSplitAndReplace.test.ts

@@ -0,0 +1,134 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import textSplitAndReplace from "./textSplitAndReplace";
+
+type Wrapped = {
+  text: string;
+};
+
+const testWrapper = (s: string) => {
+  return { text: s };
+};
+
+describe("text split and replace", () => {
+  it("should wrap text if nothing should be replaced", () => {
+    const result = textSplitAndReplace<Wrapped>("Don't Panic.", [], testWrapper);
+    expect(result).toHaveLength(1);
+    expect(result[0]).toStrictEqual({ text: "Don't Panic." });
+  });
+
+  it("should replace single string", () => {
+    const result = textSplitAndReplace<Wrapped>(
+      "Don't Panic.",
+      [{ textToReplace: "'", replacement: { text: "`" } }],
+      testWrapper
+    );
+    expect(result).toHaveLength(3);
+    expect(result[0]).toStrictEqual({ text: "Don" });
+    expect(result[1]).toStrictEqual({ text: "`" });
+    expect(result[2]).toStrictEqual({ text: "t Panic." });
+  });
+
+  it("should replace strings only once if replace all is not set", () => {
+    const result = textSplitAndReplace<Wrapped>(
+      "'So this is it,' said Arthur, 'We are going to die.'",
+      [{ textToReplace: "'", replacement: { text: "“" } }],
+      testWrapper
+    );
+    expect(result).toHaveLength(2);
+    expect(result[0]).toStrictEqual({ text: "“" });
+    expect(result[1]).toStrictEqual({ text: "So this is it,' said Arthur, 'We are going to die.'" });
+  });
+
+  it("should replace all strings if replace all is set to true", () => {
+    const result = textSplitAndReplace<Wrapped>(
+      "'So this is it,' said Arthur, 'We are going to die.'",
+      [{ textToReplace: "'", replacement: { text: "“" }, replaceAll: true }],
+      testWrapper
+    );
+    expect(result).toHaveLength(7);
+    expect(result[0]).toStrictEqual({ text: "“" });
+    expect(result[1]).toStrictEqual({ text: "So this is it," });
+    expect(result[2]).toStrictEqual({ text: "“" });
+    expect(result[3]).toStrictEqual({ text: " said Arthur, " });
+    expect(result[4]).toStrictEqual({ text: "“" });
+    expect(result[5]).toStrictEqual({ text: "We are going to die." });
+    expect(result[6]).toStrictEqual({ text: "“" });
+  });
+
+  it("should replace strings with multiple replacements", () => {
+    const result = textSplitAndReplace<Wrapped>(
+      "'So this is it,' said Arthur, 'We are going to die.'",
+      [
+        { textToReplace: "'", replacement: { text: "“" }, replaceAll: true },
+        { textToReplace: "Arthur", replacement: { text: "Dent" }, replaceAll: true },
+      ],
+      testWrapper
+    );
+    expect(result).toHaveLength(9);
+    expect(result[0]).toStrictEqual({ text: "“" });
+    expect(result[1]).toStrictEqual({ text: "So this is it," });
+    expect(result[2]).toStrictEqual({ text: "“" });
+    expect(result[3]).toStrictEqual({ text: " said " });
+    expect(result[4]).toStrictEqual({ text: "Dent" });
+    expect(result[5]).toStrictEqual({ text: ", " });
+    expect(result[6]).toStrictEqual({ text: "“" });
+    expect(result[7]).toStrictEqual({ text: "We are going to die." });
+    expect(result[8]).toStrictEqual({ text: "“" });
+  });
+
+  it("should ignore conflicting replacements", () => {
+    const result = textSplitAndReplace<Wrapped>(
+      "'So this is it,' said Arthur, 'We are going to die.'",
+      [
+        { textToReplace: "said Arthur", replacement: { text: "to be replaced" } },
+        { textToReplace: " said", replacement: { text: "to be ignored 1" }, replaceAll: true },
+        { textToReplace: "d A", replacement: { text: "to be ignored 2" }, replaceAll: true },
+        { textToReplace: "Arthur,", replacement: { text: "to be ignored 3" }, replaceAll: true },
+      ],
+      testWrapper
+    );
+    expect(result).toHaveLength(3);
+    expect(result[0]).toStrictEqual({ text: "'So this is it,' " });
+    expect(result[1]).toStrictEqual({ text: "to be replaced" });
+    expect(result[2]).toStrictEqual({ text: ", 'We are going to die.'" });
+  });
+
+  it("should replace adjacent texts", () => {
+    const result = textSplitAndReplace<Wrapped>(
+      "'So this is it,' said Arthur, 'We are going to die.'",
+      [
+        { textToReplace: "'So this is it,'", replacement: { text: "one" } },
+        { textToReplace: " said Arthur, ", replacement: { text: "two" } },
+        { textToReplace: "'We are going to die.'", replacement: { text: "three" } },
+      ],
+      testWrapper
+    );
+    expect(result).toHaveLength(3);
+    expect(result[0]).toStrictEqual({ text: "one" });
+    expect(result[1]).toStrictEqual({ text: "two" });
+    expect(result[2]).toStrictEqual({ text: "three" });
+  });
+});