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.

[Copilot]

Pull request overview

Copilot reviewed 15 out of 15 changed files in this pull request and generated 2 comments.

---

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

[Copilot]

@tiptap/extensions is declared with a caret (^3.10.2) while the rest of the Tiptap packages here are pinned to 3.10.2. Using a range can pull a newer minor version and lead to mismatched Tiptap package versions (and duplicated dependencies) within the workspace. Pin this to the same exact version as the other @tiptap/* dependencies.

Suggested change

	"@tiptap/extensions": "^3.10.2",
	"@tiptap/extensions": "3.10.2",

[Copilot]

isSpan is derived from editor attributes, but TableToolbar doesn't use any mechanism to re-render on Tiptap v3 transactions/selection changes (unlike other toolbars that now use useEditorState). As a result, the merge/split UI can become stale when the selection moves within a table. Consider using useEditorState(editor) (or subscribing to selectionUpdate/transaction) and basing the isSpan computation/effect on that value instead of relying on React re-renders from editor.state changes.

[jcbe-ode]

J'ai jeté un oeil rapidement et n'ai rien vu de bloquant.
Les retours de co-pilot sont peut-être à prendre en compte (le second reste à creuser)

Enfin, dans le guide de migration, ce chapitre me laisse penser qu'on pourrait peut-être simplifier nos extensions custom permettant de définir la couleur de background du texte, voire celle pour la taille du texte.

Mais c'est un autre sujet. A voir côté pédago si vous jugez cela utile, sachant qu'on ne peut pas casser la rétrocompat sans devoir coder des montées de version dans les applis (appel au transformer)

[jcbe-ode]

Autres points :

• https://tiptap.dev/docs/guides/upgrade-tiptap-v2#command-changes setContent émet désormais un event "update" et de mémoire, cela peut nous impacter
• https://tiptap.dev/docs/guides/upgrade-tiptap-v2#starterkit-updates le StarterKit ajoute de nouvelles extensions, mais les veut-on vraiment ?