File to new embed type

src/components/SlateEditor/plugins/file/FileList.tsx

@@ -13,12 +13,13 @@ import debounce from 'lodash/debounce';
 // eslint-disable-next-line lodash/import-scope
 import { DebouncedFunc } from 'lodash';
 import styled from '@emotion/styled';
-import { withTranslation, TFunction, CustomWithTranslation } from 'react-i18next';
+import { withTranslation, CustomWithTranslation } from 'react-i18next';
 import { FieldHeader, FieldHeaderIconStyle } from '@ndla/forms';
 import { FileListEditor } from '@ndla/editor';
 import { Cross, Plus } from '@ndla/icons/action';
 import Tooltip from '@ndla/tooltip';
 import { spacing } from '@ndla/core';
+import { FileEmbedData } from '@ndla/types-embed';
 import config from '../../../../config';
 import { File, UnsavedFile } from '../../../../interfaces';
 import { headFileAtRemote } from '../../../../modules/draft/draftApi';
@@ -34,13 +35,6 @@ const StyledSection = styled.section`
   }
 `;
 
-const formatFile = (file: File, t: TFunction): File => ({
-  ...file,
-  formats: [
-    { url: file.url, fileType: file.type, tooltip: `${t(`form.file.download`)} ${file.title}` },
-  ],
-});
-
 const compareArray = (arr1: File[], arr2: File[]) => {
   if (arr1.length !== arr2.length) {
     return false;
@@ -72,7 +66,7 @@ interface Props extends CustomWithTranslation {
 }
 
 interface State {
-  files: File[];
+  files: FileEmbedData[];
   missingFilePaths: string[];
   showFileUploader: boolean;
   currentDebounce?: DebouncedFunc<() => void>;
@@ -82,8 +76,8 @@ class FileList extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.checkForRemoteFiles.bind(this);
-    const { element, t } = this.props;
-    const files = element.data.map((file) => formatFile(file, t));
+    const { element } = this.props;
+    const files = element.data;
     this.state = { files, missingFilePaths: [], showFileUploader: false };
     this.checkForRemoteFiles(files);
   }
@@ -156,12 +150,17 @@ class FileList extends Component<Props, State> {
   };
 
   onAddFileToList = (files: UnsavedFile[]) => {
-    const { t } = this.props;
     this.setState({
       showFileUploader: false,
     });
-    const newFiles = files.map((file) => {
-      return formatFile({ ...file, url: config.ndlaApiUrl + file.path, resource: 'file' }, t);
+    const newFiles: FileEmbedData[] = files.map((file) => {
+      return {
+        resource: 'file',
+        type: file.type,
+        path: file.path,
+        title: file.title,
+        url: config.ndlaApiUrl + file.path,
+      };
     });
     this.setState(
       (prevState) => ({

src/components/SlateEditor/plugins/file/index.tsx

@@ -8,10 +8,10 @@
 
 import { Descendant, Editor, Element } from 'slate';
 import { RenderElementProps } from 'slate-react';
+import { FileEmbedData } from '@ndla/types-embed';
 import FileList from './FileList';
-import { createEmbedTag } from '../../../../util/embedTagHelpers';
+import { createEmbedTagV2, reduceElementDataAttributesV2 } from '../../../../util/embedTagHelpers';
 import { SlateSerializer } from '../../interfaces';
-import { File } from '../../../../interfaces';
 import { defaultFileBlock } from './utils';
 import { defaultBlockNormalizer, NormalizerConfig } from '../../utils/defaultNormalizer';
 import { afterOrBeforeTextBlockElement } from '../../utils/normalizationHelpers';
@@ -20,7 +20,7 @@ import { TYPE_PARAGRAPH } from '../paragraph/types';
 
 export interface FileElement {
   type: 'file';
-  data: File[];
+  data: FileEmbedData[];
   children: Descendant[];
 }
 
@@ -39,17 +39,16 @@ export const fileSerializer: SlateSerializer = {
   deserialize(el: HTMLElement) {
     if (el.tagName.toLowerCase() !== 'div') return;
     if (el.dataset.type !== TYPE_FILE) return;
+    const children = Array.from(el.children).map((el) =>
+      reduceElementDataAttributesV2(Array.from(el.attributes)),
+    );
 
-    const children: DOMStringMap[] = [];
-    el.childNodes.forEach((node) => {
-      children.push((node as HTMLEmbedElement).dataset);
-    });
     return defaultFileBlock(children);
   },
   serialize(node: Descendant) {
     if (!Element.isElement(node)) return;
     if (node.type !== TYPE_FILE) return;
-    return <div data-type="file">{node.data.map((file) => createEmbedTag(file))}</div>;
+    return <div data-type="file">{node.data.map((file) => createEmbedTagV2(file))}</div>;
   },
 };
 

src/components/SlateEditor/plugins/file/utils.ts

@@ -7,7 +7,6 @@
  */
 
 import { jsx as slatejsx } from 'slate-hyperscript';
-import { UnsavedFile } from '../../../../interfaces';
 import { TYPE_FILE } from './types';
 
 export const defaultFileBlock = (data: DOMStringMap[]) => {

src/util/__tests__/arrayHelper-test.ts

@@ -1,7 +1,25 @@
 import { arrMove } from '../arrayHelpers';
 
-test('util/arrayHelpers arrMove', () => {
-  const myList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, null, 'hei', 'æøå'];
-  const checkArray = [0, 1, 2, 3, 4, 6, 7, 8, 9, null, 'hei', 5, 'æøå'];
-  expect(arrMove(myList, 5, 11)).toEqual(checkArray);
+describe('util/arrayHelpers arrMove', () => {
+  it('handles moving from 1 to 0', () => {
+    const list = [2, 1, 3];
+    const expected = [1, 2, 3];
+    expect(arrMove(list, 1, 0)).toEqual(expected);
+  });
+  it('handles moving from 0 to 1', () => {
+    const list = [2, 1, 3];
+    const expected = [1, 2, 3];
+    expect(arrMove(list, 0, 1)).toEqual(expected);
+  });
+  it('handles moving from first to last', () => {
+    const list = [3, 1, 2];
+    const expected = [1, 2, 3];
+    expect(arrMove(list, 0, 2)).toEqual(expected);
+  });
+
+  it('handles moving from last to first', () => {
+    const list = [2, 3, 1];
+    const expected = [1, 2, 3];
+    expect(arrMove(list, 2, 0)).toEqual(expected);
+  });
 });

src/util/arrayHelpers.ts

@@ -10,14 +10,8 @@ export const arrMove = <T>(array: T[], fromIndex: number, toIndex: number): T[]
   if (fromIndex === toIndex) {
     return array;
   }
-  const item = array[fromIndex];
-
-  return array.reduce<T[]>((acc, curr, i) => {
-    if (i === fromIndex) {
-      return acc;
-    } else if (i === toIndex) {
-      return acc.concat(curr).concat(item);
-    }
-    return acc.concat(curr);
-  }, []);
+  const copy = [...array];
+  const item = copy.splice(fromIndex, 1)[0];
+  copy.splice(toIndex, 0, item);
+  return copy;
 };