@flozy/editor 1.0.0 → 1.0.5

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

@@ -1,115 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,38 +0,0 @@
-
-.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

@@ -1,110 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,14 +0,0 @@
-.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

@@ -1,74 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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;