Breaking News: Grepper is joining You.com. Read the official announcement!

custom text editor for next js

Doyin Atobaru answered on January 2, 2025 Popularity 1/10 Helpfulness 1/10

answer custom text editor for next js

related jalali moment

custom text editor for next js

Comment

import React, { useCallback, useMemo, useState } from 'react';
import isHotkey from 'is-hotkey';
import { Editable, withReact, useSlate, Slate } from 'slate-react';
import { Editor, Transforms, createEditor, Descendant, Element as SlateElement } from 'slate';
import { HistoryEditor, withHistory } from 'slate-history';

import { Button, Toolbar } from './components';
import {
  Bold,
  Italic,
  Underline,
  Quote,
  AlignLeft,
  AlignCenter,
  AlignRight,
  AlignJustify,
  ListOrdered,
  List,
  Undo2,
  Redo2,
} from 'lucide-react';
import DOMPurify from 'dompurify';

// Extend BaseElement to include 'type' and 'align'
type CustomElement = {
  type: string; // or use specific string literal types like 'paragraph' | 'list-item' | 'bulleted-list' | etc.
  align?: string;
  children: Descendant[];
};

declare module 'slate' {
  interface BaseElement extends CustomElement {}
}

import { css, cx } from '@emotion/css';
import { marked } from 'marked';

const HOTKEYS = {
  'mod+b': 'bold',
  'mod+i': 'italic',
  'mod+u': 'underline',
  'mod+`': 'code',
};

const LIST_TYPES = ['numbered-list', 'bulleted-list'];
const TEXT_ALIGN_TYPES = ['left', 'center', 'right', 'justify'];

interface RichTextEditorProps {
  handleMarkdownChange: (markdown: string) => void; // Prop to receive the callback function
}

const RichTextEditor = ({ handleMarkdownChange }: RichTextEditorProps) => {
  const [markdown, setMarkdown] = useState('');
  const renderElement = useCallback(props => <Element {...props} />, []);
  const renderLeaf = useCallback(props => <Leaf {...props} />, []);
  const editor = useMemo(() => withHistory(withReact(createEditor())), []);

  // Convert Slate node to Markdown
  const slateToMarkdown = (node: any): string => {
    if (Editor.isEditor(node)) return ''; // Skip if it's the editor itself

    // Handle text nodes directly (they don't have children, just a text property)

    if (node.text) {
      let text = node.text;

      // Apply Markdown formatting for bold, italic, and underline
      if (node.bold) text = `**${text}**`;
      if (node.italic) text = `*${text}*`;
      if (node.underline) text = `__${text}__`;

      return text;
    }

    // Handle different block types
    switch (node.type) {
      case 'paragraph':
        return node.children.map(child => slateToMarkdown(child)).join('');
      case 'bulleted-list':
        return `<ul style="list-style-type: disc;">${node.children
          .map(child => `<li>${slateToMarkdown(child)}</li>`)
          .join('')}</ul>`;
      case 'numbered-list':
        return `<ol>${node.children
          .map((child: any, index: number) => `<li>${slateToMarkdown(child)}</li>`)
          .join('')}</ol>`;
      case 'list-item':
        return node.children.map((child: any) => slateToMarkdown(child)).join('');
      case 'block-quote':
        return `<blockquote>${node.children
          .map(child => slateToMarkdown(child))
          .join('')}</blockquote>`;
      default:
        return node.children ? node.children.map(child => slateToMarkdown(child)).join('') : '';
    }
    // switch (node.type) {
    //   case 'paragraph':
    //     return node.children.map(child => slateToMarkdown(child)).join('');
    //   case 'bulleted-list':
    //     return node.children
    //       ? node.children.map(child => `* ${slateToMarkdown(child)}`).join('\n') + '\n'
    //       : '';
    //   case 'numbered-list':
    //     return node.children
    //       ? node.children.map((child: any, index: number) => `${index + 1}. ${slateToMarkdown(child)}`).join('\n') + '\n'
    //       : '';
    //   case 'list-item':
    //     return node.children
    //       ? node.children.map((child: any) => slateToMarkdown(child)).join('')
    //       : '';
    //   case 'block-quote':
    //     return `> ${node.children.map(child => slateToMarkdown(child)).join('')}\n`;
    //   default:
    //     return node.children ? node.children.map(child => slateToMarkdown(child)).join('') : '';
    // }
  };

  // Generate Markdown on editor change
  const handleEditorChange = (value: Descendant[]) => {
    let markdownContent = value.map(node => slateToMarkdown(node)).join('\n');
    // Ensure <br /> is not added inside <ul> or <ol>
    markdownContent = markdownContent.replace(/(?<!<\/blockquote>|<\/li>|<\/ol>)\n/g, '<br />');
    setMarkdown(markdownContent); // Update the state with Markdown content

    handleMarkdownChange(JSON.stringify(markdownContent)); //this pass in markdown into the function prop
    console.log(JSON.stringify(markdownContent));
    localStorage.setItem('content', JSON.stringify(markdownContent));
  };

  const rawHtml = marked.parse(markdown) as string;
  const sanitizedHtml = DOMPurify.sanitize(rawHtml);

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript next text-editor

Link to this answer
Share Copy Link

Contributed on Jan 03 2025

Doyin Atobaru

0 Answers Avg Quality 2/10

Closely Related Answers

jalali moment

Comment

yarn add jalali-moment

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: www.npmjs.com

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Jan 02 2025

Savalan

0 Answers Avg Quality 2/10

custom text editor for next js

Contents

More Related Answers

custom text editor for next js

Closely Related Answers

jalali moment

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.