@flozy/editor 1.0.0 → 1.0.6

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

@@ -1,59 +0,0 @@
-import {useRef, useState} from 'react'
-import Button from '../../common/Button'
-import Icon from '../../common/Icon'
-import usePopup  from '../../utils/customHooks/usePopup'
-import {insertEquation} from '../../utils/equation.js'
-import { Transforms } from 'slate'
-
-const EquationButton = ({editor}) =>{
-    const equationInputRef = useRef(null);
-    const [showInput,setShowInput] = usePopup(equationInputRef)
-    const [math,setMath] = useState('')
-    const [displayInline,setDisplayInline] = useState(false);
-    const [selection,setSelection] = useState();
-
-    const toggleButton = ()=>{
-        setShowInput(prev => !prev);
-        setDisplayInline(false)
-        setSelection(editor.selection);
-    }
-
-    const handleInputChange = ({target}) =>{
-        if(target.type === 'checkbox'){
-            setDisplayInline(prev => !prev);
-        }
-        else{
-            setMath(target.value)
-        }
-    }   
-    
-    const handleAddEquation = ()=>{
-        if(!math) return;
-        selection && Transforms.select(editor,selection)
-        insertEquation(editor,math,displayInline);
-        console.log('btn click');
-        setShowInput(false);
-    }
-    return(
-        <div ref={equationInputRef} className='popup-wrapper' >
-            <Button format='equation' onClick={toggleButton}>
-                <Icon icon='equation'/>
-            </Button>
-            {
-                showInput &&
-                <div className='popup' >
-                    <div style={{display:'flex',gap:'5px'}}>
-                        <input type="text" value={math} onChange={handleInputChange} placeholder='Enter formula' />
-                        <div onClick={handleAddEquation}><Icon icon='add'/></div>
-                    </div>
-                    <label >
-                        <input type="checkbox" checked={displayInline} onChange={handleInputChange}/>
-                        Inline Equation
-                    </label>
-                </div>
-            }
-        </div>
-    )
-}
-
-export default EquationButton

package/src/components/Editor/Elements/Equation/styles.css

@@ -1,4 +0,0 @@
-.equation-inline{
-    display: inline;
-    position: relative;
-}

package/src/components/Editor/Elements/Grid/Grid.js

@@ -1,48 +0,0 @@
-import React from "react";
-import { Transforms, Path } from "slate";
-import { useSelected, useSlateStatic } from "slate-react";
-import { gridItem } from "../../utils/gridItem";
-
-const Grid = (props) => {
-  const { attributes, children, element } = props;
-  const { grid } = element;
-  const editor = useSlateStatic();
-  const selected = useSelected();
-
-  const onAddGridItem = () => {
-    const currentPath = editor.selection?.anchor?.path;
-    const ancestorsPath = Path.ancestors(currentPath, { reverse: true });
-    const insertPath = ancestorsPath[1];
-    if (insertPath) {
-      insertPath[insertPath.length - 1] = element.children.length;
-      Transforms.insertNodes(editor, [{ ...gridItem() }], {
-        at: insertPath,
-      });
-      // new line
-      Transforms.insertNodes(
-        editor,
-        [{ type: "paragraph", children: [{ text: "" }] }],
-        {
-          at: [editor.children.length],
-        }
-      );
-    }
-  };
-
-  const GridToolBar = () => {
-    return selected ? (
-      <div className="grid-container-toolbar" contentEditable={false}>
-        <button onClick={onAddGridItem}>+ Add Item</button>
-      </div>
-    ) : null;
-  };
-
-  return (
-    <div className={`grid-container ${grid}`} {...attributes}>
-      <GridToolBar />
-      {children}
-    </div>
-  );
-};
-
-export default Grid;

package/src/components/Editor/Elements/Grid/GridButton.js

@@ -1,21 +0,0 @@
-import React from "react";
-import ViewComfyIcon from "@mui/icons-material/ViewComfy";
-import { insertGrid } from "../../utils/grid";
-
-const GridButton = (props) => {
-  const { editor } = props;
-  const handleInsertGrid = () => {
-    insertGrid(editor);
-  };
-  return (
-    <button
-      onClick={handleInsertGrid}
-      title="Layout"
-      style={{ marginLeft: "8px" }}
-    >
-      <ViewComfyIcon />
-    </button>
-  );
-};
-
-export default GridButton;

package/src/components/Editor/Elements/Grid/GridItem.js

@@ -1,57 +0,0 @@
-import React from "react";
-import { Transforms, Element } from "slate";
-import { useSelected, useSlateStatic } from "slate-react";
-
-const GridItem = (props) => {
-  const { attributes, children, element } = props;
-  const { grid } = element;
-  const editor = useSlateStatic();
-  const selected = useSelected();
-  const itemWidth = ((grid || 6) / 12) * 100;
-
-  const onItemSizeDecrease = () => {
-    Transforms.setNodes(
-      editor,
-      { grid: grid <= 1 ? 1 : grid - 1 },
-      {
-        match: (node) => {
-          return Element.matches(node, element);
-        },
-      }
-    );
-  };
-
-  const onItemSizeIncrease = () => {
-    Transforms.setNodes(
-      editor,
-      { grid: grid >= 12 ? 12 : grid + 1 },
-      {
-        match: (node) => {
-          return Element.matches(node, element);
-        },
-      }
-    );
-  };
-
-  const GridItemToolbar = () => {
-    return selected ? (
-      <div contentEditable={false} className="grid-item-toolbar">
-        <button onClick={onItemSizeDecrease}>-</button>
-        <button onClick={onItemSizeIncrease}>+</button>
-      </div>
-    ) : null;
-  };
-
-  return (
-    <div
-      className={`grid-item xs-${grid}`}
-      {...attributes}
-      style={{ width: `${itemWidth}%` }}
-    >
-      {children}
-      <GridItemToolbar />
-    </div>
-  );
-};
-
-export default GridItem;

package/src/components/Editor/Elements/ID/Id.jsx

@@ -1,56 +0,0 @@
-import { Transforms } from "slate";
-import React, { useRef, useState } from "react";
-import Button from "../../common/Button";
-import Icon from "../../common/Icon";
-import usePopup from "../../utils/customHooks/usePopup";
-const Id = ({ editor }) => {
-  const idInputRef = useRef(null);
-  const [showInput, setShowInput] = usePopup(idInputRef);
-  const [selection, setSelection] = useState();
-  const [id, setId] = useState("");
-  const toggleId = () => {
-    setSelection(editor.selection);
-    setShowInput((prev) => !prev);
-  };
-  const handleId = () => {
-    // selection && Transforms.select(editor,selection);
-    if (!selection || !id) return;
-    Transforms.setNodes(
-      editor,
-      {
-        attr: { id },
-      },
-      {
-        at: selection,
-      }
-    );
-    setShowInput(false);
-    setId("");
-  };
-  return (
-    <div className="popup-wrapper" ref={idInputRef}>
-      <Button
-        className={showInput ? "clicked" : ""}
-        format={"add Id"}
-        onClick={toggleId}
-      >
-        <Icon icon="addId" />
-      </Button>
-      {showInput && (
-        <div className="popup" style={{ display: "flex", gap: "4px" }}>
-          <input
-            type="text"
-            placeholder="Enter an unique ID"
-            value={id}
-            onChange={(e) => setId(e.target.value)}
-          />
-          <div onClick={handleId}>
-            <Icon icon="add" />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Id;

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import { useFocused, useSelected, useSlateStatic } from 'slate-react'
-
-import {removeLink} from '../../utils/link.js'
-import unlink from '../../Toolbar/toolbarIcons/unlink.svg'
-import './styles.css'
-const Link = ({ attributes, element, children}) => {
-    const editor = useSlateStatic();
-    const selected = useSelected();
-    const focused = useFocused();
-    return (
-        <div className='link' >
-            <a href={element.href} {...attributes} {...element.attr} target={element.target}>{children}</a>
-            {selected && focused && (
-                <div className='link-popup' contentEditable={false}>
-                    <a href={element.href} target={element.target}>{element.href}</a>
-                    <button onClick={()=>removeLink(editor)}><img src={unlink} alt="" /></button>
-                </div>
-            )}
-        </div>
-    )
-}
-
-export default Link

package/src/components/Editor/Elements/Link/LinkButton.jsx

@@ -1,71 +0,0 @@
-import { useRef, useState } from "react";
-import { insertLink } from "../../utils/link.js";
-import Button from "../../common/Button.jsx";
-import Icon from "../../common/Icon.jsx";
-import { isBlockActive } from "../../utils/SlateUtilityFunctions.js";
-import usePopup from "../../utils/customHooks/usePopup.jsx";
-import { Transforms } from "slate";
-
-const LinkButton = (props) => {
-  const { editor } = props;
-  const linkInputRef = useRef(null);
-  const [showInput, setShowInput] = usePopup(linkInputRef);
-  const [url, setUrl] = useState("");
-  const [showInNewTab, setShowInNewTab] = useState(false);
-  const [selection, setSelection] = useState();
-  const handleInsertLink = () => {
-    Transforms.select(editor, selection);
-    insertLink(editor, { url, showInNewTab });
-    setUrl("");
-    setShowInput((prev) => !prev);
-    setShowInNewTab(false);
-  };
-  const toggleLink = () => {
-    setSelection(editor.selection);
-    setShowInput((prev) => !prev);
-  };
-  const handleInputChange = ({ target }) => {
-    if (target.type === "checkbox") {
-      setShowInNewTab((prev) => !prev);
-    } else {
-      setUrl(target.value);
-    }
-  };
-  return (
-    <div ref={linkInputRef} className="popup-wrapper">
-      <Button
-        className={showInput ? "clicked" : ""}
-        active={isBlockActive(editor, "link")}
-        format={"link"}
-        onClick={toggleLink}
-      >
-        <Icon icon="link" />
-      </Button>
-      {showInput && (
-        <div className="popup">
-          <div style={{ display: "flex", gap: "4px", margin: "5px 2px" }}>
-            <input
-              type="text"
-              placeholder="https://google.com"
-              value={url}
-              onChange={handleInputChange}
-            />
-            <div onClick={handleInsertLink}>
-              <Icon icon="add" />
-            </div>
-          </div>
-          <label>
-            <input
-              type="checkbox"
-              checked={showInNewTab}
-              onChange={handleInputChange}
-            />
-            <span style={{ fontSize: "0.8em" }}>Open in new tab</span>
-          </label>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default LinkButton;

package/src/components/Editor/Elements/Link/styles.css

@@ -1,20 +0,0 @@
-.link{
-  display: inline;
-  position: relative;
-}
-.link-popup{
-    position: absolute;
-  left: 0;
-  display: flex;
-  align-items: center;
-  background-color: white;
-  padding: 6px 10px;
-  gap: 10px;
-  border-radius: 6px;
-  border: 1px solid lightgray;
-  width: fit-content;
-  z-index: 1;
-}
-img{
-  height: 15px;
-}

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

@@ -1,37 +0,0 @@
-import React from "react";
-import { useSelected, useFocused } from "slate-react";
-
-const Mentions = ({ attributes, children, element }) => {
-  const selected = useSelected();
-  const focused = useFocused();
-  const style = {
-    padding: "3px 3px 2px",
-    margin: "0 1px",
-    verticalAlign: "baseline",
-    display: "inline-block",
-    borderRadius: "4px",
-    backgroundColor: "#eee",
-    fontSize: "0.9em",
-    boxShadow: selected && focused ? "0 0 0 2px #B4D5FF" : "none",
-  };
-  // See if our empty text child has any styling marks applied and apply those
-  if (element.children[0].bold) {
-    style.fontWeight = "bold";
-  }
-  if (element.children[0].italic) {
-    style.fontStyle = "italic";
-  }
-  return (
-    <span
-      {...attributes}
-      contentEditable={false}
-      data-cy={`mention-${element.character.replace(" ", "-")}`}
-      style={style}
-    >
-      @{element.character}
-      {children}
-    </span>
-  );
-};
-
-export default Mentions;

package/src/components/Editor/Elements/NewLine/NewLineButton.js

@@ -1,29 +0,0 @@
-import React from "react";
-import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
-import { Transforms } from "slate";
-import { useSlateStatic } from "slate-react";
-
-const NewLineButton = (props) => {
-  const editor = useSlateStatic();
-
-  const onAddNewLine = () => {
-    Transforms.insertNodes(
-      editor,
-      [
-        {
-          type: "paragraph",
-          children: [{ text: "" }],
-        },
-      ],
-      { at: [editor.children.length] }
-    );
-  };
-
-  return (
-    <button title="New Line" onClick={onAddNewLine}>
-      <KeyboardReturnIcon />
-    </button>
-  );
-};
-
-export default NewLineButton;

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

@@ -1,13 +0,0 @@
-import React from "react";
-
-const Table = ({ attributes, children, element }) => {
-  return (
-    <div style={{ minWidth: "100%", maxWidth: "100%", overflow: "auto" }}>
-      <table>
-        <tbody {...attributes}>{children}</tbody>
-      </table>
-    </div>
-  );
-};
-
-export default Table;

package/src/components/Editor/Elements/Table/TableSelector.css

@@ -1,18 +0,0 @@
-.table-option{
-    display: flex;
-    margin: 5px 2px;
-    gap: 5px;
-}
-.table-option{
-    white-space: nowrap;
-}
-.table-input{
-    display: grid;
-    grid-template-columns: auto auto auto auto auto auto;
-    gap: 3px;
-}
-.table-unit{
-    width:15px;
-    height:15px;
-    border: 1px solid lightgray;
-}

package/src/components/Editor/Elements/Table/TableSelector.jsx

@@ -1,76 +0,0 @@
-import React, {useEffect, useRef, useState} from 'react';
-import Icon from '../../common/Icon'
-import usePopup from '../../utils/customHooks/usePopup'
-import { Transforms } from 'slate';
-import { TableUtil } from '../../utils/table.js'
-
-import './TableSelector.css'
-
-const TableSelector = ({editor})=>{
-    const tableOptionsRef = useRef();
-    const [selection,setSelection] = useState()
-    const [showOptions,setShowOptions] = usePopup(tableOptionsRef);
-    const [tableData,setTableData] = useState({
-        row:0,
-        column:0,
-    })
-    const [tableInput,setTableInput] =useState(Array.from({length:6},()=> Array.from ({length:6},(v,i)=>({
-        bg:'lightGray',
-        column:i,
-    }))))
-
-    useEffect(()=>{
-        const newTable = Array.from({length:6},(obj,row)=> Array.from({length:6},(v,col)=>({
-            bg:row+1<=tableData.row && col+1<=tableData.column ? 'orange':'lightgray',
-            column:col,
-        })))
-        setTableInput(newTable)
-    },[tableData])
-    useEffect(()=>{
-        if(!showOptions){
-            setTableData({
-                row:0,
-                column:0,
-            });
-        }
-    },[showOptions])
-    const table = new TableUtil(editor);
-
-    const handleButtonClick = ()=>{
-        setSelection(editor.selection);
-        setShowOptions(prev => !prev)
-    }
-    const handleInsert = () =>{
-        selection && Transforms.select(editor,selection)
-        setTableData({row:-1,column:-1})
-        table.insertTable(tableData.row,tableData.column)
-        setShowOptions(false)
-    }
-    return (
-        <div ref={tableOptionsRef} className='popup-wrapper'  >
-            <button  style={{border: showOptions?'1px solid lightgray':'none'}}  title='table' onClick={handleButtonClick}>
-                <Icon icon='table'/>
-            </button>
-            {
-                showOptions &&
-                <div  className='popup' >
-                    {
-                        
-                        <span style={{fontSize:'0.85em'}}><i>{`Insert a ${tableData.row>=1 ?`${tableData.row} x ${tableData.column}`:''} table`}</i></span>
-                    }
-                    <div className='table-input'>
-                        {
-                            tableInput.map((grp,row)=>
-                                grp.map(({column,bg},col)=>
-                                    <div key={row+col} onClick={()=>handleInsert()} onMouseOver={()=>setTableData({row:row+1,column:column+1})} className='table-unit' style={{border:`1px solid ${bg}`}}></div>
-                                )
-                            )
-                        }
-                    </div>
-                </div>
-            }
-        </div>
-    )
-}
-
-export default TableSelector;

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

@@ -1,97 +0,0 @@
-import React, { useState } from "react";
-import useContextMenu from "../../utils/customHooks/useContextMenu.js";
-import Icon from "../../common/Icon.jsx";
-import "./styles.css";
-import { TableUtil } from "../../utils/table.js";
-import { Transforms } from "slate";
-import { ReactEditor } from "slate-react";
-
-const TableContextMenu = (props) => {
-  const { editor } = props;
-  const [selection, setSelection] = useState();
-  const [showMenu, { top, left }] = useContextMenu(
-    editor,
-    "table",
-    setSelection
-  );
-  const table = new TableUtil(editor);
-
-  const menu = [
-    {
-      icon: "insertColumnRight",
-      text: "Insert Columns to the Right",
-      action: {
-        type: "insertColumn",
-        position: "after",
-      },
-    },
-    {
-      icon: "insertColumnLeft",
-      text: "Insert Columns to the Left",
-      action: {
-        type: "insertColumn",
-        position: "at",
-      },
-    },
-    {
-      icon: "insertRowAbove",
-      text: "Insert Row Above",
-      action: {
-        type: "insertRow",
-        positon: "at",
-      },
-    },
-    {
-      icon: "insertRowBelow",
-      text: "Insert Row Below",
-      action: {
-        type: "insertRow",
-        position: "after",
-      },
-    },
-    {
-      icon: "trashCan",
-      text: "Remove Table",
-      action: {
-        type: "remove",
-      },
-    },
-  ];
-
-  const handleInsert = ({ type, position }) => {
-    Transforms.select(editor, selection);
-    switch (type) {
-      case "insertRow":
-        table.insertRow(position);
-        break;
-      case "insertColumn":
-        table.insertColumn(position);
-        break;
-      case "remove":
-        table.removeTable();
-        break;
-      default:
-        return;
-    }
-    ReactEditor.focus(editor);
-  };
-
-  return (
-    showMenu && (
-      <div className="contextMenu" style={{ top, left }}>
-        {menu.map(({ icon, text, action }, index) => (
-          <div
-            className="menuOption"
-            key={index}
-            onClick={() => handleInsert(action)}
-          >
-            <Icon icon={icon} />
-            <span>{text}</span>
-          </div>
-        ))}
-      </div>
-    )
-  );
-};
-
-export default TableContextMenu;

package/src/components/Editor/Elements/TableContextMenu/styles.css

@@ -1,18 +0,0 @@
-.contextMenu{
-    width: fit-content;
-    height: fit-content;
-    position: fixed;
-    background: white;
-    border: 1px solid lightgray;
-    border-radius: 10px;
-    padding: 0.5%;
-    display: flex;
-    gap: 15px;
-    flex-direction: column;
-    cursor: pointer;
-}
-
-.menuOption {
-    display: flex;
-    gap:15px;
-}