@tulip-systems/core 0.5.0 → 0.5.1

package/src/components/editor/components/menu-fixed.client.tsx

@@ -1,165 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { ColorPicker } from "@/components/ui/color-picker.client";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Separator } from "@/components/ui/separator";
-import {
-  BaselineIcon,
-  BoldIcon,
-  EraserIcon,
-  ItalicIcon,
-  PaintBucketIcon,
-  RedoIcon,
-  StrikethroughIcon,
-  UnderlineIcon,
-  UndoIcon,
-} from "lucide-react";
-import { useContext } from "react";
-import { BlockDropdown } from "./block-dropdown";
-import { EditorContext } from "./editor.client";
-
-export function EditorMenuFixed() {
-  const { editor, extensions } = useContext(EditorContext);
-
-  return (
-    <div className="border-input bg-muted/30 z-10 flex items-center gap-3 overflow-auto border-b p-2">
-      {extensions.undoRedo && (
-        <>
-          <div className="flex items-center gap-1">
-            <Button
-              onClick={() => editor.commands.undo()}
-              disabled={!editor?.can().undo()}
-              type="button"
-              aria-label="Undo"
-              size="icon"
-              className="p-2"
-              variant="outline"
-            >
-              <UndoIcon className="size-3.5" />
-            </Button>
-
-            <Button
-              onClick={() => editor.commands.redo()}
-              disabled={!editor?.can().redo()}
-              type="button"
-              aria-label="Redo"
-              size="icon"
-              className="p-2"
-              variant="outline"
-            >
-              <RedoIcon className="size-3.5" />
-            </Button>
-          </div>
-
-          <Separator orientation="vertical" className="h-8" />
-        </>
-      )}
-
-      <BlockDropdown />
-
-      {extensions.bold || extensions.italic || extensions.underline || extensions.strike ? (
-        <>
-          <div className="flex items-center gap-1">
-            {extensions.bold && (
-              <Button
-                type="button"
-                size="icon"
-                variant={editor?.isActive("bold") ? "secondary" : "outline"}
-                onClick={() => editor.chain().focus().toggleBold().run()}
-                className="border"
-              >
-                <BoldIcon className="h-3.5 w-3.5" />
-              </Button>
-            )}
-
-            {extensions.italic && (
-              <Button
-                type="button"
-                size="icon"
-                variant={editor?.isActive("italic") ? "secondary" : "outline"}
-                onClick={() => editor.chain().focus().toggleItalic().run()}
-                className="border"
-              >
-                <ItalicIcon className="size-3.5" />
-              </Button>
-            )}
-
-            {extensions.underline && (
-              <Button
-                type="button"
-                size="icon"
-                variant={editor?.isActive("underline") ? "secondary" : "outline"}
-                onClick={() => editor.chain().focus().toggleUnderline().run()}
-                className="border"
-              >
-                <UnderlineIcon className="size-3.5" />
-              </Button>
-            )}
-
-            {extensions.strike && (
-              <Button
-                type="button"
-                size="icon"
-                variant={editor?.isActive("strike") ? "secondary" : "outline"}
-                onClick={() => editor.chain().focus().toggleStrike().run()}
-                className="border"
-              >
-                <StrikethroughIcon className="size-3.5" />
-              </Button>
-            )}
-          </div>
-
-          <Separator orientation="vertical" className="h-8" />
-        </>
-      ) : null}
-
-      {extensions.color || extensions.highlight ? (
-        <div className="flex items-center gap-1">
-          {extensions.color && (
-            <Popover>
-              <PopoverTrigger asChild>
-                <Button size="icon" variant="outline">
-                  <BaselineIcon className="size-3.5" />
-                </Button>
-              </PopoverTrigger>
-
-              <PopoverContent className="w-fit p-0">
-                <ColorPicker
-                  onValueChange={(color) => editor.chain().focus().setColor(color).run()}
-                />
-              </PopoverContent>
-            </Popover>
-          )}
-
-          {extensions.highlight && (
-            <Popover>
-              <PopoverTrigger asChild>
-                <Button size="icon" variant="outline" disabled={!editor?.can().setHighlight()}>
-                  <PaintBucketIcon className="size-3.5" />
-                </Button>
-              </PopoverTrigger>
-
-              <PopoverContent className="w-fit p-0">
-                <ColorPicker
-                  onValueChange={(color) => editor.chain().focus().setHighlight({ color }).run()}
-                />
-              </PopoverContent>
-            </Popover>
-          )}
-
-          <Button
-            type="button"
-            size="icon"
-            variant="outline"
-            className="border"
-            onClick={() => {
-              editor.commands.unsetColor();
-              editor.commands.unsetHighlight();
-            }}
-          >
-            <EraserIcon className="h-4 w-4" />
-          </Button>
-        </div>
-      ) : null}
-    </div>
-  );
-}