@springmicro/rte 0.1.3 → 0.1.10

package/src/slate/common/icon.jsx

@@ -1,97 +0,0 @@
-import React from "react";
-import {
-  MdOutlineColorize,
-  MdFormatColorText,
-  MdFormatColorFill,
-  MdFormatBold,
-  MdFormatItalic,
-  MdStrikethroughS,
-  MdFormatUnderlined,
-  MdFormatQuote,
-  MdFormatAlignLeft,
-  MdFormatAlignCenter,
-  MdFormatAlignRight,
-  MdFormatListNumbered,
-  MdFormatListBulleted,
-  MdInsertLink,
-  MdLinkOff,
-  MdVideoLibrary,
-  MdImage,
-  MdAdd,
-  MdSubscript,
-  MdSuperscript,
-  MdKeyboardArrowRight,
-  MdArrowForward,
-  MdArrowDropDown,
-} from "react-icons/md";
-import {
-  BsTypeH1,
-  BsTypeH2,
-  BsTypeH3,
-  BsCameraVideoFill,
-} from "react-icons/bs";
-import { FaSuperscript, FaSubscript } from "react-icons/fa";
-import {
-  AiFillEdit,
-  AiOutlineTable,
-  AiOutlineInsertRowBelow,
-  AiOutlineInsertRowRight,
-  AiOutlineDelete,
-  AiFillTag,
-  AiOutlineUpload,
-  AiOutlineArrowsAlt,
-  AiOutlineInsertRowAbove,
-  AiOutlineInsertRowLeft,
-  AiFillHtml5,
-} from "react-icons/ai";
-import { SiLatex } from "react-icons/si";
-
-const iconList = {
-  bold: <MdFormatBold size={20} />,
-  italic: <MdFormatItalic size={20} />,
-  strikethrough: <MdStrikethroughS size={20} />,
-  underline: <MdFormatUnderlined size={20} />,
-  h1: <BsTypeH1 size={20} />,
-  h2: <BsTypeH2 size={20} />,
-  h3: <BsTypeH3 size={20} />,
-  color: <MdFormatColorText size={20} />,
-  bgColor: <MdFormatColorFill size={20} />,
-
-  blockquote: <MdFormatQuote size={20} />,
-  superscript: <MdSuperscript size={15} />,
-  subscript: <MdSubscript size={15} />,
-  alignLeft: <MdFormatAlignLeft size={20} />,
-  alignCenter: <MdFormatAlignCenter size={20} />,
-  alignRight: <MdFormatAlignRight size={20} />,
-  orderedList: <MdFormatListNumbered size={20} />,
-  unorderedList: <MdFormatListBulleted size={20} />,
-  link: <MdInsertLink size={20} />,
-  unlink: <MdLinkOff size={20} />,
-  image: <MdImage size={20} />,
-  video: <MdVideoLibrary size={20} />,
-  add: <MdAdd size={20} />,
-  table: <AiOutlineTable size={20} />,
-  insertRowBelow: <AiOutlineInsertRowBelow size={25} />,
-  insertColumnRight: <AiOutlineInsertRowRight size={25} />,
-  insertColumnLeft: <AiOutlineInsertRowLeft size={25} />,
-  insertRowAbove: <AiOutlineInsertRowAbove size={25} />,
-  trashCan: <AiOutlineDelete size={25} />,
-  addId: <AiFillTag size={20} />,
-  upload: <AiOutlineUpload size={20} />,
-  equation: <SiLatex size={20} />,
-  resize: <AiOutlineArrowsAlt size={20} />,
-  videoPlayer: <BsCameraVideoFill size={20} />,
-  insertHtml: <AiFillHtml5 size={20} />,
-  arrowRight: <MdArrowForward size={35} />,
-  pen: <AiFillEdit size={20} />,
-  colorize: <MdOutlineColorize size={20} />,
-
-  arrowDown: <MdArrowDropDown size={20} />,
-};
-
-const Icon = (props) => {
-  const { icon } = props;
-  return iconList[icon];
-};
-
-export default Icon;

package/src/slate/components/code-to-text/CodeToTextButton.jsx

@@ -1,19 +0,0 @@
-import React from "react";
-import Button from "../../common/button";
-import Icon from "../../common/icon";
-const CodeToTextButton = (props) => {
-  const { handleButtonClick } = props;
-
-  return (
-    <>
-      <Button
-        format="insert Html"
-        onClick={() => handleButtonClick({ showInput: true, action: "insert" })}
-      >
-        <Icon icon="insertHtml" />
-      </Button>
-    </>
-  );
-};
-
-export default CodeToTextButton;

package/src/slate/components/code-to-text/HtmlCode.jsx

@@ -1,64 +0,0 @@
-import { Interweave } from "interweave";
-import React, { useEffect } from "react";
-import { Transforms, Path, Node } from "slate";
-import {
-  useSelected,
-  useFocused,
-  useSlateStatic,
-  ReactEditor,
-} from "slate-react";
-import useFormat from "../../utils/customHooks/useFormat";
-
-const HtmlCode = (props) => {
-  const { attributes, element, children } = props;
-  const selected = useSelected();
-  const focused = useFocused();
-  const editor = useSlateStatic();
-
-  const isHtmlEmbed = useFormat(editor, "htmlCode");
-
-  const handleKeyUp = (e) => {
-    if (!isHtmlEmbed) return;
-    if (e.keyCode === 13) {
-      const parentPath = Path.parent(editor.selection.focus.path);
-      const nextPath = Path.next(parentPath);
-      Transforms.insertNodes(
-        editor,
-        {
-          type: "p",
-          children: [{ text: "" }],
-        },
-        {
-          at: nextPath,
-          select: true, // Focus on this node once inserted
-        }
-      );
-    } else if (e.keyCode === 8) {
-      Transforms.removeNodes(editor);
-    }
-    // console.log(e);
-  };
-  useEffect(() => {
-    document.addEventListener("keyup", handleKeyUp);
-    return () => {
-      document.removeEventListener("keyup", handleKeyUp);
-    };
-  }, [isHtmlEmbed]);
-  return (
-    <div
-      {...attributes}
-      {...element.attr}
-      style={{
-        boxShadow: selected && focused && "0 0 3px 3px lightgray",
-        marginRight: "20px",
-      }}
-    >
-      <div contentEditable={false}>
-        <Interweave content={element.html} />
-      </div>
-      {children}
-    </div>
-  );
-};
-
-export default HtmlCode;

package/src/slate/components/code-to-text/HtmlContextMenu.jsx

@@ -1,39 +0,0 @@
-import React, { useEffect, useState } from "react";
-import useContextMenu from "../../utils/customHooks/useContextMenu";
-import Icon from "../../common/icon";
-import { Transforms, Editor, Element, Node, Path } from "slate";
-
-const HtmlContextMenu = (props) => {
-  const { editor, handleCodeToText } = props;
-  const [selection, setSelection] = useState();
-  const [showMenu, { top, left }] = useContextMenu(
-    editor,
-    "htmlCode",
-    setSelection
-  );
-
-  const handleEditHtml = () => {
-    Transforms.select(editor, selection);
-    const parentPath = Path.parent(selection.focus.path);
-    const htmlNode = Node.get(editor, parentPath);
-    handleCodeToText({
-      showInput: true,
-      html: htmlNode.html,
-      action: "update",
-      location: selection,
-    });
-  };
-
-  return showMenu ? (
-    <div className="contextMenu" style={{ top, left }}>
-      <div className="menuOption" onClick={handleEditHtml}>
-        <Icon icon="pen" />
-        <span>Edit HTML</span>
-      </div>
-    </div>
-  ) : (
-    <></>
-  );
-};
-
-export default HtmlContextMenu;

package/src/slate/components/code-to-text/index.jsx

@@ -1,111 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import Icon from "../../common/icon";
-import { Interweave } from "interweave";
-import { Transforms } from "slate";
-import { useSlateStatic } from "slate-react";
-const CodeToText = (props) => {
-  const { html, action, location, handleCodeToText } = props;
-  const codeToTextRef = useRef();
-  const wrapperRef = useRef();
-
-  const editor = useSlateStatic();
-  const checkClick = (e) => {
-    const clickedComponent = e.target;
-    if (
-      wrapperRef?.current?.contains(clickedComponent) &&
-      !codeToTextRef?.current?.contains(clickedComponent)
-    ) {
-      let partialState = {
-        showInput: false,
-      };
-      if (html) {
-        partialState.html = action === "update" ? "" : html;
-      }
-      handleCodeToText(partialState);
-    }
-  };
-  useEffect(() => {
-    document.addEventListener("click", checkClick);
-    return () => {
-      document.removeEventListener("click", checkClick);
-    };
-  }, []);
-
-  const codeOnChange = async (e) => {
-    // e.preventDefault();
-    handleCodeToText({ html: e.target.value });
-  };
-  const addHtml = () => {
-    if (html) {
-      if (action === "update") {
-        Transforms.setNodes(
-          editor,
-          {
-            html,
-          },
-          {
-            at: location,
-          }
-        );
-      } else {
-        Transforms.insertNodes(
-          editor,
-          {
-            type: "htmlCode",
-            html: html,
-            children: [{ text: "" }],
-          },
-          {
-            select: true,
-          }
-        );
-        Transforms.insertNodes(editor, { type: "p", children: [{ text: "" }] });
-      }
-    }
-    handleCodeToText({
-      showInput: false,
-      html: "",
-    });
-  };
-  const clearHtml = () => {
-    handleCodeToText({ html: "" });
-  };
-  return (
-    <div className="code-wrapper" ref={wrapperRef}>
-      <div ref={codeToTextRef} className="codeToTextWrapper">
-        <div className="codeToText">
-          <textarea
-            name=""
-            id=""
-            value={html}
-            onChange={codeOnChange}
-            placeholder="Write html here..."
-          ></textarea>
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              color: "white",
-            }}
-          >
-            <Icon icon="arrowRight" />
-          </div>
-          <div className="textOutput">
-            <Interweave content={html} />
-          </div>
-        </div>
-        <div>
-          <button onClick={addHtml} className="done">
-            Done
-          </button>
-          <button className="clear" onClick={clearHtml}>
-            Clear
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default CodeToText;

package/src/slate/components/color-picker/color-cursor.stories.tsx

@@ -1,16 +0,0 @@
-import { ColorCursor, ColorCursorProps } from "./color-cursor";
-import React from "react";
-import { StoryFn, Meta } from "@storybook/react";
-
-export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: "Slate Color Picker/Color Cursor",
-  component: ColorCursor,
-} as Meta<typeof ColorCursor>;
-
-export const Primary = {
-  args: { color: "blue" } as ColorCursorProps,
-};

package/src/slate/components/color-picker/color-cursor.tsx

@@ -1,34 +0,0 @@
-import { useTheme } from "@mui/material";
-
-export type ColorCursorProps = {
-  color: string;
-};
-
-export function ColorCursor({ color }: ColorCursorProps) {
-  const theme = useTheme();
-  const r = 16;
-  const sw = 4;
-  const dim = sw * 2 + r;
-  // console.log(color)
-  return (
-    <svg width={dim} height={dim}>
-      <circle
-        cx={dim / 2}
-        cy={dim / 2}
-        r={(sw + r) / 2}
-        // @ts-ignore
-        stroke={theme.palette.neutral[300]}
-        stroke-width={sw}
-        fill={color}
-      />
-      <circle
-        cx={dim / 2}
-        cy={dim / 2}
-        r={(sw + r) / 2 - 1}
-        stroke="white"
-        stroke-width={sw}
-        fill={"transparent"}
-      />
-    </svg>
-  );
-}

package/src/slate/components/color-picker/color-formats-view.stories.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import { StoryFn, Meta } from "@storybook/react";
-import { ColorFormatsView, ColorFormatsViewProps } from "./color-formats-view";
-
-export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: "Slate Color Picker/Color Formats View",
-  component: ColorFormatsView,
-} as Meta<typeof ColorFormatsView>;
-
-export const Primary = {
-  args: {
-    height: 250,
-    colorFormats: {
-      hex: "008000",
-      rgb: "rgb(0,128,0)",
-      hsl: "hsl(120, 100%, 25%)",
-      hsv: "hsv(120, 100%, 50%)",
-    },
-    setColorFormats: () => {},
-  } as ColorFormatsViewProps,
-};

package/src/slate/components/color-picker/color-formats-view.tsx

@@ -1,115 +0,0 @@
-import { useEffect, useState, Dispatch, SetStateAction } from "react";
-import {
-  Box,
-  TableContainer,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  Paper,
-  TextField,
-  Input,
-  InputAdornment,
-  FormHelperText,
-} from "@mui/material";
-import useSimpleFormik from "../../../hooks/useSimpleFormik";
-import {
-  colorStringToColorFormats,
-  hueFromColorFormats,
-  isColor,
-  newColorFormatsFromHue,
-} from "@springmicro/utils/editor";
-import { ColorFormats } from "@springmicro/utils/types";
-
-export type ColorFormatsViewProps = {
-  height: number;
-  colorFormats: ColorFormats;
-  setColorFormats: Dispatch<SetStateAction<ColorFormats>>;
-};
-
-export function ColorFormatsView({
-  height,
-  colorFormats,
-  setColorFormats,
-}: ColorFormatsViewProps) {
-  const msg = "Invalid color";
-  const formik = useSimpleFormik(colorFormats, {
-    hex: { fn: (value: string) => isColor("#" + value), msg },
-    rgb: { fn: (value: string) => isColor("" + value), msg },
-    hsl: { fn: (value: string) => isColor("" + value), msg },
-    hsv: { fn: (value: string) => isColor("" + value), msg },
-  });
-
-  useEffect(() => {
-    formik.setValues(colorFormats);
-  }, [colorFormats]);
-
-  return (
-    <TableContainer component={Paper} sx={{ height, position: "relative" }}>
-      <Table>
-        <TableBody>
-          {(Object.keys(colorFormats) as Array<string>).map((k) => (
-            <TableRow key={k} sx={{ "& td, & th": { py: 1 } }}>
-              <TableCell
-                component="th"
-                scope="row"
-                sx={{ textTransform: "uppercase", fontWeight: "bold" }}
-              >
-                <Box
-                  component="label"
-                  htmlFor={`color-${k}`}
-                  sx={{ display: "inline-block", width: "24px" }}
-                >
-                  {k}
-                </Box>
-              </TableCell>
-              <TableCell>
-                <Input
-                  sx={{ width: 170 }}
-                  id={`color-${k}`}
-                  name={k}
-                  value={formik.values[k]}
-                  startAdornment={
-                    k === "hex" ? (
-                      <InputAdornment position="start">#</InputAdornment>
-                    ) : null
-                  }
-                  onChange={(e) => {
-                    formik.handleChange(e);
-                    const color =
-                      k === "hex" ? "#" + e.target.value : e.target.value;
-                    if (isColor(color)) {
-                      const newCF = colorStringToColorFormats(color);
-                      setColorFormats(newCF);
-                      // formik.setValues(newCF)
-                    }
-                  }}
-                  onBlur={formik.handleBlur}
-                />
-                {formik.errors[k] ?? (
-                  <FormHelperText>{formik.errors[k]}</FormHelperText>
-                )}
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-        <TableCell
-          colSpan={2}
-          sx={{
-            position: "absolute",
-            bottom: 0,
-            left: 0,
-            right: 0,
-            borderBottom: "none",
-            backgroundColor: colorFormats.rgb,
-          }}
-        ></TableCell>
-      </Table>
-    </TableContainer>
-  );
-  // return <Box>
-
-  //   {JSON.stringify(colorFormats, null, 2)}
-  // </Box>
-}

package/src/slate/components/color-picker/color-gradient.stories.tsx

@@ -1,48 +0,0 @@
-import React from "react";
-import { StoryFn, Meta } from "@storybook/react";
-import { ColorGradient, ColorGradientProps } from "./color-gradient";
-import { colorStringToColorFormats } from "@springmicro/utils/editor";
-
-type ColorGradientWrapperProps = {
-  initialColor: string;
-  width: number;
-  height: number;
-};
-
-function ColorGradientWrapper({
-  initialColor,
-  width,
-  height,
-}: ColorGradientWrapperProps) {
-  const [colorFormats, setColorFormats] = React.useState(
-    colorStringToColorFormats(initialColor)
-  );
-  React.useEffect(() => {
-    setColorFormats(colorStringToColorFormats(initialColor));
-  }, [initialColor]);
-  return (
-    <ColorGradient
-      width={width}
-      height={height}
-      colorFormats={colorFormats}
-      setColorFormats={setColorFormats}
-    />
-  );
-}
-
-export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: "Slate Color Picker/Color Gradient",
-  component: ColorGradientWrapper,
-} as Meta<typeof ColorGradientWrapper>;
-
-export const Primary = {
-  args: {
-    initialColor: "purple",
-    width: 360,
-    height: 240,
-  } as ColorGradientWrapperProps,
-};

package/src/slate/components/color-picker/color-gradient.tsx

@@ -1,128 +0,0 @@
-import { useState, useEffect, Dispatch, SetStateAction, useRef } from "react";
-import { Box } from "@mui/material";
-import {
-  calculate2DPositionFromColorFormats,
-  calculateMouseColors,
-  colorConvert,
-  hueFromColorFormats,
-  isColor,
-} from "@springmicro/utils/editor";
-import { ColorFormats } from "@springmicro/utils/types";
-import { ColorCursor } from "./color-cursor";
-
-const calculateInitCursorPosition = (
-  width: number,
-  height: number,
-  colorFormats: ColorFormats
-) => {
-  const [sat, val] = (colorFormats.hsv.match(/[0-9]+\%/g) as Array<string>).map(
-    (val) => parseInt(val)
-  );
-  const x = (width * sat) / 100;
-  const y = height - (height * val) / 100;
-  return {
-    x,
-    y,
-  };
-};
-
-export type ColorGradientProps = {
-  width: number;
-  height: number;
-  colorFormats: ColorFormats;
-  setColorFormats: Dispatch<SetStateAction<ColorFormats>>;
-};
-
-export function ColorGradient({
-  width,
-  height,
-  colorFormats,
-  setColorFormats,
-}: ColorGradientProps) {
-  const ref = useRef();
-  const [mouseIsDown, setMouseIsDown] = useState(false);
-  const [cursorPosition, setCursorPosition] = useState(
-    calculateInitCursorPosition(width, height, colorFormats)
-  );
-  const [rect, setRect] = useState<DOMRect>();
-  const hue = hueFromColorFormats(colorFormats);
-
-  const updateColor = (x: number, y: number, w: number, h: number) => {
-    const newColors = calculateMouseColors(x, y, w, h, hue);
-    if (isColor(newColors.rgb)) {
-      setColorFormats(newColors);
-      setCursorPosition({ x, y });
-      console.log(newColors);
-    }
-  };
-
-  useEffect(() => {
-    if (!mouseIsDown)
-      setCursorPosition(
-        calculate2DPositionFromColorFormats(width, height, colorFormats)
-      );
-  }, [colorFormats]);
-
-  return (
-    <Box
-      ref={ref}
-      onMouseDown={(e) => {
-        if (!ref.current) return;
-        setMouseIsDown(true);
-        const rect = (ref.current as HTMLElement).getBoundingClientRect();
-        setRect(rect);
-        // e.clientX was not giving the right position within the element
-        // calculate instead
-        const x = e.pageX - rect.x;
-        const y = e.pageY - rect.y;
-        updateColor(x, y, rect.width, rect.height);
-      }}
-      onMouseUp={(e) => {
-        setMouseIsDown(false);
-      }}
-      onMouseMove={(e) => {
-        if (mouseIsDown && rect) {
-          const x = e.pageX - rect.x;
-          const y = e.pageY - rect.y;
-          if (x <= width && y <= height && x >= 0 && y >= 0) {
-            // console.log(x, y, rect.x, rect.y)
-            updateColor(x, y, rect.width, rect.height);
-          }
-        }
-      }}
-      sx={{
-        position: "relative",
-        height,
-        width,
-        background: "#000",
-        "&::before": {
-          content: '""',
-          position: "absolute",
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          background: `linear-gradient(
-            to right,
-            hsl(${hue}, 100%, 100%),
-            hsl(${hue}, 100%, 50%)
-          )`,
-          mask: `linear-gradient(#000, transparent)`,
-          borderRadius: 1,
-        },
-        borderRadius: 1,
-      }}
-    >
-      <Box
-        sx={{
-          position: "absolute",
-          top: cursorPosition.y + "px",
-          left: cursorPosition.x + "px",
-          transform: "translate(-50%, -50%)",
-        }}
-      >
-        <ColorCursor color={colorFormats.rgb} />
-      </Box>
-    </Box>
-  );
-}