What is Slate?

Slate is a completely customizable framework for building rich text editors. It can do this because all of its logic is implemented with a series of plugins, so you aren't ever constrained by what is or isn't in the "core". You can think of it as a pluggable implementation of contenteditable built on top of React - (Taken from slate.js documentation). You can learn more about it here. https://docs.slatejs.org/.

Overall I have divided this article into the following sections:

1. Getting started with slate.js

2. Understanding the required Concepts

3. Implementation

Getting started.

Let's initialize our web app with create-react-app, and name it notion-clone.

npx install create-react-app notion-clone

Install the required packages.

yarn add slate slate-react

Create a TextEditor component, import all the required components, and that’s it, now you have a basic working project. click here to check how it will look.

import React, { useState } from "react";
import { createEditor } from "slate";
import { Slate, Editable } from "slate-react";

const initialValue = [
  {
    type: 'paragraph',
    children: [{ text: 'A line of text in a paragraph.' }],
  },
]

const App = () => {
  // createEditor function will return an Editor object, and withReact function will add react specific behaviour to the editor.
  // We will store it inside a state variable called editor
  const [editor] = useState(() => withReact(createEditor()))
  return (
      /* Slate component provides the editor context to it's children.
      Editable component renders the text editor where we can write
      and edit stuff */
    <Slate editor={editor} value={initialValue}>
      <Editable />
    </Slate>
  )
}

Understanding the required concepts

Slate.js is a highly customizable rich text editor. Whatever we type inside our note component (let’s call this note data also called descendants) will be stored as an array of objects and is rendered on the screen in the form of HTML elements. We will discuss its structure and how to customize it in the later parts.

Nodes:

Nodes are of 3 types:

• The root-level Editor node:

  This is the top-most level of the node, all the note data can be accessed inside the children property of this node. It contains a bunch of useful methods and properties, we will discuss this in a later section. The Editor node consists of multiple Element nodes.

    interface Editor {
        children : Node[]
        selection : Range | null
        // ...more properties and helper functions
    }
  

• The element level Element node:

  Elements are present in the middle layer of the document and we can customize it as per our needs. Element node consists of multiple text nodes.

    interface Element {
        children : Node[]
        type : 'heading-one'
        // ...we can add more custom properties here, similar to type
    }
  

• The Text level Text Node:

  Text nodes are the lowest-level nodes in the tree, containing the text content of the document, along with any formatting.

    interface Text {
      text : string
      bold : true
      // ...we can add more custom properties here, similar to bold
    }
  

These Nodes combine together to form an editor document.

Locations:

Locations are used to refer to a specific node or a point in the document while performing various operations like selection, insertion, updation, deletion, etc.

There are 3 ways to refer to a location.

• Path: This is just an array of numbers used to point at a specific element node.

    type Path = number[]
  

• Point: This is a combination of path and offset that can be used to locate any point in a node. It can be used to specify the exact location of the cursor inside the editor.

    interface Point {
      path: Path
      offset: number
    }
  

• Range: This can be used to specify a range of a selection between two point locations.

    interface Range {
      anchor: Point
      focus: Point
    }
  

Rendering:

Internally note data is stored as an array of objects also called nodes. We can define a custom render function to render these objects in the required way. We need to pass this to the Editable component.

 const renderElement = ({attributes,children,type}) => {
    switch (type) {
      case 'heading-one':
        return <h1 {...attribututes}>{children}</h1>
      default:
        return <p {...attributes}>{children}</p>
    }

// This is passed to the Editable component
<Editable renderElement={renderElement} />

Transforms:

Transforms are set of operations like update, delete, insert, move, etc. that you can apply to single or multiple sets of nodes.

Slate has an immutable data structure, which means you cannot directly change its data. Instead, we use transform operations to change its data.

// Examples

Transforms.select(editor, {
  anchor: { path: [0, 0], offset: 0 },
  focus: { path: [1, 0], offset: 2 },
}) // this will select the text in given range

Transforms.delete(editor, {
  at: {
    anchor: { path: [0, 0], offset: 0 },
    focus: { path: [1, 0], offset: 2 },
  },
}) // this will delete text in given range

Implementation

Now that we have a basic understanding of the required concepts, we can start with the implementation of our functionality. Let's look at the steps involved...

1. Declare a list of commands.

   This is the list of commands we want to invoke after pressing the "/" key.

    const commandOptions = [
      "heading-one",
      "heading-two",
      "code-block",
      // ...other commands if required
    ];
   

2. Declare custom elements that need to be rendered once a command is invoked.

   In this step, we declare how each command option will be rendered on the page, eg. heading-one, code-block, etc.

    const HeadingOneBlock = ({ attributes, children }) => {
      return <h1 {...attributes}>{children}</h1>;
    };
   
    const HeadingTwoBlock = ({attributes,children}) => {
       return <h2 {...attributes}>{children}</h2>;
    }
   
    // similarly we can declare complex functionality eg, a component to render a code block or images, etc.
   

3. Create a function to render custom elements.

   Here we are writing a function that will render the custom elements depending on the node type.

    const renderElement = ({attributes,children,type}) => {
        switch (type) {
          case 'heading-one':
            return <HeadingOneBlock attributes={attribututes}>{children}</HeadingOneBlock>
          // ...more components
          default:
            return <p {...attributes}>{children}</p>
     }
   

4. Create a portal.

   React Portal provides a way to render a component to dom nodes present outside react component tree. In our case, we want to show a list of commands when we press "/", and these options should float exactly where our cursor is present. The reason we will be using this is that It should not be affected by any CSS styles written for its parent component.

   Here "RenderCommandList" component takes the command list and renders it on the screen. We will also create a "ref" and pass it to "RenderCommandList". We will discuss its use in later parts.

    // Whatever we pass as children will be attached to document body
    export const Portal = ({ children }) => {
      return typeof document === "object"
        ? ReactDOM.createPortal(children, document.body)
        : null;
    };
    ​
    const App = () => {
      // ...some code
      // We will pass this refrence to RenderCommandList so that we can handle its position later according to cursor placement.
      const ref = useRef(); 
      // We will show/hide command options when we press "/" key.
      const [showCommandMenu, setShowcommandMenu] = useState(false);
    ​
      return (
        <div>
          <Slate editor={editor} value={initialValue}>
            <Editable renderElement={renderElement}/>
            {showCommandMenu && (
              <Portal>
                <RenderCommandList refrence={ref} />
              </Portal>
            )}
          </Slate>
        </div>
      );
    };
   

5. Add a key-down event handler.

   In this step, we will declare a function "onKeyDownHandler" and will pass it to the Editable component. Whenever any key is pressed this function will be called and we can execute the required functionality. In the below code block once this function is invoked

   1. we are checking if the "/" key is pressed. If true, the "showCommand" state is set to true, and the "commandMode" state is set to true as well.

   2. If "ArrowUp" or "ArrowDown" is pressed we update the selected "commandIndex".

   3. On pressing enter, the "executeCommand" function is called and the required functionality is executed. We will discuss this function in the later part.

    const [commandIndex, setCommandIndex] = useState(0);
    const [commandMode, setCommandMode] = useState(false);
    ​
    const onKeyDownHandler = (event) => {
        if (event.key === "/") {
          setShowcommandMenu(true);
          setCommandMode(true);
        } else if (commandMode && event.key === "ArrowDown")                 {
          event.preventDefault();
          setCommandIndex(commandIndex + 1);
        } else if (commandMode && event.key === "ArrowUp") {
          event.preventDefault();
          setCommandIndex(commandIndex - 1);
        } else if (commandMode && event.key === "Enter") {
          event.preventDefault();
          setShowcommandMenu(false);
          setCommandMode(false);
          executeCommand(event);
        }
      };
    ​
    // Pass it to Editable component
    <Editable renderElement={renderElement} onKeyDown=
        {onKeyDownHandler}/>

1. Add editor change handler.

   Now we will create an "editorChangeHandler" function and pass it to the Slate component. This will be called when editor data changes. Inside this function when the "commandMode" is active, we update our "target" state. In this state, we store the location of our current selection or cursor location in terms of Slate Range. "target" state will be used for determining at what location to render our command options later.

    const editorChangeHandler = (value) => {
          const { selection, children } = editor;
          if (commandMode) {
            const currentNode = Node.get(editor, selection.anchor.path);
            setTarget(selection);
          }
        };
   
    // Pass it to Slate component
    <Slate editor={editor} value={initialValue} onChange=
        {editorChangeHandler}>
   

2. Add execute command function.

   Remember we called the "executeCommand" function in the 5th step? Here we just check the "commandIndex" and get the selected command. Then we apply the correct transforms to update the note data as required.

   Slate has an immutable data structure, which means you cannot directly change its data. Instead, we use transform operations to do this.

   As per the code written below, if the current selected command is "heading-one", we do two things

   1. Apply deleteBackward transform to remove "/".

   2. Update the currentNode by changing its type to "heading-one". Inside the "children" property, we can specify text inside the "heading-one". In the "at" property we specify the location at which the current transform needs to be applied

    const executeCommand = (event) => {
      switch (commandOptions[commandIndex]) {
          case "heading-one": {
              Editor.deleteBackward(editor, { unit: "character" });
              Transforms.setNodes(editor, {
                type: "heading-one",
                children: [{ text: "" }],
                at: editor.selection,
              });
              break;
            }
          // ...more functionality
          default: {
              event.preventDefault();
            }
          }
        };

1. Add useEffect for calculating the portal position.

   Here, if the editor data is selected command or cursor position changes we execute the following code. It performs the following actions...

   1. First, we check if we have the current selection location in the "target" state.

   2. Remember the reference passed to the "RenderCommandList" component mentioned in the above code? we get that and store it in a const named "popUpRef".

   3. "ReactEditor.toDOMRange" gives us the native dom Range from the Slate dom range.

   4. The domRange.getBoundingClientRect() method returns an DOMRect object providing information about the size of an element and its position relative to the viewport.

   5. Finally set the position for the "RenderCommandList" using this data.

       useEffect(() => {
           if (target) {
             const popUpRef = ref.current;
             const domRange = ReactEditor.toDOMRange(editor, target);
             const rect = domRange.getBoundingClientRect();
             popUpRef.style.top = `${rect.top + 24}px`;
             popUpRef.style.left = `${rect.left}px`;
           }
         }, [ editor, commandIndex, target]);
      

      And that's it we have our command functionality working.

That's it! Our implementation is complete...

Here is a full working demo of what we have implemented- Link

Here is the Github link for its code - Link

To learn more about slate.js, check out the official docs - Link

I hope you find this blog useful, let me know if you have any questions or suggestions. Feel free to DM me on Twitter - Link.

Have a great day!

Introduction.

Object in JavaScript is just a collection of key-value pairs. A key can be considered as a unique name for every value so that we can access them. Values can be either a primitive data type or they can be a function or another object. These key-value pairs are called properties or methods depending on the type of value.

Let’s take an example :

Here a person is an object. It has two properties called name, and age and one method called greets. Here "name", "age" and "greets" belongs to the person object and we can access them in the following way.

let person = {
    name : "Rahul",
    age : 20 ,
    greets : function (){
        console.log("Hi, I am Rahul")
    }
}

// Accessing the object
console.log(person.name)  //Output : "Rahul"
console.log(person.age)   //Output : 20
console.log(person.greets())    //Output : "Hi, I am Rahul"

We can also access objects using square bracket notation

// Accessing the object using square bracket notation
console.log(person.['name'])  //Output : "Rahul"
console.log(person.['age'])   //Output : 20
console.log(person.['greets']())    //Output : "Hi, I am Rahul"

Note : Square bracket notation is used in case we want to access properties dynamically

Creating objects in javaScript

There are various methods of creating an object but we will focus on the following three :

Direct method:

We have seen this in the above example

let person = {
    name : "Rahul",
    age : 20 ,
    greets : function (){
        console.log("Hi, I am Rahul")
    }
}

console.log(typeOf(person))

//Output : Object

Using a function constructor :

function Animal(name,type,voice){
const color = "something" ;
this.name = name ;
this.type = type ;
this.sound = function () {
    console.log(voice) ;
  }
}

// Creating an Object using constructor function
const Tiger = new Animal('Tiger','mammal','roar...')

console.log(Tiger)  //Output : Animal {name: "Tiger", type: "mammal", sound: ƒ}

console.log(Tiger.sound()) //Output : roar...

This is a dynamic way of creating JavaScript objects.

Animal() is just a simple js function that acts as a constructor for the Tiger object. Notice how the "this" keyword is used here, it is used to create properties and methods for the Tiger object.

The "new" keyword creates an empty object. "this" keyword in the Animal function references that empty object.

If we simply declare some variable in Animal() our code will not throw any error, but that variable will not become a property of the object.

For eg. in our case observe that colour is not a property of the Tiger object.

Arrow functions can’t be used as a function constructor

Always the first letter of the function constructor name should be capitalised according to the convention

The Arguments in Animal function can be used to pass values to objects dynamically.

This is a dynamic way of creating an object in js.

Using ES6 class concept:

class Animal {
  constructor(name,type,voice){
    this.name = name ;
       this.type = type ;
    this.sound = function () {
      console.log(voice) ;
    }
  }
}

// Let's create an object using Animal class
const Tiger = new Animal('Tiger','mammal','roar...')

console.log(Tiger) //Output : Animal {name: "Tiger", type: "mammal", sound: ƒ}
console.log(Tiger.sound()) // Output : roar...

Here we are creating a class named "Animal". All the properties and methods which we want to assign to the object are placed inside the class constructor.

The constructor receives arguments that we have passed while object creation.

A JavaScript class is declared with a PascalCase in contrast to other JavaScript data structures ie. the first letter in every word should be capitalized. Eg; class "AnimalKingdom"

Make sure you use you call super() method inside the constructor() method if the current object extends some other object, this is done so that we can use properties and method of the parent class.

The mutability of objects in javascript

Primitive data types like number, boolean, and string are Immutable whereas objects in js are mutable in nature. Mutability means that we can edit the values after it is assigned. Let’s look at a simple example that will make things clear.

let name1 = 'Rahul' ;
let name2 = name1 ;
name2 = 'Ramesh'
console.log(name1)  //Output : Rahul
console.log(name2)  //Output : Rahul

In the above code snippet variable name1 contains the string - "Rahul"

On the second line we are saying that assign value in name1 to name2. So here the value gets copied and if we change variable name2 then, name1 doesn’t get affected.

which is obvious

but objects don't exhibit such behavior,

let person1 = {
    name : 'Rahul' 
}

let person2 = person1 ;

// updating person2
person2.name = "Ramesh"

console.log(person1) // Output : {name: "Ramesh"}
console.log(person2)    // Output : {name: "Ramesh"}

// Why do this happen?

In the case of objects, the person1 variable holds the address to the memory location where the object data is stored and when we assign person1 to person2 this address gets copied into the person2 variable.

Therefore now making changes in a person2 will also affect person1 object.

Let's take one more example :

let person1 = {
    name : 'Rahul' 
}
let person2 = person1 ;

// Case 1
if(person1 ===  person2){
  console.log(true)
}
else{
  console.log(false)
}



let person3 = {
  name : 'Rahul'
}
let person4 = {
  name : 'Rahul'
}
// Case 2
if(person3 ===  person4){
  console.log(true)
}
else{
  console.log(false)
}

In case 1 answer will be true because both variables contain the same address and on the comparison, the answer will be true.

On the other hand case 2 output will be false. This is because even though person3 and person4 have the same content inside they are stored in different memory location and the above two variable only contains their addresses.

Now you must be wondering how to compare two objects. How to find whether objects received from two different sources have the same properties and methods?

Actually, there is no direct way because the variable stores the address to the memory locations and the content inside that memory location is not evaluated,

But don’t worry there is one hack though…

We can Convert the objects which we want to compare into string format using JSON.stringify() method. Store those values and compare them using the equality operator. And now the output will be true

const k1 = { fruit: 'Kiwi' };
const k2 = { fruit: 'kiwi' };

// Using JavaScript
if(JSON.stringify(k1) === JSON.stringify(k2)){
  console.log(true) ;
}
else{
  console.log(false) ;
}
// Output : True

Working with objects:

Here are some of the methods which can be useful while working with objects...

• Object.create(): This method creates a new object, using an existing object as the blueprint.

    const person = {
      isHuman: false,
      printIntroduction: function() {
        console.log(`My name is ${this.name}.`);
      }
    };
  
    const me = Object.create(person);
  
    me.name = 'Rahul'; // "name" is a property set on "me", but not on "person"
    me.isHuman = true; // inherited properties can be overwritten
  
    me.printIntroduction();
  

• Object.keys(): This method returns an array of a given object's own enumerable property names, iterated in the same order that a normal loop would.

    const object1 = {
      a: 'somestring',
      b: 42,
      c: false
    };
  
    console.log(Object.keys(object1));
    // expected output: Array ["a", "b", "c"]
  

• Object.assign(): This method copies all enumerable own properties from one or more source objects to a target object. It returns the target object.

    const target = { a: 1, b: 2 };
    const source = { b: 4, c: 5 };
  
    //there can be multiple sources
    const returnedTarget = Object.assign(target, source);
  
    console.log(target);
    // expected output: Object { a: 1, b: 4, c: 5 }
  
    console.log(returnedTarget);
    // expected output: Object { a: 1, b: 4, c: 5 }
  

• Object.freeze(): This method freezes an object. A frozen object can no longer be changed; freezing an object prevents new properties from being added to it, and existing properties from being removed, prevents changing the enumerability, configurability, or writability of existing properties and prevents the values of existing properties from being changed. In addition, freezing an object also prevents its prototype from being changed. freeze() returns the same object that was passed in.

• Object.seal(): This method seals an object, preventing new properties from being added to it and marking all existing properties as non-configurable. Values of present properties can still be changed as long as they are writable.

    let person = {
        name : "Rahul",
        age : 20 ,
        greets : function (){
            console.log("Hi, I am Rahul")
        }
    }
  
    Object.seal(person) ;  // seals the object
    Object.freeze(person) ; // freezes the object
  

  I hope you find this blog useful, let me know if you have any questions or suggestions. Feel free to DM me on Twitter - Link.

Now Let's get started...

Prerequisite:

1. You should have an account on npmjs.com, if you don't have it go ahead and create one. npmjs.com
2. Make sure you have node version >= 10 installed on your system.

There are many ways to get started but here we are going to use create-react-library. Using this package Rollup.js, Babel, and other configurations are handled automatically for us.

Step 1:

npx create-react-library <package-name>

Step 2:

Enter all the details related to this package like

1. Package name
2. Package description
3. Author's GitHub Handle
4. Github repo path
5. Select License
6. Package Manager - (npm or yarn)
7. Template

Note: When a user creates a user or organization account, they are granted a scope that matches the user/organization name. The scope is useful in the following scenario.

1. When you want to create a package with the same name as a package created by another user or organization without conflict. Eg. with scope: @username/xyz-app, without scope: xyz-app. read more
2. When you want to logically group certain packages.

There are three options available for the templates:

• Default: Use this option if you want to create the package in javascript.
• Typescript: Use this option if you want to create the package in typescript.
• Custom: Use this option if you want to use a custom template.

Step 3:

Now let's start the development of our package.

This will be the folder structure available to us.

Local development can be separated into two parts.

1. src/ folder will contain code for react package that we are creating.
2. example/ will contain code for a demo application where we can test our react package

First, we will start rollup, this will help us to automatically recompile our package to the dist/ folder.

Note: Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application

npm start

Next, we will navigate to example/ and start the demo application. Here we will be able to import the package present in src/ and test it here.

cd example
npm start

Step 4:

Start development of the package. Now, anytime you make a change to your library in src/ or to the example app's example/src, create-react-app will live-reload your local dev server so you can iterate on your component in real-time.

Note: Make sure that any npm modules you want as peer dependencies are properly marked as peer dependencies in package.json. The rollup config will automatically recognize them as peers and not try to bundle them in your module.

Step 5:

Run npm login command and enter your credentials to log in.

npm login

Step 6:

This is the final step. If you are publishing a package privately you can directly run the
following command.

npm publish

But if you are creating a public package there are few things that you can keep in mind.

1. Have easy-to-understand documentation that explains steps for installation, getting started, configuration, and other necessary stuff required while development.
2. Share the link for a working demo of your package.
3. Add instructions about how other developers can contribute to this package.

Here is one way you can showcase a working demo. Just push all the changes to GitHub and run the following command.

npm run deploy

This will publish our example app to Github pages.

Finally, run this command.

npm publish

Note:

1. If you are publishing the package publically its name should be unique.
2. There is a charge of 7$ if you want to publish a private package to npm. You can refer to this article if you want to publish a private package for free. Link to Article

If you want to publish scoped package publically run this command

npm publish --access=public

And we are done, Congratulations!!! your react package is now published on npmjs.com.

Note: The intention of this blog is just to introduce you to the concept of encryption using Web Crypto API. Do your own research before implementing this in a real project.

What is encryption :

Encryption is the process of taking some data and scrambling it in such a way that its meaning can be derived by only that user who is authorized to do so. Any other user should not understand what this data represents. Data is encrypted and decrypted using a key. One who has the key can only understand the data.

Broadly encryption algorithm is classified into two categories:

1. Asymmetric encryption algorithms use two types of keys, public and private keys to encrypt and decrypt data. Example: RSA algorithm.

2. Symmetric encryption algorithms, which use the same key to encrypt and decrypt data. Example: AES, DES, Triple DES algorithm.

Web Crypto API is provided by the browser to implement cryptography on the front end. It’s faster and much safer than using some third-party libraries. It’s also supported by all major browsers, internet explorer only provides partial support. Now let’s take a look at the steps involved to encrypt and decrypt a file.

1. Getting a password from the user.

2. Generating a digest from the password.

3. Generating a key from the digest.

4. Generating an iv (initialization vector).

5. Getting a file.

6. Applying encrypt function.

All the methods that we are going to discuss below will be provided window.crypto object.

STEP 1:

We are going to encrypt a file using a secret, that only the end-user will know. For this, we will take the password as an input.

STEP 2:

The Password taken from the user cannot be used directly as a key for encryption because the Web Crypto API does not allow this. For this, we need to generate a digest first using this password.

What is Digest?

A digest is a value generated by a hash function using a message as input, In our case, the password will be the message.

A digest is usually used to perform different tasks:

1. generate keys

2. verify message integrity

3. store passwords so that they can't be retrieved, but can still be checked

4. generate pseudo-random numbers etc.

The crypto.subtle.digest() method takes two parameters as inputs, type of algorithm and data. The algorithm can be of the following types SHA-1 (but don't use this in cryptographic applications), SHA-256, SHA-384, SHA-512. Data is an array buffer.

What is an Array Buffer?

The Array Buffer object is used to represent a generic, fixed-length raw binary data buffer. It is an array of bytes, often referred to in other languages as a "byte array".

Therefore we first need to convert our password in the form of an array buffer. For this, we are using TextEncoder Constructor. This converts the string into an array buffer. An enc object has an encoding method that takes a string as an input and outputs an array buffer. An array buffer represents raw data in memory.

export const getDigest = (uid) => {
  let enc = new TextEncoder();

  return crypto.subtle.digest("SHA-256", enc.encode(uid));
};

This method will return a promise which will be resolved with a digest value in the form of an array buffer.

STEP 3:

Using Digest we are going to generate a key, for this, we use window.crypto.subtle.importKey() method. This method has the following parameters:

1. Format: It is a string describing the data format of the key to import. Eg : raw pkcs8, jwk, spki etc. Since we are passing array buffer format will be raw

2. Key Data: key data can be an array buffer or a JSONWebKey Object

3. Algorithm: It is the name of an encryption algorithm for which we want to generate a key.

4. Extractable: It is a Boolean indicating whether it will be possible to export the key using SubtleCrypto.exportKey()

5. Key Usage: It is an array that contains information about the usage of key

export function getKey(value) {
  return window.crypto.subtle.importKey("raw", value, "AES-GCM", true, [
    "encrypt",
    "decrypt"
  ]);
}

This method returns a promise which is resolved with a Cryptokey object.

STEP 4:

What is an initialization vector?

An initialization vector (IV) is a sequence of random numbers that can be used along with a secret key for data encryption. This number is also called a nonce. The use of an IV prevents repetition in data encryption, making it more difficult for a hacker using a dictionary attack to find patterns and break a cipher.

Here we are going to use window.crypto.getRandomValues() method to generate an iv. We pass an empty byte array of length 12. This method returns a promise which is resolved with an iv.

export const getiv = () => {
  return window.crypto.getRandomValues(new Uint8Array(12));
};

STEP 5:

One important thing to note here is that the window.subtle.encrypt() function only accepts data in the form of an array buffer, so we need to read the input file in the form of an array buffer. For this,s we will use the getFile() method that returns a promise which is resolved with an array buffer containing raw file data. The maximum file size that can be handled depends upon the capacity of the device.

// load the file in the memory
export const getFile = async (inputFile) => {
  return await inputFile.arrayBuffer();
};

STEP 6:

Now we got all the things necessary to perform encryption on file. Our function takes 3 inputs key, iv, and file. These parameters are then passed to crypto.subtle.encrypt() method.

This method takes 3 parameters:

1. Algorithm: It is an object specifying the algorithm to be used and any extra parameters if required. Following algorithms are supported in this method RSA-OAEP, AES-CTR, AES-CBC, and AES-GCM.

2. Key: It is a CryptoKey to be used for encryption.

3. Data: It is an Array Buffer containing the data to be encrypted.

export const encryptFile = async (key, iv, file) => {
  return await window.crypto.subtle.encrypt(
    {
      name: "AES-GCM",
      iv: iv
    },
    key,
    file
  );
};

Encrypt method will return a promise that is resolved with ciphertext, This ciphertext is also in the form of an array buffer. Finally, in order to save our file to local storage or to the cloud, we need to convert it into a blob.

To Decrypt a file we just have to use crypto. subtle.decrypt() method. This method takes in 3 parameters: initialization vector (iv), crypto key, and ciphertext. It returns a promise which is resolved with an array buffer containing the original file.

export const decryptFile = (key,iv, cipherText) => {
  return window.crypto.subtle.decrypt(
    {
      name: "AES-GCM",
      iv: iv
    },
    key,
    cipherText
  );
};

Note: Value of initialization vector(iv) should be the same as used while encryption a file.

Here is the link to the working demo: Working Demo

Here is the link for code: Link to code