DEV Community: malezjaa

Fully featured, modern and extensible editor

malezjaa — Sun, 28 Jan 2024 18:17:58 +0000

Hello, I recently made a React library for creating text editors. This library uses tiptap and comes with all the essential features. Moreover, you can extend its functionality with extensions and customize its styles.

Installing

pnpm install eddies

Usage

To start you only need few lines of code:

"use client";
import { Editor } from "eddies";

export default function Page() {
  return (
    <div className="m-5">
      <Editor />
    </div>
  );
}

Features

Slash commands
When you type / in the editor, a menu will appear with all available commands. You can customize the commands by passing the slashMenuCommands prop to the editor.
Syntax highligting

In order to use syntax highlighting follow the guide in the documentation
Character counter
Themes
Formatting toolbar
And many more!

You can try it here: https://eddies-web.vercel.app/
Github repo: https://github.com/malezjaa/eddies
Docs: https://malezjaa.github.io/eddies/

Good logging library for node.js?

malezjaa — Wed, 14 Jun 2023 20:53:16 +0000

Hi, I recently created a library for logging. I wanted to share it with you and show you how it works.

First you have to install it:

npm install prime-console

Now we can initialize the Logger class.

import { Logger } from 'prime-console';

const logger = new Logger({
   logLevel: 5
});

By deafult, it will only log error messages. To change that set logLevel to 5.

Here you will find all available options:

import { Logger, LoggerOptions } from 'prime-console';

const options: LoggerOptions = {
  config: {
    info: {
      color: "blue",
    },
    error: {
        color: "#e17607",
    },
    warning: {
      color: "yellow",
    },
    debug: {
      color: "magenta",
    },
    verbose: {
      color: "cyan",
    },
    silly: {
      color: "green",
    },
  },
  format: "[%t] %d %m",
  logFile: "./log.txt",
  logLevel: 5,
  logFileFormat: "json",
};

const logger = new Logger(options);

format - way of message being displayed
- %t - type
- %d - date/time
- %m - message

CLI

npx prime generate

run this to easily generate Logger config

You can save your logs to text file:

import {Logger} from 'prime-console';

const logger = new Logger({logLevel: 5, logFile: 'log.txt'});

logger.info('test file log message');

or save to json

import {Logger} from 'prime-console';

const logger = new Logger({logLevel: 5, logFile: 'log',  logFileFormat: "json"});

logger.info('test file log message');

Don't forget about custom colors and log levels:

const options: LoggerOptions = {
  config: {
    error: {
        color: "#e17607",
    },
  },
  logLevel: 5
}

const log = new Logger(options)

logger.addCustomLevel('custom', 3, 'blue');
logger.custom('test custom message', 'custom');

Clear function:

import {Logger} from 'prime-console';

const logger = new Logger({logLevel: 5});

logger.clear() or logger.clear(true)

Clear function will clear the console. If true is provided as first argument, function will also clear the log file.

You can find source code here: https://github.com/malezjaa/prime-console If you want you can give it a star.

Hex Color Generator

malezjaa — Fri, 22 Oct 2021 20:43:02 +0000

Creating a color draw is very simple.

First we need to add some html.

<!DOCTYPE html>
<html lang="en">
<!-- Head -->
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="./style.css" />
    </head>
    <body>
<!-- Main Container -->
        <div class="container">
            <h1>Draw a Color</h1> <!-- Title -->
            <button class="btn" type="button">Draw a Color</button><br /> <!-- button to draw color -->
            <h1 class="hex" style="text-align: center; margin: 10px"></h1> <!-- hex value -->
            <div class="colors">
                <div class="color1"></div> <!-- div with hex color -->
            </div>
        </div>

        <script src="./index.js"></script>
    </body>
</html>

Now let's create a css file with simple styles. It has to be presented somehow!

Main Styles

* {
    box-sizing: border-box;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

body {
    background: rgb(243, 237, 237);
}

.container {
    align-self: center;
    align-items: center;
    text-align: center;
    margin: 15px;
}

Color container styles

.color1 {
    background: gray;
    height: 200px;
    width: 210px;
    border-radius: 15px;
    margin: 40px auto;
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}

And button styles


.btn {
    font-size: 1em;
    color: #fff;
    cursor: pointer;
    outline: none;
    border: none;
    background: #b2d100;
    display: inline-block;
    padding: 10px 30px;
    margin-top: 20px;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    letter-spacing: 2px;
    transition: 0.5s;
}

.btn:hover {
    letter-spacing: 4px;
}

And last not much js script.

First we download all the items.

const btn = document.querySelector('.btn')
const color = document.querySelector('.color1')
const hex = document.querySelector('.hex')

Then we create a function that generates the hex code

function getRandomColor() {
    var letters = '0123456789ABCDEF'
    var color = '#'
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)]
    }
    return color
}

And the button handling

const btnClick = () => {
    console.log(getRandomColor())
    color.style.background = getRandomColor()
    hex.innerHTML = getRandomColor()
}

btn.addEventListener('click', btnClick)

The code is available on github and on this website.

Thanks, Kraken.