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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4a:["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@lexical/code-shiki"}] 4b:["$","li","@lexical/extension",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40lexical%2Fextension","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":"@lexical/extension"}]]}]}] 4c:["$","li","@lexical/file",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40lexical%2Ffile","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":"@lexical/file"}]]}]}] 4d:["$","li","@lexical/hashtag",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40lexical%2Fhashtag","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":"@lexical/hashtag"}]]}]}] 4e:["$","li","@lexical/history",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40lexical%2Fhistory","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":"@lexical/history"}]]}]}] 4f:["$","li","@lexical/link",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40lexical%2Flink","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":"@lexical/link"}]]}]}] 50:["$","li","@lexical/list",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40lexical%2Flist","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":"@lexical/list"}]]}]}] 51:["$","li","@lexical/markdown",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40lexical%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":"@lexical/markdown"}]]}]}] 52:["$","li","@lexical/overflow",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40lexical%2Foverflow","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":"@lexical/overflow"}]]}]}] 53:["$","li","@lexical/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40lexical%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":"@lexical/react"}]]}]}] 54:["$","li","@lexical/rich-text",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40lexical%2Frich-text","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":"@lexical/rich-text"}]]}]}] 55:["$","li","@lexical/selection",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40lexical%2Fselection","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":"@lexical/selection"}]]}]}] 56:["$","li","@lexical/table",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40lexical%2Ftable","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":"@lexical/table"}]]}]}] 57:["$","li","@lexical/text",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40lexical%2Ftext","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":"@lexical/text"}]]}]}] 58:["$","li","@lexical/utils",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40lexical%2Futils","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":"@lexical/utils"}]]}]}] 59:["$","li","lexical",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lexical","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":"lexical"}]]}]}] 5a:["$","li","lodash",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lodash","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":"lodash"}]]}]}] 5b:["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}] 5c:["$","li","sonner",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/sonner","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":"sonner"}]]}]}] 5d:["$","$L5f",null,{"namespace":"@zenoadmin","registryDependencies":["button","checkbox","command","dialog","dropdown-menu","field","input","input-group","label","popover","scroll-area","select","separator","slider","tabs","toggle","toggle-group","tooltip"]}] 61:T52bc,import { useMemo, useState } from "react"; import { CodeHighlightNode, CodeNode } from "@lexical/code"; import { AutoFocusExtension, ClearEditorExtension, DecoratorTextExtension, HorizontalRuleExtension, SelectionAlwaysOnDisplayExtension, } from "@lexical/extension"; import { HashtagExtension } from "@lexical/hashtag"; import { HistoryExtension } from "@lexical/history"; import { AutoLinkExtension, ClickableLinkExtension, LinkExtension, } from "@lexical/link"; import { CheckListExtension, ListExtension } from "@lexical/list"; import { CHECK_LIST, ELEMENT_TRANSFORMERS, MULTILINE_ELEMENT_TRANSFORMERS, TEXT_FORMAT_TRANSFORMERS, TEXT_MATCH_TRANSFORMERS, } from "@lexical/markdown"; import { OverflowNode } from "@lexical/overflow"; import { LexicalExtensionComposer } from "@lexical/react/LexicalExtensionComposer"; import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin"; import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin"; import { TablePlugin } from "@lexical/react/LexicalTablePlugin"; import { RichTextExtension } from "@lexical/rich-text"; import { TableCellNode, TableNode, TableRowNode } from "@lexical/table"; import { type EditorState, type SerializedEditorState, configExtension, defineExtension, } from "lexical"; import { ContentEditable } from "@/components/editor/editor-ui/content-editable"; import { DateTimeExtension } from "@/components/editor/extensions/date-time-extension"; import { DragDropPasteExtension } from "@/components/editor/extensions/drag-drop-paste-extension"; import { EmojisExtension } from "@/components/editor/extensions/emojis-extension"; import { ImagesExtension } from "@/components/editor/extensions/images-extension"; import { KeywordsExtension } from "@/components/editor/extensions/keywords-extension"; import { MarkdownShortcutsExtension } from "@/components/editor/extensions/markdown-shortcuts-extension"; import { MaxLengthExtension } from "@/components/editor/extensions/max-length-extension"; import { AutocompleteNode } from "@/components/editor/nodes/autocomplete-node"; import { TweetNode } from "@/components/editor/nodes/embeds/tweet-node"; import { YouTubeNode } from "@/components/editor/nodes/embeds/youtube-node"; import { EmojiNode } from "@/components/editor/nodes/emoji-node"; import { LayoutContainerNode } from "@/components/editor/nodes/layout-container-node"; import { LayoutItemNode } from "@/components/editor/nodes/layout-item-node"; import { MentionNode } from "@/components/editor/nodes/mention-node"; import { SpecialTextNode } from "@/components/editor/nodes/special-text-node"; import { ActionsPlugin } from "@/components/editor/plugins/actions/actions-plugin"; import { ClearEditorActionPlugin } from "@/components/editor/plugins/actions/clear-editor-plugin"; import { CounterCharacterPlugin } from "@/components/editor/plugins/actions/counter-character-plugin"; import { EditModeTogglePlugin } from "@/components/editor/plugins/actions/edit-mode-toggle-plugin"; import { ImportExportPlugin } from "@/components/editor/plugins/actions/import-export-plugin"; import { MarkdownTogglePlugin } from "@/components/editor/plugins/actions/markdown-toggle-plugin"; import { ShareContentPlugin } from "@/components/editor/plugins/actions/share-content-plugin"; import { SpeechToTextPlugin } from "@/components/editor/plugins/actions/speech-to-text-plugin"; import { TreeViewPlugin } from "@/components/editor/plugins/actions/tree-view-plugin"; import { AutoCompletePlugin } from "@/components/editor/plugins/auto-complete-plugin"; import { CodeActionMenuPlugin } from "@/components/editor/plugins/code-action-menu-plugin"; import { CodeHighlightPlugin } from "@/components/editor/plugins/code-highlight-plugin"; import { ComponentPickerMenuPlugin } from "@/components/editor/plugins/component-picker-menu-plugin"; import { ContextMenuPlugin } from "@/components/editor/plugins/context-menu-plugin"; import { DraggableBlockPlugin } from "@/components/editor/plugins/draggable-block-plugin"; import { AutoEmbedPlugin } from "@/components/editor/plugins/embeds/auto-embed-plugin"; import { TwitterPlugin } from "@/components/editor/plugins/embeds/twitter-plugin"; import { YouTubePlugin } from "@/components/editor/plugins/embeds/youtube-plugin"; import { EmojiPickerPlugin } from "@/components/editor/plugins/emoji-picker-plugin"; import { FloatingLinkEditorPlugin } from "@/components/editor/plugins/floating-link-editor-plugin"; import { FloatingTextFormatToolbarPlugin } from "@/components/editor/plugins/floating-text-format-plugin"; import { LayoutPlugin } from "@/components/editor/plugins/layout-plugin"; import { MentionsPlugin } from "@/components/editor/plugins/mentions-plugin"; import { AlignmentPickerPlugin } from "@/components/editor/plugins/picker/alignment-picker-plugin"; import { BulletedListPickerPlugin } from "@/components/editor/plugins/picker/bulleted-list-picker-plugin"; import { CheckListPickerPlugin } from "@/components/editor/plugins/picker/check-list-picker-plugin"; import { CodePickerPlugin } from "@/components/editor/plugins/picker/code-picker-plugin"; import { ColumnsLayoutPickerPlugin } from "@/components/editor/plugins/picker/columns-layout-picker-plugin"; import { DateTimePickerPlugin } from "@/components/editor/plugins/picker/date-time-picker-plugin"; import { DividerPickerPlugin } from "@/components/editor/plugins/picker/divider-picker-plugin"; import { EmbedsPickerPlugin } from "@/components/editor/plugins/picker/embeds-picker-plugin"; import { HeadingPickerPlugin } from "@/components/editor/plugins/picker/heading-picker-plugin"; import { ImagePickerPlugin } from "@/components/editor/plugins/picker/image-picker-plugin"; import { NumberedListPickerPlugin } from "@/components/editor/plugins/picker/numbered-list-picker-plugin"; import { ParagraphPickerPlugin } from "@/components/editor/plugins/picker/paragraph-picker-plugin"; import { QuotePickerPlugin } from "@/components/editor/plugins/picker/quote-picker-plugin"; import { DynamicTablePickerPlugin, TablePickerPlugin, } from "@/components/editor/plugins/picker/table-picker-plugin"; import { SpecialTextPlugin } from "@/components/editor/plugins/special-text-plugin"; import { TabFocusPlugin } from "@/components/editor/plugins/tab-focus-plugin"; import { BlockFormatDropDown } from "@/components/editor/plugins/toolbar/block-format-toolbar-plugin"; import { FormatBulletedList } from "@/components/editor/plugins/toolbar/block-format/format-bulleted-list"; import { FormatCheckList } from "@/components/editor/plugins/toolbar/block-format/format-check-list"; import { FormatCodeBlock } from "@/components/editor/plugins/toolbar/block-format/format-code-block"; import { FormatHeading } from "@/components/editor/plugins/toolbar/block-format/format-heading"; import { FormatNumberedList } from "@/components/editor/plugins/toolbar/block-format/format-numbered-list"; import { FormatParagraph } from "@/components/editor/plugins/toolbar/block-format/format-paragraph"; import { FormatQuote } from "@/components/editor/plugins/toolbar/block-format/format-quote"; import { BlockInsertPlugin } from "@/components/editor/plugins/toolbar/block-insert-plugin"; import { EditorLanguageSelect } from "@/components/editor/editor-ui/language-select"; import { InsertColumnsLayout } from "@/components/editor/plugins/toolbar/block-insert/insert-columns-layout"; import { InsertEmbeds } from "@/components/editor/plugins/toolbar/block-insert/insert-embeds"; import { InsertHorizontalRule } from "@/components/editor/plugins/toolbar/block-insert/insert-horizontal-rule"; import { InsertImage } from "@/components/editor/plugins/toolbar/block-insert/insert-image"; import { InsertTable } from "@/components/editor/plugins/toolbar/block-insert/insert-table"; import { ClearFormattingToolbarPlugin } from "@/components/editor/plugins/toolbar/clear-formatting-toolbar-plugin"; import { CodeLanguageToolbarPlugin } from "@/components/editor/plugins/toolbar/code-language-toolbar-plugin"; import { ElementFormatToolbarPlugin } from "@/components/editor/plugins/toolbar/element-format-toolbar-plugin"; import { FontBackgroundToolbarPlugin } from "@/components/editor/plugins/toolbar/font-background-toolbar-plugin"; import { FontColorToolbarPlugin } from "@/components/editor/plugins/toolbar/font-color-toolbar-plugin"; import { FontFamilyToolbarPlugin } from "@/components/editor/plugins/toolbar/font-family-toolbar-plugin"; import { FontFormatToolbarPlugin } from "@/components/editor/plugins/toolbar/font-format-toolbar-plugin"; import { FontSizeToolbarPlugin } from "@/components/editor/plugins/toolbar/font-size-toolbar-plugin"; import { HistoryToolbarPlugin } from "@/components/editor/plugins/toolbar/history-toolbar-plugin"; import { LinkToolbarPlugin } from "@/components/editor/plugins/toolbar/link-toolbar-plugin"; import { SubSuperToolbarPlugin } from "@/components/editor/plugins/toolbar/subsuper-toolbar-plugin"; import { ToolbarPlugin } from "@/components/editor/plugins/toolbar/toolbar-plugin"; import { TypingPerfPlugin } from "@/components/editor/plugins/typing-pref-plugin"; import { editorTheme } from "@/components/editor/themes/editor-theme"; import { EMOJI } from "@/components/editor/transformers/markdown-emoji-transformer"; import { HR } from "@/components/editor/transformers/markdown-hr-transformer"; import { IMAGE } from "@/components/editor/transformers/markdown-image-transformer"; import { TABLE } from "@/components/editor/transformers/markdown-table-transformer"; import { TWEET } from "@/components/editor/transformers/markdown-tweet-transformer"; import { validateUrl } from "@/components/editor/utils/url"; import { EditorI18nProvider, useEditorI18n, type EditorMessages, type TranslateFn, } from "@/components/editor/i18n"; import { Separator } from "@/components/ui/separator"; import { TooltipProvider } from "@/components/ui/tooltip"; const maxLength = 3000; export function Editor({ editorState, editorSerializedState, onChange, onSerializedChange, locale, onLocaleChange, showLanguageSelect = true, messages, t, }: { editorState?: EditorState; editorSerializedState?: SerializedEditorState; onChange?: (editorState: EditorState) => void; onSerializedChange?: (editorSerializedState: SerializedEditorState) => void; locale?: string; onLocaleChange?: (locale: string) => void; showLanguageSelect?: boolean; messages?: Partial; t?: TranslateFn; }) { return ( ); } function EditorInner({ editorState, editorSerializedState, onChange, onSerializedChange, showLanguageSelect, }: { editorState?: EditorState; editorSerializedState?: SerializedEditorState; onChange?: (editorState: EditorState) => void; onSerializedChange?: (editorSerializedState: SerializedEditorState) => void; showLanguageSelect: boolean; }) { const { t } = useEditorI18n(); const [floatingAnchorElem, setFloatingAnchorElem] = useState(null); const [isLinkEditMode, setIsLinkEditMode] = useState(false); const onRef = (_floatingAnchorElem: HTMLDivElement) => { if (_floatingAnchorElem !== null) { setFloatingAnchorElem(_floatingAnchorElem); } }; const AppExtension = useMemo( () => defineExtension({ dependencies: [ RichTextExtension, ImagesExtension, HorizontalRuleExtension, configExtension(ListExtension, { shouldPreserveNumbering: false }), CheckListExtension, configExtension(MarkdownShortcutsExtension, { transformers: [ TABLE, HR, IMAGE, EMOJI, TWEET, CHECK_LIST, ...ELEMENT_TRANSFORMERS, ...MULTILINE_ELEMENT_TRANSFORMERS, ...TEXT_FORMAT_TRANSFORMERS, ...TEXT_MATCH_TRANSFORMERS, ], }), AutoFocusExtension, ClearEditorExtension, DecoratorTextExtension, HistoryExtension, KeywordsExtension, HashtagExtension, DateTimeExtension, configExtension(MaxLengthExtension, { disabled: false, maxLength }), DragDropPasteExtension, EmojisExtension, configExtension(LinkExtension, { validateUrl, attributes: { rel: "noopener noreferrer", target: "_blank", }, }), AutoLinkExtension, ClickableLinkExtension, SelectionAlwaysOnDisplayExtension, ], // html: buildHTMLConfig(), name: "@shadcn-editor", namespace: "Playground", nodes: [ OverflowNode, TableNode, TableCellNode, TableRowNode, CodeNode, CodeHighlightNode, MentionNode, EmojiNode, LayoutContainerNode, LayoutItemNode, TweetNode, YouTubeNode, AutocompleteNode, SpecialTextNode, ], $initialEditorState(editor) { if (editorSerializedState) { editor.parseEditorState(editorSerializedState); } else if (editorState) { editor.setEditorState(editorState); } }, theme: editorTheme, }), [editorState, editorSerializedState], ); const baseOptions = [ ParagraphPickerPlugin(t), HeadingPickerPlugin({ n: 1, t }), HeadingPickerPlugin({ n: 2, t }), HeadingPickerPlugin({ n: 3, t }), TablePickerPlugin(t), CheckListPickerPlugin(t), NumberedListPickerPlugin(t), BulletedListPickerPlugin(t), QuotePickerPlugin(t), CodePickerPlugin(t), DividerPickerPlugin(t), EmbedsPickerPlugin({ embed: "tweet", t }), EmbedsPickerPlugin({ embed: "youtube-video", t }), ImagePickerPlugin(t), ColumnsLayoutPickerPlugin(t), DateTimePickerPlugin(t), AlignmentPickerPlugin({ alignment: "left", t }), AlignmentPickerPlugin({ alignment: "center", t }), AlignmentPickerPlugin({ alignment: "right", t }), AlignmentPickerPlugin({ alignment: "justify", t }), ]; return (

{({ blockType }) => (

{blockType === "code" ? ( ) : ( <> {showLanguageSelect && } )}

)}

DynamicTablePickerPlugin({ queryString, t }) } /> DynamicTablePickerPlugin({ queryString, t }) } />

{ onChange?.(editorState); onSerializedChange?.(editorState.toJSON()); }} />

); } 62:T1441,/** * Default (English) editor messages. * * The values are intentionally identical to the raw UI strings used upstream * so that when no i18n config is provided the editor renders exactly as before. * `en` is also the fallback dictionary for every locale. */ export const en = { toolbar: { paragraph: "Paragraph", "Heading 1": "Heading 1", "Heading 2": "Heading 2", "Heading 3": "Heading 3", number: "Numbered List", bullet: "Bulleted List", check: "Check List", code: "Code Block", quote: "Quote", bold: "Bold", italic: "Italic", underline: "Underline", strikethrough: "Strikethrough", left: "Left Align", center: "Center Align", right: "Right Align", justify: "Justify Align", outdent: "Outdent", indent: "Indent", undo: "Undo", redo: "Redo", undoShortcutMac: "Undo (⌘Z)", undoShortcut: "Undo (Ctrl+Z)", redoShortcutMac: "Redo (⇧⌘Z)", redoShortcut: "Redo (Ctrl+Y)", decreaseFontSize: "Decrease font size", increaseFontSize: "Increase font size", toggleSubscript: "Toggle subscript", toggleSuperscript: "Toggle superscript", toggleLink: "Toggle link", clearFormatting: "Clear formatting", selectLanguage: "Select Language", insert: "Insert", language: "Language", toggleBold: "Toggle bold", toggleItalic: "Toggle italic", toggleUnderline: "Toggle underline", toggleStrikethrough: "Toggle strikethrough", toggleCode: "Toggle code", }, link: { urlPlaceholder: "https://example.com", cancel: "Cancel", confirm: "Confirm link", edit: "Edit link", remove: "Remove link", }, contextMenu: { removeLink: "Remove Link", cut: "Cut", copy: "Copy", paste: "Paste", pastePlainText: "Paste as Plain Text", deleteNode: "Delete Node", pasteDenied: "Not allowed to paste from clipboard.", }, action: { shareTitle: "Share", shareAria: "Share Playground link to current editor state", shareContent: "Share Content", shareCopied: "URL copied to clipboard", shareCopyFailed: "URL could not be copied to clipboard", markdownTitle: "Convert From Markdown", markdownAria: "Convert from markdown", editModeTitle: "Read-Only Mode", editModeUnlockAria: "Unlock read-only mode", editModeLockAria: "Lock read-only mode", editViewOnly: "View Only Mode", editEditMode: "Edit Mode", speechTitle: "Speech To Text", speechContent: "Speech To Text", speechEnableAria: "Enable speech to text", speechDisableAria: "Disable speech to text", importTitle: "Import", importAria: "Import editor state from JSON", importContent: "Import Content", exportTitle: "Export", exportAria: "Export editor state to JSON", exportContent: "Export Content", exportFileName: "Editor", clearTitle: "Clear Editor", clearDescription: "Are you sure you want to clear the editor?", cancel: "Cancel", clear: "Clear", }, counter: { characters: "characters", words: "words", maxCharacters: "/ {max} characters", }, imageDialog: { url: "Image URL", urlPlaceholder: "i.e. https://source.unsplash.com/random", alt: "Alt Text", altPlaceholder: "Descriptive alternative text", randomAltPlaceholder: "Random unsplash image", upload: "Image Upload", confirm: "Confirm", tabUrl: "URL", tabFile: "File", }, date: { pick: "Pick a date", }, embed: { youtubeTitle: "YouTube video", tweetLoading: "Loading...", }, image: { broken: "Broken image", altText: "alternative text", }, misc: { copy: "copy", filterBlocks: "Filter blocks...", clickAddBelow: "Click to add below (Alt/Ctrl: add above)", insertImage: "Insert Image", insertTable: "Insert Table", insertColumns: "Insert Columns Layout", treeView: "Tree View", noResults: "No results found.", }, picker: { paragraph: "Paragraph", "Heading 1": "Heading 1", "Heading 2": "Heading 2", "Heading 3": "Heading 3", quote: "Quote", bullet: "Bulleted List", check: "Check List", number: "Numbered List", code: "Code Block", image: "Image", table: "Table", columns: "Columns Layout", divider: "Horizontal Rule", embeds: "Embed", dateTime: "Date & Time", alignLeft: "Align Left", alignCenter: "Align Center", alignRight: "Align Right", alignJustify: "Align Justify", }, color: { noColor: "No color selected", currentColor: "Current color", hexValue: "Hex color value", alphaPercentage: "Alpha transparency percentage", redComponent: "Red color component (0-255)", greenComponent: "Green color component (0-255)", blueComponent: "Blue color component (0-255)", hueDegree: "Hue degree (0-360)", saturationPercentage: "Saturation percentage (0-100)", lightnessPercentage: "Lightness percentage (0-100)", brightnessPercentage: "Brightness percentage (0-100)", }, placeholder: { editor: "Press / for commands...", }, }; /** Shape of every locale dictionary (derived from `en`). */ export type EditorMessages = typeof en; 63:T134c,/** * Simplified Chinese editor messages. * * The structure must mirror `en` exactly (see `EditorMessages` in `en.ts`). * Missing keys at runtime fall back to English. */ import type { EditorMessages } from "./en"; export const zhCN: EditorMessages = { toolbar: { paragraph: "正文", "Heading 1": "标题 1", "Heading 2": "标题 2", "Heading 3": "标题 3", number: "有序列表", bullet: "无序列表", check: "待办列表", code: "代码块", quote: "引用", bold: "加粗", italic: "斜体", underline: "下划线", strikethrough: "删除线", left: "左对齐", center: "居中对齐", right: "右对齐", justify: "两端对齐", outdent: "减少缩进", indent: "增加缩进", undo: "撤销", redo: "重做", undoShortcutMac: "撤销 (⌘Z)", undoShortcut: "撤销 (Ctrl+Z)", redoShortcutMac: "重做 (⇧⌘Z)", redoShortcut: "重做 (Ctrl+Y)", decreaseFontSize: "减小字号", increaseFontSize: "增大字号", toggleSubscript: "切换下标", toggleSuperscript: "切换上标", toggleLink: "切换链接", clearFormatting: "清除格式", selectLanguage: "选择语言", insert: "插入", language: "语言", toggleBold: "切换加粗", toggleItalic: "切换斜体", toggleUnderline: "切换下划线", toggleStrikethrough: "切换删除线", toggleCode: "切换代码", }, link: { urlPlaceholder: "https://example.com", cancel: "取消", confirm: "确认链接", edit: "编辑链接", remove: "移除链接", }, contextMenu: { removeLink: "移除链接", cut: "剪切", copy: "复制", paste: "粘贴", pastePlainText: "粘贴为纯文本", deleteNode: "删除节点", pasteDenied: "不允许从剪贴板粘贴。", }, action: { shareTitle: "分享", shareAria: "分享当前编辑器状态的链接", shareContent: "分享内容", shareCopied: "链接已复制到剪贴板", shareCopyFailed: "无法将链接复制到剪贴板", markdownTitle: "从 Markdown 转换", markdownAria: "从 Markdown 转换", editModeTitle: "只读模式", editModeUnlockAria: "解锁只读模式", editModeLockAria: "锁定只读模式", editViewOnly: "仅查看模式", editEditMode: "编辑模式", speechTitle: "语音转文字", speechContent: "语音转文字", speechEnableAria: "启用语音转文字", speechDisableAria: "禁用语音转文字", importTitle: "导入", importAria: "从 JSON 导入编辑器状态", importContent: "导入内容", exportTitle: "导出", exportAria: "导出编辑器状态为 JSON", exportContent: "导出内容", exportFileName: "编辑器", clearTitle: "清空编辑器", clearDescription: "确定要清空编辑器吗？", cancel: "取消", clear: "清空", }, counter: { characters: "字符", words: "词", maxCharacters: "/ {max} 字符", }, imageDialog: { url: "图片地址", urlPlaceholder: "例如 https://source.unsplash.com/random", alt: "替代文本", altPlaceholder: "描述性替代文本", randomAltPlaceholder: "随机 unsplash 图片", upload: "图片上传", confirm: "确认", tabUrl: "URL", tabFile: "文件", }, date: { pick: "选择日期", }, embed: { youtubeTitle: "YouTube 视频", tweetLoading: "加载中...", }, image: { broken: "图片加载失败", altText: "替代文本", }, misc: { copy: "复制", filterBlocks: "筛选块...", clickAddBelow: "点击下方添加（Alt/Ctrl：上方添加）", insertImage: "插入图片", insertTable: "插入表格", insertColumns: "插入分栏布局", treeView: "树状视图", noResults: "未找到结果。", }, picker: { paragraph: "正文", "Heading 1": "标题 1", "Heading 2": "标题 2", "Heading 3": "标题 3", quote: "引用", bullet: "无序列表", check: "待办列表", number: "有序列表", code: "代码块", image: "图片", table: "表格", columns: "分栏布局", divider: "分割线", embeds: "嵌入", dateTime: "日期与时间", alignLeft: "左对齐", alignCenter: "居中对齐", alignRight: "右对齐", alignJustify: "两端对齐", }, color: { noColor: "未选择颜色", currentColor: "当前颜色", hexValue: "十六进制颜色值", alphaPercentage: "透明度百分比", redComponent: "红色分量 (0-255)", greenComponent: "绿色分量 (0-255)", blueComponent: "蓝色分量 (0-255)", hueDegree: "色相 (0-360)", saturationPercentage: "饱和度 (0-100)", lightnessPercentage: "亮度 (0-100)", brightnessPercentage: "明度 (0-100)", }, placeholder: { editor: "输入 / 以打开命令...", }, }; 64:T12bc,import { createContext, useCallback, useContext, useMemo, useState, type ReactNode, } from "react"; import { en, type EditorMessages } from "./en"; import { zhCN } from "./zh-CN"; /** Built-in locale dictionaries. */ const LOCALES: Record = { en, "zh-CN": zhCN, }; /** Normalize common application locale formats to the built-in dictionaries. */ export function normalizeEditorLocale(locale: string): string { const normalized = locale.replace("_", "-").toLowerCase(); if (normalized === "zh" || normalized.startsWith("zh-")) return "zh-CN"; if (normalized === "en" || normalized.startsWith("en-")) return "en"; return locale; } /** A translation function: resolves a dotted key and interpolates `{var}`. */ export type TranslateFn = ( key: string, vars?: Record, ) => string; /** Resolve a dotted path (e.g. `"toolbar.bold"`) inside a message object. */ function lookup(messages: EditorMessages, key: string): string | undefined { let node: unknown = messages; for (const part of key.split(".")) { if (typeof node !== "object" || node === null) return undefined; node = (node as Record)[part]; } return typeof node === "string" ? node : undefined; } function interpolate( template: string | undefined, vars?: Record, ): string { if (template === undefined) return ""; if (!vars) return template; return template.replace(/\{(\w+)\}/g, (match, name: string) => name in vars ? String(vars[name]) : match, ); } interface EditorI18nContextValue { t: TranslateFn; locale: string; setLocale: (locale: string) => void; } const EditorI18nContext = createContext({ t: (key, vars) => interpolate(lookup(en, key), vars) || key, locale: "zh-CN", setLocale: () => {}, }); export function EditorI18nProvider({ locale: controlledLocale, onLocaleChange, messages, t: injectedT, children, }: { /** Active locale key, e.g. `"en"` or `"zh-CN"`. */ locale?: string; /** Called when the in-editor language selector requests a locale change. */ onLocaleChange?: (locale: string) => void; /** Per-key overrides merged on top of the built-in locale dictionary. */ messages?: Partial; /** Optional translator injection (e.g. reuse your app's existing i18n). */ t?: TranslateFn; children: ReactNode; }) { // `locale` is a controlled prop: when provided it takes precedence and // changes react immediately. When omitted it falls back to internal state, // which `setLocale` (from the context) can update. const [internalLocale, setInternalLocale] = useState(() => normalizeEditorLocale(controlledLocale ?? "zh-CN"), ); const locale = normalizeEditorLocale(controlledLocale ?? internalLocale); const setLocale = useCallback( (nextLocale: string) => { const normalized = normalizeEditorLocale(nextLocale); if (controlledLocale === undefined) setInternalLocale(normalized); onLocaleChange?.(normalized); }, [controlledLocale, onLocaleChange], ); const t = useMemo(() => { if (injectedT) return injectedT; const base = LOCALES[locale] ?? en; const current: EditorMessages = messages ? (deepMerge(base, messages) as EditorMessages) : base; return (key, vars) => { const value = lookup(current, key) ?? lookup(en, key) ?? lookup(zhCN, key); // Fall back to the key itself when nothing is found, so a missing // translation never renders empty text. return interpolate(value, vars) || key; }; }, [locale, messages, injectedT]); const value = useMemo( () => ({ t, locale, setLocale }), [t, locale, setLocale], ); return ( {children} ); } /** Access the editor translator and current locale. */ export function useEditorI18n(): EditorI18nContextValue { return useContext(EditorI18nContext); } function deepMerge(base: T, overrides: U): T | U { if ( typeof base === "object" && base !== null && typeof overrides === "object" && overrides !== null ) { const out: Record = { ...(base as Record), }; for (const [key, value] of Object.entries( overrides as Record, )) { out[key] = deepMerge((base as Record)[key], value); } return out as T | U; } return overrides as T | U; } export const SUPPORTED_LOCALES: Array<{ value: string; label: string }> = [ { value: "zh-CN", label: "中文" }, { value: "en", label: "English" }, ]; export { en, zhCN }; export type { EditorMessages }; 65:T4a9,import { type JSX, createContext, useContext } from "react"; import type { LexicalEditor } from "lexical"; const Context = createContext<{ activeEditor: LexicalEditor; $updateToolbar: () => void; blockType: string; setBlockType: (blockType: string) => void; showModal: ( title: string, showModal: (onClose: () => void) => JSX.Element, ) => void; }>({ activeEditor: {} as LexicalEditor, $updateToolbar: () => {}, blockType: "paragraph", setBlockType: () => {}, showModal: () => {}, }); export function ToolbarContext({ activeEditor, $updateToolbar, blockType, setBlockType, showModal, children, }: { activeEditor: LexicalEditor; $updateToolbar: () => void; blockType: string; setBlockType: (blockType: string) => void; showModal: ( title: string, showModal: (onClose: () => void) => JSX.Element, ) => void; children: React.ReactNode; }) { return ( {children} ); } export function useToolbarContext() { return useContext(Context); } 66:T50b,import { type JSX, useCallback, useMemo, useState } from "react"; import { Dialog, DialogContent, DialogHeader, DialogTitle, } from "@/components/ui/dialog"; export function useEditorModal(): [ JSX.Element | null, (title: string, showModal: (onClose: () => void) => JSX.Element) => void, ] { const [modalContent, setModalContent] = useState(null); const onClose = useCallback(() => { setModalContent(null); }, []); const modal = useMemo(() => { if (modalContent === null) { return null; } const { title, content } = modalContent; return ( ); }, [modalContent, onClose]); const showModal = useCallback( ( title: string, getContent: (onClose: () => void) => JSX.Element, closeOnClickOutside = false, ) => { setModalContent({ closeOnClickOutside, content: getContent(onClose), title, }); }, [onClose], ); return [modal, showModal]; } 67:T5b5,import { useCallback, useEffect, useRef } from "react"; const getElement = (): HTMLElement => { let element = document.getElementById("report-container"); if (element === null) { element = document.createElement("div"); element.id = "report-container"; element.style.position = "fixed"; element.style.top = "50%"; element.style.left = "50%"; element.style.fontSize = "32px"; element.style.transform = "translate(-50%, -50px)"; element.style.padding = "20px"; element.style.background = "rgba(240, 240, 240, 0.4)"; element.style.borderRadius = "20px"; if (document.body) { document.body.appendChild(element); } } return element; }; export function useReport(): (arg0: string) => ReturnType { const timer = useRef | null>(null); const cleanup = useCallback(() => { if (timer.current !== null) { clearTimeout(timer.current); timer.current = null; } if (document.body) { document.body.removeChild(getElement()); } }, []); useEffect(() => { return cleanup; }, [cleanup]); return useCallback( (content) => { console.log(content); const element = getElement(); if (timer.current !== null) { clearTimeout(timer.current); } element.innerHTML = content; timer.current = setTimeout(cleanup, 1000); return timer.current; }, [cleanup], ); } 68:T6ca,import { useState } from "react"; import { $isCodeNode } from "@lexical/code"; import { $getNearestNodeFromDOMNode, $getSelection, $setSelection, type LexicalEditor, } from "lexical"; import { CircleCheckIcon, CopyIcon } from "lucide-react"; import { useDebounce } from "@/components/editor/editor-hooks/use-debounce"; import { useEditorI18n } from "@/components/editor/i18n"; interface Props { editor: LexicalEditor; getCodeDOMNode: () => HTMLElement | null; } export function CopyButton({ editor, getCodeDOMNode }: Props) { const [isCopyCompleted, setCopyCompleted] = useState(false); const { t } = useEditorI18n(); const removeSuccessIcon = useDebounce(() => { setCopyCompleted(false); }, 1000); async function handleClick(): Promise { const codeDOMNode = getCodeDOMNode(); if (!codeDOMNode) { return; } let content = ""; editor.update(() => { const codeNode = $getNearestNodeFromDOMNode(codeDOMNode); if ($isCodeNode(codeNode)) { content = codeNode.getTextContent(); } const selection = $getSelection(); $setSelection(selection); }); try { await navigator.clipboard.writeText(content); setCopyCompleted(true); removeSuccessIcon(); } catch (err) { console.error("Failed to copy: ", err); } } return ( ); } 69:T5b4,import { SUPPORTED_LOCALES, useEditorI18n, } from "@/components/editor/i18n"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; /** * In-editor language switcher. * * Reads the current locale from `useEditorI18n()` and updates it via * `setLocale`, so it works as the single source of truth when the editor is * used without a controlled `locale` prop. Drop it into any toolbar. */ export function EditorLanguageSelect() { const { locale, setLocale, t } = useEditorI18n(); return ( ); } 6a:Tc118,import * as React from "react"; import { type VariantProps, cva } from "class-variance-authority"; import { PipetteIcon } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Slider } from "@/components/ui/slider"; import { Input } from "@/components/ui/input"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { cn } from "@/lib/utils"; /** * @see https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/compose-refs.tsx */ type PossibleRef = React.Ref | undefined; /** * Set a given ref to a given value * This utility takes care of different types of refs: callback refs and RefObject(s) */ function setRef(ref: PossibleRef, value: T) { if (typeof ref === "function") { return ref(value); } if (ref !== null && ref !== undefined) { ref.current = value; } } /** * A utility to compose multiple refs together * Accepts callback refs and RefObject(s) */ function composeRefs(...refs: PossibleRef[]): React.RefCallback { return (node) => { let hasCleanup = false; const cleanups = refs.map((ref) => { const cleanup = setRef(ref, node); if (!hasCleanup && typeof cleanup === "function") { hasCleanup = true; } return cleanup; }); // React <19 will log an error to the console if a callback ref returns a // value. We don't use ref cleanups internally so this will only happen if a // user's ref callback returns a value, which we only expect if they are // using the cleanup functionality added in React 19. if (hasCleanup) { return () => { for (let i = 0; i < cleanups.length; i++) { const cleanup = cleanups[i]; if (typeof cleanup === "function") { cleanup(); } else { setRef(refs[i], null); } } }; } }; } /** * A custom hook that composes multiple refs * Accepts callback refs and RefObject(s) */ function useComposedRefs(...refs: PossibleRef[]): React.RefCallback { // biome-ignore lint/correctness/useExhaustiveDependencies: we want to memoize by all values return React.useCallback(composeRefs(...refs), refs); } type InputValue = string[] | string; interface VisuallyHiddenInputProps extends Omit< React.InputHTMLAttributes, "value" | "checked" | "onReset" > { value?: T; checked?: boolean; control: HTMLElement | null; bubbles?: boolean; } function VisuallyHiddenInput( props: VisuallyHiddenInputProps, ) { const { control, value, checked, bubbles = true, type = "hidden", style, ...inputProps } = props; const isCheckInput = React.useMemo( () => type === "checkbox" || type === "radio" || type === "switch", [type], ); const inputRef = React.useRef(null); const prevValueRef = React.useRef<{ value: T | boolean | undefined; previous: T | boolean | undefined; }>({ value: isCheckInput ? checked : value, previous: isCheckInput ? checked : value, }); const prevValue = React.useMemo(() => { const currentValue = isCheckInput ? checked : value; if (prevValueRef.current.value !== currentValue) { prevValueRef.current.previous = prevValueRef.current.value; prevValueRef.current.value = currentValue; } return prevValueRef.current.previous; }, [isCheckInput, value, checked]); const [controlSize, setControlSize] = React.useState<{ width?: number; height?: number; }>({}); React.useLayoutEffect(() => { if (!control) { setControlSize({}); return; } setControlSize({ width: control.offsetWidth, height: control.offsetHeight, }); if (typeof window === "undefined") return; const resizeObserver = new ResizeObserver((entries) => { if (!Array.isArray(entries) || !entries.length) return; const entry = entries[0]; if (!entry) return; let width: number; let height: number; if ("borderBoxSize" in entry) { const borderSizeEntry = entry.borderBoxSize; const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry; width = borderSize.inlineSize; height = borderSize.blockSize; } else { width = control.offsetWidth; height = control.offsetHeight; } setControlSize({ width, height }); }); resizeObserver.observe(control, { box: "border-box" }); return () => { resizeObserver.disconnect(); }; }, [control]); React.useEffect(() => { const input = inputRef.current; if (!input) return; const inputProto = window.HTMLInputElement.prototype; const propertyKey = isCheckInput ? "checked" : "value"; const eventType = isCheckInput ? "click" : "input"; const currentValue = isCheckInput ? checked : value; const serializedCurrentValue = isCheckInput ? checked : typeof value === "object" && value !== null ? JSON.stringify(value) : value; const descriptor = Object.getOwnPropertyDescriptor(inputProto, propertyKey); const setter = descriptor?.set; if (prevValue !== currentValue && setter) { const event = new Event(eventType, { bubbles }); setter.call(input, serializedCurrentValue); input.dispatchEvent(event); } }, [prevValue, value, checked, bubbles, isCheckInput]); const composedStyle = React.useMemo(() => { return { ...style, ...(controlSize.width !== undefined && controlSize.height !== undefined ? controlSize : {}), border: 0, clip: "rect(0 0 0 0)", clipPath: "inset(50%)", height: "1px", margin: "-1px", overflow: "hidden", padding: 0, position: "absolute", whiteSpace: "nowrap", width: "1px", }; }, [style, controlSize]); return ( ); } /** * @see https://gist.github.com/bkrmendy/f4582173f50fab209ddfef1377ab31e3 */ interface EyeDropper { open: (options?: { signal?: AbortSignal }) => Promise<{ sRGBHex: string }>; } declare global { interface Window { EyeDropper?: { new (): EyeDropper; }; } } const colorFormats = ["hex", "rgb", "hsl", "hsb"] as const; type ColorFormat = (typeof colorFormats)[number]; interface ColorValue { r: number; g: number; b: number; a: number; } interface HSVColorValue { h: number; s: number; v: number; a: number; } function hexToRgb(hex: string, alpha?: number): ColorValue { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: Number.parseInt(result[1] ?? "0", 16), g: Number.parseInt(result[2] ?? "0", 16), b: Number.parseInt(result[3] ?? "0", 16), a: alpha ?? 1, } : { r: 0, g: 0, b: 0, a: alpha ?? 1 }; } function rgbToHex(color: ColorValue): string { const toHex = (n: number) => { const hex = Math.round(n).toString(16); return hex.length === 1 ? `0${hex}` : hex; }; return `#${toHex(color.r)}${toHex(color.g)}${toHex(color.b)}`; } function rgbToHsv(color: ColorValue): HSVColorValue { const r = color.r / 255; const g = color.g / 255; const b = color.b / 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); const diff = max - min; let h = 0; if (diff !== 0) { switch (max) { case r: h = ((g - b) / diff) % 6; break; case g: h = (b - r) / diff + 2; break; case b: h = (r - g) / diff + 4; break; } } h = Math.round(h * 60); if (h < 0) h += 360; const s = max === 0 ? 0 : diff / max; const v = max; return { h, s: Math.round(s * 100), v: Math.round(v * 100), a: color.a, }; } function hsvToRgb(hsv: HSVColorValue): ColorValue { const h = hsv.h / 360; const s = hsv.s / 100; const v = hsv.v / 100; const i = Math.floor(h * 6); const f = h * 6 - i; const p = v * (1 - s); const q = v * (1 - f * s); const t = v * (1 - (1 - f) * s); let r: number; let g: number; let b: number; switch (i % 6) { case 0: { r = v; g = t; b = p; break; } case 1: { r = q; g = v; b = p; break; } case 2: { r = p; g = v; b = t; break; } case 3: { r = p; g = q; b = v; break; } case 4: { r = t; g = p; b = v; break; } case 5: { r = v; g = p; b = q; break; } default: { r = 0; g = 0; b = 0; } } return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255), a: hsv.a, }; } function colorToString(color: ColorValue, format: ColorFormat = "hex"): string { switch (format) { case "hex": return rgbToHex(color); case "rgb": return color.a < 1 ? `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})` : `rgb(${color.r}, ${color.g}, ${color.b})`; case "hsl": { const hsl = rgbToHsl(color); return color.a < 1 ? `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${color.a})` : `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`; } case "hsb": { const hsv = rgbToHsv(color); return color.a < 1 ? `hsba(${hsv.h}, ${hsv.s}%, ${hsv.v}%, ${color.a})` : `hsb(${hsv.h}, ${hsv.s}%, ${hsv.v}%)`; } default: return rgbToHex(color); } } function rgbToHsl(color: ColorValue) { const r = color.r / 255; const g = color.g / 255; const b = color.b / 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); const diff = max - min; const sum = max + min; const l = sum / 2; let h = 0; let s = 0; if (diff !== 0) { s = l > 0.5 ? diff / (2 - sum) : diff / sum; if (max === r) { h = (g - b) / diff + (g < b ? 6 : 0); } else if (max === g) { h = (b - r) / diff + 2; } else if (max === b) { h = (r - g) / diff + 4; } h /= 6; } return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100), }; } function hslToRgb( hsl: { h: number; s: number; l: number }, alpha = 1, ): ColorValue { const h = hsl.h / 360; const s = hsl.s / 100; const l = hsl.l / 100; const c = (1 - Math.abs(2 * l - 1)) * s; const x = c * (1 - Math.abs(((h * 6) % 2) - 1)); const m = l - c / 2; let r = 0; let g = 0; let b = 0; if (h >= 0 && h < 1 / 6) { r = c; g = x; b = 0; } else if (h >= 1 / 6 && h < 2 / 6) { r = x; g = c; b = 0; } else if (h >= 2 / 6 && h < 3 / 6) { r = 0; g = c; b = x; } else if (h >= 3 / 6 && h < 4 / 6) { r = 0; g = x; b = c; } else if (h >= 4 / 6 && h < 5 / 6) { r = x; g = 0; b = c; } else if (h >= 5 / 6 && h < 1) { r = c; g = 0; b = x; } return { r: Math.round((r + m) * 255), g: Math.round((g + m) * 255), b: Math.round((b + m) * 255), a: alpha, }; } function parseColorString(value: string): ColorValue | null { const trimmed = value.trim(); // Parse hex colors if (trimmed.startsWith("#")) { const hexMatch = trimmed.match(/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6})$/); if (hexMatch) { return hexToRgb(trimmed); } } // Parse rgb/rgba colors const rgbMatch = trimmed.match( /^rgba?$\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*$$/, ); if (rgbMatch) { return { r: Number.parseInt(rgbMatch[1] ?? "0", 10), g: Number.parseInt(rgbMatch[2] ?? "0", 10), b: Number.parseInt(rgbMatch[3] ?? "0", 10), a: rgbMatch[4] ? Number.parseFloat(rgbMatch[4]) : 1, }; } // Parse hsl/hsla colors const hslMatch = trimmed.match( /^hsla?$\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([\d.]+))?\s*$$/, ); if (hslMatch) { const h = Number.parseInt(hslMatch[1] ?? "0", 10); const s = Number.parseInt(hslMatch[2] ?? "0", 10) / 100; const l = Number.parseInt(hslMatch[3] ?? "0", 10) / 100; const a = hslMatch[4] ? Number.parseFloat(hslMatch[4]) : 1; // Convert HSL to RGB const c = (1 - Math.abs(2 * l - 1)) * s; const x = c * (1 - Math.abs(((h / 60) % 2) - 1)); const m = l - c / 2; let r = 0; let g = 0; let b = 0; if (h >= 0 && h < 60) { r = c; g = x; b = 0; } else if (h >= 60 && h < 120) { r = x; g = c; b = 0; } else if (h >= 120 && h < 180) { r = 0; g = c; b = x; } else if (h >= 180 && h < 240) { r = 0; g = x; b = c; } else if (h >= 240 && h < 300) { r = x; g = 0; b = c; } else if (h >= 300 && h < 360) { r = c; g = 0; b = x; } return { r: Math.round((r + m) * 255), g: Math.round((g + m) * 255), b: Math.round((b + m) * 255), a, }; } // Parse hsb/hsba colors const hsbMatch = trimmed.match( /^hsba?$\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([\d.]+))?\s*$$/, ); if (hsbMatch) { const h = Number.parseInt(hsbMatch[1] ?? "0", 10); const s = Number.parseInt(hsbMatch[2] ?? "0", 10); const v = Number.parseInt(hsbMatch[3] ?? "0", 10); const a = hsbMatch[4] ? Number.parseFloat(hsbMatch[4]) : 1; return hsvToRgb({ h, s, v, a }); } return null; } type Direction = "ltr" | "rtl"; const DirectionContext = React.createContext(undefined); function useDirection(dirProp?: Direction): Direction { const contextDir = React.useContext(DirectionContext); return dirProp ?? contextDir ?? "ltr"; } function useLazyRef(fn: () => T) { const ref = React.useRef(null); if (ref.current === null) { ref.current = fn(); } return ref as React.RefObject; } interface ColorPickerStoreState { color: ColorValue; hsv: HSVColorValue; open: boolean; format: ColorFormat; } interface ColorPickerStoreCallbacks { onColorChange?: (colorString: string) => void; onOpenChange?: (open: boolean) => void; onFormatChange?: (format: ColorFormat) => void; } interface ColorPickerStore { subscribe: (cb: () => void) => () => void; getState: () => ColorPickerStoreState; setColor: (value: ColorValue) => void; setHsv: (value: HSVColorValue) => void; setOpen: (value: boolean) => void; setFormat: (value: ColorFormat) => void; notify: () => void; } function createColorPickerStore( listenersRef: React.RefObject void>>, stateRef: React.RefObject, callbacks?: ColorPickerStoreCallbacks, ): ColorPickerStore { const store: ColorPickerStore = { subscribe: (cb) => { if (listenersRef.current) { listenersRef.current.add(cb); return () => listenersRef.current?.delete(cb); } return () => {}; }, getState: () => stateRef.current || { color: { r: 0, g: 0, b: 0, a: 1 }, hsv: { h: 0, s: 0, v: 0, a: 1 }, open: false, format: "hex" as ColorFormat, }, setColor: (value: ColorValue) => { if (!stateRef.current) return; if (Object.is(stateRef.current.color, value)) return; const prevState = { ...stateRef.current }; stateRef.current.color = value; if (callbacks?.onColorChange) { const colorString = colorToString(value, prevState.format); callbacks.onColorChange(colorString); } store.notify(); }, setHsv: (value: HSVColorValue) => { if (!stateRef.current) return; if (Object.is(stateRef.current.hsv, value)) return; const prevState = { ...stateRef.current }; stateRef.current.hsv = value; if (callbacks?.onColorChange) { const colorValue = hsvToRgb(value); const colorString = colorToString(colorValue, prevState.format); callbacks.onColorChange(colorString); } store.notify(); }, setOpen: (value: boolean) => { if (!stateRef.current) return; if (Object.is(stateRef.current.open, value)) return; stateRef.current.open = value; if (callbacks?.onOpenChange) { callbacks.onOpenChange(value); } store.notify(); }, setFormat: (value: ColorFormat) => { if (!stateRef.current) return; if (Object.is(stateRef.current.format, value)) return; stateRef.current.format = value; if (callbacks?.onFormatChange) { callbacks.onFormatChange(value); } store.notify(); }, notify: () => { if (listenersRef.current) { for (const cb of listenersRef.current) { cb(); } } }, }; return store; } function useColorPickerStoreContext(consumerName: string) { const context = React.useContext(ColorPickerStoreContext); if (!context) { throw new Error( `\`${consumerName}\` must be used within \`ColorPickerRoot\``, ); } return context; } function useColorPickerStore( selector: (state: ColorPickerStoreState) => U, ): U { const store = useColorPickerStoreContext("useColorPickerStoreSelector"); const getSnapshot = React.useCallback( () => selector(store.getState()), [store, selector], ); return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot); } interface ColorPickerContextValue { dir: Direction; disabled?: boolean; inline?: boolean; readOnly?: boolean; required?: boolean; } const ColorPickerStoreContext = React.createContext( null, ); const ColorPickerContext = React.createContext( null, ); function useColorPickerContext(consumerName: string) { const context = React.useContext(ColorPickerContext); if (!context) { throw new Error( `\`${consumerName}\` must be used within \`ColorPickerRoot\``, ); } return context; } interface ColorPickerRootProps extends Omit, "onValueChange">, Pick< React.ComponentProps, "defaultOpen" | "open" | "modal" > { value?: string; defaultValue?: string; onValueChange?: (value: string) => void; onOpenChange?: (open: boolean) => void; dir?: Direction; format?: ColorFormat; defaultFormat?: ColorFormat; onFormatChange?: (format: ColorFormat) => void; name?: string; disabled?: boolean; inline?: boolean; readOnly?: boolean; required?: boolean; } const ColorPickerRoot = React.memo((props: ColorPickerRootProps) => { const { value: valueProp, defaultValue = "#000000", onValueChange, format: formatProp, defaultFormat = "hex", onFormatChange, defaultOpen, open: openProp, onOpenChange, name, disabled, inline, readOnly, required, ...rootProps } = props; const initialColor = React.useMemo(() => { const colorString = valueProp ?? defaultValue; const color = hexToRgb(colorString); return { color, hsv: rgbToHsv(color), open: openProp ?? defaultOpen ?? false, format: formatProp ?? defaultFormat, }; }, [ valueProp, defaultValue, formatProp, defaultFormat, openProp, defaultOpen, ]); const stateRef = useLazyRef(() => initialColor); const listenersRef = useLazyRef(() => new Set<() => void>()); const storeCallbacks = React.useMemo( () => ({ onColorChange: onValueChange, onOpenChange: onOpenChange, onFormatChange: onFormatChange, }), [onValueChange, onOpenChange, onFormatChange], ); const store = React.useMemo( () => createColorPickerStore(listenersRef, stateRef, storeCallbacks), [listenersRef, stateRef, storeCallbacks], ); return ( ); }); interface ColorPickerRootImplProps extends Omit< ColorPickerRootProps, | "defaultValue" | "onValueChange" | "format" | "defaultFormat" | "onFormatChange" > {} function ColorPickerRootImpl(props: ColorPickerRootImplProps) { const { value: valueProp, dir: dirProp, defaultOpen, open: openProp, onOpenChange, name, ref, disabled, inline, modal, readOnly, required, ...rootProps } = props; const store = useColorPickerStoreContext("ColorPickerRootImpl"); const dir = useDirection(dirProp); const [formTrigger, setFormTrigger] = React.useState( null, ); const composedRef = useComposedRefs(ref, (node) => setFormTrigger(node)); const isFormControl = formTrigger ? !!formTrigger.closest("form") : true; React.useEffect(() => { if (valueProp !== undefined) { const currentState = store.getState(); const color = hexToRgb(valueProp, currentState.color.a); const hsv = rgbToHsv(color); store.setColor(color); store.setHsv(hsv); } }, [valueProp, store]); React.useEffect(() => { if (openProp !== undefined) { store.setOpen(openProp); } }, [openProp, store]); const contextValue = React.useMemo( () => ({ dir, disabled, inline, readOnly, required, }), [dir, disabled, inline, readOnly, required], ); const value = useColorPickerStore((state) => rgbToHex(state.color)); const open = useColorPickerStore((state) => state.open); const onPopoverOpenChange = React.useCallback( (newOpen: boolean) => { store.setOpen(newOpen); onOpenChange?.(newOpen); }, [store.setOpen, onOpenChange], ); if (inline) { return (

{isFormControl && ( )} ); } return (

{isFormControl && ( )} ); } interface ColorPickerTriggerProps extends React.ComponentProps< typeof PopoverTrigger > {} function ColorPickerTrigger(props: ColorPickerTriggerProps) { const { children, ...triggerProps } = props; const context = useColorPickerContext("ColorPickerTrigger"); return ( {children ?? ); } interface ColorPickerFormatSelectProps extends Omit, "value" | "onValueChange">, Pick, "size" | "className"> {} function ColorPickerFormatSelect(props: ColorPickerFormatSelectProps) { const { size, className, ...selectProps } = props; const context = useColorPickerContext("ColorPickerFormatSelector"); const store = useColorPickerStoreContext("ColorPickerFormatSelector"); const format = useColorPickerStore((state) => state.format); const onFormatChange = React.useCallback( (value: unknown) => { if ( typeof value === "string" && colorFormats.includes(value as ColorFormat) ) { store.setFormat(value as ColorFormat); } }, [store], ); return ( ); } interface ColorPickerInputProps extends Omit< React.ComponentProps, "value" | "onChange" | "color" > { withoutAlpha?: boolean; } function ColorPickerInput(props: ColorPickerInputProps) { const context = useColorPickerContext("ColorPickerInput"); const store = useColorPickerStoreContext("ColorPickerInput"); const color = useColorPickerStore((state) => state.color); const format = useColorPickerStore((state) => state.format); const hsv = useColorPickerStore((state) => state.hsv); const onColorChange = React.useCallback( (newColor: ColorValue) => { const newHsv = rgbToHsv(newColor); store.setColor(newColor); store.setHsv(newHsv); }, [store], ); if (format === "hex") { return ( ); } if (format === "rgb") { return ( ); } if (format === "hsl") { return ( ); } if (format === "hsb") { return ( ); } } const inputGroupItemVariants = cva( "h-8 [-moz-appearance:_textfield] focus-visible:z-10 focus-visible:ring-1 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none", { variants: { position: { first: "rounded-e-none", middle: "-ms-px rounded-none border-l-0", last: "-ms-px rounded-s-none border-l-0", isolated: "", }, }, defaultVariants: { position: "isolated", }, }, ); interface InputGroupItemProps extends React.ComponentProps, VariantProps {} function InputGroupItem({ className, position, ...props }: InputGroupItemProps) { return ( ); } interface FormatInputProps extends ColorPickerInputProps { color: ColorValue; onColorChange: (color: ColorValue) => void; context: ColorPickerContextValue; } function HexInput(props: FormatInputProps) { const { color, onColorChange, context, withoutAlpha, className, ...inputProps } = props; const hexValue = rgbToHex(color); const alphaValue = Math.round((color?.a ?? 1) * 100); const onHexChange = React.useCallback( (event: React.ChangeEvent) => { const value = event.target.value; const parsedColor = parseColorString(value); if (parsedColor) { onColorChange({ ...parsedColor, a: color?.a ?? 1 }); } }, [color, onColorChange], ); const onAlphaChange = React.useCallback( (event: React.ChangeEvent) => { const value = Number.parseInt(event.target.value, 10); if (!Number.isNaN(value) && value >= 0 && value <= 100) { onColorChange({ ...color, a: value / 100 }); } }, [color, onColorChange], ); if (withoutAlpha) { return ( ); } return (

); } function RgbInput(props: FormatInputProps) { const { color, onColorChange, context, withoutAlpha, className, ...inputProps } = props; const rValue = Math.round(color?.r ?? 0); const gValue = Math.round(color?.g ?? 0); const bValue = Math.round(color?.b ?? 0); const alphaValue = Math.round((color?.a ?? 1) * 100); const onChannelChange = React.useCallback( (channel: "r" | "g" | "b" | "a", max: number, isAlpha = false) => (event: React.ChangeEvent) => { const value = Number.parseInt(event.target.value, 10); if (!Number.isNaN(value) && value >= 0 && value <= max) { const newValue = isAlpha ? value / 100 : value; onColorChange({ ...color, [channel]: newValue }); } }, [color, onColorChange], ); return (

{!withoutAlpha && ( )}

); } function HslInput(props: FormatInputProps) { const { color, onColorChange, context, withoutAlpha, className, ...inputProps } = props; const hsl = React.useMemo(() => rgbToHsl(color), [color]); const alphaValue = Math.round((color?.a ?? 1) * 100); const onHslChannelChange = React.useCallback( (channel: "h" | "s" | "l", max: number) => (event: React.ChangeEvent) => { const value = Number.parseInt(event.target.value, 10); if (!Number.isNaN(value) && value >= 0 && value <= max) { const newHsl = { ...hsl, [channel]: value }; const newColor = hslToRgb(newHsl, color?.a ?? 1); onColorChange(newColor); } }, [hsl, color, onColorChange], ); const onAlphaChange = React.useCallback( (event: React.ChangeEvent) => { const value = Number.parseInt(event.target.value, 10); if (!Number.isNaN(value) && value >= 0 && value <= 100) { onColorChange({ ...color, a: value / 100 }); } }, [color, onColorChange], ); return (

{!withoutAlpha && ( )}

); } interface HsbInputProps extends Omit { hsv: HSVColorValue; } function HsbInput(props: HsbInputProps) { const { hsv, onColorChange, context, withoutAlpha, className, ...inputProps } = props; const alphaValue = Math.round((hsv?.a ?? 1) * 100); const onHsvChannelChange = React.useCallback( (channel: "h" | "s" | "v", max: number) => (event: React.ChangeEvent) => { const value = Number.parseInt(event.target.value, 10); if (!Number.isNaN(value) && value >= 0 && value <= max) { const newHsv = { ...hsv, [channel]: value }; const newColor = hsvToRgb(newHsv); onColorChange(newColor); } }, [hsv, onColorChange], ); const onAlphaChange = React.useCallback( (event: React.ChangeEvent) => { const value = Number.parseInt(event.target.value, 10); if (!Number.isNaN(value) && value >= 0 && value <= 100) { const currentColor = hsvToRgb(hsv); onColorChange({ ...currentColor, a: value / 100 }); } }, [hsv, onColorChange], ); return (

{!withoutAlpha && ( )}

); } export { ColorPickerRoot as ColorPicker, ColorPickerTrigger, ColorPickerContent, ColorPickerArea, ColorPickerHueSlider, ColorPickerAlphaSlider, ColorPickerSwatch, ColorPickerEyeDropper, ColorPickerFormatSelect, ColorPickerInput, // ColorPickerRoot as Root, ColorPickerTrigger as Trigger, ColorPickerContent as Content, ColorPickerArea as Area, ColorPickerHueSlider as HueSlider, ColorPickerAlphaSlider as AlphaSlider, ColorPickerSwatch as Swatch, ColorPickerEyeDropper as EyeDropper, ColorPickerFormatSelect as FormatSelect, ColorPickerInput as Input, // useColorPickerStore as useColorPicker, }; 6b:T1715,import type { JSX } from "react"; import * as React from "react"; import { useState } from "react"; import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"; import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection"; import { $getNodeByKey, IS_BOLD, IS_HIGHLIGHT, IS_ITALIC, IS_STRIKETHROUGH, IS_UNDERLINE, type NodeKey, } from "lexical"; import { format } from "date-fns"; import { setHours, setMinutes } from "date-fns"; import { enUS, zhCN } from "date-fns/locale"; import { CalendarIcon } from "lucide-react"; import { useEditorI18n } from "@/components/editor/i18n"; import { Button } from "@/components/ui/button"; import { Checkbox } from "@/components/ui/checkbox"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { cn } from "@/lib/utils"; import { $isDateTimeNode, type DateTimeNode } from "../nodes/date-time-node"; const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone; export default function DateTimeComponent({ dateTime, format: textFormat, nodeKey, }: { dateTime: Date | undefined; format: number; nodeKey: NodeKey; }): JSX.Element { const [editor] = useLexicalComposerContext(); const { t, locale } = useEditorI18n(); const dateLocale = locale === "zh-CN" ? zhCN : enUS; const [selected, setSelected] = useState(dateTime); const [includeTime, setIncludeTime] = useState(() => { if (!dateTime) return false; return dateTime.getHours() !== 0 || dateTime.getMinutes() !== 0; }); const [timeValue, setTimeValue] = useState(() => { if (!dateTime) return "00:00"; const h = dateTime.getHours(); const m = dateTime.getMinutes(); if (h !== 0 || m !== 0) { return `${h.toString().padStart(2, "0")}:${m.toString().padStart(2, "0")}`; } return "00:00"; }); const [isNodeSelected] = useLexicalNodeSelection(nodeKey); const withDateTimeNode = (cb: (node: DateTimeNode) => void): void => { editor.update(() => { const node = $getNodeByKey(nodeKey); if ($isDateTimeNode(node)) { cb(node); } }); }; const handleCheckedChange = (checked: boolean) => { withDateTimeNode((node) => { if (checked) { setIncludeTime(true); } else { if (selected) { node.setDateTime(setHours(setMinutes(selected, 0), 0)); } setIncludeTime(false); setTimeValue("00:00"); } }); }; const handleTimeChange = (e: React.ChangeEvent) => { withDateTimeNode((node) => { const time = e.target.value; if (!selected) { setTimeValue(time); return; } const [hours, minutes] = time.split(":").map((s) => parseInt(s, 10)); const newDate = setHours(setMinutes(selected, minutes), hours); setSelected(newDate); node.setDateTime(newDate); setTimeValue(time); }); }; const handleDaySelect = (date: Date | undefined) => { withDateTimeNode((node) => { if (!date) { setSelected(date); return; } const [hours, minutes] = timeValue.split(":").map((s) => parseInt(s, 10)); const newDate = new Date( date.getFullYear(), date.getMonth(), date.getDate(), hours, minutes, ); node.setDateTime(newDate); setSelected(newDate); }); }; const displayLabel = dateTime ? format(dateTime, includeTime ? "PPP p" : "PPP", { locale: dateLocale }) : null; return ( handleDaySelect( event.target.value ? new Date(`${event.target.value}T00:00:00`) : undefined, ) } />

handleCheckedChange(checked) } /> {userTimeZone}

); } 6c:T2554,import type { JSX } from "react"; import { Suspense, useCallback, useEffect, useMemo, useRef, useState, } from "react"; import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"; import { useLexicalEditable } from "@lexical/react/useLexicalEditable"; import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection"; import { mergeRegister } from "@lexical/utils"; import type { LexicalCommand, LexicalEditor, NodeKey } from "lexical"; import { $getSelection, $isNodeSelection, $isRangeSelection, $setSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, DRAGSTART_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, createCommand, } from "lexical"; import { useEditorI18n } from "@/components/editor/i18n"; type ImageStatus = | { error: true } | { error: false; width: number; height: number }; const imageCache = new Map | ImageStatus>(); export const RIGHT_CLICK_IMAGE_COMMAND: LexicalCommand = createCommand("RIGHT_CLICK_IMAGE_COMMAND"); function useSuspenseImage(src: string): ImageStatus { let cached = imageCache.get(src); if (cached && "error" in cached && typeof cached.error === "boolean") { return cached; } else if (!cached) { cached = new Promise((resolve) => { const img = new Image(); img.src = src; img.onload = () => resolve({ error: false, height: img.naturalHeight, width: img.naturalWidth, }); img.onerror = () => resolve({ error: true }); }).then((rval) => { imageCache.set(src, rval); return rval; }); imageCache.set(src, cached); throw cached; } throw cached; } function isSVG(src: string): boolean { const lowerCaseSrc = src.toLowerCase(); return ( lowerCaseSrc.endsWith(".svg") || lowerCaseSrc.startsWith("data:image/svg+xml") ); } function LazyImage({ altText, className, imageRef, src, width, height, maxWidth, onError, }: { altText: string; className: string | null; height: "inherit" | number; imageRef: { current: null | HTMLImageElement }; maxWidth: number; src: string; width: "inherit" | number; onError: () => void; }): JSX.Element { const status = useSuspenseImage(src); useEffect(() => { if (status.error) { onError(); } }, [status.error, onError]); if (status.error) { return ; } // Calculate final dimensions with proper scaling const calculateDimensions = () => { if (width !== "inherit" && height !== "inherit") { return { height, maxWidth, width, }; } const isActuallySVG = isSVG(src); // For standard images, Lexical expects 'inherit' if (!isActuallySVG) { return { height, maxWidth, width, }; } // Use natural dimensions if available, otherwise fallback to defaults const naturalWidth = status.width; const naturalHeight = status.height; // If SVG has no intrinsic dimensions (0), fallback to a sensible default (maxWidth) let finalWidth = naturalWidth || maxWidth; let finalHeight = naturalHeight || finalWidth; // Scale down if width exceeds maxWidth while maintaining aspect ratio if (finalWidth > maxWidth) { const scale = maxWidth / finalWidth; finalWidth = maxWidth; finalHeight = Math.round(finalHeight * scale); } // Scale down if height exceeds maxHeight while maintaining aspect ratio const maxHeight = 500; if (finalHeight > maxHeight) { const scale = maxHeight / finalHeight; finalHeight = maxHeight; finalWidth = Math.round(finalWidth * scale); } return { height: finalHeight, maxWidth, width: finalWidth, }; }; const imageStyle = calculateDimensions(); return ( {altText}

); } function BrokenImage(): JSX.Element { const { t } = useEditorI18n(); return ( {t("image.broken")}

); } export default function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, }: { altText: string; height: "inherit" | number; maxWidth: number; nodeKey: NodeKey; src: string; width: "inherit" | number; }): JSX.Element { const imageRef = useRef(null); const buttonRef = useRef(null); const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey); const [editor] = useLexicalComposerContext(); const activeEditorRef = useRef(null); const [isLoadError, setIsLoadError] = useState(false); const isEditable = useLexicalEditable(); const isInNodeSelection = useMemo( () => isSelected && editor.getEditorState().read(() => { const selection = $getSelection(); return $isNodeSelection(selection) && selection.has(nodeKey); }), [editor, isSelected, nodeKey], ); const $onEnter = useCallback( (event: KeyboardEvent | null) => { const latestSelection = $getSelection(); const buttonElem = buttonRef.current; if ( event !== null && $isNodeSelection(latestSelection) && latestSelection.has(nodeKey) && latestSelection.getNodes().length === 1 ) { if (buttonElem !== null && buttonElem !== document.activeElement) { event.preventDefault(); buttonElem.focus(); return true; } } return false; }, [nodeKey], ); const $onEscape = useCallback( (event: KeyboardEvent) => { if (buttonRef.current === event.target) { $setSelection(null); editor.update(() => { setSelected(true); const parentRootElement = editor.getRootElement(); if (parentRootElement !== null) { parentRootElement.focus(); } }); return true; } return false; }, [editor, setSelected], ); const onClick = useCallback( (payload: MouseEvent) => { const event = payload; if (event.target === imageRef.current) { if (event.shiftKey) { setSelected(!isSelected); } else { clearSelection(); setSelected(true); } return true; } return false; }, [isSelected, setSelected, clearSelection], ); const onRightClick = useCallback( (event: MouseEvent): void => { editor.getEditorState().read(() => { const latestSelection = $getSelection(); const domElement = event.target as HTMLElement; if ( domElement.tagName === "IMG" && $isRangeSelection(latestSelection) && latestSelection.getNodes().length === 1 ) { editor.dispatchCommand(RIGHT_CLICK_IMAGE_COMMAND, event); } }); }, [editor], ); useEffect(() => { return mergeRegister( editor.registerCommand( SELECTION_CHANGE_COMMAND, (_, activeEditor) => { activeEditorRef.current = activeEditor; return false; }, COMMAND_PRIORITY_LOW, ), editor.registerCommand( DRAGSTART_COMMAND, (event) => { if (event.target === imageRef.current) { // TODO This is just a temporary workaround for FF to behave like other browsers. // Ideally, this handles drag & drop too (and all browsers). event.preventDefault(); return true; } return false; }, COMMAND_PRIORITY_LOW, ), ); }, [editor]); useEffect(() => { return mergeRegister( editor.registerCommand( CLICK_COMMAND, onClick, COMMAND_PRIORITY_LOW, ), editor.registerCommand( RIGHT_CLICK_IMAGE_COMMAND, onClick, COMMAND_PRIORITY_LOW, ), editor.registerCommand(KEY_ENTER_COMMAND, $onEnter, COMMAND_PRIORITY_LOW), editor.registerCommand( KEY_ESCAPE_COMMAND, $onEscape, COMMAND_PRIORITY_LOW, ), editor.registerRootListener((rootElement) => { if (rootElement) { rootElement.addEventListener("contextmenu", onRightClick); return () => rootElement.removeEventListener("contextmenu", onRightClick); } }), ); }, [editor, $onEnter, $onEscape, onClick, onRightClick]); const draggable = isInNodeSelection; const isFocused = isSelected && isEditable; return ( <>

{isLoadError ? ( ) : ( setIsLoadError(true)} /> )}

); } 6d:T2480,import * as React from "react"; import { type JSX, useRef } from "react"; import { calculateZoomLevel } from "@lexical/utils"; import type { LexicalEditor } from "lexical"; function clamp(value: number, min: number, max: number) { return Math.min(Math.max(value, min), max); } const Direction = { east: 1 << 0, north: 1 << 3, south: 1 << 1, west: 1 << 2, }; export function ImageResizer({ onResizeStart, onResizeEnd, imageRef, maxWidth, editor, }: { editor: LexicalEditor; imageRef: { current: null | HTMLElement }; maxWidth?: number; onResizeEnd: (width: "inherit" | number, height: "inherit" | number) => void; onResizeStart: () => void; }): JSX.Element { const controlWrapperRef = useRef(null); const userSelect = useRef({ priority: "", value: "default", }); const positioningRef = useRef<{ currentHeight: "inherit" | number; currentWidth: "inherit" | number; direction: number; isResizing: boolean; ratio: number; startHeight: number; startWidth: number; startX: number; startY: number; }>({ currentHeight: 0, currentWidth: 0, direction: 0, isResizing: false, ratio: 0, startHeight: 0, startWidth: 0, startX: 0, startY: 0, }); const editorRootElement = editor.getRootElement(); // Find max width, accounting for editor padding. const maxWidthContainer = maxWidth ? maxWidth : editorRootElement !== null ? editorRootElement.getBoundingClientRect().width - 20 : 100; const maxHeightContainer = editorRootElement !== null ? editorRootElement.getBoundingClientRect().height - 20 : 100; const minWidth = 100; const minHeight = 100; const setStartCursor = (direction: number) => { const ew = direction === Direction.east || direction === Direction.west; const ns = direction === Direction.north || direction === Direction.south; const nwse = (direction & Direction.north && direction & Direction.west) || (direction & Direction.south && direction & Direction.east); const cursorDir = ew ? "ew" : ns ? "ns" : nwse ? "nwse" : "nesw"; if (editorRootElement !== null) { editorRootElement.style.setProperty( "cursor", `${cursorDir}-resize`, "important", ); } if (document.body !== null) { document.body.style.setProperty( "cursor", `${cursorDir}-resize`, "important", ); userSelect.current.value = document.body.style.getPropertyValue( "-webkit-user-select", ); userSelect.current.priority = document.body.style.getPropertyPriority( "-webkit-user-select", ); document.body.style.setProperty( "-webkit-user-select", `none`, "important", ); } }; const setEndCursor = () => { if (editorRootElement !== null) { editorRootElement.style.setProperty("cursor", "text"); } if (document.body !== null) { document.body.style.setProperty("cursor", "default"); document.body.style.setProperty( "-webkit-user-select", userSelect.current.value, userSelect.current.priority, ); } }; const handlePointerDown = ( event: React.PointerEvent, direction: number, ) => { if (!editor.isEditable()) { return; } const image = imageRef.current; const controlWrapper = controlWrapperRef.current; if (image !== null && controlWrapper !== null) { event.preventDefault(); const { width, height } = image.getBoundingClientRect(); const zoom = calculateZoomLevel(image); const positioning = positioningRef.current; positioning.startWidth = width; positioning.startHeight = height; positioning.ratio = width / height; positioning.currentWidth = width; positioning.currentHeight = height; positioning.startX = event.clientX / zoom; positioning.startY = event.clientY / zoom; positioning.isResizing = true; positioning.direction = direction; setStartCursor(direction); onResizeStart(); controlWrapper.classList.add("touch-action-none"); image.style.height = `${height}px`; image.style.width = `${width}px`; document.addEventListener("pointermove", handlePointerMove); document.addEventListener("pointerup", handlePointerUp); } }; const handlePointerMove = (event: PointerEvent) => { const image = imageRef.current; const positioning = positioningRef.current; const isHorizontal = positioning.direction & (Direction.east | Direction.west); const isVertical = positioning.direction & (Direction.south | Direction.north); if (image !== null && positioning.isResizing) { const zoom = calculateZoomLevel(image); // Corner cursor if (isHorizontal && isVertical) { let diff = Math.floor(positioning.startX - event.clientX / zoom); diff = positioning.direction & Direction.east ? -diff : diff; const width = clamp( positioning.startWidth + diff, minWidth, maxWidthContainer, ); const height = width / positioning.ratio; image.style.width = `${width}px`; image.style.height = `${height}px`; positioning.currentHeight = height; positioning.currentWidth = width; } else if (isVertical) { let diff = Math.floor(positioning.startY - event.clientY / zoom); diff = positioning.direction & Direction.south ? -diff : diff; const height = clamp( positioning.startHeight + diff, minHeight, maxHeightContainer, ); image.style.height = `${height}px`; positioning.currentHeight = height; } else { let diff = Math.floor(positioning.startX - event.clientX / zoom); diff = positioning.direction & Direction.east ? -diff : diff; const width = clamp( positioning.startWidth + diff, minWidth, maxWidthContainer, ); image.style.width = `${width}px`; positioning.currentWidth = width; } } }; const handlePointerUp = () => { const image = imageRef.current; const positioning = positioningRef.current; const controlWrapper = controlWrapperRef.current; if (image !== null && controlWrapper !== null && positioning.isResizing) { const width = positioning.currentWidth; const height = positioning.currentHeight; positioning.startWidth = 0; positioning.startHeight = 0; positioning.ratio = 0; positioning.startX = 0; positioning.startY = 0; positioning.currentWidth = 0; positioning.currentHeight = 0; positioning.isResizing = false; controlWrapper.classList.remove("touch-action-none"); setEndCursor(); onResizeEnd(width, height); document.removeEventListener("pointermove", handlePointerMove); document.removeEventListener("pointerup", handlePointerUp); } }; return (

{ handlePointerDown(event, Direction.north); }} />

{ handlePointerDown(event, Direction.north | Direction.east); }} />

{ handlePointerDown(event, Direction.east); }} />

{ handlePointerDown(event, Direction.south | Direction.east); }} />

{ handlePointerDown(event, Direction.south); }} />

{ handlePointerDown(event, Direction.south | Direction.west); }} />

{ handlePointerDown(event, Direction.west); }} />

{ handlePointerDown(event, Direction.north | Direction.west); }} />

); } 6e:T4e9,import { $insertNodeIntoLeaf, $wrapNodeInElement } from "@lexical/utils"; import { $createParagraphNode, $getSelection, $isRangeSelection, $isRootOrShadowRoot, COMMAND_PRIORITY_EDITOR, type LexicalCommand, createCommand, defineExtension, } from "lexical"; import { $createDateTimeNode, DateTimeNode } from "../nodes/date-time-node"; type CommandPayload = { dateTime: Date; }; export const INSERT_DATETIME_COMMAND: LexicalCommand = createCommand("INSERT_DATETIME_COMMAND"); export const DateTimeExtension = defineExtension({ name: "@shadcn-editor/DateTime", nodes: [DateTimeNode], register: (editor) => editor.registerCommand( INSERT_DATETIME_COMMAND, (payload) => { const { dateTime } = payload; const dateTimeNode = $createDateTimeNode(dateTime); const selection = $getSelection(); if ($isRangeSelection(selection)) { dateTimeNode.setFormat(selection.format); } $insertNodeIntoLeaf(dateTimeNode); if ($isRootOrShadowRoot(dateTimeNode.getParent())) { $wrapNodeInElement(dateTimeNode, $createParagraphNode).selectEnd(); } return true; }, COMMAND_PRIORITY_EDITOR, ), }); 6f:T452,import { DRAG_DROP_PASTE } from "@lexical/rich-text"; import { isMimeType, mediaFileReader } from "@lexical/utils"; import { COMMAND_PRIORITY_LOW, defineExtension } from "lexical"; import { INSERT_IMAGE_COMMAND } from "@/components/editor/extensions/images-extension"; const ACCEPTABLE_IMAGE_TYPES = [ "image/", "image/heic", "image/heif", "image/gif", "image/webp", ]; export const DragDropPasteExtension = defineExtension({ name: "@shadcn-editor/DragDropPaste", register: (editor) => editor.registerCommand( DRAG_DROP_PASTE, (files) => { (async () => { const filesResult = await mediaFileReader( files, [ACCEPTABLE_IMAGE_TYPES].flatMap((x) => x), ); for (const { file, result } of filesResult) { if (isMimeType(file, ACCEPTABLE_IMAGE_TYPES)) { editor.dispatchCommand(INSERT_IMAGE_COMMAND, { altText: file.name, src: result, }); } } })(); return true; }, COMMAND_PRIORITY_LOW, ), }); 70:T59f,import { TextNode, defineExtension } from "lexical"; import { $createEmojiNode, EmojiNode, } from "@/components/editor/nodes/emoji-node"; const emojis: Map = new Map([ [":)", ["emoji happysmile", "🙂"]], [":D", ["emoji veryhappysmile", "😀"]], [":(", ["emoji unhappysmile", "🙁"]], ["<3", ["emoji heart", "❤"]], ]); function $findAndTransformEmoji(node: TextNode): null | TextNode { const text = node.getTextContent(); for (let i = 0; i < text.length; i++) { const emojiData = emojis.get(text[i]) || emojis.get(text.slice(i, i + 2)); if (emojiData !== undefined) { const [emojiStyle, emojiText] = emojiData; let targetNode; if (i === 0) { [targetNode] = node.splitText(i + 2); } else { [, targetNode] = node.splitText(i, i + 2); } const emojiNode = $createEmojiNode(emojiStyle, emojiText); targetNode.replace(emojiNode); return emojiNode; } } return null; } function $textNodeTransform(node: TextNode): void { let targetNode: TextNode | null = node; while (targetNode !== null) { if (!targetNode.isSimpleText()) { return; } targetNode = $findAndTransformEmoji(targetNode); } } export const EmojisExtension = defineExtension({ name: "@shadcn-editor/Emojis", nodes: [EmojiNode], register: (editor) => editor.registerNodeTransform(TextNode, $textNodeTransform), }); 71:T2679,import { type JSX, useEffect, useRef, useState } from "react"; import { $isAutoLinkNode, $isLinkNode, type LinkNode, TOGGLE_LINK_COMMAND, } from "@lexical/link"; import { $wrapNodeInElement, mergeRegister } from "@lexical/utils"; import { $createParagraphNode, $createRangeSelection, $findMatchingParent, $getSelection, $insertNodes, $isNodeSelection, $isRootOrShadowRoot, $setSelection, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, DRAGOVER_COMMAND, DRAGSTART_COMMAND, DROP_COMMAND, type LexicalCommand, type LexicalEditor, createCommand, defineExtension, getDOMSelectionFromTarget, isHTMLElement, } from "lexical"; import { $createImageNode, $isImageNode, ImageNode, type ImagePayload, } from "@/components/editor/nodes/image-node"; import { useEditorI18n } from "@/components/editor/i18n"; import { Button } from "@/components/ui/button"; import { DialogFooter } from "@/components/ui/dialog"; import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"; import { Input } from "@/components/ui/input"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; export type InsertImagePayload = Readonly; export const INSERT_IMAGE_COMMAND: LexicalCommand = createCommand("INSERT_IMAGE_COMMAND"); export function InsertImageUriDialogBody({ onClick, }: { onClick: (payload: InsertImagePayload) => void; }) { const { t } = useEditorI18n(); const [src, setSrc] = useState(""); const [altText, setAltText] = useState(""); const isDisabled = src === ""; return ( {t("imageDialog.url")} setSrc(e.target.value)} value={src} data-test-id="image-modal-url-input" /> {t("imageDialog.alt")} setAltText(e.target.value)} value={altText} data-test-id="image-modal-alt-text-input" /> ); } export function InsertImageUploadedDialogBody({ onClick, }: { onClick: (payload: InsertImagePayload) => void; }) { const { t } = useEditorI18n(); const [src, setSrc] = useState(""); const [altText, setAltText] = useState(""); const isDisabled = src === ""; const loadImage = (files: FileList | null) => { const reader = new FileReader(); reader.onload = function () { if (typeof reader.result === "string") { setSrc(reader.result); } return ""; }; if (files !== null) { reader.readAsDataURL(files[0]); } }; return ( {t("imageDialog.upload")} loadImage(e.target.files)} accept="image/*" className="text-foreground file:text-foreground" data-test-id="image-modal-file-upload" /> {t("imageDialog.alt")} setAltText(e.target.value)} value={altText} data-test-id="image-modal-alt-text-input" /> ); } export function InsertImageDialog({ activeEditor, onClose, }: { activeEditor: LexicalEditor; onClose: () => void; }): JSX.Element { const { t } = useEditorI18n(); const hasModifier = useRef(false); useEffect(() => { hasModifier.current = false; const handler = (e: KeyboardEvent) => { hasModifier.current = e.altKey; }; document.addEventListener("keydown", handler); return () => { document.removeEventListener("keydown", handler); }; }, [activeEditor]); const onClick = (payload: InsertImagePayload) => { console.log("onClick", payload); activeEditor.dispatchCommand(INSERT_IMAGE_COMMAND, payload); onClose(); }; return ( {t("imageDialog.tabUrl")} {t("imageDialog.tabFile")} ); } export const ImagesExtension = defineExtension({ name: "@shadcn-editor/Images", nodes: [ImageNode], register: (editor) => mergeRegister( editor.registerCommand( INSERT_IMAGE_COMMAND, (payload) => { const imageNode = $createImageNode(payload); $insertNodes([imageNode]); if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) { $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd(); } return true; }, COMMAND_PRIORITY_EDITOR, ), editor.registerCommand( DRAGSTART_COMMAND, (event) => $onDragStart(event), COMMAND_PRIORITY_HIGH, ), editor.registerCommand( DRAGOVER_COMMAND, (event) => $onDragover(event), COMMAND_PRIORITY_LOW, ), editor.registerCommand( DROP_COMMAND, (event) => $onDrop(event, editor), COMMAND_PRIORITY_HIGH, ), ), }); const TRANSPARENT_IMAGE = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"; const img = document.createElement("img"); img.src = TRANSPARENT_IMAGE; function $onDragStart(event: DragEvent): boolean { const node = $getImageNodeInSelection(); if (!node) { return false; } const dataTransfer = event.dataTransfer; if (!dataTransfer) { return false; } dataTransfer.setData("text/plain", "_"); dataTransfer.setDragImage(img, 0, 0); dataTransfer.setData( "application/x-lexical-drag", JSON.stringify({ data: { altText: node.__altText, height: node.__height, key: node.getKey(), maxWidth: node.__maxWidth, src: node.__src, width: node.__width, }, type: "image", }), ); return true; } function $onDragover(event: DragEvent): boolean { const node = $getImageNodeInSelection(); if (!node) { return false; } if (!canDropImage(event)) { event.preventDefault(); } return false; } function $onDrop(event: DragEvent, editor: LexicalEditor): boolean { const node = $getImageNodeInSelection(); if (!node) { return false; } const data = getDragImageData(event); if (!data) { return false; } const existingLink = $findMatchingParent( node, (parent): parent is LinkNode => !$isAutoLinkNode(parent) && $isLinkNode(parent), ); event.preventDefault(); if (canDropImage(event)) { const range = getDragSelection(event); node.remove(); const rangeSelection = $createRangeSelection(); if (range !== null && range !== undefined) { rangeSelection.applyDOMRange(range); } $setSelection(rangeSelection); editor.dispatchCommand(INSERT_IMAGE_COMMAND, data); if (existingLink) { editor.dispatchCommand(TOGGLE_LINK_COMMAND, existingLink.getURL()); } } return true; } function $getImageNodeInSelection(): ImageNode | null { const selection = $getSelection(); if (!$isNodeSelection(selection)) { return null; } const nodes = selection.getNodes(); const node = nodes[0]; return $isImageNode(node) ? node : null; } function getDragImageData(event: DragEvent): null | InsertImagePayload { const dragData = event.dataTransfer?.getData("application/x-lexical-drag"); if (!dragData) { return null; } const { type, data } = JSON.parse(dragData); if (type !== "image") { return null; } return data; } declare global { interface DragEvent { rangeOffset?: number; rangeParent?: Node; } } function canDropImage(event: DragEvent): boolean { const target = event.target; return !!( isHTMLElement(target) && !target.closest("code, span.editor-image") && isHTMLElement(target.parentElement) && target.parentElement.closest("div.ContentEditable__root") ); } function getDragSelection(event: DragEvent): Range | null | undefined { let range; const domSelection = getDOMSelectionFromTarget(event.target); if (document.caretRangeFromPoint) { range = document.caretRangeFromPoint(event.clientX, event.clientY); } else if (event.rangeParent && domSelection !== null) { domSelection.collapse(event.rangeParent, event.rangeOffset || 0); range = domSelection.getRangeAt(0); } else { throw Error(`Cannot get the selection when dragging`); } return range; } 72:T191e,import { registerLexicalTextEntity } from "@lexical/text"; import { TextNode, defineExtension, mergeRegister } from "lexical"; import { $createKeywordNode, KeywordNode } from "../nodes/keyword-node"; const KEYWORDS_REGEX = /(^|$|[^A-Za-zªµºÀ-ÖØ-öø-ˁˆ-ˑˠ-ˤˬˮͰ-ʹͶͷͺ-ͽΆΈ-ΊΌΎ-ΡΣ-ϵϷ-ҁҊ-ԧԱ-Ֆՙա-ևא-תװ-ײؠ-يٮٯٱ-ۓەۥۦۮۯۺ-ۼۿܐܒ-ܯݍ-ޥޱߊ-ߪߴߵߺࠀ-ࠕࠚࠤࠨࡀ-ࡘࢠࢢ-ࢬऄ-हऽॐक़-ॡॱ-ॷॹ-ॿঅ-ঌএঐও-নপ-রলশ-হঽৎড়ঢ়য়-ৡৰৱਅ-ਊਏਐਓ-ਨਪ-ਰਲਲ਼ਵਸ਼ਸਹਖ਼-ੜਫ਼ੲ-ੴઅ-ઍએ-ઑઓ-નપ-રલળવ-હઽૐૠૡଅ-ଌଏଐଓ-ନପ-ରଲଳଵ-ହଽଡ଼ଢ଼ୟ-ୡୱஃஅ-ஊஎ-ஐஒ-கஙசஜஞடணதந-பம-ஹௐఅ-ఌఎ-ఐఒ-నప-ళవ-హఽౘౙౠౡಅ-ಌಎ-ಐಒ-ನಪ-ಳವ-ಹಽೞೠೡೱೲഅ-ഌഎ-ഐഒ-ഺഽൎൠൡൺ-ൿඅ-ඖක-නඳ-රලව-ෆก-ะาำเ-ๆກຂຄງຈຊຍດ-ທນ-ຟມ-ຣລວສຫອ-ະາຳຽເ-ໄໆໜ-ໟༀཀ-ཇཉ-ཬྈ-ྌက-ဪဿၐ-ၕၚ-ၝၡၥၦၮ-ၰၵ-ႁႎႠ-ჅჇჍა-ჺჼ-ቈቊ-ቍቐ-ቖቘቚ-ቝበ-ኈኊ-ኍነ-ኰኲ-ኵኸ-ኾዀዂ-ዅወ-ዖዘ-ጐጒ-ጕጘ-ፚᎀ-ᎏᎠ-Ᏼᐁ-ᙬᙯ-ᙿᚁ-ᚚᚠ-ᛪᜀ-ᜌᜎ-ᜑᜠ-ᜱᝀ-ᝑᝠ-ᝬᝮ-ᝰក-ឳៗៜᠠ-ᡷᢀ-ᢨᢪᢰ-ᣵᤀ-ᤜᥐ-ᥭᥰ-ᥴᦀ-ᦫᧁ-ᧇᨀ-ᨖᨠ-ᩔᪧᬅ-ᬳᭅ-ᭋᮃ-ᮠᮮᮯᮺ-ᯥᰀ-ᰣᱍ-ᱏᱚ-ᱽᳩ-ᳬᳮ-ᳱᳵᳶᴀ-ᶿḀ-ἕἘ-Ἕἠ-ὅὈ-Ὅὐ-ὗὙὛὝὟ-ώᾀ-ᾴᾶ-ᾼιῂ-ῄῆ-ῌῐ-ΐῖ-Ίῠ-Ῥῲ-ῴῶ-ῼⁱⁿₐ-ₜℂℇℊ-ℓℕℙ-ℝℤΩℨK-ℭℯ-ℹℼ-ℿⅅ-ⅉⅎↃↄⰀ-Ⱞⰰ-ⱞⱠ-ⳤⳫ-ⳮⳲⳳⴀ-ⴥⴧⴭⴰ-ⵧⵯⶀ-ⶖⶠ-ⶦⶨ-ⶮⶰ-ⶶⶸ-ⶾⷀ-ⷆⷈ-ⷎⷐ-ⷖⷘ-ⷞⸯ々〆〱-〵〻〼ぁ-ゖゝ-ゟァ-ヺー-ヿㄅ-ㄭㄱ-ㆎㆠ-ㆺㇰ-ㇿ㐀-䶵一-鿌ꀀ-ꒌꓐ-ꓽꔀ-ꘌꘐ-ꘟꘪꘫꙀ-ꙮꙿ-ꚗꚠ-ꛥꜗ-ꜟꜢ-ꞈꞋ-ꞎꞐ-ꞓꞠ-Ɦꟸ-ꠁꠃ-ꠅꠇ-ꠊꠌ-ꠢꡀ-ꡳꢂ-ꢳꣲ-ꣷꣻꤊ-ꤥꤰ-ꥆꥠ-ꥼꦄ-ꦲꧏꨀ-ꨨꩀ-ꩂꩄ-ꩋꩠ-ꩶꩺꪀ-ꪯꪱꪵꪶꪹ-ꪽꫀꫂꫛ-ꫝꫠ-ꫪꫲ-ꫴꬁ-ꬆꬉ-ꬎꬑ-ꬖꬠ-ꬦꬨ-ꬮꯀ-ꯢ가-힣ힰ-ퟆퟋ-ퟻ豈-舘並-龎ﬀ-ﬆﬓ-ﬗיִײַ-ﬨשׁ-זּטּ-לּמּנּסּףּפּצּ-ﮱﯓ-ﴽﵐ-ﶏﶒ-ﷇﷰ-ﷻﹰ-ﹴﹶ-ﻼＡ-Ｚａ-ｚｦ-ﾾￂ-ￇￊ-ￏￒ-ￗￚ-ￜ])(congrats|congratulations|gratuluju|gratuluji|gratulujeme|blahopřeju|blahopřeji|blahopřejeme|Til lykke|Tillykke|Glückwunsch|Gratuliere|felicitaciones|enhorabuena|paljon onnea|onnittelut|Félicitations|gratula|gratulálok|gratulálunk|congratulazioni|complimenti|おめでとう|おめでとうございます|축하해|축하해요|gratulerer|Gefeliciteerd|gratulacje|Parabéns|parabéns|felicitações|felicitări|мои поздравления|поздравляем|поздравляю|gratulujem|blahoželám|ยินดีด้วย|ขอแสดงความยินดี|tebrikler|tebrik ederim|恭喜|祝贺你|恭喜你|恭喜|恭喜|baie geluk|veels geluk|অভিনন্দন|Čestitam|Čestitke|Čestitamo|Συγχαρητήρια|Μπράβο|અભિનંદન|badhai|बधाई|अभिनंदन|Честитам|Свака част|hongera|வாழ்த்துகள்|வாழ்த்துக்கள்|అభినందనలు|അഭിനന്ദനങ്ങൾ|Chúc mừng|מזל טוב|mazel tov|mazal tov)(^|$|[^A-Za-zªµºÀ-ÖØ-öø-ˁˆ-ˑˠ-ˤˬˮͰ-ʹͶͷͺ-ͽΆΈ-ΊΌΎ-ΡΣ-ϵϷ-ҁҊ-ԧԱ-Ֆՙա-ևא-תװ-ײؠ-يٮٯٱ-ۓەۥۦۮۯۺ-ۼۿܐܒ-ܯݍ-ޥޱߊ-ߪߴߵߺࠀ-ࠕࠚࠤࠨࡀ-ࡘࢠࢢ-ࢬऄ-हऽॐक़-ॡॱ-ॷॹ-ॿঅ-ঌএঐও-নপ-রলশ-হঽৎড়ঢ়য়-ৡৰৱਅ-ਊਏਐਓ-ਨਪ-ਰਲਲ਼ਵਸ਼ਸਹਖ਼-ੜਫ਼ੲ-ੴઅ-ઍએ-ઑઓ-નપ-રલળવ-હઽૐૠૡଅ-ଌଏଐଓ-ନପ-ରଲଳଵ-ହଽଡ଼ଢ଼ୟ-ୡୱஃஅ-ஊஎ-ஐஒ-கஙசஜஞடணதந-பம-ஹௐఅ-ఌఎ-ఐఒ-నప-ళవ-హఽౘౙౠౡಅ-ಌಎ-ಐಒ-ನಪ-ಳವ-ಹಽೞೠೡೱೲഅ-ഌഎ-ഐഒ-ഺഽൎൠൡൺ-ൿඅ-ඖක-නඳ-රලව-ෆก-ะาำเ-ๆກຂຄງຈຊຍດ-ທນ-ຟມ-ຣລວສຫອ-ະາຳຽເ-ໄໆໜ-ໟༀཀ-ཇཉ-ཬྈ-ྌက-ဪဿၐ-ၕၚ-ၝၡၥၦၮ-ၰၵ-ႁႎႠ-ჅჇჍა-ჺჼ-ቈቊ-ቍቐ-ቖቘቚ-ቝበ-ኈኊ-ኍነ-ኰኲ-ኵኸ-ኾዀዂ-ዅወ-ዖዘ-ጐጒ-ጕጘ-ፚᎀ-ᎏᎠ-Ᏼᐁ-ᙬᙯ-ᙿᚁ-ᚚᚠ-ᛪᜀ-ᜌᜎ-ᜑᜠ-ᜱᝀ-ᝑᝠ-ᝬᝮ-ᝰក-ឳៗៜᠠ-ᡷᢀ-ᢨᢪᢰ-ᣵᤀ-ᤜᥐ-ᥭᥰ-ᥴᦀ-ᦫᧁ-ᧇᨀ-ᨖᨠ-ᩔᪧᬅ-ᬳᭅ-ᭋᮃ-ᮠᮮᮯᮺ-ᯥᰀ-ᰣᱍ-ᱏᱚ-ᱽᳩ-ᳬᳮ-ᳱᳵᳶᴀ-ᶿḀ-ἕἘ-Ἕἠ-ὅὈ-Ὅὐ-ὗὙὛὝὟ-ώᾀ-ᾴᾶ-ᾼιῂ-ῄῆ-ῌῐ-ΐῖ-Ίῠ-Ῥῲ-ῴῶ-ῼⁱⁿₐ-ₜℂℇℊ-ℓℕℙ-ℝℤΩℨK-ℭℯ-ℹℼ-ℿⅅ-ⅉⅎↃↄⰀ-Ⱞⰰ-ⱞⱠ-ⳤⳫ-ⳮⳲⳳⴀ-ⴥⴧⴭⴰ-ⵧⵯⶀ-ⶖⶠ-ⶦⶨ-ⶮⶰ-ⶶⶸ-ⶾⷀ-ⷆⷈ-ⷎⷐ-ⷖⷘ-ⷞⸯ々〆〱-〵〻〼ぁ-ゖゝ-ゟァ-ヺー-ヿㄅ-ㄭㄱ-ㆎㆠ-ㆺㇰ-ㇿ㐀-䶵一-鿌ꀀ-ꒌꓐ-ꓽꔀ-ꘌꘐ-ꘟꘪꘫꙀ-ꙮꙿ-ꚗꚠ-ꛥꜗ-ꜟꜢ-ꞈꞋ-ꞎꞐ-ꞓꞠ-Ɦꟸ-ꠁꠃ-ꠅꠇ-ꠊꠌ-ꠢꡀ-ꡳꢂ-ꢳꣲ-ꣷꣻꤊ-ꤥꤰ-ꥆꥠ-ꥼꦄ-ꦲꧏꨀ-ꨨꩀ-ꩂꩄ-ꩋꩠ-ꩶꩺꪀ-ꪯꪱꪵꪶꪹ-ꪽꫀꫂꫛ-ꫝꫠ-ꫪꫲ-ꫴꬁ-ꬆꬉ-ꬎꬑ-ꬖꬠ-ꬦꬨ-ꬮꯀ-ꯢ가-힣ힰ-ퟆퟋ-ퟻ豈-舘並-龎ﬀ-ﬆﬓ-ﬗיִײַ-ﬨשׁ-זּטּ-לּמּנּסּףּפּצּ-ﮱﯓ-ﴽﵐ-ﶏﶒ-ﷇﷰ-ﷻﹰ-ﹴﹶ-ﻼＡ-Ｚａ-ｚｦ-ﾾￂ-ￇￊ-ￏￒ-ￗￚ-ￜ])/i; function $convertToKeywordNode(textNode: TextNode): KeywordNode { return $createKeywordNode(textNode.getTextContent()); } function getKeywordMatch(text: string) { const matchArr = KEYWORDS_REGEX.exec(text); if (matchArr === null) { return null; } const hashtagLength = matchArr[2].length; const startOffset = matchArr.index + matchArr[1].length; const endOffset = startOffset + hashtagLength; return { end: endOffset, start: startOffset, }; } export const KeywordsExtension = defineExtension({ name: "@shadcn-editor/LexicalKeywords", nodes: () => [KeywordNode], register(editor) { return mergeRegister( ...registerLexicalTextEntity( editor, getKeywordMatch, KeywordNode, $convertToKeywordNode, ), ); }, }); 73:T7e8,import { effect, namedSignals } from "@lexical/extension"; import { $trimTextContentFromAnchor } from "@lexical/selection"; import { $restoreEditorState } from "@lexical/utils"; import { $getSelection, $isRangeSelection, type EditorState, RootNode, defineExtension, safeCast, } from "lexical"; export interface MaxLengthConfig { disabled: boolean; maxLength: number; } export const MaxLengthExtension = defineExtension({ build: (_, config) => namedSignals(config), config: safeCast({ disabled: false, maxLength: 3000 }), name: "@shadcn-editor/MaxLength", register: (editor, _, state) => effect(() => { const output = state.getOutput(); if (output.disabled.value) { return; } const maxLength = output.maxLength.value; let lastRestoredEditorState: EditorState | null = null; return editor.registerNodeTransform(RootNode, (rootNode: RootNode) => { const selection = $getSelection(); if (!$isRangeSelection(selection) || !selection.isCollapsed()) { return; } const prevEditorState = editor.getEditorState(); const prevTextContentSize = prevEditorState.read(() => rootNode.getTextContentSize(), ); const textContentSize = rootNode.getTextContentSize(); if (prevTextContentSize !== textContentSize) { const delCount = textContentSize - maxLength; const anchor = selection.anchor; if (delCount > 0) { // Restore the old editor state instead if the last // text content was already at the limit. if ( prevTextContentSize === maxLength && lastRestoredEditorState !== prevEditorState ) { lastRestoredEditorState = prevEditorState; $restoreEditorState(editor, prevEditorState); } else { $trimTextContentFromAnchor(editor, anchor, delCount); } } } }); }), }); 74:T887,import type { DOMExportOutput, EditorConfig, LexicalEditor, NodeKey, SerializedTextNode, Spread, } from "lexical"; import { TextNode } from "lexical"; import { uuid as UUID } from "@/components/editor/plugins/auto-complete-plugin"; export type SerializedAutocompleteNode = Spread< { uuid: string; }, SerializedTextNode >; export class AutocompleteNode extends TextNode { /** * A unique uuid is generated for each session and assigned to the instance. * This helps to: * - Ensures max one Autocomplete node per session. * - Ensure that when collaboration is enabled, this node is not shown in * other sessions. * See https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/AutocompletePlugin/index.tsx */ __uuid: string; static clone(node: AutocompleteNode): AutocompleteNode { return new AutocompleteNode(node.__text, node.__uuid, node.__key); } static getType(): "autocomplete" { return "autocomplete"; } static importDOM() { // Never import from DOM return null; } static importJSON( serializedNode: SerializedAutocompleteNode, ): AutocompleteNode { return $createAutocompleteNode( serializedNode.text, serializedNode.uuid, ).updateFromJSON(serializedNode); } exportJSON(): SerializedAutocompleteNode { return { ...super.exportJSON(), uuid: this.__uuid, }; } constructor(text: string, uuid: string, key?: NodeKey) { super(text, key); this.__uuid = uuid; } updateDOM( _prevNode: this, _dom: HTMLElement, _config: EditorConfig, ): boolean { return false; } exportDOM(_: LexicalEditor): DOMExportOutput { return { element: null }; } excludeFromCopy() { return true; } createDOM(config: EditorConfig): HTMLElement { const dom = super.createDOM(config); dom.classList.add(config.theme.autocomplete); if (this.__uuid !== UUID) { dom.style.display = "none"; } return dom; } } export function $createAutocompleteNode( text: string, uuid: string, ): AutocompleteNode { return new AutocompleteNode(text, uuid).setMode("token"); } 75:T1205,import type { JSX } from "react"; import * as React from "react"; import { DecoratorTextNode, type SerializedDecoratorTextNode, applyFormatFromStyle, applyFormatToDom, } from "@lexical/extension"; import { $getState, $isTextNode, $setState, type DOMConversionOutput, type DOMExportOutput, type LexicalNode, type Spread, type StateConfigValue, type StateValueOrUpdater, buildImportMap, createState, } from "lexical"; const DateTimeComponent = React.lazy( () => import("@/components/editor/editor-ui/date-time-component"), ); const tagToFormat = { b: "bold", i: "italic", mark: "highlight", s: "strikethrough", u: "underline", } as const; const getDateTimeText = (dateTime: Date) => { if (dateTime === undefined) { return ""; } const hours = dateTime?.getHours(); const minutes = dateTime?.getMinutes(); return ( dateTime.toDateString() + (hours === 0 && minutes === 0 ? "" : ` ${hours.toString().padStart(2, "0")}:${minutes .toString() .padStart(2, "0")}`) ); }; export type SerializedDateTimeNode = Spread< { dateTime?: string; }, SerializedDecoratorTextNode >; function $convertDateTimeElement( domNode: HTMLElement, ): DOMConversionOutput | null { const dateTimeValue = domNode.getAttribute("data-lexical-datetime"); if (dateTimeValue) { const node = $createDateTimeNode(new Date(Date.parse(dateTimeValue))); return { after: (childLexicalNodes) => { // exportDOM returns only one child text, so only the first node of the array is taken const firstChild = childLexicalNodes[0]; if ($isTextNode(firstChild)) { node.setFormat(firstChild.getFormat()); } return childLexicalNodes; }, node, }; } const gDocsDateTimePayload = domNode.getAttribute("data-rich-links"); if (!gDocsDateTimePayload) { return null; } const parsed = JSON.parse(gDocsDateTimePayload); const parsedDate = parsed?.dat_df?.dfie_ts?.tv?.tv_s * 1000 || Date.parse(parsed?.dat_df?.dfie_dt || ""); if (isNaN(parsedDate)) { return null; } const dateTimeNode = $createDateTimeNode(new Date(parsedDate)); return { node: applyFormatFromStyle(dateTimeNode, domNode.style) }; } const dateTimeState = createState("dateTime", { parse: (v) => new Date(v as string), unparse: (v) => v.toISOString(), }); export class DateTimeNode extends DecoratorTextNode { $config() { return this.config("datetime", { extends: DecoratorTextNode, importDOM: buildImportMap({ span: (domNode) => domNode.getAttribute("data-lexical-datetime") !== null || // GDocs Support (domNode.getAttribute("data-rich-links") !== null && JSON.parse(domNode.getAttribute("data-rich-links") || "{}").type === "date") ? { conversion: $convertDateTimeElement, priority: 2, } : null, }), stateConfigs: [{ flat: true, stateConfig: dateTimeState }], }); } getDateTime(): StateConfigValue { return $getState(this, dateTimeState); } setDateTime(valueOrUpdater: StateValueOrUpdater): this { return $setState(this, dateTimeState, valueOrUpdater); } getTextContent(): string { const dateTime = this.getDateTime(); return getDateTimeText(dateTime); } exportDOM(): DOMExportOutput { const element = document.createElement("span"); const textDom: HTMLElement | Text = document.createTextNode( getDateTimeText(this.getDateTime()), ); element.setAttribute( "data-lexical-datetime", this.getDateTime()?.toString() || "", ); element.appendChild(applyFormatToDom(this, textDom, tagToFormat)); return { element }; } createDOM(): HTMLElement { const element = document.createElement("span"); element.setAttribute( "data-lexical-datetime", this.getDateTime()?.toString() || "", ); element.style.display = "inline-block"; return element; } updateDOM(): false { return false; } decorate(): JSX.Element { return ( ); } } export function $createDateTimeNode(dateTime: Date): DateTimeNode { return new DateTimeNode().setDateTime(dateTime); } export function $isDateTimeNode( node: LexicalNode | null | undefined, ): node is DateTimeNode { return node instanceof DateTimeNode; } 76:T140a,import { type JSX, useCallback, useEffect, useRef, useState } from "react"; import { BlockWithAlignableContents } from "@lexical/react/LexicalBlockWithAlignableContents"; import { DecoratorBlockNode, type SerializedDecoratorBlockNode, } from "@lexical/react/LexicalDecoratorBlockNode"; import type { DOMConversionMap, DOMConversionOutput, DOMExportOutput, EditorConfig, ElementFormatType, LexicalEditor, LexicalNode, NodeKey, Spread, } from "lexical"; const WIDGET_SCRIPT_URL = "https://platform.twitter.com/widgets.js"; type TweetComponentProps = Readonly<{ className: Readonly<{ base: string; focus: string; }>; format: ElementFormatType | null; loadingComponent?: JSX.Element | string; nodeKey: NodeKey; onError?: (error: string) => void; onLoad?: () => void; tweetID: string; }>; function $convertTweetElement( domNode: HTMLDivElement, ): DOMConversionOutput | null { const id = domNode.getAttribute("data-lexical-tweet-id"); if (id) { const node = $createTweetNode(id); return { node }; } return null; } let isTwitterScriptLoading = true; function TweetComponent({ className, format, loadingComponent, nodeKey, onError, onLoad, tweetID, }: TweetComponentProps) { const containerRef = useRef(null); const previousTweetIDRef = useRef(""); const [isTweetLoading, setIsTweetLoading] = useState(false); const createTweet = useCallback(async () => { try { // @ts-expect-error Twitter is attached to the window. await window.twttr.widgets.createTweet(tweetID, containerRef.current); setIsTweetLoading(false); isTwitterScriptLoading = false; if (onLoad) { onLoad(); } } catch (error) { if (onError) { onError(String(error)); } } }, [onError, onLoad, tweetID]); useEffect(() => { if (tweetID !== previousTweetIDRef.current) { setIsTweetLoading(true); if (isTwitterScriptLoading) { const script = document.createElement("script"); script.src = WIDGET_SCRIPT_URL; script.async = true; document.body?.appendChild(script); script.onload = createTweet; if (onError) { script.onerror = onError as OnErrorEventHandler; } } else { createTweet(); } if (previousTweetIDRef) { previousTweetIDRef.current = tweetID; } } }, [createTweet, onError, tweetID]); return ( {isTweetLoading ? loadingComponent : null}

); } export type SerializedTweetNode = Spread< { id: string; }, SerializedDecoratorBlockNode >; export class TweetNode extends DecoratorBlockNode { __id: string; static getType(): string { return "tweet"; } static clone(node: TweetNode): TweetNode { return new TweetNode(node.__id, node.__format, node.__key); } static importJSON(serializedNode: SerializedTweetNode): TweetNode { const node = $createTweetNode(serializedNode.id); node.setFormat(serializedNode.format); return node; } exportJSON(): SerializedTweetNode { return { ...super.exportJSON(), id: this.getId(), type: "tweet", version: 1, }; } static importDOM(): DOMConversionMap | null { return { div: (domNode: HTMLDivElement) => { if (!domNode.hasAttribute("data-lexical-tweet-id")) { return null; } return { conversion: $convertTweetElement, priority: 2, }; }, }; } exportDOM(): DOMExportOutput { const element = document.createElement("div"); element.setAttribute("data-lexical-tweet-id", this.__id); const text = document.createTextNode(this.getTextContent()); element.append(text); return { element }; } constructor(id: string, format?: ElementFormatType, key?: NodeKey) { super(format, key); this.__id = id; } getId(): string { return this.__id; } getTextContent( _includeInert?: boolean | undefined, _includeDirectionless?: false | undefined, ): string { return `https://x.com/i/web/status/${this.__id}`; } decorate(_editor: LexicalEditor, config: EditorConfig): JSX.Element { const embedBlockTheme = config.theme.embedBlock || {}; const className = { base: embedBlockTheme.base || "", focus: embedBlockTheme.focus || "", }; return ( ); } } export function $createTweetNode(tweetID: string): TweetNode { return new TweetNode(tweetID); } export function $isTweetNode( node: TweetNode | LexicalNode | null | undefined, ): node is TweetNode { return node instanceof TweetNode; } 77:T1093,import type { JSX } from "react"; import { BlockWithAlignableContents } from "@lexical/react/LexicalBlockWithAlignableContents"; import { DecoratorBlockNode, type SerializedDecoratorBlockNode, } from "@lexical/react/LexicalDecoratorBlockNode"; import type { DOMConversionMap, DOMConversionOutput, DOMExportOutput, EditorConfig, ElementFormatType, LexicalEditor, LexicalNode, NodeKey, Spread, } from "lexical"; type YouTubeComponentProps = Readonly<{ className: Readonly<{ base: string; focus: string; }>; format: ElementFormatType | null; nodeKey: NodeKey; videoID: string; }>; function YouTubeComponent({ className, format, nodeKey, videoID, }: YouTubeComponentProps) { return (