Port over linkifyJS to shared-components. (#32731)

* Port over linkifyJS to shared-components.

* Drop rubbish

* update lock

* quickfix test

* drop group id

* Modernize tests

* Remove stories that aren't in use.

* Complete working version

* Add copyright

* tidy up

* update lock

* Update snaps

* update snap

* undo change

* remove unused

* More test updates

* fix typo

* fix margin on preview

* move margin block

* snapupdate

* prettier

* cleanup a test mistake

* Fixup sonar issues

* Don't expose linkifyjs to applications, just provide helper functions.

* Add story for documentation.

* remove $

* Use a const

* typo

* cleanup var name

* remove console line

* Changes checkpoint

* Convert to context

* Revert unrelated change.

* more cleanup

* Add a test to cover ignoring incoming data elements

* Make tests happy

* Update tests for LinkedText

* Underlines!

* fix lock

* remove unused linkify packages

* import move

* Remove mod to remove underline

* undo

* fix snap

* another snapshot fix

* Tidy up based on review.

* fix story

* Pass in args

apps/web/test/unit-tests/components/views/elements/RoomTopic-test.tsx

@@ -10,6 +10,7 @@ import React from "react";
 import { Room } from "matrix-js-sdk/src/matrix";
 import { fireEvent, render, screen, waitFor } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
+import { LinkedTextContext } from "@element-hq/web-shared-components";
 
 import { mkEvent, stubClient } from "../../../../test-utils";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
@@ -52,7 +53,9 @@ describe("<RoomTopic/>", () => {
      */
     const renderRoom = (topic: string) => {
         const room = createRoom(topic);
-        render(<RoomTopic room={room} />);
+        render(<RoomTopic room={room} />, {
+            wrapper: ({ children }) => <LinkedTextContext.Provider value={{}}>{children}</LinkedTextContext.Provider>,
+        });
     };
 
     /**

apps/web/test/unit-tests/components/views/messages/TextualBody-test.tsx

@@ -193,7 +193,7 @@ describe("<TextualBody />", () => {
             const { container } = getComponent({ mxEvent: ev });
             const content = container.querySelector(".mx_EventTile_body");
             expect(content.innerHTML).toMatchInlineSnapshot(
-                `"Chat with <a href="https://matrix.to/#/@user:example.com" class="linkified" rel="noreferrer noopener">@user:example.com</a>"`,
+                `"Chat with <a href="https://matrix.to/#/@user:example.com" rel="noreferrer noopener" data-linkified="true">@user:example.com</a>"`,
             );
         });
 
@@ -211,7 +211,7 @@ describe("<TextualBody />", () => {
             const { container } = getComponent({ mxEvent: ev });
             const content = container.querySelector(".mx_EventTile_body");
             expect(content.innerHTML).toMatchInlineSnapshot(
-                `"Visit <a href="https://matrix.to/#/#room:example.com" class="linkified" rel="noreferrer noopener">#room:example.com</a>"`,
+                `"Visit <a href="https://matrix.to/#/#room:example.com" rel="noreferrer noopener" data-linkified="true">#room:example.com</a>"`,
             );
         });
 

apps/web/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap

@@ -557,7 +557,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly linkification get a
 >
   Visit 
   <a
-    class="linkified"
+    data-linkified="true"
     href="https://matrix.org/"
     rel="noreferrer noopener"
     target="_blank"

apps/web/test/unit-tests/components/views/right_panel/RoomSummaryCardView-test.tsx

@@ -11,6 +11,7 @@ import { render, fireEvent, screen } from "jest-matrix-react";
 import { Room, type MatrixClient, JoinRule, MatrixEvent, HistoryVisibility } from "matrix-js-sdk/src/matrix";
 import { mocked, type MockedObject } from "jest-mock";
 import userEvent from "@testing-library/user-event";
+import { LinkedTextContext } from "@element-hq/web-shared-components";
 
 import RoomSummaryCardView from "../../../../../src/components/views/right_panel/RoomSummaryCardView";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
@@ -44,7 +45,9 @@ describe("<RoomSummaryCard />", () => {
 
         return render(<RoomSummaryCardView {...defaultProps} {...props} />, {
             wrapper: ({ children }) => (
-                <MatrixClientContext.Provider value={mockClient}>{children}</MatrixClientContext.Provider>
+                <MatrixClientContext.Provider value={mockClient}>
+                    <LinkedTextContext.Provider value={{}}>{children}</LinkedTextContext.Provider>
+                </MatrixClientContext.Provider>
             ),
         });
     };

apps/web/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap

@@ -142,9 +142,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
               class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
             >
               <span
-                dir="auto"
+                class="_container_15awj_8"
               >
-                This is the room's topic.
+                <span
+                  dir="auto"
+                >
+                  This is the room's topic.
+                </span>
               </span>
             </p>
             <button
@@ -1574,9 +1578,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
               class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
             >
               <span
-                dir="auto"
+                class="_container_15awj_8"
               >
-                This is the room's topic.
+                <span
+                  dir="auto"
+                >
+                  This is the room's topic.
+                </span>
               </span>
             </p>
             <button

apps/web/test/unit-tests/components/views/rooms/NewRoomIntro-test.tsx

@@ -11,6 +11,7 @@ import React from "react";
 import { render, screen } from "jest-matrix-react";
 import { EventTimeline, type MatrixClient, Room } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
+import { LinkedTextContext } from "@element-hq/web-shared-components";
 
 import { LocalRoom } from "../../../../../src/models/LocalRoom";
 import {
@@ -32,7 +33,9 @@ const renderNewRoomIntro = (client: MatrixClient, room: Room | LocalRoom) => {
     render(
         <MatrixClientContext.Provider value={client}>
             <ScopedRoomContextProvider {...({ room, roomId: room.roomId } as unknown as RoomContextType)}>
-                <NewRoomIntro />
+                <LinkedTextContext.Provider value={{}}>
+                    <NewRoomIntro />
+                </LinkedTextContext.Provider>
             </ScopedRoomContextProvider>
         </MatrixClientContext.Provider>,
     );

apps/web/test/unit-tests/components/views/rooms/__snapshots__/NewRoomIntro-test.tsx.snap

@@ -7,17 +7,21 @@ exports[`NewRoomIntro topic should render a link in the topic 1`] = `
   <span>
     Topic: 
     <span
-      dir="auto"
+      class="_container_15awj_8"
     >
-      This is a link: 
-      <a
-        class="linkified"
-        href="https://matrix.org/"
-        rel="noreferrer noopener"
-        target="_blank"
+      <span
+        dir="auto"
       >
-        https://matrix.org/
-      </a>
+        This is a link: 
+        <a
+          data-linkified="true"
+          href="https://matrix.org/"
+          rel="noreferrer noopener"
+          target="_blank"
+        >
+          https://matrix.org/
+        </a>
+      </span>
     </span>
   </span>
 </p>