feat: insert link plugin tinymce

package.json

@@ -77,6 +77,7 @@
     "fast-xml-parser": "^4.0.10",
     "frontend-components-tinymce-advanced-plugins": "^1.0.3",
     "lodash-es": "^4.17.21",
+    "lodash.clonedeep": "^4.5.0",
     "lodash.flatten": "^4.4.0",
     "moment": "^2.29.4",
     "moment-shortformat": "^2.1.0",

src/editors/data/constants/tinyMCE.js

@@ -52,6 +52,7 @@ export const buttons = StrictDict({
   undo: 'undo',
   underline: 'underline',
   a11ycheck: 'a11ycheck',
+  insertLink: 'insertlink',
   embediframe: 'embediframe',
 });
 

src/editors/data/redux/index.js

@@ -7,6 +7,7 @@ import * as requests from './requests';
 import * as video from './video';
 import * as problem from './problem';
 import * as game from './game';
+import * as insertlink from './insertlink';
 
 /* eslint-disable import/no-cycle */
 export { default as thunkActions } from './thunkActions';
@@ -17,6 +18,7 @@ const modules = {
   video,
   problem,
   game,
+  insertlink,
 };
 
 const moduleProps = (propName) => Object.keys(modules).reduce(

src/editors/data/redux/insertlink/index.js

@@ -0,0 +1,2 @@
+export { actions, reducer } from './reducers';
+export { default as selectors } from './selectors';

src/editors/data/redux/insertlink/reducers.js

@@ -0,0 +1,27 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { StrictDict } from '../../../utils';
+
+const initialState = {
+  selectedBlocks: {},
+};
+
+// eslint-disable-next-line no-unused-vars
+const insertlink = createSlice({
+  name: 'insertlink',
+  initialState,
+  reducers: {
+    addBlock: (state, { payload }) => {
+      state.selectedBlocks = { ...state.selectedBlocks, ...payload };
+    },
+  },
+});
+
+const actions = StrictDict(insertlink.actions);
+
+const { reducer } = insertlink;
+
+export {
+  actions,
+  initialState,
+  reducer,
+};

src/editors/data/redux/insertlink/reducers.test.js

@@ -0,0 +1,28 @@
+import { reducer, actions, initialState } from './reducers';
+
+describe('insertlink reducer', () => {
+  it('should return the initial state', () => {
+    expect(reducer(undefined, {})).toEqual(initialState);
+  });
+
+  it('should handle addBlock', () => {
+    const payload = {
+      block123: { id: 'block123', content: 'Block 123 content' },
+      block456: { id: 'block456', content: 'Block 456 content' },
+    };
+    const action = actions.addBlock(payload);
+
+    const previousState = {
+      selectedBlocks: { block789: { id: 'block789', content: 'Block 789 content' } },
+    };
+
+    const expectedState = {
+      selectedBlocks: {
+        ...previousState.selectedBlocks,
+        ...payload,
+      },
+    };
+
+    expect(reducer(previousState, action)).toEqual(expectedState);
+  });
+});

src/editors/data/redux/insertlink/selectors.js

@@ -0,0 +1,5 @@
+export const insertlinkState = (state) => state.insertlink;
+
+export default {
+  insertlinkState,
+};

src/editors/data/redux/insertlink/selectors.test.js

@@ -0,0 +1,19 @@
+import { insertlinkState } from './selectors';
+
+describe('insertlink selectors', () => {
+  describe('insertlinkState selector', () => {
+    it('should return the insertlink slice of the state', () => {
+      const state = {
+        insertlink: {
+          selectedBlocks: {
+            block123: { id: 'block123', url: 'https://www.example.com' },
+            block456: { id: 'block456', url: 'https://www.example.com' },
+          },
+        },
+      };
+
+      const { selectedBlocks } = insertlinkState(state);
+      expect(selectedBlocks).toEqual(state.insertlink.selectedBlocks);
+    });
+  });
+});

src/editors/sharedComponents/InsertLinkModal/BlockLink/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BlockLink Component snapshot 1`] = `
+<div>
+  <div
+    class="link-container d-flex row p-4 rounded border border-gray-400 mx-4 mt-3"
+  >
+    <div
+      class="col-10"
+    >
+      <p
+        class="text-left"
+      />
+      <p
+        class="h2 w-20 title"
+      >
+        Some Path
+      </p>
+    </div>
+    <div
+      class="col-2"
+    >
+      <button
+        class="d-flex justify-content-center align-items-center"
+        data-testid="close-link-button"
+        variant="tertiary"
+      >
+         
+      </button>
+    </div>
+  </div>
+</div>
+`;

src/editors/sharedComponents/InsertLinkModal/BlockLink/index.jsx

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import { Button } from '@openedx/paragon';
+import { LinkOff } from '@openedx/paragon/icons';
+import formatBlockPath from '../formatBlockPath';
+
+import './index.scss';
+
+const BlockLink = ({ path, onCloseLink }) => {
+  const { title, subTitle } = formatBlockPath(path);
+  return (
+    <div className="link-container d-flex row p-4 rounded border border-gray-400 mx-4 mt-3">
+      <div className="col-10">
+        <p className="text-left">{subTitle}</p>
+        <p className="h2 w-20 title">{title}</p>
+      </div>
+      <div className="col-2">
+        <Button
+          variant="tertiary"
+          className="d-flex justify-content-center align-items-center"
+          data-testid="close-link-button"
+          size="lg"
+          iconBefore={LinkOff}
+          onClick={onCloseLink}
+        >
+         &nbsp;
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+BlockLink.propTypes = {
+  path: PropTypes.string.isRequired,
+  onCloseLink: PropTypes.func.isRequired,
+};
+
+export default BlockLink;

src/editors/sharedComponents/InsertLinkModal/BlockLink/index.scss

@@ -0,0 +1,5 @@
+.link-container {
+  .title {
+    overflow-wrap: break-word;
+  }
+}

src/editors/sharedComponents/InsertLinkModal/BlockLink/index.test.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import formatBlockPath from '../formatBlockPath';
+import BlockLink from './index';
+
+describe('BlockLink Component', () => {
+  const defaultProps = {
+    path: 'Some Path',
+    onCloseLink: jest.fn(),
+  };
+
+  const renderComponent = (overrideProps = {}) => render(
+    <BlockLink {...defaultProps} {...overrideProps} />,
+  );
+
+  test('renders with default props', () => {
+    renderComponent();
+    expect(screen.getByText('Some Path')).toBeInTheDocument();
+  });
+
+  test('snapshot', () => {
+    const { container } = renderComponent();
+    expect(container).toMatchSnapshot();
+  });
+
+  test('renders correctly with custom path', () => {
+    const customProps = {
+      ...defaultProps,
+      path: 'Custom Path',
+    };
+    renderComponent(customProps);
+    expect(screen.getByText('Custom Path')).toBeInTheDocument();
+  });
+
+  test('calls onCloseLink when the button is clicked', () => {
+    renderComponent();
+    fireEvent.click(screen.getByTestId('close-link-button'));
+    expect(defaultProps.onCloseLink).toHaveBeenCalledTimes(1);
+  });
+
+  test('renders with valid title and subtitle', () => {
+    const customProps = {
+      path: 'Root Section / Child 1',
+      onCloseLink: jest.fn(),
+    };
+
+    renderComponent(customProps);
+    const { title, subTitle } = formatBlockPath(customProps.path);
+
+    expect(screen.getByText(title)).toBeInTheDocument();
+    expect(screen.getByText(subTitle)).toBeInTheDocument();
+  });
+});

src/editors/sharedComponents/InsertLinkModal/BlocksList/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BlocksList Component snapshot 1`] = `
+<div>
+  <div
+    class="block-list-container"
+  >
+    <div
+      class="pgn-transition-replace-group position-relative"
+    >
+      <div
+        style="padding: .1px 0px;"
+      >
+        <div
+          class="w-100 d-flex justify-content-space-between p-3 pgn__action-row"
+        >
+          <button
+            class="col-11 py-4 btn btn-tertiary"
+            data-testid="block-name"
+            type="button"
+          >
+            <span
+              class="w-100 text-left"
+            >
+              Any display name
+            </span>
+          </button>
+          <button
+            class="col-1 py-4 btn btn-tertiary"
+            data-testid="block-navigation"
+            type="button"
+          >
+
+            <span
+              class="pgn__icon btn-icon-after"
+            >
+              <svg
+                aria-hidden="true"
+                fill="none"
+                focusable="false"
+                height="24"
+                role="img"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="m6.49 20.13 1.77 1.77 9.9-9.9-9.9-9.9-1.77 1.77L14.62 12l-8.13 8.13Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;