doclific 0.2.0 → 0.2.2

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

@@ -1,287 +0,0 @@
-import React from 'react';
-
-import { formatCodeBlock, isLangSupported } from '@platejs/code-block';
-import { BracesIcon, Check, 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 {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover';
-import { cn } from '@/lib/utils';
-
-export function CodeBlockElement(props: PlateElementProps<TCodeBlockElement>) {
-  const { editor, element } = props;
-
-  return (
-    <PlateElement
-      className="py-1 **:[.hljs-addition]:bg-[#f0fff4] **:[.hljs-addition]:text-[#22863a] dark:**:[.hljs-addition]:bg-[#3c5743] dark:**:[.hljs-addition]:text-[#ceead5] **:[.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable]:text-[#005cc5] dark:**:[.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable]:text-[#6596cf] **:[.hljs-built\\\\_in,.hljs-symbol]:text-[#e36209] dark:**:[.hljs-built\\\\_in,.hljs-symbol]:text-[#c3854e] **:[.hljs-bullet]:text-[#735c0f] **:[.hljs-comment,.hljs-code,.hljs-formula]:text-[#6a737d] dark:**:[.hljs-comment,.hljs-code,.hljs-formula]:text-[#6a737d] **:[.hljs-deletion]:bg-[#ffeef0] **:[.hljs-deletion]:text-[#b31d28] dark:**:[.hljs-deletion]:bg-[#473235] dark:**:[.hljs-deletion]:text-[#e7c7cb] **:[.hljs-emphasis]:italic **:[.hljs-keyword,.hljs-doctag,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language\\\\_]:text-[#d73a49] dark:**:[.hljs-keyword,.hljs-doctag,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language\\\\_]:text-[#ee6960] **:[.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo]:text-[#22863a] dark:**:[.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo]:text-[#36a84f] **:[.hljs-regexp,.hljs-string,.hljs-meta_.hljs-string]:text-[#032f62] dark:**:[.hljs-regexp,.hljs-string,.hljs-meta_.hljs-string]:text-[#3593ff] **:[.hljs-section]:font-bold **:[.hljs-section]:text-[#005cc5] dark:**:[.hljs-section]:text-[#61a5f2] **:[.hljs-strong]:font-bold **:[.hljs-title,.hljs-title.class\\\\_,.hljs-title.class\\\\_.inherited\\\\_\\\\_,.hljs-title.function\\\\_]:text-[#6f42c1] dark:**:[.hljs-title,.hljs-title.class\\\\_,.hljs-title.class\\\\_.inherited\\\\_\\\\_,.hljs-title.function\\\\_]:text-[#a77bfa]"
-      {...props}
-    >
-      <div className="relative rounded-md bg-muted/50">
-        <pre className="overflow-x-auto p-8 pr-4 font-mono text-sm leading-[normal] [tab-size:2] print:break-inside-avoid">
-          <code>{props.children}</code>
-        </pre>
-
-        <div
-          className="absolute top-1 right-1 z-10 flex select-none gap-0.5"
-          contentEditable={false}
-        >
-          {isLangSupported(element.lang) && (
-            <Button
-              size="icon"
-              variant="ghost"
-              className="size-6 text-xs"
-              onClick={() => formatCodeBlock(editor, { element })}
-              title="Format code"
-            >
-              <BracesIcon className="!size-3.5 text-muted-foreground" />
-            </Button>
-          )}
-
-          <CodeBlockCombobox />
-
-          <CopyButton
-            size="icon"
-            variant="ghost"
-            className="size-6 gap-1 text-muted-foreground text-xs"
-            value={() => NodeApi.string(element)}
-          />
-        </div>
-      </div>
-    </PlateElement>
-  );
-}
-
-function CodeBlockCombobox() {
-  const [open, setOpen] = React.useState(false);
-  const readOnly = useReadOnly();
-  const editor = useEditorRef();
-  const element = useElement<TCodeBlockElement>();
-  const value = element.lang || 'plaintext';
-  const [searchValue, setSearchValue] = React.useState('');
-
-  const items = React.useMemo(
-    () =>
-      languages.filter(
-        (language) =>
-          !searchValue ||
-          language.label.toLowerCase().includes(searchValue.toLowerCase())
-      ),
-    [searchValue]
-  );
-
-  if (readOnly) return null;
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          size="sm"
-          variant="ghost"
-          className="h-6 select-none justify-between gap-1 px-2 text-muted-foreground text-xs"
-          aria-expanded={open}
-          role="combobox"
-        >
-          {languages.find((language) => language.value === value)?.label ??
-            'Plain Text'}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        className="w-[200px] p-0"
-        onCloseAutoFocus={() => setSearchValue('')}
-      >
-        <Command shouldFilter={false}>
-          <CommandInput
-            className="h-9"
-            value={searchValue}
-            onValueChange={(value) => setSearchValue(value)}
-            placeholder="Search language..."
-          />
-          <CommandEmpty>No language found.</CommandEmpty>
-
-          <CommandList className="h-[344px] overflow-y-auto">
-            <CommandGroup>
-              {items.map((language) => (
-                <CommandItem
-                  key={language.label}
-                  className="cursor-pointer"
-                  value={language.value}
-                  onSelect={(value) => {
-                    editor.tf.setNodes<TCodeBlockElement>(
-                      { lang: value },
-                      { at: element }
-                    );
-                    setSearchValue(value);
-                    setOpen(false);
-                  }}
-                >
-                  <Check
-                    className={cn(
-                      value === language.value ? 'opacity-100' : 'opacity-0'
-                    )}
-                  />
-                  {language.label}
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-function CopyButton({
-  value,
-  ...props
-}: { value: (() => string) | string } & Omit<
-  React.ComponentProps<typeof Button>,
-  'value'
->) {
-  const [hasCopied, setHasCopied] = React.useState(false);
-
-  React.useEffect(() => {
-    setTimeout(() => {
-      setHasCopied(false);
-    }, 2000);
-  }, [hasCopied]);
-
-  return (
-    <Button
-      onClick={() => {
-        void navigator.clipboard.writeText(
-          typeof value === 'function' ? value() : value
-        );
-        setHasCopied(true);
-      }}
-      {...props}
-    >
-      <span className="sr-only">Copy</span>
-      {hasCopied ? (
-        <CheckIcon className="!size-3" />
-      ) : (
-        <CopyIcon className="!size-3" />
-      )}
-    </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} />;
-}
-
-const languages: { label: string; value: string }[] = [
-  { label: 'Auto', value: 'auto' },
-  { label: 'Plain Text', value: 'plaintext' },
-  { label: 'ABAP', value: 'abap' },
-  { label: 'Agda', value: 'agda' },
-  { label: 'Arduino', value: 'arduino' },
-  { label: 'ASCII Art', value: 'ascii' },
-  { label: 'Assembly', value: 'x86asm' },
-  { label: 'Bash', value: 'bash' },
-  { label: 'BASIC', value: 'basic' },
-  { label: 'BNF', value: 'bnf' },
-  { label: 'C', value: 'c' },
-  { label: 'C#', value: 'csharp' },
-  { label: 'C++', value: 'cpp' },
-  { label: 'Clojure', value: 'clojure' },
-  { label: 'CoffeeScript', value: 'coffeescript' },
-  { label: 'Coq', value: 'coq' },
-  { label: 'CSS', value: 'css' },
-  { label: 'Dart', value: 'dart' },
-  { label: 'Dhall', value: 'dhall' },
-  { label: 'Diff', value: 'diff' },
-  { label: 'Docker', value: 'dockerfile' },
-  { label: 'EBNF', value: 'ebnf' },
-  { label: 'Elixir', value: 'elixir' },
-  { label: 'Elm', value: 'elm' },
-  { label: 'Erlang', value: 'erlang' },
-  { label: 'F#', value: 'fsharp' },
-  { label: 'Flow', value: 'flow' },
-  { label: 'Fortran', value: 'fortran' },
-  { label: 'Gherkin', value: 'gherkin' },
-  { label: 'GLSL', value: 'glsl' },
-  { label: 'Go', value: 'go' },
-  { label: 'GraphQL', value: 'graphql' },
-  { label: 'Groovy', value: 'groovy' },
-  { label: 'Haskell', value: 'haskell' },
-  { label: 'HCL', value: 'hcl' },
-  { label: 'HTML', value: 'html' },
-  { label: 'Idris', value: 'idris' },
-  { label: 'Java', value: 'java' },
-  { label: 'JavaScript', value: 'javascript' },
-  { label: 'JSON', value: 'json' },
-  { label: 'Julia', value: 'julia' },
-  { label: 'Kotlin', value: 'kotlin' },
-  { label: 'LaTeX', value: 'latex' },
-  { label: 'Less', value: 'less' },
-  { label: 'Lisp', value: 'lisp' },
-  { label: 'LiveScript', value: 'livescript' },
-  { label: 'LLVM IR', value: 'llvm' },
-  { label: 'Lua', value: 'lua' },
-  { label: 'Makefile', value: 'makefile' },
-  { label: 'Markdown', value: 'markdown' },
-  { label: 'Markup', value: 'markup' },
-  { label: 'MATLAB', value: 'matlab' },
-  { label: 'Mathematica', value: 'mathematica' },
-  { label: 'Mermaid', value: 'mermaid' },
-  { label: 'Nix', value: 'nix' },
-  { label: 'Notion Formula', value: 'notion' },
-  { label: 'Objective-C', value: 'objectivec' },
-  { label: 'OCaml', value: 'ocaml' },
-  { label: 'Pascal', value: 'pascal' },
-  { label: 'Perl', value: 'perl' },
-  { label: 'PHP', value: 'php' },
-  { label: 'PowerShell', value: 'powershell' },
-  { label: 'Prolog', value: 'prolog' },
-  { label: 'Protocol Buffers', value: 'protobuf' },
-  { label: 'PureScript', value: 'purescript' },
-  { label: 'Python', value: 'python' },
-  { label: 'R', value: 'r' },
-  { label: 'Racket', value: 'racket' },
-  { label: 'Reason', value: 'reasonml' },
-  { label: 'Ruby', value: 'ruby' },
-  { label: 'Rust', value: 'rust' },
-  { label: 'Sass', value: 'scss' },
-  { label: 'Scala', value: 'scala' },
-  { label: 'Scheme', value: 'scheme' },
-  { label: 'SCSS', value: 'scss' },
-  { label: 'Shell', value: 'shell' },
-  { label: 'Smalltalk', value: 'smalltalk' },
-  { label: 'Solidity', value: 'solidity' },
-  { label: 'SQL', value: 'sql' },
-  { label: 'Swift', value: 'swift' },
-  { label: 'TOML', value: 'toml' },
-  { label: 'TypeScript', value: 'typescript' },
-  { label: 'VB.Net', value: 'vbnet' },
-  { label: 'Verilog', value: 'verilog' },
-  { label: 'VHDL', value: 'vhdl' },
-  { label: 'Visual Basic', value: 'vbnet' },
-  { label: 'WebAssembly', value: 'wasm' },
-  { label: 'XML', value: 'xml' },
-  { label: 'YAML', value: 'yaml' },
-];

package/frontend/src/components/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/frontend/src/components/ui/code-node.tsx

@@ -1,17 +0,0 @@
-
-
-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/frontend/src/components/ui/codebase-snippet-node.tsx

@@ -1,237 +0,0 @@
-import type { PlateElementProps } from 'platejs/react';
-import type { CodebaseSnippetElementType } from '@/components/editor/plugins/codebase-kit';
-import { useQuery } from '@tanstack/react-query';
-import { orpcTs } from '@/lib/orpc';
-import { createHighlighter, type Highlighter } from 'shiki';
-import { useEffect, useState } from 'react';
-import { useTheme } from '@/components/theme-provider';
-import { Copy, Settings } from 'lucide-react';
-import { FileSelector } from './file-selector';
-import { useEditorRef } from 'platejs/react';
-import { toast } from 'sonner';
-
-export function CodebaseSnippetElement({ attributes, children, element }: PlateElementProps<CodebaseSnippetElementType>) {
-    const { theme } = useTheme();
-    const editor = useEditorRef();
-    const [highlighter, setHighlighter] = useState<Highlighter | null>(null);
-    const [highlightedCode, setHighlightedCode] = useState<string>('');
-    const [fileSelectorOpen, setFileSelectorOpen] = useState(false);
-
-    const fileContents = useQuery({
-        ...orpcTs.codebase.getFileContents.queryOptions({
-            input: {
-                filePath: element.filePath || '',
-            },
-
-        }),
-        enabled: !!element.filePath,
-    })
-
-    const language = getLanguageFromPath(element.filePath);
-
-    useEffect(() => {
-        let mounted = true;
-
-        const initHighlighter = async () => {
-            try {
-                const h = await createHighlighter({
-                    themes: ['github-dark', 'github-light'],
-                    langs: [language, 'text'],
-                });
-                if (mounted) {
-                    setHighlighter(h);
-                }
-            } catch (error) {
-                console.error('Failed to create highlighter:', error);
-            }
-        };
-
-        initHighlighter();
-
-        return () => {
-            mounted = false;
-        };
-    }, [language]);
-
-    useEffect(() => {
-        if (!highlighter || !fileContents.data) return;
-
-        const highlightCode = async () => {
-            const code = fileContents.data?.contents || '';
-            const startLine = element.lineStart ? parseInt(element.lineStart) : 1;
-            let endLine: number | undefined = undefined;
-            if (element.lineEnd) {
-                endLine = parseInt(element.lineEnd);
-            } else {
-                // If lineEnd is not specified, use the total number of lines as the maximum
-                endLine = code.split('\n').length;
-            }
-
-            let codeToHighlight = code;
-            let actualStartLine = startLine;
-            if (startLine !== undefined && endLine !== undefined) {
-                const lines = code.split('\n');
-                codeToHighlight = lines.slice(startLine - 1, endLine).join('\n');
-                actualStartLine = startLine;
-            } else if (startLine !== undefined) {
-                const lines = code.split('\n');
-                codeToHighlight = lines.slice(startLine - 1).join('\n');
-                actualStartLine = startLine;
-            }
-
-            try {
-                const html = highlighter.codeToHtml(codeToHighlight, {
-                    lang: language,
-                    theme: theme === 'dark' ? 'github-dark' : 'github-light',
-                });
-
-                // Extract the inner content from Shiki's HTML (it wraps in pre>code)
-                const tempDiv = document.createElement('div');
-                tempDiv.innerHTML = html;
-                const codeElement = tempDiv.querySelector('pre code') || tempDiv.querySelector('code');
-                const codeContent = codeElement ? codeElement.innerHTML : html;
-
-                // Split code into lines
-                const lines = codeToHighlight.split('\n');
-                const highlightedLines = codeContent.split('\n');
-
-                // Create line-by-line structure with numbers
-                const lineItems = lines.map((_, index) => {
-                    const lineNumber = actualStartLine + index;
-                    const highlightedLine = highlightedLines[index] || '';
-                    return `<div class="flex gap-4 hover:bg-muted/50 transition-colors"><span class="inline-block w-10 text-right text-muted-foreground select-none flex-shrink-0">${lineNumber}</span><code class="flex-1">${highlightedLine || '\n'}</code></div>`;
-                }).join('');
-
-                // Wrap the highlighted code with line numbers
-                const codeWithLineNumbers = `<div class="overflow-x-auto"><div class="p-4 text-sm leading-normal font-mono m-0">${lineItems}</div></div>`;
-
-                setHighlightedCode(codeWithLineNumbers);
-            } catch (error) {
-                console.error('Failed to highlight code:', error);
-                const lines = codeToHighlight.split('\n');
-                const lineItems = lines.map((line, index) => {
-                    const lineNumber = actualStartLine + index;
-                    return `<div class="flex gap-4 hover:bg-muted/50 transition-colors"><span class="inline-block w-10 text-right text-muted-foreground select-none flex-shrink-0">${lineNumber}</span><code class="flex-1">${line || '\n'}</code></div>`;
-                }).join('');
-
-                const fallbackHtml = `<div class="overflow-x-auto"><pre class="p-4 text-sm leading-normal font-mono m-0">${lineItems}</pre></div>`;
-                setHighlightedCode(fallbackHtml);
-            }
-        };
-
-        highlightCode();
-    }, [highlighter, fileContents.data, language, theme, element.lineStart, element.lineEnd]);
-
-    const handleCopy = () => {
-        void navigator.clipboard.writeText(fileContents.data?.contents || '');
-        toast.success('Copied to clipboard');
-    }
-
-    return (
-        <div contentEditable={false} {...attributes} className="codebase-snippet my-4 rounded-lg border overflow-hidden">
-            <div className="bg-muted px-4 py-2 border-b flex justify-between items-center">
-                <div className='flex items-center gap-2'>
-                    <a href={`vscode://file/${fileContents.data?.fullPath || ''}:${element.lineStart}`}>
-                        <p className="text-sm font-medium text-muted-foreground">{element.filePath}</p>
-                    </a>
-                    <button
-                        className='bg-transparent border-none p-0 m-0 cursor-pointer'
-                        onClick={() => setFileSelectorOpen(true)}
-                    >
-                        <Settings className='size-4 text-muted-foreground' />
-                    </button>
-                </div>
-                <button className='bg-transparent border-none p-0 m-0 cursor-pointer' onClick={handleCopy}>
-                    <Copy className='size-4 text-muted-foreground' />
-                </button>
-            </div>
-            <div className="relative">
-                {fileContents.isLoading ? (
-                    <div className="p-4 text-sm text-muted-foreground">Loading code...</div>
-                ) : highlightedCode ? (
-                    <div
-                        dangerouslySetInnerHTML={{ __html: highlightedCode }}
-                    />
-                ) : (
-                    <div className="p-4 text-sm text-muted-foreground">No code to display</div>
-                )}
-            </div>
-            <div className="bg-muted px-4 py-2 border-t flex justify-between items-center">
-                <p className="text-sm font-medium text-muted-foreground">Line {element.lineStart} - {element.lineEnd}</p>
-            </div>
-            {children}
-            <FileSelector
-                open={fileSelectorOpen}
-                onClose={() => setFileSelectorOpen(false)}
-                onSelect={(filePath, startLine, endLine) => {
-                    editor.tf.setNodes(
-                        {
-                            filePath,
-                            lineStart: String(startLine),
-                            lineEnd: String(endLine),
-                        },
-                        { at: element }
-                    );
-                }}
-                currentFilePath={element.filePath}
-                currentStartLine={element.lineStart}
-                currentEndLine={element.lineEnd}
-            />
-        </div>
-    )
-}
-
-function getLanguageFromPath(path?: string) {
-    if (!path) return 'text';
-
-    const ext = path.split('.').pop();
-
-    switch (ext) {
-        case 'ts':
-            return 'ts';
-        case 'tsx':
-            return 'tsx';
-        case 'jsx':
-            return 'jsx';
-        case 'js':
-            return 'javascript';
-        case 'json':
-            return 'json';
-        case 'go':
-            return 'go';
-        case 'java':
-            return 'java';
-        case 'kt':
-            return 'kotlin';
-        case 'php':
-            return 'php';
-        case 'rb':
-            return 'ruby';
-        case 'rs':
-            return 'rust';
-        case 'scala':
-            return 'scala';
-        case 'swift':
-            return 'swift';
-        case 'vb':
-            return 'vbnet';
-        case 'cs':
-            return 'csharp';
-        case 'py':
-            return 'python';
-        case 'md':
-            return 'markdown';
-        case 'sh':
-            return 'shell';
-        case 'css':
-            return 'css';
-        case 'html':
-            return 'html';
-        case 'xml':
-            return 'xml';
-        case 'yaml':
-            return 'yaml';
-        default:
-            return 'text';
-    }
-}

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

@@ -1,29 +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>
-  );
-}