@flozy/editor 1.0.0 → 1.0.5

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/index.js

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

package/src/stories/CollaborativeEditor.stories.js

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

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

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