@springmicro/rte 0.1.3

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

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

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

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

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

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

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

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

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

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

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

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