5f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 60:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tiptap/extension-find-and-replace"}] 51:["$","li","@tiptap/extension-image",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tiptap%2Fextension-image","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"@tiptap/extension-image"}]]}]}] 52:["$","li","@tiptap/extension-list",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tiptap%2Fextension-list","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"@tiptap/extension-list"}]]}]}] 53:["$","li","@tiptap/extension-mention",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tiptap%2Fextension-mention","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"@tiptap/extension-mention"}]]}]}] 54:["$","li","@tiptap/extension-table",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tiptap%2Fextension-table","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"@tiptap/extension-table"}]]}]}] 55:["$","li","@tiptap/extensions",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tiptap%2Fextensions","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"@tiptap/extensions"}]]}]}] 56:["$","li","@tiptap/extension-text-style",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tiptap%2Fextension-text-style","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"@tiptap/extension-text-style"}]]}]}] 57:["$","li","@tiptap/markdown",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tiptap%2Fmarkdown","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"@tiptap/markdown"}]]}]}] 58:["$","li","@tiptap/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tiptap%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"@tiptap/react"}]]}]}] 59:["$","li","@tiptap/starter-kit",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tiptap%2Fstarter-kit","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"@tiptap/starter-kit"}]]}]}] 5a:["$","li","@tiptap/suggestion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tiptap%2Fsuggestion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"@tiptap/suggestion"}]]}]}] 5b:["$","li","clsx@^2.1.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"clsx@^2.1.1"}]]}]}] 5c:["$","li","tailwind-merge@^3.6.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge@^3.6.0"}]]}]}] 5d:["$","$L5f",null,{"namespace":"@emend","registryDependencies":["button","input","input-group","popover","select","separator","tooltip","@emend/color-picker"]}] 61:T704,"use client" import type { Editor } from "@tiptap/core" import { useEditorState } from "@tiptap/react" import { BubbleMenu } from "@tiptap/react/menus" import { TextBoldIcon, TextItalicIcon, TextUnderlineIcon, } from "@hugeicons/core-free-icons" import { EditorLinkControl } from "./editor-link-control" import { controlTrigger, EditorControl } from "./editor-toolbar" const bubbleMenuOptions = { placement: "top" as const, offset: 8, flip: true, shift: true, } export function EditorBubbleMenu({ editor }: { readonly editor: Editor }) { const active = useEditorState({ editor, selector: ({ editor: currentEditor }) => ({ bold: currentEditor.isActive("bold"), italic: currentEditor.isActive("italic"), underline: currentEditor.isActive("underline"), }), }) return (

editor.chain().focus().toggleBold().run()} /> editor.chain().focus().toggleItalic().run()} /> editor.chain().focus().toggleUnderline().run()} /> controlTrigger(linkActive)} />

) } 62:Tf11,"use client" import type { Editor } from "@tiptap/core" import { PaintBucketIcon, TextColorIcon } from "@hugeicons/core-free-icons" import { HugeiconsIcon } from "@hugeicons/react" import { useRef, useState, type ReactElement } from "react" import { ColorPicker, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerFormat, ColorPickerHue, ColorPickerOutput, ColorPickerSelection, } from "@/components/emend/color-picker" import { Button } from "@/components/ui/button" import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover" import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip" const colorControls = { text: { label: "Text color", icon: TextColorIcon, reset: "Default color" }, background: { label: "Background color", icon: PaintBucketIcon, reset: "No background", }, } as const export function EditorColorControl({ editor, type, color, trigger, strokeWidth, }: { readonly editor: Editor readonly type: keyof typeof colorControls readonly color: string | null readonly trigger: (active: boolean) => ReactElement readonly strokeWidth?: number }) { const [open, setOpen] = useState(false) const historyGroup = useRef({}) const { label, icon, reset } = colorControls[type] // Mark-only steps never count as adjacent in ProseMirror history, so every // drag tick would become its own undo event. A shared composition id merges // all changes made while this picker is open into one event. function applyColor(value: string) { const chain = editor.chain().setMeta("composition", historyGroup.current) if (type === "text") chain.setColor(value).run() else chain.setBackgroundColor(value).run() } function resetColor() { setOpen(false) if (type === "text") editor.chain().focus().unsetColor().run() else editor.chain().focus().unsetBackgroundColor().run() } return ( { if (nextOpen) historyGroup.current = {} setOpen(nextOpen) }} > event.preventDefault()} /> } > {color && ( )} {label} { if (closeType === "keyboard") editor.commands.focus() return false }} >

) } 63:T1926,"use client" import type { Editor } from "@tiptap/core" import { useEditorState } from "@tiptap/react" import { ArrowDown01Icon, ArrowUp01Icon, Cancel01Icon, Search01Icon, } from "@hugeicons/core-free-icons" import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/react" import { useId, useState, type KeyboardEvent, type ReactElement } from "react" import { Button } from "@/components/ui/button" import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/components/ui/input-group" import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip" import { cn } from "@/lib/utils" export function EditorFindReplace({ editor, trigger, strokeWidth, className, }: { readonly editor: Editor readonly trigger: (active: boolean) => ReactElement readonly strokeWidth?: number readonly className?: string }) { const id = useId() const [open, setOpen] = useState(false) const [term, setTerm] = useState("") const [replacement, setReplacement] = useState("") const { count, currentIndex } = useEditorState({ editor, selector: ({ editor: currentEditor }) => ({ count: currentEditor.storage.findAndReplace.results.length, currentIndex: currentEditor.storage.findAndReplace.currentIndex, }), }) const panelId = `${id}-panel` const position = count === 0 ? 0 : (currentIndex ?? 0) + 1 function close() { setOpen(false) setTerm("") setReplacement("") editor.chain().clearSearch().setReplaceTerm("").focus().run() } function handleKeyDown( event: KeyboardEvent, onEnter: () => void ) { if (event.key === "Escape") { event.preventDefault() close() } if (event.key === "Enter") { event.preventDefault() onEnter() } } return ( <> event.preventDefault()} onClick={() => (open ? close() : setOpen(true))} > Find and replace {open && ( )} ) } function PanelButton({ label, icon, disabled, onClick, }: { readonly label: string readonly icon: IconSvgElement readonly disabled?: boolean readonly onClick: () => void }) { return ( } /> {label} ) } 64:T200d,"use client" import type { Editor } from "@tiptap/core" import { Image02Icon, Upload04Icon } from "@hugeicons/core-free-icons" import { HugeiconsIcon } from "@hugeicons/react" import { useId, useRef, useState, type FormEvent, type ReactElement, } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover" import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip" export type EditorImageUpload = (file: File) => Promise const imageTypes = [ "image/png", "image/jpeg", "image/gif", "image/webp", "image/avif", ] const maxEmbeddedImageSize = 2 * 1024 * 1024 function readFileAsDataUrl(file: File) { return new Promise((resolve, reject) => { const reader = new FileReader() reader.onload = () => resolve(String(reader.result)) reader.onerror = () => reject(reader.error) reader.readAsDataURL(file) }) } function loadImage(src: string) { return new Promise((resolve, reject) => { const image = new window.Image() image.onload = () => resolve() image.onerror = () => reject(new Error("Image failed to load")) image.src = src }) } function normalizeImageUrl(value: string) { const text = value.trim() if (!text || /\s/.test(text)) return null if (text.startsWith("/") && !text.startsWith("//")) return text try { const url = new URL(text) return url.protocol === "https:" || url.protocol === "http:" ? text : null } catch { return null } } function validateFile(file: File, embedded: boolean) { if (!imageTypes.includes(file.type)) { return "Choose a PNG, JPEG, GIF, WebP or AVIF image" } if (embedded && file.size > maxEmbeddedImageSize) { return "Choose an image smaller than 2 MB" } return null } export function EditorImageControl({ editor, trigger, strokeWidth, onUpload, }: { readonly editor: Editor readonly trigger: (active: boolean) => ReactElement readonly strokeWidth?: number readonly onUpload?: EditorImageUpload }) { const id = useId() const fileInput = useRef(null) const range = useRef({ from: 0, to: 0 }) const doc = useRef(editor.state.doc) const request = useRef(0) const [open, setOpen] = useState(false) const [file, setFile] = useState(null) const [url, setUrl] = useState("") const [alt, setAlt] = useState("") const [pending, setPending] = useState(false) const [error, setError] = useState(null) function changeOpen(nextOpen: boolean) { request.current += 1 if (nextOpen) { const { from, to } = editor.state.selection range.current = { from, to } doc.current = editor.state.doc setFile(null) setUrl("") setAlt("") setError(null) } setPending(false) setOpen(nextOpen) } async function resolveSource() { if (file) { const fileError = validateFile(file, !onUpload) if (fileError) throw new Error(fileError) const src = onUpload ? await onUpload(file) : await readFileAsDataUrl(file) await loadImage(src).catch(() => { throw new Error("This image could not be read") }) return src } const src = normalizeImageUrl(url) if (!src) { throw new Error("Enter an image URL, like https://example.com/image.png") } await loadImage(src).catch(() => { throw new Error("No image could be loaded from this URL") }) return src } async function submit(event: FormEvent) { event.preventDefault() if (pending) return if (!file && !url.trim()) { setError("Choose an image file or enter an image URL") return } const current = ++request.current setPending(true) setError(null) try { const src = await resolveSource() if (current !== request.current) return if (editor.state.doc !== doc.current) { throw new Error( "The document changed while the image was loading. Close this and choose where to insert it again." ) } editor .chain() .focus() .insertContentAt(range.current, { type: "image", attrs: { src, alt: alt.trim() || null }, }) .run() changeOpen(false) } catch (reason) { if (current !== request.current) return setPending(false) setError( reason instanceof Error && reason.message ? reason.message : "The image could not be added" ) } } const errorId = `${id}-error` return ( event.preventDefault()} /> } > Insert image { if (closeType === "keyboard") editor.commands.focus() return false }} >

void submit(event)} noValidate > { const nextFile = event.target.files?.[0] ?? null event.target.value = "" if (!nextFile) return setFile(nextFile) setUrl("") setError(validateFile(nextFile, !onUpload)) }} />

{ setUrl(event.target.value) setFile(null) setError(null) }} /> setAlt(event.target.value)} /> {error && (

{error}

)}

) } 65:T13c2,"use client" import { Mention } from "@tiptap/extension-mention" import { ReactRenderer } from "@tiptap/react" import type { SuggestionKeyDownProps, SuggestionProps, } from "@tiptap/suggestion" import { forwardRef, useEffect, useImperativeHandle, useState } from "react" import { cn } from "@/lib/utils" export interface EditorMentionItem { readonly id: string readonly label: string } export const editorMentionItems: readonly EditorMentionItem[] = [ { id: "ai-bubble-menu", label: "AI Bubble Menu" }, { id: "ai-composer", label: "AI Composer" }, { id: "ai-assistant", label: "AI Assistant" }, { id: "emend-editor", label: "Emend Editor" }, ] interface MentionListProps { readonly command: (item: EditorMentionItem) => void readonly items: readonly EditorMentionItem[] } interface MentionListRef { readonly onKeyDown: (props: SuggestionKeyDownProps) => boolean } const MentionList = forwardRef( function MentionList({ command, items }, ref) { const [active, setActive] = useState(0) useEffect(() => setActive(0), [items]) function select(index: number) { const item = items[index] if (item) command(item) } useImperativeHandle(ref, () => ({ onKeyDown: ({ event }) => { if (items.length === 0) return false if (event.key === "ArrowDown") { setActive((current) => (current + 1) % items.length) return true } if (event.key === "ArrowUp") { setActive((current) => (current + items.length - 1) % items.length) return true } if (event.key === "Enter") { select(active) return true } return false }, })) if (items.length === 0) return null return ( ) } ) export function createEditorMention(items: readonly EditorMentionItem[]) { return Mention.configure({ HTMLAttributes: { class: "emend-editor__mention" }, suggestion: { char: "@", items: ({ query }) => items.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()) ), render: () => { let component: ReactRenderer | null = null let clientRect: SuggestionProps["clientRect"] = null function position() { const element = component?.element const rect = clientRect?.() if (!(element instanceof HTMLElement) || !rect) return const { offsetWidth: width, offsetHeight: height } = element const below = rect.bottom + 4 const top = below + height > window.innerHeight && rect.top - 4 - height >= 0 ? rect.top - 4 - height : below const left = Math.max( 4, Math.min(rect.left, window.innerWidth - width - 4) ) Object.assign(element.style, { position: "fixed", top: `${top}px`, left: `${left}px`, zIndex: "50", }) } return { onStart: (props: SuggestionProps) => { component = new ReactRenderer(MentionList, { props, editor: props.editor, }) clientRect = props.clientRect document.body.appendChild(component.element) window.addEventListener("scroll", position, true) window.addEventListener("resize", position) position() requestAnimationFrame(position) }, onUpdate: (props: SuggestionProps) => { component?.updateProps(props) clientRect = props.clientRect requestAnimationFrame(position) }, onKeyDown: (props) => component?.ref?.onKeyDown(props) ?? false, onExit: () => { window.removeEventListener("scroll", position, true) window.removeEventListener("resize", position) component?.element.remove() component?.destroy() component = null clientRect = null }, } }, }, }) } 66:T252a,"use client" import { Popover as PopoverPrimitive } from "@base-ui/react/popover" import { getMarkRange, posToDOMRect, type Editor, type EditorEvents, } from "@tiptap/core" import { useEditorState } from "@tiptap/react" import { Link01Icon, LinkSquare02Icon, Unlink02Icon, } from "@hugeicons/core-free-icons" import { HugeiconsIcon } from "@hugeicons/react" import { useEffect, useId, useState, type FormEvent, type ReactElement, } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip" interface LinkDraft { readonly from: number readonly to: number readonly selection: { readonly from: number; readonly to: number } readonly existing: boolean readonly doc: Editor["state"]["doc"] } function normalizeLinkUrl(value: string) { const text = value.trim() if (!text || /\s/.test(text)) return null if (/^(?:[/#?]|\.\.?\/)/.test(text)) return text const href = /^(https?:\/\/|mailto:|tel:)/i.test(text) ? text : `https://${text}` try { const url = new URL(href) if (url.protocol === "mailto:" || url.protocol === "tel:") { return url.pathname ? href : null } return url.hostname.includes(".") || url.hostname === "localhost" ? href : null } catch { return null } } export function EditorLinkControl({ editor, trigger, strokeWidth, }: { readonly editor: Editor readonly trigger: (active: boolean) => ReactElement readonly strokeWidth?: number }) { const id = useId() const active = useEditorState({ editor, selector: ({ editor: currentEditor }) => currentEditor.isActive("link"), }) const [draft, setDraft] = useState(null) const [href, setHref] = useState("") const [text, setText] = useState("") const [error, setError] = useState(null) const isOpen = Boolean(draft) useEffect(() => { if (!isOpen) return const closeOnDocChange = ({ transaction, }: EditorEvents["transaction"]) => { if (transaction.docChanged) setDraft(null) } editor.on("transaction", closeOnDocChange) return () => { editor.off("transaction", closeOnDocChange) } }, [editor, isOpen]) function isStale() { if (draft && editor.state.doc === draft.doc) return false setDraft(null) return true } function openDraft() { const { selection, schema } = editor.state const { from, to, empty, $from } = selection const linkType = schema.marks.link const linkRange = empty && linkType ? getMarkRange($from, linkType) : null const range = linkRange ?? { from, to } setDraft({ ...range, selection: { from, to }, existing: editor.isActive("link"), doc: editor.state.doc, }) setHref(editor.getAttributes("link").href ?? "") setText("") setError(null) } function close() { setDraft(null) editor.commands.focus() } function submit(event: FormEvent) { event.preventDefault() if (!draft || isStale()) return const url = normalizeLinkUrl(href) if (!url) { setError("Enter a valid URL, like https://example.com") return } const applied = draft.from === draft.to ? editor .chain() .focus() .insertContentAt(draft.from, { type: "text", text: text.trim() || url, marks: [{ type: "link", attrs: { href: url } }], }) .run() : editor .chain() .focus() .setTextSelection({ from: draft.from, to: draft.to }) .setLink({ href: url }) .setTextSelection(draft.selection) .run() if (!applied) { setError("This link is not allowed") return } setDraft(null) } function removeLink() { if (!draft || isStale()) return editor .chain() .focus() .setTextSelection({ from: draft.from, to: draft.to }) .unsetLink() .setTextSelection(draft.selection) .run() setDraft(null) } const label = active ? "Edit link" : "Add link" const errorId = `${id}-error` const validHref = draft?.existing ? normalizeLinkUrl(href) : null return ( { if (open) openDraft() else setDraft(null) }} > event.preventDefault()} /> } > {label} draft ? { getBoundingClientRect: () => { const size = editor.state.doc.content.size return posToDOMRect( editor.view, Math.min(draft.from, size), Math.min(draft.to, size) ) }, } : null } side="bottom" align="start" sideOffset={8} className="isolate z-50" > { if (closeType === "keyboard") editor.commands.focus() return false }} >

{draft && draft.from === draft.to && ( setText(event.target.value)} /> )} { setHref(event.target.value) setError(null) }} /> {error && (

{error}

)}

{draft?.existing && ( <> } /> Remove link {validHref && ( } > } /> Open link in new tab )} )}

) } 67:Tbfe,"use client" import { ArrowLeft01Icon, ArrowRight01Icon } from "@hugeicons/core-free-icons" import { HugeiconsIcon } from "@hugeicons/react" import { useEffect, useRef, useState, type ReactNode } from "react" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" export function EditorToolbarScroller({ children, className, size = "icon", }: { readonly children: ReactNode readonly className?: string readonly size?: "icon" | "icon-xs" }) { const viewport = useRef(null) const content = useRef(null) const [overflow, setOverflow] = useState({ start: false, end: false }) useEffect(() => { const element = viewport.current if (!element || !content.current) return const update = () => { const maxScroll = element.scrollWidth - element.clientWidth setOverflow({ start: element.scrollLeft > 1, end: element.scrollLeft < maxScroll - 1, }) } const observer = new ResizeObserver(update) observer.observe(element) observer.observe(content.current) element.addEventListener("scroll", update, { passive: true }) update() return () => { observer.disconnect() element.removeEventListener("scroll", update) } }, []) function scroll(direction: 1 | -1) { const element = viewport.current if (!element) return element.scrollBy({ left: direction * element.clientWidth * 0.75, behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth", }) } const scrollable = overflow.start || overflow.end return (

{scrollable && ( scroll(-1)} /> )}

{children}

{scrollable && ( scroll(1)} /> )}

) } function ScrollButton({ direction, size, disabled, onClick, }: { readonly direction: 1 | -1 readonly size: "icon" | "icon-xs" readonly disabled: boolean readonly onClick: () => void }) { return ( ) } 68:T483e,"use client" import type { Editor } from "@tiptap/core" import { useEditorState } from "@tiptap/react" import { ALargeSmallIcon, AiEditingIcon, AiChat02Icon, AlignHorizontalCenterIcon, AlignLeftIcon, AlignRightIcon, AtIcon, CheckListIcon, CodeSimpleIcon, Delete02Icon, DeleteColumnIcon, DeleteRowIcon, GridTableIcon, HeadingIcon, HighlighterIcon, InsertColumnRightIcon, InsertRowDownIcon, LeftToRightBlockQuoteIcon, LeftToRightListBulletIcon, LeftToRightListNumberIcon, RedoIcon, SeparatorHorizontalIcon, SourceCodeIcon, TableRowsSplitIcon, TextBoldIcon, TextClearIcon, TextItalicIcon, TextStrikethroughIcon, TextUnderlineIcon, UndoIcon, } from "@hugeicons/core-free-icons" import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/react" import type { ReactNode } from "react" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { Separator } from "@/components/ui/separator" import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip" import { cn } from "@/lib/utils" import { EditorColorControl } from "./editor-color-control" import { EditorFindReplace } from "./editor-find-replace" import { EditorImageControl, type EditorImageUpload, } from "./editor-image-control" import { EditorLinkControl } from "./editor-link-control" import { EditorToolbarScroller } from "./editor-toolbar-scroller" const headingLevels = [1, 2, 3, 4, 5, 6] as const const fontSizeOptions = ["12", "14", "16", "18", "24", "32"] as const const highlightColor = "color-mix(in oklch, var(--chart-1) 45%, transparent)" export type EditorToolbarVariant = "compact" | "classic" type ControlSize = "icon" | "icon-xs" export function EditorToolbar({ editor, variant = "compact", onSave, onAssistantToggle, onComposerToggle, onImageUpload, saveDisabled, saveStatus, assistantOpen, composerOpen, toolbarActions, }: { readonly editor: Editor readonly variant?: EditorToolbarVariant readonly onSave?: () => Promise readonly onAssistantToggle?: () => void readonly onComposerToggle?: () => void readonly onImageUpload?: EditorImageUpload readonly saveDisabled: boolean readonly saveStatus: "idle" | "saving" | "success" | "error" readonly assistantOpen?: boolean readonly composerOpen?: boolean readonly toolbarActions?: ReactNode }) { const compact = variant === "compact" const size: ControlSize = compact ? "icon-xs" : "icon" const strokeWidth = compact ? 2 : undefined const trigger = (active: boolean) => controlTrigger(active, size) const state = useEditorState({ editor, selector: ({ editor: currentEditor }) => { const heading = headingLevels.find((level) => currentEditor.isActive("heading", { level }) ) const cell = currentEditor.isActive("tableHeader") ? "tableHeader" : "tableCell" return { block: heading ? `heading-${heading}` : "paragraph", fontSize: currentEditor.getAttributes("textStyle").fontSize ?? null, bold: currentEditor.isActive("bold"), italic: currentEditor.isActive("italic"), underline: currentEditor.isActive("underline"), strike: currentEditor.isActive("strike"), code: currentEditor.isActive("code"), textColor: currentEditor.getAttributes("textStyle").color ?? null, backgroundColor: currentEditor.getAttributes("textStyle").backgroundColor ?? null, bulletList: currentEditor.isActive("bulletList"), orderedList: currentEditor.isActive("orderedList"), taskList: currentEditor.isActive("taskList"), blockquote: currentEditor.isActive("blockquote"), codeBlock: currentEditor.isActive("codeBlock"), inTable: currentEditor.isActive("table"), headerRow: currentEditor.isActive("tableHeader"), cellAlign: currentEditor.getAttributes(cell).align ?? "left", canUndo: currentEditor.can().undo(), canRedo: currentEditor.can().redo(), } }, }) const blockLabel = state.block === "paragraph" ? "Paragraph" : `Heading ${state.block.slice(-1)}` const parsedFontSize = state.fontSize ? String(Number.parseInt(state.fontSize, 10)) : null const fontSize = parsedFontSize && fontSizeOptions.some((size) => size === parsedFontSize) ? parsedFontSize : "auto" const saveLabel = saveStatus === "saving" ? "Saving…" : saveStatus === "success" ? "Saved" : saveStatus === "error" ? "Save failed" : "Save" function setBlock(value: string | null) { if (value === "paragraph") { editor.chain().focus().setParagraph().run() return } const level = headingLevels.find((level) => value === `heading-${level}`) if (level) editor.chain().focus().setHeading({ level }).run() } function setFontSize(value: string | null) { if (!value || value === "auto") { editor.chain().focus().unsetFontSize().run() return } editor.chain().focus().setFontSize(`${value}px`).run() } const historyControls = [ { label: "Undo", icon: UndoIcon, disabled: !state.canUndo, onClick: () => editor.chain().focus().undo().run(), }, { label: "Redo", icon: RedoIcon, disabled: !state.canRedo, onClick: () => editor.chain().focus().redo().run(), }, ] const inlineControls = [ { label: "Bold", icon: TextBoldIcon, active: state.bold, onClick: () => editor.chain().focus().toggleBold().run(), }, { label: "Italic", icon: TextItalicIcon, active: state.italic, onClick: () => editor.chain().focus().toggleItalic().run(), }, { label: "Underline", icon: TextUnderlineIcon, active: state.underline, onClick: () => editor.chain().focus().toggleUnderline().run(), }, { label: "Strikethrough", icon: TextStrikethroughIcon, active: state.strike, onClick: () => editor.chain().focus().toggleStrike().run(), }, { label: "Inline code", icon: CodeSimpleIcon, active: state.code, onClick: () => editor.chain().focus().toggleCode().run(), }, ] const colorControls = [ { label: "Highlight", icon: HighlighterIcon, active: Boolean(state.backgroundColor), onClick: () => { const chain = editor.chain().focus() if (state.backgroundColor) chain.unsetBackgroundColor().run() else chain.setBackgroundColor(highlightColor).run() }, }, { label: "Clear formatting", icon: TextClearIcon, onClick: () => editor.chain().focus().unsetAllMarks().clearNodes().run(), }, ] const blockControls = [ { label: "Bullet list", icon: LeftToRightListBulletIcon, active: state.bulletList, onClick: () => editor.chain().focus().toggleBulletList().run(), }, { label: "Numbered list", icon: LeftToRightListNumberIcon, active: state.orderedList, onClick: () => editor.chain().focus().toggleOrderedList().run(), }, { label: "Task list", icon: CheckListIcon, active: state.taskList, onClick: () => editor.chain().focus().toggleTaskList().run(), }, { label: "Blockquote", icon: LeftToRightBlockQuoteIcon, active: state.blockquote, onClick: () => editor.chain().focus().toggleBlockquote().run(), }, { label: "Code block", icon: SourceCodeIcon, active: state.codeBlock, onClick: () => editor.chain().focus().toggleCodeBlock().run(), }, ] const insertControls = state.inTable ? [ { label: "Add row below", icon: InsertRowDownIcon, onClick: () => editor.chain().focus().addRowAfter().run(), }, { label: "Delete row", icon: DeleteRowIcon, onClick: () => editor.chain().focus().deleteRow().run(), }, { label: "Add column right", icon: InsertColumnRightIcon, onClick: () => editor.chain().focus().addColumnAfter().run(), }, { label: "Delete column", icon: DeleteColumnIcon, onClick: () => editor.chain().focus().deleteColumn().run(), }, { label: "Toggle header row", icon: TableRowsSplitIcon, active: state.headerRow, onClick: () => editor.chain().focus().toggleHeaderRow().run(), }, { label: "Align left", icon: AlignLeftIcon, active: state.cellAlign === "left", onClick: () => editor.chain().focus().setCellAttribute("align", "left").run(), }, { label: "Align center", icon: AlignHorizontalCenterIcon, active: state.cellAlign === "center", onClick: () => editor.chain().focus().setCellAttribute("align", "center").run(), }, { label: "Align right", icon: AlignRightIcon, active: state.cellAlign === "right", onClick: () => editor.chain().focus().setCellAttribute("align", "right").run(), }, { label: "Delete table", icon: Delete02Icon, onClick: () => editor.chain().focus().deleteTable().run(), }, ] : [ { label: "Horizontal rule", icon: SeparatorHorizontalIcon, onClick: () => editor.chain().focus().setHorizontalRule().run(), }, { label: "Insert table", icon: GridTableIcon, onClick: () => editor .chain() .focus() .insertTable({ rows: 3, cols: 3, withHeaderRow: true }) .run(), }, ...(editor.schema.nodes.mention ? [ { label: "Mention", icon: AtIcon, onClick: () => editor.chain().focus().insertContent("@").run(), }, ] : []), ] const controlProps = { size, strokeWidth } return ( ) } interface EditorControlProps { readonly label: string readonly icon: IconSvgElement readonly active?: boolean readonly disabled?: boolean readonly size?: ControlSize readonly strokeWidth?: number readonly onClick: () => void } function ControlGroup({ label, controls, children, size, strokeWidth, }: { readonly label: string readonly controls: readonly EditorControlProps[] readonly children?: ReactNode readonly size: ControlSize readonly strokeWidth?: number }) { return (

{controls.map((control) => ( ))} {children}

) } export function controlTrigger(active: boolean, size: ControlSize = "icon") { return ( } /> {label} ) } 69:T1812,.emend-editor { container: emend-editor / inline-size; display: flex; width: 100%; height: 100%; max-width: 100%; min-width: 0; flex-direction: column; overflow: hidden; background: var(--background); color: var(--foreground); transition: box-shadow 150ms ease; } .emend-editor__toolbar { position: sticky; top: 0; z-index: 2; display: flex; min-width: 0; flex-shrink: 0; align-items: center; gap: 0.25rem; padding: 0.375rem; border-bottom: 1px solid var(--border); background: color-mix(in oklch, var(--background) 94%, var(--muted)); } .emend-editor__toolbar-group, .emend-editor__toolbar-section, .emend-editor__toolbar-actions { display: flex; flex-shrink: 0; align-items: center; gap: 0.25rem; } .emend-editor__toolbar-group, .emend-editor__toolbar-section { padding-inline: 0.375rem; } .emend-editor__separator { height: 1.25rem; align-self: center; } .emend-editor__block-type { width: 7.5rem; } .emend-editor__font-size { width: 5.5rem; } .emend-editor__toolbar[data-variant="compact"] { gap: 0.125rem; padding-inline: 0.25rem; } .emend-editor__toolbar[data-variant="compact"] .emend-editor__toolbar-group, .emend-editor__toolbar[data-variant="compact"] .emend-editor__toolbar-section, .emend-editor__toolbar[data-variant="compact"] .emend-editor__toolbar-actions { gap: 0.125rem; padding-inline: 0.25rem; } .emend-editor__toolbar[data-variant="compact"] .emend-editor__separator { height: 0.75rem; } .emend-editor__toolbar[data-variant="compact"] .emend-editor__block-type { width: 6.5rem; } .emend-editor__toolbar[data-variant="compact"] .emend-editor__font-size { width: 5rem; } .emend-editor__workspace, .emend-editor__main, .emend-editor__content { min-width: 0; min-height: 0; } .emend-editor__workspace { position: relative; flex: 1; } .emend-editor__main { position: relative; display: flex; height: 100%; flex-direction: column; } .emend-editor__main--ai { padding-bottom: 3.625rem; } .emend-editor__content { flex: 1; overflow-x: hidden; overflow-y: auto; } .emend-editor__ai-tools { position: absolute; right: 0; bottom: 1rem; left: 0; z-index: 2; width: min(100% - 2rem, 36rem); margin: 0 auto; } .emend-editor .emend-ai-target { border-radius: 0.25rem; background: color-mix(in oklch, var(--primary) 14%, transparent); box-decoration-break: clone; -webkit-box-decoration-break: clone; } .emend-editor .emend-editor__mention { border-radius: 0.25rem; background: color-mix(in oklch, var(--primary) 12%, transparent); padding: 0.1rem 0.3rem; color: var(--primary); font-weight: 500; } .emend-editor .find-and-replace-result { border-radius: 0.15rem; background: color-mix(in oklch, var(--chart-1) 45%, transparent); } .emend-editor .find-and-replace-result-current { background: color-mix(in oklch, var(--chart-2) 75%, transparent); } .emend-editor [data-emend-preview="true"] { margin-inline: 0.25rem; border-radius: 0.375rem; background: color-mix(in oklch, var(--chart-2) 20%, transparent); opacity: 0.8; } .emend-editor .ProseMirror { min-height: 32rem; max-width: 52rem; margin-inline: auto; padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem); outline: none; overflow-wrap: anywhere; } .emend-editor .ProseMirror > * + * { margin-top: 0.75rem; } .emend-editor .ProseMirror h1 { font-size: 2rem; font-weight: 650; line-height: 1.2; } .emend-editor .ProseMirror h2 { margin-top: 1.75rem; font-size: 1.5rem; font-weight: 650; line-height: 1.3; } .emend-editor .ProseMirror h3 { margin-top: 1.5rem; font-size: 1.25rem; font-weight: 650; } .emend-editor .ProseMirror h4, .emend-editor .ProseMirror h5, .emend-editor .ProseMirror h6 { margin-top: 1.25rem; font-weight: 650; } .emend-editor .ProseMirror blockquote { border-left: 3px solid var(--border); padding-left: 1rem; color: var(--muted-foreground); } .emend-editor .ProseMirror ul, .emend-editor .ProseMirror ol { padding-left: 1.5rem; } .emend-editor .ProseMirror ul { list-style: disc; } .emend-editor .ProseMirror ol { list-style: decimal; } .emend-editor .ProseMirror li + li { margin-top: 0.25rem; } .emend-editor .ProseMirror ul[data-type="taskList"] { padding-left: 0; list-style: none; } .emend-editor .ProseMirror ul[data-type="taskList"] > li { display: flex; gap: 0.5rem; } .emend-editor .ProseMirror ul[data-type="taskList"] > li > div { flex: 1; } .emend-editor .ProseMirror a { color: var(--primary); text-decoration: underline; text-underline-offset: 0.2em; } .emend-editor .ProseMirror code { border-radius: 0.25rem; background: var(--muted); padding: 0.125rem 0.3rem; font-family: var(--font-mono); font-size: 0.9em; } .emend-editor .ProseMirror pre { overflow-x: auto; border-radius: calc(var(--radius) * 0.8); background: var(--muted); padding: 1rem; } .emend-editor .ProseMirror pre code { padding: 0; } .emend-editor .ProseMirror hr { margin-block: 2rem; border-color: var(--border); } .emend-editor .ProseMirror img { display: block; max-width: 100%; height: auto; border-radius: calc(var(--radius) * 0.8); } .emend-editor .ProseMirror img.ProseMirror-selectednode { outline: 2px solid var(--ring); outline-offset: 2px; } .emend-editor .ProseMirror .tableWrapper { overflow-x: auto; } .emend-editor .ProseMirror table { width: 100%; border-collapse: collapse; } .emend-editor .ProseMirror th, .emend-editor .ProseMirror td { min-width: 7rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border); text-align: left; vertical-align: top; } .emend-editor .ProseMirror th { background: var(--muted); font-weight: 600; } .emend-editor .ProseMirror p.is-editor-empty:first-child::before { float: left; height: 0; color: var(--muted-foreground); content: attr(data-placeholder); pointer-events: none; } .emend-editor__footer { display: flex; flex-shrink: 0; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.75rem; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 0.75rem; } 6a:T69d,import { getText, getTextSerializersFromSchema, type Editor, type Extensions, type JSONContent, } from "@tiptap/core" import { FindAndReplace } from "@tiptap/extension-find-and-replace" import { Image } from "@tiptap/extension-image" import { TaskItem, TaskList } from "@tiptap/extension-list" import { TableKit } from "@tiptap/extension-table" import { TextStyleKit } from "@tiptap/extension-text-style" import { CharacterCount, Placeholder } from "@tiptap/extensions" import { Markdown } from "@tiptap/markdown" import StarterKit from "@tiptap/starter-kit" import { createEditorMention, editorMentionItems, type EditorMentionItem, } from "./editor-mention" export function createEmendEditorExtensions( placeholder = "Start writing…", mentionItems: readonly EditorMentionItem[] = editorMentionItems ): Extensions { return [ StarterKit.configure({ link: { openOnClick: false, enableClickSelection: true }, }), TaskList, TaskItem.configure({ nested: true }), TableKit, Image.configure({ allowBase64: true }), TextStyleKit.configure({ fontFamily: false, lineHeight: false }), FindAndReplace.configure({ injectCSS: false, searchDebounceMs: 0 }), Markdown.configure({ markedOptions: { gfm: true } }), Placeholder.configure({ placeholder }), CharacterCount, ...(mentionItems.length > 0 ? [createEditorMention(mentionItems)] : []), ] } export function createEmendContextProjection(editor: Editor) { const textSerializers = getTextSerializersFromSchema(editor.schema) return (context: JSONContent) => getText(editor.schema.nodeFromJSON(context), { blockSeparator: "\n\n", textSerializers, }) } 6b:T1448,"use client" import type { Editor, EditorOptions, Extensions, JSONContent, } from "@tiptap/core" import { EditorContent, useEditor } from "@tiptap/react" import { useEffect, useMemo, useRef, useState, type KeyboardEvent, type ReactNode, } from "react" import { EditorBubbleMenu } from "./editor-bubble-menu" import type { EditorImageUpload } from "./editor-image-control" import type { EditorMentionItem } from "./editor-mention" import { EditorToolbar, type EditorToolbarVariant } from "./editor-toolbar" import { createEmendEditorExtensions } from "./extensions" import "./emend-editor.css" export interface EmendEditorBaseProps { readonly initialContent?: JSONContent readonly placeholder?: string readonly editable?: boolean readonly extensions?: Extensions readonly mentionItems?: readonly EditorMentionItem[] readonly editorProps?: EditorOptions["editorProps"] readonly toolbarActions?: ReactNode readonly toolbarVariant?: EditorToolbarVariant readonly onImageUpload?: EditorImageUpload readonly onChange?: (content: { readonly json: JSONContent readonly html: string }) => void readonly onEditorReady?: (editor: Editor) => void readonly onSave?: (editor: Editor) => void | Promise readonly renderWorkspace?: (editor: Editor, content: ReactNode) => ReactNode readonly onAssistantToggle?: () => void readonly assistantOpen?: boolean readonly onComposerToggle?: () => void readonly composerOpen?: boolean } export function EmendEditorBase({ initialContent, placeholder = "Start writing…", editable = true, extensions, mentionItems, editorProps, toolbarActions, toolbarVariant = "compact", onImageUpload, onChange, onEditorReady, onSave, renderWorkspace, onAssistantToggle, assistantOpen, onComposerToggle, composerOpen, }: EmendEditorBaseProps) { const [characterCount, setCharacterCount] = useState(0) const [saveStatus, setSaveStatus] = useState< "idle" | "saving" | "success" | "error" >("idle") const documentVersion = useRef(0) const saveInFlight = useRef(false) const configuredExtensions = useMemo( () => [ ...createEmendEditorExtensions(placeholder, mentionItems), ...(extensions ?? []), ], [extensions, mentionItems, placeholder] ) const editor = useEditor({ content: initialContent, extensions: configuredExtensions, editorProps: editorProps ?? {}, editable, immediatelyRender: false, onCreate: ({ editor: currentEditor }) => { setCharacterCount(currentEditor.storage.characterCount.characters()) onEditorReady?.(currentEditor) }, onUpdate: ({ editor: currentEditor }) => { documentVersion.current += 1 setCharacterCount(currentEditor.storage.characterCount.characters()) if (!saveInFlight.current) setSaveStatus("idle") onChange?.({ json: currentEditor.getJSON(), html: currentEditor.getHTML(), }) }, }) useEffect(() => { if (editor && editor.isEditable !== editable) { editor.setEditable(editable, false) } }, [editable, editor]) async function save() { if (!editor || !onSave || !editable || saveInFlight.current) return const savedVersion = documentVersion.current saveInFlight.current = true setSaveStatus("saving") try { await onSave(editor) if (savedVersion === documentVersion.current) setSaveStatus("success") } catch { if (savedVersion === documentVersion.current) setSaveStatus("error") } finally { saveInFlight.current = false if (savedVersion !== documentVersion.current) setSaveStatus("idle") } } function handleKeyDown(event: KeyboardEvent) { if ( onSave && editable && (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s" ) { event.preventDefault() void save() } } return (

{editor && editable && ( )} {editor && editable && renderWorkspace ? ( renderWorkspace(editor, ) ) : (

{editor && editable && }

)}

) } 6c:T4ff,/* * Copyright (c) 2023 shadcn. * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */ import { clsx, type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } 5e:["$","$L60",null,{"files":[{"path":"registry/blocks/emend-editor/editor-bubble-menu.tsx","content":"$61","type":"registry:component","target":"components/emend/emend-editor/editor-bubble-menu.tsx"},{"path":"registry/blocks/emend-editor/editor-color-control.tsx","content":"$62","type":"registry:component","target":"components/emend/emend-editor/editor-color-control.tsx"},{"path":"registry/blocks/emend-editor/editor-find-replace.tsx","content":"$63","type":"registry:component","target":"components/emend/emend-editor/editor-find-replace.tsx"},{"path":"registry/blocks/emend-editor/editor-image-control.tsx","content":"$64","type":"registry:component","target":"components/emend/emend-editor/editor-image-control.tsx"},{"path":"registry/blocks/emend-editor/editor-mention.tsx","content":"$65","type":"registry:component","target":"components/emend/emend-editor/editor-mention.tsx"},{"path":"registry/blocks/emend-editor/editor-link-control.tsx","content":"$66","type":"registry:component","target":"components/emend/emend-editor/editor-link-control.tsx"},{"path":"registry/blocks/emend-editor/editor-toolbar-scroller.tsx","content":"$67","type":"registry:component","target":"components/emend/emend-editor/editor-toolbar-scroller.tsx"},{"path":"registry/blocks/emend-editor/editor-toolbar.tsx","content":"$68","type":"registry:component","target":"components/emend/emend-editor/editor-toolbar.tsx"},{"path":"registry/blocks/emend-editor/emend-editor.css","content":"$69","type":"registry:file","target":"components/emend/emend-editor/emend-editor.css"},{"path":"registry/blocks/emend-editor/extensions.ts","content":"$6a","type":"registry:lib","target":"components/emend/emend-editor/extensions.ts"},{"path":"registry/blocks/emend-editor/emend-editor-base.tsx","content":"$6b","type":"registry:component","target":"components/emend/emend-editor/emend-editor-base.tsx"},{"path":"packages/ui/src/lib/utils.ts","content":"$6c","type":"registry:lib","target":"lib/utils.ts"}],"className":"h-[70svh] min-h-80"}]