DEV Community: Jeet Mandaliya

How I implemented Google docs like commenting in Tiptap

Jeet Mandaliya — Sun, 03 Apr 2022 10:53:46 +0000

Tiptap has a GitHub issue with the list of all the community extensions in the repo where people share extensions that they create. Someone mentioned that they needed Commenting-feature in Tiptap that is similar to the commenting-feature in Google Docs.

So here's how I had my chance of creating the same.

sereneinserenade / tiptap-comment-extension

Google-Docs 📄🔥 like commenting 💬 solution for Tiptap 2(https://tiptap.dev)

Tiptap Comment Extension:

DM Me on Discord - sereneinserenade#4869

Tiptap Extension for having Google-Docs like pro-commenting in Tiptap.

A ⭐️ to the repo if you 👍 / ❤️ what I'm doing would be much appreciated. If you're using this extension and making money from it, it'd be very kind of you to ❤️ Sponsor me. If you're looking for a dev to work you on your project's Rich Text Editor with or as a frontend developer, DM me on Discord/Twitter/LinkedIn👨‍💻🤩.

I've made a bunch of extensions for Tiptap 2, some of them are Resiable Images And Videos, Search and Replace, LanguageTool integration with tiptap. You can check it our here https://github.com/sereneinserenade#a-glance-of-my-projects.

Demo:

Try live demo: https://sereneinserenade.github.io/tiptap-comment-extension/

tiptap-comment-extension.mp4

How to use

npm i @sereneinserenade/tiptap-comment-extension

import StarterKit from "@tiptap/starter-kit";
import CommentExtension from "@sereneinserenade/tiptap-comment-extension";
/* or
import { CommentExtension } from "@sereneinserenade/tiptap-comment-extension";
*/

const extensions

…

View on GitHub

Initially I created it just for Vue3 since it's only supposed to be an example implementation of a framework agnostic Tiptap extension. And by the request of community there's also an implementation in React. If you want to check it out before we jump into the code, here's a demo.

Okay, enough context, let's dive into how it's made.

When I started working on it, the first thing I did was to Google whether there were any discussions around it, and I found this thread, which at the time I couldn't comprehend fully because of my limited knowledge of Prosemirror. I got to know pros and cons of implementing comments as marks and the other solution, which mentioned storing ranges of comments in an external data structure, and highlighting the comments in the doc with Prosemirror decorations, but then we'd have to figure out how to transfer comments when copying the content from one doc and pasting to another doc.

After all, I decided to give a shot to Comments as marks since I was already familiar with marks. So I created a new Mark, here's the file.



export interface CommentOptions {
  HTMLAttributes: Record<string, any>,
}

export const Comment = Mark.create<CommentOptions>({
  name: 'comment',

  addOptions() {
    return {
      HTMLAttributes: {},
    };
  },

  parseHTML() {
    return [
      {
        tag: 'span',
      },
    ];
  },

  renderHTML({ HTMLAttributes }) {
    return ['span', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
  },
});

Right now, we have created a comment mark, that'll just render a span, but we need to store the comments somewhere. That's when the data-comment attribute comes in.



export const Comment = Mark.create<CommentOptions>({
  // ... rest of code
  addAttributes() {
    return {
      comment: {
        default: null,
        parseHTML: (el) => (el as HTMLSpanElement).getAttribute('data-comment'),
        renderHTML: (attrs) => ({ 'data-comment': attrs.comment }),
      },
    };
  },

  parseHTML() {
    return [
      {
        tag: 'span[data-comment]',
        getAttrs: (el) => !!(el as HTMLSpanElement).getAttribute('data-comment')?.trim() && null,
      },
    ];
  },
  // ... rest of code
})

Now, it would render a data-comment attribute with span element, and adding a Tiptap-Attribute will allow us to define the comment property of mark so we can access it programmatically instead of getting data-comment attribute by searching through DOM.

We need commands to be able to set comment mark.



// ... rest of code
  addCommands() {
    return {
      setComment: (comment: string) => ({ commands }) => commands.setMark('comment', { comment }),
      toggleComment: () => ({ commands }) => commands.toggleMark('comment'),
      unsetComment: () => ({ commands }) => commands.unsetMark('comment'),
    };
  },
// ... rest of code

That's it for the extension part. Now we look at how we're going to structure the comments and store them, which leads us to the Vue part of things, which is implemented here.



interface CommentInstance {
  uuid?: string
  comments?: any[]
}

// to store currently active instance
const activeCommentsInstance = ref<CommentInstance>({})

const allComments = ref<any[]>([]) // to store all comments

Loading all the comments when editor is created and updated, setting currently active comment when editor is updated.



const findCommentsAndStoreValues = (editor: Editor) => {
  const tempComments: any[] = []

  // to get the comments from comment mark.
  editor.state.doc.descendants((node, pos) => {
    const { marks } = node

    marks.forEach((mark) => {
      if (mark.type.name === 'comment') {
        const markComments = mark.attrs.comment; // accessing the comment attribute programmatically as mentioned before

        const jsonComments = markComments ? JSON.parse(markComments) : null;

        if (jsonComments !== null) {
          tempComments.push({
            node,
            jsonComments,
            from: pos,
            to: pos + (node.text?.length || 0),
            text: node.text,
          });
        }
      }
    })
  })

  allComments.value = tempComments
}

const setCurrentComment = (editor: Editor) => {
  const newVal = editor.isActive('comment')

  if (newVal) {
    setTimeout(() => (showCommentMenu.value = newVal), 50)

    showAddCommentSection.value = !editor.state.selection.empty

    const parsedComment = JSON.parse(editor.getAttributes('comment').comment)

    parsedComment.comment = typeof parsedComment.comments === 'string' ? JSON.parse(parsedComment.comments) : parsedComment.comments

    activeCommentsInstance.value = parsedComment
  } else {
    activeCommentsInstance.value = {}
  }
}

const tiptapEditor = useEditor({
  content: `
    <p> Comment here. </p>
  `,

  extensions: [StarterKit, Comment],

  onUpdate({ editor }) {
    findCommentsAndStoreValues(editor)

    setCurrentComment(editor)
  },

  onSelectionUpdate({ editor }) {
    setCurrentComment(editor)

    isTextSelected.value = !!editor.state.selection.content().size
  },

  onCreate({ editor }) {
    findCommentsAndStoreValues(editor)
  },

  editorProps: {
    attributes: {
      spellcheck: 'false',
    },
  },
})

That was the core logic of how to get comments from Tiptap and store then in Vue so it can be use outside of the scope of editor.

Here's the structure of the comments that made most sense to me. However, since it's just going to be a string in the data-comment property, you can have any JSON or XML or YAML or whatever format you want, just make sure you parse it right.



{
  "uuid": "d1858137-e0d8-48ac-9f38-ae778b56c719",
  "comments": [
    {
      "userName": "sereneinserenade",
      "time": 1648338852939,
      "content": "First comment"
    },
    {
      "userName": "sereneinserenade",
      "time": 1648338857073,
      "content": "Following Comment"
    }
  ]
}

The other part of logic(which I consider to be not-core logic) , i.e. creating a new comment, toggling comment mode on/off and showing the comments outside can be found in the repo.

Enjoy the days, and if you have any questions/suggestions, I'll be in the comment section.

Next-Gen Text Editing in Browser With Tiptap 🔥

Jeet Mandaliya — Sun, 31 Jan 2021 23:06:33 +0000

Good day folks, I've decided to write a series about one of the Web-World's most underrated topics, which is web-based rich text editors. In this series, I'll be first covering Tiptap and describe how we can build great web-based text editors using tiptap.

Requirements:

A little bit of familiarity with JavaScript and VueJS.
A VueJS project ( existing or new ).

Tiptap is a renderless rich-text editor made originally for VueJS. Tiptap uses Prosemirror under the hood which is a toolkit that provides various abstractions to manipulate DOM and transform its content to specific formatting we want. In other words, it can transform a normal text into a bold text(and much more) and vice-versa very easily.

Another very powerful aspect of Tiptap is that it fills the gap between writing markdown and rich text. For example, if you want to use a heading and write a '#' at the start of a line and press space, it'll turn that line into an H1 for instance.

Okay enough intro, let's take a look at the official example and let's figure out more about it on the journey. You can take a look at many more examples with customizations at tiptap.dev.

Isn't it enchanting ?

Installation

Tiptap can be installed with help of NPM of Yarn. NPM ships with NodeJS. Here are instructions for installing NPM and Yarn.



npm install --save tiptap



yarn add tiptap

Once we have tiptap installed, we can directly start using it, or we can install extensions first. The power of Tiptap(or so to say Prosemirror) lies in the extensions. Any functionality you'd like to have can be written as an extension and plugged into Tiptap's running instance and we'd have an editor with our custom functionality.

Tiptap team has a nice set of extensions in NPM package tiptap-extensions and they maintain them which makes them guaranteed to work with Tiptap. Some of them are Blockquote, CodeBlock, HardBreak, Heading, OrderedList, BulletList, ListItem, TodoItem, TodoList, Bold, Code, Italic, Link, Strike, Underline, History.

Each of them is required for adding specific behaviour to our editor. It can be installed with the following method.



npm install --save tiptap-extensions



yarn add tiptap-extensions

Initializing

For the scope of this post, we're just going to use basic extensions like Bold, Italic, Underline, Headings. Now, since everyone has a past, we're including the History extension too. In your project, you can create a new specific folder to keep all the JS files and VueJS components written for the Editor. In my case, I've created a bare VueJS 2 project with Babel and ESLint and have created a dir named editor in my src folder like this.

Instructions to initialize a new VueJS project can be found here.

Created A New Vue Project

Then I'll be installing tiptap and tiptap-extensions. Here, I'm installing two packages with NPM in one shot. We can separate them with a space in between and NPM will do the rest for us.



npm install --save tiptap tiptap-extensions

Once installed, we can move on to our tiptap.js file showed in the screenshot above and start working with Tiptap.

In this file, we're initializing an instance of Tiptap Editor with the extensions we want to use. Now it's time to use this in Tiptap.vue. Here's what Tiptap.vue would look like.

Finally, when we spin up our app, this is how it looks and behaves. I've deployes this at https://tiptap-demo.now.sh/. You can play around with it and experience yourself what's what.

Preview for everything we showed exists except History, it provides functionality for doing ctrl/⌘ + Z or ctrl/⌘ + Y to undo/redo. You can try it out yourself at https://tiptap-demo.now.sh/.

One of the great things about Tiptap is that it has keyboard shortcuts implemented out of the box. For instance bold can be activated/inactivated with ctrl/⌘ + B, italic with ctrl/⌘ + I and underline with ctrl/⌘ + U.

We have power to customize keyboard shortcuts when we write extensions but that part is out of scope for this post.

Conclusion

What we did in this post is a small part of the functionality that Tiptap or the great Tiptap community has to offer. More in-depth insight into this tech exists on their GitHub repo. Not only the maintainers but also the community has great extensions to offer, you can take a look at the discussion in this GitHub issue. The community has very cool extensions to offer like

KaTex integration
:emoji: Support
Code Block with manual language selection
TextColor, TextAlign, TextHighlight
Realtime Multi-User editing with Y.js

If you're using famous VueJS Component Frameworks like ElementUI or VuetifyJS, there exist even packages like element-tiptap and tiptap-vuetify which provide a great deal of abstraction and allow you to integrate tiptap with your project very rapidly.

Tiptap 2.x

The version of TipTap we used in this post is 1.x but 2.x is coming out soon and with that, we won't be requiring many community extension as the Tiptap team has decided to integrate them in their extension library. Also, Tiptap makes the way of writing extensions easier than ever, so we're going to see more and more opportunities of community developed extensions for tiptap in near future. Moreover, it's a great news for TypeScript lovers(or bad for those who hate TS but their company codebase is in TS and they're still on their way to learn it) that Tiptap 2 is completely rewritten in TypeScript.'

If you liked this, give a start to the Tiptap and Prosemirror repository for making experience of rich text editing in browser mind-boggling.

Also you can find all the source code used in this post at this repository.

That's it for this post my fellow coders, see you in the next post !!

If this was helpful to you in any way and you'd like to support my work, consider Buying me a ☕️.

array.map(): A better way 🧐 ?

Jeet Mandaliya — Fri, 29 Jan 2021 18:35:38 +0000

The method map() creates a new array with the values that get returned by calling the function provided to map(anyFunctionHere) on every element of an array.

The array, on which the map() is being executed is named as calling array.

Task

Given an array with reversed first names, create a new array with the same position of names in the original array but re-reversed(should make sense) first names.

Let's take a look how we could tackle it using for-loop.

const arrayOfNames = ['anhsirK', 'nosaJ', 'nolE', 'drawdE'];

let arrayOfReversedNames = []; // declaring an empty array to store results.

for (let nameIndex = 0; nameIndex < arrayOfNames.length; nameIndex = nameIndex + 1) {
  // we can reverse a string in JavaScript with String.split("").reverse().join("")
  const reversedFirstName = arrayOfNames[nameIndex].split('').reverse().join('');
  arrayOfReversedNames.push(reversedFirstName);
}

// output: [ 'Krishna', 'Jason', 'Elon', 'Edward' ]

In the above example, we declared arrayOfReversedNames and then appended calculated reverse names to that array.

It's time to solve the same problem, but with the use of map()method.

const arrayOfNames = ['anhsirK', 'nosaJ', 'nolE', 'drawdE'];

// declaring an empty array to store results.
let arrayOfReversedNames = arrayOfNames.map((firstName) => {
  return firstName.split("").reverse().join("")
}); 

// arrayOfReversedNames: [ 'Krishna', 'Jason', 'Elon', 'Edward' ]

We pass in an arrow function to map() with an argument firstName. firstName will have a different value in each iteration on the elements of the calling array. Here in the first iteration, the value of firstName would be anhsirK, nosaJ in the second iteration, and so on... It's clear that we get the same results because map() is also doing the same iteration that for-loop was doing.

At this point you might ask if both methods are doing the same thing that is iteration over elements of the calling array, shouldn't we use for-loop instead of map()? It's more readable and explicitly describes what is being done there.

Well, yes and no.

Benefits of using `map()` over `for-loop`

Fewer lines of code - mostly better!
We get access to individual elements of the calling array directly with an argument in the function passed on to map() - far easier than always getting values with callingArray[someIndex].
A certainty that all elements of the array will be iterated with map() - never deal with wrong indices inside a for-loop anymore.

All we know at the end of the day is that when we have an array and we want to process every element of that array and store values in a new one, map() is the way to go.

This is originally written at my blog

Edit:

Take a look at the comment on this post made by Brett Thurston to get more info on where not to use map() as per MDN.

04 Git: Branches Are Breathtaking 🔥

Jeet Mandaliya — Thu, 28 Jan 2021 00:51:17 +0000

What Are Branches?

Branches are a way of diverging from the main development line and keep working on the project without affecting the main development line ("main development line" refers to mainly master or main branch). That means every branch has its own commits which can be different from other branches and they do not meddle in each others stream unless we manually perform operations like merging, rebasing or cherry-picking.

What Are Branches Used For?

As branches allow us to work without messing up main development line, branches are used for adding new features, solving bugs, hot fixing a critical bug etc. Basically everything that needs to be isolated at the time of development, uses branching.

We can have a new branch for every ongoing task, commit changes in that branch and finally when the work is done, we can merge that branch into main development line(in our case master branch).

In the previous posts in this series, you might've noticed that there is master written in the terminal screenshots. That stands for which branch we're currently working on.

`master` Is Name Of Current Branch

Now that we've discussed what Git Branches are and what they're used for, we can move on to how to use them. There are two commands that we generally use to create and navigate through the branches which are git branch and git checkout. The latter one can also be used with commits, but for now, we'll use it with branches.

Command: `git branch`

Running git branch gives you a list of existing branches in the project and the current branch is shown with a * at the start of its name in the list. Here is the repository that I am working on for this series.

Running git branch <name-of-branch> will create a new branch.

`git branch "new-list"`

Command: `git checkout <name-of-branch>`

Running git checkout <name-of-branch> allows us to navigate to the branch name that we provided.

`git checkout new-list`

We see that running git checkout new-list switched the branch and when we ran git branch | cat, the * is now with new-list which means that new-list has become our current branch.

Now let's add a new list of friends in this branch. Since blog posts and books and are our biggest friends, we're gonna add them before everything.

After creating the file and writing to it, we can finally commit that file and push it.

`git add friends.md && git commit -m "added friends.md"` and `git push`

We see that there was a fatal error when we ran git push. The error put in simple words means that the new branch named new-list doesn't exist in GitHub(remote). And it shows us a suggestion at the end to run to create this branch in GitHub, which is git push --set-upstream origin new-list.

`git push --set-upstream origin new-list`

The command git push --set-upstream origin new-list is equivalent to creating a new branch in remote named origin and pushing our new local commit to that remote branch.

The thing to keep in mind is that whenever we create a branch with git branch, it is only on our machine, we need to push it to remote manually after creating it.

Shortcut: `git checkout -b <name-of-new-branch>`

Running git checkout -b <name-of-new-branch> will not only create a new branch but also navigate to that new branch so you don't have to run git branch <name-of-new-branch> and then git checkout <name-of-new-branch>.

`git checkout -b "checkout-b-test"`

Yay 🧨🧨🧨, now you know how to create branches and switch between them, and a shortcut that does both by default!

This post is originally written on my blog.

03 Git: Pull - Getting The Remote Changes

Jeet Mandaliya — Thu, 28 Jan 2021 00:43:16 +0000

This post falls in the series Git: An Essential Tool after 02 Git: Git Remotes and GitHub. In that, we discuss what git remotes are and how we can use them to have a remote copy of our Git repo in the code hosting platform for version control and collaboration like GitHub. I would genuinely recommend reading it before reading the current post.

Git Pull: Getting Changes From A Remote Server (ex. GitHub)

Many times we require to work collaboratively on a project and make changes to software concurrently. When we're editing files on our machines locally and then pushing it on GitHub, other collaborators might also want to push their code to GitHub to collaborate.

Git Pull helps us to get the changes done by other collaborators(or by us using GitHub Website). This process can be best explained with help of an example and that's exactly what we're going to do. So let's dig in and go to the repository that we created in 02 Git: Git Remotes and GitHub. In my case, it would be this. Here is what we are going to do.

Add a new file named README.md
Add dummy content to it.
Git Pull to get README.md that we created.

GitHub: Adding A New File To Repo

On visiting repo on GitHub, we see the view of repo which has an Add File dropdown button in the middle of the top-right controls section.

Two options Create new file and Upload files are visible in the dropdown. For the sake of simplicity, we're gonna go for Create new file. On hitting that button, we're gonna be redirected to a page that looks like the following.

As mentioned in the list of things to do, we're going to name the file README.md. There is a noble reason for it that is fused with the default repository view of GitHub, which we'll see at the end. Following is the text, that is written in the content section.

# first-repo
> This repo is for the [series Git: An Essential Tool](https://webdevjeet.me/tag/git-an-essential-tool-for-devs/)  on [My Blog](https://webdevjeet.me)

The extension .md stands for MarkDown format. GitHub has great resources on basic markdown format here. If we like, we can also see the preview of our markdown that we wrote in the Edit new file section rendered directly inside the Preview tab. Here's what it looks like.

After adding content in README.md as per our willingness, we can continue with committing the file. Add any commit message you like, here I've written ++ README.md which is my way of writing commit messages, with which I immediately recognize that we added a new file named README.md in this commit. Since we'd discuss branches later in its specific post, that focuses on branches, we're gonna leave the first radio Commit directly to the master branch Selected.

As soon as we click on Commit new file we'll be redirected to the home page of the repo, but this time, GitHub has a slight new surprise ready for us as mentioned before.

Repository View After Adding `README.md`

That's right, GitHub shows the content of README.md in the root directory of the repo rendered on the repo page by default. README.md is in the general run of things used to show information about the repo and that's the exact thing we did here too!

Command: Git Pull

Now that we've added the file on GitHub, we can go to our code and run git pull to update the state of the repository to be in sync with the state of the repo on GitHub.

Running git pull will always show which files have been added or modified alongside with total numbers of lines added/modified in a particular file. In our case, we can see something like README.md | 3 +++ which means README.md file had changes in 3 lines and +++ means all of them were additions and not modifications. No modifications also make perfect sense because we added this file for the first time to our project.

Git pull updates local repo with the new information of remote repo and that allows us to not only fetch changes done in GitHub website by us but also changes done by other collaborators in GitHub. And in most cases, you will find yourself getting changes from collaborators because we rarely edit/create/upload files from GitHub as we can do it far better with help of commands like git push.

Whoopee ✅ , now you know how to update your local repo with the latest changes with **git pull** !!!🔥

Next post in the series is 04 Git: Branches Are Breathtaking 🔥 where we talk about what Git Branches are and what problems they solve while collaborating.

This post is originally written on my blog.

02 Git: Git Remotes and GitHub

Jeet Mandaliya — Thu, 28 Jan 2021 00:34:00 +0000

This post falls in the series after 01 Git: Basics in the series. If you haven't read it or wanna brush up your Git skills, consider giving it a shot first 🚀.

In the above-mentioned post, we discussed basic Git concepts like initializing a Git repository(abbr. "repo"), creating a commit, and getting info about differences in files. All those were being done only on our machine only.

In this post, we're gonna take a look at how to manage remotes, which allow us to maintain a copy of our Git repository in a remote server. There are countless benefits of having a remote repository for Git, some are listed below.

Ability to have collaborators/contributors on our project from across the globe.
Perform automated actions like deploying a new version of our software, checking code-quality of our software, and much more.
Show your projects to the world with a simple git push.
Always have a copy of your code on a remote server and never lose it.

Creating A Remote Repository With GitHub

GitHub is a code hosting platform for version control and collaboration.

If you don't have an account on GitHub, it can be created here. Once it's done and you are already on the homepage, a new repository can be created with the option in dropdown named "+" in the top-right corner of the nav-bar.

Alternatively visiting https://github.com/new will take us to the create new repo page. Once you're on that page, you should see something similar to the following.

https://github.com/new

You can make the repository private/public according to your choice. For now, we're going to leave all the options in "Initialize this repository with" unchecked. After hitting the "create repository" button, we'll be taken to the repo page. There you can see configurations about pushing an existing repo from Command-Line-Interface(abbr. "CLI").

Three ways to push to the repository are mentioned here. For the scope of this post, we'll focus on the first two only.

Pushing After Creating A New Repo via CLI

We had a thorough discussion about initializing a git repo via CLI and committing files in our previous post 01 Git: Basics. Once we're done with initializing the Git repo locally and committing at least once, we can focus on pushing our repository to GitHub. Now comes the part where we configure the GitHub as our origin remote in our local Git repo. We can have multiple remotes configured in our local repo and origin is the default remote. When we don't specify any remote while executing Git commands, it's going to operate with origin remote by default.

To list all the remotes we can run git remote -v. Right now as we won't have any remotes configured, it'll output nothing. Now we can add the origin remote by writing the following command.

git remote add origin https://github.com/sereneinserenade/first-repo.git

As mentioned earlier, to list the remotes, we can run git remote -v. This time, it'll show us the remote we added.

On the 2^nd line, we see that our push config is set to https://github.com/sereneinserenade/first-repo.git. Pushing to origin can be done with git push origin master. Notice that we've added remote with HTTP, thus Git will ask for username and password for GitHub when we will be pushing our repo.

As an alternative to that, we can use ssh and configure SSH key for GitHub and use it as an authentication method. A comprehensive guide on how to generate an ssh-key and add it to your GitHub account can be found here. You'll be required to generate an ssh-key first and then you can add it to your GitHub account. In the "Adding a new SSH key to your GitHub account" they use commands like pbcopy or xclip. We can simply do it by using echo ~/.ssh/id_ed25519.pub and then copying output to the clipboard manually with ctrl/cmd + c.

But before all that, configuring git is better since it allows other collaborators to identify the author of specific commits. Configuring Git requires the Name and Email of the Git User to be configured. Following would help in configuring.

git config --global user.name "<YOUR NAME HERE>"
git config --global user.email "<YOUR PUBLIC_EMAIL HERE>"

I already have an SSH key for GitHub configured on my machine, and I will be continuing with that. When we use ssh, we also need to configure our remote as git@github.com:sereneinserenade/first-repo.git as mentioned below.

We can finally push it by using git push origin master as mentioned earlier.

Focusing on the last line of output, we see master -> master which basically means that we pushed the local branch master to the remote branch master or origin/master. We will be discussing Git Branches in its own post, for now, the only thing to keep in mind is that in a repo generated by git init, the default branch is master or main and we push it to remote respectively with their names, i.e if the output of git branch is master, we can push it with git push origin master and if it's main, we can push it by git push origin main.

That's it! We've pushed the repo and we can see in GitHub that our file **learnings.md** was also uploaded 🚀.

GitHub Repository Page After Pushing

What We Discussed In This Iteration:

Knowing what are Git Remotes - done!
How to Create a New Repository on GitHub - done!
How to Configure SSH key for GitHub - done!
How to add Git Remotes to our local copy of repo - done!
Pushing our local repo to GitHub - done!

Alrighty then 🚀, now you know how to work with Git Remotes and GitHub to keep your code online!!!

Next post in this series is 03 Git: Pull - Getting The Remote Changes where we talk about how to do changes in GitHub UI and fetch them to our local machine.

This post is originally written on my blog.

01 Git: Basics

Jeet Mandaliya — Thu, 28 Jan 2021 00:20:48 +0000

What is Git and why has it become a must in the current software development world?

Git is an open-source, distributed version control system created initially by Linus Torvalds, creator of Linux (& Git). You might be wondering what is a Version Control (or Source Control) System. Well, in the world of software development today, versioning the software has become essential as it helps developers to keep track of new changes being done to the software and allows developers to collaborate on it. Also if something goes wrong, they can roll-back to the last stable version.

Knowing the purpose of Git, we can move on to how to use Git to build awesome pieces of software. The official installation guide is here. To use Git, first of all, we have to open a terminal and change our present working directory(aka pwd) to the directory where we want to start using Git. In Unix/Linux based systems, command cd will do what we want.

cd ~/path/to/directory

Once we're inside of target directory, we have to initialize the Git repo. We can do so by running the following in the terminal.

git init

Here is output of git init on successful execution:

Initialized empty Git repository in ~/path/to/directory

We discussed earlier that Git keeps track of changes in files of our project. From "tracking", there are two states of files inside a Git initialized directory. One is tracked by Git and the other, as you might've guessed, is untracked. To understand the concept of tracked and untracked files, we must have some files first. If the directory is empty, we can create a file and add some text to it directly by using echo command on Unix/Linux-based systems.

echo "1\. Learning Git and Github" > ./learnings.md

The > creates a new file named learnings.me and puts the output of echo in that file. Now as soon as we create this file, we can execute git status in the terminal to know the status of our tracked/untracked files.

Output of `git status`

Ignoring all other information, when we set an eye on the section of Untracked Files, we see that there is our file named learnings.md. I.e. Git recognized the fact that the file is new and there has never been a version of this file stored inside of Git and that makes the file untracked.

Command: Git Add

Once the file is on the list of Untracked Files, we much move the files to the Git state of Staged Files, where Git lists files that we changed the content of to update our software. In our case, we created a new file (learnings.md), which will be added to the list of Staged Files.

git add learnings.md

As discussed earlier, to know the status of Git tracked/untracked files, we run git status. Here is what Git will show us now once we've run git add learnings.md.

Command: Git Commit

Now we can see that our file is listed under the Changes to be committed(aka staged file-state) section. Once files are staged(ready to be committed), we can tell Git to take a snapshot of the current state of files with git commit. In general, we provide a meaningful message(aka Commit-Message) with every commit, so that we can look back at commits later and recognize the changes done in a specific commit. We provide our Commit-Message with an -m flag with git commit.

git commit -m "added list of techs in learnings.md"

Output of `git commit -m "added list of techs in learnings.md"`

Git has taken a snapshot of current files in the directory and since this is the first commit, it is labeled as "root-commit". We discussed earlier that the main application of Git is to keep track of changes in our files. So now it's time to change the content of the file we created earlier. In Unix/Linux systems, we can use >> with echo to append the content at the end of a file making (more info on >> here) a change to the file and that's where Git kicks in.

echo "2\. ReactJS and VueJS" >> learnings.md

We can use cat command to print the content of a file in the terminal in Unix/Linux systems. And we see that the file's been updated with a new line containing "2. ReactJS and VueJS".

Command: Git Diff

Now that we have an updated file that we once committed into Git earlier, we can ask Git to show us differences between the earlier committed(saved) version and the current updated file with the command git diff.

Output of `git diff`

Git diff shows us a green line with a "+" at the start. It stands for the fact that the content that was added to the file is new. Once again we can commit these changes to make a snapshot of the current state of git. Running git add learnings.md and git commit -m "added ReactJS and VueJS to the learnings list" subsequently would stage and commit our new change in the file. We can see the list of commits by executing git log.

Output of `git log`

If we wish to be informed about the Commit-Messages only, we can use --oneline with git log.

Output of `git log --oneline`

Quick Revision Of Topics Discussed Till Now:

initializing git in a directory with git init
staging files with git add <File Name>
committing them with git commit -m "meaningful-commit-message"
see the difference between the current state of files and the last committed version of files with git diff
see the information about the commits with git log or git log --oneline(for compact info)

Hurray 👏 👏 👏 , now you know how git operations that developers do 1000s of time in a typical year are done!!! 🥳

Next post in this series is 02 Git Remotes and GitHub where we go deep into pushing repos to GitHub and manage remotes to local git repo.

This post is originally written on my blog.

DEV Community: Jeet Mandaliya

How I implemented Google docs like commenting in Tiptap

sereneinserenade / tiptap-comment-extension

Google-Docs 📄🔥 like commenting 💬 solution for Tiptap 2(https://tiptap.dev)

Tiptap Comment Extension:

Demo:

How to use

Next-Gen Text Editing in Browser With Tiptap 🔥

Requirements:

Installation

Initializing

Conclusion

Tiptap 2.x

array.map(): A better way 🧐 ?

Task

Benefits of using map() over for-loop

04 Git: Branches Are Breathtaking 🔥

What Are Branches?

What Are Branches Used For?

Command: git branch

Command: git checkout <name-of-branch>

Shortcut: git checkout -b <name-of-new-branch>

03 Git: Pull - Getting The Remote Changes

Git Pull: Getting Changes From A Remote Server (ex. GitHub)

GitHub: Adding A New File To Repo

Command: Git Pull

02 Git: Git Remotes and GitHub

Creating A Remote Repository With GitHub

Pushing After Creating A New Repo via CLI

What We Discussed In This Iteration:

01 Git: Basics

What is Git and why has it become a must in the current software development world?

Command: Git Add

Command: Git Commit

Command: Git Diff

Quick Revision Of Topics Discussed Till Now:

Benefits of using `map()` over `for-loop`

Command: `git branch`

Command: `git checkout <name-of-branch>`

Shortcut: `git checkout -b <name-of-new-branch>`