58:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 59:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 5a:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 6d:I[8513,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"ScrollArea"] 6e:I[8513,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"ScrollBar"] 50:["$","span",null,{"className":"text-xs font-medium","children":"@tiptap/extension-color"}] 51:["$","li","@tiptap/extension-horizontal-rule",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tiptap%2Fextension-horizontal-rule","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@tiptap/extension-horizontal-rule"}]]}]}] 52:["$","li","@tiptap/pm",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tiptap%2Fpm","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@tiptap/pm"}]]}]}] 53:["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}] 54:["$","$L58",null,{"registryDependencies":["https://ui-three-mu.vercel.app/r/button.json","https://ui-three-mu.vercel.app/r/field.json","https://ui-three-mu.vercel.app/r/input.json","https://ui-three-mu.vercel.app/r/menu.json","https://ui-three-mu.vercel.app/r/popover.json","https://ui-three-mu.vercel.app/r/separator.json","https://ui-three-mu.vercel.app/r/switch.json","https://ui-three-mu.vercel.app/r/text-field.json","https://ui-three-mu.vercel.app/r/toggle.json","https://ui-three-mu.vercel.app/r/toggle-group.json","https://ui-three-mu.vercel.app/r/tooltip.json","https://ui-three-mu.vercel.app/r/utils.json"]}] 55:["$","$L59",null,{"sourceUrl":"https://ui-three-mu.vercel.app/r/editor.json","proxyUrl":"https://shadcnregistry.com/r/preskok/editor","itemId":"@preskok/editor"}] 5b:Tf84,import "./styles/index.css" import type { Content, Editor as TiptapEditor } from "@tiptap/react" import { EditorContent, EditorContext } from "@tiptap/react" import { cn } from "@/lib/utils" import { useEditorContext } from "@/components/ui/preskok-ui/editor/hooks/use-editor-context" import { Separator } from "@/components/ui/preskok-ui/separator" import { LinkBubbleMenu } from "./components/bubble-menu/link-bubble-menu" import { MeasuredContainer } from "./components/measured-container" import { SectionFive } from "./components/section/five" import { SectionFour } from "./components/section/four" import { SectionOne } from "./components/section/one" import { SectionThree } from "./components/section/three" import { SectionTwo } from "./components/section/two" import type { UseEditorProps } from "./hooks/use-editor" import { useEditor } from "./hooks/use-editor" const DEFAULT_ACTIVE_LEVELS: Array<1 | 2 | 3 | 4 | 5 | 6> = [1, 2, 3, 4, 5, 6] const DEFAULT_TEXT_STYLE_ACTIONS: Array< "bold" | "italic" | "underline" | "strikethrough" | "clearFormatting" > = ["bold", "italic", "underline", "strikethrough", "clearFormatting"] const DEFAULT_LIST_ACTIONS: Array<"orderedList" | "bulletList"> = [ "orderedList", "bulletList", ] const DEFAULT_INSERT_ACTIONS: Array<"blockquote" | "horizontalRule"> = [ "blockquote", "horizontalRule", ] export interface MinimalTiptapProps extends Omit { value?: Content onChange?: (value: Content) => void className?: string editorContentClassName?: string } const Toolbar = ({ editor }: { editor: TiptapEditor }) => (

) export const Editor = ({ value, onChange, className, editorContentClassName, ...props }: MinimalTiptapProps) => { const editor = useEditor({ value, onUpdate: onChange, ...props, }) if (!editor) { return null } return ( ) } export const MainEditor = ({ editor: providedEditor, className, editorContentClassName, }: MinimalTiptapProps & { editor: TiptapEditor }) => { const { editor } = useEditorContext(providedEditor) if (!editor) { return null } return ( ) } 5c:T551,import type { Editor } from "@tiptap/react" import type { MinimalTiptapProps } from "./editor" type ShortcutKeyResult = { symbol: string readable: string } export const isClient = (): boolean => typeof window !== "undefined" export const isMacOS = (): boolean => isClient() && window.navigator.userAgent.includes("Macintosh") const shortcutKeyMap = { mod: isMacOS() ? { symbol: "⌘", readable: "Command" } : { symbol: "Ctrl", readable: "Control" }, alt: isMacOS() ? { symbol: "⌥", readable: "Option" } : { symbol: "Alt", readable: "Alt" }, shift: { symbol: "⇧", readable: "Shift" }, } as const satisfies Record type ShortcutKey = string export const getShortcutKey = (key: ShortcutKey): ShortcutKeyResult => { const lowerKey = key.toLowerCase() as Lowercase const result = shortcutKeyMap[lowerKey] return result || { symbol: key, readable: key } } export const getShortcutKeys = ( keys: Array ): Array => keys.map(getShortcutKey) export const getOutput = ( editor: Editor, format: MinimalTiptapProps["output"] ): object | string => { switch (format) { case "json": return editor.getJSON() case "html": return editor.isEmpty ? "" : editor.getHTML() default: return editor.getText() } } 5d:T1057,@import "./partials/placeholder.css"; @import "./partials/lists.css"; @import "./partials/typography.css"; @reference "../../../../../../styles/globals.css"; :root { --mt-overlay: rgba(251, 251, 251, 0.75); --mt-transparent-foreground: rgba(0, 0, 0, 0.373); --mt-bg-secondary: rgba(251, 251, 251, 0.8); --mt-secondary: #9d9d9f; --mt-hr: #dcdcdc; --mt-drag-handle-hover: #5c5c5e; --mt-accent-bold-blue: #05c; --mt-accent-bold-teal: #206a83; --mt-accent-bold-green: #216e4e; --mt-accent-bold-orange: #a54800; --mt-accent-bold-red: #ae2e24; --mt-accent-bold-purple: #5e4db2; --mt-accent-gray: #758195; --mt-accent-blue: #1d7afc; --mt-accent-teal: #2898bd; --mt-accent-green: #22a06b; --mt-accent-orange: #fea362; --mt-accent-red: #c9372c; --mt-accent-purple: #8270db; --mt-accent-blue-subtler: #cce0ff; --mt-accent-teal-subtler: #c6edfb; --mt-accent-green-subtler: #baf3db; --mt-accent-yellow-subtler: #f8e6a0; --mt-accent-red-subtler: #ffd5d2; --mt-accent-purple-subtler: #dfd8fd; } .dark { --mt-overlay: rgba(31, 32, 35, 0.75); --mt-transparent-foreground: rgba(255, 255, 255, 0.4); --mt-bg-secondary: rgba(31, 32, 35, 0.8); --mt-secondary: #595a5c; --mt-hr: #26282d; --mt-drag-handle-hover: #969799; --mt-accent-bold-blue: #85b8ff; --mt-accent-bold-teal: #9dd9ee; --mt-accent-bold-green: #7ee2b8; --mt-accent-bold-orange: #fec195; --mt-accent-bold-red: #fd9891; --mt-accent-bold-purple: #b8acf6; --mt-accent-gray: #738496; --mt-accent-blue: #388bff; --mt-accent-teal: #42b2d7; --mt-accent-green: #2abb7f; --mt-accent-orange: #a54800; --mt-accent-red: #e2483d; --mt-accent-purple: #8f7ee7; --mt-accent-blue-subtler: #09326c; --mt-accent-teal-subtler: #164555; --mt-accent-green-subtler: #164b35; --mt-accent-yellow-subtler: #533f04; --mt-accent-red-subtler: #5d1f1a; --mt-accent-purple-subtler: #352c63; } .rich-text-editor .ProseMirror { @apply flex max-w-full cursor-text flex-col; @apply z-0 outline-0; } .rich-text-editor .ProseMirror > div.editor { @apply block flex-1 whitespace-pre-wrap; } .rich-text-editor .ProseMirror .block-node:not(:last-child), .rich-text-editor .ProseMirror .list-node:not(:last-child), .rich-text-editor .ProseMirror .text-node:not(:last-child) { @apply mb-2.5; } .rich-text-editor .ProseMirror ol, .rich-text-editor .ProseMirror ul { @apply pl-6; } .rich-text-editor .ProseMirror blockquote, .rich-text-editor .ProseMirror dl, .rich-text-editor .ProseMirror ol, .rich-text-editor .ProseMirror p, .rich-text-editor .ProseMirror pre, .rich-text-editor .ProseMirror ul { @apply m-0; } .rich-text-editor .ProseMirror li { @apply leading-7; } .rich-text-editor .ProseMirror p { @apply break-words; } .rich-text-editor .ProseMirror li .text-node:has(+ .list-node), .rich-text-editor .ProseMirror li > .list-node, .rich-text-editor .ProseMirror li > .text-node, .rich-text-editor .ProseMirror li p { @apply mb-0; } .rich-text-editor .ProseMirror blockquote { @apply relative pl-3.5; } .rich-text-editor .ProseMirror blockquote::before, .rich-text-editor .ProseMirror blockquote.is-empty::before { @apply bg-accent-foreground/15 absolute top-0 bottom-0 left-0 h-full w-1 rounded-sm content-['']; } .rich-text-editor .ProseMirror hr { @apply my-3 h-0.5 w-full border-none bg-[var(--mt-hr)]; } .rich-text-editor .ProseMirror-focused hr.ProseMirror-selectednode { @apply outline-muted-foreground rounded-full outline-2 outline-offset-1; } .rich-text-editor .ProseMirror .ProseMirror-gapcursor { @apply pointer-events-none absolute hidden; } .rich-text-editor .ProseMirror .ProseMirror-hideselection { @apply caret-transparent; } .rich-text-editor .ProseMirror.resize-cursor { @apply cursor-col-resize; } .rich-text-editor .ProseMirror .selection { @apply inline-block; } .rich-text-editor .ProseMirror s span { @apply line-through; } .rich-text-editor .ProseMirror .selection, .rich-text-editor .ProseMirror *::selection { @apply bg-primary/25; } /* Override native selection when custom selection is present */ .rich-text-editor .ProseMirror .selection::selection { background: transparent; } 5e:T1851,import * as React from "react" import type { Editor } from "@tiptap/react" import { CheckIcon, ChevronDownIcon } from "lucide-react" import { Popover, PopoverBody, PopoverContent, } from "@/components/ui/preskok-ui/popover" import type { ToggleProps } from "@/components/ui/preskok-ui/toggle" import { ToggleGroup, ToggleGroupItem, } from "@/components/ui/preskok-ui/toggle-group" import { Tooltip, TooltipContent, } from "@/components/ui/preskok-ui/tooltip" import { useTheme } from "../../hooks/use-theme" import { ToolbarButton } from "../toolbar-button" interface ColorItem { cssVar: string label: string darkLabel?: string } interface ColorPalette { label: string colors: Array inverse: string } const COLORS: Array = [ { label: "Palette 1", inverse: "var(--background)", colors: [ { cssVar: "var(--foreground)", label: "Default" }, { cssVar: "var(--mt-accent-bold-blue)", label: "Bold blue" }, { cssVar: "var(--mt-accent-bold-teal)", label: "Bold teal" }, { cssVar: "var(--mt-accent-bold-green)", label: "Bold green" }, { cssVar: "var(--mt-accent-bold-orange)", label: "Bold orange" }, { cssVar: "var(--mt-accent-bold-red)", label: "Bold red" }, { cssVar: "var(--mt-accent-bold-purple)", label: "Bold purple" }, ], }, { label: "Palette 2", inverse: "var(--background)", colors: [ { cssVar: "var(--mt-accent-gray)", label: "Gray" }, { cssVar: "var(--mt-accent-blue)", label: "Blue" }, { cssVar: "var(--mt-accent-teal)", label: "Teal" }, { cssVar: "var(--mt-accent-green)", label: "Green" }, { cssVar: "var(--mt-accent-orange)", label: "Orange" }, { cssVar: "var(--mt-accent-red)", label: "Red" }, { cssVar: "var(--mt-accent-purple)", label: "Purple" }, ], }, { label: "Palette 3", inverse: "var(--foreground)", colors: [ { cssVar: "hsl(var(--background))", label: "White", darkLabel: "Black" }, { cssVar: "var(--mt-accent-blue-subtler)", label: "Blue subtle" }, { cssVar: "var(--mt-accent-teal-subtler)", label: "Teal subtle" }, { cssVar: "var(--mt-accent-green-subtler)", label: "Green subtle" }, { cssVar: "var(--mt-accent-yellow-subtler)", label: "Yellow subtle" }, { cssVar: "var(--mt-accent-red-subtler)", label: "Red subtle" }, { cssVar: "var(--mt-accent-purple-subtler)", label: "Purple subtle" }, ], }, ] const ColorButton = ({ color, isSelected, inverse, }: { color: ColorItem isSelected: boolean inverse: string }) => { const isDarkMode = useTheme() const label = isDarkMode && color.darkLabel ? color.darkLabel : color.label return ( {isSelected ? ( ) : null}

{label}

) } ColorButton.displayName = "ColorButton" interface ColorPickerProps { palette: ColorPalette selectedColor: string inverse: string onColorChange: (value: string) => void } const ColorPicker = ({ palette, selectedColor, inverse, onColorChange, }: ColorPickerProps) => ( { const first = Array.from(keys)[0] if (typeof first === "string") { onColorChange(first) } }} className="gap-2 [box-shadow:none]" > {palette.colors.map((color) => ( ))} ) ColorPicker.displayName = "ColorPicker" interface SectionThreeProps extends Pick { editor: Editor } interface TextStyleAttrs { color?: string } export const SectionThree: React.FC = ({ editor, size }) => { const textStyleAttrs = editor.getAttributes("textStyle") as TextStyleAttrs const color = typeof textStyleAttrs.color === "string" ? textStyleAttrs.color : "var(--foreground)" const [localColor, setLocalColor] = React.useState(null) const selectedColor = localColor ?? color const handleColorChange = (value: string) => { setLocalColor(value) const storedMarks = editor.state.storedMarks if (storedMarks) { const textStyleMarkType = editor.schema.marks.textStyle editor.view.dispatch(editor.state.tr.removeStoredMark(textStyleMarkType)) } setTimeout(() => { editor.chain().setColor(value).run() setLocalColor(null) }, 0) } return ( {COLORS.map((palette) => ( ))} ) } SectionThree.displayName = "SectionThree" 5f:Tc51,import type { Editor } from "@tiptap/react" import { BoldIcon, ItalicIcon, MoreHorizontalIcon, RemoveFormattingIcon, StrikethroughIcon, UnderlineIcon, } from "lucide-react" import type { ToggleProps } from "@/components/ui/preskok-ui/toggle" import type { FormatAction } from "../../types" import { ToolbarSection } from "../toolbar-section" type TextStyleAction = | "bold" | "italic" | "underline" | "strikethrough" | "clearFormatting" interface TextStyle extends FormatAction { value: TextStyleAction } const formatActions: Array = [ { value: "bold", label: "Bold", icon: , action: (editor) => editor.chain().focus().toggleBold().run(), isActive: (editor) => editor.isActive("bold"), canExecute: (editor) => editor.can().chain().focus().toggleBold().run() && !editor.isActive("codeBlock"), shortcuts: ["mod", "B"], }, { value: "italic", label: "Italic", icon: , action: (editor) => editor.chain().focus().toggleItalic().run(), isActive: (editor) => editor.isActive("italic"), canExecute: (editor) => editor.can().chain().focus().toggleItalic().run() && !editor.isActive("codeBlock"), shortcuts: ["mod", "I"], }, { value: "underline", label: "Underline", icon: , action: (editor) => editor.chain().focus().toggleUnderline().run(), isActive: (editor) => editor.isActive("underline"), canExecute: (editor) => editor.can().chain().focus().toggleUnderline().run() && !editor.isActive("codeBlock"), shortcuts: ["mod", "U"], }, { value: "strikethrough", label: "Strikethrough", icon: , action: (editor) => editor.chain().focus().toggleStrike().run(), isActive: (editor) => editor.isActive("strike"), canExecute: (editor) => editor.can().chain().focus().toggleStrike().run() && !editor.isActive("codeBlock"), shortcuts: ["mod", "shift", "S"], }, { value: "clearFormatting", label: "Clear formatting", icon: , action: (editor) => editor.chain().focus().unsetAllMarks().run(), isActive: () => false, canExecute: (editor) => editor.can().chain().focus().unsetAllMarks().run() && !editor.isActive("codeBlock"), shortcuts: ["mod", "\\"], }, ] interface SectionTwoProps extends Pick { editor: Editor activeActions?: Array mainActionCount?: number } const defaultActiveActions = formatActions.map((action) => action.value) export const SectionTwo = ({ editor, activeActions = defaultActiveActions, mainActionCount = 2, size = "lg", }: SectionTwoProps) => { return ( } dropdownTooltip="More formatting" dropdownClassName="w-8" size={size} /> ) } 60:Ta18,import * as React from "react" import type { Editor } from "@tiptap/react" import { ChevronDownIcon, ListIcon } from "lucide-react" import type { ToggleProps } from "@/components/ui/preskok-ui/toggle" import type { FormatAction } from "../../types" import { ToolbarSection } from "../toolbar-section" type ListItemAction = "orderedList" | "bulletList" interface ListItem extends FormatAction { value: ListItemAction } const formatActions: Array = [ { value: "orderedList", label: "Numbered list", icon: ( ), isActive: (editor) => editor.isActive("orderedList"), action: (editor) => editor.chain().focus().toggleOrderedList().run(), canExecute: (editor) => editor.can().chain().focus().toggleOrderedList().run(), shortcuts: ["mod", "shift", "7"], }, { value: "bulletList", label: "Bullet list", icon: , isActive: (editor) => editor.isActive("bulletList"), action: (editor) => editor.chain().focus().toggleBulletList().run(), canExecute: (editor) => editor.can().chain().focus().toggleBulletList().run(), shortcuts: ["mod", "shift", "8"], }, ] interface SectionFourProps extends Pick { editor: Editor activeActions?: Array mainActionCount?: number } const defaultActiveActions = formatActions.map((action) => action.value) export const SectionFour: React.FC = ({ editor, activeActions = defaultActiveActions, mainActionCount = 0, size, }) => { return ( } dropdownTooltip="Lists" size={size} /> ) } SectionFour.displayName = "SectionFour" 61:Te4a,import * as React from "react" import type { Editor } from "@tiptap/react" import { CaseSensitiveIcon, ChevronDownIcon } from "lucide-react" import { cn } from "@/lib/utils" import { Menu, MenuContent, MenuItem, } from "@/components/ui/preskok-ui/menu" import type { ToggleProps } from "@/components/ui/preskok-ui/toggle" import type { FormatAction } from "../../types" import { ShortcutKey } from "../shortcut-key" import { ToolbarButton } from "../toolbar-button" type Level = 1 | 2 | 3 | 4 | 5 | 6 interface TextStyle extends Omit< FormatAction, "value" | "icon" | "action" | "isActive" | "canExecute" > { element: keyof React.JSX.IntrinsicElements level?: Level className: string } const formatActions: Array = [ { label: "Normal Text", element: "span", className: "grow", shortcuts: ["mod", "alt", "0"], }, { label: "Heading 1", element: "h1", level: 1, className: "m-0 grow text-3xl font-extrabold", shortcuts: ["mod", "alt", "1"], }, { label: "Heading 2", element: "h2", level: 2, className: "m-0 grow text-xl font-bold", shortcuts: ["mod", "alt", "2"], }, { label: "Heading 3", element: "h3", level: 3, className: "m-0 grow text-lg font-semibold", shortcuts: ["mod", "alt", "3"], }, { label: "Heading 4", element: "h4", level: 4, className: "m-0 grow text-base font-semibold", shortcuts: ["mod", "alt", "4"], }, { label: "Heading 5", element: "h5", level: 5, className: "m-0 grow text-sm font-normal", shortcuts: ["mod", "alt", "5"], }, { label: "Heading 6", element: "h6", level: 6, className: "m-0 grow text-sm font-normal", shortcuts: ["mod", "alt", "6"], }, ] interface SectionOneProps extends Pick { editor: Editor activeLevels?: Array } const defaultActiveLevels = [1, 2, 3, 4, 5, 6] export const SectionOne: React.FC = ({ editor, activeLevels = defaultActiveLevels, size, }) => { const filteredActions = React.useMemo( () => formatActions.filter( (action) => !action.level || activeLevels.includes(action.level) ), [activeLevels] ) const handleStyleChange = React.useCallback( (level?: Level) => { if (level) { editor.chain().focus().toggleHeading({ level }).run() } else { editor.chain().focus().setParagraph().run() } }, [editor] ) const renderMenuItem = React.useCallback( ({ label, element: Element, level, className, shortcuts }: TextStyle) => ( { handleStyleChange(level) }} className={cn("flex flex-row items-center justify-between gap-4", { "bg-accent": level ? editor.isActive("heading", { level }) : editor.isActive("paragraph"), })} aria-label={label} > {label} ), [editor, handleStyleChange] ) return ( {filteredActions.map(renderMenuItem)} ) } SectionOne.displayName = "SectionOne" 62:T83f,import type { Editor } from "@tiptap/react" import { ChevronDownIcon, MinusIcon, PlusIcon, QuoteIcon } from "lucide-react" import { LinkEditPopover } from "@/components/ui/preskok-ui/editor/components/link/link-edit-popover" import type { ToggleProps } from "@/components/ui/preskok-ui/toggle" import type { FormatAction } from "../../types" import { ToolbarSection } from "../toolbar-section" type InsertElementAction = "blockquote" | "horizontalRule" interface InsertElement extends FormatAction { value: InsertElementAction } const formatActions: Array = [ { value: "blockquote", label: "Blockquote", icon: , action: (editor) => editor.chain().focus().toggleBlockquote().run(), isActive: (editor) => editor.isActive("blockquote"), canExecute: (editor) => editor.can().chain().focus().toggleBlockquote().run(), shortcuts: ["mod", "shift", "B"], }, { value: "horizontalRule", label: "Divider", icon: , action: (editor) => editor.chain().focus().setHorizontalRule().run(), isActive: () => false, canExecute: (editor) => editor.can().chain().focus().setHorizontalRule().run(), shortcuts: ["mod", "alt", "-"], }, ] interface SectionFiveProps extends Pick { editor: Editor activeActions?: Array mainActionCount?: number } const defaultActiveActions = formatActions.map((action) => action.value) export const SectionFive = ({ editor, activeActions = defaultActiveActions, mainActionCount = 0, size, }: SectionFiveProps) => { return ( <> } dropdownTooltip="Insert elements" size={size} /> ) } 63:T43d,import * as React from "react" import { cn } from "@/lib/utils" import { Toggle } from "@/components/ui/preskok-ui/toggle" import { Tooltip, TooltipContent, type TooltipContentProps, } from "@/components/ui/preskok-ui/tooltip" interface ToolbarButtonProps extends React.ComponentProps { tooltip?: string tooltipOptions?: TooltipContentProps isActive?: boolean } export const ToolbarButton = ({ children, tooltip, className, tooltipOptions, isActive, ...props }: ToolbarButtonProps) => { const toggleRef = React.useRef(null) const toggleButton = ( {children} ) if (!tooltip) { return toggleButton } return ( {toggleButton}

{tooltip}

) } ToolbarButton.displayName = "ToolbarButton" 64:Ta14,import * as React from "react" import { cn } from "@/lib/utils" import type { ButtonProps } from "@/components/ui/preskok-ui/button" import { Button } from "@/components/ui/preskok-ui/button" import { Fieldset, Label } from "@/components/ui/preskok-ui/field" import { Input } from "@/components/ui/preskok-ui/input" import { Switch } from "@/components/ui/preskok-ui/switch" import { TextField } from "@/components/ui/preskok-ui/text-field" export interface LinkEditorProps extends React.ComponentProps<"div"> { defaultUrl?: string defaultText?: string defaultIsNewTab?: boolean onSave: (url: string, text?: string, isNewTab?: boolean) => void } export const LinkEditBlock = ({ onSave, defaultIsNewTab, defaultUrl, defaultText, className, }: LinkEditorProps) => { const formRef = React.useRef(null) const [url, setUrl] = React.useState(defaultUrl || "") const [text, setText] = React.useState(defaultText || "") const [isNewTab, setIsNewTab] = React.useState(defaultIsNewTab ?? false) const handleSave: ButtonProps["onClick"] = (e) => { e.preventDefault() if (formRef.current) { const isValid = Array.from( formRef.current.querySelectorAll("input") ).every((input) => input.checkValidity()) if (isValid) { onSave(url, text, isNewTab) } else { formRef.current.querySelectorAll("input").forEach((input) => { if (!input.checkValidity()) { input.reportValidity() } }) } } } return (

URL { setUrl(e.target.value) }} /> Display Text (optional) { setText(e.target.value) }} /> Open in New Tab

) } 65:T72d,import * as React from "react" import { CopyIcon, ExternalLinkIcon, Unlink2Icon } from "lucide-react" import { Button } from "@/components/ui/preskok-ui/button" import { Tooltip, TooltipContent, } from "@/components/ui/preskok-ui/tooltip" interface LinkPopoverBlockProps { url: string onClear: () => void onEdit: () => void } export const LinkPopoverBlock: React.FC = ({ url, onClear, onEdit, }) => { const [copyTitle, setCopyTitle] = React.useState("Copy") const handleCopy = () => { navigator.clipboard .writeText(url) .then(() => { setCopyTitle("Copied!") setTimeout(() => { setCopyTitle("Copy") }, 1000) }) .catch(console.error) } const handleOpenLink = React.useCallback(() => { window.open(url, "_blank", "noopener,noreferrer") }, [url]) return (

Edit link Open link in a new tab Clear link {copyTitle}

) } 66:T6d6,import * as React from "react" import type { Editor } from "@tiptap/react" import { Link2Icon } from "lucide-react" import { Popover, PopoverContent, } from "@/components/ui/preskok-ui/popover" import type { ToggleProps } from "@/components/ui/preskok-ui/toggle" import { ToolbarButton } from "../toolbar-button" import { LinkEditBlock } from "./link-edit-block" interface LinkEditPopoverProps extends Pick { editor: Editor } const LinkEditPopover = ({ editor, size }: LinkEditPopoverProps) => { const [open, setOpen] = React.useState(false) const { from, to } = editor.state.selection const text = editor.state.doc.textBetween(from, to, " ") const onSetLink = React.useCallback( (url: string, text?: string, openInNewTab?: boolean) => { editor .chain() .focus() .extendMarkRange("link") .insertContent({ type: "text", text: text || url, marks: [ { type: "link", attrs: { href: url, target: openInNewTab ? "_blank" : "", }, }, ], }) .setLink({ href: url }) .run() editor.commands.enter() setOpen(false) }, [editor] ) return ( ) } export { LinkEditPopover } 67:Td37,import * as React from "react" import type { Editor } from "@tiptap/react" import { ChevronDownIcon } from "lucide-react" import { cn } from "@/lib/utils" import { Menu, MenuContent, MenuItem, } from "@/components/ui/preskok-ui/menu" import type { ToggleProps } from "@/components/ui/preskok-ui/toggle" import type { FormatAction } from "../types" import { getShortcutKey } from "../utils" import { ShortcutKey } from "./shortcut-key" import { ToolbarButton } from "./toolbar-button" interface ToolbarSectionProps extends ToggleProps { editor: Editor actions: Array activeActions?: Array mainActionCount?: number dropdownIcon?: React.ReactNode dropdownTooltip?: string dropdownClassName?: string } export const ToolbarSection: React.FC = ({ editor, actions, activeActions: _activeActions, mainActionCount = 0, dropdownIcon, dropdownTooltip = "More options", dropdownClassName = "w-12", size, }) => { const activeActions = _activeActions ?? actions.map((action) => action.value) const { mainActions, dropdownActions } = React.useMemo(() => { const sortedActions = actions .filter((action) => activeActions.includes(action.value)) .sort( (a, b) => activeActions.indexOf(a.value) - activeActions.indexOf(b.value) ) return { mainActions: sortedActions.slice(0, mainActionCount), dropdownActions: sortedActions.slice(mainActionCount), } }, [actions, activeActions, mainActionCount]) const renderToolbarButton = React.useCallback( (action: FormatAction) => ( { action.action(editor) }} isActive={action.isActive(editor)} isDisabled={!action.canExecute(editor)} tooltip={`${action.label} ${action.shortcuts.map((s) => getShortcutKey(s).symbol).join(" ")}`} aria-label={action.label} size={size} > {action.icon} ), [editor, size] ) const renderDropdownMenuItem = React.useCallback( (action: FormatAction) => ( { action.action(editor) }} isDisabled={!action.canExecute(editor)} className={cn("flex flex-row items-center justify-between gap-4", { "bg-accent": action.isActive(editor), })} aria-label={action.label} > {action.label} ), [editor] ) const isDropdownActive = dropdownActions.some((action) => action.isActive(editor) ) return ( <> {mainActions.map(renderToolbarButton)} {dropdownActions.length > 0 && ( {dropdownIcon || } {dropdownActions.map(renderDropdownMenuItem)} )} ) } 68:T41d,import * as React from "react" import { cn } from "@/lib/utils" import { getShortcutKey } from "../utils" export interface ShortcutKeyProps extends React.ComponentProps<"span"> { keys: Array } export const ShortcutKey = ({ ref, className, keys, ...props }: ShortcutKeyProps) => { const modifiedKeys = keys.map((key) => getShortcutKey(key)) const ariaLabel = modifiedKeys .map((shortcut) => shortcut.readable) .join(" + ") return ( {modifiedKeys.map((shortcut) => ( {shortcut.symbol} ))} ) } ShortcutKey.displayName = "ShortcutKey" 69:Tc3e,import * as React from "react" import type { Editor } from "@tiptap/react" import { BubbleMenu } from "@tiptap/react/menus" import type { ShouldShowProps } from "../../types" import { LinkEditBlock } from "../link/link-edit-block" import { LinkPopoverBlock } from "../link/link-popover-block" interface LinkBubbleMenuProps { editor: Editor } interface LinkAttributes { href: string target: string } export const LinkBubbleMenu: React.FC = ({ editor }) => { const [showEdit, setShowEdit] = React.useState(false) const [linkAttrs, setLinkAttrs] = React.useState({ href: "", target: "", }) const [selectedText, setSelectedText] = React.useState("") const updateLinkState = React.useCallback(() => { const { from, to } = editor.state.selection const { href, target } = editor.getAttributes("link") as LinkAttributes const text = editor.state.doc.textBetween(from, to, " ") setLinkAttrs({ href, target }) setSelectedText(text) }, [editor]) const shouldShow = React.useCallback( ({ editor, from, to }: ShouldShowProps) => { if (from === to) { return false } const { href } = editor.getAttributes("link") as LinkAttributes if (!editor.isActive("link") || !editor.isEditable) { return false } if (href) { updateLinkState() return true } return false }, [updateLinkState] ) const handleEdit = React.useCallback(() => { setShowEdit(true) }, []) const onSetLink = React.useCallback( (url: string, text?: string, openInNewTab?: boolean) => { editor .chain() .focus() .extendMarkRange("link") .insertContent({ type: "text", text: text || url, marks: [ { type: "link", attrs: { href: url, target: openInNewTab ? "_blank" : "", }, }, ], }) .setLink({ href: url, target: openInNewTab ? "_blank" : "" }) .run() setShowEdit(false) updateLinkState() }, [editor, updateLinkState] ) const onUnsetLink = React.useCallback(() => { editor.chain().focus().extendMarkRange("link").unsetLink().run() setShowEdit(false) updateLinkState() }, [editor, updateLinkState]) return ( { setShowEdit(false) }, }} >

{showEdit ? ( ) : ( )}

) } 6a:T56f,"use client" import { useCallback, useEffect, useState } from "react" const DEFAULT_RECT: DOMRect = { top: 0, left: 0, bottom: 0, right: 0, x: 0, y: 0, width: 0, height: 0, toJSON: () => "{}", } export function useContainerSize(element: Element | null): DOMRect { const [size, setSize] = useState( () => element?.getBoundingClientRect() ?? DEFAULT_RECT ) const handleResize = useCallback(() => { if (!element) { return } const newRect = element.getBoundingClientRect() setSize((prevRect) => { if ( Math.round(prevRect.width) === Math.round(newRect.width) && Math.round(prevRect.height) === Math.round(newRect.height) && Math.round(prevRect.x) === Math.round(newRect.x) && Math.round(prevRect.y) === Math.round(newRect.y) ) { return prevRect } return newRect }) }, [element]) useEffect(() => { if (!element) { return } const resizeObserver = new ResizeObserver(handleResize) resizeObserver.observe(element) window.addEventListener("click", handleResize) window.addEventListener("resize", handleResize) return () => { resizeObserver.disconnect() window.removeEventListener("click", handleResize) window.removeEventListener("resize", handleResize) } }, [element, handleResize]) return size } 6b:T579,"use client" import { useMemo } from "react" import type { Editor } from "@tiptap/react" import { useCurrentEditor, useEditorState } from "@tiptap/react" /** * Hook that provides access to a Tiptap editor instance. * * Accepts an optional editor instance directly, or falls back to retrieving * the editor from the Tiptap context if available. This allows components * to work both when given an editor directly and when used within a Tiptap * editor context. * * @param providedEditor - Optional editor instance to use instead of the context editor * @returns The provided editor or the editor from context, whichever is available */ export function useEditorContext(providedEditor?: Editor | null): { editor: Editor | null editorState?: Editor["state"] canCommand?: Editor["can"] } { const { editor: coreEditor } = useCurrentEditor() const mainEditor = useMemo( () => providedEditor || coreEditor, [providedEditor, coreEditor] ) const editorState = useEditorState({ editor: mainEditor, selector(context) { if (!context.editor) { return { editor: null, editorState: undefined, canCommand: undefined, } } return { editor: context.editor, editorState: context.editor.state, canCommand: context.editor.can, } }, }) return editorState || { editor: null } } 6c:Td14,"use client" import * as React from "react" import { TextStyle } from "@tiptap/extension-text-style" import { Typography } from "@tiptap/extension-typography" import { Placeholder, Selection } from "@tiptap/extensions" import type { Content, Editor, UseEditorOptions } from "@tiptap/react" import { useEditor as useTiptapEditor } from "@tiptap/react" import { StarterKit } from "@tiptap/starter-kit" import { cn } from "@/lib/utils" import { Color } from "../extensions/color" import { HorizontalRule } from "../extensions/horizontal-rule" import { ResetMarksOnEnter } from "../extensions/reset-marks-on-enter" import { UnsetAllMarks } from "../extensions/unset-all-marks" import { getOutput } from "../utils" import { useThrottle } from "./use-throttle" export interface UseEditorProps extends UseEditorOptions { value?: Content output?: "html" | "json" | "text" placeholder?: string editorClassName?: string throttleDelay?: number onUpdate?: (content: Content) => void onBlur?: (content: Content) => void } const createExtensions = ({ placeholder }: { placeholder: string }) => [ StarterKit.configure({ blockquote: { HTMLAttributes: { class: "block-node" } }, // bold bulletList: { HTMLAttributes: { class: "list-node" } }, code: false, codeBlock: false, // document dropcursor: { width: 2, class: "ProseMirror-dropcursor border" }, // gapcursor // hardBreak heading: { HTMLAttributes: { class: "heading-node" } }, // undoRedo horizontalRule: false, // italic // listItem // listKeymap link: { enableClickSelection: true, openOnClick: false, HTMLAttributes: { class: "link", }, }, orderedList: { HTMLAttributes: { class: "list-node" } }, paragraph: { HTMLAttributes: { class: "text-node" } }, // strike // text // underline // trailingNode }), Color, TextStyle, Selection, Typography, UnsetAllMarks, HorizontalRule, ResetMarksOnEnter, Placeholder.configure({ placeholder: () => placeholder }), ] export const useEditor = ({ value, output = "html", placeholder = "", editorClassName, throttleDelay = 0, onUpdate, onBlur, ...props }: UseEditorProps) => { const throttledSetValue = useThrottle( (value: Content) => onUpdate?.(value), throttleDelay ) const handleUpdate = React.useCallback( (editor: Editor) => { throttledSetValue(getOutput(editor, output)) }, [output, throttledSetValue] ) const handleCreate = React.useCallback( (editor: Editor) => { if (value && editor.isEmpty) { editor.commands.setContent(value) } }, [value] ) const handleBlur = React.useCallback( (editor: Editor) => onBlur?.(getOutput(editor, output)), [output, onBlur] ) const editor = useTiptapEditor({ immediatelyRender: false, extensions: createExtensions({ placeholder }), editorProps: { attributes: { autocomplete: "off", autocorrect: "off", autocapitalize: "off", class: cn("focus:outline-hidden", editorClassName), }, }, onUpdate: ({ editor }) => { handleUpdate(editor) }, onCreate: ({ editor }) => { handleCreate(editor) }, onBlur: ({ editor }) => handleBlur(editor), ...props, }) return editor } 56:["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L5a",null,{"files":[{"path":"registry/preskok/ui/preskok-ui/editor/editor.tsx","content":"$5b","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/utils.ts","content":"$5c","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/extensions/horizontal-rule.ts","content":"import { HorizontalRule as TiptapHorizontalRule } from \"@tiptap/extension-horizontal-rule\"\n\nexport const HorizontalRule = TiptapHorizontalRule.extend({\n addKeyboardShortcuts() {\n return {\n \"Mod-Alt--\": () =>\n this.editor.commands.insertContent({\n type: this.name,\n }),\n }\n },\n})\n","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/extensions/reset-marks-on-enter.ts","content":"import { Extension } from \"@tiptap/react\"\n\nexport const ResetMarksOnEnter = Extension.create({\n name: \"resetMarksOnEnter\",\n\n addKeyboardShortcuts() {\n return {\n Enter: ({ editor }) => {\n if (\n editor.isActive(\"bold\") ||\n editor.isActive(\"italic\") ||\n editor.isActive(\"strike\") ||\n editor.isActive(\"underline\") ||\n editor.isActive(\"code\")\n ) {\n editor.commands.splitBlock({ keepMarks: false })\n\n return true\n }\n\n return false\n },\n }\n },\n})\n","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/extensions/unset-all-marks.ts","content":"import { Extension } from \"@tiptap/react\"\n\nexport const UnsetAllMarks = Extension.create({\n addKeyboardShortcuts() {\n return {\n \"Mod-\\\\\": () => this.editor.commands.unsetAllMarks(),\n }\n },\n})\n","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/extensions/color.ts","content":"import { Color as TiptapColor } from \"@tiptap/extension-color\"\nimport { Plugin } from \"@tiptap/pm/state\"\n\nexport const Color = TiptapColor.extend({\n addProseMirrorPlugins() {\n return [\n ...(this.parent?.() || []),\n new Plugin({\n props: {\n handleKeyDown: (_, event) => {\n if (event.key === \"Enter\") {\n this.editor.commands.unsetColor()\n }\n return false\n },\n },\n }),\n ]\n },\n})\n","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/types.ts","content":"import type { EditorState } from \"@tiptap/pm/state\"\nimport type { EditorView } from \"@tiptap/pm/view\"\nimport type { Editor } from \"@tiptap/react\"\n\nexport interface LinkProps {\n url: string\n text?: string\n openInNewTab?: boolean\n}\n\nexport interface ShouldShowProps {\n editor: Editor\n view: EditorView\n state: EditorState\n oldState?: EditorState\n from: number\n to: number\n}\n\nexport interface FormatAction {\n label: string\n icon?: React.ReactNode\n action: (editor: Editor) => void\n isActive: (editor: Editor) => boolean\n canExecute: (editor: Editor) => boolean\n shortcuts: Array\n value: string\n}\n","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/styles/index.css","content":"$5d","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/styles/partials/typography.css","content":".rich-text-editor .ProseMirror .heading-node {\n @apply relative font-semibold;\n}\n\n.rich-text-editor .ProseMirror .heading-node:first-child {\n @apply mt-0;\n}\n\n.rich-text-editor .ProseMirror h1 {\n @apply mt-[46px] mb-4 text-[1.375rem] leading-7 tracking-[-0.004375rem];\n}\n\n.rich-text-editor .ProseMirror h2 {\n @apply mt-8 mb-3.5 text-[1.1875rem] leading-7 tracking-[0.003125rem];\n}\n\n.rich-text-editor .ProseMirror h3 {\n @apply mt-6 mb-3 text-[1.0625rem] leading-6 tracking-[0.00625rem];\n}\n\n.rich-text-editor .ProseMirror h4 {\n @apply mt-4 mb-2 text-[0.9375rem] leading-6;\n}\n\n.rich-text-editor .ProseMirror h5 {\n @apply mt-4 mb-2 text-sm;\n}\n\n.rich-text-editor .ProseMirror h5 {\n @apply mt-4 mb-2 text-sm;\n}\n\n.rich-text-editor .ProseMirror a.link {\n @apply text-primary underline;\n}\n\n.rich-text-editor .ProseMirror a.link:hover {\n @apply underline;\n}\n","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/styles/partials/placeholder.css","content":".rich-text-editor .ProseMirror > p.is-editor-empty::before {\n content: attr(data-placeholder);\n @apply pointer-events-none float-left h-0 text-[var(--mt-secondary)];\n}\n","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/styles/partials/lists.css","content":".rich-text-editor .ProseMirror ol {\n @apply list-decimal;\n}\n\n.rich-text-editor .ProseMirror ol ol {\n list-style: lower-alpha;\n}\n\n.rich-text-editor .ProseMirror ol ol ol {\n list-style: lower-roman;\n}\n\n.rich-text-editor .ProseMirror ul {\n list-style: disc;\n}\n\n.rich-text-editor .ProseMirror ul ul {\n list-style: circle;\n}\n\n.rich-text-editor .ProseMirror ul ul ul {\n list-style: square;\n}\n","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/components/section/three.tsx","content":"$5e","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/components/section/two.tsx","content":"$5f","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/components/section/four.tsx","content":"$60","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/components/section/one.tsx","content":"$61","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/components/section/five.tsx","content":"$62","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/components/toolbar-button.tsx","content":"$63","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/components/measured-container.tsx","content":"import * as React from \"react\"\n\nimport { useContainerSize } from \"../hooks/use-container-size\"\n\ninterface MeasuredContainerProps {\n as: T\n name: string\n children?: React.ReactNode\n}\n\nexport const MeasuredContainer = ({\n as: Component,\n name,\n children,\n style,\n ...props\n}: MeasuredContainerProps & React.ComponentProps) => {\n const [element, setElement] = React.useState(null)\n const rect = useContainerSize(element)\n const setRef = React.useCallback((node: HTMLElement | null) => {\n setElement(node)\n }, [])\n\n const customStyle = {\n [`--${name}-width`]: `${rect.width}px`,\n [`--${name}-height`]: `${rect.height}px`,\n }\n\n return (\n \n {children}\n \n )\n}\n\nMeasuredContainer.displayName = \"MeasuredContainer\"\n","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/components/link/link-edit-block.tsx","content":"$64","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/components/link/link-popover-block.tsx","content":"$65","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/components/link/link-edit-popover.tsx","content":"$66","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/components/toolbar-section.tsx","content":"$67","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/components/shortcut-key.tsx","content":"$68","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/components/bubble-menu/link-bubble-menu.tsx","content":"$69","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/hooks/use-throttle.ts","content":"\"use client\"\n\nimport { useCallback, useRef } from \"react\"\n\nexport function useThrottle void>(\n callback: T,\n delay: number\n): (...args: Parameters) => void {\n const lastRan = useRef(0)\n const timeoutRef = useRef(null)\n\n return useCallback(\n (...args: Parameters) => {\n const handler = () => {\n if (Date.now() - lastRan.current >= delay) {\n callback(...args)\n lastRan.current = Date.now()\n } else {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current)\n }\n timeoutRef.current = setTimeout(\n () => {\n callback(...args)\n lastRan.current = Date.now()\n },\n delay - (Date.now() - lastRan.current)\n )\n }\n }\n\n handler()\n },\n [callback, delay]\n )\n}\n","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/hooks/use-container-size.ts","content":"$6a","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/hooks/use-editor-context.ts","content":"$6b","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/hooks/use-editor.ts","content":"$6c","type":"registry:ui"},{"path":"registry/preskok/ui/preskok-ui/editor/hooks/use-theme.ts","content":"\"use client\"\n\nimport * as React from \"react\"\n\nexport const useTheme = () => {\n return React.useSyncExternalStore(\n (onStoreChange) => {\n const darkModeMediaQuery = window.matchMedia(\n \"(prefers-color-scheme: dark)\"\n )\n darkModeMediaQuery.addEventListener(\"change\", onStoreChange)\n return () =>\n darkModeMediaQuery.removeEventListener(\"change\", onStoreChange)\n },\n () => window.matchMedia(\"(prefers-color-scheme: dark)\").matches,\n () => false\n )\n}\n","type":"registry:ui"}]}]]}] 57:["$","section",null,{"className":"flex flex-col gap-4","id":"styles","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Styles"}],["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @4xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L6d",null,{"className":"overflow-auto max-h-80 px-2","children":[["$","$L6e",null,{"orientation":"vertical"}],["$","$L6e",null,{"orientation":"horizontal"}],["$","p",null,{"className":"text-sm text-foreground/70 py-2","children":"No variables found."}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L6d",null,{"className":"overflow-auto max-h-80 px-2","children":[["$","$L6e",null,{"orientation":"vertical"}],["$","$L6e",null,{"orientation":"horizontal"}],["$","p",null,{"className":"text-sm text-foreground/70 py-2","children":"No variables found."}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L6d",null,{"className":"overflow-auto max-h-80 px-2","children":[["$","$L6e",null,{"orientation":"vertical"}],["$","$L6e",null,{"orientation":"horizontal"}],["$","p",null,{"className":"text-sm text-foreground/70 py-2","children":"No variables found."}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","p",null,{"className":"text-sm text-foreground/70 py-2 px-2","children":"No CSS found."}]}]]}]]}]}]]}]