@meta-1/editor 0.0.29 → 1.0.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/editor/extension/index.ts

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

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

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