@flozy/editor 1.0.0

package/src/components/Editor/Elements/CodeToText/CodeToText.jsx

@@ -0,0 +1,115 @@
+import React, { useEffect, useRef } from "react";
+import "./CodeToText.css";
+import Icon from "../../common/Icon";
+import { Interweave } from "interweave";
+import { Transforms } from "slate";
+import { useSlateStatic } from "slate-react";
+const CodeToText = (props) => {
+  const { html, action, location, handleCodeToText } = props;
+  const codeToTextRef = useRef();
+  const wrapperRef = useRef();
+
+  const editor = useSlateStatic();
+  const checkClick = (e) => {
+    const clickedComponent = e.target;
+    if (
+      wrapperRef?.current?.contains(clickedComponent) &&
+      !codeToTextRef?.current?.contains(clickedComponent)
+    ) {
+      let partialState = {
+        showInput: false,
+      };
+      if (html) {
+        partialState.html = action === "update" ? "" : html;
+      }
+      handleCodeToText(partialState);
+    }
+  };
+  useEffect(() => {
+    document.addEventListener("click", checkClick);
+    return () => {
+      document.removeEventListener("click", checkClick);
+    };
+  }, []);
+
+  const codeOnChange = async (e) => {
+    // e.preventDefault();
+    handleCodeToText({ html: e.target.value });
+  };
+  const addHtml = () => {
+    if (html) {
+      if (action === "update") {
+        Transforms.setNodes(
+          editor,
+          {
+            html,
+          },
+          {
+            at: location,
+          }
+        );
+      } else {
+        Transforms.insertNodes(
+          editor,
+          {
+            type: "htmlCode",
+            html: html,
+            children: [{ text: "" }],
+          },
+          {
+            select: true,
+          }
+        );
+        Transforms.insertNodes(editor, {
+          type: "paragraph",
+          children: [{ text: "" }],
+        });
+      }
+    }
+    handleCodeToText({
+      showInput: false,
+      html: "",
+    });
+  };
+  const clearHtml = () => {
+    handleCodeToText({ html: "" });
+  };
+  return (
+    <div className="code-wrapper" ref={wrapperRef}>
+      <div ref={codeToTextRef} className="codeToTextWrapper">
+        <div className="codeToText">
+          <textarea
+            name=""
+            id=""
+            value={html}
+            onChange={codeOnChange}
+            placeholder="Write html here..."
+          ></textarea>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "white",
+            }}
+          >
+            <Icon icon="arrowRight" />
+          </div>
+          <div className="textOutput">
+            <Interweave content={html} />
+          </div>
+        </div>
+        <div>
+          <button onClick={addHtml} className="done">
+            Done
+          </button>
+          <button className="clear" onClick={clearHtml}>
+            Clear
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CodeToText;

package/src/components/Editor/Elements/CodeToText/CodeToTextButton.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Button from '../../common/Button'
+import Icon from '../../common/Icon'
+const CodeToTextButton = (props) => {
+    const {handleButtonClick} = props
+    
+    return (
+        <>
+            <Button format='insert Html' onClick={() => handleButtonClick({showInput:true,action:'insert'})}>
+                <Icon icon='insertHtml'/>
+            </Button>
+        </>
+    )
+}
+
+export default CodeToTextButton

package/src/components/Editor/Elements/CodeToText/HtmlCode.jsx

@@ -0,0 +1,59 @@
+import { Interweave } from "interweave";
+import React, { useEffect } from "react";
+import { Transforms, Path } from "slate";
+import { useSelected, useFocused, useSlateStatic } from "slate-react";
+import useFormat from "../../utils/customHooks/useFormat";
+
+const HtmlCode = (props) => {
+  const { attributes, element, children } = props;
+  const selected = useSelected();
+  const focused = useFocused();
+  const editor = useSlateStatic();
+
+  const isHtmlEmbed = useFormat(editor, "htmlCode");
+
+  const handleKeyUp = (e) => {
+    if (!isHtmlEmbed) return;
+    if (e.keyCode === 13) {
+      const parentPath = Path.parent(editor.selection.focus.path);
+      const nextPath = Path.next(parentPath);
+      Transforms.insertNodes(
+        editor,
+        {
+          type: "paragraph",
+          children: [{ text: "" }],
+        },
+        {
+          at: nextPath,
+          select: true, // Focus on this node once inserted
+        }
+      );
+    } else if (e.keyCode === 8) {
+      Transforms.removeNodes(editor);
+    }
+    // console.log(e);
+  };
+  useEffect(() => {
+    document.addEventListener("keyup", handleKeyUp);
+    return () => {
+      document.removeEventListener("keyup", handleKeyUp);
+    };
+  }, [isHtmlEmbed]);
+  return (
+    <div
+      {...attributes}
+      {...element.attr}
+      style={{
+        boxShadow: selected && focused && "0 0 3px 3px lightgray",
+        marginRight: "20px",
+      }}
+    >
+      <div contentEditable={false}>
+        <Interweave content={element.html} />
+      </div>
+      {children}
+    </div>
+  );
+};
+
+export default HtmlCode;

package/src/components/Editor/Elements/CodeToText/HtmlContextMenu.jsx

@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import useContextMenu from "../../utils/customHooks/useContextMenu.js";
+import Icon from "../../common/Icon.jsx";
+import { Transforms, Node, Path } from "slate";
+
+const HtmlContextMenu = (props) => {
+  const { editor, handleCodeToText } = props;
+  const [selection, setSelection] = useState();
+  const [showMenu, { top, left }] = useContextMenu(
+    editor,
+    "htmlCode",
+    setSelection
+  );
+
+  const handleEditHtml = () => {
+    Transforms.select(editor, selection);
+    const parentPath = Path.parent(selection.focus.path);
+    const htmlNode = Node.get(editor, parentPath);
+    handleCodeToText({
+      showInput: true,
+      html: htmlNode.html,
+      action: "update",
+      location: selection,
+    });
+  };
+
+  return (
+    showMenu && (
+      <div className="contextMenu" style={{ top, left }}>
+        <div className="menuOption" onClick={handleEditHtml}>
+          <Icon icon="pen" />
+          <span>Edit HTML</span>
+        </div>
+      </div>
+    )
+  );
+};
+
+export default HtmlContextMenu;

package/src/components/Editor/Elements/Color Picker/ColorPicker.css

@@ -0,0 +1,38 @@
+
+.color-options{
+    display: grid;
+    grid-template-columns: auto auto auto auto auto auto auto;
+    align-items: center;
+    gap: 5px;
+}
+.clicked{
+  border: 1px solid lightgray;
+  border-bottom: none;
+}
+.option,.hexPreview{
+  width: 16px;
+  height: 16px;
+  background-color: #000000;
+
+}
+.color-picker form{
+  display: flex;
+  align-items: center;
+  column-gap: 5px;
+  width: 100%;
+}
+.color-picker input{
+  width: 65%;
+  height:1.3em;
+  border:1px solid lightgray;
+  border-radius: 5px;
+  padding-left:5px
+}
+.color-picker button{
+  margin:0;
+  padding:0;
+  cursor: pointer;
+}
+.color-picker input:focus{
+  outline: none;
+}

package/src/components/Editor/Elements/Color Picker/ColorPicker.jsx

@@ -0,0 +1,110 @@
+import React, { useRef, useState } from "react";
+import { MdFormatColorText, MdFormatColorFill, MdCheck } from "react-icons/md";
+import "./ColorPicker.css";
+import { colors } from "./defaultColors.js";
+import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
+import { Transforms } from "slate";
+import usePopup from "../../utils/customHooks/usePopup";
+import { ReactEditor } from "slate-react";
+
+const logo = {
+  color: <MdFormatColorText size={20} />,
+  bgColor: <MdFormatColorFill size={20} />,
+};
+const ColorPicker = ({ format, editor }) => {
+  const [selection, setSelection] = useState();
+  const [hexValue, setHexValue] = useState("");
+  const [validHex, setValidHex] = useState();
+  const colorPickerRef = useRef(null);
+  const [showOptions, setShowOptions] = usePopup(colorPickerRef);
+
+  const isValideHexSix = new RegExp("^#[0-9A-Za-z]{6}");
+  const isValideHexThree = new RegExp("^#[0-9A-Za-z]{3}");
+
+  const changeColor = (e) => {
+    const clickedColor = e.target.getAttribute("data-value");
+    selection && Transforms.select(editor, selection);
+    selection && ReactEditor.focus(editor);
+
+    addMarkData(editor, { format, value: clickedColor });
+    setShowOptions(false);
+  };
+  const toggleOption = () => {
+    setSelection(editor.selection);
+    selection && ReactEditor.focus(editor);
+
+    setShowOptions((prev) => !prev);
+  };
+  const handleFormSubmit = (e) => {
+    e.preventDefault();
+    if (!validHex) return;
+    selection && Transforms.select(editor, selection);
+
+    addMarkData(editor, { format, value: hexValue });
+    setShowOptions(false);
+    setValidHex("");
+    setHexValue("");
+    selection && ReactEditor.focus(editor);
+  };
+  const handleHexChange = (e) => {
+    e.preventDefault();
+    const newHex = e.target.value;
+    setValidHex(isValideHexSix.test(newHex) || isValideHexThree.test(newHex));
+    setHexValue(newHex);
+  };
+  return (
+    <div className="color-picker popup-wrapper" ref={colorPickerRef}>
+      <button
+        style={{
+          color: showOptions ? "black" : activeMark(editor, format),
+          opacity: "1",
+        }}
+        className={showOptions ? "clicked" : ""}
+        onClick={toggleOption}
+      >
+        {logo[format]}
+      </button>
+      {showOptions && (
+        <div className="popup">
+          <div className="color-options">
+            {colors.map((color, index) => {
+              return (
+                <div
+                  key={index}
+                  data-value={color}
+                  onClick={changeColor}
+                  className="option"
+                  style={{ background: color }}
+                ></div>
+              );
+            })}
+          </div>
+          <p style={{ textAlign: "center", opacity: "0.7", width: "100%" }}>
+            OR
+          </p>
+          <form onSubmit={handleFormSubmit}>
+            <div
+              className="hexPreview"
+              style={{ background: validHex ? hexValue : "#000000" }}
+            ></div>
+            <input
+              type="text"
+              placeholder="#000000"
+              value={hexValue}
+              onChange={handleHexChange}
+              style={{
+                border:
+                  validHex === false ? "1px solid red" : "1px solid lightgray",
+              }}
+            />
+            <button style={{ color: validHex ? "green" : "" }} type={"submit"}>
+              <MdCheck size={20} />
+            </button>
+          </form>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ColorPicker;

package/src/components/Editor/Elements/Color Picker/defaultColors.js

@@ -0,0 +1,34 @@
+export const colors = ["#000000","#e60000",
+    "#ff9900",
+    "#ffff00",
+    "#008a00",
+    "#0066cc",
+    "#9933ff",
+    "#ffffff",
+    "#facccc",
+    "#ffebcc",
+    "#ffffcc",
+    "#cce8cc",
+    "#cce0f5",
+    "#ebd6ff",
+    "#bbbbbb",
+    "#f06666",
+    "#ffc266",
+    "#ffff66",
+    "#66b966",
+    "#66a3e0",
+    "#c285ff",
+    "#888888",
+    "#a10000",
+    "#b26b00",
+    "#b2b200",
+    "#006100",
+    "#0047b2",
+    "#6b24b2",
+    "#444444",
+    "#5c0000",
+    "#663d00",
+    "#666600",
+    "#003700",
+    "#002966",
+    "#3d1466"]

package/src/components/Editor/Elements/Embed/Embed.css

@@ -0,0 +1,14 @@
+.embed{
+    width: fit-content;
+    position: relative;
+    margin-right: 20px;
+}
+.embed img,.embed iframe{
+    width: 100%;
+    height:100%;
+}
+.embed button{
+    position: absolute;
+    bottom: -6px;
+    right: 0;
+}

package/src/components/Editor/Elements/Embed/Embed.jsx

@@ -0,0 +1,74 @@
+import React, {useRef, useState} from 'react';
+import Button from '../../common/Button'
+import Icon from '../../common/Icon'
+import {isBlockActive} from '../../utils/SlateUtilityFunctions'
+import usePopup from '../../utils/customHooks/usePopup'
+import {insertEmbed } from '../../utils/embed.js'
+import { Transforms } from 'slate';
+import {ReactEditor} from 'slate-react'
+
+import './Embed.css'
+const Embed = ({editor,format}) =>{
+    const urlInputRef = useRef();
+    const [showInput,setShowInput] = usePopup(urlInputRef);
+    const [formData,setFormData] = useState({
+        url:'',
+        alt:''
+    })
+    const [selection,setSelection] = useState();
+    const handleButtonClick = (e)=>{
+        e.preventDefault();
+        setSelection(editor.selection);
+        selection && ReactEditor.focus(editor);
+
+        setShowInput(prev =>!prev);
+    }
+    const handleFormSubmit = (e)=>{
+        e.preventDefault();
+
+        selection && Transforms.select(editor,selection);
+        selection && ReactEditor.focus(editor);
+
+        insertEmbed(editor,{...formData},format);
+        setShowInput(false);
+        setFormData({
+            url:'',
+            alt:''
+        })
+    }
+    const handleImageUpload = ()=>{
+        setShowInput(false)
+    }
+    return (
+        <div ref={urlInputRef} className='popup-wrapper'>
+            <Button active={isBlockActive(editor,format)} style={{border: showInput?'1px solid lightgray':'',borderBottom: 'none'}}  format={format} onClick={handleButtonClick}>
+                <Icon icon={format}/>
+            </Button>
+            {
+                showInput&&
+                <div  className='popup'>
+                    {
+                        format === 'image' &&
+                        <div>
+                            <div style={{display:'flex',gap:'10px'}} onClick={handleImageUpload}>
+                                <Icon icon='upload'/>
+                                <span>Upload</span>
+                            </div>
+                            <p style={{textAlign:'center',opacity:'0.7',width:'100%'}}>OR</p>
+
+                        </div>
+                    }
+                    <form onSubmit={handleFormSubmit}>
+                        <input type="text" placeholder='Enter url' value={formData.url} onChange={e=>setFormData(prev =>({...prev,url:e.target.value}))}/>
+                        <input type="text" placeholder='Enter alt' value={formData.alt} onChange={e=>setFormData(prev =>({...prev,alt:e.target.value}))}/>
+                        
+
+                        <Button type='submit'>Save</Button>
+                    </form>
+                </div>
+            }
+        </div>
+    )
+}
+
+export default Embed;

package/src/components/Editor/Elements/Embed/Image.jsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from "react";
+import {
+  useSlateStatic,
+  useSelected,
+  useFocused,
+  ReactEditor,
+} from "slate-react";
+import { Node, Transforms } from "slate";
+import Icon from "../../common/Icon";
+import useResize from "../../utils/customHooks/useResize.js";
+
+const Image = ({ attributes, element, children }) => {
+  const { url, alt } = element;
+  const editor = useSlateStatic();
+  const selected = useSelected();
+  const focused = useFocused();
+  const [parentDOM, setParentDOM] = useState(null);
+  const [size, onMouseDown, resizing, onLoad] = useResize({
+    parentDOM,
+    size: element?.size,
+  });
+  const arr = Array.from(Node.elements(editor));
+  const ele = arr.find(([elem]) => element === elem);
+
+  useEffect(() => {
+    if (editor && ele[1] !== undefined) {
+      const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
+      setParentDOM(dom);
+      onLoad(dom);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!resizing) {
+      Transforms.setNodes(editor, {
+        size: size,
+      });
+    }
+  }, [resizing]);
+
+  return (
+    <div
+      {...attributes}
+      className="embed"
+      style={{
+        display: "flex",
+        width: "100%",
+        maxWidth: "100%",
+        boxShadow: selected && focused && "0 0 3px 3px lightgray",
+      }}
+      {...element.attr}
+    >
+      <div
+        contentEditable={false}
+        style={{
+          position: "relative",
+          width: size.widthInPercent
+            ? `${size.widthInPercent}%`
+            : `${size.width}px`,
+          height: `${size.height}px`,
+        }}
+      >
+        <img alt={alt} src={url} />
+        {selected && (
+          <button
+            onPointerDown={onMouseDown}
+            style={{
+              width: "15px",
+              height: "15px",
+              opacity: 1,
+              background: "transparent",
+            }}
+          >
+            <Icon icon="resize" />
+          </button>
+        )}
+      </div>
+      {children}
+    </div>
+  );
+};
+export default Image;

package/src/components/Editor/Elements/Embed/Video.jsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { useSelected, useFocused } from "slate-react";
+import Icon from "../../common/Icon";
+import useResize from "../../utils/customHooks/useResize.js";
+// import "./Video.css";
+
+const Video = ({ attributes, element, children }) => {
+  const { url, alt } = element;
+  const [size, onMouseDown, resizing] = useResize();
+  const selected = useSelected();
+  const focused = useFocused();
+  return (
+    <div
+      {...attributes}
+      className="embed"
+      style={{
+        display: "flex",
+        boxShadow: selected && focused && "0 0 3px 3px lightgray",
+      }}
+      {...element.attr}
+    >
+      <div
+        contentEditable={false}
+        style={{ width: `${size.width}px`, height: `${size.height}px` }}
+      >
+        {
+          // The iframe reloads on each re-render and hence it stutters and the document doesn't detect mouse-up event leading to unwanted behaviour
+          // So during resize replace the iframe with a simple div
+          resizing ? (
+            <div
+              style={{
+                width: "100%",
+                height: "100%",
+                border: "2px dashed black",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <Icon icon="videoPlayer" />
+            </div>
+          ) : (
+            <iframe src={url} frameBorder="0" title={alt} />
+          )
+        }
+
+        {selected && (
+          <button
+            onMouseDown={onMouseDown}
+            style={{
+              width: "15px",
+              height: "15px",
+              opacity: 1,
+              background: "transparent",
+            }}
+          >
+            <Icon icon="resize" />
+          </button>
+        )}
+      </div>
+      {children}
+    </div>
+  );
+};
+export default Video;

package/src/components/Editor/Elements/Equation/Equation.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { InlineMath, BlockMath } from "react-katex";
+
+import "./styles.css";
+const Equation = ({ attributes, element, children }) => {
+  const { inline, math } = element;
+  return (
+    <div className={inline ? "equation-inline" : ""}>
+      <span {...attributes} {...element.attr}>
+        <span contentEditable={false}>
+          {inline ? <InlineMath math={math} /> : <BlockMath math={math} />}
+        </span>
+        {children}
+      </span>
+    </div>
+  );
+};
+
+export default Equation;