Upgrade Plate

frontend/package.json

@@ -13,60 +13,53 @@
   "license": "MIT",
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@happy-dom/global-registrator": "16.5.2",
+    "@happy-dom/global-registrator": "16.7.3",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "16.1.0",
-    "@types/bun": "1.1.15",
-    "@types/react": "19.0.3",
-    "@types/react-dom": "19.0.2",
+    "@testing-library/react": "16.2.0",
+    "@types/bun": "1.2.1",
+    "@types/qs": "6.9.18",
+    "@types/react": "19.0.8",
+    "@types/react-dom": "19.0.3",
     "@types/react-redux": "7.1.34",
     "@vitejs/plugin-react": "4.3.4",
-    "typescript": "5.7.2",
-    "vite": "6.0.7",
+    "typescript": "5.7.3",
+    "vite": "6.0.11",
     "vite-tsconfig-paths": "5.1.4"
   },
   "dependencies": {
-    "@grafana/faro-react": "1.12.2",
-    "@grafana/faro-web-sdk": "1.12.2",
-    "@grafana/faro-web-tracing": "1.12.2",
-    "@hocuspocus/provider": "2.15.0",
-    "@navikt/aksel-icons": "7.9.1",
-    "@navikt/ds-css": "7.9.1",
-    "@navikt/ds-react": "7.9.1",
+    "@grafana/faro-react": "1.12.3",
+    "@grafana/faro-web-sdk": "1.12.3",
+    "@grafana/faro-web-tracing": "1.12.3",
+    "@navikt/aksel-icons": "7.10.0",
+    "@navikt/ds-css": "7.10.0",
+    "@navikt/ds-react": "7.10.0",
     "@navikt/fnrvalidator": "2.1.5",
-    "@reduxjs/toolkit": "2.5.0",
+    "@reduxjs/toolkit": "2.5.1",
     "@slate-yjs/core": "1.0.2",
-    "@slate-yjs/react": "1.1.0",
     "@styled-icons/fluentui-system-regular": "10.47.0",
-    "@types/qs": "6.9.17",
-    "@udecode/plate": "41.0.14",
-    "@udecode/plate-alignment": "41.0.0",
-    "@udecode/plate-autoformat": "41.0.0",
-    "@udecode/plate-basic-marks": "41.0.0",
-    "@udecode/plate-break": "41.0.0",
-    "@udecode/plate-common": "41.0.13",
-    "@udecode/plate-core": "41.0.13",
-    "@udecode/plate-cursor": "41.0.0",
-    "@udecode/plate-docx": "41.0.10",
-    "@udecode/plate-font": "41.0.12",
-    "@udecode/plate-heading": "41.0.0",
-    "@udecode/plate-indent": "41.0.0",
-    "@udecode/plate-list": "41.0.0",
-    "@udecode/plate-resizable": "41.0.0",
-    "@udecode/plate-table": "41.0.9",
-    "@udecode/plate-yjs": "41.0.0",
-    "@udecode/slate-react": "41.0.5",
-    "qs": "6.13.1",
+    "@udecode/plate": "43.0.5",
+    "@udecode/plate-alignment": "43.0.0",
+    "@udecode/plate-autoformat": "43.0.0",
+    "@udecode/plate-basic-marks": "43.0.1",
+    "@udecode/plate-break": "43.0.0",
+    "@udecode/plate-core": "43.0.5",
+    "@udecode/plate-cursor": "43.0.0",
+    "@udecode/plate-docx": "43.0.5",
+    "@udecode/plate-heading": "43.0.0",
+    "@udecode/plate-indent": "43.0.0",
+    "@udecode/plate-list": "43.0.0",
+    "@udecode/plate-node-id": "43.0.3",
+    "@udecode/plate-resizable": "43.0.0",
+    "@udecode/plate-table": "43.0.3",
+    "@udecode/plate-yjs": "43.0.0",
+    "qs": "6.14.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-redux": "9.2.0",
-    "react-router": "7.1.1",
-    "react-router-dom": "7.1.1",
-    "slate": "0.112.0",
-    "slate-history": "0.110.3",
-    "slate-react": "0.112.0",
+    "react-router": "7.1.3",
+    "react-router-dom": "7.1.3",
     "styled-components": "6.1.14",
-    "yjs": "13.6.21"
+    "yjs": "13.6.23"
   }
 }

frontend/src/components/malteksteksjon-references/preview.tsx

@@ -12,7 +12,7 @@ import type { IMaltekstseksjon } from '@app/types/maltekstseksjoner/responses';
 import type { IRichText, IText } from '@app/types/texts/responses';
 import { Heading, Loader } from '@navikt/ds-react';
 import { skipToken } from '@reduxjs/toolkit/query';
-import { Plate, usePlateEditor } from '@udecode/plate-common/react';
+import { Plate, usePlateEditor } from '@udecode/plate/react';
 import { useCallback, useEffect, useState } from 'react';
 import { styled } from 'styled-components';
 

frontend/src/components/maltekstseksjoner/texts/text-draft/text-draft.tsx

@@ -16,8 +16,6 @@ import { RichTextTypes } from '@app/types/common-text-types';
 import { LANGUAGES, type Language, isLanguage } from '@app/types/texts/language';
 import type { IDraftRichText } from '@app/types/texts/responses';
 import { BodyShort, HStack, HelpText, Label, Loader, Switch, Tooltip, VStack } from '@navikt/ds-react';
-import { getEndPoint } from '@udecode/plate-common';
-import { focusEditor, isEditorFocused } from '@udecode/plate-common/react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { areDescendantsEqual } from '../../../../functions/are-descendants-equal';
 
@@ -50,10 +48,10 @@ export const DraftText = ({ text, isActive, setActive, ...rest }: Props) => {
   }, [text.richText]);
 
   useEffect(() => {
-    if (isActive && editorRef.current !== null && !isEditorFocused(editorRef.current)) {
+    if (isActive && editorRef.current !== null && !editorRef.current.api.isFocused()) {
       setTimeout(() => {
         if (editorRef.current !== null) {
-          focusEditor(editorRef.current, getEndPoint(editorRef.current, []));
+          editorRef.current.tf.focus({ at: editorRef.current.api.end([]) });
         }
       }, 0);
     }

frontend/src/components/smart-editor/bookmarks/bookmarks.tsx

@@ -5,8 +5,7 @@ import { BookmarkPlugin } from '@app/plate/plugins/bookmark';
 import { type FormattedText, useMyPlateEditorState } from '@app/plate/types';
 import { BookmarkFillIcon, TrashIcon } from '@navikt/aksel-icons';
 import { Button } from '@navikt/ds-react';
-import { type TNode, getNodeString, unsetNodes } from '@udecode/plate-common';
-import { toDOMNode } from '@udecode/plate-common/react';
+import { NodeApi, type TNode } from '@udecode/plate';
 import { styled } from 'styled-components';
 
 interface Props {
@@ -21,7 +20,7 @@ export const Bookmarks = ({ editorId }: Props) => {
     return null;
   }
 
-  const onClick = (node: TNode) => toDOMNode(editor, node)?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  const onClick = (node: TNode) => editor.api.toDOMNode(node)?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
 
   return (
     <BookmarkList>
@@ -38,7 +37,7 @@ export const Bookmarks = ({ editorId }: Props) => {
           return null;
         }
 
-        const content = nodes.map((n) => getNodeString(n)).join('');
+        const content = nodes.map((n) => NodeApi.string(n)).join('');
 
         return (
           <BookmarkListItem key={key}>
@@ -56,7 +55,7 @@ export const Bookmarks = ({ editorId }: Props) => {
               variant="tertiary-neutral"
               onClick={() => {
                 pushEvent('remove-bookmark', 'smart-editor');
-                unsetNodes<FormattedText>(editor, [BookmarkPlugin.key, key], {
+                editor.tf.unsetNodes<FormattedText>([BookmarkPlugin.key, key], {
                   match: (n) => hasOwn(n, key),
                   mode: 'lowest',
                   at: [],

frontend/src/components/smart-editor/bookmarks/positioned.tsx

@@ -12,7 +12,6 @@ import { BASE_FONT_SIZE } from '@app/plate/components/get-scaled-em';
 import { useMyPlateEditorRef } from '@app/plate/types';
 import { BookmarkFillIcon, TrashFillIcon } from '@navikt/aksel-icons';
 import { Tooltip } from '@navikt/ds-react';
-import { setNodes } from '@udecode/plate-common';
 import { useCallback, useContext, useMemo, useState } from 'react';
 import { styled } from 'styled-components';
 
@@ -43,7 +42,7 @@ export const PositionedBookmarks = () => {
   const onDelete = useCallback(
     (id: string) => {
       pushEvent('remove-bookmark', 'smart-editor');
-      setNodes(editorRef, { [id]: undefined }, { match: (n) => id in n, mode: 'lowest', at: [] });
+      editorRef.tf.setNodes({ [id]: undefined }, { match: (n) => id in n, mode: 'lowest', at: [] });
     },
     [editorRef],
   );

frontend/src/components/smart-editor/bookmarks/use-bookmarks.ts

@@ -1,12 +1,12 @@
 import { BOOKMARK_PREFIX } from '@app/components/smart-editor/constants';
 import { type FormattedText, useMyPlateEditorState } from '@app/plate/types';
-import { isText } from '@udecode/plate-common';
+import { TextApi } from '@udecode/plate';
 
 export const useBookmarks = (): [string, FormattedText[]][] => {
   const editor = useMyPlateEditorState();
 
   const bookmarkEntries = editor.nodes<FormattedText>({
-    match: (n) => isText(n) && Object.keys(n).some((k) => k.startsWith(BOOKMARK_PREFIX)),
+    match: (n) => TextApi.isText(n) && Object.keys(n).some((k) => k.startsWith(BOOKMARK_PREFIX)),
     at: [],
   });
 

frontend/src/components/smart-editor/comments/connect-thread.ts

@@ -1,15 +1,14 @@
 import { COMMENT_PREFIX } from '@app/components/smart-editor/constants';
 import { CommentsPlugin } from '@app/plate/plugins/comments';
 import type { RichTextEditor, RootElement } from '@app/plate/types';
-import { isText, setNodes, unsetNodes } from '@udecode/plate-common';
+import { TextApi } from '@udecode/plate';
 import type { Selection } from 'slate';
 
 export const connectCommentThread = (editor: RichTextEditor, selection: Selection, threadId: string) => {
-  setNodes(
-    editor,
+  editor.tf.setNodes(
     { [CommentsPlugin.key]: true, [COMMENT_PREFIX + threadId]: true },
     {
-      match: isText,
+      match: TextApi.isText,
       mode: 'lowest',
       split: true,
       hanging: true,
@@ -21,7 +20,7 @@ export const connectCommentThread = (editor: RichTextEditor, selection: Selectio
 export const disconnectCommentThread = (editor: RichTextEditor, threadId: string) => {
   const key = COMMENT_PREFIX + threadId;
 
-  unsetNodes<RootElement>(editor, key, {
+  editor.tf.unsetNodes<RootElement>(key, {
     match: (node) => Object.hasOwn(node, key),
     split: true,
     at: [],

frontend/src/components/smart-editor/comments/expandable-thread.tsx

@@ -3,8 +3,6 @@ import { SmartEditorContext } from '@app/components/smart-editor/context';
 import { useOnClickOutside } from '@app/hooks/use-on-click-outside';
 import { useMyPlateEditorRef } from '@app/plate/types';
 import type { ISmartEditorComment } from '@app/types/smart-editor/comments';
-import { findNode } from '@udecode/plate-common';
-import { toDOMNode } from '@udecode/plate-common/react';
 import { useCallback, useContext, useEffect, useRef } from 'react';
 import { COMMENT_PREFIX } from '../constants';
 
@@ -44,14 +42,14 @@ export const ExpandableThread = ({ thread, isFocused, style, isOrphan = false, i
         return;
       }
 
-      const leafEntry = findNode(editor, { at: [], match: { [`${COMMENT_PREFIX}${thread.id}`]: true } });
+      const leafEntry = editor.api.node({ at: [], match: { [`${COMMENT_PREFIX}${thread.id}`]: true } });
 
       if (leafEntry === undefined) {
         return;
       }
 
       const [leafNode] = leafEntry;
-      const domNode = toDOMNode(editor, leafNode);
+      const domNode = editor.api.toDOMNode(leafNode);
 
       if (domNode === undefined) {
         return;

frontend/src/components/smart-editor/comments/new-comment.tsx

@@ -8,8 +8,7 @@ import { useGetMySignatureQuery } from '@app/redux-api/bruker';
 import { usePostCommentMutation } from '@app/redux-api/smart-editor-comments';
 import { Loader } from '@navikt/ds-react';
 import { skipToken } from '@reduxjs/toolkit/query';
-import { isCollapsed } from '@udecode/plate-common';
-import { focusEditor } from '@udecode/plate-common/react';
+import { RangeApi } from '@udecode/plate';
 import { useCallback, useContext, useEffect, useRef } from 'react';
 import { StyledNewThread } from './styled-components';
 import { WriteComment } from './write-comment/write-comment';
@@ -31,7 +30,7 @@ export const NewComment = ({ container }: Props) => {
 
   const onNewThread = useCallback(
     (threadId: string) => {
-      if (editor === null || newCommentSelection === null || isCollapsed(newCommentSelection)) {
+      if (editor === null || newCommentSelection === null || RangeApi.isCollapsed(newCommentSelection)) {
         return;
       }
 
@@ -72,14 +71,14 @@ export const NewComment = ({ container }: Props) => {
         setNewCommentSelection(null);
         setTimeout(() => {
           setFocusedThreadId(id);
-          focusEditor(editor);
+          editor.tf.focus();
         }, 0);
       });
   };
 
   const close = () => {
     setNewCommentSelection(null);
-    focusEditor(editor);
+    editor.tf.focus();
   };
 
   return (

frontend/src/components/smart-editor/comments/use-threads.ts

@@ -5,8 +5,9 @@ import { useMyPlateEditorState } from '@app/plate/types';
 import { useGetCommentsQuery } from '@app/redux-api/smart-editor-comments';
 import type { ISmartEditorComment } from '@app/types/smart-editor/comments';
 import { skipToken } from '@reduxjs/toolkit/query';
+import { ElementApi } from '@udecode/plate';
 import { useContext, useMemo } from 'react';
-import { type Descendant, Text } from 'slate';
+import type { Descendant } from 'slate';
 import { COMMENT_PREFIX } from '../constants';
 
 export interface FocusedComment extends ISmartEditorComment {
@@ -73,7 +74,7 @@ export const useThreads = (): Threads => {
 
 const getRichTextThreadIds = (richText: Descendant[]): string[] =>
   richText.flatMap<string>((child) => {
-    if (Text.isText(child)) {
+    if (!ElementApi.isElement(child)) {
       return Object.keys(child)
         .filter((key) => key.startsWith(COMMENT_PREFIX))
         .map((key) => key.replace(COMMENT_PREFIX, ''));

frontend/src/components/smart-editor/context.tsx

@@ -6,7 +6,7 @@ import {
 } from '@app/hooks/settings/use-setting';
 import { DistribusjonsType, type ISmartDocument } from '@app/types/documents/documents';
 import { TemplateIdEnum } from '@app/types/smart-editor/template-enums';
-import type { TRange } from '@udecode/plate-common';
+import type { TRange } from '@udecode/plate';
 import { type MutableRefObject, createContext, useRef, useState } from 'react';
 
 const noop = () => {};

frontend/src/components/smart-editor/functions/get-positioned-items.ts

@@ -2,7 +2,7 @@ import type { FocusedComment } from '@app/components/smart-editor/comments/use-t
 import { COMMENT_PREFIX } from '@app/components/smart-editor/constants';
 import { calculateRangePosition } from '@app/plate/functions/range-position';
 import type { FormattedText, RichTextEditor } from '@app/plate/types';
-import { findNode, isText } from '@udecode/plate-common';
+import { TextApi } from '@udecode/plate';
 
 export enum ItemType {
   THREAD = 'thread',
@@ -49,7 +49,7 @@ export const getPositionedItems = <T extends ThreadData | BookmarkData>(
 
     const mark = item.type === ItemType.THREAD ? `${COMMENT_PREFIX}${item.id}` : item.id;
 
-    const leafEntry = findNode(editor, { at: [], match: (n) => isText(n) && Object.hasOwn(n, mark) });
+    const leafEntry = editor.api.node({ at: [], match: (n) => TextApi.isText(n) && Object.hasOwn(n, mark) });
 
     if (leafEntry === undefined) {
       continue;

frontend/src/components/smart-editor/gode-formuleringer/add-button.tsx

@@ -1,8 +1,9 @@
+import { useSelection } from '@app/plate/hooks/use-selection';
 import type { RichTextEditor } from '@app/plate/types';
 import { Button } from '@navikt/ds-react';
-import type { Value } from '@udecode/plate-common';
+import type { Value } from '@udecode/plate';
 import { styled } from 'styled-components';
-import { insertGodFormulering, isAvailable } from './insert';
+import { insertGodFormulering } from './insert';
 
 interface AddButtonProps {
   editor: RichTextEditor;
@@ -13,7 +14,8 @@ interface AddButtonProps {
 }
 
 export const AddButton = ({ editor, content, children, title = children, disabledTitle }: AddButtonProps) => {
-  const disabled = !isAvailable(editor);
+  const selection = useSelection();
+  const disabled = selection === null;
 
   return (
     <StyledButton

frontend/src/components/smart-editor/gode-formuleringer/god-formulering.tsx

@@ -4,7 +4,7 @@ import { OUTLINE_WIDTH, godFormuleringBaseStyle } from '@app/components/smart-ed
 import { SPELL_CHECK_LANGUAGES, useSmartEditorLanguage } from '@app/hooks/use-smart-editor-language';
 import { KabalPlateEditor } from '@app/plate/plate-editor';
 import { previewComponents, previewPlugins } from '@app/plate/plugins/plugin-sets/preview';
-import { type KabalValue, type RichTextEditor, useMyPlateEditorState } from '@app/plate/types';
+import { type KabalValue, type RichTextEditor, useMyPlateEditorRef } from '@app/plate/types';
 import type { NonNullableGodFormulering } from '@app/types/texts/consumer';
 import { LANGUAGE_NAMES } from '@app/types/texts/language';
 import { CalendarIcon, ChevronDownIcon, ChevronUpIcon } from '@navikt/aksel-icons';
@@ -21,7 +21,7 @@ type Props = NonNullableGodFormulering & {
 export const GodFormulering = ({ title, richText, publishedDateTime, isFocused, onClick, id, language }: Props) => {
   const ref = useRef<HTMLDivElement>(null);
   const [isExpanded, setIsExpanded] = useState(false);
-  const mainEditor = useMyPlateEditorState();
+  const mainEditor = useMyPlateEditorRef();
   const primaryLanguage = useSmartEditorLanguage();
 
   const editor = usePlateEditor<KabalValue, (typeof previewPlugins)[0]>({

frontend/src/components/smart-editor/gode-formuleringer/gode-formuleringer.tsx

@@ -20,7 +20,6 @@ import type { TemplateIdEnum } from '@app/types/smart-editor/template-enums';
 import type { IConsumerText, NonNullableGodFormulering } from '@app/types/texts/consumer';
 import { LightBulbIcon, XMarkIcon } from '@navikt/aksel-icons';
 import { Button } from '@navikt/ds-react';
-import { focusEditor } from '@udecode/plate-common/react';
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Filter } from './filter';
 import { insertGodFormulering } from './insert';
@@ -136,7 +135,7 @@ export const GodeFormuleringer = ({ templateId }: Props) => {
         }
 
         if (editor !== null) {
-          focusEditor(editor);
+          editor.tf.focus();
         }
 
         return setShowGodeFormuleringer(false);