Nowrap dates, currencies and numbers

frontend/src/plate/components/nowrap.tsx

@@ -0,0 +1,18 @@
+import { Tooltip } from '@navikt/ds-react';
+import { PlateElement, PlateElementProps } from '@udecode/plate-common';
+import { styled } from 'styled-components';
+import { EditorValue, NowrapElement } from '../types';
+
+export const Nowrap = ({ children, element, ...props }: PlateElementProps<EditorValue, NowrapElement>) => (
+  <Tooltip content="Linjeskift forhindret">
+    <PlateElement as={NowrapStyle} {...props} element={element}>
+      {children}
+    </PlateElement>
+  </Tooltip>
+);
+
+const NowrapStyle = styled.span`
+  white-space: pre;
+  background-color: rgba(99, 70, 137, 0.2);
+  border-radius: 4px;
+`;

frontend/src/plate/functions/range-position.ts

@@ -25,8 +25,6 @@ export const calculateRangePosition = (
   });
 
   if (range === undefined) {
-    console.warn('Could not calculate position of floating toolbar. Range is undefined.', selectionStart);
-
     return null;
   }
 

frontend/src/plate/hooks/use-is-element-active.ts

@@ -1,4 +1,4 @@
-import { TElement, isBlock, isExpanded, someNode } from '@udecode/plate-common';
+import { TElement, isElement, isExpanded, someNode } from '@udecode/plate-common';
 import { useMyPlateEditorState } from '../types';
 
 export const useIsElementActive = (element: string) => {
@@ -9,7 +9,7 @@ export const useIsElementActive = (element: string) => {
   }
 
   return someNode<TElement>(editor, {
-    match: (n) => isBlock(editor, n) && n.type === element,
+    match: (n) => isElement(n) && n.type === element,
     mode: 'lowest',
   });
 };

frontend/src/plate/plugins/element-types.ts

@@ -11,6 +11,7 @@ export const ELEMENT_FOOTER = 'footer';
 export const ELEMENT_LABEL_CONTENT = 'label-content';
 export const ELEMENT_SIGNATURE = 'signature';
 export const ELEMENT_EMPTY_VOID = 'empty-void';
+export const ELEMENT_NOWRAP = 'nowrap';
 
 export const UNCHANGEABLE = [
   ELEMENT_HEADER,

frontend/src/plate/plugins/normalize-node.ts

@@ -29,15 +29,15 @@ import {
   createTableCell,
   createTableRow,
 } from '@app/plate/templates/helpers';
-import { RichTextEditorElement } from '@app/plate/types';
+import { RichText, RichTextEditorElement } from '@app/plate/types';
 
 export const createNormalizeNodePlugin = createPluginFactory({
   key: 'normalize',
   withOverrides: (editor) => {
     const { normalizeNode } = editor;
 
     // eslint-disable-next-line complexity
-    editor.normalizeNode<RichTextEditorElement> = ([node, path]) => {
+    editor.normalizeNode<RichTextEditorElement | RichText> = ([node, path]) => {
       if (isElement(node) && node.children.length === 0) {
         const [highestAncestorPath] = path;
         const highestAncestor =

frontend/src/plate/plugins/nowrap.ts

@@ -0,0 +1,9 @@
+import { createPluginFactory } from '@udecode/plate-common';
+import { ELEMENT_NOWRAP } from './element-types';
+
+export const createNowrapPlugin = createPluginFactory({
+  key: ELEMENT_NOWRAP,
+  isElement: true,
+  isVoid: false,
+  isInline: true,
+});

frontend/src/plate/plugins/plugin-sets/preview.ts

@@ -8,6 +8,7 @@ import { HeadingOne, HeadingThree, HeadingTwo } from '@app/plate/components/head
 import { LabelContent } from '@app/plate/components/label-content';
 import { ListItem, OrderedList, UnorderedList } from '@app/plate/components/lists';
 import { Maltekst } from '@app/plate/components/maltekst/maltekst';
+import { Nowrap } from '@app/plate/components/nowrap';
 import { PageBreak } from '@app/plate/components/page-break';
 import { Paragraph } from '@app/plate/components/paragraph';
 import { Placeholder } from '@app/plate/components/placeholder/placeholder';
@@ -19,13 +20,15 @@ import {
   ELEMENT_EMPTY_VOID,
   ELEMENT_LABEL_CONTENT,
   ELEMENT_MALTEKST,
+  ELEMENT_NOWRAP,
   ELEMENT_PAGE_BREAK,
   ELEMENT_PLACEHOLDER,
   ELEMENT_REDIGERBAR_MALTEKST,
 } from '@app/plate/plugins/element-types';
 import { createEmptyVoidPlugin } from '@app/plate/plugins/empty-void';
 import { createLabelContentPlugin } from '@app/plate/plugins/label-content';
 import { createMaltekstPlugin } from '@app/plate/plugins/maltekst';
+import { createNowrapPlugin } from '@app/plate/plugins/nowrap';
 import { createSaksbehandlerPlaceholderPlugin } from '@app/plate/plugins/placeholder/saksbehandler';
 import { defaultPlugins } from '@app/plate/plugins/plugin-sets/default';
 import { createRedigerbarMaltekstPlugin } from '@app/plate/plugins/redigerbar-maltekst';
@@ -38,10 +41,12 @@ export const previewPlugins = createPlugins(
     createRedigerbarMaltekstPlugin(),
     createLabelContentPlugin(),
     createEmptyVoidPlugin(),
+    createNowrapPlugin(),
   ],
   {
     components: {
       [ELEMENT_PARAGRAPH]: Paragraph,
+      [ELEMENT_NOWRAP]: Nowrap,
       [ELEMENT_PAGE_BREAK]: PageBreak,
 
       // Headings

frontend/src/plate/plugins/plugin-sets/saksbehandler.ts

@@ -11,6 +11,7 @@ import { LabelContent } from '@app/plate/components/label-content';
 import { ListItem, OrderedList, UnorderedList } from '@app/plate/components/lists';
 import { Maltekst } from '@app/plate/components/maltekst/maltekst';
 import { Maltekstseksjon } from '@app/plate/components/maltekstseksjon/maltekstseksjon';
+import { Nowrap } from '@app/plate/components/nowrap';
 import { PageBreak } from '@app/plate/components/page-break';
 import { Paragraph } from '@app/plate/components/paragraph';
 import { Placeholder } from '@app/plate/components/placeholder/placeholder';
@@ -31,6 +32,7 @@ import {
   ELEMENT_LABEL_CONTENT,
   ELEMENT_MALTEKST,
   ELEMENT_MALTEKSTSEKSJON,
+  ELEMENT_NOWRAP,
   ELEMENT_PAGE_BREAK,
   ELEMENT_PLACEHOLDER,
   ELEMENT_REDIGERBAR_MALTEKST,
@@ -43,6 +45,7 @@ import { createFooterPlugin, createHeaderPlugin } from '@app/plate/plugins/heade
 import { createLabelContentPlugin } from '@app/plate/plugins/label-content';
 import { createMaltekstPlugin } from '@app/plate/plugins/maltekst';
 import { createMaltekstseksjonPlugin } from '@app/plate/plugins/maltekstseksjon';
+import { createNowrapPlugin } from '@app/plate/plugins/nowrap';
 import { createSaksbehandlerPlaceholderPlugin } from '@app/plate/plugins/placeholder/saksbehandler';
 import { defaultPlugins } from '@app/plate/plugins/plugin-sets/default';
 import { createRedigerbarMaltekstPlugin } from '@app/plate/plugins/redigerbar-maltekst';
@@ -66,10 +69,12 @@ export const saksbehandlerPlugins = createPlugins(
     createSignaturePlugin(),
     createEmptyVoidPlugin(),
     createBookmarkPlugin(),
+    createNowrapPlugin(),
   ],
   {
     components: {
       [ELEMENT_PARAGRAPH]: Paragraph,
+      [ELEMENT_NOWRAP]: Nowrap,
       [ELEMENT_PAGE_BREAK]: PageBreak,
 
       // Headings

frontend/src/plate/toolbar/marks.tsx

@@ -1,17 +1,22 @@
+import { TrendFlatIcon } from '@navikt/aksel-icons';
 import { ClearFormatting, TextBold, TextItalic, TextUnderline } from '@styled-icons/fluentui-system-regular';
 import { MARK_BOLD, MARK_ITALIC, MARK_UNDERLINE } from '@udecode/plate-basic-marks';
 import {
   getPluginType,
+  isText,
   removeMark,
   someNode,
+  unwrapNodes,
   useMarkToolbarButton,
   useMarkToolbarButtonState,
+  wrapNodes,
 } from '@udecode/plate-common';
 import { MARK_COLOR } from '@udecode/plate-font';
 import { ELEMENT_H1, ELEMENT_H2, ELEMENT_H3 } from '@udecode/plate-heading';
 import { MOD_KEY } from '@app/keys';
+import { useIsElementActive } from '@app/plate/hooks/use-is-element-active';
 import { useIsUnchangeable } from '@app/plate/hooks/use-is-unchangeable';
-import { ELEMENT_PLACEHOLDER } from '@app/plate/plugins/element-types';
+import { ELEMENT_NOWRAP, ELEMENT_PLACEHOLDER } from '@app/plate/plugins/element-types';
 import { ToolbarIconButton } from '@app/plate/toolbar/toolbarbutton';
 import { EditorValue, useMyPlateEditorState } from '@app/plate/types';
 import { isOfElementTypesFn } from '@app/plate/utils/queries';
@@ -41,6 +46,8 @@ export const Marks = () => {
     props: { onClick: toggleUnderline, pressed: underlinePressed },
   } = useMarkToolbarButton(underlineState);
 
+  const nowrapActive = useIsElementActive(ELEMENT_NOWRAP);
+
   return (
     <>
       <ToolbarIconButton
@@ -70,6 +77,22 @@ export const Marks = () => {
         disabled={disabled}
       />
 
+      <ToolbarIconButton
+        label="Forhindr linjeskift"
+        onClick={() => {
+          if (!nowrapActive) {
+            wrapNodes(editor, { type: ELEMENT_NOWRAP, children: [] }, { split: true, mode: 'lowest', match: isText });
+
+            return;
+          }
+
+          unwrapNodes(editor, { match: { type: ELEMENT_NOWRAP }, split: false, mode: 'lowest' });
+        }}
+        icon={<TrendFlatIcon width={24} aria-hidden />}
+        active={nowrapActive}
+        disabled={disabled}
+      />
+
       <ToolbarIconButton
         label="Fjern formatering"
         icon={<ClearFormatting aria-hidden width={24} />}

frontend/src/plate/types.ts

@@ -30,6 +30,7 @@ import {
   ELEMENT_LABEL_CONTENT,
   ELEMENT_MALTEKST,
   ELEMENT_MALTEKSTSEKSJON,
+  ELEMENT_NOWRAP,
   ELEMENT_PAGE_BREAK,
   ELEMENT_PLACEHOLDER,
   ELEMENT_REDIGERBAR_MALTEKST,
@@ -70,6 +71,11 @@ interface BlockElement extends TElement {
  * Blocks
  */
 
+export interface NowrapElement extends BlockElement {
+  type: typeof ELEMENT_NOWRAP;
+  children: RichText[];
+}
+
 export interface ParagraphElement extends BlockElement, IndentableStyleProps, AlignableStyleProps {
   type: typeof ELEMENT_PARAGRAPH;
   children: (RichText | PlaceholderElement | LabelContentElement)[];