@flozy/editor 1.0.0

package/src/components/Editor/CommonEditor.js

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

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

@@ -0,0 +1,57 @@
+
+.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;
+}