doclific 0.1.0

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

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

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

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

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

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