@ndla/ui 47.1.1 → 47.1.3

package/lib/locale/messages-nn.js

@@ -1059,7 +1059,8 @@ var messages = _objectSpread(_objectSpread({
       other: 'Andre grupper',
       grepCode: 'Grepkodar'
     },
-    wrongUserInfoDisclaimer: 'Dersom informasjonen er feil, må han oppdaterast av vertsorganisasjon/skuleeigar som brukaren tilhøyrer. Oversikt over brukarstøtte finst her: '
+    wrongUserInfoDisclaimer: 'Dersom informasjonen er feil, må han oppdaterast av vertsorganisasjon/skuleeigar som brukaren tilhøyrer. Oversikt over brukarstøtte finst her: ',
+    moderator: 'Moderator'
   },
   checkOutNewFeature: 'Sjekk ut ny funksjonalitet',
   slateBlockMenu: {

package/lib/locale/messages-se.d.ts

@@ -56,6 +56,7 @@ declare const messages: {
             grepCode: string;
         };
         wrongUserInfoDisclaimer: string;
+        moderator: string;
     };
     checkOutNewFeature: string;
     slateBlockMenu: {

package/lib/locale/messages-se.js

@@ -1059,7 +1059,8 @@ var messages = _objectSpread(_objectSpread({
       other: 'Eará joavkkut',
       grepCode: 'Grepkoda'
     },
-    wrongUserInfoDisclaimer: 'Jus leat boasttudieđut, de ferte organisašuvdna/skuvlaeaiggát masá geavaheaddji gullá ođasmahttit dan. Visogova geavaheaddjidoarjaga ektui gávnnat dás: '
+    wrongUserInfoDisclaimer: 'Jus leat boasttudieđut, de ferte organisašuvdna/skuvlaeaiggát masá geavaheaddji gullá ođasmahttit dan. Visogova geavaheaddjidoarjaga ektui gávnnat dás: ',
+    moderator: 'Muddenplána'
   },
   checkOutNewFeature: 'Iskka ođđa doaibmilvuođa',
   slateBlockMenu: {

package/lib/locale/messages-sma.d.ts

@@ -56,6 +56,7 @@ declare const messages: {
             grepCode: string;
         };
         wrongUserInfoDisclaimer: string;
+        moderator: string;
     };
     checkOutNewFeature: string;
     slateBlockMenu: {

package/lib/locale/messages-sma.js

@@ -1059,7 +1059,8 @@ var messages = _objectSpread(_objectSpread({
       other: 'Andre grupper',
       grepCode: 'Grepkodar'
     },
-    wrongUserInfoDisclaimer: 'Dersom informasjonen er feil, må den oppdateres av vertsorganisasjon/skoleeier som brukeren tilhører. Oversikt over brukerstøtte finnes her: '
+    wrongUserInfoDisclaimer: 'Dersom informasjonen er feil, må den oppdateres av vertsorganisasjon/skoleeier som brukeren tilhører. Oversikt over brukerstøtte finnes her: ',
+    moderator: 'Moderatijve'
   },
   checkOutNewFeature: 'Gïehtjh orre funksjonaliteetem',
   slateBlockMenu: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "47.1.1",
+  "version": "47.1.3",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,22 +31,22 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^2.2.28",
-    "@ndla/button": "^12.0.2",
-    "@ndla/carousel": "^4.0.5",
+    "@ndla/accordion": "^2.2.29",
+    "@ndla/button": "^12.0.3",
+    "@ndla/carousel": "^4.0.6",
     "@ndla/core": "^4.2.0",
     "@ndla/dropdown-menu": "^1.0.9",
-    "@ndla/forms": "^5.0.3",
+    "@ndla/forms": "^5.0.4",
     "@ndla/hooks": "^2.1.1",
-    "@ndla/icons": "^4.1.0",
-    "@ndla/licenses": "^7.1.4",
-    "@ndla/modal": "^5.0.2",
-    "@ndla/notion": "^6.0.3",
-    "@ndla/safelink": "^4.1.27",
-    "@ndla/select": "^3.1.0",
+    "@ndla/icons": "^4.1.1",
+    "@ndla/licenses": "^7.2.0",
+    "@ndla/modal": "^5.0.3",
+    "@ndla/notion": "^6.0.5",
+    "@ndla/safelink": "^4.1.28",
+    "@ndla/select": "^3.1.1",
     "@ndla/switch": "^1.1.15",
-    "@ndla/tabs": "^3.0.11",
-    "@ndla/tooltip": "^5.0.2",
+    "@ndla/tabs": "^3.1.0",
+    "@ndla/tooltip": "^5.0.3",
     "@ndla/typography": "^0.2.2",
     "@ndla/util": "^4.0.0",
     "@radix-ui/react-popover": "^1.0.7",
@@ -70,7 +70,7 @@
   },
   "devDependencies": {
     "@ndla/types-backend": "^0.2.21",
-    "@ndla/types-embed": "^4.0.3",
+    "@ndla/types-embed": "^4.0.4",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.5",
     "sass-loader": "^13.2.2",
@@ -80,5 +80,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "95e3bd37d05958082f70ef0b3e8f2ded5ab47904"
+  "gitHead": "3ad890362eb5b8d8dcd11cb1a214987adec3a823"
 }

package/src/Article/ArticleByline.stories.tsx

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+
+import { defaultParameters } from '../../../../stories/defaults';
+import ArticleByline from './ArticleByline';
+
+/**
+ * Innholder informasjon om forfatter(e), lisensrettigheter, beskrivelse av regler ved bruk av innhold, ikon hvis artikkel er tilleggsstoff og dato for forrige oppdatering.
+ */
+export default {
+  title: 'Patterns/ArticleByline',
+  component: ArticleByline,
+  tags: ['autodocs'],
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  args: {
+    authors: [{ name: 'Frida Forfatter' }, { name: 'Fred Forfatter' }],
+    published: '21.06.2018',
+    license: 'CC BY-SA',
+  },
+} as Meta<typeof ArticleByline>;
+
+export const ArticleBylineStory: StoryFn<typeof ArticleByline> = (args) => {
+  return <ArticleByline {...args} />;
+};
+
+ArticleBylineStory.storyName = 'ArticleByline';
+
+export const SeveralAuthors: StoryObj<typeof ArticleByline> = {
+  args: {
+    published: '21.06.2018',
+    license: 'CC BY-SA',
+    authors: [{ name: 'Frida Forfatter' }, { name: 'Ida Illustratør' }, { name: 'Fred Forfatter' }],
+  },
+};
+
+export const WithoutCreators: StoryObj<typeof ArticleByline> = {
+  args: {
+    published: '21.06.2018',
+    license: 'CC BY-SA',
+    authors: [],
+  },
+};

package/src/BlogPost/BlogPost.tsx

@@ -10,7 +10,6 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import SafeLink from '@ndla/safelink';
 import { breakpoints, colors, fonts, misc, mq, spacing } from '@ndla/core';
-import { Quote } from '@ndla/icons/editor';
 import { HeadingLevel } from '@ndla/typography';
 import { useTranslation } from 'react-i18next';
 import { usePossiblyRelativeUrl } from '../utils/relativeUrl';
@@ -92,12 +91,7 @@ const BlogPost = ({ title, author, url, metaImage, headingLevel: Heading = 'h3',
         {title.title}
       </Heading>
       <StyledImg src={metaImage.url} alt={metaImage.alt} />
-      {!!author && (
-        <AuthorContainer aria-label={t('article.writtenBy', { authors: author })}>
-          <Quote />
-          {author}
-        </AuthorContainer>
-      )}
+      {!!author && <AuthorContainer aria-label={t('article.writtenBy', { authors: author })}>{author}</AuthorContainer>}
     </Container>
   );
 };

package/src/CreatedBy/CreatedBy.stories.tsx

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { Meta, StoryObj } from '@storybook/react';
+import CreatedBy from './CreatedBy';
+import { defaultParameters } from '../../../../stories/defaults';
+
+/***
+ * LTI-versjoner av innhold fra NDLA skal vise denne teksten og logo i bunnen. "NDLA" og logoen lenker til ndla.no. "Artikkel" kan være en lenke til artikkelen på ndla.no om den fins. Begge lenker åpner som standard i ny fane men det kan overstyres med target-parameter.
+ */
+export default {
+  title: 'Components/CreatedBy',
+  component: CreatedBy,
+  tags: ['autodocs'],
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  args: {
+    name: 'Artikkelen',
+    description: 'er utarbeidet av',
+  },
+} as Meta<typeof CreatedBy>;
+
+export const WithoutLink: StoryObj<typeof CreatedBy> = {
+  args: {},
+};
+
+export const WithLink: StoryObj<typeof CreatedBy> = {
+  args: {
+    url: 'https://ndla.no/subject:26/topic:1:191103/topic:1:4352/resource:1:2052',
+  },
+};

package/src/ErrorMessage/ErrorMessage.stories.tsx

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import ErrorMessage from './ErrorMessage';
+import { defaultParameters } from '../../../../stories/defaults';
+//@ts-ignore
+import Oops from '../../../../images/oops.gif';
+
+/**
+ * Feilmeldingskomponenten lenker tilbake til forrige side eller til forsiden. Den brukes når det har oppstått en feil i systemet, f.eks. ved 404- eller 503-feil.
+ */
+export default {
+  title: 'Patterns/ErrorMessage',
+  component: ErrorMessage,
+  tags: ['autodocs'],
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  args: {
+    illustration: {
+      url: Oops,
+      altText: 'Systemfeil',
+    },
+    messages: {
+      title: 'Oisann, her gikk noe galt',
+      description: 'En kort beskrivelse av feilen som oppsto.',
+      linksTitle: 'Kom igang:',
+      back: 'Gå tilbake',
+      goToFrontPage: 'Gå til forsiden',
+    },
+  },
+} as Meta<typeof ErrorMessage>;
+
+export const ErrorMessageStory: StoryFn<typeof ErrorMessage> = (args) => {
+  return <ErrorMessage {...args} />;
+};
+
+ErrorMessageStory.storyName = 'ErrorMessage';
+
+export const LoginFailed: StoryObj<typeof ErrorMessage> = {
+  args: {
+    illustration: {
+      url: Oops,
+      altText: 'Systemfeil',
+    },
+    messages: {
+      title: 'Ops, her gikk noe galt',
+      linksTitle: 'Prøv igjen',
+      logInFailed: 'Logg inn',
+    },
+  },
+};

package/src/FramedContent/FramedContent.stories.tsx

@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { Meta, StoryObj } from '@storybook/react';
+import { defaultParameters } from '../../../../stories/defaults';
+import FramedContent from './FramedContent';
+import FigureImage from '../../../../stories/article/FigureImage';
+
+export default {
+  title: 'Components/FramedContent',
+  component: FramedContent,
+  tags: ['autodocs'],
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  args: {
+    children: <p>Content!</p>,
+  },
+} as Meta<typeof FramedContent>;
+
+export const WithFloating: StoryObj<typeof FramedContent> = {
+  args: {
+    children: (
+      <>
+        <p>En boks med flytelementer</p>
+        <FigureImage embedData={{ alt: '', align: 'right' }} />
+        <p>
+          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
+          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
+        </p>
+        <p>
+          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
+          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
+        </p>
+      </>
+    ),
+  },
+};
+
+export const TooMuchContent: StoryObj<typeof FramedContent> = {
+  args: {
+    children: (
+      <>
+        <h2>
+          Tekst i ramme fungerer <em>dårlig</em> med mye tekst.
+        </h2>
+        <p>
+          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
+          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
+        </p>
+        <p>
+          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
+          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
+        </p>
+        <p>
+          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
+          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
+        </p>
+        <p>
+          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
+          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
+        </p>
+        <p>
+          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
+          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
+        </p>
+        <p>
+          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
+          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
+        </p>
+        <p>
+          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
+          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
+        </p>
+        <p>
+          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
+          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
+        </p>
+      </>
+    ),
+  },
+};

package/src/FramedContent/FramedContent.tsx

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { HTMLAttributes, useMemo } from 'react';
+
+interface Props extends HTMLAttributes<HTMLDivElement> {}
+
+const FramedContent = ({ className, children, ...rest }: Props) => {
+  const classes = useMemo(() => {
+    const classes = ['c-bodybox'];
+    if (className) {
+      classes.push(className);
+    }
+    return classes.join(' ');
+  }, [className]);
+
+  return (
+    <div className={classes} {...rest}>
+      {children}
+    </div>
+  );
+};
+
+export default FramedContent;

package/src/FramedContent/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import FramedContent from './FramedContent';
+export default FramedContent;

package/src/Hero/Hero.tsx

@@ -57,6 +57,8 @@ const StyledDiv = styled.div`
   }
 
   &[data-contenttype='frontpage-article'] {
+    min-height: unset;
+    padding-bottom: unset;
     background-color: ${colors.background.lightBlue};
   }
 
@@ -83,13 +85,9 @@ const StyledDiv = styled.div`
 
     ${mq.range({ until: breakpoints.tablet })} {
       + div article.c-article {
-        margin-left: -${spacing.normal};
-        margin-right: -${spacing.normal};
-        margin-top: 0;
         background: ${colors.white};
-        padding-left: ${spacing.normal};
-        padding-right: ${spacing.normal};
-        padding-top: ${spacing.large};
+        margin: 0 -${spacing.normal};
+        padding: ${spacing.large} ${spacing.normal} ${spacing.normal} 0;
       }
     }
   }

package/src/Logo/Logo.stories.tsx

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { Meta, StoryObj } from '@storybook/react';
+import Logo from './Logo';
+import { defaultParameters } from '../../../../stories/defaults';
+
+/***
+ * Logoen er vårt tydeligste kjennetegn og vårt viktigste verktøy for kommunikasjon. Den skal inspirere målgruppen elever og lærere i videregående opplæring og gjøre dem nysgjerrige på NDLA.
+ *
+ * Logoen består av navnet NDLA i en spesiell typografi og bør hovedsakelig benyttes sammen med underteksten. Logo uten undertekst kan benyttes i tilfeller der det kommer godt fram andre steder hva NDLA er, eksempelvis på ndla.no.
+ *
+ * Logo uten undertekst kan kompletteres med en beskrivende tekst til høyre. Logoen kan benyttes i blått, eller i svart eller hvitt avhengig av bakgrunn. Den skal plasseres i det øverste eller nederste hjørnet av en ytterkant. Logoen skal ikke sentreres.
+ */
+export default {
+  title: 'Components/Logo',
+  component: Logo,
+  tags: ['autodocs'],
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  args: {
+    cssModifier: 'large',
+    name: true,
+    label: 'Nasjonal digital læringsarena',
+  },
+} as Meta<typeof Logo>;
+
+export const WithoutUrl: StoryObj<typeof Logo> = {
+  args: {},
+};
+
+export const WithUrl: StoryObj<typeof Logo> = {
+  args: {
+    to: '/',
+  },
+};
+
+export const EnglishLogo: StoryObj<typeof Logo> = {
+  args: {
+    locale: 'en',
+    label: 'Norwegian digital learning arena',
+  },
+};

package/src/TagSelector/TagSelector.stories.tsx

@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import styled from '@emotion/styled';
+import TagSelector from './TagSelector';
+import { defaultParameters } from '../../../../stories/defaults';
+
+/**
+ * Komponent for å tagge noe, primært tiltenkt Min NDLA
+ */
+export default {
+  title: 'Patterns/TagSelector',
+  component: TagSelector,
+  tags: ['autodocs'],
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  argTypes: {
+    onChange: { control: false },
+    onCreateTag: { control: false },
+    tags: { control: false },
+    selected: { control: false },
+  },
+  args: {
+    label: 'Select tags',
+    labelHidden: false,
+  },
+} as Meta<typeof TagSelector>;
+
+const Container = styled.div`
+  margin: 10px auto;
+  max-width: 600px;
+  max-height: 300px;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const TagSelectorStory: StoryFn<typeof TagSelector> = (args) => {
+  const dummyData = [
+    'Cat',
+    'Dog',
+    'Fish',
+    'Dinosaur',
+    'Frog',
+    'Dragon',
+    'Lion',
+    'Snake',
+    'Alligator',
+    'Antelope',
+    'Bear',
+    'Baboon',
+    'Kangaroo',
+    'Scorpion',
+    'Goose',
+    'Fox',
+    'Donkey',
+    'Chicken',
+  ];
+  const [exampleTags, setExampleTags] = useState<string[]>(dummyData);
+  const [exampleTagsSelected, setExampleTagsSelected] = useState<string[]>(dummyData.slice(0, 0));
+
+  return (
+    <Container>
+      <TagSelector
+        label={args.label}
+        tags={exampleTags}
+        selected={exampleTagsSelected}
+        onChange={(tags: string[]) => {
+          setExampleTagsSelected(tags);
+        }}
+        onCreateTag={(newTagName: string) => {
+          setExampleTags((prevTags) => [...prevTags, newTagName]);
+          setExampleTagsSelected((prevSelectedTags) => [...prevSelectedTags, newTagName]);
+        }}
+      />
+    </Container>
+  );
+};
+
+TagSelectorStory.storyName = 'TagSelect';

package/src/index.ts

@@ -9,6 +9,7 @@
 // Ignore typescript implicit any warning and export all javascript components
 // Move components to this file when they are migrated to typescript
 
+export { default as FramedContent } from './FramedContent';
 export { default as SectionHeading } from './SectionHeading';
 export {
   ConceptNotionV2,

package/src/locale/messages-en.ts

@@ -1098,6 +1098,7 @@ const messages = {
     },
     wrongUserInfoDisclaimer:
       'If any information is wrong, it must be updated by the host organization/school owner the user belongs to. An overview of available user support can be found here: ',
+    moderator: 'Moderator',
   },
   checkOutNewFeature: 'New feature',
   slateBlockMenu: {

package/src/locale/messages-nb.ts

@@ -1097,6 +1097,7 @@ const messages = {
     },
     wrongUserInfoDisclaimer:
       'Dersom informasjonen er feil, må den oppdateres av vertsorganisasjon/skoleeier som brukeren tilhører. Oversikt over brukerstøtte finnes her: ',
+    moderator: 'Moderator',
   },
   checkOutNewFeature: 'Sjekk ut ny funksjonalitet',
   slateBlockMenu: {

package/src/locale/messages-nn.ts

@@ -1097,6 +1097,7 @@ const messages = {
     },
     wrongUserInfoDisclaimer:
       'Dersom informasjonen er feil, må han oppdaterast av vertsorganisasjon/skuleeigar som brukaren tilhøyrer. Oversikt over brukarstøtte finst her: ',
+    moderator: 'Moderator',
   },
   checkOutNewFeature: 'Sjekk ut ny funksjonalitet',
   slateBlockMenu: {

package/src/locale/messages-se.ts

@@ -1098,6 +1098,7 @@ const messages = {
     },
     wrongUserInfoDisclaimer:
       'Jus leat boasttudieđut, de ferte organisašuvdna/skuvlaeaiggát masá geavaheaddji gullá ođasmahttit dan. Visogova geavaheaddjidoarjaga ektui gávnnat dás: ',
+    moderator: 'Muddenplána',
   },
   checkOutNewFeature: 'Iskka ođđa doaibmilvuođa',
   slateBlockMenu: {

package/src/locale/messages-sma.ts

@@ -1101,6 +1101,7 @@ const messages = {
     },
     wrongUserInfoDisclaimer:
       'Dersom informasjonen er feil, må den oppdateres av vertsorganisasjon/skoleeier som brukeren tilhører. Oversikt over brukerstøtte finnes her: ',
+    moderator: 'Moderatijve',
   },
   checkOutNewFeature: 'Gïehtjh orre funksjonaliteetem',
   slateBlockMenu: {