quick map through a component using array constructor

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

answer quick map through a component using array constructor

related custom text editor for next js

quick map through a component using array constructor

Comment

  {
            Array.from({ length: 6 }).map((_, index) => (
              <IoStar key={index} className="text-[#f5b50a] inline" size={20} />
            ))
          } 
          {/* <IoStar className="text-[#f5b50a] inline" size={20} />
          <IoStar className="text-[#f5b50a] inline" size={20} />
          <IoStar className="text-[#f5b50a] inline" size={20} />
          <IoStar className="text-[#f5b50a] inline" size={20} />
          <IoStar className="text-[#f5b50a] inline" size={20} /> */}
          <IoStarOutline  className="inline" size={20} />

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: constructor javascript map using

Link to this answer
Share Copy Link

Contributed on Jan 05 2025

Doyin Atobaru

0 Answers Avg Quality 2/10

Closely Related Answers

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

quick map through a component using array constructor

Contents

More Related Answers

quick map through a component using array constructor

Closely Related Answers

custom text editor for next js

Grepper

Documentation

Social

Legal

Contact

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