doclific 0.2.0 → 0.2.2

package/frontend/src/components/ui/font-size-toolbar-button.tsx

@@ -1,152 +0,0 @@
-import React from 'react';
-
-import type { TElement } from 'platejs';
-
-import { toUnitLess } from '@platejs/basic-styles';
-import { FontSizePlugin } from '@platejs/basic-styles/react';
-import { Minus, Plus } from 'lucide-react';
-import { KEYS } from 'platejs';
-import { useEditorPlugin, useEditorSelector } from 'platejs/react';
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover';
-import { cn } from '@/lib/utils';
-
-import { ToolbarButton } from './toolbar';
-
-const DEFAULT_FONT_SIZE = '16';
-
-const FONT_SIZE_MAP = {
-  h1: '36',
-  h2: '24',
-  h3: '20',
-} as const;
-
-const FONT_SIZES = [
-  '8',
-  '9',
-  '10',
-  '12',
-  '14',
-  '16',
-  '18',
-  '24',
-  '30',
-  '36',
-  '48',
-  '60',
-  '72',
-  '96',
-] as const;
-
-export function FontSizeToolbarButton() {
-  const [inputValue, setInputValue] = React.useState(DEFAULT_FONT_SIZE);
-  const [isFocused, setIsFocused] = React.useState(false);
-  const { editor, tf } = useEditorPlugin(FontSizePlugin);
-
-  const cursorFontSize = useEditorSelector((editor) => {
-    const fontSize = editor.api.marks()?.[KEYS.fontSize];
-
-    if (fontSize) {
-      return toUnitLess(fontSize as string);
-    }
-
-    const [block] = editor.api.block<TElement>() || [];
-
-    if (!block?.type) return DEFAULT_FONT_SIZE;
-
-    return block.type in FONT_SIZE_MAP
-      ? FONT_SIZE_MAP[block.type as keyof typeof FONT_SIZE_MAP]
-      : DEFAULT_FONT_SIZE;
-  }, []);
-
-  const handleInputChange = () => {
-    const newSize = toUnitLess(inputValue);
-
-    if (
-      Number.parseInt(newSize, 10) < 1 ||
-      Number.parseInt(newSize, 10) > 100
-    ) {
-      editor.tf.focus();
-
-      return;
-    }
-    if (newSize !== toUnitLess(cursorFontSize)) {
-      tf.fontSize.addMark(`${newSize}px`);
-    }
-
-    editor.tf.focus();
-  };
-
-  const handleFontSizeChange = (delta: number) => {
-    const newSize = Number(displayValue) + delta;
-    tf.fontSize.addMark(`${newSize}px`);
-    editor.tf.focus();
-  };
-
-  const displayValue = isFocused ? inputValue : cursorFontSize;
-
-  return (
-    <div className="flex h-7 items-center gap-1 rounded-md bg-muted/60 p-0">
-      <ToolbarButton onClick={() => handleFontSizeChange(-1)}>
-        <Minus />
-      </ToolbarButton>
-
-      <Popover open={isFocused} modal={false}>
-        <PopoverTrigger asChild>
-          <input
-            className={cn(
-              'h-full w-10 shrink-0 bg-transparent px-1 text-center text-sm hover:bg-muted'
-            )}
-            value={displayValue}
-            onBlur={() => {
-              setIsFocused(false);
-              handleInputChange();
-            }}
-            onChange={(e) => setInputValue(e.target.value)}
-            onFocus={() => {
-              setIsFocused(true);
-              setInputValue(toUnitLess(cursorFontSize));
-            }}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                e.preventDefault();
-                handleInputChange();
-              }
-            }}
-            data-plate-focus="true"
-            type="text"
-          />
-        </PopoverTrigger>
-        <PopoverContent
-          className="w-10 px-px py-1"
-          onOpenAutoFocus={(e) => e.preventDefault()}
-        >
-          {FONT_SIZES.map((size) => (
-            <button
-              key={size}
-              className={cn(
-                'flex h-8 w-full items-center justify-center text-sm hover:bg-accent data-[highlighted=true]:bg-accent'
-              )}
-              onClick={() => {
-                tf.fontSize.addMark(`${size}px`);
-                setIsFocused(false);
-              }}
-              data-highlighted={size === displayValue}
-              type="button"
-            >
-              {size}
-            </button>
-          ))}
-        </PopoverContent>
-      </Popover>
-
-      <ToolbarButton onClick={() => handleFontSizeChange(1)}>
-        <Plus />
-      </ToolbarButton>
-    </div>
-  );
-}

package/frontend/src/components/ui/heading-node-static.tsx

@@ -1,68 +0,0 @@
-import * as React from 'react';
-
-import type { SlateElementProps } from 'platejs/static';
-
-import { type VariantProps, cva } from 'class-variance-authority';
-import { SlateElement } from 'platejs/static';
-
-const headingVariants = cva('relative mb-1', {
-  variants: {
-    variant: {
-      h1: 'mt-[1.6em] pb-1 font-bold font-heading text-4xl',
-      h2: 'mt-[1.4em] pb-px font-heading font-semibold text-2xl tracking-tight',
-      h3: 'mt-[1em] pb-px font-heading font-semibold text-xl tracking-tight',
-      h4: 'mt-[0.75em] font-heading font-semibold text-lg tracking-tight',
-      h5: 'mt-[0.75em] font-semibold text-lg tracking-tight',
-      h6: 'mt-[0.75em] font-semibold text-base tracking-tight',
-    },
-  },
-});
-
-export function HeadingElementStatic({
-  variant = 'h1',
-  ...props
-}: SlateElementProps & VariantProps<typeof headingVariants>) {
-  return (
-    <SlateElement
-      as={variant!}
-      className={headingVariants({ variant })}
-      {...props}
-    >
-      {props.children}
-    </SlateElement>
-  );
-}
-
-export function H1ElementStatic(props: SlateElementProps) {
-  return <HeadingElementStatic variant="h1" {...props} />;
-}
-
-export function H2ElementStatic(
-  props: React.ComponentProps<typeof HeadingElementStatic>
-) {
-  return <HeadingElementStatic variant="h2" {...props} />;
-}
-
-export function H3ElementStatic(
-  props: React.ComponentProps<typeof HeadingElementStatic>
-) {
-  return <HeadingElementStatic variant="h3" {...props} />;
-}
-
-export function H4ElementStatic(
-  props: React.ComponentProps<typeof HeadingElementStatic>
-) {
-  return <HeadingElementStatic variant="h4" {...props} />;
-}
-
-export function H5ElementStatic(
-  props: React.ComponentProps<typeof HeadingElementStatic>
-) {
-  return <HeadingElementStatic variant="h5" {...props} />;
-}
-
-export function H6ElementStatic(
-  props: React.ComponentProps<typeof HeadingElementStatic>
-) {
-  return <HeadingElementStatic variant="h6" {...props} />;
-}

package/frontend/src/components/ui/heading-node.tsx

@@ -1,58 +0,0 @@
-
-
-import type { PlateElementProps } from 'platejs/react';
-
-import { type VariantProps, cva } from 'class-variance-authority';
-import { PlateElement } from 'platejs/react';
-
-const headingVariants = cva('relative mb-1', {
-  variants: {
-    variant: {
-      h1: 'mt-[1.6em] pb-1 font-bold font-heading text-4xl',
-      h2: 'mt-[1.4em] pb-px font-heading font-semibold text-2xl tracking-tight',
-      h3: 'mt-[1em] pb-px font-heading font-semibold text-xl tracking-tight',
-      h4: 'mt-[0.75em] font-heading font-semibold text-lg tracking-tight',
-      h5: 'mt-[0.75em] font-semibold text-lg tracking-tight',
-      h6: 'mt-[0.75em] font-semibold text-base tracking-tight',
-    },
-  },
-});
-
-export function HeadingElement({
-  variant = 'h1',
-  ...props
-}: PlateElementProps & VariantProps<typeof headingVariants>) {
-  return (
-    <PlateElement
-      as={variant!}
-      className={headingVariants({ variant })}
-      {...props}
-    >
-      {props.children}
-    </PlateElement>
-  );
-}
-
-export function H1Element(props: PlateElementProps) {
-  return <HeadingElement variant="h1" {...props} />;
-}
-
-export function H2Element(props: PlateElementProps) {
-  return <HeadingElement variant="h2" {...props} />;
-}
-
-export function H3Element(props: PlateElementProps) {
-  return <HeadingElement variant="h3" {...props} />;
-}
-
-export function H4Element(props: PlateElementProps) {
-  return <HeadingElement variant="h4" {...props} />;
-}
-
-export function H5Element(props: PlateElementProps) {
-  return <HeadingElement variant="h5" {...props} />;
-}
-
-export function H6Element(props: PlateElementProps) {
-  return <HeadingElement variant="h6" {...props} />;
-}

package/frontend/src/components/ui/highlight-node-static.tsx

@@ -1,11 +0,0 @@
-import type { SlateLeafProps } from 'platejs/static';
-
-import { SlateLeaf } from 'platejs/static';
-
-export function HighlightLeafStatic(props: SlateLeafProps) {
-  return (
-    <SlateLeaf {...props} as="mark" className="bg-highlight/30 text-inherit">
-      {props.children}
-    </SlateLeaf>
-  );
-}

package/frontend/src/components/ui/highlight-node.tsx

@@ -1,13 +0,0 @@
-
-
-import type { PlateLeafProps } from 'platejs/react';
-
-import { PlateLeaf } from 'platejs/react';
-
-export function HighlightLeaf(props: PlateLeafProps) {
-  return (
-    <PlateLeaf {...props} as="mark" className="bg-highlight/30 text-inherit">
-      {props.children}
-    </PlateLeaf>
-  );
-}

package/frontend/src/components/ui/history-toolbar-button.tsx

@@ -1,50 +0,0 @@
-
-
-import { Redo2Icon, Undo2Icon } from 'lucide-react';
-import { useEditorRef, useEditorSelector } from 'platejs/react';
-
-import { ToolbarButton } from './toolbar';
-
-export function RedoToolbarButton(
-  props: React.ComponentProps<typeof ToolbarButton>
-) {
-  const editor = useEditorRef();
-  const disabled = useEditorSelector(
-    (editor) => editor.history.redos.length === 0,
-    []
-  );
-
-  return (
-    <ToolbarButton
-      {...props}
-      disabled={disabled}
-      onClick={() => editor.redo()}
-      onMouseDown={(e) => e.preventDefault()}
-      tooltip="Redo"
-    >
-      <Redo2Icon />
-    </ToolbarButton>
-  );
-}
-
-export function UndoToolbarButton(
-  props: React.ComponentProps<typeof ToolbarButton>
-) {
-  const editor = useEditorRef();
-  const disabled = useEditorSelector(
-    (editor) => editor.history.undos.length === 0,
-    []
-  );
-
-  return (
-    <ToolbarButton
-      {...props}
-      disabled={disabled}
-      onClick={() => editor.undo()}
-      onMouseDown={(e) => e.preventDefault()}
-      tooltip="Undo"
-    >
-      <Undo2Icon />
-    </ToolbarButton>
-  );
-}

package/frontend/src/components/ui/hr-node-static.tsx

@@ -1,20 +0,0 @@
-import type { SlateElementProps } from 'platejs/static';
-
-import { SlateElement } from 'platejs/static';
-
-import { cn } from '@/lib/utils';
-
-export function HrElementStatic(props: SlateElementProps) {
-  return (
-    <SlateElement {...props}>
-      <div className="cursor-text py-6" contentEditable={false}>
-        <hr
-          className={cn(
-            'h-0.5 rounded-sm border-none bg-muted bg-clip-content'
-          )}
-        />
-      </div>
-      {props.children}
-    </SlateElement>
-  );
-}

package/frontend/src/components/ui/hr-node.tsx

@@ -1,33 +0,0 @@
-
-
-import type { PlateElementProps } from 'platejs/react';
-
-import {
-  PlateElement,
-  useFocused,
-  useReadOnly,
-  useSelected,
-} from 'platejs/react';
-
-import { cn } from '@/lib/utils';
-
-export function HrElement(props: PlateElementProps) {
-  const readOnly = useReadOnly();
-  const selected = useSelected();
-  const focused = useFocused();
-
-  return (
-    <PlateElement {...props}>
-      <div className="py-6" contentEditable={false}>
-        <hr
-          className={cn(
-            'h-0.5 rounded-sm border-none bg-muted bg-clip-content',
-            selected && focused && 'ring-2 ring-ring ring-offset-2',
-            !readOnly && 'cursor-pointer'
-          )}
-        />
-      </div>
-      {props.children}
-    </PlateElement>
-  );
-}

package/frontend/src/components/ui/import-toolbar-button.tsx

@@ -1,97 +0,0 @@
-import React from 'react';
-
-import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
-
-import { MarkdownPlugin } from '@platejs/markdown';
-import { ArrowUpToLineIcon } from 'lucide-react';
-import { useEditorRef } from 'platejs/react';
-import { getEditorDOMFromHtmlString } from 'platejs/static';
-import { useFilePicker } from 'use-file-picker';
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-
-import { ToolbarButton } from './toolbar';
-
-type ImportType = 'html' | 'markdown';
-
-export function ImportToolbarButton(props: DropdownMenuProps) {
-  const editor = useEditorRef();
-  const [open, setOpen] = React.useState(false);
-
-  const getFileNodes = (text: string, type: ImportType) => {
-    if (type === 'html') {
-      const editorNode = getEditorDOMFromHtmlString(text);
-      const nodes = editor.api.html.deserialize({
-        element: editorNode,
-      });
-
-      return nodes;
-    }
-
-    if (type === 'markdown') {
-      return editor.getApi(MarkdownPlugin).markdown.deserialize(text);
-    }
-
-    return [];
-  };
-
-  const { openFilePicker: openMdFilePicker } = useFilePicker({
-    accept: ['.md', '.mdx'],
-    multiple: false,
-    onFilesSelected: async ({ plainFiles }) => {
-      const text = await plainFiles[0].text();
-
-      const nodes = getFileNodes(text, 'markdown');
-
-      editor.tf.insertNodes(nodes);
-    },
-  });
-
-  const { openFilePicker: openHtmlFilePicker } = useFilePicker({
-    accept: ['text/html'],
-    multiple: false,
-    onFilesSelected: async ({ plainFiles }) => {
-      const text = await plainFiles[0].text();
-
-      const nodes = getFileNodes(text, 'html');
-
-      editor.tf.insertNodes(nodes);
-    },
-  });
-
-  return (
-    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
-      <DropdownMenuTrigger asChild>
-        <ToolbarButton pressed={open} tooltip="Import" isDropdown>
-          <ArrowUpToLineIcon className="size-4" />
-        </ToolbarButton>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent align="start">
-        <DropdownMenuGroup>
-          <DropdownMenuItem
-            onSelect={() => {
-              openHtmlFilePicker();
-            }}
-          >
-            Import from HTML
-          </DropdownMenuItem>
-
-          <DropdownMenuItem
-            onSelect={() => {
-              openMdFilePicker();
-            }}
-          >
-            Import from Markdown
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

package/frontend/src/components/ui/indent-toolbar-button.tsx

@@ -1,30 +0,0 @@
-
-
-import { useIndentButton, useOutdentButton } from '@platejs/indent/react';
-import { IndentIcon, OutdentIcon } from 'lucide-react';
-
-import { ToolbarButton } from './toolbar';
-
-export function IndentToolbarButton(
-  props: React.ComponentProps<typeof ToolbarButton>
-) {
-  const { props: buttonProps } = useIndentButton();
-
-  return (
-    <ToolbarButton {...props} {...buttonProps} tooltip="Indent">
-      <IndentIcon />
-    </ToolbarButton>
-  );
-}
-
-export function OutdentToolbarButton(
-  props: React.ComponentProps<typeof ToolbarButton>
-) {
-  const { props: buttonProps } = useOutdentButton();
-
-  return (
-    <ToolbarButton {...props} {...buttonProps} tooltip="Outdent">
-      <OutdentIcon />
-    </ToolbarButton>
-  );
-}