@springmicro/rte 0.1.3 → 0.1.11

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

@@ -1,41 +0,0 @@
-import React from "react";
-import { StoryFn, Meta } from "@storybook/react";
-import { ColorHue, ColorHueProps } from "./color-hue";
-import { colorStringToColorFormats } from "@springmicro/utils/editor";
-
-type ColorHueWrapperProps = {
-  initialColor: string;
-  width: number;
-};
-
-function ColorHueWrapper({ initialColor, width }: ColorHueWrapperProps) {
-  const [colorFormats, setColorFormats] = React.useState(
-    colorStringToColorFormats(initialColor)
-  );
-  React.useEffect(() => {
-    setColorFormats(colorStringToColorFormats(initialColor));
-  }, [initialColor]);
-  return (
-    <ColorHue
-      width={width}
-      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 Hue",
-  component: ColorHueWrapper,
-} as Meta<typeof ColorHueWrapper>;
-
-export const Primary = {
-  args: {
-    initialColor: "#00ff00",
-    width: 360,
-  } as ColorHueWrapperProps,
-};

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

@@ -1,110 +0,0 @@
-import { useState, useRef, Dispatch, SetStateAction, useEffect } from "react";
-import { Box } from "@mui/material";
-import {
-  hueFromColorFormats,
-  newColorFormatsFromHue,
-} from "@springmicro/utils/editor";
-import { ColorFormats } from "@springmicro/utils/types";
-import { ColorCursor } from "./color-cursor";
-
-const hueMax = 360;
-
-const calcPosFromHue = (hue: number, width: number) => {
-  return (width * hue) / hueMax;
-};
-
-const calcHueFromPos = (x: number, w: number) => {
-  return Math.round(Math.min(hueMax, Math.max(0, (hueMax * x) / w)));
-};
-
-export type ColorHueProps = {
-  width: number;
-  colorFormats: ColorFormats;
-  setColorFormats: Dispatch<SetStateAction<ColorFormats>>;
-};
-
-export function ColorHue({
-  width,
-  colorFormats,
-  setColorFormats,
-}: ColorHueProps) {
-  const height = 15;
-  const ref = useRef();
-  const [mouseIsDown, setMouseIsDown] = useState(false);
-  const [cursorPosition, setCursorPosition] = useState({
-    x: calcPosFromHue(hueFromColorFormats(colorFormats), width),
-    y: (height * 2) / 3,
-  });
-  const [rect, setRect] = useState<DOMRect>();
-
-  const updateHue = (x: number, y: number, w: number, h: number) => {
-    const newHue = calcHueFromPos(x, w);
-    setColorFormats(newColorFormatsFromHue(colorFormats, newHue));
-  };
-
-  useEffect(() => {
-    setCursorPosition({
-      x: calcPosFromHue(hueFromColorFormats(colorFormats), width),
-      y: cursorPosition.y,
-    });
-  }, [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;
-        updateHue(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)
-            updateHue(x, y, rect.width, rect.height);
-          }
-        }
-      }}
-      sx={{
-        position: "relative",
-        height,
-        width,
-        background: `linear-gradient(
-          to right,
-          rgba(255, 0, 0, 1) 0%,
-          rgba(255, 255, 0, 1) 17%,
-          rgba(0, 255, 0, 1) 34%,
-          rgba(0, 255, 255, 1) 51%,
-          rgba(0, 0, 255, 1) 68%,
-          rgba(255, 0, 255, 1) 85%,
-          rgba(255, 0, 0, 1) 100%
-        )`,
-        borderRadius: 1,
-      }}
-    >
-      <Box
-        sx={{
-          position: "absolute",
-          top: cursorPosition.y + "px",
-          left: cursorPosition.x + "px",
-          transform: "translate(-50%, -50%)",
-        }}
-      >
-        <ColorCursor
-          color={`hsl(${hueFromColorFormats(colorFormats)}, 100%, 50%)`}
-        />
-      </Box>
-    </Box>
-  );
-}

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

@@ -1,25 +0,0 @@
-import React from "react";
-import { StoryFn, Meta } from "@storybook/react";
-import { ColorPicker, ColorPickerProps } from "./color-picker";
-import { ColorProvider } from "../../../contexts/color-context";
-
-function ColorPickerWrapper(props: ColorPickerProps) {
-  return (
-    <ColorProvider initialColor={props.color}>
-      <ColorPicker />
-    </ColorProvider>
-  );
-}
-
-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 Picker",
-  component: ColorPickerWrapper,
-} as Meta<typeof ColorPickerWrapper>;
-
-export const Primary = {
-  args: { color: "green" } as ColorPickerProps,
-};

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

@@ -1,41 +0,0 @@
-import * as React from "react";
-import { Box } from "@mui/material";
-import { ColorGradient } from "./color-gradient";
-import { ColorHue } from "./color-hue";
-import { ColorFormatsView } from "./color-formats-view";
-import { ColorContext } from "../../../contexts/color-context";
-
-export type ColorPickerProps = {
-  color: string;
-};
-
-export function ColorPicker() {
-  const { colorFormats, setColorFormats } = React.useContext(ColorContext);
-  const width = 360;
-  const height = 250;
-
-  return (
-    <Box sx={{ display: "flex", flexDirection: "row", gap: 2 }}>
-      <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-        <ColorGradient
-          width={width}
-          height={height}
-          colorFormats={colorFormats}
-          setColorFormats={setColorFormats}
-        />
-        <ColorHue
-          width={width}
-          colorFormats={colorFormats}
-          setColorFormats={setColorFormats}
-        />
-      </Box>
-      <Box>
-        <ColorFormatsView
-          height={height}
-          colorFormats={colorFormats}
-          setColorFormats={setColorFormats}
-        />
-      </Box>
-    </Box>
-  );
-}

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

@@ -1,26 +0,0 @@
-import { ColorPopover, ColorPopoverProps } from "./color-popover";
-import React from "react";
-import { StoryFn, Meta } from "@storybook/react";
-import { Button } from "@mui/material";
-import { ColorProvider } from "../../../contexts/color-context";
-
-function ColorPopoverWrapper(props: ColorPopoverProps) {
-  return (
-    <ColorProvider initialColor="blue">
-      <ColorPopover {...props} />
-    </ColorProvider>
-  );
-}
-
-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 Popover",
-  component: ColorPopoverWrapper,
-} as Meta<typeof ColorPopoverWrapper>;
-
-export const Primary = {
-  args: { children: <Button>Pick Color</Button> } as ColorPopoverProps,
-};

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

@@ -1,58 +0,0 @@
-import * as React from "react";
-import { Popover, Box, BoxProps } from "@mui/material";
-import { ColorPicker } from "./color-picker";
-
-export type ColorPopoverProps = {
-  boxProps?: BoxProps;
-};
-
-export function ColorPopover({
-  children,
-  boxProps,
-}: React.PropsWithChildren<ColorPopoverProps>) {
-  const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
-
-  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const open = Boolean(anchorEl);
-  const id = open ? "simple-popover" : undefined;
-
-  return (
-    <>
-      <Box
-        {...boxProps}
-        sx={{
-          ...boxProps?.sx,
-          // "-webkit-appearance": "button",
-          cursor: "pointer",
-          // backgroundColor: "transparent",
-          // backgroundImage: "none",
-        }}
-        role="button"
-        // component="button"
-        aria-describedby={id}
-        onClick={handleClick}
-      >
-        {children}
-      </Box>
-      <Popover
-        id={id}
-        open={open}
-        anchorEl={anchorEl}
-        onClose={handleClose}
-        anchorOrigin={{
-          vertical: "top",
-          horizontal: "right",
-        }}
-      >
-        <ColorPicker />
-      </Popover>
-    </>
-  );
-}

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

@@ -1,16 +0,0 @@
-import { ColorSwatch, ColorSwatchProps } from "./color-swatch";
-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 Swatch",
-  component: ColorSwatch,
-} as Meta<typeof ColorSwatch>;
-
-export const Primary = {
-  args: { color: "blue" } as ColorSwatchProps,
-};

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

@@ -1,76 +0,0 @@
-import { Button, Popover, Typography, useTheme } from "@mui/material";
-import * as React from "react";
-import { colorConvert, isColor } from "@springmicro/utils/editor";
-
-export type ColorSwatchProps = {
-  color: string;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-};
-
-export function ColorSwatch(props: ColorSwatchProps) {
-  const theme = useTheme();
-  const { color, onClick } = props;
-  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
-
-  if (!isColor(color)) {
-    throw new Error(`Could not render color ${color}.`);
-  }
-
-  const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handlePopoverClose = () => {
-    setAnchorEl(null);
-  };
-
-  const open = Boolean(anchorEl);
-
-  return (
-    <>
-      <Button
-        aria-owns={open ? "mouse-over-popover" : undefined}
-        aria-haspopup="true"
-        onMouseEnter={handlePopoverOpen}
-        onMouseLeave={handlePopoverClose}
-        aria-label={`selected color: ${colorConvert(color, "hex")}`}
-        sx={{
-          backgroundColor: color,
-          width: 24,
-          height: 24,
-          minWidth: "unset",
-          padding: "unset",
-          borderRadius: 0.5,
-          "&:hover": {
-            backgroundColor: color,
-            // @ts-ignore
-            outline: `4px solid ${theme.palette.neutral["200"]}`,
-          },
-        }}
-        onClick={onClick}
-      ></Button>
-      <Popover
-        id="mouse-over-popover"
-        sx={{
-          pointerEvents: "none",
-        }}
-        open={open}
-        anchorEl={anchorEl}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "left",
-        }}
-        onClose={handlePopoverClose}
-        disableRestoreFocus
-      >
-        <Typography sx={{ p: 1 }} fontSize={12}>
-          {colorConvert(color, "hex")}
-        </Typography>
-      </Popover>
-    </>
-  );
-}

package/src/slate/components/color-picker/default-colors.ts

@@ -1,38 +0,0 @@
-export const defaultColors = [
-  "#000000",
-  "#e60000",
-  "#ff9900",
-  "#ffff00",
-  "#008a00",
-  "#0066cc",
-  "#9933ff",
-  "#ffffff",
-  "#f9fafc", // This is the color of the slate editor background, without this color it's hard to set the background color back to the paper color without using a tool to tell you the color of the element. I would rather offer a transparent option to solve this problem.
-  "#facccc",
-  "#ffebcc",
-  "#ffffcc",
-  "#cce8cc",
-  "#cce0f5",
-  "#ebd6ff",
-  "#bbbbbb",
-  "#f06666",
-  "#ffc266",
-  "#ffff66",
-  "#66b966",
-  "#66a3e0",
-  "#c285ff",
-  "#888888",
-  "#a10000",
-  "#b26b00",
-  "#b2b200",
-  "#006100",
-  "#0047b2",
-  "#6b24b2",
-  "#444444",
-  "#5c0000",
-  "#663d00",
-  "#666600",
-  "#003700",
-  "#002966",
-  "#3d1466",
-];

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

@@ -1,128 +0,0 @@
-import * as React from "react";
-import { BaseEditor, BaseSelection, Location, Transforms } from "slate";
-import { ColorProvider } from "../../../contexts/color-context";
-import { ColorPopover } from "./color-popover";
-import { activeMark, addMarkData, defaultMarkData } from "../../utils";
-import Icon from "../../common/icon";
-import Button from "../../common/button";
-import { ColorSwatch } from "./color-swatch";
-import { Box, Menu } from "@mui/material";
-import { defaultColors } from "./default-colors";
-import { CustomEditor } from "../../custom-types";
-
-export type SlateColorButtonProps = {
-  format: "bgcolor" | "color";
-  editor: CustomEditor;
-};
-
-export function SlateColorButton({ format, editor }: SlateColorButtonProps) {
-  const [anchorEl, setAnchorEl] = React.useState<null | Element>(null);
-  const open = Boolean(anchorEl);
-  const id = `${format}-menu-button`;
-  const [selection, setSelection] = React.useState<BaseSelection | Location>();
-  const initialColor =
-    format === "bgcolor"
-      ? defaultMarkData["bgColor"]
-      : defaultMarkData["color"];
-
-  React.useEffect(() => {
-    if (editor.selection) {
-      setSelection(editor.selection);
-    }
-  }, [editor.selection]);
-
-  const getCurrentColor = () => {
-    if (!selection) return initialColor;
-    Transforms.select(editor, selection!);
-    return activeMark(editor, format)[format] ?? initialColor;
-  };
-
-  const handleClick = (event?: React.MouseEvent<HTMLButtonElement>) => {
-    const el = event?.currentTarget
-      ? event.currentTarget
-      : document.querySelector(`#${id}`);
-    setSelection(editor.selection);
-    if (anchorEl) setAnchorEl(null);
-    else if (el) setAnchorEl(el);
-  };
-
-  const handleSwatchClick = (value: string) => {
-    if (selection === undefined) return;
-    Transforms.select(editor, selection!);
-    console.log(editor.selection, format, value);
-    addMarkData(editor, {
-      format: format,
-      value: value,
-    });
-    if (anchorEl) setAnchorEl(null);
-  };
-
-  return (
-    <>
-      <Button
-        id={id}
-        aria-controls={open ? "basic-menu" : undefined}
-        aria-haspopup="true"
-        aria-expanded={open ? "true" : undefined}
-        onClick={handleClick}
-        format="link"
-        style={{ backgroundColor: "#f9fafc" }}
-      >
-        <Icon icon={format} />
-      </Button>
-      <Menu
-        id="basic-menu"
-        anchorEl={anchorEl}
-        open={open}
-        onClose={() => handleClick()}
-        MenuListProps={{
-          "aria-labelledby": id,
-        }}
-      >
-        <Box
-          sx={{
-            display: "grid",
-            gap: 1,
-            gridTemplateColumns: "repeat(6, 1fr)",
-            gridTemplateRows: "repeat(6, 1fr)",
-            p: 1,
-          }}
-        >
-          {defaultColors.map((c) => (
-            <ColorSwatch
-              onClick={(e) => handleSwatchClick(c)}
-              color={c}
-              key={c}
-            />
-          ))}
-        </Box>
-        <ColorProvider
-          initialColor={initialColor}
-          colorChangeCallback={(color) => {
-            if (color !== getCurrentColor()) {
-              addMarkData(editor, {
-                format: format,
-                value: color,
-              });
-            }
-          }}
-        >
-          <ColorPopover>
-            <Box sx={{ px: 1 }}>
-              <Icon icon="colorize" /> Custom Color{" "}
-              <Box
-                component="span"
-                sx={{
-                  // background: getCurrentColor(),
-                  height: 8,
-                  width: 8,
-                  display: "inline-block",
-                }}
-              ></Box>
-            </Box>
-          </ColorPopover>
-        </ColorProvider>
-      </Menu>{" "}
-    </>
-  );
-}

package/src/slate/components/embed/Embed.jsx

@@ -1,96 +0,0 @@
-import React, { useRef, useState } from "react";
-import Button from "../../common/button";
-import Icon from "../../common/icon";
-import { isBlockActive } from "../../utils";
-import usePopup from "../../utils/customHooks/usePopup";
-import { insertEmbed } from "../../utils/embed";
-import { Transforms } from "slate";
-import { ReactEditor } from "slate-react";
-
-const Embed = ({ editor, format }) => {
-  const urlInputRef = useRef();
-  const [showInput, setShowInput] = usePopup(urlInputRef);
-  const [formData, setFormData] = useState({
-    url: "",
-    alt: "",
-  });
-  const [selection, setSelection] = useState();
-  const handleButtonClick = (e) => {
-    e.preventDefault();
-    setSelection(editor.selection);
-    selection && ReactEditor.focus(editor);
-
-    setShowInput((prev) => !prev);
-  };
-  const handleFormSubmit = (e) => {
-    e.preventDefault();
-
-    selection && Transforms.select(editor, selection);
-    selection && ReactEditor.focus(editor);
-
-    insertEmbed(editor, { ...formData }, format);
-    setShowInput(false);
-    setFormData({
-      url: "",
-      alt: "",
-    });
-  };
-  const handleImageUpload = () => {
-    setShowInput(false);
-  };
-  return (
-    <div ref={urlInputRef} className="popup-wrapper">
-      <Button
-        active={isBlockActive(editor, format)}
-        style={{
-          border: showInput ? "1px solid lightgray" : "",
-          borderBottom: "none",
-        }}
-        format={format}
-        onClick={handleButtonClick}
-      >
-        <Icon icon={format} />
-      </Button>
-      {showInput && (
-        <div className="popup">
-          {format === "image" && (
-            <div>
-              <div
-                style={{ display: "flex", gap: "10px" }}
-                onClick={handleImageUpload}
-              >
-                <Icon icon="upload" />
-                <span>Upload</span>
-              </div>
-              <p style={{ textAlign: "center", opacity: "0.7", width: "100%" }}>
-                OR
-              </p>
-            </div>
-          )}
-          <form onSubmit={handleFormSubmit}>
-            <input
-              type="text"
-              placeholder="Enter url"
-              value={formData.url}
-              onChange={(e) =>
-                setFormData((prev) => ({ ...prev, url: e.target.value }))
-              }
-            />
-            <input
-              type="text"
-              placeholder="Enter alt"
-              value={formData.alt}
-              onChange={(e) =>
-                setFormData((prev) => ({ ...prev, alt: e.target.value }))
-              }
-            />
-
-            <Button type="submit">Save</Button>
-          </form>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Embed;