@fuma-content/studio 0.1.0

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

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

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

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

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

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

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

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

@@ -0,0 +1,24 @@
+"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>
+  );
+}