chore: #PEDAGO-3463, update package tiptap v2 to v3 and initialize in…

[Headan]

… files

Description

Monté de version de tiptap v2 a v3.

Liens utiles :
https://tiptap.dev/docs/guides/upgrade-tiptap-v2

Which Package changed?

Please check the name of the package you changed

• Components
• Core
• Icons
• Hooks

Has the documentation changed?

• Storybook

Type of change

Please check options that are relevant.

• Chore (PATCH)
• Doc (PATCH)
• Bug fix (PATCH)
• New feature (MINOR)
• Breaking change (MAJOR)

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings

[Copilot]

Pull Request Overview

This PR upgrades TipTap from version 2.11.0 to 3.10.2, a major version upgrade that introduces breaking changes to import paths and API patterns for floating menus and bubble menus.

• Updates TipTap core and all extension packages from 2.11.0 to 3.10.2
• Refactors FloatingMenu and BubbleMenu components to use new API patterns with separate reference objects and updated positioning configuration
• Consolidates extension imports from individual packages to grouped exports (e.g., @tiptap/extensions, @tiptap/extension-table)

Reviewed Changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/react/package.json	Updates all TipTap dependencies from 2.11.0 to 3.10.2 and adds @floating-ui/dom
packages/extensions/package.json	Updates TipTap dependencies to 3.10.2
packages/react/src/modules/editor/hooks/useTipTapEditor.ts	Consolidates extension imports and replaces TextStyle/Underline with TextStyleKit
packages/react/src/modules/editor/hooks/useCommentEditor.ts	Updates CharacterCount import to use @tiptap/extensions package
packages/react/src/modules/editor/components/Toolbar/TableToolbar.tsx	Updates FloatingMenu import path and refactors tippyOptions to options with new middleware format
packages/react/src/modules/editor/components/Toolbar/LinkToolbar.tsx	Updates FloatingMenu import and references renamed FloatingOptions file
packages/react/src/modules/editor/components/Toolbar/LinkToolbar.TippyOptions.ts	Removed file, replaced by LinkToolbar.FloatingOptions.ts
packages/react/src/modules/editor/components/Toolbar/LinkToolbar.FloatingOptions.ts	New file with refactored floating menu configuration using middleware pattern
packages/react/src/modules/editor/components/BubbleMenuEditInformationPane/BubbleMenuEditInformationPane.tsx	Updates BubbleMenu to use new API with separate reference object and getReferencedVirtualElement prop
packages/react/src/modules/editor/components/BubbleMenuEditImage/BubbleMenuEditImage.tsx	Updates BubbleMenu API and changes setAttributes to updateAttributes for custom-image
packages/extensions/src/table-cell/table-cell.ts	Updates TableCell import from @tiptap/extension-table-cell to @tiptap/extension-table

Comments suppressed due to low confidence (1)

packages/react/src/modules/editor/components/Toolbar/TableToolbar.tsx:79

• The getReferenceClientRect function should not be part of floatingOptions. Based on the pattern used in BubbleMenuEditImage and BubbleMenuEditInformationPane, it should be extracted into a separate reference object and passed via the getReferencedVirtualElement prop:

const reference = useMemo(() => {
  // Adjust a DOMRect to make it visible at a correct place.
  function adjustRect(rect: DOMRect) {
    let yOffset = 0;
    if (window.visualViewport) {
      const bottomScreen =
        window.innerHeight || document.documentElement.clientHeight;
      if (rect.bottom >= bottomScreen) {
        yOffset += rect.bottom - bottomScreen - rect.height;
      }
    }
    return new DOMRect(rect.x, rect.y - yOffset, rect.width, rect.height);
  }
  
  return {
    getBoundingClientRect: () => {
      const parentDiv = editor?.isActive('table')
        ? findParentNodeClosestToPos(
            editor.state.selection.$anchor,
            (node) => node.type.name === 'table',
          )
        : null;

      if (parentDiv) {
        const parentDomNode = editor?.view.nodeDOM(parentDiv.pos) as
          | HTMLElement
          | undefined;

        const tableDomNode =
          parentDomNode?.querySelector('table') || parentDomNode;
        if (tableDomNode) {
          return adjustRect(tableDomNode.getBoundingClientRect());
        }
      }

      return new DOMRect(0, 0, 100, 100);
    },
  };
}, [editor]);

const floatingOptions = useMemo(() => {
  return {
    placement: 'bottom' as const,
    middleware: [
      {
        name: 'offset',
        options: { mainAxis: 0, crossAxis: 0 },
      },
    ],
    strategy: 'fixed' as const,
  };
}, []);

Then update the FloatingMenu component at line 105 to include:

getReferencedVirtualElement={() => reference}

    return {
      placement: 'bottom' as const,
      middleware: [
        {
          name: 'offset',
          options: { mainAxis: 0, crossAxis: 0 },
        },
      ],
      strategy: 'fixed' as const,
      // popperOptions: {modifiers: [ /*see popper v2 modifiers*/ ]},
      // Try to get the bounding rect of the table.
      getReferenceClientRect: () => {
        const parentDiv = editor?.isActive('table')
          ? findParentNodeClosestToPos(
              editor.state.selection.$anchor,
              (node) => node.type.name === 'table',
            )
          : null;

        // Try to retrieve the <div class="tableWrapper"> that wraps the <table>
        if (parentDiv) {
          const parentDomNode = editor?.view.nodeDOM(parentDiv.pos) as
            | HTMLElement
            | undefined;

          const tableDomNode =
            parentDomNode?.querySelector('table') || parentDomNode;
          if (tableDomNode) {
            return adjustRect(tableDomNode.getBoundingClientRect());
          }
        }

        // This should never happen... but it keeps the transpiler happy.
        return new DOMRect(0, 0, 100, 100);
      },
    };

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated 9 comments.

Comments suppressed due to low confidence (1)

packages/react/src/modules/editor/components/Toolbar/LinkToolbar.tsx:1

• Unused import useCallback.

import { useCallback, useEffect, useMemo, useState } from 'react';

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.