@meta-1/editor 0.0.27

package/src/editor/extension/heading/index.ts

@@ -0,0 +1,13 @@
+import { mergeAttributes } from "@tiptap/core";
+import type { Level } from "@tiptap/extension-heading";
+import TiptapHeading from "@tiptap/extension-heading";
+
+export const Heading = TiptapHeading.extend({
+  renderHTML({ node, HTMLAttributes }) {
+    const nodeLevel = Number.parseInt(node.attrs.level, 10) as Level;
+    const hasLevel = this.options.levels.includes(nodeLevel);
+    const level = hasLevel ? nodeLevel : this.options.levels[0];
+
+    return [`h${level}`, mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+});

package/src/editor/extension/horizontal-rule/HorizontalRule.ts

@@ -0,0 +1,10 @@
+import { mergeAttributes } from "@tiptap/core";
+import TiptapHorizontalRule from "@tiptap/extension-horizontal-rule";
+
+export const HorizontalRule = TiptapHorizontalRule.extend({
+  renderHTML(props) {
+    return ["div", mergeAttributes(props.HTMLAttributes, { "data-type": this.name }), ["hr"]];
+  },
+});
+
+export default HorizontalRule;

package/src/editor/extension/horizontal-rule/index.ts

@@ -0,0 +1 @@
+export { HorizontalRule } from "./HorizontalRule";

package/src/editor/extension/image/index.ts

@@ -0,0 +1,5 @@
+import { Image as BaseImage } from "@tiptap/extension-image";
+
+export const Image = BaseImage.extend({
+  group: "block",
+});

package/src/editor/extension/image-block/ImageBlock.ts

@@ -0,0 +1,103 @@
+import { mergeAttributes, type Range } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+
+import { Image } from "../image";
+import { ImageBlockView } from "./components/ImageBlockView";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    imageBlock: {
+      setImageBlock: (attributes: { src: string }) => ReturnType;
+      setImageBlockAt: (attributes: { src: string; pos: number | Range }) => ReturnType;
+      setImageBlockAlign: (align: "left" | "center" | "right") => ReturnType;
+      setImageBlockWidth: (width: number) => ReturnType;
+    };
+  }
+}
+
+export const ImageBlock = Image.extend({
+  name: "imageBlock",
+
+  group: "block",
+
+  defining: true,
+
+  isolating: true,
+
+  addAttributes() {
+    return {
+      src: {
+        default: "",
+        parseHTML: (element) => element.getAttribute("src"),
+        renderHTML: (attributes) => ({
+          src: attributes.src,
+        }),
+      },
+      width: {
+        default: "100%",
+        parseHTML: (element) => element.getAttribute("data-width"),
+        renderHTML: (attributes) => ({
+          "data-width": attributes.width,
+        }),
+      },
+      align: {
+        default: "center",
+        parseHTML: (element) => element.getAttribute("data-align"),
+        renderHTML: (attributes) => ({
+          "data-align": attributes.align,
+        }),
+      },
+      alt: {
+        default: undefined,
+        parseHTML: (element) => element.getAttribute("alt"),
+        renderHTML: (attributes) => ({
+          alt: attributes.alt,
+        }),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "img",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["img", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+  },
+
+  addCommands() {
+    return {
+      setImageBlock:
+        (attrs) =>
+        ({ commands }) => {
+          return commands.insertContent({ type: "imageBlock", attrs: { src: attrs.src } });
+        },
+
+      setImageBlockAt:
+        (attrs) =>
+        ({ commands }) => {
+          return commands.insertContentAt(attrs.pos, { type: "imageBlock", attrs: { src: attrs.src } });
+        },
+
+      setImageBlockAlign:
+        (align) =>
+        ({ commands }) =>
+          commands.updateAttributes("imageBlock", { align }),
+
+      setImageBlockWidth:
+        (width) =>
+        ({ commands }) =>
+          commands.updateAttributes("imageBlock", { width: `${Math.max(0, Math.min(100, width))}%` }),
+    };
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(ImageBlockView);
+  },
+});
+
+export default ImageBlock;

package/src/editor/extension/image-block/components/ImageBlockMenu.tsx

@@ -0,0 +1,100 @@
+import { type ReactElement, useCallback, useRef } from "react";
+import { BubbleMenu as BaseBubbleMenu, useEditorState } from "@tiptap/react";
+import { type Instance, sticky } from "tippy.js";
+import { v4 as uuid } from "uuid";
+
+import type { MenuProps } from "../../../menus/types";
+import { Icon } from "../../../ui/Icon";
+import { Toolbar } from "../../../ui/Toolbar";
+import { getRenderContainer } from "../../../utils";
+import { i18n } from "../../../utils/locale";
+import { ImageBlockWidth } from "./ImageBlockWidth";
+
+export const ImageBlockMenu = ({ editor, appendTo }: MenuProps): ReactElement => {
+  const menuRef = useRef<HTMLDivElement>(null);
+  const tippyInstance = useRef<Instance | null>(null);
+
+  const getReferenceClientRect = useCallback(() => {
+    const renderContainer = getRenderContainer(editor, "node-imageBlock");
+    const rect = renderContainer?.getBoundingClientRect() || new DOMRect(-1000, -1000, 0, 0);
+
+    return rect;
+  }, [editor]);
+
+  const shouldShow = useCallback(() => {
+    const isActive = editor.isActive("imageBlock");
+
+    return isActive;
+  }, [editor]);
+
+  const onAlignImageLeft = useCallback(() => {
+    editor.chain().focus(undefined, { scrollIntoView: false }).setImageBlockAlign("left").run();
+  }, [editor]);
+
+  const onAlignImageCenter = useCallback(() => {
+    editor.chain().focus(undefined, { scrollIntoView: false }).setImageBlockAlign("center").run();
+  }, [editor]);
+
+  const onAlignImageRight = useCallback(() => {
+    editor.chain().focus(undefined, { scrollIntoView: false }).setImageBlockAlign("right").run();
+  }, [editor]);
+
+  const onWidthChange = useCallback(
+    (value: number) => {
+      editor.chain().focus(undefined, { scrollIntoView: false }).setImageBlockWidth(value).run();
+    },
+    [editor],
+  );
+  const { isImageCenter, isImageLeft, isImageRight, width } = useEditorState({
+    editor,
+    selector: (ctx) => {
+      return {
+        isImageLeft: ctx.editor.isActive("imageBlock", { align: "left" }),
+        isImageCenter: ctx.editor.isActive("imageBlock", { align: "center" }),
+        isImageRight: ctx.editor.isActive("imageBlock", { align: "right" }),
+        width: Number.parseInt(ctx.editor.getAttributes("imageBlock")?.width || 0, 10),
+      };
+    },
+  });
+
+  return (
+    <BaseBubbleMenu
+      editor={editor}
+      pluginKey={`imageBlockMenu-${uuid()}`}
+      shouldShow={shouldShow}
+      tippyOptions={{
+        offset: [0, 8],
+        zIndex: 40,
+        popperOptions: {
+          modifiers: [{ name: "flip", enabled: false }],
+        },
+        getReferenceClientRect,
+        onCreate: (instance: Instance) => {
+          tippyInstance.current = instance;
+        },
+        appendTo: () => {
+          return appendTo?.current;
+        },
+        plugins: [sticky],
+        sticky: "popper",
+      }}
+      updateDelay={0}
+    >
+      <Toolbar.Wrapper ref={menuRef} shouldShowContent={shouldShow()}>
+        <Toolbar.Button active={isImageLeft} onClick={onAlignImageLeft} tooltip={i18n("imageBlock.align.left")}>
+          <Icon name="AlignHorizontalDistributeStart" />
+        </Toolbar.Button>
+        <Toolbar.Button active={isImageCenter} onClick={onAlignImageCenter} tooltip={i18n("imageBlock.align.center")}>
+          <Icon name="AlignHorizontalDistributeCenter" />
+        </Toolbar.Button>
+        <Toolbar.Button active={isImageRight} onClick={onAlignImageRight} tooltip={i18n("imageBlock.align.right")}>
+          <Icon name="AlignHorizontalDistributeEnd" />
+        </Toolbar.Button>
+        <Toolbar.Divider />
+        <ImageBlockWidth onChange={onWidthChange} value={width} />
+      </Toolbar.Wrapper>
+    </BaseBubbleMenu>
+  );
+};
+
+export default ImageBlockMenu;

package/src/editor/extension/image-block/components/ImageBlockView.tsx

@@ -0,0 +1,47 @@
+import { useCallback, useRef } from "react";
+import type { Node } from "@tiptap/pm/model";
+import { type Editor, NodeViewWrapper } from "@tiptap/react";
+import classNames from "classnames";
+
+interface ImageBlockViewProps {
+  editor: Editor;
+  getPos: () => number;
+  node: Node;
+  updateAttributes: (attrs: Record<string, string>) => void;
+  // biome-ignore lint/suspicious/noExplicitAny: <HTMLAttributes>
+  HTMLAttributes: Record<string, any>;
+}
+
+export const ImageBlockView = (props: ImageBlockViewProps) => {
+  const { editor, getPos, node } = props as ImageBlockViewProps & {
+    node: Node & {
+      attrs: {
+        src: string;
+      };
+    };
+  };
+  const imageWrapperRef = useRef<HTMLDivElement>(null);
+  const { src } = node.attrs;
+
+  const wrapperClassName = classNames(
+    node.attrs.align === "left" ? "ml-0" : "ml-auto",
+    node.attrs.align === "right" ? "mr-0" : "mr-auto",
+    node.attrs.align === "center" && "mx-auto",
+  );
+
+  const onClick = useCallback(() => {
+    editor.commands.setNodeSelection(getPos());
+  }, [getPos, editor.commands]);
+
+  return (
+    <NodeViewWrapper {...props.HTMLAttributes}>
+      <div className={wrapperClassName} style={{ width: node.attrs.width }}>
+        <div contentEditable={false} ref={imageWrapperRef}>
+          <img alt="" className="block" onClick={onClick} src={src} />
+        </div>
+      </div>
+    </NodeViewWrapper>
+  );
+};
+
+export default ImageBlockView;

package/src/editor/extension/image-block/components/ImageBlockWidth.tsx

@@ -0,0 +1,40 @@
+import { type ChangeEvent, memo, useCallback, useEffect, useState } from "react";
+
+export type ImageBlockWidthProps = {
+  onChange: (value: number) => void;
+  value: number;
+};
+
+export const ImageBlockWidth = memo(({ onChange, value }: ImageBlockWidthProps) => {
+  const [currentValue, setCurrentValue] = useState(value);
+
+  useEffect(() => {
+    setCurrentValue(value);
+  }, [value]);
+
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      const nextValue = Number.parseInt(e.target.value, 10);
+      onChange(nextValue);
+      setCurrentValue(nextValue);
+    },
+    [onChange],
+  );
+
+  return (
+    <div className="flex items-center gap-2">
+      <input
+        className="h-2 appearance-none rounded border-0 bg-neutral-200 fill-neutral-300"
+        max="100"
+        min="25"
+        onChange={handleChange}
+        step="25"
+        type="range"
+        value={currentValue}
+      />
+      <span className="select-none font-semibold text-neutral-500 text-xs">{value}%</span>
+    </div>
+  );
+});
+
+ImageBlockWidth.displayName = "ImageBlockWidth";

package/src/editor/extension/image-block/index.ts

@@ -0,0 +1 @@
+export { ImageBlock } from "./ImageBlock";

package/src/editor/extension/image-upload/ImageUpload.ts

@@ -0,0 +1,58 @@
+import { Node, ReactNodeViewRenderer } from "@tiptap/react";
+
+import { ImageUpload as ImageUploadComponent } from "./view/ImageUpload";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    imageUpload: {
+      setImageUpload: () => ReturnType;
+    };
+  }
+}
+
+export type UploadImageFunction = (file: File) => Promise<string>;
+
+export const ImageUpload = Node.create<{
+  uploadImage?: UploadImageFunction;
+}>({
+  name: "imageUpload",
+
+  isolating: true,
+
+  defining: true,
+
+  group: "block",
+
+  draggable: true,
+
+  selectable: true,
+
+  inline: false,
+
+  parseHTML() {
+    return [
+      {
+        tag: `div[data-type="${this.name}"]`,
+      },
+    ];
+  },
+
+  renderHTML() {
+    return ["div", { "data-type": this.name }];
+  },
+
+  addCommands() {
+    return {
+      setImageUpload:
+        () =>
+        ({ commands }) =>
+          commands.insertContent(`<div data-type="${this.name}"></div>`),
+    };
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(ImageUploadComponent);
+  },
+});
+
+export default ImageUpload;

package/src/editor/extension/image-upload/index.ts

@@ -0,0 +1 @@
+export { ImageUpload } from "./ImageUpload";

package/src/editor/extension/image-upload/view/ImageUpload.tsx

@@ -0,0 +1,27 @@
+import { type ComponentType, useCallback } from "react";
+import { type NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+
+import { ImageUploader } from "./ImageUploader";
+
+export const ImageUpload: ComponentType<NodeViewProps> = (props) => {
+  const { getPos, editor, extension } = props;
+  const { uploadImage } = extension?.options || {};
+  const onUpload = useCallback(
+    (url: string) => {
+      if (url) {
+        editor.chain().setImageBlock({ src: url }).deleteRange({ from: getPos(), to: getPos() }).focus().run();
+      }
+    },
+    [getPos, editor],
+  );
+
+  return (
+    <NodeViewWrapper {...props.HTMLAttributes}>
+      <div className="m-0 p-0" data-drag-handle>
+        <ImageUploader onUpload={onUpload} uploadImage={uploadImage} />
+      </div>
+    </NodeViewWrapper>
+  );
+};
+
+export default ImageUpload;

package/src/editor/extension/image-upload/view/ImageUploader.tsx

@@ -0,0 +1,64 @@
+import { type ChangeEvent, useCallback } from "react";
+import cn from "classnames";
+
+import { Button } from "../../../ui/Button";
+import { Icon } from "../../../ui/Icon";
+import { Spinner } from "../../../ui/Spinner";
+import { i18n } from "../../../utils/locale";
+import { type UseUploaderProps, useDropZone, useFileUpload, useUploader } from "./hooks";
+
+export const ImageUploader = ({ onUpload, uploadImage }: UseUploaderProps) => {
+  const { loading, uploadFile } = useUploader({ onUpload, uploadImage });
+  const { handleUploadClick, ref } = useFileUpload();
+  const { draggedInside, onDrop, onDragEnter, onDragLeave } = useDropZone({ uploader: uploadFile });
+
+  const onFileChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => (e.target.files ? uploadFile(e.target.files[0]) : null),
+    [uploadFile],
+  );
+
+  if (loading) {
+    return (
+      <div className="flex min-h-[10rem] items-center justify-center rounded-lg bg-opacity-80 p-8">
+        <Spinner className="text-neutral-500" size={1.5} />
+      </div>
+    );
+  }
+
+  const wrapperClass = cn(
+    "flex flex-col items-center justify-center rounded-lg bg-opacity-80 px-8 py-10",
+    draggedInside && "bg-neutral-100",
+  );
+
+  return (
+    <div
+      className={wrapperClass}
+      contentEditable={false}
+      onDragLeave={onDragLeave}
+      onDragOver={onDragEnter}
+      onDrop={onDrop}
+    >
+      <Icon className="mb-4 h-12 w-12 text-black opacity-20 dark:text-white" name="Image" />
+      <div className="flex flex-col items-center justify-center gap-2">
+        <div className="text-center font-medium text-neutral-400 text-sm dark:text-neutral-500">
+          {draggedInside ? i18n("imageUpload.draggedInside") : i18n("imageUpload.draggedInsideDefault")}
+        </div>
+        <div>
+          <Button buttonSize="small" disabled={draggedInside} onClick={handleUploadClick} variant="primary">
+            <Icon name="Upload" />
+            {i18n("imageUpload.button")}
+          </Button>
+        </div>
+      </div>
+      <input
+        accept=".jpg,.jpeg,.png,.webp,.gif"
+        className="h-0 w-0 overflow-hidden opacity-0"
+        onChange={onFileChange}
+        ref={ref}
+        type="file"
+      />
+    </div>
+  );
+};
+
+export default ImageUploader;

package/src/editor/extension/image-upload/view/hooks.ts

@@ -0,0 +1,109 @@
+import { type DragEvent, useCallback, useEffect, useRef, useState } from "react";
+
+import { useMessage } from "@meta-1/design";
+
+export type UseUploaderProps = {
+  onUpload: (url: string) => void;
+  uploadImage?: (file: File) => Promise<string>;
+};
+
+export const useUploader = ({ onUpload, uploadImage }: UseUploaderProps) => {
+  const [loading, setLoading] = useState(false);
+  const msg = useMessage();
+
+  const uploadFile = useCallback(
+    async (file: File) => {
+      setLoading(true);
+      try {
+        const url = await uploadImage?.(file);
+        onUpload(url!);
+        // biome-ignore lint/suspicious/noExplicitAny: <errPayload>
+      } catch (errPayload: any) {
+        const error = errPayload?.response?.data?.error || "Something went wrong";
+        msg.error(error);
+      }
+      setLoading(false);
+    },
+    [onUpload, msg, uploadImage],
+  );
+
+  return { loading, uploadFile };
+};
+
+export const useFileUpload = () => {
+  const fileInput = useRef<HTMLInputElement>(null);
+
+  const handleUploadClick = useCallback(() => {
+    fileInput.current?.click();
+  }, []);
+
+  return { ref: fileInput, handleUploadClick };
+};
+
+export const useDropZone = ({ uploader }: { uploader: (file: File) => void }) => {
+  const [isDragging, setIsDragging] = useState<boolean>(false);
+  const [draggedInside, setDraggedInside] = useState<boolean>(false);
+
+  useEffect(() => {
+    const dragStartHandler = () => {
+      setIsDragging(true);
+    };
+
+    const dragEndHandler = () => {
+      setIsDragging(false);
+    };
+
+    document.body.addEventListener("dragstart", dragStartHandler);
+    document.body.addEventListener("dragend", dragEndHandler);
+
+    return () => {
+      document.body.removeEventListener("dragstart", dragStartHandler);
+      document.body.removeEventListener("dragend", dragEndHandler);
+    };
+  }, []);
+
+  const onDrop = useCallback(
+    (e: DragEvent<HTMLDivElement>) => {
+      setDraggedInside(false);
+      if (e.dataTransfer.files.length === 0) {
+        return;
+      }
+
+      const fileList = e.dataTransfer.files;
+
+      const files: File[] = [];
+
+      for (let i = 0; i < fileList.length; i += 1) {
+        const item = fileList.item(i);
+        if (item) {
+          files.push(item);
+        }
+      }
+
+      if (files.some((file) => file.type.indexOf("image") === -1)) {
+        return;
+      }
+
+      e.preventDefault();
+
+      const filteredFiles = files.filter((f) => f.type.indexOf("image") !== -1);
+
+      const file = filteredFiles.length > 0 ? filteredFiles[0] : undefined;
+
+      if (file) {
+        uploader(file);
+      }
+    },
+    [uploader],
+  );
+
+  const onDragEnter = () => {
+    setDraggedInside(true);
+  };
+
+  const onDragLeave = () => {
+    setDraggedInside(false);
+  };
+
+  return { isDragging, draggedInside, onDragEnter, onDragLeave, onDrop };
+};

package/src/editor/extension/image-upload/view/index.tsx

@@ -0,0 +1 @@
+export { ImageUpload } from "./ImageUpload";

package/src/editor/extension/index.ts

@@ -0,0 +1,30 @@
+export { CodeBlockLowlight } from "@tiptap/extension-code-block-lowlight";
+export { Color } from "@tiptap/extension-color";
+export { Dropcursor } from "@tiptap/extension-dropcursor";
+export { FocusClasses as Focus } from "@tiptap/extension-focus";
+export { FontFamily } from "@tiptap/extension-font-family";
+export { Highlight } from "@tiptap/extension-highlight";
+export { History } from "@tiptap/extension-history";
+export { Subscript } from "@tiptap/extension-subscript";
+export { Superscript } from "@tiptap/extension-superscript";
+export { TextAlign } from "@tiptap/extension-text-align";
+export { TextStyle } from "@tiptap/extension-text-style";
+export { Underline } from "@tiptap/extension-underline";
+
+export { BlockquoteFigure } from "./block-quote-figure";
+export { Document } from "./document";
+export { Figcaption } from "./figcaption";
+export { FontSize } from "./font-size";
+export { Heading } from "./heading";
+export { HorizontalRule } from "./horizontal-rule";
+export { Image } from "./image";
+export { ImageBlock } from "./image-block";
+export { ImageUpload } from "./image-upload";
+export { Link } from "./link";
+export { Column, Columns } from "./multi-column";
+export { Selection } from "./selection";
+export { Table, TableCell, TableHeader, TableRow } from "./table";
+export { TaskItem } from "./task-item";
+export { TaskList } from "./task-list";
+export { TrailingNode } from "./trailing-node";
+export { UniqueId } from "./unique-id";

package/src/editor/extension/link/Link.ts

@@ -0,0 +1,39 @@
+import { mergeAttributes } from "@tiptap/core";
+import TiptapLink from "@tiptap/extension-link";
+import { Plugin } from "@tiptap/pm/state";
+import type { EditorView } from "@tiptap/pm/view";
+
+export const Link = TiptapLink.extend({
+  inclusive: false,
+
+  parseHTML() {
+    return [{ tag: 'a[href]:not([data-type="button"]):not([href *= "javascript:" i])' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["a", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { class: "link" }), 0];
+  },
+
+  addProseMirrorPlugins() {
+    const { editor } = this;
+
+    return [
+      ...(this.parent?.() || []),
+      new Plugin({
+        props: {
+          handleKeyDown: (_view: EditorView, event: KeyboardEvent) => {
+            const { selection } = editor.state;
+
+            if (event.key === "Escape" && selection.empty !== true) {
+              editor.commands.focus(selection.to, { scrollIntoView: false });
+            }
+
+            return false;
+          },
+        },
+      }),
+    ];
+  },
+});
+
+export default Link;

package/src/editor/extension/link/index.ts

@@ -0,0 +1 @@
+export { Link } from "./Link";