@flozy/editor 1.0.0

package/src/components/Editor/utils/draftToSlate.js

@@ -0,0 +1,104 @@
+const getStyle = (text, inlineStyle, data) => {
+  if (inlineStyle?.style) {
+    switch (inlineStyle?.style) {
+      case "BOLD":
+        return { text, bold: true };
+      case "ITALIC":
+        return { text, italic: true };
+      default:
+        return { text };
+    }
+  } else if (inlineStyle?.key !== undefined) {
+    const entityData = data?.entityMap[inlineStyle?.key];
+    switch (entityData?.type) {
+      case "mention":
+        return {
+          character: text,
+          type: entityData?.type,
+          data: entityData?.data,
+          children: [{ text: "" }],
+        };
+      default:
+        return { text };
+    }
+  } else {
+    return { text };
+  }
+};
+
+const splitInlineStyleRanges = (text, inlineStyleRanges, data) => {
+  if (inlineStyleRanges.length > 0) {
+    let currentOffset = 0;
+    let allRanges = [];
+    for (let i = 0; i < inlineStyleRanges.length; i++) {
+      const { offset, length } = inlineStyleRanges[i];
+      if (currentOffset < offset) {
+        allRanges.push({
+          offset: currentOffset,
+          length: offset - currentOffset,
+        });
+        allRanges.push({
+          offset,
+          length,
+        });
+        currentOffset = offset + length;
+      }
+    }
+    // last line push
+    if (currentOffset < text.length) {
+      allRanges.push({
+        offset: currentOffset,
+        length: text.length - currentOffset,
+      });
+    }
+    const splits = allRanges.reduce((a, b) => {
+      a.push({
+        ...getStyle(
+          text.substr(b.offset, b.length),
+          inlineStyleRanges.find(
+            (f) => f.offset === b.offset && f.length === b.length
+          ),
+          data
+        ),
+      });
+      return a;
+    }, []);
+    return splits;
+  } else {
+    return [text];
+  }
+};
+
+export const draftToSlate = (props) => {
+  const { data } = props;
+  if (data?.blocks && data?.blocks?.length > 0) {
+    const converted = data?.blocks?.reduce((a, b) => {
+      if (b?.text !== undefined) {
+        const blocks = splitInlineStyleRanges(
+          b?.text,
+          [...b?.inlineStyleRanges, ...b?.entityRanges],
+          data
+        ).map((m) => {
+          return {
+            ...m,
+          };
+        });
+        a.push({
+          type: "paragraph",
+          children: blocks,
+        });
+      }
+      return a;
+    }, []);
+    return converted;
+  } else if (data?.length) {
+    return data;
+  } else {
+    return [
+      {
+        type: "paragraph",
+        children: [{ text: "" }],
+      },
+    ];
+  }
+};

package/src/components/Editor/utils/embed.js

@@ -0,0 +1,18 @@
+import { Transforms } from "slate";
+
+import { createParagraph } from "./paragraph";
+export const createEmbedNode = (type, { url, alt }) => ({
+  type,
+  alt,
+  url,
+  children: [{ text: "" }],
+});
+
+export const insertEmbed = (editor, embedData, format) => {
+  const { url } = embedData;
+  if (!url) return;
+  const embed = createEmbedNode(format, embedData);
+
+  Transforms.insertNodes(editor, embed, { select: true });
+  Transforms.insertNodes(editor, createParagraph(""));
+};

package/src/components/Editor/utils/equation.js

@@ -0,0 +1,22 @@
+import { Transforms, Range } from "slate";
+
+const createEquationNode = (math,inline) =>({
+    type:'equation',
+    inline,
+    math,
+    children:[{text:''}]
+})
+
+export const insertEquation = (editor,math,inline) =>{
+    const equation = createEquationNode(math,inline);
+
+    const {selection} = editor;
+    if(!!selection){
+        if(Range.isExpanded(selection)) Transforms.collapse(editor,{edge:'end'});
+
+        Transforms.insertNodes(editor,equation,{select:true})
+    }
+
+
+    
+}

package/src/components/Editor/utils/events.js

@@ -0,0 +1,56 @@
+import { Transforms, Editor } from "slate";
+import { insertMention } from "./mentions";
+
+const HOTKEYS = {
+  b: "bold",
+  i: "italic",
+  u: "underline",
+};
+
+export const mentionsEvent = (props) => {
+  const { event, mentions, setMentions, chars, editor } = props;
+  const { index, target } = mentions;
+  switch (event.key) {
+    case "ArrowDown":
+      event.preventDefault();
+      const prevIndex = index >= chars.length - 1 ? 0 : index + 1;
+      setMentions({ ...mentions, index: prevIndex });
+      break;
+    case "ArrowUp":
+      event.preventDefault();
+      const nextIndex = index <= 0 ? chars.length - 1 : index - 1;
+      setMentions({ ...mentions, index: nextIndex });
+      break;
+    case "Tab":
+    case "Enter":
+      event.preventDefault();
+      Transforms.select(editor, target);
+      insertMention(editor, chars[index]);
+      setMentions({ ...mentions, target: null });
+      break;
+    case "Escape":
+      event.preventDefault();
+      setMentions({ ...mentions, target: null });
+      break;
+    default:
+      break;
+  }
+};
+
+const isMarkActive = (editor, format) => {
+  const marks = Editor.marks(editor);
+  return marks ? marks[format] === true : false;
+};
+
+export const commands = (props) => {
+  const { event, editor } = props;
+  if (HOTKEYS[event.key]) {
+    event.preventDefault();
+    const isActive = isMarkActive(editor, HOTKEYS[event.key]);
+    if (isActive) {
+      Editor.removeMark(editor, HOTKEYS[event.key]);
+    } else {
+      Editor.addMark(editor, HOTKEYS[event.key], true);
+    }
+  }
+};

package/src/components/Editor/utils/grid.js

@@ -0,0 +1,12 @@
+import { Transforms } from "slate";
+import { gridItem } from "./gridItem";
+
+export const insertGrid = (editor) => {
+  const grid = {
+    type: "grid",
+    grid: "container",
+    children: [{ ...gridItem() }],
+  };
+  Transforms.insertNodes(editor, grid);
+  Transforms.move(editor);
+};

package/src/components/Editor/utils/gridItem.js

@@ -0,0 +1,19 @@
+import { Transforms } from "slate";
+
+export const gridItem = () => {
+  return {
+    type: "grid-item",
+    grid: 6,
+    children: [
+      {
+        type: "paragraph",
+        children: [{ text: `Grid Item Text - ${new Date().getTime()}` }],
+      },
+    ],
+  };
+};
+
+export const insertGridItem = (editor) => {
+  Transforms.insertNodes(editor, { ...gridItem() });
+  Transforms.move(editor);
+};

package/src/components/Editor/utils/link.js

@@ -0,0 +1,53 @@
+import { Editor, Transforms, Path, Range, Element } from 'slate';
+
+export const createLinkNode = (href,showInNewTab,text) =>(
+    {
+        type:'link',
+        href,
+        target:showInNewTab ? '_blank': '_self',
+        children:[{ text }]
+    }
+)
+
+export const insertLink = (editor,{url,showInNewTab})=>{
+    if(!url) return;
+
+    const { selection } = editor;
+    const link = createLinkNode(url,showInNewTab,'Link');
+    if(!!selection){
+        const [parent, parentPath] = Editor.parent(editor,selection.focus.path);
+        if(parent.type === 'link'){
+            removeLink(editor);
+        }
+
+        
+        if(editor.isVoid(parent)){
+            Transforms.insertNodes(editor, 
+                {type:'paragraph',children:[link]},
+                {
+                    at:Path.next(parentPath),
+                    select:true
+                }
+
+            )
+        }
+        else if(Range.isCollapsed(selection)){
+            Transforms.insertNodes(editor,link, {select:true});
+        }
+        else{
+            Transforms.wrapNodes(editor,link,
+                {split:true}
+            )
+
+        }
+    }
+    else{
+        Transforms.insertNodes(editor,{type:'paragraph',children:[link]})
+    }
+};
+
+export const removeLink = (editor) =>{
+    Transforms.unwrapNodes(editor,{
+        match:n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'link'
+    })
+};

package/src/components/Editor/utils/mentions.js

@@ -0,0 +1,11 @@
+import { Transforms } from "slate";
+
+export const insertMention = (editor, character) => {
+  const mention = {
+    type: "mention",
+    character,
+    children: [{ text: "" }],
+  };
+  Transforms.insertNodes(editor, mention);
+  Transforms.move(editor);
+};

package/src/components/Editor/utils/paragraph.js

@@ -0,0 +1,4 @@
+export const createParagraph = (text) => ({
+    type:'paragraph',
+    children:[{text}]
+})

package/src/components/Editor/utils/serializer.js

@@ -0,0 +1,32 @@
+import { Text } from 'slate';
+import { getBlock, getMarked } from './SlateUtilityFunctions.js'
+import ReactDOMServer from 'react-dom/server';
+
+const { renderToStaticMarkup } = ReactDOMServer
+
+
+export const serialize = node =>{
+    if(Text.isText(node)){
+        let string = getMarked(node,node.text);
+        string = renderToStaticMarkup(string);
+        return string
+    }
+    const children = node.children.map(n => serialize(n)).join('')
+
+    let block = getBlock({children,element:node})
+    block = renderToStaticMarkup(block) 
+    
+    return block
+}
+
+
+
+export const serializer = editorValue =>{
+    if(editorValue.length > 0){
+        return editorValue.map(n => serialize(n)).join('')
+    }
+}
+
+export const deserializer = (body) => {
+    console.log(body);
+}

package/src/components/Editor/utils/table.js

@@ -0,0 +1,151 @@
+import { Transforms, Editor, Range, Element, Path } from "slate";
+
+export class TableUtil {
+  constructor(editor) {
+    this.editor = editor;
+  }
+
+  insertTable = (rows, columns) => {
+    const [tableNode] = Editor.nodes(this.editor, {
+      match: (n) =>
+        !Editor.isEditor(n) && Element.isElement(n) && n.type === "table",
+      mode: "highest",
+    });
+
+    if (tableNode) return;
+    if (!rows || !columns) {
+      return;
+    }
+    //Creating a 2-d array of blank string as default text for the table
+    const cellText = Array.from({ length: rows }, () =>
+      Array.from({ length: columns }, () => "")
+    );
+    const newTable = createTableNode(cellText, rows, columns);
+
+    Transforms.insertNodes(this.editor, newTable, {
+      //   mode: "highest",
+    });
+    Transforms.insertNodes(
+      this.editor,
+      { type: "paragraph", children: [{ text: "" }] }
+      //   { mode: "highest" }
+    );
+  };
+
+  removeTable = () => {
+    Transforms.removeNodes(this.editor, {
+      match: (n) =>
+        !Editor.isEditor(n) && Element.isElement(n) && n.type === "table",
+      // mode:'highest'
+    });
+  };
+
+  insertRow = (action) => {
+    const { selection } = this.editor;
+
+    if (!!selection && Range.isCollapsed(selection)) {
+      const [tableNode] = Editor.nodes(this.editor, {
+        match: (n) =>
+          !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-row",
+      });
+      if (tableNode) {
+        const [[table, tablePath]] = Editor.nodes(this.editor, {
+          match: (n) =>
+            !Editor.isEditor(n) && Element.isElement(n) && n.type === "table",
+        });
+        const [, currentRow] = tableNode;
+
+        const path = action === "after" ? Path.next(currentRow) : currentRow;
+
+        Transforms.insertNodes(
+          this.editor,
+          createRow(Array(table.columns).fill("")),
+          {
+            at: path,
+          }
+        );
+        Transforms.setNodes(
+          this.editor,
+          { rows: table.rows + 1 },
+          {
+            at: tablePath,
+          }
+        );
+      }
+    }
+  };
+
+  insertColumn = (action) => {
+    const { selection } = this.editor;
+    if (!!selection && Range.isCollapsed(selection)) {
+      const [tableNode] = Editor.nodes(this.editor, {
+        match: (n) =>
+          !Editor.isEditor(n) &&
+          Element.isElement(n) &&
+          n.type === "table-cell",
+      });
+      if (tableNode) {
+        const [[table, tablePath]] = Editor.nodes(this.editor, {
+          match: (n) =>
+            !Editor.isEditor(n) && Element.isElement(n) && n.type === "table",
+        });
+        const [, currentCell] = tableNode;
+        const startPath =
+          action === "after" ? Path.next(currentCell) : currentCell;
+
+        // The last two indices of the path represents the row and column. We need to add one cell to each row starting from the first row
+        startPath[startPath.length - 2] = 0;
+        for (let row = 0; row < table.rows; row++) {
+          Transforms.insertNodes(this.editor, createTableCell(""), {
+            at: startPath,
+          });
+          startPath[startPath.length - 2]++;
+        }
+
+        Transforms.setNodes(
+          this.editor,
+          { columns: table.columns + 1 },
+          {
+            at: tablePath,
+          }
+        );
+      }
+    }
+  };
+}
+
+const createRow = (cellText) => {
+  const newRow = Array.from(cellText, (value) => createTableCell(value));
+  return {
+    type: "table-row",
+    children: newRow,
+  };
+};
+
+export const createTableCell = (text) => {
+  return {
+    type: "table-cell",
+    children: [
+      {
+        type: "paragraph",
+        children: [{ text }],
+      },
+    ],
+  };
+};
+
+const createTableNode = (cellText, rows, columns) => {
+  const tableChildren = Array.from(cellText, (value) => createRow(value));
+  let tableNode = {
+    type: "paragraph",
+    children: [
+      {
+        type: "table",
+        children: tableChildren,
+        rows,
+        columns,
+      },
+    ],
+  };
+  return tableNode;
+};

package/src/components/index.js

@@ -0,0 +1,5 @@
+import Collaborative from "./Editor/CollaborativeEditor";
+import CommonEditor from "./Editor/CommonEditor";
+
+export const Editor = CommonEditor;
+export const CollaborativeEditor = Collaborative;

package/src/index.js

@@ -0,0 +1 @@
+export * from "./components";

package/src/stories/CollaborativeEditor.stories.js

@@ -0,0 +1,30 @@
+import { CollaborativeEditor } from "../components";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const DefaultComp = {
+  title: "Example/CollaborativeEditor",
+  component: CollaborativeEditor,
+  parameters: {
+    content: null,
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ["autodocs"],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+};
+
+export default DefaultComp;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default = {
+  args: {
+    id: 1,
+    content: [],
+    user: {
+      id: 1,
+      name: `user_${new Date().getTime()}@emai.com`,
+      token: `user_${new Date().getTime()}@emai.com`,
+    },
+    socketURL: "ws://localhost:1234",
+  },
+};

package/src/stories/Editor.stories.js

@@ -0,0 +1,24 @@
+import { Editor } from "../components";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const DefaultComp = {
+  title: "Example/Editor",
+  component: Editor,
+  parameters: {
+    content: null,
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ["autodocs"],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+};
+
+export default DefaultComp;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default = {
+  args: {
+    id: 1,
+    content: [],
+  },
+};

package/src/stories/EditorSampleProps/ChatSample.js

@@ -0,0 +1,43 @@
+const ChatSample = {
+  blocks: [
+    {
+      key: "c4hg",
+      text: "line one contains bold text\nline two contains normal one\nline three contains both bold and @Tech AgenciFlow ",
+      type: "unstyled",
+      depth: 0,
+      inlineStyleRanges: [
+        { offset: 18, length: 10, style: "BOLD" },
+        { offset: 82, length: 5, style: "BOLD" },
+      ],
+      entityRanges: [{ offset: 91, length: 16, key: 0 }],
+      data: {},
+    },
+  ],
+  entityMap: {
+    0: {
+      type: "mention",
+      mutability: "SEGMENTED",
+      data: {
+        mention: {
+          id: 2,
+          username: "tech AgenciFlow",
+          first_name: "Tech",
+          last_name: "AgenciFlow",
+          email: "tech@agenciflow.com",
+          name: "Tech AgenciFlow",
+          avatar_filename:
+            "https://sweetp-user-uploads.s3.eu-west-2.amazonaws.com/stage%20/%201684133040520_profile",
+          user_job_status: 0,
+          mute_notification: 1,
+          job_user_id: 2,
+          aju_id: 806,
+          job_id: 363,
+          agency_id: 5,
+          user_role: 3,
+        },
+      },
+    },
+  },
+};
+
+export default ChatSample;