Rich text editor for Vue using Tiptap and Vuetify

Casual Coder — Sun, 06 Oct 2019 18:46:22 +0000

Recently, I wanted to add a rich text editor in one of my pet project. I dabbled with CKEditor for a while but I found it a bit difficult to adopt in Vue (I'm fairly new to front end development)
Other option was Tiptap, It is a renderless editor based on Prosemirror. It was easy to follow, I was able to create a basic editor without any style quickly.

This is an overview of how to use Vuetify for styling of Tiptap editor

Setup

Assuming you alreaday have a Vuetify project-



$ npm add tiptap tiptap-extensions

Code Overview

Key concepts before going into the code (from docs)

Editor class

This class is a central building block of tiptap. It does most of the heavy lifting of creating a working ProseMirror editor such as creating the EditorView, setting the initial EditorState and so on. The Editor constructor accepts an object of editor options.

EditorContent

This is like an container component which accepts Editor instance as a property.

Extensions

Each editor feature like Headings, Bold, Italics, Images etc. are implemented as extensions. We need to pass instance of each extension in the editor option for each of the feature we want in our editor.

EditorMenuBar

This component holds all the toolbar buttons. The action is performed through commands eg. commands.bold, commands.image, which can be linked to click event of any button.

With this background we can dive into code -

Add Editor instance with Heading, Bold, Underline and Image extensions.



data() {
    return {
      editor: new Editor({
        content: `Type here...
        `,
        extensions:[
            new Heading({levels: [1,2,3]}),
            new Bold(),
            new Underline(),
            new Image(),
        ]
      })
    }
  },

Pass editor as property to editor-content component



 <editor-content class="editor-box" :editor="editor"/>

Create Editor's menubar. It uses slots which I don't fully understand at this point, But all we need to understand is that commands are the actions that we wish to perform like making something Bold, inserting image and isActive is used to check if current line or current selection has the Bold/Italic or not.



<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
            <div>
                <v-btn text icon
                :class="{ 'is-active': isActive.bold() }"
                @click="commands.bold"
                >
                    <v-icon>mdi-format-bold</v-icon>
                </v-btn>
            </div>
</editor-menu-bar>

Here's the full code of the view.



<template>
  <v-container>
      <v-row>
        <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
            <div >
                <v-btn text icon
                :class="{ 'is-active': isActive.heading({ level: 1 }) }"
                @click="commands.heading({level: 1})"
                >
                   <b> H1 </b>
                </v-btn>
                <v-btn text icon
                :class="{ 'is-active': isActive.bold() }"
                @click="commands.bold"
                >
                    <v-icon>mdi-format-bold</v-icon>
                </v-btn>

                <v-btn text icon
                :class="{ 'is-active': isActive.underline() }"
                @click="commands.underline"
                >
                    <v-icon>mdi-format-underline</v-icon>
                </v-btn>

               <v-btn text icon
               @click="loadImage(commands.image)">
                   <v-icon>mdi-image</v-icon>
               </v-btn>
            </div>            
        </editor-menu-bar>
    </v-row>
    <v-row>
        <v-col cols=12 >
            <editor-content class="editor-box" :editor="editor"/>
        </v-col>
    </v-row>
  </v-container>
</template>


<script>
import { Editor, EditorContent, EditorMenuBar  } from 'tiptap';
import { Heading, 
        Bold, 
        Underline,
        Image } from 'tiptap-extensions';
export default {
components: {
    EditorContent,
    EditorMenuBar,
  },
  data() {
    return {
      editor: new Editor({
        content: `Type here...
        `,
        extensions:[
            new Heading({levels: [1,2,3]}),
            new Bold(),
            new Underline(),
            new Image(),
        ]
      })
    }
  },
  methods:{
      loadImage:function(command){
          command({src: "https://66.media.tumblr.com/dcd3d24b79d78a3ee0f9192246e727f1/tumblr_o00xgqMhPM1qak053o1_400.gif"})
      }
  },
  beforeDestroy() {
    this.editor.destroy()
  },
};
</script>
<style >
.editor-box> * {
    border-color: grey;
    border-style: solid;
    border-width: 1px;
}

.is-active{
    border-color: grey;
    border-style: solid;
    border-width: 1px;
}
 /* *:focus {
    outline: none;
}  */
</style>

Here's how it looks ultimately-

Hope this helps

Why does NSEpy returns empty dataframe

Casual Coder — Mon, 23 Sep 2019 09:32:40 +0000

The frustration

You are half way thru downloading data for 100 stocks and suddenly you realize that half of the dataframes are empty. What just happened, NSE's website probably detected that there are too many requests from your IP and now you are blocked. But the question is do you really need to download the same data every time?

Typical analysis cycle

Lets consider you are running an analysis every week on last one month data-

from datetime import date,timedelta
from nsepy import get_history

def download_data_for_month():
    end_day = date.today()
    start_day = end_day - timedelta(30)
    stock_price_df = get_history(symbol="SBIN", start=start_day, end= end_day)
    return stock_price_df

def do_some_analysis(df):
    """ Some Cool Analysis """

df = download_data_for_month()
do_some_analysis(df)

What's wrong with above example-

The script downloads data every time you run it and in an development cycle you might change your code frequently, multiple times a day or even hour. Why would you download data on each iteration? It not only slows down YOUR development productivity, but also loads the NSE's website.
Consider you are running the script every week, incremental data change is for just 7 days but you are still requesting data for the whole 30 days.

What can we change

Have separate scripts for downloading and analysis

download_data.py

def download_data_for_month():
    end_day = date.today()
    start_day = end_day - timedelta(30)
    stock_price_df = get_history(symbol="SBIN", start=start_day, end= end_day)
    return stock_price_df


df = download_data_for_month()
df.to_pickle('SBIN.pkl')

analysis.py

import pandas as pd
def do_some_analysis(df):
    """ Some Cool Analysis """

df = pd.read_pickle('SBIN.pkl')
do_some_analysis(df)

DEV Community: Casual Coder