@springmicro/rte 0.1.3

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

@@ -0,0 +1,45 @@
+import React from "react";
+import { useSelected, useFocused } from "slate-react";
+import Icon from "../../common/icon";
+import useResize from "../../utils/customHooks/useResize";
+
+const Image = ({ attributes, element, children }) => {
+  const { url, alt } = element;
+  const selected = useSelected();
+  const focused = useFocused();
+  const [size, onMouseDown] = useResize();
+
+  return (
+    <div
+      {...attributes}
+      className="embed"
+      style={{
+        display: "flex",
+        boxShadow: selected && focused && "0 0 3px 3px lightgray",
+      }}
+      {...element.attr}
+    >
+      <div
+        contentEditable={false}
+        style={{ width: `${size.width}px`, height: `${size.height}px` }}
+      >
+        <img alt={alt} src={url} />
+        {selected && (
+          <button
+            onMouseDown={onMouseDown}
+            style={{
+              width: "15px",
+              height: "15px",
+              opacity: 1,
+              background: "transparent",
+            }}
+          >
+            <Icon icon="resize" />
+          </button>
+        )}
+      </div>
+      {children}
+    </div>
+  );
+};
+export default Image;

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

@@ -0,0 +1,65 @@
+import React, { useEffect } from "react";
+import { useSelected, useFocused } from "slate-react";
+import Icon from "../../common/icon";
+import useResize from "../../utils/customHooks/useResize";
+// import "./Video.css";
+
+const Video = ({ attributes, element, children }) => {
+  const { url, alt } = element;
+  const [size, onMouseDown, resizing] = useResize();
+  const selected = useSelected();
+  const focused = useFocused();
+  return (
+    <div
+      {...attributes}
+      className="embed"
+      style={{
+        display: "flex",
+        boxShadow: selected && focused && "0 0 3px 3px lightgray",
+      }}
+      {...element.attr}
+    >
+      <div
+        contentEditable={false}
+        style={{ width: `${size.width}px`, height: `${size.height}px` }}
+      >
+        {
+          // The iframe reloads on each re-render and hence it stutters and the document doesn't detect mouse-up event leading to unwanted behaviour
+          // So during resize replace the iframe with a simple div
+          resizing ? (
+            <div
+              style={{
+                width: "100%",
+                height: "100%",
+                border: "2px dashed black",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <Icon icon="videoPlayer" />
+            </div>
+          ) : (
+            <iframe src={url} frameBorder="0" title={alt} />
+          )
+        }
+
+        {selected && (
+          <button
+            onMouseDown={onMouseDown}
+            style={{
+              width: "15px",
+              height: "15px",
+              opacity: 1,
+              background: "transparent",
+            }}
+          >
+            <Icon icon="resize" />
+          </button>
+        )}
+      </div>
+      {children}
+    </div>
+  );
+};
+export default Video;

package/src/slate/components/equation/Equation.jsx

@@ -0,0 +1,19 @@
+import React from "react"
+import { useFocused, useSelected, useSlateStatic } from "slate-react"
+import { InlineMath, BlockMath } from "react-katex"
+
+const Equation = ({ attributes, element, children }) => {
+  const { inline, math } = element
+  return (
+    <div className={inline ? "equation-inline" : ""}>
+      <span {...attributes} {...element.attr}>
+        <span contentEditable={false}>
+          {inline ? <InlineMath math={math} /> : <BlockMath math={math} />}
+        </span>
+        {children}
+      </span>
+    </div>
+  )
+}
+
+export default Equation

package/src/slate/components/equation/EquationButton.jsx

@@ -0,0 +1,68 @@
+import { useRef, useState } from "react";
+import Button from "../../common/button";
+import Icon from "../../common/icon";
+import usePopup from "../../utils/customHooks/usePopup";
+import { insertEquation } from "../../utils/equation";
+import { Transforms } from "slate";
+
+const EquationButton = ({ editor }) => {
+  const equationInputRef = useRef(null);
+  const [showInput, setShowInput] = usePopup(equationInputRef);
+  const [math, setMath] = useState("");
+  const [displayInline, setDisplayInline] = useState(false);
+  const [selection, setSelection] = useState();
+
+  const toggleButton = () => {
+    setShowInput((prev) => !prev);
+    setDisplayInline(false);
+    setSelection(editor.selection);
+  };
+
+  const handleInputChange = ({ target }) => {
+    if (target.type === "checkbox") {
+      setDisplayInline((prev) => !prev);
+    } else {
+      setMath(target.value);
+    }
+  };
+
+  const handleAddEquation = () => {
+    if (!math) return;
+    selection && Transforms.select(editor, selection);
+    insertEquation(editor, math, displayInline);
+    console.log("btn click");
+    setShowInput(false);
+  };
+  return (
+    <div ref={equationInputRef} className="popup-wrapper">
+      <Button format="equation" onClick={toggleButton}>
+        <Icon icon="equation" />
+      </Button>
+      {showInput && (
+        <div className="popup">
+          <div style={{ display: "flex", gap: "5px" }}>
+            <input
+              type="text"
+              value={math}
+              onChange={handleInputChange}
+              placeholder="Enter formula"
+            />
+            <div onClick={handleAddEquation}>
+              <Icon icon="add" />
+            </div>
+          </div>
+          <label>
+            <input
+              type="checkbox"
+              checked={displayInline}
+              onChange={handleInputChange}
+            />
+            Inline Equation
+          </label>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default EquationButton;

package/src/slate/components/id/Id.jsx

@@ -0,0 +1,57 @@
+import { Range, Editor, Transforms } from "slate";
+import React, { useRef, useState } from "react";
+import Button from "../../common/button";
+import Icon from "../../common/icon";
+import usePopup from "../../utils/customHooks/usePopup";
+const Id = ({ editor }) => {
+  const idInputRef = useRef(null);
+  const [showInput, setShowInput] = usePopup(idInputRef);
+  const [selection, setSelection] = useState();
+  const [id, setId] = useState("");
+  const toggleId = () => {
+    setSelection(editor.selection);
+    setShowInput((prev) => !prev);
+  };
+
+  const handleId = () => {
+    // selection && Transforms.select(editor,selection);
+    if (!selection || !id) return;
+    Transforms.setNodes(
+      editor,
+      {
+        attr: { id },
+      },
+      {
+        at: selection,
+      }
+    );
+    setShowInput(false);
+    setId("");
+  };
+  return (
+    <div className="popup-wrapper" ref={idInputRef}>
+      <Button
+        className={showInput ? "clicked" : ""}
+        format={"add Id"}
+        onClick={toggleId}
+      >
+        <Icon icon="addId" />
+      </Button>
+      {showInput && (
+        <div className="popup" style={{ display: "flex", gap: "4px" }}>
+          <input
+            type="text"
+            placeholder="Enter an unique ID"
+            value={id}
+            onChange={(e) => setId(e.target.value)}
+          />
+          <div onClick={handleId}>
+            <Icon icon="add" />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Id;

package/src/slate/components/image/image.stories.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+import { StoryFn, Meta } from "@storybook/react";
+import Image, { ImageProps } from "./image";
+
+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/Image",
+  component: Image,
+} as Meta<typeof Image>;
+
+export const Primary = {
+  args: {} as ImageProps,
+};

package/src/slate/components/image/image.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { BaseEditor, Transforms } from "slate";
+import {
+  ReactEditor,
+  useSlateStatic,
+  useSelected,
+  useFocused,
+} from "slate-react";
+import { ImageElement } from "./types";
+import Button from "../../common/button";
+import Icon from "../../common/icon";
+
+export type ImageProps = {
+  attributes: any;
+  children: any;
+  element: any;
+};
+
+const Image = ({ attributes, children, element }: ImageProps) => {
+  const editor = useSlateStatic();
+  const path = ReactEditor.findPath(editor, element);
+
+  const selected = useSelected();
+  const focused = useFocused();
+  return (
+    <div {...attributes}>
+      {children}
+      <div
+        contentEditable={false}
+        style={{
+          position: "relative",
+        }}
+      >
+        <img
+          src={element.url}
+          style={{
+            display: "block",
+            maxWidth: "100%",
+            maxHeight: "20em",
+            margin: "0 auto",
+            boxShadow: selected && focused ? "0 0 0 3px #B4D5FF" : "none",
+          }}
+        />
+        <Button
+          active
+          onClick={() => Transforms.removeNodes(editor, { at: path })}
+          sx={{
+            display: selected && focused ? "inline" : "none",
+            position: "absolute",
+            top: "0.5em",
+            left: "0.5em",
+            backgroundColor: "white",
+          }}
+        >
+          <Icon icon="image" />
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default Image;

package/src/slate/components/image/insert-image-button.stories.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+
+import { Box } from "@mui/material";
+import { StoryFn, Meta } from "@storybook/react";
+import {
+  InsertImageButtonProps,
+  InsertImageButton,
+  Element,
+} from "./insert-image-button";
+import { Descendant, createEditor } from "slate";
+import { Slate, Editable } from "slate-react";
+import withImages from "../../plugins/withImages";
+import { withReact } from "slate-react";
+import { allToolbarGroups } from "../../toolbar/toolbar-groups";
+import Toolbar from "../../toolbar";
+
+const initialValue: Descendant[] = [
+  {
+    type: "p",
+    children: [
+      {
+        text: "In addition to nodes that contain editable text, you can also create other types of nodes, like images or videos.",
+      },
+    ],
+  },
+  {
+    type: "image",
+    url: "https://source.unsplash.com/kFrdX5IeQzI",
+    children: [{ text: "" }],
+  },
+  {
+    type: "p",
+    children: [
+      {
+        text: "This example shows images in action. It features two ways to add images. You can either add an image via the toolbar icon above, or if you want in on a little secret, copy an image URL to your clipboard and paste it anywhere in the editor!",
+      },
+    ],
+  },
+  {
+    type: "p",
+    children: [
+      {
+        text: "You can delete images with the cross in the top left. Try deleting this sheep:",
+      },
+    ],
+  },
+  {
+    type: "image",
+    url: "https://source.unsplash.com/zOwZKwZOZq8",
+    children: [{ text: "" }],
+  },
+];
+
+function Wrapper() {
+  const editor = React.useMemo(() => withImages(withReact(createEditor())), []);
+  return (
+    <Slate initialValue={initialValue} editor={editor}>
+      <Box>
+        <InsertImageButton editor={editor} />
+      </Box>
+      <Box sx={{ minHeight: 400 }}>
+        <Editable
+          placeholder="Write something"
+          spellCheck={true}
+          renderElement={(props) => <Element {...props} />}
+        />
+      </Box>
+    </Slate>
+  );
+}
+
+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/Insert Image Button",
+  component: Wrapper,
+} as Meta<typeof Wrapper>;
+
+export const Primary = {
+  args: {} as InsertImageButtonProps,
+};

package/src/slate/components/image/insert-image-button.tsx

@@ -0,0 +1,132 @@
+import * as React from "react";
+import { BaseEditor, BaseSelection, Location, Editor, Transforms } from "slate";
+import { ImageElement } from "./types";
+import Image from "./image";
+import Button from "../../common/button";
+import { isImageUrl } from "../../plugins/withImages";
+import Icon from "../../common/icon";
+import { useRef, useState, MouseEvent, ChangeEvent, FormEvent } from "react";
+import { Box, Menu, MenuItem, TextField, Typography } from "@mui/material";
+import { isBlockActive } from "../../utils";
+import { IconButton, FormControlLabel, Checkbox } from "@mui/material";
+import usePopup from "../../utils/customHooks/usePopup";
+import { useShortcut } from "../../toolbar/shortcuts";
+import { CustomEditor } from "../../custom-types";
+
+const insertImage = (editor: Editor, url: string) => {
+  const text = { text: "" };
+  const image: ImageElement = { type: "image", url, children: [text] };
+  Transforms.insertNodes(editor, image);
+};
+
+export const Element = (props: any) => {
+  const { attributes, children, element } = props;
+
+  switch (element.type) {
+    case "image":
+      return <Image {...props} />;
+    default:
+      return <p {...attributes}>{children}</p>;
+  }
+};
+
+export type InsertImageButtonProps = {
+  editor: CustomEditor;
+};
+
+export function InsertImageButton(props: InsertImageButtonProps) {
+  const { editor } = props;
+  const [anchorEl, setAnchorEl] = useState<null | Element>(null);
+  const open = Boolean(anchorEl);
+  const [url, setUrl] = useState("");
+  const [selection, setSelection] = useState<BaseSelection | Location>();
+
+  const handleClick = (event?: MouseEvent<HTMLButtonElement>) => {
+    const el = event?.currentTarget
+      ? event.currentTarget
+      : document.querySelector("#image-menu-button");
+    setSelection(editor.selection);
+    if (anchorEl) setAnchorEl(null);
+    else if (el) setAnchorEl(el);
+  };
+
+  // const handleClose = () => {
+  //   setAnchorEl(null)
+  // }
+
+  const handleInsertImage = (e: FormEvent) => {
+    e.preventDefault();
+    if (selection === undefined) return;
+    Transforms.select(editor, selection!);
+    insertImage(editor, url);
+    setUrl("");
+    handleClick();
+  };
+
+  const handleInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
+    setUrl(target?.value);
+  };
+
+  useShortcut("image", () => handleClick());
+  return (
+    // <Button
+    //   onClick={() => {
+    //     const url = window.prompt("Enter the URL of the image:");
+    //     if (url && !isImageUrl(url)) {
+    //       alert("URL is not an image");
+    //       return;
+    //     }
+    //     url && insertImage(editor, url);
+    //   }}
+    // >
+    //   <Icon icon="image" />
+    // </Button>
+    <>
+      <Button
+        id="image-menu-button"
+        aria-controls={open ? "basic-menu" : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? "true" : undefined}
+        onClick={handleClick}
+        format="image"
+      >
+        <Icon icon="image" />
+      </Button>
+      <Menu
+        id="basic-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={() => handleClick()}
+        MenuListProps={{
+          "aria-labelledby": "image-menu-button",
+        }}
+      >
+        <form onSubmit={handleInsertImage}>
+          <Box sx={{ display: "flex", gap: 1, px: 1 }}>
+            <TextField
+              aria-label="url"
+              type="text"
+              placeholder="https://ex.com/img.jpeg"
+              value={url}
+              onChange={handleInputChange}
+              size="small"
+            />
+            <IconButton
+              type="submit"
+              aria-label="add image"
+              size="small"
+              disabled={!isImageUrl(url)}
+            >
+              <Icon icon="add" />
+            </IconButton>
+          </Box>
+          {!isImageUrl(url) && url.length >= 1 && (
+            <Typography color="error" variant="body1" sx={{ m: 2 }}>
+              URL is not an image
+            </Typography>
+          )}
+        </form>
+      </Menu>
+    </>
+  );
+}

package/src/slate/components/image/types.ts

@@ -0,0 +1,9 @@
+export type ImageElement = {
+  type: "image";
+  url: string;
+  children: EmptyText[];
+};
+
+export type EmptyText = {
+  text: string;
+};

package/src/slate/components/link/Link.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { useFocused, useSelected, useSlateStatic } from "slate-react";
+
+import { removeLink } from "../../utils/link";
+import { Box } from "@mui/material";
+import Icon from "../../common/icon";
+
+const Link = ({ attributes, element, children }) => {
+  const editor = useSlateStatic();
+  const selected = useSelected();
+  const focused = useFocused();
+  return (
+    <Box
+      sx={{
+        display: "inline",
+        position: "relative",
+      }}
+    >
+      <a
+        href={element.href}
+        {...attributes}
+        {...element.attr}
+        target={element.target}
+      >
+        {children}
+      </a>
+      {selected && focused && (
+        <Box
+          sx={{
+            position: "absolute",
+            left: 0,
+            display: "flex",
+            alignItems: "center",
+            backgroundColor: "white",
+            padding: 1,
+            gap: 4,
+            borderRadius: 1,
+            border: "1px solid lightgray",
+            width: "fit-content",
+            zIndex: 1,
+          }}
+          contentEditable={false}
+        >
+          <a href={element.href} target={element.target}>
+            {element.href}
+          </a>
+          <button onClick={() => removeLink(editor)}>
+            <Icon icon="unlink" />
+          </button>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default Link;