@flozy/editor 1.0.0 → 1.0.5

package/src/components/Editor/CommonEditor.js

@@ -1,549 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { Slate, Editable } from "slate-react";
-import Toolbar from "./Toolbar/Toolbar";
-import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
-import "./Editor.css";
-import CodeToText from "./Elements/CodeToText/CodeToText";
-import { draftToSlate } from "./utils/draftToSlate";
-import useMentions from "./hooks/useMentions";
-import MentionsPopup from "./common/MentionsPopup";
-import { RemoteCursorOverlay } from "./RemoteCursorOverlay/Overlay";
-import { mentionsEvent, commands } from "./utils/events";
-import withCommon from "./hooks/withCommon";
-import { createEditor } from "slate";
-
-const Element = (props) => {
-  return getBlock(props);
-};
-
-const Leaf = ({ attributes, children, leaf }) => {
-  children = getMarked(leaf, children);
-  return <span {...attributes}>{children}</span>;
-};
-
-const CommonEditor = (props) => {
-  const { id, content, onSave, editor: collaborativeEditor, readOnly } = props;
-  const convertedContent = draftToSlate({ data: content });
-  const [value, setValue] = useState(convertedContent);
-
-  const editor = useMemo(() => {
-    if (collaborativeEditor) return collaborativeEditor;
-    return withCommon(createEditor());
-  }, [collaborativeEditor]);
-
-  useEffect(() => {
-    setValue(draftToSlate({ data: content }));
-  }, [id, content]);
-
-  const [htmlAction, setHtmlAction] = useState({
-    showInput: false,
-    html: "",
-    action: "",
-    location: "",
-  });
-  const [mentions, setMentions] = useMentions({
-    editor,
-    selection: editor?.selection,
-  });
-
-  const { search, target, index } = mentions;
-  const chars = CHARACTERS.filter((c) =>
-    c.toLowerCase().startsWith(search?.toLowerCase())
-  ).slice(0, 10);
-
-  const handleEditorChange = (newValue) => {
-    setValue(newValue);
-    const isAstChange = editor.operations.some(
-      (op) => "set_selection" !== op.type
-    );
-    if (isAstChange && onSave) {
-      // send the value to onSave api
-      onSave(JSON.stringify(value));
-    }
-  };
-
-  const renderElement = useCallback((props) => <Element {...props} />, []);
-
-  const renderLeaf = useCallback((props) => {
-    return <Leaf {...props} />;
-  }, []);
-
-  const handleCodeToText = (partialState) => {
-    setHtmlAction((prev) => ({
-      ...prev,
-      ...partialState,
-    }));
-  };
-
-  const onKeyDown = useCallback(
-    (event) => {
-      const isCtrlKey =
-        event.ctrlKey ||
-        (event.metaKey && event.keyCode >= 65 && event.keyCode <= 90);
-      if (target && chars.length > 0 && !isCtrlKey) {
-        mentionsEvent({
-          event,
-          mentions,
-          setMentions,
-          chars,
-          target,
-          editor,
-        });
-      } else if (isCtrlKey) {
-        commands({
-          event,
-          editor,
-        });
-      }
-    },
-    [chars, editor, target, mentions, setMentions]
-  );
-
-  const isReadOnly = readOnly === "readonly";
-  const Overlay =
-    collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
-
-  return (
-    <Slate
-      key={id}
-      editor={editor}
-      initialValue={value}
-      onChange={handleEditorChange}
-    >
-      <Overlay>
-        {!isReadOnly ? <Toolbar handleCodeToText={handleCodeToText} /> : null}
-        <div
-          className="editor-wrapper"
-          style={{ border: "1px solid #f3f3f3", padding: "0 10px" }}
-        >
-          <Editable
-            readOnly={isReadOnly}
-            placeholder="Write something"
-            renderElement={renderElement}
-            renderLeaf={renderLeaf}
-            onKeyDown={onKeyDown}
-          />
-          <MentionsPopup
-            mentions={mentions}
-            setMentions={setMentions}
-            editor={editor}
-            target={target}
-            index={index}
-            chars={chars}
-          />
-        </div>
-      </Overlay>
-      {htmlAction.showInput && (
-        <CodeToText {...htmlAction} handleCodeToText={handleCodeToText} />
-      )}
-    </Slate>
-  );
-};
-
-const CHARACTERS = [
-  "Aayla Secura",
-  "Adi Gallia",
-  "Admiral Dodd Rancit",
-  "Admiral Firmus Piett",
-  "Admiral Gial Ackbar",
-  "Admiral Ozzel",
-  "Admiral Raddus",
-  "Admiral Terrinald Screed",
-  "Admiral Trench",
-  "Admiral U.O. Statura",
-  "Agen Kolar",
-  "Agent Kallus",
-  "Aiolin and Morit Astarte",
-  "Aks Moe",
-  "Almec",
-  "Alton Kastle",
-  "Amee",
-  "AP-5",
-  "Armitage Hux",
-  "Artoo",
-  "Arvel Crynyd",
-  "Asajj Ventress",
-  "Aurra Sing",
-  "AZI-3",
-  "Bala-Tik",
-  "Barada",
-  "Bargwill Tomder",
-  "Baron Papanoida",
-  "Barriss Offee",
-  "Baze Malbus",
-  "Bazine Netal",
-  "BB-8",
-  "BB-9E",
-  "Ben Quadinaros",
-  "Berch Teller",
-  "Beru Lars",
-  "Bib Fortuna",
-  "Biggs Darklighter",
-  "Black Krrsantan",
-  "Bo-Katan Kryze",
-  "Boba Fett",
-  "Bobbajo",
-  "Bodhi Rook",
-  "Borvo the Hutt",
-  "Boss Nass",
-  "Bossk",
-  "Breha Antilles-Organa",
-  "Bren Derlin",
-  "Brendol Hux",
-  "BT-1",
-  "C-3PO",
-  "C1-10P",
-  "Cad Bane",
-  "Caluan Ematt",
-  "Captain Gregor",
-  "Captain Phasma",
-  "Captain Quarsh Panaka",
-  "Captain Rex",
-  "Carlist Rieekan",
-  "Casca Panzoro",
-  "Cassian Andor",
-  "Cassio Tagge",
-  "Cham Syndulla",
-  "Che Amanwe Papanoida",
-  "Chewbacca",
-  "Chi Eekway Papanoida",
-  "Chief Chirpa",
-  "Chirrut Îmwe",
-  "Ciena Ree",
-  "Cin Drallig",
-  "Clegg Holdfast",
-  "Cliegg Lars",
-  "Coleman Kcaj",
-  "Coleman Trebor",
-  "Colonel Kaplan",
-  "Commander Bly",
-  "Commander Cody (CC-2224)",
-  "Commander Fil (CC-3714)",
-  "Commander Fox",
-  "Commander Gree",
-  "Commander Jet",
-  "Commander Wolffe",
-  "Conan Antonio Motti",
-  "Conder Kyl",
-  "Constable Zuvio",
-  "Cordé",
-  "Cpatain Typho",
-  "Crix Madine",
-  "Cut Lawquane",
-  "Dak Ralter",
-  "Dapp",
-  "Darth Bane",
-  "Darth Maul",
-  "Darth Tyranus",
-  "Daultay Dofine",
-  "Del Meeko",
-  "Delian Mors",
-  "Dengar",
-  "Depa Billaba",
-  "Derek Klivian",
-  "Dexter Jettster",
-  "Dineé Ellberger",
-  "DJ",
-  "Doctor Aphra",
-  "Doctor Evazan",
-  "Dogma",
-  "Dormé",
-  "Dr. Cylo",
-  "Droidbait",
-  "Droopy McCool",
-  "Dryden Vos",
-  "Dud Bolt",
-  "Ebe E. Endocott",
-  "Echuu Shen-Jon",
-  "Eeth Koth",
-  "Eighth Brother",
-  "Eirtaé",
-  "Eli Vanto",
-  "Ellé",
-  "Ello Asty",
-  "Embo",
-  "Eneb Ray",
-  "Enfys Nest",
-  "EV-9D9",
-  "Evaan Verlaine",
-  "Even Piell",
-  "Ezra Bridger",
-  "Faro Argyus",
-  "Feral",
-  "Fifth Brother",
-  "Finis Valorum",
-  "Finn",
-  "Fives",
-  "FN-1824",
-  "FN-2003",
-  "Fodesinbeed Annodue",
-  "Fulcrum",
-  "FX-7",
-  "GA-97",
-  "Galen Erso",
-  "Gallius Rax",
-  'Garazeb "Zeb" Orrelios',
-  "Gardulla the Hutt",
-  "Garrick Versio",
-  "Garven Dreis",
-  "Gavyn Sykes",
-  "Gideon Hask",
-  "Gizor Dellso",
-  "Gonk droid",
-  "Grand Inquisitor",
-  "Greeata Jendowanian",
-  "Greedo",
-  "Greer Sonnel",
-  "Grievous",
-  "Grummgar",
-  "Gungi",
-  "Hammerhead",
-  "Han Solo",
-  "Harter Kalonia",
-  "Has Obbit",
-  "Hera Syndulla",
-  "Hevy",
-  "Hondo Ohnaka",
-  "Huyang",
-  "Iden Versio",
-  "IG-88",
-  "Ima-Gun Di",
-  "Inquisitors",
-  "Inspector Thanoth",
-  "Jabba",
-  "Jacen Syndulla",
-  "Jan Dodonna",
-  "Jango Fett",
-  "Janus Greejatus",
-  "Jar Jar Binks",
-  "Jas Emari",
-  "Jaxxon",
-  "Jek Tono Porkins",
-  "Jeremoch Colton",
-  "Jira",
-  "Jobal Naberrie",
-  "Jocasta Nu",
-  "Joclad Danva",
-  "Joh Yowza",
-  "Jom Barell",
-  "Joph Seastriker",
-  "Jova Tarkin",
-  "Jubnuk",
-  "Jyn Erso",
-  "K-2SO",
-  "Kanan Jarrus",
-  "Karbin",
-  "Karina the Great",
-  "Kes Dameron",
-  "Ketsu Onyo",
-  "Ki-Adi-Mundi",
-  "King Katuunko",
-  "Kit Fisto",
-  "Kitster Banai",
-  "Klaatu",
-  "Klik-Klak",
-  "Korr Sella",
-  "Kylo Ren",
-  "L3-37",
-  "Lama Su",
-  "Lando Calrissian",
-  "Lanever Villecham",
-  "Leia Organa",
-  "Letta Turmond",
-  "Lieutenant Kaydel Ko Connix",
-  "Lieutenant Thire",
-  "Lobot",
-  "Logray",
-  "Lok Durd",
-  "Longo Two-Guns",
-  "Lor San Tekka",
-  "Lorth Needa",
-  "Lott Dod",
-  "Luke Skywalker",
-  "Lumat",
-  "Luminara Unduli",
-  "Lux Bonteri",
-  "Lyn Me",
-  "Lyra Erso",
-  "Mace Windu",
-  "Malakili",
-  "Mama the Hutt",
-  "Mars Guo",
-  "Mas Amedda",
-  "Mawhonic",
-  "Max Rebo",
-  "Maximilian Veers",
-  "Maz Kanata",
-  "ME-8D9",
-  "Meena Tills",
-  "Mercurial Swift",
-  "Mina Bonteri",
-  "Miraj Scintel",
-  "Mister Bones",
-  "Mod Terrik",
-  "Moden Canady",
-  "Mon Mothma",
-  "Moradmin Bast",
-  "Moralo Eval",
-  "Morley",
-  "Mother Talzin",
-  "Nahdar Vebb",
-  "Nahdonnis Praji",
-  "Nien Nunb",
-  "Niima the Hutt",
-  "Nines",
-  "Norra Wexley",
-  "Nute Gunray",
-  "Nuvo Vindi",
-  "Obi-Wan Kenobi",
-  "Odd Ball",
-  "Ody Mandrell",
-  "Omi",
-  "Onaconda Farr",
-  "Oola",
-  "OOM-9",
-  "Oppo Rancisis",
-  "Orn Free Taa",
-  "Oro Dassyne",
-  "Orrimarko",
-  "Osi Sobeck",
-  "Owen Lars",
-  "Pablo-Jill",
-  "Padmé Amidala",
-  "Pagetti Rook",
-  "Paige Tico",
-  "Paploo",
-  "Petty Officer Thanisson",
-  "Pharl McQuarrie",
-  "Plo Koon",
-  "Po Nudo",
-  "Poe Dameron",
-  "Poggle the Lesser",
-  "Pong Krell",
-  "Pooja Naberrie",
-  "PZ-4CO",
-  "Quarrie",
-  "Quay Tolsite",
-  "Queen Apailana",
-  "Queen Jamillia",
-  "Queen Neeyutnee",
-  "Qui-Gon Jinn",
-  "Quiggold",
-  "Quinlan Vos",
-  "R2-D2",
-  "R2-KT",
-  "R3-S6",
-  "R4-P17",
-  "R5-D4",
-  "RA-7",
-  "Rabé",
-  "Rako Hardeen",
-  "Ransolm Casterfo",
-  "Rappertunie",
-  "Ratts Tyerell",
-  "Raymus Antilles",
-  "Ree-Yees",
-  "Reeve Panzoro",
-  "Rey",
-  "Ric Olié",
-  "Riff Tamson",
-  "Riley",
-  "Rinnriyin Di",
-  "Rio Durant",
-  "Rogue Squadron",
-  "Romba",
-  "Roos Tarpals",
-  "Rose Tico",
-  "Rotta the Hutt",
-  "Rukh",
-  "Rune Haako",
-  "Rush Clovis",
-  "Ruwee Naberrie",
-  "Ryoo Naberrie",
-  "Sabé",
-  "Sabine Wren",
-  "Saché",
-  "Saelt-Marae",
-  "Saesee Tiin",
-  "Salacious B. Crumb",
-  "San Hill",
-  "Sana Starros",
-  "Sarco Plank",
-  "Sarkli",
-  "Satine Kryze",
-  "Savage Opress",
-  "Sebulba",
-  "Senator Organa",
-  "Sergeant Kreel",
-  "Seventh Sister",
-  "Shaak Ti",
-  "Shara Bey",
-  "Shmi Skywalker",
-  "Shu Mai",
-  "Sidon Ithano",
-  "Sifo-Dyas",
-  "Sim Aloo",
-  "Siniir Rath Velus",
-  "Sio Bibble",
-  "Sixth Brother",
-  "Slowen Lo",
-  "Sly Moore",
-  "Snaggletooth",
-  "Snap Wexley",
-  "Snoke",
-  "Sola Naberrie",
-  "Sora Bulq",
-  "Strono Tuggs",
-  "Sy Snootles",
-  "Tallissan Lintra",
-  "Tarfful",
-  "Tasu Leech",
-  "Taun We",
-  "TC-14",
-  "Tee Watt Kaa",
-  "Teebo",
-  "Teedo",
-  "Teemto Pagalies",
-  "Temiri Blagg",
-  "Tessek",
-  "Tey How",
-  "Thane Kyrell",
-  "The Bendu",
-  "The Smuggler",
-  "Thrawn",
-  "Tiaan Jerjerrod",
-  "Tion Medon",
-  "Tobias Beckett",
-  "Tulon Voidgazer",
-  "Tup",
-  "U9-C4",
-  "Unkar Plutt",
-  "Val Beckett",
-  "Vanden Willard",
-  "Vice Admiral Amilyn Holdo",
-  "Vober Dand",
-  "WAC-47",
-  "Wag Too",
-  "Wald",
-  "Walrus Man",
-  "Warok",
-  "Wat Tambor",
-  "Watto",
-  "Wedge Antilles",
-  "Wes Janson",
-  "Wicket W. Warrick",
-  "Wilhuff Tarkin",
-  "Wollivan",
-  "Wuher",
-  "Wullf Yularen",
-  "Xamuel Lennox",
-  "Yaddle",
-  "Yarael Poof",
-  "Yoda",
-  "Zam Wesell",
-  "Zev Senesca",
-  "Ziro the Hutt",
-  "Zuckuss",
-];
-
-export default CommonEditor;

package/src/components/Editor/Editor.css

@@ -1,115 +0,0 @@
-blockquote{
-    border-left: 2px solid #ddd;
-    margin-left: 0;
-    margin-right: 0;
-    padding-left: 10px;
-    color: #aaa;
-    font-style: italic;
-}
-table, th, td {
-    border: 1px solid black;
-}
-table{
-    border-collapse: collapse;
-}
-button{
-    background-color: white;
-    border:none;
-    opacity: 0.5;
-}
-.btnActive{
-    opacity: 1;
-}
-.editor-wrapper{
-    font-family:'Helvetica','Arial', sans-serif;
-    border-radius: 10px;
-background: #ffffff;
-box-shadow:  -8px 8px 13px #ededed,
-             8px -8px 13px #ffffff;
-    min-height: 400px;
-    min-width: 100%;
-    width: fit-content;
-    height: fit-content;
-    padding: 12px 10px;
-    max-width: 100%;
-}
-table{
-    width:100%;
-}
-td{
-    height: 50px;
-    padding:0 5px;
-}
-.popup-wrapper{
-    display: inline;
-    position: relative;
-}
-.popup{
-    position: fixed;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    margin: auto;
-    background-color: white;
-    padding: 6px 10px;
-    border: 1px solid lightgray;
-    height: fit-content;
-    z-index: 1;
-    width: 300px;
-
-}
-button{
-    cursor: pointer;
-}
-code {
-    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-      monospace;
-}
-[data-slate-node="element"] {
-    margin: 10px 0;
-}
-html{
-    scroll-behavior: smooth;
-}
-.editor-wrapper *:focus-visible {
-    outline: none;
-}
-
-.grid-container {
-    display: flex;
-    border-radius: 12px;
-    background-color: #F3F6F9;
-    border: 1px solid #E5EAF2;
-    padding: 16px;
-    position: relative;
-    flex-wrap: wrap;
-}
-
-.grid-container-toolbar,
-.grid-item-toolbar {
-    position: absolute;
-    right: 0;
-    top: 0;
-}
-
-.grid-item {
-    padding: 16px;
-    background-color: #fff;
-    position: relative;
-}
-
-@media (max-width: 480px) {
-    .toolbar {
-        display: flex;
-        flex-wrap: nowrap;
-        overflow-x: scroll;
-    }
-    .toolbar-grp,
-    .toolbar-grp > div {
-        display: flex;
-    }
-    .grid-item {
-        width: 100% !important;
-    }
-}

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

@@ -1,57 +0,0 @@
-
-.code-wrapper{
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background:rgba(0,0, 0,0.9);
-    z-index:2;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-}
-.codeToTextWrapper{
-    width: 80%;
-    height: 80%;
-    grid-template-columns: 45% 10% 45%;
-}
-.codeToText{
-    width: 100%;
-    height: 90%;
-    display: grid;
-    grid-template-columns: 45% 10% 45%;
-}
-.codeToText textarea,.textOutput{
-    border-radius: 15px;
-    padding: 10px;
-}
-
-.codeToText textarea{
-    resize: none;
-}
-.codeToText textarea:focus{
-    outline: none;
-}
-.textOutput{
-    background: #fff;
-    overflow: scroll;
-}
-.codeToTextWrapper button{
-    margin: 3% 1%;
-    padding: 10px 37px;
-    cursor: pointer;
-    border-radius: 5px;
-    opacity: 1;
-    font-weight: bolder;
-}
-.done{
-    background: #44c767;
-    color:#fff;
-}
-.clear{
-    background: #fff;
-    color:#a9a4a4;
-    border:1px solid lightgray;
-}