Smart editor:

- Put canManage in context instead of calling it from components - Make placeholder work in redaktør mode (no oppgave references) Co-authored-by: Christian Skrøvseth <[email protected]>
navikt · Oct 4, 2024 · 6f0b411 · 6f0b411
1 parent 6614cf5
commit 6f0b411
Show file tree

Hide file tree

Showing 14 changed files with 40 additions and 44 deletions.
diff --git a/frontend/src/components/smart-editor/context.tsx b/frontend/src/components/smart-editor/context.tsx
@@ -1,5 +1,6 @@
 import { TRange } from '@udecode/plate-common';
 import { createContext, useState } from 'react';
+import { useCanManageDocument } from '@app/components/smart-editor/hooks/use-can-edit-document';
 import {
   useSmartEditorAnnotationsAtOrigin,
   useSmartEditorGodeFormuleringerOpen,
@@ -21,6 +22,7 @@ interface ISmartEditorContext extends Pick<ISmartDocument, 'templateId' | 'dokum
   setShowAnnotationsAtOrigin: (show: boolean) => void;
   sheetRef: HTMLDivElement | null;
   setSheetRef: (ref: HTMLDivElement | null) => void;
+  canManage: boolean;
 }
 
 export const SmartEditorContext = createContext<ISmartEditorContext>({
@@ -37,6 +39,7 @@ export const SmartEditorContext = createContext<ISmartEditorContext>({
   setShowAnnotationsAtOrigin: noop,
   sheetRef: null,
   setSheetRef: noop,
+  canManage: false,
 });
 
 interface Props {
@@ -53,6 +56,7 @@ export const SmartEditorContextComponent = ({ children, smartDocument }: Props)
   const { value: showAnnotationsAtOrigin = false, setValue: setShowAnnotationsAtOrigin } =
     useSmartEditorAnnotationsAtOrigin();
   const [sheetRef, setSheetRef] = useState<HTMLDivElement | null>(null);
+  const canManage = useCanManageDocument(templateId);
 
   return (
     <SmartEditorContext.Provider
@@ -70,6 +74,7 @@ export const SmartEditorContextComponent = ({ children, smartDocument }: Props)
         setShowAnnotationsAtOrigin,
         sheetRef,
         setSheetRef,
+        canManage,
       }}
     >
       {children}

diff --git a/frontend/src/plate/components/header-footer.tsx b/frontend/src/plate/components/header-footer.tsx
@@ -5,7 +5,6 @@ import { useCallback, useContext, useEffect, useState } from 'react';
 import { styled } from 'styled-components';
 import { StaticDataContext } from '@app/components/app/static-data-context';
 import { SmartEditorContext } from '@app/components/smart-editor/context';
-import { useCanManageDocument } from '@app/components/smart-editor/hooks/use-can-edit-document';
 import { useHeaderFooterQuery } from '@app/components/smart-editor/hooks/use-query';
 import { AddNewParagraphAbove, AddNewParagraphBelow } from '@app/plate/components/common/add-new-paragraph-buttons';
 import { SectionContainer, SectionToolbar, SectionTypeEnum } from '@app/plate/components/styled-components';
@@ -53,8 +52,7 @@ const RenderHeaderFooter = ({ element, attributes, children }: PlateRenderElemen
 
   const editor = useMyPlateEditorRef();
   const query = useHeaderFooterQuery(textType);
-  const { templateId } = useContext(SmartEditorContext);
-  const canManage = useCanManageDocument(templateId);
+  const { canManage } = useContext(SmartEditorContext);
 
   const loadMaltekst = useCallback(
     async (e: ElementTypes) => {

diff --git a/frontend/src/plate/components/legacy-redigerbar-maltekst.tsx b/frontend/src/plate/components/legacy-redigerbar-maltekst.tsx
@@ -4,7 +4,6 @@ import { skipToken } from '@reduxjs/toolkit/query';
 import { PlateElement, PlateRenderElementProps, findNodePath, replaceNodeChildren } from '@udecode/plate-common';
 import { useCallback, useContext, useEffect, useRef } from 'react';
 import { SmartEditorContext } from '@app/components/smart-editor/context';
-import { useCanManageDocument } from '@app/components/smart-editor/hooks/use-can-edit-document';
 import { useQuery } from '@app/components/smart-editor/hooks/use-query';
 import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave';
 import { AddNewParagraphs } from '@app/plate/components/common/add-new-paragraph-buttons';
@@ -38,7 +37,7 @@ export const LegacyRedigerbarMaltekst = ({
   editor,
 }: PlateRenderElementProps<EditorValue, RedigerbarMaltekstElement>) => {
   const { data: oppgave, isLoading: oppgaveIsLoading } = useOppgave();
-  const { templateId } = useContext(SmartEditorContext);
+  const { canManage, templateId } = useContext(SmartEditorContext);
 
   const query = useQuery({ textType: RichTextTypes.REDIGERBAR_MALTEKST, section: element.section, templateId });
 
@@ -47,7 +46,6 @@ export const LegacyRedigerbarMaltekst = ({
   const path = findNodePath(editor, element);
 
   const isInitialized = useRef(!isNodeEmpty(element));
-  const canManage = useCanManageDocument(templateId);
 
   const insertRedigerbarMaltekst = useCallback(async () => {
     if (query === skipToken || path === undefined || oppgaveIsLoading || oppgave === undefined) {

diff --git a/frontend/src/plate/components/maltekst/legacy-maltekst.tsx b/frontend/src/plate/components/maltekst/legacy-maltekst.tsx
@@ -12,7 +12,6 @@ import {
 } from '@udecode/plate-common';
 import { useContext, useEffect } from 'react';
 import { SmartEditorContext } from '@app/components/smart-editor/context';
-import { useCanManageDocument } from '@app/components/smart-editor/hooks/use-can-edit-document';
 import { useQuery } from '@app/components/smart-editor/hooks/use-query';
 import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave';
 import { AddNewParagraphs } from '@app/plate/components/common/add-new-paragraph-buttons';
@@ -36,10 +35,9 @@ export const LegacyMaltekst = ({
   element,
 }: PlateRenderElementProps<EditorValue, MaltekstElement>) => {
   const { data: oppgave, isLoading: oppgaveIsLoading } = useOppgave();
-  const { templateId } = useContext(SmartEditorContext);
+  const { canManage, templateId } = useContext(SmartEditorContext);
   const query = useQuery({ textType: RichTextTypes.MALTEKST, section: element.section, templateId });
   const { data, isLoading, isFetching, refetch } = useGetConsumerTextsQuery(query);
-  const canManage = useCanManageDocument(templateId);
 
   useEffect(() => {
     if (isLoading || isFetching || data === undefined || oppgaveIsLoading || oppgave === undefined) {

diff --git a/frontend/src/plate/components/maltekst/maltekst.tsx b/frontend/src/plate/components/maltekst/maltekst.tsx
@@ -11,7 +11,6 @@ import {
 } from '@udecode/plate-common';
 import { useContext, useMemo } from 'react';
 import { SmartEditorContext } from '@app/components/smart-editor/context';
-import { useCanManageDocument } from '@app/components/smart-editor/hooks/use-can-edit-document';
 import { useSmartEditorLanguage } from '@app/hooks/use-smart-editor-language';
 import { ToolbarButtonWithConfirm } from '@app/plate/components/common/toolbar-button-with-confirm';
 import { LegacyMaltekst } from '@app/plate/components/maltekst/legacy-maltekst';
@@ -32,8 +31,7 @@ export const Maltekst = ({
   const [getText, { isFetching }] = useLazyGetConsumerTextByIdQuery();
   const language = useSmartEditorLanguage();
   const isInRegelverk = useMemo(() => getIsInRegelverk(editor, element), [editor, element]);
-  const { templateId } = useContext(SmartEditorContext);
-  const canManage = useCanManageDocument(templateId);
+  const { canManage } = useContext(SmartEditorContext);
 
   // TODO: Remove this when all smart documents in prod use maltekstseksjon
   if (element.id === undefined) {

diff --git a/frontend/src/plate/components/maltekstseksjon/maltekstseksjon.tsx b/frontend/src/plate/components/maltekstseksjon/maltekstseksjon.tsx
@@ -2,7 +2,6 @@ import { SkipToken, skipToken } from '@reduxjs/toolkit/query';
 import { PlateElement, PlateRenderElementProps, isEditorReadOnly, setNodes } from '@udecode/plate-common';
 import { useCallback, useContext, useMemo } from 'react';
 import { SmartEditorContext } from '@app/components/smart-editor/context';
-import { useCanManageDocument } from '@app/components/smart-editor/hooks/use-can-edit-document';
 import { useMaltekstseksjonQuery } from '@app/components/smart-editor/hooks/use-query';
 import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave';
 import { useSmartEditorLanguage } from '@app/hooks/use-smart-editor-language';
@@ -32,10 +31,9 @@ export const Maltekstseksjon = ({
 }: PlateRenderElementProps<EditorValue, MaltekstseksjonElement>) => {
   const oppgave = useRequiredOppgave();
   const language = useSmartEditorLanguage();
-  const { templateId } = useContext(SmartEditorContext);
+  const { canManage, templateId } = useContext(SmartEditorContext);
   const query = useMaltekstseksjonQuery(templateId, element.section);
   const path = usePath(editor, element);
-  const canManage = useCanManageDocument(templateId);
   const isUpdated = useMemo(
     () => language === element.language && areQueriesEqual(query, element.query),
     [language, element.language, element.query, query],

diff --git a/frontend/src/plate/components/placeholder/placeholder.tsx b/frontend/src/plate/components/placeholder/placeholder.tsx
@@ -9,7 +9,6 @@ import {
 } from '@udecode/plate-common';
 import { MouseEvent, useCallback, useContext, useEffect, useMemo } from 'react';
 import { SmartEditorContext } from '@app/components/smart-editor/context';
-import { useCanManageDocument } from '@app/components/smart-editor/hooks/use-can-edit-document';
 import { removeEmptyCharInText } from '@app/functions/remove-empty-char-in-text';
 import {
   cleanText,
@@ -25,20 +24,31 @@ import {
 import { DeleteButton, Wrapper } from '@app/plate/components/placeholder/styled-components';
 import { EditorValue, PlaceholderElement } from '@app/plate/types';
 
-export const Placeholder = ({
-  element,
-  children,
-  attributes,
-  editor,
-}: PlateRenderElementProps<EditorValue, PlaceholderElement>) => {
+export const RedaktørPlaceholder = (props: PlateRenderElementProps<EditorValue, PlaceholderElement>) => (
+  <Placeholder {...props} canManage />
+);
+
+export const PreviewPlaceholder = (props: PlateRenderElementProps<EditorValue, PlaceholderElement>) => (
+  <Placeholder {...props} canManage={false} />
+);
+
+export const SaksbehandlerPlaceholder = (props: PlateRenderElementProps<EditorValue, PlaceholderElement>) => {
+  const { canManage } = useContext(SmartEditorContext);
+
+  return <Placeholder {...props} canManage={canManage} />;
+};
+
+interface PlaceholderProps extends PlateRenderElementProps<EditorValue, PlaceholderElement> {
+  canManage: boolean;
+}
+
+const Placeholder = ({ element, children, attributes, editor, canManage }: PlaceholderProps) => {
   const path = findNodePath(editor, element);
   const text: string = useMemo(() => element.children.map((c) => c.text).join(''), [element.children]);
   const hasNoVisibleText = useMemo(() => getHasNoVisibleText(text), [text]);
   const isReadOnly = useEditorReadOnly();
   const isDragging = window.getSelection()?.isCollapsed === false;
   const containsEmptyChar = getContainsEmptyChar(text);
-  const { templateId } = useContext(SmartEditorContext);
-  const canManage = useCanManageDocument(templateId);
 
   const onClick = useCallback(
     (e: React.MouseEvent) => {

diff --git a/frontend/src/plate/components/redigerbar-maltekst.tsx b/frontend/src/plate/components/redigerbar-maltekst.tsx
@@ -9,7 +9,6 @@ import {
 } from '@udecode/plate-common';
 import { useContext } from 'react';
 import { SmartEditorContext } from '@app/components/smart-editor/context';
-import { useCanManageDocument } from '@app/components/smart-editor/hooks/use-can-edit-document';
 import { useSmartEditorLanguage } from '@app/hooks/use-smart-editor-language';
 import { LegacyRedigerbarMaltekst } from '@app/plate/components/legacy-redigerbar-maltekst';
 import { SectionContainer, SectionToolbar, SectionTypeEnum } from '@app/plate/components/styled-components';
@@ -26,8 +25,7 @@ export const RedigerbarMaltekst = ({
 }: PlateRenderElementProps<EditorValue, RedigerbarMaltekstElement>) => {
   const [getText, { isFetching }] = useLazyGetConsumerTextByIdQuery();
   const language = useSmartEditorLanguage();
-  const { templateId } = useContext(SmartEditorContext);
-  const canManage = useCanManageDocument(templateId);
+  const { canManage } = useContext(SmartEditorContext);
 
   const reload = async () => {
     if (element.id === undefined) {

diff --git a/frontend/src/plate/components/regelverk.tsx b/frontend/src/plate/components/regelverk.tsx
@@ -11,7 +11,6 @@ import {
 import { useCallback, useContext, useEffect, useState } from 'react';
 import { styled } from 'styled-components';
 import { SmartEditorContext } from '@app/components/smart-editor/context';
-import { useCanManageDocument } from '@app/components/smart-editor/hooks/use-can-edit-document';
 import { useRegelverkQuery } from '@app/components/smart-editor/hooks/use-query';
 import { sortWithOrdinals } from '@app/functions/sort-with-ordinals/sort-with-ordinals';
 import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave';
@@ -34,8 +33,7 @@ export const Regelverk = ({
   element,
   editor,
 }: PlateRenderElementProps<EditorValue, RegelverkElement>) => {
-  const { templateId } = useContext(SmartEditorContext);
-  const canManage = useCanManageDocument(templateId);
+  const { canManage } = useContext(SmartEditorContext);
 
   return (
     <PlateElement attributes={attributes} element={element} editor={editor} onDragStart={onPlateContainerDragStart}>
@@ -78,8 +76,7 @@ export const RegelverkContainer = ({
   const [loading, setLoading] = useState(false);
   const { data: oppgave } = useOppgave();
   const query = useRegelverkQuery();
-  const { templateId } = useContext(SmartEditorContext);
-  const canManage = useCanManageDocument(templateId);
+  const { canManage } = useContext(SmartEditorContext);
 
   const [getTexts] = useLazyGetConsumerTextsQuery();
 

diff --git a/frontend/src/plate/components/signature/signature.tsx b/frontend/src/plate/components/signature/signature.tsx
@@ -2,7 +2,6 @@ import { PlateElement, PlateRenderElementProps, setNodes, useEditorReadOnly } fr
 import { InputHTMLAttributes, useContext } from 'react';
 import { styled } from 'styled-components';
 import { SmartEditorContext } from '@app/components/smart-editor/context';
-import { useCanManageDocument } from '@app/components/smart-editor/hooks/use-can-edit-document';
 import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave';
 import { AddNewParagraphs } from '@app/plate/components/common/add-new-paragraph-buttons';
 import { ptToEm, pxToEm } from '@app/plate/components/get-scaled-em';
@@ -21,8 +20,7 @@ export const Signature = ({
   const isReadOnly = useEditorReadOnly();
   const { data: signature } = useGetMySignatureQuery();
   const { data: oppgave } = useOppgave();
-  const { templateId } = useContext(SmartEditorContext);
-  const canManage = useCanManageDocument(templateId);
+  const { canManage, templateId } = useContext(SmartEditorContext);
 
   if (oppgave === undefined || signature === undefined) {
     return null;

diff --git a/frontend/src/plate/plugins/plugin-sets/preview.ts b/frontend/src/plate/plugins/plugin-sets/preview.ts
@@ -10,7 +10,7 @@ import { ListItem, OrderedList, UnorderedList } from '@app/plate/components/list
 import { Maltekst } from '@app/plate/components/maltekst/maltekst';
 import { PageBreak } from '@app/plate/components/page-break';
 import { Paragraph } from '@app/plate/components/paragraph';
-import { Placeholder } from '@app/plate/components/placeholder/placeholder';
+import { PreviewPlaceholder } from '@app/plate/components/placeholder/placeholder';
 import { TableCellElement } from '@app/plate/components/plate-ui/table-cell-element';
 import { TableElement } from '@app/plate/components/plate-ui/table-element';
 import { TableRowElement } from '@app/plate/components/plate-ui/table-row-element';
@@ -60,7 +60,7 @@ export const previewPlugins = createPlugins(
       [ELEMENT_TR]: TableRowElement,
 
       // Smart blocks
-      [ELEMENT_PLACEHOLDER]: Placeholder,
+      [ELEMENT_PLACEHOLDER]: PreviewPlaceholder,
       [ELEMENT_MALTEKST]: Maltekst,
       [ELEMENT_REDIGERBAR_MALTEKST]: RedigerbarMaltekst,
       [ELEMENT_LABEL_CONTENT]: LabelContent,

diff --git a/frontend/src/plate/plugins/plugin-sets/redaktoer.ts b/frontend/src/plate/plugins/plugin-sets/redaktoer.ts
@@ -7,7 +7,7 @@ import { HeadingOne, HeadingThree, HeadingTwo } from '@app/plate/components/head
 import { ListItem, OrderedList, UnorderedList } from '@app/plate/components/lists';
 import { PageBreak } from '@app/plate/components/page-break';
 import { Paragraph } from '@app/plate/components/paragraph';
-import { Placeholder } from '@app/plate/components/placeholder/placeholder';
+import { RedaktørPlaceholder } from '@app/plate/components/placeholder/placeholder';
 import { TableCellElement } from '@app/plate/components/plate-ui/table-cell-element';
 import { TableElement } from '@app/plate/components/plate-ui/table-element';
 import { TableRowElement } from '@app/plate/components/plate-ui/table-row-element';
@@ -36,6 +36,6 @@ export const redaktoerPlugins = createPlugins([...defaultPlugins, createRedaktoe
     [ELEMENT_TR]: TableRowElement,
 
     // Smart blocks
-    [ELEMENT_PLACEHOLDER]: Placeholder,
+    [ELEMENT_PLACEHOLDER]: RedaktørPlaceholder,
   },
 });
diff --git a/frontend/src/plate/plugins/plugin-sets/saksbehandler.ts b/frontend/src/plate/plugins/plugin-sets/saksbehandler.ts
@@ -18,7 +18,7 @@ import { Maltekst } from '@app/plate/components/maltekst/maltekst';
 import { Maltekstseksjon } from '@app/plate/components/maltekstseksjon/maltekstseksjon';
 import { PageBreak } from '@app/plate/components/page-break';
 import { Paragraph } from '@app/plate/components/paragraph';
-import { Placeholder } from '@app/plate/components/placeholder/placeholder';
+import { SaksbehandlerPlaceholder } from '@app/plate/components/placeholder/placeholder';
 import { TableCellElement } from '@app/plate/components/plate-ui/table-cell-element';
 import { TableElement } from '@app/plate/components/plate-ui/table-element';
 import { TableRowElement } from '@app/plate/components/plate-ui/table-row-element';
@@ -83,7 +83,7 @@ const components: Record<string, PlatePluginComponent> = {
   [ELEMENT_FOOTER]: HeaderFooter,
   [ELEMENT_HEADER]: HeaderFooter,
   [ELEMENT_LABEL_CONTENT]: LabelContent,
-  [ELEMENT_PLACEHOLDER]: Placeholder,
+  [ELEMENT_PLACEHOLDER]: SaksbehandlerPlaceholder,
   [ELEMENT_REGELVERK]: Regelverk,
   [ELEMENT_REGELVERK_CONTAINER]: RegelverkContainer,
   [ELEMENT_SIGNATURE]: Signature,

diff --git a/frontend/src/plate/toolbar/toolbars/saksbehandler-settings.tsx b/frontend/src/plate/toolbar/toolbars/saksbehandler-settings.tsx
@@ -8,20 +8,18 @@ import {
 } from '@app/components/settings/abbreviations/abbreviations';
 import { AbbreviationsExplanation } from '@app/components/settings/abbreviations/explanation';
 import { SmartEditorContext } from '@app/components/smart-editor/context';
-import { useCanManageDocument } from '@app/components/smart-editor/hooks/use-can-edit-document';
 import { useSetSmartEditorLanguage } from '@app/hooks/use-set-smart-editor-language';
 import { useSmartEditorLanguage } from '@app/hooks/use-smart-editor-language';
 import { pushEvent } from '@app/observability';
 import { ToolbarIconButton } from '@app/plate/toolbar/toolbarbutton';
 import { Language, isLanguage } from '@app/types/texts/language';
 
 export const SaksbehandlerSettings = () => {
-  const { showAnnotationsAtOrigin, setShowAnnotationsAtOrigin, templateId } = useContext(SmartEditorContext);
+  const { canManage, showAnnotationsAtOrigin, setShowAnnotationsAtOrigin } = useContext(SmartEditorContext);
   const modalRef = useRef<HTMLDialogElement>(null);
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const language = useSmartEditorLanguage();
   const [setLanguage] = useSetSmartEditorLanguage();
-  const canManage = useCanManageDocument(templateId);
 
   const onChangeLanguage = useCallback(
     (lang: string) => {