DEV Community: mugichaba

Wysiwyg editor with Nuxt.js

mugichaba — Mon, 24 Jan 2022 15:17:03 +0000

I implemented wysiwyg editor with a library named tiptap.

Although I am almost a beginner in Nuxt.js, it was really easy to create the component.

FYI, the sample code uses buefy though I skip about installing and the detail of it.

Add tiptap to a project

The official website shows how to add it.
In my case, using yarn.



$ yarn add @tiptap/vue-2 @tiptap/starter-kit

Implement a wysiwyg component

Create Tiptap.vue and write the following code as a component.



<template>
  <div class="editor">
    <div v-if="editor" class="menu">
      <b-tooltip label="bold" type="is-dark">
        <b-button
          :class="{ 'is-active': editor.isActive('bold') }"
          icon-left="format-bold"
          type="is-text"
          size="small"
          @click="editor.chain().focus().toggleBold().run()"
        />
      </b-tooltip>
      <b-tooltip label="italic" type="is-dark">
        <b-button
          :class="{ 'is-active': editor.isActive('italic') }"
          icon-left="format-italic"
          type="is-text"
          size="small"
          @click="editor.chain().focus().toggleItalic().run()"
        />
      </b-tooltip>
      <b-tooltip label="strike" type="is-dark">
        <b-button
          :class="{ 'is-active': editor.isActive('strike') }"
          icon-left="format-strikethrough"
          type="is-text"
          size="small"
          @click="editor.chain().focus().toggleStrike().run()"
        />
      </b-tooltip>
      <b-tooltip label="code" type="is-dark">
        <b-button
          :class="{ 'is-active': editor.isActive('code') }"
          icon-left="code-tags"
          type="is-text"
          size="small"
          @click="editor.chain().focus().toggleCode().run()"
        />
      </b-tooltip>
      <b-tooltip label="paragraph" type="is-dark">
        <b-button
          :class="{ 'is-active': editor.isActive('paragraph') }"
          icon-left="format-paragraph"
          type="is-text"
          size="small"
          @click="editor.chain().focus().setParagraph().run()"
        />
      </b-tooltip>
      <b-tooltip label="header1" type="is-dark">
        <b-button
          :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
          icon-left="format-header-1"
          type="is-text"
          size="small"
          @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
        />
      </b-tooltip>
      <b-tooltip label="header2" type="is-dark">
        <b-button
          :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
          icon-left="format-header-2"
          type="is-text"
          size="small"
          @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
        />
      </b-tooltip>
      <b-tooltip label="header3" type="is-dark">
        <b-button
          :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
          icon-left="format-header-3"
          type="is-text"
          size="small"
          @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
        />
      </b-tooltip>
      <b-tooltip label="bulleted list" type="is-dark">
        <b-button
          :class="{ 'is-active': editor.isActive('bulletList') }"
          icon-left="format-list-bulleted"
          type="is-text"
          size="small"
          @click="editor.chain().focus().toggleBulletList().run()"
        />
      </b-tooltip>
      <b-tooltip label="ordered list" type="is-dark">
        <b-button
          :class="{ 'is-active': editor.isActive('orderedList') }"
          icon-left="format-list-numbered"
          type="is-text"
          size="small"
          @click="editor.chain().focus().toggleOrderedList().run()"
        />
      </b-tooltip>
      <b-tooltip label="undo" type="is-dark">
        <b-button
          icon-left="undo"
          type="is-text"
          size="small"
          @click="editor.chain().focus().undo().run()"
        />
      </b-tooltip>
      <b-tooltip label="redo" type="is-dark">
        <b-button
          icon-left="redo"
          type="is-text"
          size="small"
          @click="editor.chain().focus().redo().run()"
        />
      </b-tooltip>
    </div>
    <div class="input-field">
      <editor-content :editor="editor" />
    </div>
  </div>
</template>

<script>
import { Editor, EditorContent } from '@tiptap/vue-2';
import StarterKit from '@tiptap/starter-kit';

export default {
  components: {
    EditorContent,
  },

  props: {
    value: {
      type: String,
      default: '',
    },
  },

  data() {
    return {
      editor: null,
    };
  },

  watch: {
    value(value) {
      // HTML
      const isSame = this.editor.getHTML() === value;

      // JSON
      // const isSame = JSON.stringify(this.editor.getJSON()) === JSON.stringify(value)

      if (isSame) {
        return;
      }

      this.editor.commands.setContent(value, false);
    },
  },

  mounted() {
    this.editor = new Editor({
      content: this.value,
      extensions: [StarterKit],
      onUpdate: () => {
        // HTML
        this.$emit('input', this.editor.getHTML());

        // JSON
        // this.$emit('input', this.editor.getJSON())
      },
    });
  },

  beforeDestroy() {
    this.editor.destroy();
  },
};
</script>

<style lang="scss" scoped>
.editor {
  border: 1px solid lightgray;
  border-radius: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.menu {
  border-bottom: 1px solid lightgray;
  padding: 10px;
}
.input-field {
  padding: 10px;
}
</style>

The block below represents one of the menu button.
I use Material icons so you can find the icons like format-bold on the website.



<b-tooltip label="bold" type="is-dark">
 <b-button
   :class="{ 'is-active': editor.isActive('bold') }"
   icon-left="format-bold"
   type="is-text"
   size="small"
   @click="editor.chain().focus().toggleBold().run()"
 />
</b-tooltip>

When you call the component on any other component, you should pass a value like this.



<tiptap value="something">

something must belong to like data().
And when you modify the text on the wysiwyg editor, something property is going to be changed.

Create React app with TypeScript

mugichaba — Thu, 30 Dec 2021 14:17:55 +0000

Run the following command.

$ npx create-react-app my-app --template typescript

After finish the creating process...

$ cd my-app
$ npm start

Simple.

What's next...?

It was really easy to create an application.
Then, What I should do next?

I am not a designer, so I would like to develop a website as easy as possible.
Maybe Material UI is the best library for people like me?

Let's install it.

$ npm install @mui/material @emotion/react @emotion/styled

And I also want to use cool icons.

$ npm install @mui/icons-material

Then, just comment out the code on src/App.tsx and add Button (Also add a style to the button on src/App.css).

After just saving the code.

Awesome. How about a header?
The official website shows how to add a header named AppBar.

I just copied the code.

import './App.css';
import { AppBar, Button, IconButton, Toolbar, Typography } from '@mui/material';
import { Box } from '@mui/system';
import MenuIcon from '@mui/icons-material/Menu';

function App() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

export default App;

Then...

Great!
It seems too easy to develop a website using those components...

Build React environment

mugichaba — Thu, 30 Dec 2021 13:24:10 +0000

Build environment

I will build the environment with macOS Catalina.

Before we start, we need Node >= 14.0.0 and npm >= 5.6.
I have already had node and npm in my computer though if you need to install it, follow the steps below.
If you are not sure whether node and npm are in your computer or not, try the following commands.

$ node -v

If it shows like -bash: node: command not found, you should follow the next steps.
If it shows some version like v14.17.0, you don't have to install them.

Install Node.js

To install Node.js, it would be better to setup the following softwares in this order.

Homebrew ... Package manager for macOS.
Nodebrew ... Version manager for Node.js.
Node.js

Install Homebrew

Following the latest install commands on the official website is the best.

Now, the command is below:

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Install Nodebrew

It is also better to follow the official installing process.

Now, the command is:

$ brew install nodebrew

After that, run the setup command.

$ nodebrew setup

The result will show that a command like export PATH=$HOME/.nodebrew/current/bin:$PATH, then run the following command.

$ echo 'THE_COMMAND_ABOVE' >> ~/.bash_profile

Then run the following command to reflect the setting.

$ source ~/.bash_profile

Install Node.js

Last, install Node.js with the command.

nodebrew install stable

By the way, you can see all the versions which are available to install.

nodebrew ls-remote

If you don't have a preference about it, stable version is the best for now.

Install npm

It is installed with Node.js so let's see it.

$ npm -v

It must show the version like 6.14.13 (it is my result).

I was supposed to get to creating my first React app though this description became longer than I thought.
I will write about it in the next article.