@fuma-content/studio 0.1.0 → 1.0.1

package/src/components/editor/ui/code-block-node.tsx

@@ -1,161 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { formatCodeBlock, isLangSupported } from "@platejs/code-block";
-import { BracesIcon, CheckIcon, CopyIcon } from "lucide-react";
-import { type TCodeBlockElement, type TCodeSyntaxLeaf, NodeApi } from "platejs";
-import {
-  type PlateElementProps,
-  type PlateLeafProps,
-  PlateElement,
-  PlateLeaf,
-} from "platejs/react";
-import { useEditorRef, useElement, useReadOnly } from "platejs/react";
-import { Button } from "@/components/ui/button";
-import { lowlight } from "@/lib/lowlight";
-import highlight from "highlight.js";
-import {
-  Combobox,
-  ComboboxChipsInput,
-  ComboboxContent,
-  ComboboxItem,
-  ComboboxList,
-} from "@/components/ui/combobox";
-
-export function CodeBlockElement(props: PlateElementProps<TCodeBlockElement>) {
-  const { editor, element } = props;
-
-  return (
-    <PlateElement
-      className="bg-secondary text-secondary-foreground border p-1 rounded-lg my-1 has-data-popup-open:ring-2 has-data-popup-open:ring-ring"
-      {...props}
-    >
-      <div
-        className="flex items-center select-none px-3 pb-1 contain-layout"
-        contentEditable={false}
-      >
-        <CodeBlockCombobox />
-
-        {isLangSupported(element.lang) && (
-          <Button
-            size="xs"
-            variant="ghost"
-            className="text-muted-foreground"
-            onClick={() => formatCodeBlock(editor, { element })}
-          >
-            <BracesIcon />
-            Format
-          </Button>
-        )}
-
-        <CopyButton
-          size="icon-xs"
-          variant="ghost"
-          className="gap-1 text-muted-foreground"
-          value={() => NodeApi.string(element)}
-        />
-      </div>
-
-      <pre className="hljs rounded-lg border overflow-auto p-3 font-mono text-sm leading-normal [tab-size:2] shadow-sm print:break-inside-avoid">
-        <code>{props.children}</code>
-      </pre>
-    </PlateElement>
-  );
-}
-
-interface Item {
-  label: string;
-  value: string;
-}
-
-function CodeBlockCombobox() {
-  const editor = useEditorRef();
-  const element = useElement<TCodeBlockElement>();
-  const readOnly = useReadOnly();
-  const items = React.useMemo(() => {
-    return lowlight.listLanguages().map((lang) => {
-      const info = highlight.getLanguage(lang)!;
-
-      return {
-        label: info.name ?? lang,
-        value: lang,
-      };
-    });
-  }, []);
-  const value = React.useMemo(() => {
-    if (!element.lang) return null;
-    const name = highlight.getLanguage(element.lang)?.name ?? element.lang;
-    return items.find((item) => item.label === name) ?? null;
-  }, [element.lang]);
-
-  if (readOnly) {
-    return <p className="font-mono text-sm text-muted-foreground me-auto">{value?.label}</p>;
-  }
-
-  return (
-    <Combobox
-      items={items}
-      value={value}
-      onValueChange={(item) => {
-        if (item) {
-          // had to use `replaceNodes` to enforce re-highlight
-          editor.tf.replaceNodes<TCodeBlockElement>(
-            { ...element, lang: item.value },
-            { at: element, select: true },
-          );
-        }
-      }}
-    >
-      <ComboboxChipsInput
-        placeholder="Select Language"
-        className="flex-1 font-mono text-sm not-data-popup-open:text-muted-foreground"
-      />
-      <ComboboxContent className="max-w-[200px]">
-        <ComboboxList>
-          {(item: Item) => (
-            <ComboboxItem key={item.value} value={item}>
-              {item.label}
-            </ComboboxItem>
-          )}
-        </ComboboxList>
-      </ComboboxContent>
-    </Combobox>
-  );
-}
-
-function CopyButton({
-  value,
-  ...props
-}: { value: (() => string) | string } & Omit<React.ComponentProps<typeof Button>, "value">) {
-  const [hasCopied, setHasCopied] = React.useState(false);
-  const timerRef = React.useRef(0);
-
-  return (
-    <Button
-      onClick={() => {
-        void navigator.clipboard.writeText(typeof value === "function" ? value() : value);
-        setHasCopied(true);
-
-        if (timerRef.current) window.clearTimeout(timerRef.current);
-        timerRef.current = window.setTimeout(() => {
-          setHasCopied(false);
-        }, 2000);
-      }}
-      {...props}
-    >
-      <span className="sr-only">Copy</span>
-      {hasCopied ? <CheckIcon /> : <CopyIcon />}
-    </Button>
-  );
-}
-
-export function CodeLineElement(props: PlateElementProps) {
-  return <PlateElement {...props} />;
-}
-
-export function CodeSyntaxLeaf(props: PlateLeafProps<TCodeSyntaxLeaf>) {
-  const tokenClassName = props.leaf.className as string;
-
-  return <PlateLeaf className={tokenClassName} {...props} />;
-}

package/src/components/editor/ui/code-node-static.tsx

@@ -1,15 +0,0 @@
-import type { SlateLeafProps } from "platejs/static";
-
-import { SlateLeaf } from "platejs/static";
-
-export function CodeLeafStatic(props: SlateLeafProps) {
-  return (
-    <SlateLeaf
-      {...props}
-      as="code"
-      className="whitespace-pre-wrap rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm"
-    >
-      {props.children}
-    </SlateLeaf>
-  );
-}

package/src/components/editor/ui/code-node.tsx

@@ -1,17 +0,0 @@
-"use client";
-
-import type { PlateLeafProps } from "platejs/react";
-
-import { PlateLeaf } from "platejs/react";
-
-export function CodeLeaf(props: PlateLeafProps) {
-  return (
-    <PlateLeaf
-      {...props}
-      as="code"
-      className="whitespace-pre-wrap rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm"
-    >
-      {props.children}
-    </PlateLeaf>
-  );
-}

package/src/components/editor/ui/column-node-static.tsx

@@ -1,27 +0,0 @@
-import type { TColumnElement } from "platejs";
-import type { SlateElementProps } from "platejs/static";
-
-import { SlateElement } from "platejs/static";
-
-export function ColumnElementStatic(props: SlateElementProps<TColumnElement>) {
-  const { width } = props.element;
-
-  return (
-    <div className="group/column relative" style={{ width: width ?? "100%" }}>
-      <SlateElement
-        className="h-full px-2 pt-2 group-first/column:pl-0 group-last/column:pr-0"
-        {...props}
-      >
-        <div className="relative h-full border border-transparent p-1.5">{props.children}</div>
-      </SlateElement>
-    </div>
-  );
-}
-
-export function ColumnGroupElementStatic(props: SlateElementProps) {
-  return (
-    <SlateElement className="mb-2" {...props}>
-      <div className="flex size-full rounded">{props.children}</div>
-    </SlateElement>
-  );
-}

package/src/components/editor/ui/column-node.tsx

@@ -1,285 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import type { TColumnElement } from "platejs";
-import { useComposedRef, type PlateElementProps } from "platejs/react";
-import { useDraggable, useDropLine } from "@platejs/dnd";
-import { setColumns } from "@platejs/layout";
-import { ResizableProvider } from "@platejs/resizable";
-import { BlockSelectionPlugin } from "@platejs/selection/react";
-import { type LucideProps, Trash2Icon } from "lucide-react";
-import { GripHorizontal } from "lucide-react";
-import { PathApi } from "platejs";
-import {
-  PlateElement,
-  useEditorRef,
-  useEditorSelector,
-  useElement,
-  useFocusedLast,
-  usePluginOption,
-  useReadOnly,
-  useRemoveNodeButton,
-  useSelected,
-  withHOC,
-} from "platejs/react";
-
-import { Button } from "@/components/ui/button";
-import { Popover, PopoverAnchor, PopoverContent } from "@/components/ui/popover";
-import { Separator } from "@/components/ui/separator";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-
-export const ColumnElement = withHOC(
-  ResizableProvider,
-  function ColumnElement(props: PlateElementProps<TColumnElement>) {
-    const { width } = props.element;
-    const readOnly = useReadOnly();
-    const isSelectionAreaVisible = usePluginOption(BlockSelectionPlugin, "isSelectionAreaVisible");
-
-    const { isDragging, previewRef, handleRef } = useDraggable({
-      element: props.element,
-      orientation: "horizontal",
-      type: "column",
-      canDropNode: ({ dragEntry, dropEntry }) =>
-        PathApi.equals(PathApi.parent(dragEntry[1]), PathApi.parent(dropEntry[1])),
-    });
-
-    return (
-      <div className="group/column relative" style={{ width: width ?? "100%" }}>
-        {!readOnly && !isSelectionAreaVisible && (
-          <div
-            ref={handleRef}
-            className={cn(
-              "-translate-x-1/2 -translate-y-1/2 absolute top-2 left-1/2 z-50",
-              "pointer-events-auto flex items-center",
-              "opacity-0 transition-opacity group-hover/column:opacity-100",
-            )}
-          >
-            <ColumnDragHandle />
-          </div>
-        )}
-
-        <PlateElement
-          {...props}
-          ref={useComposedRef(props.ref, previewRef)}
-          className="h-full px-2 pt-2 group-first/column:pl-0 group-last/column:pr-0"
-        >
-          <div
-            className={cn(
-              "relative h-full border border-transparent p-1.5",
-              !readOnly && "rounded-lg border-border border-dashed",
-              isDragging && "opacity-50",
-            )}
-          >
-            {props.children}
-
-            {!readOnly && !isSelectionAreaVisible && <DropLine />}
-          </div>
-        </PlateElement>
-      </div>
-    );
-  },
-);
-
-const ColumnDragHandle = React.memo(function ColumnDragHandle() {
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button variant="ghost" className="!px-1 h-5">
-            <GripHorizontal
-              className="text-muted-foreground"
-              onClick={(event) => {
-                event.stopPropagation();
-                event.preventDefault();
-              }}
-            />
-          </Button>
-        </TooltipTrigger>
-
-        <TooltipContent>Drag to move column</TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-});
-
-function DropLine() {
-  const { dropLine } = useDropLine({ orientation: "horizontal" });
-
-  if (!dropLine) return null;
-
-  return (
-    <div
-      className={cn(
-        "slate-dropLine",
-        "absolute bg-brand/50",
-        dropLine === "left" && "group-first/column:-left-1 inset-y-0 left-[-10.5px] w-1",
-        dropLine === "right" && "group-last/column:-right-1 inset-y-0 right-[-11px] w-1",
-      )}
-    />
-  );
-}
-
-export function ColumnGroupElement(props: PlateElementProps) {
-  return (
-    <PlateElement className="mb-2" {...props}>
-      <ColumnFloatingToolbar>
-        <div className="flex size-full rounded">{props.children}</div>
-      </ColumnFloatingToolbar>
-    </PlateElement>
-  );
-}
-
-function ColumnFloatingToolbar({ children }: React.PropsWithChildren) {
-  const editor = useEditorRef();
-  const readOnly = useReadOnly();
-  const element = useElement<TColumnElement>();
-  const { props: buttonProps } = useRemoveNodeButton({ element });
-  const selected = useSelected();
-  const isCollapsed = useEditorSelector((editor) => editor.api.isCollapsed(), []);
-  const isFocusedLast = useFocusedLast();
-
-  const open = isFocusedLast && !readOnly && selected && isCollapsed;
-
-  const onColumnChange = (widths: string[]) => {
-    setColumns(editor, {
-      at: element,
-      widths,
-    });
-  };
-
-  return (
-    <Popover open={open} modal={false}>
-      <PopoverAnchor>{children}</PopoverAnchor>
-      <PopoverContent
-        className="w-auto p-1"
-        onOpenAutoFocus={(e) => e.preventDefault()}
-        align="center"
-        side="top"
-        sideOffset={10}
-      >
-        <div className="box-content flex h-8 items-center">
-          <Button variant="ghost" className="size-8" onClick={() => onColumnChange(["50%", "50%"])}>
-            <DoubleColumnOutlined />
-          </Button>
-          <Button
-            variant="ghost"
-            className="size-8"
-            onClick={() => onColumnChange(["33%", "33%", "33%"])}
-          >
-            <ThreeColumnOutlined />
-          </Button>
-          <Button variant="ghost" className="size-8" onClick={() => onColumnChange(["70%", "30%"])}>
-            <RightSideDoubleColumnOutlined />
-          </Button>
-          <Button variant="ghost" className="size-8" onClick={() => onColumnChange(["30%", "70%"])}>
-            <LeftSideDoubleColumnOutlined />
-          </Button>
-          <Button
-            variant="ghost"
-            className="size-8"
-            onClick={() => onColumnChange(["25%", "50%", "25%"])}
-          >
-            <DoubleSideDoubleColumnOutlined />
-          </Button>
-
-          <Separator orientation="vertical" className="mx-1 h-6" />
-          <Button variant="ghost" className="size-8" {...buttonProps}>
-            <Trash2Icon />
-          </Button>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-const DoubleColumnOutlined = (props: LucideProps) => (
-  <svg
-    fill="none"
-    height="16"
-    viewBox="0 0 16 16"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      clipRule="evenodd"
-      d="M8.5 3H13V13H8.5V3ZM7.5 2H8.5H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H8.5H7.5H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H7.5ZM7.5 13H3L3 3H7.5V13Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);
-
-const ThreeColumnOutlined = (props: LucideProps) => (
-  <svg
-    fill="none"
-    height="16"
-    viewBox="0 0 16 16"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      clipRule="evenodd"
-      d="M9.25 3H6.75V13H9.25V3ZM9.25 2H6.75H5.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H5.75H6.75H9.25H10.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H10.25H9.25ZM10.25 3V13H13V3H10.25ZM3 13H5.75V3H3L3 13Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);
-
-const RightSideDoubleColumnOutlined = (props: LucideProps) => (
-  <svg
-    fill="none"
-    height="16"
-    viewBox="0 0 16 16"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      clipRule="evenodd"
-      d="M11.25 3H13V13H11.25V3ZM10.25 2H11.25H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H11.25H10.25H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H10.25ZM10.25 13H3L3 3H10.25V13Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);
-
-const LeftSideDoubleColumnOutlined = (props: LucideProps) => (
-  <svg
-    fill="none"
-    height="16"
-    viewBox="0 0 16 16"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      clipRule="evenodd"
-      d="M5.75 3H13V13H5.75V3ZM4.75 2H5.75H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H5.75H4.75H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H4.75ZM4.75 13H3L3 3H4.75V13Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);
-
-const DoubleSideDoubleColumnOutlined = (props: LucideProps) => (
-  <svg
-    fill="none"
-    height="16"
-    viewBox="0 0 16 16"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      clipRule="evenodd"
-      d="M10.25 3H5.75V13H10.25V3ZM10.25 2H5.75H4.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H4.75H5.75H10.25H11.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H11.25H10.25ZM11.25 3V13H13V3H11.25ZM3 13H4.75V3H3L3 13Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);

package/src/components/editor/ui/comment-node-static.tsx

@@ -1,12 +0,0 @@
-import type { TCommentText } from "platejs";
-import type { SlateLeafProps } from "platejs/static";
-
-import { SlateLeaf } from "platejs/static";
-
-export function CommentLeafStatic(props: SlateLeafProps<TCommentText>) {
-  return (
-    <SlateLeaf {...props} className="border-b-2 border-b-highlight/35 bg-highlight/15">
-      {props.children}
-    </SlateLeaf>
-  );
-}

package/src/components/editor/ui/comment-node.tsx

@@ -1,43 +0,0 @@
-"use client";
-
-import type { TCommentText } from "platejs";
-import type { PlateLeafProps } from "platejs/react";
-
-import { getCommentCount } from "@platejs/comment";
-import { PlateLeaf, useEditorPlugin, usePluginOption } from "platejs/react";
-
-import { cn } from "@/lib/utils";
-import { commentPlugin } from "@/components/editor/plugins/comment-kit";
-
-export function CommentLeaf(props: PlateLeafProps<TCommentText>) {
-  const { children, leaf } = props;
-
-  const { api, setOption } = useEditorPlugin(commentPlugin);
-  const hoverId = usePluginOption(commentPlugin, "hoverId");
-  const activeId = usePluginOption(commentPlugin, "activeId");
-
-  const isOverlapping = getCommentCount(leaf) > 1;
-  const currentId = api.comment.nodeId(leaf);
-  const isActive = activeId === currentId;
-  const isHover = hoverId === currentId;
-
-  return (
-    <PlateLeaf
-      {...props}
-      className={cn(
-        "border-b-2 border-b-highlight/[.36] bg-highlight/[.13] transition-colors duration-200",
-        (isHover || isActive) && "border-b-highlight bg-highlight/25",
-        isOverlapping && "border-b-2 border-b-highlight/[.7] bg-highlight/25",
-        (isHover || isActive) && isOverlapping && "border-b-highlight bg-highlight/45",
-      )}
-      attributes={{
-        ...props.attributes,
-        onClick: () => setOption("activeId", currentId ?? null),
-        onMouseEnter: () => setOption("hoverId", currentId ?? null),
-        onMouseLeave: () => setOption("hoverId", null),
-      }}
-    >
-      {children}
-    </PlateLeaf>
-  );
-}

package/src/components/editor/ui/comment-toolbar-button.tsx

@@ -1,24 +0,0 @@
-"use client";
-
-import { MessageSquareTextIcon } from "lucide-react";
-import { useEditorRef } from "platejs/react";
-
-import { commentPlugin } from "@/components/editor/plugins/comment-kit";
-
-import { ToolbarButton } from "../../ui/toolbar";
-
-export function CommentToolbarButton() {
-  const editor = useEditorRef();
-
-  return (
-    <ToolbarButton
-      onClick={() => {
-        editor.getTransforms(commentPlugin).comment.setDraft();
-      }}
-      data-plate-prevent-overlay
-      tooltip="Comment"
-    >
-      <MessageSquareTextIcon />
-    </ToolbarButton>
-  );
-}