From e48cc5100a13246bdb0acfffc73cd0964c8e7aa6 Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Mon, 16 Mar 2026 13:02:35 +0000 Subject: [PATCH 1/2] Rename files for koenig-lexical TypeScript migration --- packages/koenig-lexical/demo/{DemoApp.jsx => DemoApp.tsx} | 0 .../demo/{HtmlOutputDemo.jsx => HtmlOutputDemo.tsx} | 0 .../demo/{RestrictedContentDemo.jsx => RestrictedContentDemo.tsx} | 0 .../demo/components/{DarkModeToggle.jsx => DarkModeToggle.tsx} | 0 .../components/{EmailEditorWrapper.jsx => EmailEditorWrapper.tsx} | 0 .../demo/components/{FloatingButton.jsx => FloatingButton.tsx} | 0 .../{InitialContentToggle.jsx => InitialContentToggle.tsx} | 0 .../demo/components/{Navigator.jsx => Navigator.tsx} | 0 .../{SerializedStateTextarea.jsx => SerializedStateTextarea.tsx} | 0 .../koenig-lexical/demo/components/{Sidebar.jsx => Sidebar.tsx} | 0 .../demo/components/{TitleTextBox.jsx => TitleTextBox.tsx} | 0 .../koenig-lexical/demo/components/{TreeView.jsx => TreeView.tsx} | 0 .../demo/components/{Watermark.jsx => Watermark.tsx} | 0 .../demo/components/{WordCount.jsx => WordCount.tsx} | 0 packages/koenig-lexical/demo/{demo.jsx => demo.tsx} | 0 .../koenig-lexical/demo/utils/{fetchEmbed.js => fetchEmbed.ts} | 0 .../koenig-lexical/demo/utils/{tenorConfig.js => tenorConfig.ts} | 0 .../demo/utils/{unsplashConfig.js => unsplashConfig.ts} | 0 .../demo/utils/{useFileUpload.js => useFileUpload.ts} | 0 .../koenig-lexical/demo/utils/{useSnippets.js => useSnippets.ts} | 0 .../koenig-lexical/{playwright.config.js => playwright.config.ts} | 0 .../src/components/{DesignSandbox.jsx => DesignSandbox.tsx} | 0 .../{KoenigCaptionEditor.jsx => KoenigCaptionEditor.tsx} | 0 .../components/{KoenigCardWrapper.jsx => KoenigCardWrapper.tsx} | 0 .../{KoenigComposableEditor.jsx => KoenigComposableEditor.tsx} | 0 .../src/components/{KoenigComposer.jsx => KoenigComposer.tsx} | 0 .../src/components/{KoenigEditor.jsx => KoenigEditor.tsx} | 0 .../{KoenigErrorBoundary.jsx => KoenigErrorBoundary.tsx} | 0 .../{KoenigNestedComposer.jsx => KoenigNestedComposer.tsx} | 0 .../components/{KoenigNestedEditor.jsx => KoenigNestedEditor.tsx} | 0 .../src/components/ui/{ActionToolbar.jsx => ActionToolbar.tsx} | 0 .../ui/{AtLinkResultsPopup.jsx => AtLinkResultsPopup.tsx} | 0 .../components/ui/{AudioUploadForm.jsx => AudioUploadForm.tsx} | 0 .../ui/{BackgroundImagePicker.jsx => BackgroundImagePicker.tsx} | 0 .../src/components/ui/{Button.stories.jsx => Button.stories.tsx} | 0 .../koenig-lexical/src/components/ui/{Button.jsx => Button.tsx} | 0 .../ui/{ButtonGroup.stories.jsx => ButtonGroup.stories.tsx} | 0 .../src/components/ui/{ButtonGroup.jsx => ButtonGroup.tsx} | 0 .../ui/{CardCaptionEditor.jsx => CardCaptionEditor.tsx} | 0 .../components/ui/{CardMenu.stories.jsx => CardMenu.stories.tsx} | 0 .../src/components/ui/{CardMenu.jsx => CardMenu.tsx} | 0 .../ui/{CardVisibilityMessage.jsx => CardVisibilityMessage.tsx} | 0 .../src/components/ui/{CardWrapper.jsx => CardWrapper.tsx} | 0 .../ui/{ColorOptionButtons.jsx => ColorOptionButtons.tsx} | 0 .../ui/{ColorPicker.stories.jsx => ColorPicker.stories.tsx} | 0 .../src/components/ui/{ColorPicker.jsx => ColorPicker.tsx} | 0 .../koenig-lexical/src/components/ui/{Delayed.jsx => Delayed.tsx} | 0 .../components/ui/{Dropdown.stories.jsx => Dropdown.stories.tsx} | 0 .../src/components/ui/{Dropdown.jsx => Dropdown.tsx} | 0 .../ui/{DropdownContainer.jsx => DropdownContainer.tsx} | 0 .../ui/{EditorPlaceholder.jsx => EditorPlaceholder.tsx} | 0 .../src/components/ui/{EmojiPicker.jsx => EmojiPicker.tsx} | 0 .../ui/{EmojiPickerPortal.jsx => EmojiPickerPortal.tsx} | 0 .../src/components/ui/{FileUploadForm.jsx => FileUploadForm.tsx} | 0 .../ui/{FloatingFormatToolbar.jsx => FloatingFormatToolbar.tsx} | 0 .../ui/{FloatingLinkToolbar.jsx => FloatingLinkToolbar.tsx} | 0 .../components/ui/{FloatingToolbar.jsx => FloatingToolbar.tsx} | 0 .../src/components/ui/{FormatToolbar.jsx => FormatToolbar.tsx} | 0 .../ui/{HighlightedString.jsx => HighlightedString.tsx} | 0 .../ui/{IconButton.stories.jsx => IconButton.stories.tsx} | 0 .../src/components/ui/{IconButton.jsx => IconButton.tsx} | 0 .../components/ui/{ImageUploadForm.jsx => ImageUploadForm.tsx} | 0 .../ui/{ImageUploadSwatch.jsx => ImageUploadSwatch.tsx} | 0 .../src/components/ui/{Input.stories.jsx => Input.stories.tsx} | 0 .../koenig-lexical/src/components/ui/{Input.jsx => Input.tsx} | 0 .../ui/{InputList.stories.jsx => InputList.stories.tsx} | 0 .../src/components/ui/{InputList.jsx => InputList.tsx} | 0 .../ui/{KeyboardSelection.jsx => KeyboardSelection.tsx} | 0 ...ardSelectionWithGroups.jsx => KeyboardSelectionWithGroups.tsx} | 0 ...ctionToolbarWithSearch.jsx => LinkActionToolbarWithSearch.tsx} | 0 .../ui/{LinkInput.stories.jsx => LinkInput.stories.tsx} | 0 .../src/components/ui/{LinkInput.jsx => LinkInput.tsx} | 0 .../ui/{LinkInputSearchItem.jsx => LinkInputSearchItem.tsx} | 0 ...nputWithSearch.stories.jsx => LinkInputWithSearch.stories.tsx} | 0 .../ui/{LinkInputWithSearch.jsx => LinkInputWithSearch.tsx} | 0 .../ui/{LinkToolbar.stories.jsx => LinkToolbar.stories.tsx} | 0 .../src/components/ui/{LinkToolbar.jsx => LinkToolbar.tsx} | 0 ...{MediaPlaceholder.stories.jsx => MediaPlaceholder.stories.tsx} | 0 .../components/ui/{MediaPlaceholder.jsx => MediaPlaceholder.tsx} | 0 .../ui/{MediaPlayer.stories.jsx => MediaPlayer.stories.tsx} | 0 .../src/components/ui/{MediaPlayer.jsx => MediaPlayer.tsx} | 0 .../src/components/ui/{MediaUploader.jsx => MediaUploader.tsx} | 0 .../src/components/ui/{Modal.stories.jsx => Modal.stories.tsx} | 0 .../koenig-lexical/src/components/ui/{Modal.jsx => Modal.tsx} | 0 .../ui/{MultiSelectDropdown.jsx => MultiSelectDropdown.tsx} | 0 .../components/ui/{PlusMenu.stories.jsx => PlusMenu.stories.tsx} | 0 .../src/components/ui/{PlusMenu.jsx => PlusMenu.tsx} | 0 .../koenig-lexical/src/components/ui/{Portal.jsx => Portal.tsx} | 0 .../ui/{ProgressBar.stories.jsx => ProgressBar.stories.tsx} | 0 .../src/components/ui/{ProgressBar.jsx => ProgressBar.tsx} | 0 .../components/ui/{ReadOnlyOverlay.jsx => ReadOnlyOverlay.tsx} | 0 .../ui/{SettingsPanel.stories.jsx => SettingsPanel.stories.tsx} | 0 .../src/components/ui/{SettingsPanel.jsx => SettingsPanel.tsx} | 0 .../src/components/ui/{SlashMenu.jsx => SlashMenu.tsx} | 0 .../src/components/ui/{Slider.stories.jsx => Slider.stories.tsx} | 0 .../koenig-lexical/src/components/ui/{Slider.jsx => Slider.tsx} | 0 .../ui/{SnippetActionToolbar.jsx => SnippetActionToolbar.tsx} | 0 .../ui/{SnippetInput.stories.jsx => SnippetInput.stories.tsx} | 0 .../src/components/ui/{SnippetInput.jsx => SnippetInput.tsx} | 0 .../src/components/ui/SnippetInput/{Dropdown.jsx => Dropdown.tsx} | 0 .../src/components/ui/SnippetInput/{Input.jsx => Input.tsx} | 0 .../koenig-lexical/src/components/ui/{Spinner.jsx => Spinner.tsx} | 0 .../ui/{SubscribeForm.stories.jsx => SubscribeForm.stories.tsx} | 0 .../src/components/ui/{SubscribeForm.jsx => SubscribeForm.tsx} | 0 .../koenig-lexical/src/components/ui/{TabView.jsx => TabView.tsx} | 0 .../src/components/ui/{TenorPlugin.jsx => TenorPlugin.tsx} | 0 .../ui/{TenorSelector.stories.jsx => TenorSelector.stories.tsx} | 0 .../src/components/ui/{TenorSelector.jsx => TenorSelector.tsx} | 0 .../src/components/ui/{Toggle.stories.jsx => Toggle.stories.tsx} | 0 .../koenig-lexical/src/components/ui/{Toggle.jsx => Toggle.tsx} | 0 .../ui/{ToolbarMenu.stories.jsx => ToolbarMenu.stories.tsx} | 0 .../src/components/ui/{ToolbarMenu.jsx => ToolbarMenu.tsx} | 0 .../{ToolbarMenuItem.stories.jsx => ToolbarMenuItem.stories.tsx} | 0 .../koenig-lexical/src/components/ui/{Tooltip.jsx => Tooltip.tsx} | 0 .../src/components/ui/{UnsplashPlugin.jsx => UnsplashPlugin.tsx} | 0 .../components/ui/{UrlInput.stories.jsx => UrlInput.stories.tsx} | 0 .../src/components/ui/{UrlInput.jsx => UrlInput.tsx} | 0 .../ui/{UrlSearchInput.stories.jsx => UrlSearchInput.stories.tsx} | 0 .../src/components/ui/{UrlSearchInput.jsx => UrlSearchInput.tsx} | 0 .../ui/{VisibilitySettings.jsx => VisibilitySettings.tsx} | 0 .../ui/cards/{AudioCard.stories.jsx => AudioCard.stories.tsx} | 0 .../src/components/ui/cards/{AudioCard.jsx => AudioCard.tsx} | 0 .../cards/{BookmarkCard.stories.jsx => BookmarkCard.stories.tsx} | 0 .../components/ui/cards/{BookmarkCard.jsx => BookmarkCard.tsx} | 0 .../ui/cards/{ButtonCard.stories.jsx => ButtonCard.stories.tsx} | 0 .../src/components/ui/cards/{ButtonCard.jsx => ButtonCard.tsx} | 0 ...{CallToActionCard.stories.jsx => CallToActionCard.stories.tsx} | 0 .../ui/cards/{CallToActionCard.jsx => CallToActionCard.tsx} | 0 .../ui/cards/{CalloutCard.stories.jsx => CalloutCard.stories.tsx} | 0 .../src/components/ui/cards/{CalloutCard.jsx => CalloutCard.tsx} | 0 .../{CodeBlockCard.stories.jsx => CodeBlockCard.stories.tsx} | 0 .../components/ui/cards/{CodeBlockCard.jsx => CodeBlockCard.tsx} | 0 .../ui/cards/{EmailCard.stories.jsx => EmailCard.stories.tsx} | 0 .../src/components/ui/cards/{EmailCard.jsx => EmailCard.tsx} | 0 .../cards/{EmailCtaCard.stories.jsx => EmailCtaCard.stories.tsx} | 0 .../components/ui/cards/{EmailCtaCard.jsx => EmailCtaCard.tsx} | 0 .../ui/cards/{EmbedCard.stories.jsx => EmbedCard.stories.tsx} | 0 .../src/components/ui/cards/{EmbedCard.jsx => EmbedCard.tsx} | 0 .../ui/cards/{FileCard.stories.jsx => FileCard.stories.tsx} | 0 .../src/components/ui/cards/{FileCard.jsx => FileCard.tsx} | 0 .../ui/cards/{GalleryCard.stories.jsx => GalleryCard.stories.tsx} | 0 .../src/components/ui/cards/{GalleryCard.jsx => GalleryCard.tsx} | 0 .../ui/cards/HeaderCard/v1/{HeaderCard.jsx => HeaderCard.tsx} | 0 .../v1/{HeaderCard.v1.stories.jsx => HeaderCard.v1.stories.tsx} | 0 .../ui/cards/HeaderCard/v2/{HeaderCard.jsx => HeaderCard.tsx} | 0 .../v2/{HeaderCard.v2.stories.jsx => HeaderCard.v2.stories.tsx} | 0 ...izontalRuleCard.stories.jsx => HorizontalRuleCard.stories.tsx} | 0 .../ui/cards/{HorizontalRuleCard.jsx => HorizontalRuleCard.tsx} | 0 .../ui/cards/{HtmlCard.stories.jsx => HtmlCard.stories.tsx} | 0 .../src/components/ui/cards/{HtmlCard.jsx => HtmlCard.tsx} | 0 .../ui/cards/HtmlCard/{HtmlEditor.jsx => HtmlEditor.tsx} | 0 .../ui/cards/{ImageCard.stories.jsx => ImageCard.stories.tsx} | 0 .../src/components/ui/cards/{ImageCard.jsx => ImageCard.tsx} | 0 .../cards/{MarkdownCard.stories.jsx => MarkdownCard.stories.tsx} | 0 .../components/ui/cards/{MarkdownCard.jsx => MarkdownCard.tsx} | 0 .../cards/MarkdownCard/{MarkdownEditor.jsx => MarkdownEditor.tsx} | 0 .../{MarkdownHelpDialog.jsx => MarkdownHelpDialog.tsx} | 0 .../{MarkdownImageUploader.jsx => MarkdownImageUploader.tsx} | 0 .../{useMarkdownImageUploader.js => useMarkdownImageUploader.ts} | 0 .../ui/cards/{PaywallCard.stories.jsx => PaywallCard.stories.tsx} | 0 .../src/components/ui/cards/{PaywallCard.jsx => PaywallCard.tsx} | 0 .../ui/cards/{ProductCard.stories.jsx => ProductCard.stories.tsx} | 0 .../src/components/ui/cards/{ProductCard.jsx => ProductCard.tsx} | 0 .../ProductCard/{ProductCardImage.jsx => ProductCardImage.tsx} | 0 .../ui/cards/ProductCard/{RatingButton.jsx => RatingButton.tsx} | 0 .../ui/cards/{SignupCard.stories.jsx => SignupCard.stories.tsx} | 0 .../src/components/ui/cards/{SignupCard.jsx => SignupCard.tsx} | 0 .../ui/cards/{ToggleCard.stories.jsx => ToggleCard.stories.tsx} | 0 .../src/components/ui/cards/{ToggleCard.jsx => ToggleCard.tsx} | 0 .../ui/cards/{VideoCard.stories.jsx => VideoCard.stories.tsx} | 0 .../src/components/ui/cards/{VideoCard.jsx => VideoCard.tsx} | 0 .../components/ui/file-selectors/Tenor/{Error.jsx => Error.tsx} | 0 .../src/components/ui/file-selectors/Tenor/{Gif.jsx => Gif.tsx} | 0 .../components/ui/file-selectors/Tenor/{Loader.jsx => Loader.tsx} | 0 .../Unsplash/{UnsplashButton.jsx => UnsplashButton.tsx} | 0 .../Unsplash/{UnsplashGallery.jsx => UnsplashGallery.tsx} | 0 .../Unsplash/{UnsplashImage.jsx => UnsplashImage.tsx} | 0 ...{UnsplashSelector.stories.jsx => UnsplashSelector.stories.tsx} | 0 .../Unsplash/{UnsplashSelector.jsx => UnsplashSelector.tsx} | 0 .../Unsplash/{UnsplashZoomed.jsx => UnsplashZoomed.tsx} | 0 .../ui/file-selectors/{UnsplashModal.jsx => UnsplashModal.tsx} | 0 .../src/context/{CardContext.jsx => CardContext.tsx} | 0 .../{KoenigComposerContext.jsx => KoenigComposerContext.tsx} | 0 ...oenigSelectedCardContext.jsx => KoenigSelectedCardContext.tsx} | 0 .../{SharedHistoryContext.jsx => SharedHistoryContext.tsx} | 0 .../{SharedOnChangeContext.jsx => SharedOnChangeContext.tsx} | 0 .../koenig-lexical/src/context/{TKContext.jsx => TKContext.tsx} | 0 .../src/hooks/{useCardDragAndDrop.js => useCardDragAndDrop.ts} | 0 .../src/hooks/{useClickOutside.js => useClickOutside.ts} | 0 .../src/hooks/{useFileDragAndDrop.js => useFileDragAndDrop.ts} | 0 .../src/hooks/{useGalleryReorder.js => useGalleryReorder.ts} | 0 .../src/hooks/{useInputSelection.js => useInputSelection.ts} | 0 .../src/hooks/{useKoenigTextEntity.js => useKoenigTextEntity.ts} | 0 .../koenig-lexical/src/hooks/{useMovable.js => useMovable.ts} | 0 .../src/hooks/{usePinturaEditor.js => usePinturaEditor.ts} | 0 .../src/hooks/{usePreviousFocus.js => usePreviousFocus.ts} | 0 .../src/hooks/{useSearchLinks.js => useSearchLinks.ts} | 0 ...seSettingsPanelReposition.js => useSettingsPanelReposition.ts} | 0 .../{useTypeaheadTriggerMatch.js => useTypeaheadTriggerMatch.ts} | 0 .../src/hooks/{useVisibilityToggle.js => useVisibilityToggle.ts} | 0 packages/koenig-lexical/src/{index.js => index.ts} | 0 packages/koenig-lexical/src/nodes/{AsideNode.js => AsideNode.ts} | 0 .../koenig-lexical/src/nodes/{AudioNode.jsx => AudioNode.tsx} | 0 .../src/nodes/{AudioNodeComponent.jsx => AudioNodeComponent.tsx} | 0 .../koenig-lexical/src/nodes/{BasicNodes.js => BasicNodes.ts} | 0 .../src/nodes/{BookmarkNode.jsx => BookmarkNode.tsx} | 0 .../{BookmarkNodeComponent.jsx => BookmarkNodeComponent.tsx} | 0 .../koenig-lexical/src/nodes/{ButtonNode.jsx => ButtonNode.tsx} | 0 .../nodes/{ButtonNodeComponent.jsx => ButtonNodeComponent.tsx} | 0 .../src/nodes/{CallToActionNode.jsx => CallToActionNode.tsx} | 0 ...allToActionNodeComponent.jsx => CallToActionNodeComponent.tsx} | 0 .../koenig-lexical/src/nodes/{CalloutNode.jsx => CalloutNode.tsx} | 0 .../nodes/{CalloutNodeComponent.jsx => CalloutNodeComponent.tsx} | 0 .../src/nodes/{CodeBlockNode.jsx => CodeBlockNode.tsx} | 0 .../{CodeBlockNodeComponent.jsx => CodeBlockNodeComponent.tsx} | 0 .../koenig-lexical/src/nodes/{DefaultNodes.js => DefaultNodes.ts} | 0 .../src/nodes/{EmailCtaNode.jsx => EmailCtaNode.tsx} | 0 .../{EmailCtaNodeComponent.jsx => EmailCtaNodeComponent.tsx} | 0 .../src/nodes/{EmailEditorNodes.js => EmailEditorNodes.ts} | 0 .../src/nodes/{EmailEmbedNode.jsx => EmailEmbedNode.tsx} | 0 .../koenig-lexical/src/nodes/{EmailNode.jsx => EmailNode.tsx} | 0 .../src/nodes/{EmailNodeComponent.jsx => EmailNodeComponent.tsx} | 0 .../koenig-lexical/src/nodes/{EmailNodes.js => EmailNodes.ts} | 0 .../koenig-lexical/src/nodes/{EmbedNode.jsx => EmbedNode.tsx} | 0 .../src/nodes/{EmbedNodeComponent.jsx => EmbedNodeComponent.tsx} | 0 packages/koenig-lexical/src/nodes/{FileNode.jsx => FileNode.tsx} | 0 .../src/nodes/{FileNodeComponent.jsx => FileNodeComponent.tsx} | 0 .../koenig-lexical/src/nodes/{GalleryNode.jsx => GalleryNode.tsx} | 0 .../nodes/{GalleryNodeComponent.jsx => GalleryNodeComponent.tsx} | 0 .../koenig-lexical/src/nodes/{HeaderNode.jsx => HeaderNode.tsx} | 0 .../src/nodes/{HorizontalRuleNode.jsx => HorizontalRuleNode.tsx} | 0 packages/koenig-lexical/src/nodes/{HtmlNode.jsx => HtmlNode.tsx} | 0 .../src/nodes/{HtmlNodeComponent.jsx => HtmlNodeComponent.tsx} | 0 .../koenig-lexical/src/nodes/{ImageNode.jsx => ImageNode.tsx} | 0 .../src/nodes/{ImageNodeComponent.jsx => ImageNodeComponent.tsx} | 0 .../src/nodes/{MarkdownNode.jsx => MarkdownNode.tsx} | 0 .../{MarkdownNodeComponent.jsx => MarkdownNodeComponent.tsx} | 0 .../koenig-lexical/src/nodes/{MinimalNodes.js => MinimalNodes.ts} | 0 .../koenig-lexical/src/nodes/{PaywallNode.jsx => PaywallNode.tsx} | 0 .../koenig-lexical/src/nodes/{ProductNode.jsx => ProductNode.tsx} | 0 .../nodes/{ProductNodeComponent.jsx => ProductNodeComponent.tsx} | 0 .../koenig-lexical/src/nodes/{SignupNode.jsx => SignupNode.tsx} | 0 .../nodes/{SignupNodeComponent.jsx => SignupNodeComponent.tsx} | 0 .../koenig-lexical/src/nodes/{ToggleNode.jsx => ToggleNode.tsx} | 0 .../nodes/{ToggleNodeComponent.jsx => ToggleNodeComponent.tsx} | 0 .../src/nodes/{TransistorNode.jsx => TransistorNode.tsx} | 0 .../{TransistorNodeComponent.jsx => TransistorNodeComponent.tsx} | 0 .../koenig-lexical/src/nodes/{VideoNode.jsx => VideoNode.tsx} | 0 .../src/nodes/{VideoNodeComponent.jsx => VideoNodeComponent.tsx} | 0 .../v1/{HeaderNodeComponent.jsx => HeaderNodeComponent.tsx} | 0 .../v2/{HeaderNodeComponent.jsx => HeaderNodeComponent.tsx} | 0 .../src/plugins/{AllDefaultPlugins.jsx => AllDefaultPlugins.tsx} | 0 .../src/plugins/{AtLinkPlugin.jsx => AtLinkPlugin.tsx} | 0 .../src/plugins/{AudioPlugin.jsx => AudioPlugin.tsx} | 0 .../src/plugins/{BookmarkPlugin.jsx => BookmarkPlugin.tsx} | 0 .../src/plugins/{ButtonPlugin.jsx => ButtonPlugin.tsx} | 0 .../plugins/{CallToActionPlugin.jsx => CallToActionPlugin.tsx} | 0 .../src/plugins/{CalloutPlugin.jsx => CalloutPlugin.tsx} | 0 .../src/plugins/{CardMenuPlugin.jsx => CardMenuPlugin.tsx} | 0 .../plugins/{DragDropPastePlugin.jsx => DragDropPastePlugin.tsx} | 0 .../{DragDropReorderPlugin.jsx => DragDropReorderPlugin.tsx} | 0 .../src/plugins/{EmEnDashPlugin.jsx => EmEnDashPlugin.tsx} | 0 .../src/plugins/{EmailCtaPlugin.jsx => EmailCtaPlugin.tsx} | 0 .../src/plugins/{EmailPlugin.jsx => EmailPlugin.tsx} | 0 .../src/plugins/{EmbedPlugin.jsx => EmbedPlugin.tsx} | 0 .../src/plugins/{EmojiPickerPlugin.jsx => EmojiPickerPlugin.tsx} | 0 .../{ExternalControlPlugin.jsx => ExternalControlPlugin.tsx} | 0 .../koenig-lexical/src/plugins/{FilePlugin.jsx => FilePlugin.tsx} | 0 .../{FloatingToolbarPlugin.jsx => FloatingToolbarPlugin.tsx} | 0 .../src/plugins/{GalleryPlugin.jsx => GalleryPlugin.tsx} | 0 .../src/plugins/{HeaderPlugin.jsx => HeaderPlugin.tsx} | 0 .../{HorizontalRulePlugin.jsx => HorizontalRulePlugin.tsx} | 0 .../src/plugins/{HtmlOutputPlugin.jsx => HtmlOutputPlugin.tsx} | 0 .../koenig-lexical/src/plugins/{HtmlPlugin.jsx => HtmlPlugin.tsx} | 0 .../src/plugins/{ImagePlugin.jsx => ImagePlugin.tsx} | 0 .../{KoenigBehaviourPlugin.jsx => KoenigBehaviourPlugin.tsx} | 0 .../src/plugins/{KoenigBlurPlugin.jsx => KoenigBlurPlugin.tsx} | 0 .../src/plugins/{KoenigFocusPlugin.jsx => KoenigFocusPlugin.tsx} | 0 ...{KoenigNestedEditorPlugin.jsx => KoenigNestedEditorPlugin.tsx} | 0 .../{KoenigSelectorPlugin.jsx => KoenigSelectorPlugin.tsx} | 0 .../plugins/{KoenigSnippetPlugin.jsx => KoenigSnippetPlugin.tsx} | 0 .../plugins/{MarkdownPastePlugin.jsx => MarkdownPastePlugin.tsx} | 0 .../src/plugins/{MarkdownPlugin.jsx => MarkdownPlugin.tsx} | 0 .../{MarkdownShortcutPlugin.jsx => MarkdownShortcutPlugin.tsx} | 0 .../src/plugins/{PaywallPlugin.jsx => PaywallPlugin.tsx} | 0 .../plugins/{PlusCardMenuPlugin.jsx => PlusCardMenuPlugin.tsx} | 0 .../src/plugins/{ProductPlugin.jsx => ProductPlugin.tsx} | 0 ...{ReplacementStringsPlugin.jsx => ReplacementStringsPlugin.tsx} | 0 .../{RestrictContentPlugin.jsx => RestrictContentPlugin.tsx} | 0 .../src/plugins/{SignupPlugin.jsx => SignupPlugin.tsx} | 0 .../plugins/{SlashCardMenuPlugin.jsx => SlashCardMenuPlugin.tsx} | 0 .../src/plugins/{TKCountPlugin.jsx => TKCountPlugin.tsx} | 0 .../koenig-lexical/src/plugins/{TKPlugin.jsx => TKPlugin.tsx} | 0 .../src/plugins/{TogglePlugin.jsx => TogglePlugin.tsx} | 0 .../src/plugins/{TransistorPlugin.jsx => TransistorPlugin.tsx} | 0 .../src/plugins/{VideoPlugin.jsx => VideoPlugin.tsx} | 0 .../src/plugins/{WordCountPlugin.jsx => WordCountPlugin.tsx} | 0 packages/koenig-lexical/src/themes/{default.js => default.ts} | 0 .../{$getSelectionRangeRect.js => $getSelectionRangeRect.ts} | 0 .../utils/{$insertAndSelectNode.js => $insertAndSelectNode.ts} | 0 .../utils/{$isAtStartOfDocument.js => $isAtStartOfDocument.ts} | 0 .../src/utils/{$isAtTopOfNode.js => $isAtTopOfNode.ts} | 0 .../utils/{$selectDecoratorNode.js => $selectDecoratorNode.ts} | 0 packages/koenig-lexical/src/utils/{analytics.js => analytics.ts} | 0 .../src/utils/{audioUploadHandler.js => audioUploadHandler.ts} | 0 .../src/utils/{autoExpandTextArea.js => autoExpandTextArea.ts} | 0 .../src/utils/{buildCardMenu.js => buildCardMenu.ts} | 0 .../src/utils/{callToActionColors.js => callToActionColors.ts} | 0 packages/koenig-lexical/src/utils/{constants.js => constants.ts} | 0 packages/koenig-lexical/src/utils/{ctrlOrCmd.js => ctrlOrCmd.ts} | 0 .../src/utils/{dataSrcToFile.js => dataSrcToFile.ts} | 0 .../draggable/{DragDropContainer.js => DragDropContainer.ts} | 0 .../utils/draggable/{DragDropHandler.jsx => DragDropHandler.tsx} | 0 .../src/utils/draggable/{ScrollHandler.js => ScrollHandler.ts} | 0 .../draggable/{draggable-constants.js => draggable-constants.ts} | 0 .../utils/draggable/{draggable-utils.js => draggable-utils.ts} | 0 .../utils/{extractVideoMetadata.js => extractVideoMetadata.ts} | 0 .../src/utils/{fileUploadHandler.js => fileUploadHandler.ts} | 0 .../src/utils/{generateEditorState.js => generateEditorState.ts} | 0 .../src/utils/{getAccentColor.js => getAccentColor.ts} | 0 .../src/utils/{getAudioMetadata.js => getAudioMetadata.ts} | 0 .../src/utils/{getDOMRangeRect.js => getDOMRangeRect.ts} | 0 .../src/utils/{getEditorCardNodes.js => getEditorCardNodes.ts} | 0 .../src/utils/{getImageDimensions.js => getImageDimensions.ts} | 0 .../{getImageFilenameFromSrc.js => getImageFilenameFromSrc.ts} | 0 .../src/utils/{getScrollParent.js => getScrollParent.ts} | 0 .../src/utils/{getSelectedNode.js => getSelectedNode.ts} | 0 .../{getTopLevelNativeElement.js => getTopLevelNativeElement.ts} | 0 .../src/utils/{image-card-widths.js => image-card-widths.ts} | 0 .../src/utils/{imageUploadHandler.js => imageUploadHandler.ts} | 0 packages/koenig-lexical/src/utils/{index.js => index.ts} | 0 .../src/utils/{isEditorEmpty.js => isEditorEmpty.ts} | 0 packages/koenig-lexical/src/utils/{isGif.js => isGif.ts} | 0 .../src/utils/{isInternalUrl.js => isInternalUrl.ts} | 0 .../src/utils/{nested-editors.js => nested-editors.ts} | 0 .../src/utils/{openFileSelection.js => openFileSelection.ts} | 0 .../src/utils/{prettifyFileName.js => prettifyFileName.ts} | 0 .../src/utils/{sanitize-html.js => sanitize-html.ts} | 0 packages/koenig-lexical/src/utils/services/{tenor.js => tenor.ts} | 0 .../{setFloatingElemPosition.js => setFloatingElemPosition.ts} | 0 .../src/utils/{shortcutSymbols.js => shortcutSymbols.ts} | 0 ...{populate-storybook-editor.js => populate-storybook-editor.ts} | 0 .../{thumbnailUploadHandler.js => thumbnailUploadHandler.ts} | 0 .../koenig-lexical/src/utils/{visibility.js => visibility.ts} | 0 .../test/e2e/{card-behaviour.test.js => card-behaviour.test.ts} | 0 .../test/e2e/cards/{audio-card.test.js => audio-card.test.ts} | 0 ...card-with-search.test.js => bookmark-card-with-search.test.ts} | 0 ...ithout-search.test.js => bookmark-card-without-search.test.ts} | 0 .../test/e2e/cards/{button-card.test.js => button-card.test.ts} | 0 .../{call-to-action-card.test.js => call-to-action-card.test.ts} | 0 .../test/e2e/cards/{callout-card.test.js => callout-card.test.ts} | 0 .../cards/{code-block-card.test.js => code-block-card.test.ts} | 0 .../test/e2e/cards/{email-card.test.js => email-card.test.ts} | 0 .../e2e/cards/{email-cta-card.test.js => email-cta-card.test.ts} | 0 .../test/e2e/cards/{embed-card.test.js => embed-card.test.ts} | 0 .../test/e2e/cards/{file-card.test.js => file-card.test.ts} | 0 .../test/e2e/cards/{gallery-card.test.js => gallery-card.test.ts} | 0 .../test/e2e/cards/{header-card.test.js => header-card.test.ts} | 0 .../test/e2e/cards/{html-card.test.js => html-card.test.ts} | 0 .../test/e2e/cards/{image-card.test.js => image-card.test.ts} | 0 .../e2e/cards/{markdown-card.test.js => markdown-card.test.ts} | 0 .../test/e2e/cards/{paywall-card.test.js => paywall-card.test.ts} | 0 .../test/e2e/cards/{product-card.test.js => product-card.test.ts} | 0 .../test/e2e/cards/{signup-card.test.js => signup-card.test.ts} | 0 .../test/e2e/cards/{toggle-card.test.js => toggle-card.test.ts} | 0 .../cards/{transistor-card.test.js => transistor-card.test.ts} | 0 .../{video-card.firefox.test.js => video-card.firefox.test.ts} | 0 .../{content-visibility.test.js => content-visibility.test.ts} | 0 .../e2e/editors/{basic-editor.test.js => basic-editor.test.ts} | 0 .../e2e/editors/{email-editor.test.js => email-editor.test.ts} | 0 .../editors/{minimal-editor.test.js => minimal-editor.test.ts} | 0 .../e2e/{floating-toolbar.test.js => floating-toolbar.test.ts} | 0 .../e2e/{format-shortcuts.test.js => format-shortcuts.test.ts} | 0 .../koenig-lexical/test/e2e/{linking.test.js => linking.test.ts} | 0 .../test/e2e/{list-behaviour.test.js => list-behaviour.test.ts} | 0 .../modals/{UnsplashSelector.test.js => UnsplashSelector.test.ts} | 0 .../test/e2e/{node-transforms.test.js => node-transforms.test.ts} | 0 .../test/e2e/{paste-behaviour.test.js => paste-behaviour.test.ts} | 0 ...Plugin.firefox.test.js => DragDropPastePlugin.firefox.test.ts} | 0 .../{DragDropPastePlugin.test.js => DragDropPastePlugin.test.ts} | 0 ...ragDropReorderPlugin.test.js => DragDropReorderPlugin.test.ts} | 0 .../{EmojiPickerPlugin.test.js => EmojiPickerPlugin.test.ts} | 0 .../{HtmlOutputPlugin.test.js => HtmlOutputPlugin.test.ts} | 0 .../{KoenigSnippetPlugin.test.js => KoenigSnippetPlugin.test.ts} | 0 ...mentStringsPlugin.test.js => ReplacementStringsPlugin.test.ts} | 0 ...estrictContentPlugin.test.js => RestrictContentPlugin.test.ts} | 0 .../test/e2e/plugins/{TKPlugin.test.js => TKPlugin.test.ts} | 0 .../plugins/{WordCountPlugin.test.js => WordCountPlugin.test.ts} | 0 .../test/e2e/{plus-button.test.js => plus-button.test.ts} | 0 .../test/e2e/{selection.test.js => selection.test.ts} | 0 .../test/e2e/{slash-menu.test.js => slash-menu.test.ts} | 0 .../text-transforms/{code-block.test.js => code-block.test.ts} | 0 .../{emdash-endash.test.js => emdash-endash.test.ts} | 0 .../e2e/text-transforms/{headings.test.js => headings.test.ts} | 0 ...{horizontal-line-rule.test.js => horizontal-line-rule.test.ts} | 0 .../test/e2e/text-transforms/{links.test.js => links.test.ts} | 0 .../e2e/text-transforms/{markdown.test.js => markdown.test.ts} | 0 .../test/e2e/text-transforms/{paywall.test.js => paywall.test.ts} | 0 .../test/e2e/{title-behaviour.test.js => title-behaviour.test.ts} | 0 .../{getImageDimensions.test.js => getImageDimensions.test.ts} | 0 packages/koenig-lexical/test/{test-setup.js => test-setup.ts} | 0 .../unit/{KoenigComposer.test.jsx => KoenigComposer.test.tsx} | 0 .../test/unit/{buildCardMenu.test.js => buildCardMenu.test.ts} | 0 .../test/unit/{headerCardv2.test.js => headerCardv2.test.ts} | 0 .../{useVisibilityToggle.test.js => useVisibilityToggle.test.ts} | 0 .../test/unit/{productCard.test.js => productCard.test.ts} | 0 .../test/unit/{signupCard.test.js => signupCard.test.ts} | 0 .../test/unit/{toggleCard.test.js => toggleCard.test.ts} | 0 .../{generateEditorState.test.js => generateEditorState.test.ts} | 0 .../{image-card-widths.test.js => image-card-widths.test.ts} | 0 .../unit/utils/{sanitize-html.test.js => sanitize-html.test.ts} | 0 .../test/unit/utils/{visibility.test.js => visibility.test.ts} | 0 .../test/utils/{color-select-helper.js => color-select-helper.ts} | 0 packages/koenig-lexical/test/utils/{e2e.js => e2e.ts} | 0 packages/koenig-lexical/test/utils/{isTestEnv.js => isTestEnv.ts} | 0 .../koenig-lexical/{vite.config.demo.js => vite.config.demo.ts} | 0 packages/koenig-lexical/{vite.config.js => vite.config.ts} | 0 417 files changed, 0 insertions(+), 0 deletions(-) rename packages/koenig-lexical/demo/{DemoApp.jsx => DemoApp.tsx} (100%) rename packages/koenig-lexical/demo/{HtmlOutputDemo.jsx => HtmlOutputDemo.tsx} (100%) rename packages/koenig-lexical/demo/{RestrictedContentDemo.jsx => RestrictedContentDemo.tsx} (100%) rename packages/koenig-lexical/demo/components/{DarkModeToggle.jsx => DarkModeToggle.tsx} (100%) rename packages/koenig-lexical/demo/components/{EmailEditorWrapper.jsx => EmailEditorWrapper.tsx} (100%) rename packages/koenig-lexical/demo/components/{FloatingButton.jsx => FloatingButton.tsx} (100%) rename packages/koenig-lexical/demo/components/{InitialContentToggle.jsx => InitialContentToggle.tsx} (100%) rename packages/koenig-lexical/demo/components/{Navigator.jsx => Navigator.tsx} (100%) rename packages/koenig-lexical/demo/components/{SerializedStateTextarea.jsx => SerializedStateTextarea.tsx} (100%) rename packages/koenig-lexical/demo/components/{Sidebar.jsx => Sidebar.tsx} (100%) rename packages/koenig-lexical/demo/components/{TitleTextBox.jsx => TitleTextBox.tsx} (100%) rename packages/koenig-lexical/demo/components/{TreeView.jsx => TreeView.tsx} (100%) rename packages/koenig-lexical/demo/components/{Watermark.jsx => Watermark.tsx} (100%) rename packages/koenig-lexical/demo/components/{WordCount.jsx => WordCount.tsx} (100%) rename packages/koenig-lexical/demo/{demo.jsx => demo.tsx} (100%) rename packages/koenig-lexical/demo/utils/{fetchEmbed.js => fetchEmbed.ts} (100%) rename packages/koenig-lexical/demo/utils/{tenorConfig.js => tenorConfig.ts} (100%) rename packages/koenig-lexical/demo/utils/{unsplashConfig.js => unsplashConfig.ts} (100%) rename packages/koenig-lexical/demo/utils/{useFileUpload.js => useFileUpload.ts} (100%) rename packages/koenig-lexical/demo/utils/{useSnippets.js => useSnippets.ts} (100%) rename packages/koenig-lexical/{playwright.config.js => playwright.config.ts} (100%) rename packages/koenig-lexical/src/components/{DesignSandbox.jsx => DesignSandbox.tsx} (100%) rename packages/koenig-lexical/src/components/{KoenigCaptionEditor.jsx => KoenigCaptionEditor.tsx} (100%) rename packages/koenig-lexical/src/components/{KoenigCardWrapper.jsx => KoenigCardWrapper.tsx} (100%) rename packages/koenig-lexical/src/components/{KoenigComposableEditor.jsx => KoenigComposableEditor.tsx} (100%) rename packages/koenig-lexical/src/components/{KoenigComposer.jsx => KoenigComposer.tsx} (100%) rename packages/koenig-lexical/src/components/{KoenigEditor.jsx => KoenigEditor.tsx} (100%) rename packages/koenig-lexical/src/components/{KoenigErrorBoundary.jsx => KoenigErrorBoundary.tsx} (100%) rename packages/koenig-lexical/src/components/{KoenigNestedComposer.jsx => KoenigNestedComposer.tsx} (100%) rename packages/koenig-lexical/src/components/{KoenigNestedEditor.jsx => KoenigNestedEditor.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{ActionToolbar.jsx => ActionToolbar.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{AtLinkResultsPopup.jsx => AtLinkResultsPopup.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{AudioUploadForm.jsx => AudioUploadForm.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{BackgroundImagePicker.jsx => BackgroundImagePicker.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{Button.stories.jsx => Button.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{Button.jsx => Button.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{ButtonGroup.stories.jsx => ButtonGroup.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{ButtonGroup.jsx => ButtonGroup.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{CardCaptionEditor.jsx => CardCaptionEditor.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{CardMenu.stories.jsx => CardMenu.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{CardMenu.jsx => CardMenu.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{CardVisibilityMessage.jsx => CardVisibilityMessage.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{CardWrapper.jsx => CardWrapper.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{ColorOptionButtons.jsx => ColorOptionButtons.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{ColorPicker.stories.jsx => ColorPicker.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{ColorPicker.jsx => ColorPicker.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{Delayed.jsx => Delayed.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{Dropdown.stories.jsx => Dropdown.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{Dropdown.jsx => Dropdown.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{DropdownContainer.jsx => DropdownContainer.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{EditorPlaceholder.jsx => EditorPlaceholder.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{EmojiPicker.jsx => EmojiPicker.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{EmojiPickerPortal.jsx => EmojiPickerPortal.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{FileUploadForm.jsx => FileUploadForm.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{FloatingFormatToolbar.jsx => FloatingFormatToolbar.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{FloatingLinkToolbar.jsx => FloatingLinkToolbar.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{FloatingToolbar.jsx => FloatingToolbar.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{FormatToolbar.jsx => FormatToolbar.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{HighlightedString.jsx => HighlightedString.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{IconButton.stories.jsx => IconButton.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{IconButton.jsx => IconButton.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{ImageUploadForm.jsx => ImageUploadForm.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{ImageUploadSwatch.jsx => ImageUploadSwatch.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{Input.stories.jsx => Input.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{Input.jsx => Input.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{InputList.stories.jsx => InputList.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{InputList.jsx => InputList.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{KeyboardSelection.jsx => KeyboardSelection.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{KeyboardSelectionWithGroups.jsx => KeyboardSelectionWithGroups.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{LinkActionToolbarWithSearch.jsx => LinkActionToolbarWithSearch.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{LinkInput.stories.jsx => LinkInput.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{LinkInput.jsx => LinkInput.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{LinkInputSearchItem.jsx => LinkInputSearchItem.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{LinkInputWithSearch.stories.jsx => LinkInputWithSearch.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{LinkInputWithSearch.jsx => LinkInputWithSearch.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{LinkToolbar.stories.jsx => LinkToolbar.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{LinkToolbar.jsx => LinkToolbar.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{MediaPlaceholder.stories.jsx => MediaPlaceholder.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{MediaPlaceholder.jsx => MediaPlaceholder.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{MediaPlayer.stories.jsx => MediaPlayer.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{MediaPlayer.jsx => MediaPlayer.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{MediaUploader.jsx => MediaUploader.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{Modal.stories.jsx => Modal.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{Modal.jsx => Modal.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{MultiSelectDropdown.jsx => MultiSelectDropdown.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{PlusMenu.stories.jsx => PlusMenu.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{PlusMenu.jsx => PlusMenu.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{Portal.jsx => Portal.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{ProgressBar.stories.jsx => ProgressBar.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{ProgressBar.jsx => ProgressBar.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{ReadOnlyOverlay.jsx => ReadOnlyOverlay.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{SettingsPanel.stories.jsx => SettingsPanel.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{SettingsPanel.jsx => SettingsPanel.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{SlashMenu.jsx => SlashMenu.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{Slider.stories.jsx => Slider.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{Slider.jsx => Slider.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{SnippetActionToolbar.jsx => SnippetActionToolbar.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{SnippetInput.stories.jsx => SnippetInput.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{SnippetInput.jsx => SnippetInput.tsx} (100%) rename packages/koenig-lexical/src/components/ui/SnippetInput/{Dropdown.jsx => Dropdown.tsx} (100%) rename packages/koenig-lexical/src/components/ui/SnippetInput/{Input.jsx => Input.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{Spinner.jsx => Spinner.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{SubscribeForm.stories.jsx => SubscribeForm.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{SubscribeForm.jsx => SubscribeForm.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{TabView.jsx => TabView.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{TenorPlugin.jsx => TenorPlugin.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{TenorSelector.stories.jsx => TenorSelector.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{TenorSelector.jsx => TenorSelector.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{Toggle.stories.jsx => Toggle.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{Toggle.jsx => Toggle.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{ToolbarMenu.stories.jsx => ToolbarMenu.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{ToolbarMenu.jsx => ToolbarMenu.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{ToolbarMenuItem.stories.jsx => ToolbarMenuItem.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{Tooltip.jsx => Tooltip.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{UnsplashPlugin.jsx => UnsplashPlugin.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{UrlInput.stories.jsx => UrlInput.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{UrlInput.jsx => UrlInput.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{UrlSearchInput.stories.jsx => UrlSearchInput.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{UrlSearchInput.jsx => UrlSearchInput.tsx} (100%) rename packages/koenig-lexical/src/components/ui/{VisibilitySettings.jsx => VisibilitySettings.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{AudioCard.stories.jsx => AudioCard.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{AudioCard.jsx => AudioCard.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{BookmarkCard.stories.jsx => BookmarkCard.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{BookmarkCard.jsx => BookmarkCard.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{ButtonCard.stories.jsx => ButtonCard.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{ButtonCard.jsx => ButtonCard.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{CallToActionCard.stories.jsx => CallToActionCard.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{CallToActionCard.jsx => CallToActionCard.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{CalloutCard.stories.jsx => CalloutCard.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{CalloutCard.jsx => CalloutCard.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{CodeBlockCard.stories.jsx => CodeBlockCard.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{CodeBlockCard.jsx => CodeBlockCard.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{EmailCard.stories.jsx => EmailCard.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{EmailCard.jsx => EmailCard.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{EmailCtaCard.stories.jsx => EmailCtaCard.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{EmailCtaCard.jsx => EmailCtaCard.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{EmbedCard.stories.jsx => EmbedCard.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{EmbedCard.jsx => EmbedCard.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{FileCard.stories.jsx => FileCard.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{FileCard.jsx => FileCard.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{GalleryCard.stories.jsx => GalleryCard.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{GalleryCard.jsx => GalleryCard.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/HeaderCard/v1/{HeaderCard.jsx => HeaderCard.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/HeaderCard/v1/{HeaderCard.v1.stories.jsx => HeaderCard.v1.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/{HeaderCard.jsx => HeaderCard.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/{HeaderCard.v2.stories.jsx => HeaderCard.v2.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{HorizontalRuleCard.stories.jsx => HorizontalRuleCard.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{HorizontalRuleCard.jsx => HorizontalRuleCard.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{HtmlCard.stories.jsx => HtmlCard.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{HtmlCard.jsx => HtmlCard.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/HtmlCard/{HtmlEditor.jsx => HtmlEditor.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{ImageCard.stories.jsx => ImageCard.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{ImageCard.jsx => ImageCard.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{MarkdownCard.stories.jsx => MarkdownCard.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{MarkdownCard.jsx => MarkdownCard.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/MarkdownCard/{MarkdownEditor.jsx => MarkdownEditor.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/MarkdownCard/{MarkdownHelpDialog.jsx => MarkdownHelpDialog.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/MarkdownCard/{MarkdownImageUploader.jsx => MarkdownImageUploader.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/MarkdownCard/{useMarkdownImageUploader.js => useMarkdownImageUploader.ts} (100%) rename packages/koenig-lexical/src/components/ui/cards/{PaywallCard.stories.jsx => PaywallCard.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{PaywallCard.jsx => PaywallCard.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{ProductCard.stories.jsx => ProductCard.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{ProductCard.jsx => ProductCard.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/ProductCard/{ProductCardImage.jsx => ProductCardImage.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/ProductCard/{RatingButton.jsx => RatingButton.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{SignupCard.stories.jsx => SignupCard.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{SignupCard.jsx => SignupCard.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{ToggleCard.stories.jsx => ToggleCard.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{ToggleCard.jsx => ToggleCard.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{VideoCard.stories.jsx => VideoCard.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/cards/{VideoCard.jsx => VideoCard.tsx} (100%) rename packages/koenig-lexical/src/components/ui/file-selectors/Tenor/{Error.jsx => Error.tsx} (100%) rename packages/koenig-lexical/src/components/ui/file-selectors/Tenor/{Gif.jsx => Gif.tsx} (100%) rename packages/koenig-lexical/src/components/ui/file-selectors/Tenor/{Loader.jsx => Loader.tsx} (100%) rename packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/{UnsplashButton.jsx => UnsplashButton.tsx} (100%) rename packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/{UnsplashGallery.jsx => UnsplashGallery.tsx} (100%) rename packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/{UnsplashImage.jsx => UnsplashImage.tsx} (100%) rename packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/{UnsplashSelector.stories.jsx => UnsplashSelector.stories.tsx} (100%) rename packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/{UnsplashSelector.jsx => UnsplashSelector.tsx} (100%) rename packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/{UnsplashZoomed.jsx => UnsplashZoomed.tsx} (100%) rename packages/koenig-lexical/src/components/ui/file-selectors/{UnsplashModal.jsx => UnsplashModal.tsx} (100%) rename packages/koenig-lexical/src/context/{CardContext.jsx => CardContext.tsx} (100%) rename packages/koenig-lexical/src/context/{KoenigComposerContext.jsx => KoenigComposerContext.tsx} (100%) rename packages/koenig-lexical/src/context/{KoenigSelectedCardContext.jsx => KoenigSelectedCardContext.tsx} (100%) rename packages/koenig-lexical/src/context/{SharedHistoryContext.jsx => SharedHistoryContext.tsx} (100%) rename packages/koenig-lexical/src/context/{SharedOnChangeContext.jsx => SharedOnChangeContext.tsx} (100%) rename packages/koenig-lexical/src/context/{TKContext.jsx => TKContext.tsx} (100%) rename packages/koenig-lexical/src/hooks/{useCardDragAndDrop.js => useCardDragAndDrop.ts} (100%) rename packages/koenig-lexical/src/hooks/{useClickOutside.js => useClickOutside.ts} (100%) rename packages/koenig-lexical/src/hooks/{useFileDragAndDrop.js => useFileDragAndDrop.ts} (100%) rename packages/koenig-lexical/src/hooks/{useGalleryReorder.js => useGalleryReorder.ts} (100%) rename packages/koenig-lexical/src/hooks/{useInputSelection.js => useInputSelection.ts} (100%) rename packages/koenig-lexical/src/hooks/{useKoenigTextEntity.js => useKoenigTextEntity.ts} (100%) rename packages/koenig-lexical/src/hooks/{useMovable.js => useMovable.ts} (100%) rename packages/koenig-lexical/src/hooks/{usePinturaEditor.js => usePinturaEditor.ts} (100%) rename packages/koenig-lexical/src/hooks/{usePreviousFocus.js => usePreviousFocus.ts} (100%) rename packages/koenig-lexical/src/hooks/{useSearchLinks.js => useSearchLinks.ts} (100%) rename packages/koenig-lexical/src/hooks/{useSettingsPanelReposition.js => useSettingsPanelReposition.ts} (100%) rename packages/koenig-lexical/src/hooks/{useTypeaheadTriggerMatch.js => useTypeaheadTriggerMatch.ts} (100%) rename packages/koenig-lexical/src/hooks/{useVisibilityToggle.js => useVisibilityToggle.ts} (100%) rename packages/koenig-lexical/src/{index.js => index.ts} (100%) rename packages/koenig-lexical/src/nodes/{AsideNode.js => AsideNode.ts} (100%) rename packages/koenig-lexical/src/nodes/{AudioNode.jsx => AudioNode.tsx} (100%) rename packages/koenig-lexical/src/nodes/{AudioNodeComponent.jsx => AudioNodeComponent.tsx} (100%) rename packages/koenig-lexical/src/nodes/{BasicNodes.js => BasicNodes.ts} (100%) rename packages/koenig-lexical/src/nodes/{BookmarkNode.jsx => BookmarkNode.tsx} (100%) rename packages/koenig-lexical/src/nodes/{BookmarkNodeComponent.jsx => BookmarkNodeComponent.tsx} (100%) rename packages/koenig-lexical/src/nodes/{ButtonNode.jsx => ButtonNode.tsx} (100%) rename packages/koenig-lexical/src/nodes/{ButtonNodeComponent.jsx => ButtonNodeComponent.tsx} (100%) rename packages/koenig-lexical/src/nodes/{CallToActionNode.jsx => CallToActionNode.tsx} (100%) rename packages/koenig-lexical/src/nodes/{CallToActionNodeComponent.jsx => CallToActionNodeComponent.tsx} (100%) rename packages/koenig-lexical/src/nodes/{CalloutNode.jsx => CalloutNode.tsx} (100%) rename packages/koenig-lexical/src/nodes/{CalloutNodeComponent.jsx => CalloutNodeComponent.tsx} (100%) rename packages/koenig-lexical/src/nodes/{CodeBlockNode.jsx => CodeBlockNode.tsx} (100%) rename packages/koenig-lexical/src/nodes/{CodeBlockNodeComponent.jsx => CodeBlockNodeComponent.tsx} (100%) rename packages/koenig-lexical/src/nodes/{DefaultNodes.js => DefaultNodes.ts} (100%) rename packages/koenig-lexical/src/nodes/{EmailCtaNode.jsx => EmailCtaNode.tsx} (100%) rename packages/koenig-lexical/src/nodes/{EmailCtaNodeComponent.jsx => EmailCtaNodeComponent.tsx} (100%) rename packages/koenig-lexical/src/nodes/{EmailEditorNodes.js => EmailEditorNodes.ts} (100%) rename packages/koenig-lexical/src/nodes/{EmailEmbedNode.jsx => EmailEmbedNode.tsx} (100%) rename packages/koenig-lexical/src/nodes/{EmailNode.jsx => EmailNode.tsx} (100%) rename packages/koenig-lexical/src/nodes/{EmailNodeComponent.jsx => EmailNodeComponent.tsx} (100%) rename packages/koenig-lexical/src/nodes/{EmailNodes.js => EmailNodes.ts} (100%) rename packages/koenig-lexical/src/nodes/{EmbedNode.jsx => EmbedNode.tsx} (100%) rename packages/koenig-lexical/src/nodes/{EmbedNodeComponent.jsx => EmbedNodeComponent.tsx} (100%) rename packages/koenig-lexical/src/nodes/{FileNode.jsx => FileNode.tsx} (100%) rename packages/koenig-lexical/src/nodes/{FileNodeComponent.jsx => FileNodeComponent.tsx} (100%) rename packages/koenig-lexical/src/nodes/{GalleryNode.jsx => GalleryNode.tsx} (100%) rename packages/koenig-lexical/src/nodes/{GalleryNodeComponent.jsx => GalleryNodeComponent.tsx} (100%) rename packages/koenig-lexical/src/nodes/{HeaderNode.jsx => HeaderNode.tsx} (100%) rename packages/koenig-lexical/src/nodes/{HorizontalRuleNode.jsx => HorizontalRuleNode.tsx} (100%) rename packages/koenig-lexical/src/nodes/{HtmlNode.jsx => HtmlNode.tsx} (100%) rename packages/koenig-lexical/src/nodes/{HtmlNodeComponent.jsx => HtmlNodeComponent.tsx} (100%) rename packages/koenig-lexical/src/nodes/{ImageNode.jsx => ImageNode.tsx} (100%) rename packages/koenig-lexical/src/nodes/{ImageNodeComponent.jsx => ImageNodeComponent.tsx} (100%) rename packages/koenig-lexical/src/nodes/{MarkdownNode.jsx => MarkdownNode.tsx} (100%) rename packages/koenig-lexical/src/nodes/{MarkdownNodeComponent.jsx => MarkdownNodeComponent.tsx} (100%) rename packages/koenig-lexical/src/nodes/{MinimalNodes.js => MinimalNodes.ts} (100%) rename packages/koenig-lexical/src/nodes/{PaywallNode.jsx => PaywallNode.tsx} (100%) rename packages/koenig-lexical/src/nodes/{ProductNode.jsx => ProductNode.tsx} (100%) rename packages/koenig-lexical/src/nodes/{ProductNodeComponent.jsx => ProductNodeComponent.tsx} (100%) rename packages/koenig-lexical/src/nodes/{SignupNode.jsx => SignupNode.tsx} (100%) rename packages/koenig-lexical/src/nodes/{SignupNodeComponent.jsx => SignupNodeComponent.tsx} (100%) rename packages/koenig-lexical/src/nodes/{ToggleNode.jsx => ToggleNode.tsx} (100%) rename packages/koenig-lexical/src/nodes/{ToggleNodeComponent.jsx => ToggleNodeComponent.tsx} (100%) rename packages/koenig-lexical/src/nodes/{TransistorNode.jsx => TransistorNode.tsx} (100%) rename packages/koenig-lexical/src/nodes/{TransistorNodeComponent.jsx => TransistorNodeComponent.tsx} (100%) rename packages/koenig-lexical/src/nodes/{VideoNode.jsx => VideoNode.tsx} (100%) rename packages/koenig-lexical/src/nodes/{VideoNodeComponent.jsx => VideoNodeComponent.tsx} (100%) rename packages/koenig-lexical/src/nodes/header/v1/{HeaderNodeComponent.jsx => HeaderNodeComponent.tsx} (100%) rename packages/koenig-lexical/src/nodes/header/v2/{HeaderNodeComponent.jsx => HeaderNodeComponent.tsx} (100%) rename packages/koenig-lexical/src/plugins/{AllDefaultPlugins.jsx => AllDefaultPlugins.tsx} (100%) rename packages/koenig-lexical/src/plugins/{AtLinkPlugin.jsx => AtLinkPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{AudioPlugin.jsx => AudioPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{BookmarkPlugin.jsx => BookmarkPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{ButtonPlugin.jsx => ButtonPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{CallToActionPlugin.jsx => CallToActionPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{CalloutPlugin.jsx => CalloutPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{CardMenuPlugin.jsx => CardMenuPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{DragDropPastePlugin.jsx => DragDropPastePlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{DragDropReorderPlugin.jsx => DragDropReorderPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{EmEnDashPlugin.jsx => EmEnDashPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{EmailCtaPlugin.jsx => EmailCtaPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{EmailPlugin.jsx => EmailPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{EmbedPlugin.jsx => EmbedPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{EmojiPickerPlugin.jsx => EmojiPickerPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{ExternalControlPlugin.jsx => ExternalControlPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{FilePlugin.jsx => FilePlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{FloatingToolbarPlugin.jsx => FloatingToolbarPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{GalleryPlugin.jsx => GalleryPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{HeaderPlugin.jsx => HeaderPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{HorizontalRulePlugin.jsx => HorizontalRulePlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{HtmlOutputPlugin.jsx => HtmlOutputPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{HtmlPlugin.jsx => HtmlPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{ImagePlugin.jsx => ImagePlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{KoenigBehaviourPlugin.jsx => KoenigBehaviourPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{KoenigBlurPlugin.jsx => KoenigBlurPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{KoenigFocusPlugin.jsx => KoenigFocusPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{KoenigNestedEditorPlugin.jsx => KoenigNestedEditorPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{KoenigSelectorPlugin.jsx => KoenigSelectorPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{KoenigSnippetPlugin.jsx => KoenigSnippetPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{MarkdownPastePlugin.jsx => MarkdownPastePlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{MarkdownPlugin.jsx => MarkdownPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{MarkdownShortcutPlugin.jsx => MarkdownShortcutPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{PaywallPlugin.jsx => PaywallPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{PlusCardMenuPlugin.jsx => PlusCardMenuPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{ProductPlugin.jsx => ProductPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{ReplacementStringsPlugin.jsx => ReplacementStringsPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{RestrictContentPlugin.jsx => RestrictContentPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{SignupPlugin.jsx => SignupPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{SlashCardMenuPlugin.jsx => SlashCardMenuPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{TKCountPlugin.jsx => TKCountPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{TKPlugin.jsx => TKPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{TogglePlugin.jsx => TogglePlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{TransistorPlugin.jsx => TransistorPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{VideoPlugin.jsx => VideoPlugin.tsx} (100%) rename packages/koenig-lexical/src/plugins/{WordCountPlugin.jsx => WordCountPlugin.tsx} (100%) rename packages/koenig-lexical/src/themes/{default.js => default.ts} (100%) rename packages/koenig-lexical/src/utils/{$getSelectionRangeRect.js => $getSelectionRangeRect.ts} (100%) rename packages/koenig-lexical/src/utils/{$insertAndSelectNode.js => $insertAndSelectNode.ts} (100%) rename packages/koenig-lexical/src/utils/{$isAtStartOfDocument.js => $isAtStartOfDocument.ts} (100%) rename packages/koenig-lexical/src/utils/{$isAtTopOfNode.js => $isAtTopOfNode.ts} (100%) rename packages/koenig-lexical/src/utils/{$selectDecoratorNode.js => $selectDecoratorNode.ts} (100%) rename packages/koenig-lexical/src/utils/{analytics.js => analytics.ts} (100%) rename packages/koenig-lexical/src/utils/{audioUploadHandler.js => audioUploadHandler.ts} (100%) rename packages/koenig-lexical/src/utils/{autoExpandTextArea.js => autoExpandTextArea.ts} (100%) rename packages/koenig-lexical/src/utils/{buildCardMenu.js => buildCardMenu.ts} (100%) rename packages/koenig-lexical/src/utils/{callToActionColors.js => callToActionColors.ts} (100%) rename packages/koenig-lexical/src/utils/{constants.js => constants.ts} (100%) rename packages/koenig-lexical/src/utils/{ctrlOrCmd.js => ctrlOrCmd.ts} (100%) rename packages/koenig-lexical/src/utils/{dataSrcToFile.js => dataSrcToFile.ts} (100%) rename packages/koenig-lexical/src/utils/draggable/{DragDropContainer.js => DragDropContainer.ts} (100%) rename packages/koenig-lexical/src/utils/draggable/{DragDropHandler.jsx => DragDropHandler.tsx} (100%) rename packages/koenig-lexical/src/utils/draggable/{ScrollHandler.js => ScrollHandler.ts} (100%) rename packages/koenig-lexical/src/utils/draggable/{draggable-constants.js => draggable-constants.ts} (100%) rename packages/koenig-lexical/src/utils/draggable/{draggable-utils.js => draggable-utils.ts} (100%) rename packages/koenig-lexical/src/utils/{extractVideoMetadata.js => extractVideoMetadata.ts} (100%) rename packages/koenig-lexical/src/utils/{fileUploadHandler.js => fileUploadHandler.ts} (100%) rename packages/koenig-lexical/src/utils/{generateEditorState.js => generateEditorState.ts} (100%) rename packages/koenig-lexical/src/utils/{getAccentColor.js => getAccentColor.ts} (100%) rename packages/koenig-lexical/src/utils/{getAudioMetadata.js => getAudioMetadata.ts} (100%) rename packages/koenig-lexical/src/utils/{getDOMRangeRect.js => getDOMRangeRect.ts} (100%) rename packages/koenig-lexical/src/utils/{getEditorCardNodes.js => getEditorCardNodes.ts} (100%) rename packages/koenig-lexical/src/utils/{getImageDimensions.js => getImageDimensions.ts} (100%) rename packages/koenig-lexical/src/utils/{getImageFilenameFromSrc.js => getImageFilenameFromSrc.ts} (100%) rename packages/koenig-lexical/src/utils/{getScrollParent.js => getScrollParent.ts} (100%) rename packages/koenig-lexical/src/utils/{getSelectedNode.js => getSelectedNode.ts} (100%) rename packages/koenig-lexical/src/utils/{getTopLevelNativeElement.js => getTopLevelNativeElement.ts} (100%) rename packages/koenig-lexical/src/utils/{image-card-widths.js => image-card-widths.ts} (100%) rename packages/koenig-lexical/src/utils/{imageUploadHandler.js => imageUploadHandler.ts} (100%) rename packages/koenig-lexical/src/utils/{index.js => index.ts} (100%) rename packages/koenig-lexical/src/utils/{isEditorEmpty.js => isEditorEmpty.ts} (100%) rename packages/koenig-lexical/src/utils/{isGif.js => isGif.ts} (100%) rename packages/koenig-lexical/src/utils/{isInternalUrl.js => isInternalUrl.ts} (100%) rename packages/koenig-lexical/src/utils/{nested-editors.js => nested-editors.ts} (100%) rename packages/koenig-lexical/src/utils/{openFileSelection.js => openFileSelection.ts} (100%) rename packages/koenig-lexical/src/utils/{prettifyFileName.js => prettifyFileName.ts} (100%) rename packages/koenig-lexical/src/utils/{sanitize-html.js => sanitize-html.ts} (100%) rename packages/koenig-lexical/src/utils/services/{tenor.js => tenor.ts} (100%) rename packages/koenig-lexical/src/utils/{setFloatingElemPosition.js => setFloatingElemPosition.ts} (100%) rename packages/koenig-lexical/src/utils/{shortcutSymbols.js => shortcutSymbols.ts} (100%) rename packages/koenig-lexical/src/utils/storybook/{populate-storybook-editor.js => populate-storybook-editor.ts} (100%) rename packages/koenig-lexical/src/utils/{thumbnailUploadHandler.js => thumbnailUploadHandler.ts} (100%) rename packages/koenig-lexical/src/utils/{visibility.js => visibility.ts} (100%) rename packages/koenig-lexical/test/e2e/{card-behaviour.test.js => card-behaviour.test.ts} (100%) rename packages/koenig-lexical/test/e2e/cards/{audio-card.test.js => audio-card.test.ts} (100%) rename packages/koenig-lexical/test/e2e/cards/{bookmark-card-with-search.test.js => bookmark-card-with-search.test.ts} (100%) rename packages/koenig-lexical/test/e2e/cards/{bookmark-card-without-search.test.js => bookmark-card-without-search.test.ts} (100%) rename packages/koenig-lexical/test/e2e/cards/{button-card.test.js => button-card.test.ts} (100%) rename packages/koenig-lexical/test/e2e/cards/{call-to-action-card.test.js => call-to-action-card.test.ts} (100%) rename packages/koenig-lexical/test/e2e/cards/{callout-card.test.js => callout-card.test.ts} (100%) rename packages/koenig-lexical/test/e2e/cards/{code-block-card.test.js => code-block-card.test.ts} (100%) rename packages/koenig-lexical/test/e2e/cards/{email-card.test.js => email-card.test.ts} (100%) rename packages/koenig-lexical/test/e2e/cards/{email-cta-card.test.js => email-cta-card.test.ts} (100%) rename packages/koenig-lexical/test/e2e/cards/{embed-card.test.js => embed-card.test.ts} (100%) rename packages/koenig-lexical/test/e2e/cards/{file-card.test.js => file-card.test.ts} (100%) rename packages/koenig-lexical/test/e2e/cards/{gallery-card.test.js => gallery-card.test.ts} (100%) rename packages/koenig-lexical/test/e2e/cards/{header-card.test.js => header-card.test.ts} (100%) rename packages/koenig-lexical/test/e2e/cards/{html-card.test.js => html-card.test.ts} (100%) rename packages/koenig-lexical/test/e2e/cards/{image-card.test.js => image-card.test.ts} (100%) rename packages/koenig-lexical/test/e2e/cards/{markdown-card.test.js => markdown-card.test.ts} (100%) rename packages/koenig-lexical/test/e2e/cards/{paywall-card.test.js => paywall-card.test.ts} (100%) rename packages/koenig-lexical/test/e2e/cards/{product-card.test.js => product-card.test.ts} (100%) rename packages/koenig-lexical/test/e2e/cards/{signup-card.test.js => signup-card.test.ts} (100%) rename packages/koenig-lexical/test/e2e/cards/{toggle-card.test.js => toggle-card.test.ts} (100%) rename packages/koenig-lexical/test/e2e/cards/{transistor-card.test.js => transistor-card.test.ts} (100%) rename packages/koenig-lexical/test/e2e/cards/{video-card.firefox.test.js => video-card.firefox.test.ts} (100%) rename packages/koenig-lexical/test/e2e/{content-visibility.test.js => content-visibility.test.ts} (100%) rename packages/koenig-lexical/test/e2e/editors/{basic-editor.test.js => basic-editor.test.ts} (100%) rename packages/koenig-lexical/test/e2e/editors/{email-editor.test.js => email-editor.test.ts} (100%) rename packages/koenig-lexical/test/e2e/editors/{minimal-editor.test.js => minimal-editor.test.ts} (100%) rename packages/koenig-lexical/test/e2e/{floating-toolbar.test.js => floating-toolbar.test.ts} (100%) rename packages/koenig-lexical/test/e2e/{format-shortcuts.test.js => format-shortcuts.test.ts} (100%) rename packages/koenig-lexical/test/e2e/{linking.test.js => linking.test.ts} (100%) rename packages/koenig-lexical/test/e2e/{list-behaviour.test.js => list-behaviour.test.ts} (100%) rename packages/koenig-lexical/test/e2e/modals/{UnsplashSelector.test.js => UnsplashSelector.test.ts} (100%) rename packages/koenig-lexical/test/e2e/{node-transforms.test.js => node-transforms.test.ts} (100%) rename packages/koenig-lexical/test/e2e/{paste-behaviour.test.js => paste-behaviour.test.ts} (100%) rename packages/koenig-lexical/test/e2e/plugins/{DragDropPastePlugin.firefox.test.js => DragDropPastePlugin.firefox.test.ts} (100%) rename packages/koenig-lexical/test/e2e/plugins/{DragDropPastePlugin.test.js => DragDropPastePlugin.test.ts} (100%) rename packages/koenig-lexical/test/e2e/plugins/{DragDropReorderPlugin.test.js => DragDropReorderPlugin.test.ts} (100%) rename packages/koenig-lexical/test/e2e/plugins/{EmojiPickerPlugin.test.js => EmojiPickerPlugin.test.ts} (100%) rename packages/koenig-lexical/test/e2e/plugins/{HtmlOutputPlugin.test.js => HtmlOutputPlugin.test.ts} (100%) rename packages/koenig-lexical/test/e2e/plugins/{KoenigSnippetPlugin.test.js => KoenigSnippetPlugin.test.ts} (100%) rename packages/koenig-lexical/test/e2e/plugins/{ReplacementStringsPlugin.test.js => ReplacementStringsPlugin.test.ts} (100%) rename packages/koenig-lexical/test/e2e/plugins/{RestrictContentPlugin.test.js => RestrictContentPlugin.test.ts} (100%) rename packages/koenig-lexical/test/e2e/plugins/{TKPlugin.test.js => TKPlugin.test.ts} (100%) rename packages/koenig-lexical/test/e2e/plugins/{WordCountPlugin.test.js => WordCountPlugin.test.ts} (100%) rename packages/koenig-lexical/test/e2e/{plus-button.test.js => plus-button.test.ts} (100%) rename packages/koenig-lexical/test/e2e/{selection.test.js => selection.test.ts} (100%) rename packages/koenig-lexical/test/e2e/{slash-menu.test.js => slash-menu.test.ts} (100%) rename packages/koenig-lexical/test/e2e/text-transforms/{code-block.test.js => code-block.test.ts} (100%) rename packages/koenig-lexical/test/e2e/text-transforms/{emdash-endash.test.js => emdash-endash.test.ts} (100%) rename packages/koenig-lexical/test/e2e/text-transforms/{headings.test.js => headings.test.ts} (100%) rename packages/koenig-lexical/test/e2e/text-transforms/{horizontal-line-rule.test.js => horizontal-line-rule.test.ts} (100%) rename packages/koenig-lexical/test/e2e/text-transforms/{links.test.js => links.test.ts} (100%) rename packages/koenig-lexical/test/e2e/text-transforms/{markdown.test.js => markdown.test.ts} (100%) rename packages/koenig-lexical/test/e2e/text-transforms/{paywall.test.js => paywall.test.ts} (100%) rename packages/koenig-lexical/test/e2e/{title-behaviour.test.js => title-behaviour.test.ts} (100%) rename packages/koenig-lexical/test/e2e/utils/{getImageDimensions.test.js => getImageDimensions.test.ts} (100%) rename packages/koenig-lexical/test/{test-setup.js => test-setup.ts} (100%) rename packages/koenig-lexical/test/unit/{KoenigComposer.test.jsx => KoenigComposer.test.tsx} (100%) rename packages/koenig-lexical/test/unit/{buildCardMenu.test.js => buildCardMenu.test.ts} (100%) rename packages/koenig-lexical/test/unit/{headerCardv2.test.js => headerCardv2.test.ts} (100%) rename packages/koenig-lexical/test/unit/hooks/{useVisibilityToggle.test.js => useVisibilityToggle.test.ts} (100%) rename packages/koenig-lexical/test/unit/{productCard.test.js => productCard.test.ts} (100%) rename packages/koenig-lexical/test/unit/{signupCard.test.js => signupCard.test.ts} (100%) rename packages/koenig-lexical/test/unit/{toggleCard.test.js => toggleCard.test.ts} (100%) rename packages/koenig-lexical/test/unit/utils/{generateEditorState.test.js => generateEditorState.test.ts} (100%) rename packages/koenig-lexical/test/unit/utils/{image-card-widths.test.js => image-card-widths.test.ts} (100%) rename packages/koenig-lexical/test/unit/utils/{sanitize-html.test.js => sanitize-html.test.ts} (100%) rename packages/koenig-lexical/test/unit/utils/{visibility.test.js => visibility.test.ts} (100%) rename packages/koenig-lexical/test/utils/{color-select-helper.js => color-select-helper.ts} (100%) rename packages/koenig-lexical/test/utils/{e2e.js => e2e.ts} (100%) rename packages/koenig-lexical/test/utils/{isTestEnv.js => isTestEnv.ts} (100%) rename packages/koenig-lexical/{vite.config.demo.js => vite.config.demo.ts} (100%) rename packages/koenig-lexical/{vite.config.js => vite.config.ts} (100%) diff --git a/packages/koenig-lexical/demo/DemoApp.jsx b/packages/koenig-lexical/demo/DemoApp.tsx similarity index 100% rename from packages/koenig-lexical/demo/DemoApp.jsx rename to packages/koenig-lexical/demo/DemoApp.tsx diff --git a/packages/koenig-lexical/demo/HtmlOutputDemo.jsx b/packages/koenig-lexical/demo/HtmlOutputDemo.tsx similarity index 100% rename from packages/koenig-lexical/demo/HtmlOutputDemo.jsx rename to packages/koenig-lexical/demo/HtmlOutputDemo.tsx diff --git a/packages/koenig-lexical/demo/RestrictedContentDemo.jsx b/packages/koenig-lexical/demo/RestrictedContentDemo.tsx similarity index 100% rename from packages/koenig-lexical/demo/RestrictedContentDemo.jsx rename to packages/koenig-lexical/demo/RestrictedContentDemo.tsx diff --git a/packages/koenig-lexical/demo/components/DarkModeToggle.jsx b/packages/koenig-lexical/demo/components/DarkModeToggle.tsx similarity index 100% rename from packages/koenig-lexical/demo/components/DarkModeToggle.jsx rename to packages/koenig-lexical/demo/components/DarkModeToggle.tsx diff --git a/packages/koenig-lexical/demo/components/EmailEditorWrapper.jsx b/packages/koenig-lexical/demo/components/EmailEditorWrapper.tsx similarity index 100% rename from packages/koenig-lexical/demo/components/EmailEditorWrapper.jsx rename to packages/koenig-lexical/demo/components/EmailEditorWrapper.tsx diff --git a/packages/koenig-lexical/demo/components/FloatingButton.jsx b/packages/koenig-lexical/demo/components/FloatingButton.tsx similarity index 100% rename from packages/koenig-lexical/demo/components/FloatingButton.jsx rename to packages/koenig-lexical/demo/components/FloatingButton.tsx diff --git a/packages/koenig-lexical/demo/components/InitialContentToggle.jsx b/packages/koenig-lexical/demo/components/InitialContentToggle.tsx similarity index 100% rename from packages/koenig-lexical/demo/components/InitialContentToggle.jsx rename to packages/koenig-lexical/demo/components/InitialContentToggle.tsx diff --git a/packages/koenig-lexical/demo/components/Navigator.jsx b/packages/koenig-lexical/demo/components/Navigator.tsx similarity index 100% rename from packages/koenig-lexical/demo/components/Navigator.jsx rename to packages/koenig-lexical/demo/components/Navigator.tsx diff --git a/packages/koenig-lexical/demo/components/SerializedStateTextarea.jsx b/packages/koenig-lexical/demo/components/SerializedStateTextarea.tsx similarity index 100% rename from packages/koenig-lexical/demo/components/SerializedStateTextarea.jsx rename to packages/koenig-lexical/demo/components/SerializedStateTextarea.tsx diff --git a/packages/koenig-lexical/demo/components/Sidebar.jsx b/packages/koenig-lexical/demo/components/Sidebar.tsx similarity index 100% rename from packages/koenig-lexical/demo/components/Sidebar.jsx rename to packages/koenig-lexical/demo/components/Sidebar.tsx diff --git a/packages/koenig-lexical/demo/components/TitleTextBox.jsx b/packages/koenig-lexical/demo/components/TitleTextBox.tsx similarity index 100% rename from packages/koenig-lexical/demo/components/TitleTextBox.jsx rename to packages/koenig-lexical/demo/components/TitleTextBox.tsx diff --git a/packages/koenig-lexical/demo/components/TreeView.jsx b/packages/koenig-lexical/demo/components/TreeView.tsx similarity index 100% rename from packages/koenig-lexical/demo/components/TreeView.jsx rename to packages/koenig-lexical/demo/components/TreeView.tsx diff --git a/packages/koenig-lexical/demo/components/Watermark.jsx b/packages/koenig-lexical/demo/components/Watermark.tsx similarity index 100% rename from packages/koenig-lexical/demo/components/Watermark.jsx rename to packages/koenig-lexical/demo/components/Watermark.tsx diff --git a/packages/koenig-lexical/demo/components/WordCount.jsx b/packages/koenig-lexical/demo/components/WordCount.tsx similarity index 100% rename from packages/koenig-lexical/demo/components/WordCount.jsx rename to packages/koenig-lexical/demo/components/WordCount.tsx diff --git a/packages/koenig-lexical/demo/demo.jsx b/packages/koenig-lexical/demo/demo.tsx similarity index 100% rename from packages/koenig-lexical/demo/demo.jsx rename to packages/koenig-lexical/demo/demo.tsx diff --git a/packages/koenig-lexical/demo/utils/fetchEmbed.js b/packages/koenig-lexical/demo/utils/fetchEmbed.ts similarity index 100% rename from packages/koenig-lexical/demo/utils/fetchEmbed.js rename to packages/koenig-lexical/demo/utils/fetchEmbed.ts diff --git a/packages/koenig-lexical/demo/utils/tenorConfig.js b/packages/koenig-lexical/demo/utils/tenorConfig.ts similarity index 100% rename from packages/koenig-lexical/demo/utils/tenorConfig.js rename to packages/koenig-lexical/demo/utils/tenorConfig.ts diff --git a/packages/koenig-lexical/demo/utils/unsplashConfig.js b/packages/koenig-lexical/demo/utils/unsplashConfig.ts similarity index 100% rename from packages/koenig-lexical/demo/utils/unsplashConfig.js rename to packages/koenig-lexical/demo/utils/unsplashConfig.ts diff --git a/packages/koenig-lexical/demo/utils/useFileUpload.js b/packages/koenig-lexical/demo/utils/useFileUpload.ts similarity index 100% rename from packages/koenig-lexical/demo/utils/useFileUpload.js rename to packages/koenig-lexical/demo/utils/useFileUpload.ts diff --git a/packages/koenig-lexical/demo/utils/useSnippets.js b/packages/koenig-lexical/demo/utils/useSnippets.ts similarity index 100% rename from packages/koenig-lexical/demo/utils/useSnippets.js rename to packages/koenig-lexical/demo/utils/useSnippets.ts diff --git a/packages/koenig-lexical/playwright.config.js b/packages/koenig-lexical/playwright.config.ts similarity index 100% rename from packages/koenig-lexical/playwright.config.js rename to packages/koenig-lexical/playwright.config.ts diff --git a/packages/koenig-lexical/src/components/DesignSandbox.jsx b/packages/koenig-lexical/src/components/DesignSandbox.tsx similarity index 100% rename from packages/koenig-lexical/src/components/DesignSandbox.jsx rename to packages/koenig-lexical/src/components/DesignSandbox.tsx diff --git a/packages/koenig-lexical/src/components/KoenigCaptionEditor.jsx b/packages/koenig-lexical/src/components/KoenigCaptionEditor.tsx similarity index 100% rename from packages/koenig-lexical/src/components/KoenigCaptionEditor.jsx rename to packages/koenig-lexical/src/components/KoenigCaptionEditor.tsx diff --git a/packages/koenig-lexical/src/components/KoenigCardWrapper.jsx b/packages/koenig-lexical/src/components/KoenigCardWrapper.tsx similarity index 100% rename from packages/koenig-lexical/src/components/KoenigCardWrapper.jsx rename to packages/koenig-lexical/src/components/KoenigCardWrapper.tsx diff --git a/packages/koenig-lexical/src/components/KoenigComposableEditor.jsx b/packages/koenig-lexical/src/components/KoenigComposableEditor.tsx similarity index 100% rename from packages/koenig-lexical/src/components/KoenigComposableEditor.jsx rename to packages/koenig-lexical/src/components/KoenigComposableEditor.tsx diff --git a/packages/koenig-lexical/src/components/KoenigComposer.jsx b/packages/koenig-lexical/src/components/KoenigComposer.tsx similarity index 100% rename from packages/koenig-lexical/src/components/KoenigComposer.jsx rename to packages/koenig-lexical/src/components/KoenigComposer.tsx diff --git a/packages/koenig-lexical/src/components/KoenigEditor.jsx b/packages/koenig-lexical/src/components/KoenigEditor.tsx similarity index 100% rename from packages/koenig-lexical/src/components/KoenigEditor.jsx rename to packages/koenig-lexical/src/components/KoenigEditor.tsx diff --git a/packages/koenig-lexical/src/components/KoenigErrorBoundary.jsx b/packages/koenig-lexical/src/components/KoenigErrorBoundary.tsx similarity index 100% rename from packages/koenig-lexical/src/components/KoenigErrorBoundary.jsx rename to packages/koenig-lexical/src/components/KoenigErrorBoundary.tsx diff --git a/packages/koenig-lexical/src/components/KoenigNestedComposer.jsx b/packages/koenig-lexical/src/components/KoenigNestedComposer.tsx similarity index 100% rename from packages/koenig-lexical/src/components/KoenigNestedComposer.jsx rename to packages/koenig-lexical/src/components/KoenigNestedComposer.tsx diff --git a/packages/koenig-lexical/src/components/KoenigNestedEditor.jsx b/packages/koenig-lexical/src/components/KoenigNestedEditor.tsx similarity index 100% rename from packages/koenig-lexical/src/components/KoenigNestedEditor.jsx rename to packages/koenig-lexical/src/components/KoenigNestedEditor.tsx diff --git a/packages/koenig-lexical/src/components/ui/ActionToolbar.jsx b/packages/koenig-lexical/src/components/ui/ActionToolbar.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/ActionToolbar.jsx rename to packages/koenig-lexical/src/components/ui/ActionToolbar.tsx diff --git a/packages/koenig-lexical/src/components/ui/AtLinkResultsPopup.jsx b/packages/koenig-lexical/src/components/ui/AtLinkResultsPopup.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/AtLinkResultsPopup.jsx rename to packages/koenig-lexical/src/components/ui/AtLinkResultsPopup.tsx diff --git a/packages/koenig-lexical/src/components/ui/AudioUploadForm.jsx b/packages/koenig-lexical/src/components/ui/AudioUploadForm.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/AudioUploadForm.jsx rename to packages/koenig-lexical/src/components/ui/AudioUploadForm.tsx diff --git a/packages/koenig-lexical/src/components/ui/BackgroundImagePicker.jsx b/packages/koenig-lexical/src/components/ui/BackgroundImagePicker.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/BackgroundImagePicker.jsx rename to packages/koenig-lexical/src/components/ui/BackgroundImagePicker.tsx diff --git a/packages/koenig-lexical/src/components/ui/Button.stories.jsx b/packages/koenig-lexical/src/components/ui/Button.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/Button.stories.jsx rename to packages/koenig-lexical/src/components/ui/Button.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/Button.jsx b/packages/koenig-lexical/src/components/ui/Button.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/Button.jsx rename to packages/koenig-lexical/src/components/ui/Button.tsx diff --git a/packages/koenig-lexical/src/components/ui/ButtonGroup.stories.jsx b/packages/koenig-lexical/src/components/ui/ButtonGroup.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/ButtonGroup.stories.jsx rename to packages/koenig-lexical/src/components/ui/ButtonGroup.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/ButtonGroup.jsx b/packages/koenig-lexical/src/components/ui/ButtonGroup.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/ButtonGroup.jsx rename to packages/koenig-lexical/src/components/ui/ButtonGroup.tsx diff --git a/packages/koenig-lexical/src/components/ui/CardCaptionEditor.jsx b/packages/koenig-lexical/src/components/ui/CardCaptionEditor.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/CardCaptionEditor.jsx rename to packages/koenig-lexical/src/components/ui/CardCaptionEditor.tsx diff --git a/packages/koenig-lexical/src/components/ui/CardMenu.stories.jsx b/packages/koenig-lexical/src/components/ui/CardMenu.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/CardMenu.stories.jsx rename to packages/koenig-lexical/src/components/ui/CardMenu.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/CardMenu.jsx b/packages/koenig-lexical/src/components/ui/CardMenu.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/CardMenu.jsx rename to packages/koenig-lexical/src/components/ui/CardMenu.tsx diff --git a/packages/koenig-lexical/src/components/ui/CardVisibilityMessage.jsx b/packages/koenig-lexical/src/components/ui/CardVisibilityMessage.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/CardVisibilityMessage.jsx rename to packages/koenig-lexical/src/components/ui/CardVisibilityMessage.tsx diff --git a/packages/koenig-lexical/src/components/ui/CardWrapper.jsx b/packages/koenig-lexical/src/components/ui/CardWrapper.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/CardWrapper.jsx rename to packages/koenig-lexical/src/components/ui/CardWrapper.tsx diff --git a/packages/koenig-lexical/src/components/ui/ColorOptionButtons.jsx b/packages/koenig-lexical/src/components/ui/ColorOptionButtons.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/ColorOptionButtons.jsx rename to packages/koenig-lexical/src/components/ui/ColorOptionButtons.tsx diff --git a/packages/koenig-lexical/src/components/ui/ColorPicker.stories.jsx b/packages/koenig-lexical/src/components/ui/ColorPicker.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/ColorPicker.stories.jsx rename to packages/koenig-lexical/src/components/ui/ColorPicker.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/ColorPicker.jsx b/packages/koenig-lexical/src/components/ui/ColorPicker.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/ColorPicker.jsx rename to packages/koenig-lexical/src/components/ui/ColorPicker.tsx diff --git a/packages/koenig-lexical/src/components/ui/Delayed.jsx b/packages/koenig-lexical/src/components/ui/Delayed.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/Delayed.jsx rename to packages/koenig-lexical/src/components/ui/Delayed.tsx diff --git a/packages/koenig-lexical/src/components/ui/Dropdown.stories.jsx b/packages/koenig-lexical/src/components/ui/Dropdown.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/Dropdown.stories.jsx rename to packages/koenig-lexical/src/components/ui/Dropdown.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/Dropdown.jsx b/packages/koenig-lexical/src/components/ui/Dropdown.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/Dropdown.jsx rename to packages/koenig-lexical/src/components/ui/Dropdown.tsx diff --git a/packages/koenig-lexical/src/components/ui/DropdownContainer.jsx b/packages/koenig-lexical/src/components/ui/DropdownContainer.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/DropdownContainer.jsx rename to packages/koenig-lexical/src/components/ui/DropdownContainer.tsx diff --git a/packages/koenig-lexical/src/components/ui/EditorPlaceholder.jsx b/packages/koenig-lexical/src/components/ui/EditorPlaceholder.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/EditorPlaceholder.jsx rename to packages/koenig-lexical/src/components/ui/EditorPlaceholder.tsx diff --git a/packages/koenig-lexical/src/components/ui/EmojiPicker.jsx b/packages/koenig-lexical/src/components/ui/EmojiPicker.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/EmojiPicker.jsx rename to packages/koenig-lexical/src/components/ui/EmojiPicker.tsx diff --git a/packages/koenig-lexical/src/components/ui/EmojiPickerPortal.jsx b/packages/koenig-lexical/src/components/ui/EmojiPickerPortal.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/EmojiPickerPortal.jsx rename to packages/koenig-lexical/src/components/ui/EmojiPickerPortal.tsx diff --git a/packages/koenig-lexical/src/components/ui/FileUploadForm.jsx b/packages/koenig-lexical/src/components/ui/FileUploadForm.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/FileUploadForm.jsx rename to packages/koenig-lexical/src/components/ui/FileUploadForm.tsx diff --git a/packages/koenig-lexical/src/components/ui/FloatingFormatToolbar.jsx b/packages/koenig-lexical/src/components/ui/FloatingFormatToolbar.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/FloatingFormatToolbar.jsx rename to packages/koenig-lexical/src/components/ui/FloatingFormatToolbar.tsx diff --git a/packages/koenig-lexical/src/components/ui/FloatingLinkToolbar.jsx b/packages/koenig-lexical/src/components/ui/FloatingLinkToolbar.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/FloatingLinkToolbar.jsx rename to packages/koenig-lexical/src/components/ui/FloatingLinkToolbar.tsx diff --git a/packages/koenig-lexical/src/components/ui/FloatingToolbar.jsx b/packages/koenig-lexical/src/components/ui/FloatingToolbar.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/FloatingToolbar.jsx rename to packages/koenig-lexical/src/components/ui/FloatingToolbar.tsx diff --git a/packages/koenig-lexical/src/components/ui/FormatToolbar.jsx b/packages/koenig-lexical/src/components/ui/FormatToolbar.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/FormatToolbar.jsx rename to packages/koenig-lexical/src/components/ui/FormatToolbar.tsx diff --git a/packages/koenig-lexical/src/components/ui/HighlightedString.jsx b/packages/koenig-lexical/src/components/ui/HighlightedString.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/HighlightedString.jsx rename to packages/koenig-lexical/src/components/ui/HighlightedString.tsx diff --git a/packages/koenig-lexical/src/components/ui/IconButton.stories.jsx b/packages/koenig-lexical/src/components/ui/IconButton.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/IconButton.stories.jsx rename to packages/koenig-lexical/src/components/ui/IconButton.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/IconButton.jsx b/packages/koenig-lexical/src/components/ui/IconButton.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/IconButton.jsx rename to packages/koenig-lexical/src/components/ui/IconButton.tsx diff --git a/packages/koenig-lexical/src/components/ui/ImageUploadForm.jsx b/packages/koenig-lexical/src/components/ui/ImageUploadForm.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/ImageUploadForm.jsx rename to packages/koenig-lexical/src/components/ui/ImageUploadForm.tsx diff --git a/packages/koenig-lexical/src/components/ui/ImageUploadSwatch.jsx b/packages/koenig-lexical/src/components/ui/ImageUploadSwatch.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/ImageUploadSwatch.jsx rename to packages/koenig-lexical/src/components/ui/ImageUploadSwatch.tsx diff --git a/packages/koenig-lexical/src/components/ui/Input.stories.jsx b/packages/koenig-lexical/src/components/ui/Input.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/Input.stories.jsx rename to packages/koenig-lexical/src/components/ui/Input.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/Input.jsx b/packages/koenig-lexical/src/components/ui/Input.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/Input.jsx rename to packages/koenig-lexical/src/components/ui/Input.tsx diff --git a/packages/koenig-lexical/src/components/ui/InputList.stories.jsx b/packages/koenig-lexical/src/components/ui/InputList.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/InputList.stories.jsx rename to packages/koenig-lexical/src/components/ui/InputList.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/InputList.jsx b/packages/koenig-lexical/src/components/ui/InputList.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/InputList.jsx rename to packages/koenig-lexical/src/components/ui/InputList.tsx diff --git a/packages/koenig-lexical/src/components/ui/KeyboardSelection.jsx b/packages/koenig-lexical/src/components/ui/KeyboardSelection.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/KeyboardSelection.jsx rename to packages/koenig-lexical/src/components/ui/KeyboardSelection.tsx diff --git a/packages/koenig-lexical/src/components/ui/KeyboardSelectionWithGroups.jsx b/packages/koenig-lexical/src/components/ui/KeyboardSelectionWithGroups.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/KeyboardSelectionWithGroups.jsx rename to packages/koenig-lexical/src/components/ui/KeyboardSelectionWithGroups.tsx diff --git a/packages/koenig-lexical/src/components/ui/LinkActionToolbarWithSearch.jsx b/packages/koenig-lexical/src/components/ui/LinkActionToolbarWithSearch.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/LinkActionToolbarWithSearch.jsx rename to packages/koenig-lexical/src/components/ui/LinkActionToolbarWithSearch.tsx diff --git a/packages/koenig-lexical/src/components/ui/LinkInput.stories.jsx b/packages/koenig-lexical/src/components/ui/LinkInput.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/LinkInput.stories.jsx rename to packages/koenig-lexical/src/components/ui/LinkInput.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/LinkInput.jsx b/packages/koenig-lexical/src/components/ui/LinkInput.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/LinkInput.jsx rename to packages/koenig-lexical/src/components/ui/LinkInput.tsx diff --git a/packages/koenig-lexical/src/components/ui/LinkInputSearchItem.jsx b/packages/koenig-lexical/src/components/ui/LinkInputSearchItem.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/LinkInputSearchItem.jsx rename to packages/koenig-lexical/src/components/ui/LinkInputSearchItem.tsx diff --git a/packages/koenig-lexical/src/components/ui/LinkInputWithSearch.stories.jsx b/packages/koenig-lexical/src/components/ui/LinkInputWithSearch.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/LinkInputWithSearch.stories.jsx rename to packages/koenig-lexical/src/components/ui/LinkInputWithSearch.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/LinkInputWithSearch.jsx b/packages/koenig-lexical/src/components/ui/LinkInputWithSearch.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/LinkInputWithSearch.jsx rename to packages/koenig-lexical/src/components/ui/LinkInputWithSearch.tsx diff --git a/packages/koenig-lexical/src/components/ui/LinkToolbar.stories.jsx b/packages/koenig-lexical/src/components/ui/LinkToolbar.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/LinkToolbar.stories.jsx rename to packages/koenig-lexical/src/components/ui/LinkToolbar.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/LinkToolbar.jsx b/packages/koenig-lexical/src/components/ui/LinkToolbar.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/LinkToolbar.jsx rename to packages/koenig-lexical/src/components/ui/LinkToolbar.tsx diff --git a/packages/koenig-lexical/src/components/ui/MediaPlaceholder.stories.jsx b/packages/koenig-lexical/src/components/ui/MediaPlaceholder.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/MediaPlaceholder.stories.jsx rename to packages/koenig-lexical/src/components/ui/MediaPlaceholder.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/MediaPlaceholder.jsx b/packages/koenig-lexical/src/components/ui/MediaPlaceholder.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/MediaPlaceholder.jsx rename to packages/koenig-lexical/src/components/ui/MediaPlaceholder.tsx diff --git a/packages/koenig-lexical/src/components/ui/MediaPlayer.stories.jsx b/packages/koenig-lexical/src/components/ui/MediaPlayer.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/MediaPlayer.stories.jsx rename to packages/koenig-lexical/src/components/ui/MediaPlayer.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/MediaPlayer.jsx b/packages/koenig-lexical/src/components/ui/MediaPlayer.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/MediaPlayer.jsx rename to packages/koenig-lexical/src/components/ui/MediaPlayer.tsx diff --git a/packages/koenig-lexical/src/components/ui/MediaUploader.jsx b/packages/koenig-lexical/src/components/ui/MediaUploader.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/MediaUploader.jsx rename to packages/koenig-lexical/src/components/ui/MediaUploader.tsx diff --git a/packages/koenig-lexical/src/components/ui/Modal.stories.jsx b/packages/koenig-lexical/src/components/ui/Modal.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/Modal.stories.jsx rename to packages/koenig-lexical/src/components/ui/Modal.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/Modal.jsx b/packages/koenig-lexical/src/components/ui/Modal.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/Modal.jsx rename to packages/koenig-lexical/src/components/ui/Modal.tsx diff --git a/packages/koenig-lexical/src/components/ui/MultiSelectDropdown.jsx b/packages/koenig-lexical/src/components/ui/MultiSelectDropdown.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/MultiSelectDropdown.jsx rename to packages/koenig-lexical/src/components/ui/MultiSelectDropdown.tsx diff --git a/packages/koenig-lexical/src/components/ui/PlusMenu.stories.jsx b/packages/koenig-lexical/src/components/ui/PlusMenu.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/PlusMenu.stories.jsx rename to packages/koenig-lexical/src/components/ui/PlusMenu.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/PlusMenu.jsx b/packages/koenig-lexical/src/components/ui/PlusMenu.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/PlusMenu.jsx rename to packages/koenig-lexical/src/components/ui/PlusMenu.tsx diff --git a/packages/koenig-lexical/src/components/ui/Portal.jsx b/packages/koenig-lexical/src/components/ui/Portal.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/Portal.jsx rename to packages/koenig-lexical/src/components/ui/Portal.tsx diff --git a/packages/koenig-lexical/src/components/ui/ProgressBar.stories.jsx b/packages/koenig-lexical/src/components/ui/ProgressBar.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/ProgressBar.stories.jsx rename to packages/koenig-lexical/src/components/ui/ProgressBar.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/ProgressBar.jsx b/packages/koenig-lexical/src/components/ui/ProgressBar.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/ProgressBar.jsx rename to packages/koenig-lexical/src/components/ui/ProgressBar.tsx diff --git a/packages/koenig-lexical/src/components/ui/ReadOnlyOverlay.jsx b/packages/koenig-lexical/src/components/ui/ReadOnlyOverlay.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/ReadOnlyOverlay.jsx rename to packages/koenig-lexical/src/components/ui/ReadOnlyOverlay.tsx diff --git a/packages/koenig-lexical/src/components/ui/SettingsPanel.stories.jsx b/packages/koenig-lexical/src/components/ui/SettingsPanel.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/SettingsPanel.stories.jsx rename to packages/koenig-lexical/src/components/ui/SettingsPanel.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/SettingsPanel.jsx b/packages/koenig-lexical/src/components/ui/SettingsPanel.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/SettingsPanel.jsx rename to packages/koenig-lexical/src/components/ui/SettingsPanel.tsx diff --git a/packages/koenig-lexical/src/components/ui/SlashMenu.jsx b/packages/koenig-lexical/src/components/ui/SlashMenu.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/SlashMenu.jsx rename to packages/koenig-lexical/src/components/ui/SlashMenu.tsx diff --git a/packages/koenig-lexical/src/components/ui/Slider.stories.jsx b/packages/koenig-lexical/src/components/ui/Slider.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/Slider.stories.jsx rename to packages/koenig-lexical/src/components/ui/Slider.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/Slider.jsx b/packages/koenig-lexical/src/components/ui/Slider.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/Slider.jsx rename to packages/koenig-lexical/src/components/ui/Slider.tsx diff --git a/packages/koenig-lexical/src/components/ui/SnippetActionToolbar.jsx b/packages/koenig-lexical/src/components/ui/SnippetActionToolbar.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/SnippetActionToolbar.jsx rename to packages/koenig-lexical/src/components/ui/SnippetActionToolbar.tsx diff --git a/packages/koenig-lexical/src/components/ui/SnippetInput.stories.jsx b/packages/koenig-lexical/src/components/ui/SnippetInput.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/SnippetInput.stories.jsx rename to packages/koenig-lexical/src/components/ui/SnippetInput.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/SnippetInput.jsx b/packages/koenig-lexical/src/components/ui/SnippetInput.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/SnippetInput.jsx rename to packages/koenig-lexical/src/components/ui/SnippetInput.tsx diff --git a/packages/koenig-lexical/src/components/ui/SnippetInput/Dropdown.jsx b/packages/koenig-lexical/src/components/ui/SnippetInput/Dropdown.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/SnippetInput/Dropdown.jsx rename to packages/koenig-lexical/src/components/ui/SnippetInput/Dropdown.tsx diff --git a/packages/koenig-lexical/src/components/ui/SnippetInput/Input.jsx b/packages/koenig-lexical/src/components/ui/SnippetInput/Input.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/SnippetInput/Input.jsx rename to packages/koenig-lexical/src/components/ui/SnippetInput/Input.tsx diff --git a/packages/koenig-lexical/src/components/ui/Spinner.jsx b/packages/koenig-lexical/src/components/ui/Spinner.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/Spinner.jsx rename to packages/koenig-lexical/src/components/ui/Spinner.tsx diff --git a/packages/koenig-lexical/src/components/ui/SubscribeForm.stories.jsx b/packages/koenig-lexical/src/components/ui/SubscribeForm.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/SubscribeForm.stories.jsx rename to packages/koenig-lexical/src/components/ui/SubscribeForm.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/SubscribeForm.jsx b/packages/koenig-lexical/src/components/ui/SubscribeForm.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/SubscribeForm.jsx rename to packages/koenig-lexical/src/components/ui/SubscribeForm.tsx diff --git a/packages/koenig-lexical/src/components/ui/TabView.jsx b/packages/koenig-lexical/src/components/ui/TabView.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/TabView.jsx rename to packages/koenig-lexical/src/components/ui/TabView.tsx diff --git a/packages/koenig-lexical/src/components/ui/TenorPlugin.jsx b/packages/koenig-lexical/src/components/ui/TenorPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/TenorPlugin.jsx rename to packages/koenig-lexical/src/components/ui/TenorPlugin.tsx diff --git a/packages/koenig-lexical/src/components/ui/TenorSelector.stories.jsx b/packages/koenig-lexical/src/components/ui/TenorSelector.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/TenorSelector.stories.jsx rename to packages/koenig-lexical/src/components/ui/TenorSelector.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/TenorSelector.jsx b/packages/koenig-lexical/src/components/ui/TenorSelector.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/TenorSelector.jsx rename to packages/koenig-lexical/src/components/ui/TenorSelector.tsx diff --git a/packages/koenig-lexical/src/components/ui/Toggle.stories.jsx b/packages/koenig-lexical/src/components/ui/Toggle.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/Toggle.stories.jsx rename to packages/koenig-lexical/src/components/ui/Toggle.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/Toggle.jsx b/packages/koenig-lexical/src/components/ui/Toggle.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/Toggle.jsx rename to packages/koenig-lexical/src/components/ui/Toggle.tsx diff --git a/packages/koenig-lexical/src/components/ui/ToolbarMenu.stories.jsx b/packages/koenig-lexical/src/components/ui/ToolbarMenu.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/ToolbarMenu.stories.jsx rename to packages/koenig-lexical/src/components/ui/ToolbarMenu.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/ToolbarMenu.jsx b/packages/koenig-lexical/src/components/ui/ToolbarMenu.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/ToolbarMenu.jsx rename to packages/koenig-lexical/src/components/ui/ToolbarMenu.tsx diff --git a/packages/koenig-lexical/src/components/ui/ToolbarMenuItem.stories.jsx b/packages/koenig-lexical/src/components/ui/ToolbarMenuItem.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/ToolbarMenuItem.stories.jsx rename to packages/koenig-lexical/src/components/ui/ToolbarMenuItem.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/Tooltip.jsx b/packages/koenig-lexical/src/components/ui/Tooltip.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/Tooltip.jsx rename to packages/koenig-lexical/src/components/ui/Tooltip.tsx diff --git a/packages/koenig-lexical/src/components/ui/UnsplashPlugin.jsx b/packages/koenig-lexical/src/components/ui/UnsplashPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/UnsplashPlugin.jsx rename to packages/koenig-lexical/src/components/ui/UnsplashPlugin.tsx diff --git a/packages/koenig-lexical/src/components/ui/UrlInput.stories.jsx b/packages/koenig-lexical/src/components/ui/UrlInput.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/UrlInput.stories.jsx rename to packages/koenig-lexical/src/components/ui/UrlInput.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/UrlInput.jsx b/packages/koenig-lexical/src/components/ui/UrlInput.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/UrlInput.jsx rename to packages/koenig-lexical/src/components/ui/UrlInput.tsx diff --git a/packages/koenig-lexical/src/components/ui/UrlSearchInput.stories.jsx b/packages/koenig-lexical/src/components/ui/UrlSearchInput.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/UrlSearchInput.stories.jsx rename to packages/koenig-lexical/src/components/ui/UrlSearchInput.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/UrlSearchInput.jsx b/packages/koenig-lexical/src/components/ui/UrlSearchInput.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/UrlSearchInput.jsx rename to packages/koenig-lexical/src/components/ui/UrlSearchInput.tsx diff --git a/packages/koenig-lexical/src/components/ui/VisibilitySettings.jsx b/packages/koenig-lexical/src/components/ui/VisibilitySettings.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/VisibilitySettings.jsx rename to packages/koenig-lexical/src/components/ui/VisibilitySettings.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/AudioCard.stories.jsx b/packages/koenig-lexical/src/components/ui/cards/AudioCard.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/AudioCard.stories.jsx rename to packages/koenig-lexical/src/components/ui/cards/AudioCard.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/AudioCard.jsx b/packages/koenig-lexical/src/components/ui/cards/AudioCard.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/AudioCard.jsx rename to packages/koenig-lexical/src/components/ui/cards/AudioCard.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/BookmarkCard.stories.jsx b/packages/koenig-lexical/src/components/ui/cards/BookmarkCard.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/BookmarkCard.stories.jsx rename to packages/koenig-lexical/src/components/ui/cards/BookmarkCard.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/BookmarkCard.jsx b/packages/koenig-lexical/src/components/ui/cards/BookmarkCard.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/BookmarkCard.jsx rename to packages/koenig-lexical/src/components/ui/cards/BookmarkCard.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/ButtonCard.stories.jsx b/packages/koenig-lexical/src/components/ui/cards/ButtonCard.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/ButtonCard.stories.jsx rename to packages/koenig-lexical/src/components/ui/cards/ButtonCard.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/ButtonCard.jsx b/packages/koenig-lexical/src/components/ui/cards/ButtonCard.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/ButtonCard.jsx rename to packages/koenig-lexical/src/components/ui/cards/ButtonCard.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.stories.jsx b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/CallToActionCard.stories.jsx rename to packages/koenig-lexical/src/components/ui/cards/CallToActionCard.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx rename to packages/koenig-lexical/src/components/ui/cards/CallToActionCard.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/CalloutCard.stories.jsx b/packages/koenig-lexical/src/components/ui/cards/CalloutCard.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/CalloutCard.stories.jsx rename to packages/koenig-lexical/src/components/ui/cards/CalloutCard.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/CalloutCard.jsx b/packages/koenig-lexical/src/components/ui/cards/CalloutCard.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/CalloutCard.jsx rename to packages/koenig-lexical/src/components/ui/cards/CalloutCard.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/CodeBlockCard.stories.jsx b/packages/koenig-lexical/src/components/ui/cards/CodeBlockCard.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/CodeBlockCard.stories.jsx rename to packages/koenig-lexical/src/components/ui/cards/CodeBlockCard.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/CodeBlockCard.jsx b/packages/koenig-lexical/src/components/ui/cards/CodeBlockCard.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/CodeBlockCard.jsx rename to packages/koenig-lexical/src/components/ui/cards/CodeBlockCard.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/EmailCard.stories.jsx b/packages/koenig-lexical/src/components/ui/cards/EmailCard.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/EmailCard.stories.jsx rename to packages/koenig-lexical/src/components/ui/cards/EmailCard.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/EmailCard.jsx b/packages/koenig-lexical/src/components/ui/cards/EmailCard.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/EmailCard.jsx rename to packages/koenig-lexical/src/components/ui/cards/EmailCard.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/EmailCtaCard.stories.jsx b/packages/koenig-lexical/src/components/ui/cards/EmailCtaCard.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/EmailCtaCard.stories.jsx rename to packages/koenig-lexical/src/components/ui/cards/EmailCtaCard.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/EmailCtaCard.jsx b/packages/koenig-lexical/src/components/ui/cards/EmailCtaCard.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/EmailCtaCard.jsx rename to packages/koenig-lexical/src/components/ui/cards/EmailCtaCard.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/EmbedCard.stories.jsx b/packages/koenig-lexical/src/components/ui/cards/EmbedCard.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/EmbedCard.stories.jsx rename to packages/koenig-lexical/src/components/ui/cards/EmbedCard.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/EmbedCard.jsx b/packages/koenig-lexical/src/components/ui/cards/EmbedCard.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/EmbedCard.jsx rename to packages/koenig-lexical/src/components/ui/cards/EmbedCard.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/FileCard.stories.jsx b/packages/koenig-lexical/src/components/ui/cards/FileCard.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/FileCard.stories.jsx rename to packages/koenig-lexical/src/components/ui/cards/FileCard.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/FileCard.jsx b/packages/koenig-lexical/src/components/ui/cards/FileCard.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/FileCard.jsx rename to packages/koenig-lexical/src/components/ui/cards/FileCard.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/GalleryCard.stories.jsx b/packages/koenig-lexical/src/components/ui/cards/GalleryCard.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/GalleryCard.stories.jsx rename to packages/koenig-lexical/src/components/ui/cards/GalleryCard.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/GalleryCard.jsx b/packages/koenig-lexical/src/components/ui/cards/GalleryCard.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/GalleryCard.jsx rename to packages/koenig-lexical/src/components/ui/cards/GalleryCard.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v1/HeaderCard.jsx b/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v1/HeaderCard.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/HeaderCard/v1/HeaderCard.jsx rename to packages/koenig-lexical/src/components/ui/cards/HeaderCard/v1/HeaderCard.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v1/HeaderCard.v1.stories.jsx b/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v1/HeaderCard.v1.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/HeaderCard/v1/HeaderCard.v1.stories.jsx rename to packages/koenig-lexical/src/components/ui/cards/HeaderCard/v1/HeaderCard.v1.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx b/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx rename to packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.v2.stories.jsx b/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.v2.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.v2.stories.jsx rename to packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.v2.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/HorizontalRuleCard.stories.jsx b/packages/koenig-lexical/src/components/ui/cards/HorizontalRuleCard.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/HorizontalRuleCard.stories.jsx rename to packages/koenig-lexical/src/components/ui/cards/HorizontalRuleCard.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/HorizontalRuleCard.jsx b/packages/koenig-lexical/src/components/ui/cards/HorizontalRuleCard.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/HorizontalRuleCard.jsx rename to packages/koenig-lexical/src/components/ui/cards/HorizontalRuleCard.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/HtmlCard.stories.jsx b/packages/koenig-lexical/src/components/ui/cards/HtmlCard.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/HtmlCard.stories.jsx rename to packages/koenig-lexical/src/components/ui/cards/HtmlCard.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/HtmlCard.jsx b/packages/koenig-lexical/src/components/ui/cards/HtmlCard.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/HtmlCard.jsx rename to packages/koenig-lexical/src/components/ui/cards/HtmlCard.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/HtmlCard/HtmlEditor.jsx b/packages/koenig-lexical/src/components/ui/cards/HtmlCard/HtmlEditor.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/HtmlCard/HtmlEditor.jsx rename to packages/koenig-lexical/src/components/ui/cards/HtmlCard/HtmlEditor.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/ImageCard.stories.jsx b/packages/koenig-lexical/src/components/ui/cards/ImageCard.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/ImageCard.stories.jsx rename to packages/koenig-lexical/src/components/ui/cards/ImageCard.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/ImageCard.jsx b/packages/koenig-lexical/src/components/ui/cards/ImageCard.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/ImageCard.jsx rename to packages/koenig-lexical/src/components/ui/cards/ImageCard.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/MarkdownCard.stories.jsx b/packages/koenig-lexical/src/components/ui/cards/MarkdownCard.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/MarkdownCard.stories.jsx rename to packages/koenig-lexical/src/components/ui/cards/MarkdownCard.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/MarkdownCard.jsx b/packages/koenig-lexical/src/components/ui/cards/MarkdownCard.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/MarkdownCard.jsx rename to packages/koenig-lexical/src/components/ui/cards/MarkdownCard.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/MarkdownCard/MarkdownEditor.jsx b/packages/koenig-lexical/src/components/ui/cards/MarkdownCard/MarkdownEditor.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/MarkdownCard/MarkdownEditor.jsx rename to packages/koenig-lexical/src/components/ui/cards/MarkdownCard/MarkdownEditor.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/MarkdownCard/MarkdownHelpDialog.jsx b/packages/koenig-lexical/src/components/ui/cards/MarkdownCard/MarkdownHelpDialog.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/MarkdownCard/MarkdownHelpDialog.jsx rename to packages/koenig-lexical/src/components/ui/cards/MarkdownCard/MarkdownHelpDialog.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/MarkdownCard/MarkdownImageUploader.jsx b/packages/koenig-lexical/src/components/ui/cards/MarkdownCard/MarkdownImageUploader.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/MarkdownCard/MarkdownImageUploader.jsx rename to packages/koenig-lexical/src/components/ui/cards/MarkdownCard/MarkdownImageUploader.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/MarkdownCard/useMarkdownImageUploader.js b/packages/koenig-lexical/src/components/ui/cards/MarkdownCard/useMarkdownImageUploader.ts similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/MarkdownCard/useMarkdownImageUploader.js rename to packages/koenig-lexical/src/components/ui/cards/MarkdownCard/useMarkdownImageUploader.ts diff --git a/packages/koenig-lexical/src/components/ui/cards/PaywallCard.stories.jsx b/packages/koenig-lexical/src/components/ui/cards/PaywallCard.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/PaywallCard.stories.jsx rename to packages/koenig-lexical/src/components/ui/cards/PaywallCard.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/PaywallCard.jsx b/packages/koenig-lexical/src/components/ui/cards/PaywallCard.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/PaywallCard.jsx rename to packages/koenig-lexical/src/components/ui/cards/PaywallCard.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/ProductCard.stories.jsx b/packages/koenig-lexical/src/components/ui/cards/ProductCard.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/ProductCard.stories.jsx rename to packages/koenig-lexical/src/components/ui/cards/ProductCard.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/ProductCard.jsx b/packages/koenig-lexical/src/components/ui/cards/ProductCard.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/ProductCard.jsx rename to packages/koenig-lexical/src/components/ui/cards/ProductCard.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/ProductCard/ProductCardImage.jsx b/packages/koenig-lexical/src/components/ui/cards/ProductCard/ProductCardImage.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/ProductCard/ProductCardImage.jsx rename to packages/koenig-lexical/src/components/ui/cards/ProductCard/ProductCardImage.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/ProductCard/RatingButton.jsx b/packages/koenig-lexical/src/components/ui/cards/ProductCard/RatingButton.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/ProductCard/RatingButton.jsx rename to packages/koenig-lexical/src/components/ui/cards/ProductCard/RatingButton.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/SignupCard.stories.jsx b/packages/koenig-lexical/src/components/ui/cards/SignupCard.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/SignupCard.stories.jsx rename to packages/koenig-lexical/src/components/ui/cards/SignupCard.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx b/packages/koenig-lexical/src/components/ui/cards/SignupCard.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx rename to packages/koenig-lexical/src/components/ui/cards/SignupCard.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/ToggleCard.stories.jsx b/packages/koenig-lexical/src/components/ui/cards/ToggleCard.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/ToggleCard.stories.jsx rename to packages/koenig-lexical/src/components/ui/cards/ToggleCard.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/ToggleCard.jsx b/packages/koenig-lexical/src/components/ui/cards/ToggleCard.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/ToggleCard.jsx rename to packages/koenig-lexical/src/components/ui/cards/ToggleCard.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/VideoCard.stories.jsx b/packages/koenig-lexical/src/components/ui/cards/VideoCard.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/VideoCard.stories.jsx rename to packages/koenig-lexical/src/components/ui/cards/VideoCard.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/cards/VideoCard.jsx b/packages/koenig-lexical/src/components/ui/cards/VideoCard.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/cards/VideoCard.jsx rename to packages/koenig-lexical/src/components/ui/cards/VideoCard.tsx diff --git a/packages/koenig-lexical/src/components/ui/file-selectors/Tenor/Error.jsx b/packages/koenig-lexical/src/components/ui/file-selectors/Tenor/Error.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/file-selectors/Tenor/Error.jsx rename to packages/koenig-lexical/src/components/ui/file-selectors/Tenor/Error.tsx diff --git a/packages/koenig-lexical/src/components/ui/file-selectors/Tenor/Gif.jsx b/packages/koenig-lexical/src/components/ui/file-selectors/Tenor/Gif.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/file-selectors/Tenor/Gif.jsx rename to packages/koenig-lexical/src/components/ui/file-selectors/Tenor/Gif.tsx diff --git a/packages/koenig-lexical/src/components/ui/file-selectors/Tenor/Loader.jsx b/packages/koenig-lexical/src/components/ui/file-selectors/Tenor/Loader.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/file-selectors/Tenor/Loader.jsx rename to packages/koenig-lexical/src/components/ui/file-selectors/Tenor/Loader.tsx diff --git a/packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashButton.jsx b/packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashButton.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashButton.jsx rename to packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashButton.tsx diff --git a/packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashGallery.jsx b/packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashGallery.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashGallery.jsx rename to packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashGallery.tsx diff --git a/packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashImage.jsx b/packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashImage.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashImage.jsx rename to packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashImage.tsx diff --git a/packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashSelector.stories.jsx b/packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashSelector.stories.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashSelector.stories.jsx rename to packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashSelector.stories.tsx diff --git a/packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashSelector.jsx b/packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashSelector.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashSelector.jsx rename to packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashSelector.tsx diff --git a/packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashZoomed.jsx b/packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashZoomed.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashZoomed.jsx rename to packages/koenig-lexical/src/components/ui/file-selectors/Unsplash/UnsplashZoomed.tsx diff --git a/packages/koenig-lexical/src/components/ui/file-selectors/UnsplashModal.jsx b/packages/koenig-lexical/src/components/ui/file-selectors/UnsplashModal.tsx similarity index 100% rename from packages/koenig-lexical/src/components/ui/file-selectors/UnsplashModal.jsx rename to packages/koenig-lexical/src/components/ui/file-selectors/UnsplashModal.tsx diff --git a/packages/koenig-lexical/src/context/CardContext.jsx b/packages/koenig-lexical/src/context/CardContext.tsx similarity index 100% rename from packages/koenig-lexical/src/context/CardContext.jsx rename to packages/koenig-lexical/src/context/CardContext.tsx diff --git a/packages/koenig-lexical/src/context/KoenigComposerContext.jsx b/packages/koenig-lexical/src/context/KoenigComposerContext.tsx similarity index 100% rename from packages/koenig-lexical/src/context/KoenigComposerContext.jsx rename to packages/koenig-lexical/src/context/KoenigComposerContext.tsx diff --git a/packages/koenig-lexical/src/context/KoenigSelectedCardContext.jsx b/packages/koenig-lexical/src/context/KoenigSelectedCardContext.tsx similarity index 100% rename from packages/koenig-lexical/src/context/KoenigSelectedCardContext.jsx rename to packages/koenig-lexical/src/context/KoenigSelectedCardContext.tsx diff --git a/packages/koenig-lexical/src/context/SharedHistoryContext.jsx b/packages/koenig-lexical/src/context/SharedHistoryContext.tsx similarity index 100% rename from packages/koenig-lexical/src/context/SharedHistoryContext.jsx rename to packages/koenig-lexical/src/context/SharedHistoryContext.tsx diff --git a/packages/koenig-lexical/src/context/SharedOnChangeContext.jsx b/packages/koenig-lexical/src/context/SharedOnChangeContext.tsx similarity index 100% rename from packages/koenig-lexical/src/context/SharedOnChangeContext.jsx rename to packages/koenig-lexical/src/context/SharedOnChangeContext.tsx diff --git a/packages/koenig-lexical/src/context/TKContext.jsx b/packages/koenig-lexical/src/context/TKContext.tsx similarity index 100% rename from packages/koenig-lexical/src/context/TKContext.jsx rename to packages/koenig-lexical/src/context/TKContext.tsx diff --git a/packages/koenig-lexical/src/hooks/useCardDragAndDrop.js b/packages/koenig-lexical/src/hooks/useCardDragAndDrop.ts similarity index 100% rename from packages/koenig-lexical/src/hooks/useCardDragAndDrop.js rename to packages/koenig-lexical/src/hooks/useCardDragAndDrop.ts diff --git a/packages/koenig-lexical/src/hooks/useClickOutside.js b/packages/koenig-lexical/src/hooks/useClickOutside.ts similarity index 100% rename from packages/koenig-lexical/src/hooks/useClickOutside.js rename to packages/koenig-lexical/src/hooks/useClickOutside.ts diff --git a/packages/koenig-lexical/src/hooks/useFileDragAndDrop.js b/packages/koenig-lexical/src/hooks/useFileDragAndDrop.ts similarity index 100% rename from packages/koenig-lexical/src/hooks/useFileDragAndDrop.js rename to packages/koenig-lexical/src/hooks/useFileDragAndDrop.ts diff --git a/packages/koenig-lexical/src/hooks/useGalleryReorder.js b/packages/koenig-lexical/src/hooks/useGalleryReorder.ts similarity index 100% rename from packages/koenig-lexical/src/hooks/useGalleryReorder.js rename to packages/koenig-lexical/src/hooks/useGalleryReorder.ts diff --git a/packages/koenig-lexical/src/hooks/useInputSelection.js b/packages/koenig-lexical/src/hooks/useInputSelection.ts similarity index 100% rename from packages/koenig-lexical/src/hooks/useInputSelection.js rename to packages/koenig-lexical/src/hooks/useInputSelection.ts diff --git a/packages/koenig-lexical/src/hooks/useKoenigTextEntity.js b/packages/koenig-lexical/src/hooks/useKoenigTextEntity.ts similarity index 100% rename from packages/koenig-lexical/src/hooks/useKoenigTextEntity.js rename to packages/koenig-lexical/src/hooks/useKoenigTextEntity.ts diff --git a/packages/koenig-lexical/src/hooks/useMovable.js b/packages/koenig-lexical/src/hooks/useMovable.ts similarity index 100% rename from packages/koenig-lexical/src/hooks/useMovable.js rename to packages/koenig-lexical/src/hooks/useMovable.ts diff --git a/packages/koenig-lexical/src/hooks/usePinturaEditor.js b/packages/koenig-lexical/src/hooks/usePinturaEditor.ts similarity index 100% rename from packages/koenig-lexical/src/hooks/usePinturaEditor.js rename to packages/koenig-lexical/src/hooks/usePinturaEditor.ts diff --git a/packages/koenig-lexical/src/hooks/usePreviousFocus.js b/packages/koenig-lexical/src/hooks/usePreviousFocus.ts similarity index 100% rename from packages/koenig-lexical/src/hooks/usePreviousFocus.js rename to packages/koenig-lexical/src/hooks/usePreviousFocus.ts diff --git a/packages/koenig-lexical/src/hooks/useSearchLinks.js b/packages/koenig-lexical/src/hooks/useSearchLinks.ts similarity index 100% rename from packages/koenig-lexical/src/hooks/useSearchLinks.js rename to packages/koenig-lexical/src/hooks/useSearchLinks.ts diff --git a/packages/koenig-lexical/src/hooks/useSettingsPanelReposition.js b/packages/koenig-lexical/src/hooks/useSettingsPanelReposition.ts similarity index 100% rename from packages/koenig-lexical/src/hooks/useSettingsPanelReposition.js rename to packages/koenig-lexical/src/hooks/useSettingsPanelReposition.ts diff --git a/packages/koenig-lexical/src/hooks/useTypeaheadTriggerMatch.js b/packages/koenig-lexical/src/hooks/useTypeaheadTriggerMatch.ts similarity index 100% rename from packages/koenig-lexical/src/hooks/useTypeaheadTriggerMatch.js rename to packages/koenig-lexical/src/hooks/useTypeaheadTriggerMatch.ts diff --git a/packages/koenig-lexical/src/hooks/useVisibilityToggle.js b/packages/koenig-lexical/src/hooks/useVisibilityToggle.ts similarity index 100% rename from packages/koenig-lexical/src/hooks/useVisibilityToggle.js rename to packages/koenig-lexical/src/hooks/useVisibilityToggle.ts diff --git a/packages/koenig-lexical/src/index.js b/packages/koenig-lexical/src/index.ts similarity index 100% rename from packages/koenig-lexical/src/index.js rename to packages/koenig-lexical/src/index.ts diff --git a/packages/koenig-lexical/src/nodes/AsideNode.js b/packages/koenig-lexical/src/nodes/AsideNode.ts similarity index 100% rename from packages/koenig-lexical/src/nodes/AsideNode.js rename to packages/koenig-lexical/src/nodes/AsideNode.ts diff --git a/packages/koenig-lexical/src/nodes/AudioNode.jsx b/packages/koenig-lexical/src/nodes/AudioNode.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/AudioNode.jsx rename to packages/koenig-lexical/src/nodes/AudioNode.tsx diff --git a/packages/koenig-lexical/src/nodes/AudioNodeComponent.jsx b/packages/koenig-lexical/src/nodes/AudioNodeComponent.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/AudioNodeComponent.jsx rename to packages/koenig-lexical/src/nodes/AudioNodeComponent.tsx diff --git a/packages/koenig-lexical/src/nodes/BasicNodes.js b/packages/koenig-lexical/src/nodes/BasicNodes.ts similarity index 100% rename from packages/koenig-lexical/src/nodes/BasicNodes.js rename to packages/koenig-lexical/src/nodes/BasicNodes.ts diff --git a/packages/koenig-lexical/src/nodes/BookmarkNode.jsx b/packages/koenig-lexical/src/nodes/BookmarkNode.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/BookmarkNode.jsx rename to packages/koenig-lexical/src/nodes/BookmarkNode.tsx diff --git a/packages/koenig-lexical/src/nodes/BookmarkNodeComponent.jsx b/packages/koenig-lexical/src/nodes/BookmarkNodeComponent.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/BookmarkNodeComponent.jsx rename to packages/koenig-lexical/src/nodes/BookmarkNodeComponent.tsx diff --git a/packages/koenig-lexical/src/nodes/ButtonNode.jsx b/packages/koenig-lexical/src/nodes/ButtonNode.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/ButtonNode.jsx rename to packages/koenig-lexical/src/nodes/ButtonNode.tsx diff --git a/packages/koenig-lexical/src/nodes/ButtonNodeComponent.jsx b/packages/koenig-lexical/src/nodes/ButtonNodeComponent.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/ButtonNodeComponent.jsx rename to packages/koenig-lexical/src/nodes/ButtonNodeComponent.tsx diff --git a/packages/koenig-lexical/src/nodes/CallToActionNode.jsx b/packages/koenig-lexical/src/nodes/CallToActionNode.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/CallToActionNode.jsx rename to packages/koenig-lexical/src/nodes/CallToActionNode.tsx diff --git a/packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx b/packages/koenig-lexical/src/nodes/CallToActionNodeComponent.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx rename to packages/koenig-lexical/src/nodes/CallToActionNodeComponent.tsx diff --git a/packages/koenig-lexical/src/nodes/CalloutNode.jsx b/packages/koenig-lexical/src/nodes/CalloutNode.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/CalloutNode.jsx rename to packages/koenig-lexical/src/nodes/CalloutNode.tsx diff --git a/packages/koenig-lexical/src/nodes/CalloutNodeComponent.jsx b/packages/koenig-lexical/src/nodes/CalloutNodeComponent.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/CalloutNodeComponent.jsx rename to packages/koenig-lexical/src/nodes/CalloutNodeComponent.tsx diff --git a/packages/koenig-lexical/src/nodes/CodeBlockNode.jsx b/packages/koenig-lexical/src/nodes/CodeBlockNode.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/CodeBlockNode.jsx rename to packages/koenig-lexical/src/nodes/CodeBlockNode.tsx diff --git a/packages/koenig-lexical/src/nodes/CodeBlockNodeComponent.jsx b/packages/koenig-lexical/src/nodes/CodeBlockNodeComponent.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/CodeBlockNodeComponent.jsx rename to packages/koenig-lexical/src/nodes/CodeBlockNodeComponent.tsx diff --git a/packages/koenig-lexical/src/nodes/DefaultNodes.js b/packages/koenig-lexical/src/nodes/DefaultNodes.ts similarity index 100% rename from packages/koenig-lexical/src/nodes/DefaultNodes.js rename to packages/koenig-lexical/src/nodes/DefaultNodes.ts diff --git a/packages/koenig-lexical/src/nodes/EmailCtaNode.jsx b/packages/koenig-lexical/src/nodes/EmailCtaNode.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/EmailCtaNode.jsx rename to packages/koenig-lexical/src/nodes/EmailCtaNode.tsx diff --git a/packages/koenig-lexical/src/nodes/EmailCtaNodeComponent.jsx b/packages/koenig-lexical/src/nodes/EmailCtaNodeComponent.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/EmailCtaNodeComponent.jsx rename to packages/koenig-lexical/src/nodes/EmailCtaNodeComponent.tsx diff --git a/packages/koenig-lexical/src/nodes/EmailEditorNodes.js b/packages/koenig-lexical/src/nodes/EmailEditorNodes.ts similarity index 100% rename from packages/koenig-lexical/src/nodes/EmailEditorNodes.js rename to packages/koenig-lexical/src/nodes/EmailEditorNodes.ts diff --git a/packages/koenig-lexical/src/nodes/EmailEmbedNode.jsx b/packages/koenig-lexical/src/nodes/EmailEmbedNode.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/EmailEmbedNode.jsx rename to packages/koenig-lexical/src/nodes/EmailEmbedNode.tsx diff --git a/packages/koenig-lexical/src/nodes/EmailNode.jsx b/packages/koenig-lexical/src/nodes/EmailNode.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/EmailNode.jsx rename to packages/koenig-lexical/src/nodes/EmailNode.tsx diff --git a/packages/koenig-lexical/src/nodes/EmailNodeComponent.jsx b/packages/koenig-lexical/src/nodes/EmailNodeComponent.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/EmailNodeComponent.jsx rename to packages/koenig-lexical/src/nodes/EmailNodeComponent.tsx diff --git a/packages/koenig-lexical/src/nodes/EmailNodes.js b/packages/koenig-lexical/src/nodes/EmailNodes.ts similarity index 100% rename from packages/koenig-lexical/src/nodes/EmailNodes.js rename to packages/koenig-lexical/src/nodes/EmailNodes.ts diff --git a/packages/koenig-lexical/src/nodes/EmbedNode.jsx b/packages/koenig-lexical/src/nodes/EmbedNode.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/EmbedNode.jsx rename to packages/koenig-lexical/src/nodes/EmbedNode.tsx diff --git a/packages/koenig-lexical/src/nodes/EmbedNodeComponent.jsx b/packages/koenig-lexical/src/nodes/EmbedNodeComponent.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/EmbedNodeComponent.jsx rename to packages/koenig-lexical/src/nodes/EmbedNodeComponent.tsx diff --git a/packages/koenig-lexical/src/nodes/FileNode.jsx b/packages/koenig-lexical/src/nodes/FileNode.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/FileNode.jsx rename to packages/koenig-lexical/src/nodes/FileNode.tsx diff --git a/packages/koenig-lexical/src/nodes/FileNodeComponent.jsx b/packages/koenig-lexical/src/nodes/FileNodeComponent.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/FileNodeComponent.jsx rename to packages/koenig-lexical/src/nodes/FileNodeComponent.tsx diff --git a/packages/koenig-lexical/src/nodes/GalleryNode.jsx b/packages/koenig-lexical/src/nodes/GalleryNode.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/GalleryNode.jsx rename to packages/koenig-lexical/src/nodes/GalleryNode.tsx diff --git a/packages/koenig-lexical/src/nodes/GalleryNodeComponent.jsx b/packages/koenig-lexical/src/nodes/GalleryNodeComponent.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/GalleryNodeComponent.jsx rename to packages/koenig-lexical/src/nodes/GalleryNodeComponent.tsx diff --git a/packages/koenig-lexical/src/nodes/HeaderNode.jsx b/packages/koenig-lexical/src/nodes/HeaderNode.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/HeaderNode.jsx rename to packages/koenig-lexical/src/nodes/HeaderNode.tsx diff --git a/packages/koenig-lexical/src/nodes/HorizontalRuleNode.jsx b/packages/koenig-lexical/src/nodes/HorizontalRuleNode.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/HorizontalRuleNode.jsx rename to packages/koenig-lexical/src/nodes/HorizontalRuleNode.tsx diff --git a/packages/koenig-lexical/src/nodes/HtmlNode.jsx b/packages/koenig-lexical/src/nodes/HtmlNode.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/HtmlNode.jsx rename to packages/koenig-lexical/src/nodes/HtmlNode.tsx diff --git a/packages/koenig-lexical/src/nodes/HtmlNodeComponent.jsx b/packages/koenig-lexical/src/nodes/HtmlNodeComponent.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/HtmlNodeComponent.jsx rename to packages/koenig-lexical/src/nodes/HtmlNodeComponent.tsx diff --git a/packages/koenig-lexical/src/nodes/ImageNode.jsx b/packages/koenig-lexical/src/nodes/ImageNode.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/ImageNode.jsx rename to packages/koenig-lexical/src/nodes/ImageNode.tsx diff --git a/packages/koenig-lexical/src/nodes/ImageNodeComponent.jsx b/packages/koenig-lexical/src/nodes/ImageNodeComponent.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/ImageNodeComponent.jsx rename to packages/koenig-lexical/src/nodes/ImageNodeComponent.tsx diff --git a/packages/koenig-lexical/src/nodes/MarkdownNode.jsx b/packages/koenig-lexical/src/nodes/MarkdownNode.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/MarkdownNode.jsx rename to packages/koenig-lexical/src/nodes/MarkdownNode.tsx diff --git a/packages/koenig-lexical/src/nodes/MarkdownNodeComponent.jsx b/packages/koenig-lexical/src/nodes/MarkdownNodeComponent.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/MarkdownNodeComponent.jsx rename to packages/koenig-lexical/src/nodes/MarkdownNodeComponent.tsx diff --git a/packages/koenig-lexical/src/nodes/MinimalNodes.js b/packages/koenig-lexical/src/nodes/MinimalNodes.ts similarity index 100% rename from packages/koenig-lexical/src/nodes/MinimalNodes.js rename to packages/koenig-lexical/src/nodes/MinimalNodes.ts diff --git a/packages/koenig-lexical/src/nodes/PaywallNode.jsx b/packages/koenig-lexical/src/nodes/PaywallNode.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/PaywallNode.jsx rename to packages/koenig-lexical/src/nodes/PaywallNode.tsx diff --git a/packages/koenig-lexical/src/nodes/ProductNode.jsx b/packages/koenig-lexical/src/nodes/ProductNode.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/ProductNode.jsx rename to packages/koenig-lexical/src/nodes/ProductNode.tsx diff --git a/packages/koenig-lexical/src/nodes/ProductNodeComponent.jsx b/packages/koenig-lexical/src/nodes/ProductNodeComponent.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/ProductNodeComponent.jsx rename to packages/koenig-lexical/src/nodes/ProductNodeComponent.tsx diff --git a/packages/koenig-lexical/src/nodes/SignupNode.jsx b/packages/koenig-lexical/src/nodes/SignupNode.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/SignupNode.jsx rename to packages/koenig-lexical/src/nodes/SignupNode.tsx diff --git a/packages/koenig-lexical/src/nodes/SignupNodeComponent.jsx b/packages/koenig-lexical/src/nodes/SignupNodeComponent.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/SignupNodeComponent.jsx rename to packages/koenig-lexical/src/nodes/SignupNodeComponent.tsx diff --git a/packages/koenig-lexical/src/nodes/ToggleNode.jsx b/packages/koenig-lexical/src/nodes/ToggleNode.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/ToggleNode.jsx rename to packages/koenig-lexical/src/nodes/ToggleNode.tsx diff --git a/packages/koenig-lexical/src/nodes/ToggleNodeComponent.jsx b/packages/koenig-lexical/src/nodes/ToggleNodeComponent.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/ToggleNodeComponent.jsx rename to packages/koenig-lexical/src/nodes/ToggleNodeComponent.tsx diff --git a/packages/koenig-lexical/src/nodes/TransistorNode.jsx b/packages/koenig-lexical/src/nodes/TransistorNode.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/TransistorNode.jsx rename to packages/koenig-lexical/src/nodes/TransistorNode.tsx diff --git a/packages/koenig-lexical/src/nodes/TransistorNodeComponent.jsx b/packages/koenig-lexical/src/nodes/TransistorNodeComponent.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/TransistorNodeComponent.jsx rename to packages/koenig-lexical/src/nodes/TransistorNodeComponent.tsx diff --git a/packages/koenig-lexical/src/nodes/VideoNode.jsx b/packages/koenig-lexical/src/nodes/VideoNode.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/VideoNode.jsx rename to packages/koenig-lexical/src/nodes/VideoNode.tsx diff --git a/packages/koenig-lexical/src/nodes/VideoNodeComponent.jsx b/packages/koenig-lexical/src/nodes/VideoNodeComponent.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/VideoNodeComponent.jsx rename to packages/koenig-lexical/src/nodes/VideoNodeComponent.tsx diff --git a/packages/koenig-lexical/src/nodes/header/v1/HeaderNodeComponent.jsx b/packages/koenig-lexical/src/nodes/header/v1/HeaderNodeComponent.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/header/v1/HeaderNodeComponent.jsx rename to packages/koenig-lexical/src/nodes/header/v1/HeaderNodeComponent.tsx diff --git a/packages/koenig-lexical/src/nodes/header/v2/HeaderNodeComponent.jsx b/packages/koenig-lexical/src/nodes/header/v2/HeaderNodeComponent.tsx similarity index 100% rename from packages/koenig-lexical/src/nodes/header/v2/HeaderNodeComponent.jsx rename to packages/koenig-lexical/src/nodes/header/v2/HeaderNodeComponent.tsx diff --git a/packages/koenig-lexical/src/plugins/AllDefaultPlugins.jsx b/packages/koenig-lexical/src/plugins/AllDefaultPlugins.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/AllDefaultPlugins.jsx rename to packages/koenig-lexical/src/plugins/AllDefaultPlugins.tsx diff --git a/packages/koenig-lexical/src/plugins/AtLinkPlugin.jsx b/packages/koenig-lexical/src/plugins/AtLinkPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/AtLinkPlugin.jsx rename to packages/koenig-lexical/src/plugins/AtLinkPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/AudioPlugin.jsx b/packages/koenig-lexical/src/plugins/AudioPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/AudioPlugin.jsx rename to packages/koenig-lexical/src/plugins/AudioPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/BookmarkPlugin.jsx b/packages/koenig-lexical/src/plugins/BookmarkPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/BookmarkPlugin.jsx rename to packages/koenig-lexical/src/plugins/BookmarkPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/ButtonPlugin.jsx b/packages/koenig-lexical/src/plugins/ButtonPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/ButtonPlugin.jsx rename to packages/koenig-lexical/src/plugins/ButtonPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/CallToActionPlugin.jsx b/packages/koenig-lexical/src/plugins/CallToActionPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/CallToActionPlugin.jsx rename to packages/koenig-lexical/src/plugins/CallToActionPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/CalloutPlugin.jsx b/packages/koenig-lexical/src/plugins/CalloutPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/CalloutPlugin.jsx rename to packages/koenig-lexical/src/plugins/CalloutPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/CardMenuPlugin.jsx b/packages/koenig-lexical/src/plugins/CardMenuPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/CardMenuPlugin.jsx rename to packages/koenig-lexical/src/plugins/CardMenuPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/DragDropPastePlugin.jsx b/packages/koenig-lexical/src/plugins/DragDropPastePlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/DragDropPastePlugin.jsx rename to packages/koenig-lexical/src/plugins/DragDropPastePlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/DragDropReorderPlugin.jsx b/packages/koenig-lexical/src/plugins/DragDropReorderPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/DragDropReorderPlugin.jsx rename to packages/koenig-lexical/src/plugins/DragDropReorderPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/EmEnDashPlugin.jsx b/packages/koenig-lexical/src/plugins/EmEnDashPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/EmEnDashPlugin.jsx rename to packages/koenig-lexical/src/plugins/EmEnDashPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/EmailCtaPlugin.jsx b/packages/koenig-lexical/src/plugins/EmailCtaPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/EmailCtaPlugin.jsx rename to packages/koenig-lexical/src/plugins/EmailCtaPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/EmailPlugin.jsx b/packages/koenig-lexical/src/plugins/EmailPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/EmailPlugin.jsx rename to packages/koenig-lexical/src/plugins/EmailPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/EmbedPlugin.jsx b/packages/koenig-lexical/src/plugins/EmbedPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/EmbedPlugin.jsx rename to packages/koenig-lexical/src/plugins/EmbedPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/EmojiPickerPlugin.jsx b/packages/koenig-lexical/src/plugins/EmojiPickerPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/EmojiPickerPlugin.jsx rename to packages/koenig-lexical/src/plugins/EmojiPickerPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/ExternalControlPlugin.jsx b/packages/koenig-lexical/src/plugins/ExternalControlPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/ExternalControlPlugin.jsx rename to packages/koenig-lexical/src/plugins/ExternalControlPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/FilePlugin.jsx b/packages/koenig-lexical/src/plugins/FilePlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/FilePlugin.jsx rename to packages/koenig-lexical/src/plugins/FilePlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/FloatingToolbarPlugin.jsx b/packages/koenig-lexical/src/plugins/FloatingToolbarPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/FloatingToolbarPlugin.jsx rename to packages/koenig-lexical/src/plugins/FloatingToolbarPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/GalleryPlugin.jsx b/packages/koenig-lexical/src/plugins/GalleryPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/GalleryPlugin.jsx rename to packages/koenig-lexical/src/plugins/GalleryPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/HeaderPlugin.jsx b/packages/koenig-lexical/src/plugins/HeaderPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/HeaderPlugin.jsx rename to packages/koenig-lexical/src/plugins/HeaderPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/HorizontalRulePlugin.jsx b/packages/koenig-lexical/src/plugins/HorizontalRulePlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/HorizontalRulePlugin.jsx rename to packages/koenig-lexical/src/plugins/HorizontalRulePlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/HtmlOutputPlugin.jsx b/packages/koenig-lexical/src/plugins/HtmlOutputPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/HtmlOutputPlugin.jsx rename to packages/koenig-lexical/src/plugins/HtmlOutputPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/HtmlPlugin.jsx b/packages/koenig-lexical/src/plugins/HtmlPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/HtmlPlugin.jsx rename to packages/koenig-lexical/src/plugins/HtmlPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/ImagePlugin.jsx b/packages/koenig-lexical/src/plugins/ImagePlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/ImagePlugin.jsx rename to packages/koenig-lexical/src/plugins/ImagePlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/KoenigBehaviourPlugin.jsx b/packages/koenig-lexical/src/plugins/KoenigBehaviourPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/KoenigBehaviourPlugin.jsx rename to packages/koenig-lexical/src/plugins/KoenigBehaviourPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/KoenigBlurPlugin.jsx b/packages/koenig-lexical/src/plugins/KoenigBlurPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/KoenigBlurPlugin.jsx rename to packages/koenig-lexical/src/plugins/KoenigBlurPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/KoenigFocusPlugin.jsx b/packages/koenig-lexical/src/plugins/KoenigFocusPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/KoenigFocusPlugin.jsx rename to packages/koenig-lexical/src/plugins/KoenigFocusPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/KoenigNestedEditorPlugin.jsx b/packages/koenig-lexical/src/plugins/KoenigNestedEditorPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/KoenigNestedEditorPlugin.jsx rename to packages/koenig-lexical/src/plugins/KoenigNestedEditorPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/KoenigSelectorPlugin.jsx b/packages/koenig-lexical/src/plugins/KoenigSelectorPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/KoenigSelectorPlugin.jsx rename to packages/koenig-lexical/src/plugins/KoenigSelectorPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/KoenigSnippetPlugin.jsx b/packages/koenig-lexical/src/plugins/KoenigSnippetPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/KoenigSnippetPlugin.jsx rename to packages/koenig-lexical/src/plugins/KoenigSnippetPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/MarkdownPastePlugin.jsx b/packages/koenig-lexical/src/plugins/MarkdownPastePlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/MarkdownPastePlugin.jsx rename to packages/koenig-lexical/src/plugins/MarkdownPastePlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/MarkdownPlugin.jsx b/packages/koenig-lexical/src/plugins/MarkdownPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/MarkdownPlugin.jsx rename to packages/koenig-lexical/src/plugins/MarkdownPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/MarkdownShortcutPlugin.jsx b/packages/koenig-lexical/src/plugins/MarkdownShortcutPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/MarkdownShortcutPlugin.jsx rename to packages/koenig-lexical/src/plugins/MarkdownShortcutPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/PaywallPlugin.jsx b/packages/koenig-lexical/src/plugins/PaywallPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/PaywallPlugin.jsx rename to packages/koenig-lexical/src/plugins/PaywallPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/PlusCardMenuPlugin.jsx b/packages/koenig-lexical/src/plugins/PlusCardMenuPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/PlusCardMenuPlugin.jsx rename to packages/koenig-lexical/src/plugins/PlusCardMenuPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/ProductPlugin.jsx b/packages/koenig-lexical/src/plugins/ProductPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/ProductPlugin.jsx rename to packages/koenig-lexical/src/plugins/ProductPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/ReplacementStringsPlugin.jsx b/packages/koenig-lexical/src/plugins/ReplacementStringsPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/ReplacementStringsPlugin.jsx rename to packages/koenig-lexical/src/plugins/ReplacementStringsPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/RestrictContentPlugin.jsx b/packages/koenig-lexical/src/plugins/RestrictContentPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/RestrictContentPlugin.jsx rename to packages/koenig-lexical/src/plugins/RestrictContentPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/SignupPlugin.jsx b/packages/koenig-lexical/src/plugins/SignupPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/SignupPlugin.jsx rename to packages/koenig-lexical/src/plugins/SignupPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/SlashCardMenuPlugin.jsx b/packages/koenig-lexical/src/plugins/SlashCardMenuPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/SlashCardMenuPlugin.jsx rename to packages/koenig-lexical/src/plugins/SlashCardMenuPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/TKCountPlugin.jsx b/packages/koenig-lexical/src/plugins/TKCountPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/TKCountPlugin.jsx rename to packages/koenig-lexical/src/plugins/TKCountPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/TKPlugin.jsx b/packages/koenig-lexical/src/plugins/TKPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/TKPlugin.jsx rename to packages/koenig-lexical/src/plugins/TKPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/TogglePlugin.jsx b/packages/koenig-lexical/src/plugins/TogglePlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/TogglePlugin.jsx rename to packages/koenig-lexical/src/plugins/TogglePlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/TransistorPlugin.jsx b/packages/koenig-lexical/src/plugins/TransistorPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/TransistorPlugin.jsx rename to packages/koenig-lexical/src/plugins/TransistorPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/VideoPlugin.jsx b/packages/koenig-lexical/src/plugins/VideoPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/VideoPlugin.jsx rename to packages/koenig-lexical/src/plugins/VideoPlugin.tsx diff --git a/packages/koenig-lexical/src/plugins/WordCountPlugin.jsx b/packages/koenig-lexical/src/plugins/WordCountPlugin.tsx similarity index 100% rename from packages/koenig-lexical/src/plugins/WordCountPlugin.jsx rename to packages/koenig-lexical/src/plugins/WordCountPlugin.tsx diff --git a/packages/koenig-lexical/src/themes/default.js b/packages/koenig-lexical/src/themes/default.ts similarity index 100% rename from packages/koenig-lexical/src/themes/default.js rename to packages/koenig-lexical/src/themes/default.ts diff --git a/packages/koenig-lexical/src/utils/$getSelectionRangeRect.js b/packages/koenig-lexical/src/utils/$getSelectionRangeRect.ts similarity index 100% rename from packages/koenig-lexical/src/utils/$getSelectionRangeRect.js rename to packages/koenig-lexical/src/utils/$getSelectionRangeRect.ts diff --git a/packages/koenig-lexical/src/utils/$insertAndSelectNode.js b/packages/koenig-lexical/src/utils/$insertAndSelectNode.ts similarity index 100% rename from packages/koenig-lexical/src/utils/$insertAndSelectNode.js rename to packages/koenig-lexical/src/utils/$insertAndSelectNode.ts diff --git a/packages/koenig-lexical/src/utils/$isAtStartOfDocument.js b/packages/koenig-lexical/src/utils/$isAtStartOfDocument.ts similarity index 100% rename from packages/koenig-lexical/src/utils/$isAtStartOfDocument.js rename to packages/koenig-lexical/src/utils/$isAtStartOfDocument.ts diff --git a/packages/koenig-lexical/src/utils/$isAtTopOfNode.js b/packages/koenig-lexical/src/utils/$isAtTopOfNode.ts similarity index 100% rename from packages/koenig-lexical/src/utils/$isAtTopOfNode.js rename to packages/koenig-lexical/src/utils/$isAtTopOfNode.ts diff --git a/packages/koenig-lexical/src/utils/$selectDecoratorNode.js b/packages/koenig-lexical/src/utils/$selectDecoratorNode.ts similarity index 100% rename from packages/koenig-lexical/src/utils/$selectDecoratorNode.js rename to packages/koenig-lexical/src/utils/$selectDecoratorNode.ts diff --git a/packages/koenig-lexical/src/utils/analytics.js b/packages/koenig-lexical/src/utils/analytics.ts similarity index 100% rename from packages/koenig-lexical/src/utils/analytics.js rename to packages/koenig-lexical/src/utils/analytics.ts diff --git a/packages/koenig-lexical/src/utils/audioUploadHandler.js b/packages/koenig-lexical/src/utils/audioUploadHandler.ts similarity index 100% rename from packages/koenig-lexical/src/utils/audioUploadHandler.js rename to packages/koenig-lexical/src/utils/audioUploadHandler.ts diff --git a/packages/koenig-lexical/src/utils/autoExpandTextArea.js b/packages/koenig-lexical/src/utils/autoExpandTextArea.ts similarity index 100% rename from packages/koenig-lexical/src/utils/autoExpandTextArea.js rename to packages/koenig-lexical/src/utils/autoExpandTextArea.ts diff --git a/packages/koenig-lexical/src/utils/buildCardMenu.js b/packages/koenig-lexical/src/utils/buildCardMenu.ts similarity index 100% rename from packages/koenig-lexical/src/utils/buildCardMenu.js rename to packages/koenig-lexical/src/utils/buildCardMenu.ts diff --git a/packages/koenig-lexical/src/utils/callToActionColors.js b/packages/koenig-lexical/src/utils/callToActionColors.ts similarity index 100% rename from packages/koenig-lexical/src/utils/callToActionColors.js rename to packages/koenig-lexical/src/utils/callToActionColors.ts diff --git a/packages/koenig-lexical/src/utils/constants.js b/packages/koenig-lexical/src/utils/constants.ts similarity index 100% rename from packages/koenig-lexical/src/utils/constants.js rename to packages/koenig-lexical/src/utils/constants.ts diff --git a/packages/koenig-lexical/src/utils/ctrlOrCmd.js b/packages/koenig-lexical/src/utils/ctrlOrCmd.ts similarity index 100% rename from packages/koenig-lexical/src/utils/ctrlOrCmd.js rename to packages/koenig-lexical/src/utils/ctrlOrCmd.ts diff --git a/packages/koenig-lexical/src/utils/dataSrcToFile.js b/packages/koenig-lexical/src/utils/dataSrcToFile.ts similarity index 100% rename from packages/koenig-lexical/src/utils/dataSrcToFile.js rename to packages/koenig-lexical/src/utils/dataSrcToFile.ts diff --git a/packages/koenig-lexical/src/utils/draggable/DragDropContainer.js b/packages/koenig-lexical/src/utils/draggable/DragDropContainer.ts similarity index 100% rename from packages/koenig-lexical/src/utils/draggable/DragDropContainer.js rename to packages/koenig-lexical/src/utils/draggable/DragDropContainer.ts diff --git a/packages/koenig-lexical/src/utils/draggable/DragDropHandler.jsx b/packages/koenig-lexical/src/utils/draggable/DragDropHandler.tsx similarity index 100% rename from packages/koenig-lexical/src/utils/draggable/DragDropHandler.jsx rename to packages/koenig-lexical/src/utils/draggable/DragDropHandler.tsx diff --git a/packages/koenig-lexical/src/utils/draggable/ScrollHandler.js b/packages/koenig-lexical/src/utils/draggable/ScrollHandler.ts similarity index 100% rename from packages/koenig-lexical/src/utils/draggable/ScrollHandler.js rename to packages/koenig-lexical/src/utils/draggable/ScrollHandler.ts diff --git a/packages/koenig-lexical/src/utils/draggable/draggable-constants.js b/packages/koenig-lexical/src/utils/draggable/draggable-constants.ts similarity index 100% rename from packages/koenig-lexical/src/utils/draggable/draggable-constants.js rename to packages/koenig-lexical/src/utils/draggable/draggable-constants.ts diff --git a/packages/koenig-lexical/src/utils/draggable/draggable-utils.js b/packages/koenig-lexical/src/utils/draggable/draggable-utils.ts similarity index 100% rename from packages/koenig-lexical/src/utils/draggable/draggable-utils.js rename to packages/koenig-lexical/src/utils/draggable/draggable-utils.ts diff --git a/packages/koenig-lexical/src/utils/extractVideoMetadata.js b/packages/koenig-lexical/src/utils/extractVideoMetadata.ts similarity index 100% rename from packages/koenig-lexical/src/utils/extractVideoMetadata.js rename to packages/koenig-lexical/src/utils/extractVideoMetadata.ts diff --git a/packages/koenig-lexical/src/utils/fileUploadHandler.js b/packages/koenig-lexical/src/utils/fileUploadHandler.ts similarity index 100% rename from packages/koenig-lexical/src/utils/fileUploadHandler.js rename to packages/koenig-lexical/src/utils/fileUploadHandler.ts diff --git a/packages/koenig-lexical/src/utils/generateEditorState.js b/packages/koenig-lexical/src/utils/generateEditorState.ts similarity index 100% rename from packages/koenig-lexical/src/utils/generateEditorState.js rename to packages/koenig-lexical/src/utils/generateEditorState.ts diff --git a/packages/koenig-lexical/src/utils/getAccentColor.js b/packages/koenig-lexical/src/utils/getAccentColor.ts similarity index 100% rename from packages/koenig-lexical/src/utils/getAccentColor.js rename to packages/koenig-lexical/src/utils/getAccentColor.ts diff --git a/packages/koenig-lexical/src/utils/getAudioMetadata.js b/packages/koenig-lexical/src/utils/getAudioMetadata.ts similarity index 100% rename from packages/koenig-lexical/src/utils/getAudioMetadata.js rename to packages/koenig-lexical/src/utils/getAudioMetadata.ts diff --git a/packages/koenig-lexical/src/utils/getDOMRangeRect.js b/packages/koenig-lexical/src/utils/getDOMRangeRect.ts similarity index 100% rename from packages/koenig-lexical/src/utils/getDOMRangeRect.js rename to packages/koenig-lexical/src/utils/getDOMRangeRect.ts diff --git a/packages/koenig-lexical/src/utils/getEditorCardNodes.js b/packages/koenig-lexical/src/utils/getEditorCardNodes.ts similarity index 100% rename from packages/koenig-lexical/src/utils/getEditorCardNodes.js rename to packages/koenig-lexical/src/utils/getEditorCardNodes.ts diff --git a/packages/koenig-lexical/src/utils/getImageDimensions.js b/packages/koenig-lexical/src/utils/getImageDimensions.ts similarity index 100% rename from packages/koenig-lexical/src/utils/getImageDimensions.js rename to packages/koenig-lexical/src/utils/getImageDimensions.ts diff --git a/packages/koenig-lexical/src/utils/getImageFilenameFromSrc.js b/packages/koenig-lexical/src/utils/getImageFilenameFromSrc.ts similarity index 100% rename from packages/koenig-lexical/src/utils/getImageFilenameFromSrc.js rename to packages/koenig-lexical/src/utils/getImageFilenameFromSrc.ts diff --git a/packages/koenig-lexical/src/utils/getScrollParent.js b/packages/koenig-lexical/src/utils/getScrollParent.ts similarity index 100% rename from packages/koenig-lexical/src/utils/getScrollParent.js rename to packages/koenig-lexical/src/utils/getScrollParent.ts diff --git a/packages/koenig-lexical/src/utils/getSelectedNode.js b/packages/koenig-lexical/src/utils/getSelectedNode.ts similarity index 100% rename from packages/koenig-lexical/src/utils/getSelectedNode.js rename to packages/koenig-lexical/src/utils/getSelectedNode.ts diff --git a/packages/koenig-lexical/src/utils/getTopLevelNativeElement.js b/packages/koenig-lexical/src/utils/getTopLevelNativeElement.ts similarity index 100% rename from packages/koenig-lexical/src/utils/getTopLevelNativeElement.js rename to packages/koenig-lexical/src/utils/getTopLevelNativeElement.ts diff --git a/packages/koenig-lexical/src/utils/image-card-widths.js b/packages/koenig-lexical/src/utils/image-card-widths.ts similarity index 100% rename from packages/koenig-lexical/src/utils/image-card-widths.js rename to packages/koenig-lexical/src/utils/image-card-widths.ts diff --git a/packages/koenig-lexical/src/utils/imageUploadHandler.js b/packages/koenig-lexical/src/utils/imageUploadHandler.ts similarity index 100% rename from packages/koenig-lexical/src/utils/imageUploadHandler.js rename to packages/koenig-lexical/src/utils/imageUploadHandler.ts diff --git a/packages/koenig-lexical/src/utils/index.js b/packages/koenig-lexical/src/utils/index.ts similarity index 100% rename from packages/koenig-lexical/src/utils/index.js rename to packages/koenig-lexical/src/utils/index.ts diff --git a/packages/koenig-lexical/src/utils/isEditorEmpty.js b/packages/koenig-lexical/src/utils/isEditorEmpty.ts similarity index 100% rename from packages/koenig-lexical/src/utils/isEditorEmpty.js rename to packages/koenig-lexical/src/utils/isEditorEmpty.ts diff --git a/packages/koenig-lexical/src/utils/isGif.js b/packages/koenig-lexical/src/utils/isGif.ts similarity index 100% rename from packages/koenig-lexical/src/utils/isGif.js rename to packages/koenig-lexical/src/utils/isGif.ts diff --git a/packages/koenig-lexical/src/utils/isInternalUrl.js b/packages/koenig-lexical/src/utils/isInternalUrl.ts similarity index 100% rename from packages/koenig-lexical/src/utils/isInternalUrl.js rename to packages/koenig-lexical/src/utils/isInternalUrl.ts diff --git a/packages/koenig-lexical/src/utils/nested-editors.js b/packages/koenig-lexical/src/utils/nested-editors.ts similarity index 100% rename from packages/koenig-lexical/src/utils/nested-editors.js rename to packages/koenig-lexical/src/utils/nested-editors.ts diff --git a/packages/koenig-lexical/src/utils/openFileSelection.js b/packages/koenig-lexical/src/utils/openFileSelection.ts similarity index 100% rename from packages/koenig-lexical/src/utils/openFileSelection.js rename to packages/koenig-lexical/src/utils/openFileSelection.ts diff --git a/packages/koenig-lexical/src/utils/prettifyFileName.js b/packages/koenig-lexical/src/utils/prettifyFileName.ts similarity index 100% rename from packages/koenig-lexical/src/utils/prettifyFileName.js rename to packages/koenig-lexical/src/utils/prettifyFileName.ts diff --git a/packages/koenig-lexical/src/utils/sanitize-html.js b/packages/koenig-lexical/src/utils/sanitize-html.ts similarity index 100% rename from packages/koenig-lexical/src/utils/sanitize-html.js rename to packages/koenig-lexical/src/utils/sanitize-html.ts diff --git a/packages/koenig-lexical/src/utils/services/tenor.js b/packages/koenig-lexical/src/utils/services/tenor.ts similarity index 100% rename from packages/koenig-lexical/src/utils/services/tenor.js rename to packages/koenig-lexical/src/utils/services/tenor.ts diff --git a/packages/koenig-lexical/src/utils/setFloatingElemPosition.js b/packages/koenig-lexical/src/utils/setFloatingElemPosition.ts similarity index 100% rename from packages/koenig-lexical/src/utils/setFloatingElemPosition.js rename to packages/koenig-lexical/src/utils/setFloatingElemPosition.ts diff --git a/packages/koenig-lexical/src/utils/shortcutSymbols.js b/packages/koenig-lexical/src/utils/shortcutSymbols.ts similarity index 100% rename from packages/koenig-lexical/src/utils/shortcutSymbols.js rename to packages/koenig-lexical/src/utils/shortcutSymbols.ts diff --git a/packages/koenig-lexical/src/utils/storybook/populate-storybook-editor.js b/packages/koenig-lexical/src/utils/storybook/populate-storybook-editor.ts similarity index 100% rename from packages/koenig-lexical/src/utils/storybook/populate-storybook-editor.js rename to packages/koenig-lexical/src/utils/storybook/populate-storybook-editor.ts diff --git a/packages/koenig-lexical/src/utils/thumbnailUploadHandler.js b/packages/koenig-lexical/src/utils/thumbnailUploadHandler.ts similarity index 100% rename from packages/koenig-lexical/src/utils/thumbnailUploadHandler.js rename to packages/koenig-lexical/src/utils/thumbnailUploadHandler.ts diff --git a/packages/koenig-lexical/src/utils/visibility.js b/packages/koenig-lexical/src/utils/visibility.ts similarity index 100% rename from packages/koenig-lexical/src/utils/visibility.js rename to packages/koenig-lexical/src/utils/visibility.ts diff --git a/packages/koenig-lexical/test/e2e/card-behaviour.test.js b/packages/koenig-lexical/test/e2e/card-behaviour.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/card-behaviour.test.js rename to packages/koenig-lexical/test/e2e/card-behaviour.test.ts diff --git a/packages/koenig-lexical/test/e2e/cards/audio-card.test.js b/packages/koenig-lexical/test/e2e/cards/audio-card.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/cards/audio-card.test.js rename to packages/koenig-lexical/test/e2e/cards/audio-card.test.ts diff --git a/packages/koenig-lexical/test/e2e/cards/bookmark-card-with-search.test.js b/packages/koenig-lexical/test/e2e/cards/bookmark-card-with-search.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/cards/bookmark-card-with-search.test.js rename to packages/koenig-lexical/test/e2e/cards/bookmark-card-with-search.test.ts diff --git a/packages/koenig-lexical/test/e2e/cards/bookmark-card-without-search.test.js b/packages/koenig-lexical/test/e2e/cards/bookmark-card-without-search.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/cards/bookmark-card-without-search.test.js rename to packages/koenig-lexical/test/e2e/cards/bookmark-card-without-search.test.ts diff --git a/packages/koenig-lexical/test/e2e/cards/button-card.test.js b/packages/koenig-lexical/test/e2e/cards/button-card.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/cards/button-card.test.js rename to packages/koenig-lexical/test/e2e/cards/button-card.test.ts diff --git a/packages/koenig-lexical/test/e2e/cards/call-to-action-card.test.js b/packages/koenig-lexical/test/e2e/cards/call-to-action-card.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/cards/call-to-action-card.test.js rename to packages/koenig-lexical/test/e2e/cards/call-to-action-card.test.ts diff --git a/packages/koenig-lexical/test/e2e/cards/callout-card.test.js b/packages/koenig-lexical/test/e2e/cards/callout-card.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/cards/callout-card.test.js rename to packages/koenig-lexical/test/e2e/cards/callout-card.test.ts diff --git a/packages/koenig-lexical/test/e2e/cards/code-block-card.test.js b/packages/koenig-lexical/test/e2e/cards/code-block-card.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/cards/code-block-card.test.js rename to packages/koenig-lexical/test/e2e/cards/code-block-card.test.ts diff --git a/packages/koenig-lexical/test/e2e/cards/email-card.test.js b/packages/koenig-lexical/test/e2e/cards/email-card.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/cards/email-card.test.js rename to packages/koenig-lexical/test/e2e/cards/email-card.test.ts diff --git a/packages/koenig-lexical/test/e2e/cards/email-cta-card.test.js b/packages/koenig-lexical/test/e2e/cards/email-cta-card.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/cards/email-cta-card.test.js rename to packages/koenig-lexical/test/e2e/cards/email-cta-card.test.ts diff --git a/packages/koenig-lexical/test/e2e/cards/embed-card.test.js b/packages/koenig-lexical/test/e2e/cards/embed-card.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/cards/embed-card.test.js rename to packages/koenig-lexical/test/e2e/cards/embed-card.test.ts diff --git a/packages/koenig-lexical/test/e2e/cards/file-card.test.js b/packages/koenig-lexical/test/e2e/cards/file-card.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/cards/file-card.test.js rename to packages/koenig-lexical/test/e2e/cards/file-card.test.ts diff --git a/packages/koenig-lexical/test/e2e/cards/gallery-card.test.js b/packages/koenig-lexical/test/e2e/cards/gallery-card.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/cards/gallery-card.test.js rename to packages/koenig-lexical/test/e2e/cards/gallery-card.test.ts diff --git a/packages/koenig-lexical/test/e2e/cards/header-card.test.js b/packages/koenig-lexical/test/e2e/cards/header-card.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/cards/header-card.test.js rename to packages/koenig-lexical/test/e2e/cards/header-card.test.ts diff --git a/packages/koenig-lexical/test/e2e/cards/html-card.test.js b/packages/koenig-lexical/test/e2e/cards/html-card.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/cards/html-card.test.js rename to packages/koenig-lexical/test/e2e/cards/html-card.test.ts diff --git a/packages/koenig-lexical/test/e2e/cards/image-card.test.js b/packages/koenig-lexical/test/e2e/cards/image-card.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/cards/image-card.test.js rename to packages/koenig-lexical/test/e2e/cards/image-card.test.ts diff --git a/packages/koenig-lexical/test/e2e/cards/markdown-card.test.js b/packages/koenig-lexical/test/e2e/cards/markdown-card.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/cards/markdown-card.test.js rename to packages/koenig-lexical/test/e2e/cards/markdown-card.test.ts diff --git a/packages/koenig-lexical/test/e2e/cards/paywall-card.test.js b/packages/koenig-lexical/test/e2e/cards/paywall-card.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/cards/paywall-card.test.js rename to packages/koenig-lexical/test/e2e/cards/paywall-card.test.ts diff --git a/packages/koenig-lexical/test/e2e/cards/product-card.test.js b/packages/koenig-lexical/test/e2e/cards/product-card.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/cards/product-card.test.js rename to packages/koenig-lexical/test/e2e/cards/product-card.test.ts diff --git a/packages/koenig-lexical/test/e2e/cards/signup-card.test.js b/packages/koenig-lexical/test/e2e/cards/signup-card.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/cards/signup-card.test.js rename to packages/koenig-lexical/test/e2e/cards/signup-card.test.ts diff --git a/packages/koenig-lexical/test/e2e/cards/toggle-card.test.js b/packages/koenig-lexical/test/e2e/cards/toggle-card.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/cards/toggle-card.test.js rename to packages/koenig-lexical/test/e2e/cards/toggle-card.test.ts diff --git a/packages/koenig-lexical/test/e2e/cards/transistor-card.test.js b/packages/koenig-lexical/test/e2e/cards/transistor-card.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/cards/transistor-card.test.js rename to packages/koenig-lexical/test/e2e/cards/transistor-card.test.ts diff --git a/packages/koenig-lexical/test/e2e/cards/video-card.firefox.test.js b/packages/koenig-lexical/test/e2e/cards/video-card.firefox.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/cards/video-card.firefox.test.js rename to packages/koenig-lexical/test/e2e/cards/video-card.firefox.test.ts diff --git a/packages/koenig-lexical/test/e2e/content-visibility.test.js b/packages/koenig-lexical/test/e2e/content-visibility.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/content-visibility.test.js rename to packages/koenig-lexical/test/e2e/content-visibility.test.ts diff --git a/packages/koenig-lexical/test/e2e/editors/basic-editor.test.js b/packages/koenig-lexical/test/e2e/editors/basic-editor.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/editors/basic-editor.test.js rename to packages/koenig-lexical/test/e2e/editors/basic-editor.test.ts diff --git a/packages/koenig-lexical/test/e2e/editors/email-editor.test.js b/packages/koenig-lexical/test/e2e/editors/email-editor.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/editors/email-editor.test.js rename to packages/koenig-lexical/test/e2e/editors/email-editor.test.ts diff --git a/packages/koenig-lexical/test/e2e/editors/minimal-editor.test.js b/packages/koenig-lexical/test/e2e/editors/minimal-editor.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/editors/minimal-editor.test.js rename to packages/koenig-lexical/test/e2e/editors/minimal-editor.test.ts diff --git a/packages/koenig-lexical/test/e2e/floating-toolbar.test.js b/packages/koenig-lexical/test/e2e/floating-toolbar.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/floating-toolbar.test.js rename to packages/koenig-lexical/test/e2e/floating-toolbar.test.ts diff --git a/packages/koenig-lexical/test/e2e/format-shortcuts.test.js b/packages/koenig-lexical/test/e2e/format-shortcuts.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/format-shortcuts.test.js rename to packages/koenig-lexical/test/e2e/format-shortcuts.test.ts diff --git a/packages/koenig-lexical/test/e2e/linking.test.js b/packages/koenig-lexical/test/e2e/linking.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/linking.test.js rename to packages/koenig-lexical/test/e2e/linking.test.ts diff --git a/packages/koenig-lexical/test/e2e/list-behaviour.test.js b/packages/koenig-lexical/test/e2e/list-behaviour.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/list-behaviour.test.js rename to packages/koenig-lexical/test/e2e/list-behaviour.test.ts diff --git a/packages/koenig-lexical/test/e2e/modals/UnsplashSelector.test.js b/packages/koenig-lexical/test/e2e/modals/UnsplashSelector.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/modals/UnsplashSelector.test.js rename to packages/koenig-lexical/test/e2e/modals/UnsplashSelector.test.ts diff --git a/packages/koenig-lexical/test/e2e/node-transforms.test.js b/packages/koenig-lexical/test/e2e/node-transforms.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/node-transforms.test.js rename to packages/koenig-lexical/test/e2e/node-transforms.test.ts diff --git a/packages/koenig-lexical/test/e2e/paste-behaviour.test.js b/packages/koenig-lexical/test/e2e/paste-behaviour.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/paste-behaviour.test.js rename to packages/koenig-lexical/test/e2e/paste-behaviour.test.ts diff --git a/packages/koenig-lexical/test/e2e/plugins/DragDropPastePlugin.firefox.test.js b/packages/koenig-lexical/test/e2e/plugins/DragDropPastePlugin.firefox.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/plugins/DragDropPastePlugin.firefox.test.js rename to packages/koenig-lexical/test/e2e/plugins/DragDropPastePlugin.firefox.test.ts diff --git a/packages/koenig-lexical/test/e2e/plugins/DragDropPastePlugin.test.js b/packages/koenig-lexical/test/e2e/plugins/DragDropPastePlugin.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/plugins/DragDropPastePlugin.test.js rename to packages/koenig-lexical/test/e2e/plugins/DragDropPastePlugin.test.ts diff --git a/packages/koenig-lexical/test/e2e/plugins/DragDropReorderPlugin.test.js b/packages/koenig-lexical/test/e2e/plugins/DragDropReorderPlugin.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/plugins/DragDropReorderPlugin.test.js rename to packages/koenig-lexical/test/e2e/plugins/DragDropReorderPlugin.test.ts diff --git a/packages/koenig-lexical/test/e2e/plugins/EmojiPickerPlugin.test.js b/packages/koenig-lexical/test/e2e/plugins/EmojiPickerPlugin.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/plugins/EmojiPickerPlugin.test.js rename to packages/koenig-lexical/test/e2e/plugins/EmojiPickerPlugin.test.ts diff --git a/packages/koenig-lexical/test/e2e/plugins/HtmlOutputPlugin.test.js b/packages/koenig-lexical/test/e2e/plugins/HtmlOutputPlugin.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/plugins/HtmlOutputPlugin.test.js rename to packages/koenig-lexical/test/e2e/plugins/HtmlOutputPlugin.test.ts diff --git a/packages/koenig-lexical/test/e2e/plugins/KoenigSnippetPlugin.test.js b/packages/koenig-lexical/test/e2e/plugins/KoenigSnippetPlugin.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/plugins/KoenigSnippetPlugin.test.js rename to packages/koenig-lexical/test/e2e/plugins/KoenigSnippetPlugin.test.ts diff --git a/packages/koenig-lexical/test/e2e/plugins/ReplacementStringsPlugin.test.js b/packages/koenig-lexical/test/e2e/plugins/ReplacementStringsPlugin.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/plugins/ReplacementStringsPlugin.test.js rename to packages/koenig-lexical/test/e2e/plugins/ReplacementStringsPlugin.test.ts diff --git a/packages/koenig-lexical/test/e2e/plugins/RestrictContentPlugin.test.js b/packages/koenig-lexical/test/e2e/plugins/RestrictContentPlugin.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/plugins/RestrictContentPlugin.test.js rename to packages/koenig-lexical/test/e2e/plugins/RestrictContentPlugin.test.ts diff --git a/packages/koenig-lexical/test/e2e/plugins/TKPlugin.test.js b/packages/koenig-lexical/test/e2e/plugins/TKPlugin.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/plugins/TKPlugin.test.js rename to packages/koenig-lexical/test/e2e/plugins/TKPlugin.test.ts diff --git a/packages/koenig-lexical/test/e2e/plugins/WordCountPlugin.test.js b/packages/koenig-lexical/test/e2e/plugins/WordCountPlugin.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/plugins/WordCountPlugin.test.js rename to packages/koenig-lexical/test/e2e/plugins/WordCountPlugin.test.ts diff --git a/packages/koenig-lexical/test/e2e/plus-button.test.js b/packages/koenig-lexical/test/e2e/plus-button.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/plus-button.test.js rename to packages/koenig-lexical/test/e2e/plus-button.test.ts diff --git a/packages/koenig-lexical/test/e2e/selection.test.js b/packages/koenig-lexical/test/e2e/selection.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/selection.test.js rename to packages/koenig-lexical/test/e2e/selection.test.ts diff --git a/packages/koenig-lexical/test/e2e/slash-menu.test.js b/packages/koenig-lexical/test/e2e/slash-menu.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/slash-menu.test.js rename to packages/koenig-lexical/test/e2e/slash-menu.test.ts diff --git a/packages/koenig-lexical/test/e2e/text-transforms/code-block.test.js b/packages/koenig-lexical/test/e2e/text-transforms/code-block.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/text-transforms/code-block.test.js rename to packages/koenig-lexical/test/e2e/text-transforms/code-block.test.ts diff --git a/packages/koenig-lexical/test/e2e/text-transforms/emdash-endash.test.js b/packages/koenig-lexical/test/e2e/text-transforms/emdash-endash.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/text-transforms/emdash-endash.test.js rename to packages/koenig-lexical/test/e2e/text-transforms/emdash-endash.test.ts diff --git a/packages/koenig-lexical/test/e2e/text-transforms/headings.test.js b/packages/koenig-lexical/test/e2e/text-transforms/headings.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/text-transforms/headings.test.js rename to packages/koenig-lexical/test/e2e/text-transforms/headings.test.ts diff --git a/packages/koenig-lexical/test/e2e/text-transforms/horizontal-line-rule.test.js b/packages/koenig-lexical/test/e2e/text-transforms/horizontal-line-rule.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/text-transforms/horizontal-line-rule.test.js rename to packages/koenig-lexical/test/e2e/text-transforms/horizontal-line-rule.test.ts diff --git a/packages/koenig-lexical/test/e2e/text-transforms/links.test.js b/packages/koenig-lexical/test/e2e/text-transforms/links.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/text-transforms/links.test.js rename to packages/koenig-lexical/test/e2e/text-transforms/links.test.ts diff --git a/packages/koenig-lexical/test/e2e/text-transforms/markdown.test.js b/packages/koenig-lexical/test/e2e/text-transforms/markdown.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/text-transforms/markdown.test.js rename to packages/koenig-lexical/test/e2e/text-transforms/markdown.test.ts diff --git a/packages/koenig-lexical/test/e2e/text-transforms/paywall.test.js b/packages/koenig-lexical/test/e2e/text-transforms/paywall.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/text-transforms/paywall.test.js rename to packages/koenig-lexical/test/e2e/text-transforms/paywall.test.ts diff --git a/packages/koenig-lexical/test/e2e/title-behaviour.test.js b/packages/koenig-lexical/test/e2e/title-behaviour.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/title-behaviour.test.js rename to packages/koenig-lexical/test/e2e/title-behaviour.test.ts diff --git a/packages/koenig-lexical/test/e2e/utils/getImageDimensions.test.js b/packages/koenig-lexical/test/e2e/utils/getImageDimensions.test.ts similarity index 100% rename from packages/koenig-lexical/test/e2e/utils/getImageDimensions.test.js rename to packages/koenig-lexical/test/e2e/utils/getImageDimensions.test.ts diff --git a/packages/koenig-lexical/test/test-setup.js b/packages/koenig-lexical/test/test-setup.ts similarity index 100% rename from packages/koenig-lexical/test/test-setup.js rename to packages/koenig-lexical/test/test-setup.ts diff --git a/packages/koenig-lexical/test/unit/KoenigComposer.test.jsx b/packages/koenig-lexical/test/unit/KoenigComposer.test.tsx similarity index 100% rename from packages/koenig-lexical/test/unit/KoenigComposer.test.jsx rename to packages/koenig-lexical/test/unit/KoenigComposer.test.tsx diff --git a/packages/koenig-lexical/test/unit/buildCardMenu.test.js b/packages/koenig-lexical/test/unit/buildCardMenu.test.ts similarity index 100% rename from packages/koenig-lexical/test/unit/buildCardMenu.test.js rename to packages/koenig-lexical/test/unit/buildCardMenu.test.ts diff --git a/packages/koenig-lexical/test/unit/headerCardv2.test.js b/packages/koenig-lexical/test/unit/headerCardv2.test.ts similarity index 100% rename from packages/koenig-lexical/test/unit/headerCardv2.test.js rename to packages/koenig-lexical/test/unit/headerCardv2.test.ts diff --git a/packages/koenig-lexical/test/unit/hooks/useVisibilityToggle.test.js b/packages/koenig-lexical/test/unit/hooks/useVisibilityToggle.test.ts similarity index 100% rename from packages/koenig-lexical/test/unit/hooks/useVisibilityToggle.test.js rename to packages/koenig-lexical/test/unit/hooks/useVisibilityToggle.test.ts diff --git a/packages/koenig-lexical/test/unit/productCard.test.js b/packages/koenig-lexical/test/unit/productCard.test.ts similarity index 100% rename from packages/koenig-lexical/test/unit/productCard.test.js rename to packages/koenig-lexical/test/unit/productCard.test.ts diff --git a/packages/koenig-lexical/test/unit/signupCard.test.js b/packages/koenig-lexical/test/unit/signupCard.test.ts similarity index 100% rename from packages/koenig-lexical/test/unit/signupCard.test.js rename to packages/koenig-lexical/test/unit/signupCard.test.ts diff --git a/packages/koenig-lexical/test/unit/toggleCard.test.js b/packages/koenig-lexical/test/unit/toggleCard.test.ts similarity index 100% rename from packages/koenig-lexical/test/unit/toggleCard.test.js rename to packages/koenig-lexical/test/unit/toggleCard.test.ts diff --git a/packages/koenig-lexical/test/unit/utils/generateEditorState.test.js b/packages/koenig-lexical/test/unit/utils/generateEditorState.test.ts similarity index 100% rename from packages/koenig-lexical/test/unit/utils/generateEditorState.test.js rename to packages/koenig-lexical/test/unit/utils/generateEditorState.test.ts diff --git a/packages/koenig-lexical/test/unit/utils/image-card-widths.test.js b/packages/koenig-lexical/test/unit/utils/image-card-widths.test.ts similarity index 100% rename from packages/koenig-lexical/test/unit/utils/image-card-widths.test.js rename to packages/koenig-lexical/test/unit/utils/image-card-widths.test.ts diff --git a/packages/koenig-lexical/test/unit/utils/sanitize-html.test.js b/packages/koenig-lexical/test/unit/utils/sanitize-html.test.ts similarity index 100% rename from packages/koenig-lexical/test/unit/utils/sanitize-html.test.js rename to packages/koenig-lexical/test/unit/utils/sanitize-html.test.ts diff --git a/packages/koenig-lexical/test/unit/utils/visibility.test.js b/packages/koenig-lexical/test/unit/utils/visibility.test.ts similarity index 100% rename from packages/koenig-lexical/test/unit/utils/visibility.test.js rename to packages/koenig-lexical/test/unit/utils/visibility.test.ts diff --git a/packages/koenig-lexical/test/utils/color-select-helper.js b/packages/koenig-lexical/test/utils/color-select-helper.ts similarity index 100% rename from packages/koenig-lexical/test/utils/color-select-helper.js rename to packages/koenig-lexical/test/utils/color-select-helper.ts diff --git a/packages/koenig-lexical/test/utils/e2e.js b/packages/koenig-lexical/test/utils/e2e.ts similarity index 100% rename from packages/koenig-lexical/test/utils/e2e.js rename to packages/koenig-lexical/test/utils/e2e.ts diff --git a/packages/koenig-lexical/test/utils/isTestEnv.js b/packages/koenig-lexical/test/utils/isTestEnv.ts similarity index 100% rename from packages/koenig-lexical/test/utils/isTestEnv.js rename to packages/koenig-lexical/test/utils/isTestEnv.ts diff --git a/packages/koenig-lexical/vite.config.demo.js b/packages/koenig-lexical/vite.config.demo.ts similarity index 100% rename from packages/koenig-lexical/vite.config.demo.js rename to packages/koenig-lexical/vite.config.demo.ts diff --git a/packages/koenig-lexical/vite.config.js b/packages/koenig-lexical/vite.config.ts similarity index 100% rename from packages/koenig-lexical/vite.config.js rename to packages/koenig-lexical/vite.config.ts From 0fc7c7bc5c70d7e067dd0b00e67edc64795c80b1 Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Mon, 16 Mar 2026 13:02:35 +0000 Subject: [PATCH 2/2] Migrate koenig-lexical to TypeScript MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Create tsconfig.json (strict, bundler moduleResolution, noEmit) - Rename all 328 source files (.js→.ts, .jsx→.tsx) - Rename all 71 test files (.js→.ts, .jsx→.tsx) - Add vite-env.d.ts for SVG and Vite type declarations - Rename vite.config.js/demo.js → .ts, playwright.config.js → .ts - Add type annotations to ~163 files (context, hooks, utils, components) - Replace .eslintrc.cjs with eslint.config.js (flat config) - Add typecheck script to package.json - tsc --noEmit passes with 0 errors Note: 165 files still have @ts-nocheck and need proper typing in a follow-up (PropTypes→interfaces, Lexical node types, etc.) --- packages/koenig-lexical/.storybook/main.ts | 3 + packages/koenig-lexical/demo/DemoApp.tsx | 265 ++++++---- .../koenig-lexical/demo/HtmlOutputDemo.tsx | 26 +- .../demo/RestrictedContentDemo.tsx | 32 +- .../demo/components/DarkModeToggle.tsx | 7 +- .../demo/components/EmailEditorWrapper.tsx | 4 +- .../demo/components/FloatingButton.tsx | 7 +- .../demo/components/InitialContentToggle.tsx | 9 +- .../demo/components/Navigator.tsx | 6 + .../components/SerializedStateTextarea.tsx | 2 +- .../demo/components/Sidebar.tsx | 8 +- .../demo/components/TitleTextBox.tsx | 24 +- .../demo/components/TreeView.tsx | 3 +- .../demo/components/Watermark.tsx | 4 +- .../demo/components/WordCount.tsx | 2 +- packages/koenig-lexical/demo/demo.tsx | 2 +- .../koenig-lexical/demo/utils/fetchEmbed.ts | 14 +- .../demo/utils/useFileUpload.ts | 48 +- .../koenig-lexical/demo/utils/useSnippets.ts | 19 +- packages/koenig-lexical/eslint.config.js | 106 ++-- packages/koenig-lexical/package.json | 12 +- packages/koenig-lexical/playwright.config.ts | 6 +- .../src/components/DesignSandbox.tsx | 18 +- .../src/components/KoenigCaptionEditor.tsx | 48 +- .../src/components/KoenigCardWrapper.tsx | 45 +- .../src/components/KoenigComposableEditor.tsx | 45 +- .../src/components/KoenigComposer.tsx | 67 ++- .../src/components/KoenigEditor.tsx | 10 +- .../src/components/KoenigErrorBoundary.tsx | 6 +- .../src/components/KoenigNestedComposer.tsx | 20 +- .../src/components/KoenigNestedEditor.tsx | 37 +- .../src/components/ui/ActionToolbar.tsx | 8 +- .../src/components/ui/AtLinkResultsPopup.tsx | 39 +- .../src/components/ui/AudioUploadForm.tsx | 13 +- .../components/ui/BackgroundImagePicker.tsx | 37 +- .../src/components/ui/Button.stories.tsx | 1 + .../src/components/ui/Button.tsx | 33 +- .../src/components/ui/ButtonGroup.stories.tsx | 1 + .../src/components/ui/ButtonGroup.tsx | 45 +- .../src/components/ui/CardCaptionEditor.tsx | 46 +- .../src/components/ui/CardMenu.stories.tsx | 1 + .../src/components/ui/CardMenu.tsx | 80 ++- .../components/ui/CardVisibilityMessage.tsx | 6 +- .../src/components/ui/CardWrapper.tsx | 47 +- .../src/components/ui/ColorOptionButtons.tsx | 31 +- .../src/components/ui/ColorPicker.stories.tsx | 1 + .../src/components/ui/ColorPicker.tsx | 72 ++- .../src/components/ui/Delayed.tsx | 7 +- .../src/components/ui/Dropdown.stories.tsx | 1 + .../src/components/ui/Dropdown.tsx | 32 +- .../src/components/ui/DropdownContainer.tsx | 18 +- .../src/components/ui/EditorPlaceholder.tsx | 7 +- .../src/components/ui/EmojiPicker.tsx | 15 +- .../src/components/ui/EmojiPickerPortal.tsx | 62 ++- .../src/components/ui/FileUploadForm.tsx | 12 +- .../components/ui/FloatingFormatToolbar.tsx | 31 +- .../src/components/ui/FloatingLinkToolbar.tsx | 48 +- .../src/components/ui/FloatingToolbar.tsx | 32 +- .../src/components/ui/FormatToolbar.tsx | 19 +- .../src/components/ui/HighlightedString.tsx | 9 +- .../src/components/ui/IconButton.stories.tsx | 1 + .../src/components/ui/IconButton.tsx | 10 +- .../src/components/ui/ImageUploadForm.tsx | 15 +- .../src/components/ui/ImageUploadSwatch.tsx | 8 +- .../src/components/ui/Input.stories.tsx | 1 + .../src/components/ui/Input.tsx | 14 +- .../src/components/ui/InputList.stories.tsx | 1 + .../src/components/ui/InputList.tsx | 84 +++- .../src/components/ui/KeyboardSelection.tsx | 25 +- .../ui/KeyboardSelectionWithGroups.tsx | 38 +- .../src/components/ui/LinkActionToolbar.tsx | 37 ++ .../ui/LinkActionToolbarWithSearch.tsx | 38 +- .../src/components/ui/LinkInput.stories.tsx | 1 + .../src/components/ui/LinkInput.tsx | 31 +- .../src/components/ui/LinkInputSearchItem.tsx | 20 +- .../ui/LinkInputWithSearch.stories.tsx | 1 + .../src/components/ui/LinkInputWithSearch.tsx | 45 +- .../src/components/ui/LinkToolbar.stories.tsx | 1 + .../src/components/ui/LinkToolbar.tsx | 8 +- .../ui/MediaPlaceholder.stories.tsx | 1 + .../src/components/ui/MediaPlaceholder.tsx | 42 +- .../src/components/ui/MediaPlayer.stories.tsx | 1 + .../src/components/ui/MediaPlayer.tsx | 14 +- .../src/components/ui/MediaUploader.tsx | 77 ++- .../src/components/ui/Modal.stories.tsx | 4 +- .../src/components/ui/Modal.tsx | 18 +- .../src/components/ui/MultiSelectDropdown.tsx | 50 +- .../src/components/ui/PlusMenu.stories.tsx | 1 + .../src/components/ui/PlusMenu.tsx | 13 +- .../src/components/ui/Portal.tsx | 11 +- .../src/components/ui/ProgressBar.stories.tsx | 1 + .../src/components/ui/ProgressBar.tsx | 15 +- .../components/ui/SettingsPanel.stories.tsx | 3 +- .../src/components/ui/SettingsPanel.tsx | 222 +++++++-- .../src/components/ui/SlashMenu.tsx | 8 +- .../src/components/ui/Slider.stories.tsx | 1 + .../src/components/ui/Slider.tsx | 18 +- .../components/ui/SnippetActionToolbar.tsx | 23 +- .../components/ui/SnippetInput.stories.tsx | 1 + .../src/components/ui/SnippetInput.tsx | 40 +- .../components/ui/SnippetInput/Dropdown.tsx | 30 +- .../src/components/ui/SnippetInput/Input.tsx | 9 +- .../src/components/ui/Spinner.tsx | 11 +- .../components/ui/SubscribeForm.stories.tsx | 1 + .../src/components/ui/SubscribeForm.tsx | 19 +- .../src/components/ui/TabView.tsx | 29 +- .../src/components/ui/TenorPlugin.tsx | 18 +- .../components/ui/TenorSelector.stories.tsx | 1 + .../src/components/ui/TenorSelector.tsx | 106 ++-- .../src/components/ui/TextInput.tsx | 20 + .../src/components/ui/Toggle.stories.tsx | 1 + .../src/components/ui/Toggle.tsx | 15 +- .../src/components/ui/ToolbarMenu.stories.tsx | 3 +- .../src/components/ui/ToolbarMenu.tsx | 30 +- .../components/ui/ToolbarMenuItem.stories.tsx | 1 + .../src/components/ui/Tooltip.tsx | 7 +- .../src/components/ui/UnsplashPlugin.tsx | 32 +- .../src/components/ui/UrlInput.stories.tsx | 1 + .../src/components/ui/UrlInput.tsx | 32 +- .../components/ui/UrlSearchInput.stories.tsx | 1 + .../src/components/ui/UrlSearchInput.tsx | 44 +- .../src/components/ui/VisibilitySettings.tsx | 19 +- .../components/ui/cards/AudioCard.stories.tsx | 1 + .../src/components/ui/cards/AudioCard.tsx | 170 +++---- .../ui/cards/BookmarkCard.stories.tsx | 1 + .../src/components/ui/cards/BookmarkCard.tsx | 84 ++-- .../ui/cards/ButtonCard.stories.tsx | 1 + .../src/components/ui/cards/ButtonCard.tsx | 38 +- .../ui/cards/CallToActionCard.stories.tsx | 1 + .../components/ui/cards/CallToActionCard.tsx | 105 ++-- .../ui/cards/CalloutCard.stories.tsx | 1 + .../src/components/ui/cards/CalloutCard.tsx | 55 +-- .../ui/cards/CodeBlockCard.stories.tsx | 1 + .../src/components/ui/cards/CodeBlockCard.tsx | 251 +++++++--- .../components/ui/cards/EmailCard.stories.tsx | 1 + .../src/components/ui/cards/EmailCard.tsx | 18 +- .../ui/cards/EmailCtaCard.stories.tsx | 1 + .../src/components/ui/cards/EmailCtaCard.tsx | 52 +- .../components/ui/cards/EmbedCard.stories.tsx | 1 + .../src/components/ui/cards/EmbedCard.tsx | 95 ++-- .../components/ui/cards/FileCard.stories.tsx | 1 + .../src/components/ui/cards/FileCard.tsx | 106 ++-- .../ui/cards/GalleryCard.stories.tsx | 1 + .../src/components/ui/cards/GalleryCard.tsx | 142 +++--- .../ui/cards/HeaderCard/v1/HeaderCard.tsx | 86 ++-- .../HeaderCard/v1/HeaderCard.v1.stories.tsx | 1 + .../ui/cards/HeaderCard/v2/HeaderCard.tsx | 156 +++--- .../HeaderCard/v2/HeaderCard.v2.stories.tsx | 1 + .../ui/cards/HorizontalRuleCard.stories.tsx | 1 + .../components/ui/cards/HtmlCard.stories.tsx | 1 + .../src/components/ui/cards/HtmlCard.tsx | 25 +- .../ui/cards/HtmlCard/HtmlEditor.tsx | 12 +- .../components/ui/cards/ImageCard.stories.tsx | 1 + .../src/components/ui/cards/ImageCard.tsx | 181 ++++--- .../ui/cards/MarkdownCard.stories.tsx | 1 + .../src/components/ui/cards/MarkdownCard.tsx | 25 +- .../ui/cards/MarkdownCard/MarkdownEditor.tsx | 66 ++- .../cards/MarkdownCard/MarkdownHelpDialog.tsx | 8 +- .../MarkdownCard/MarkdownImageUploader.tsx | 13 +- .../MarkdownCard/useMarkdownImageUploader.ts | 50 +- .../ui/cards/PaywallCard.stories.tsx | 1 + .../ui/cards/ProductCard.stories.tsx | 1 + .../src/components/ui/cards/ProductCard.tsx | 61 ++- .../ui/cards/ProductCard/ProductCardImage.tsx | 32 +- .../ui/cards/ProductCard/RatingButton.tsx | 9 +- .../ui/cards/SignupCard.stories.tsx | 1 + .../src/components/ui/cards/SignupCard.tsx | 154 +++--- .../ui/cards/ToggleCard.stories.tsx | 1 + .../src/components/ui/cards/ToggleCard.tsx | 28 +- .../components/ui/cards/TransistorCard.tsx | 38 ++ .../components/ui/cards/VideoCard.stories.tsx | 1 + .../src/components/ui/cards/VideoCard.tsx | 130 ++--- .../ui/file-selectors/Tenor/Error.tsx | 6 +- .../ui/file-selectors/Tenor/Gif.tsx | 25 +- .../ui/file-selectors/Tenor/Loader.tsx | 6 +- .../Unsplash/UnsplashButton.tsx | 15 +- .../Unsplash/UnsplashGallery.tsx | 41 +- .../file-selectors/Unsplash/UnsplashImage.tsx | 60 ++- .../Unsplash/UnsplashSelector.stories.tsx | 1 + .../Unsplash/UnsplashSelector.tsx | 16 +- .../Unsplash/UnsplashZoomed.tsx | 29 +- .../ui/file-selectors/UnsplashModal.tsx | 12 +- .../src/context/CardContext.tsx | 14 +- .../src/context/KoenigComposerContext.tsx | 74 ++- .../src/context/KoenigSelectedCardContext.tsx | 17 +- .../src/context/SharedHistoryContext.tsx | 9 +- .../src/context/SharedOnChangeContext.tsx | 9 +- .../koenig-lexical/src/context/TKContext.tsx | 44 +- .../src/hooks/useCardDragAndDrop.ts | 52 +- .../src/hooks/useClickOutside.ts | 6 +- .../src/hooks/useFileDragAndDrop.ts | 16 +- .../src/hooks/useGalleryReorder.ts | 97 ++-- .../src/hooks/useInputSelection.ts | 10 +- .../src/hooks/useKoenigTextEntity.ts | 63 ++- .../koenig-lexical/src/hooks/useMovable.ts | 163 +++--- .../src/hooks/usePinturaEditor.ts | 45 +- .../src/hooks/usePreviousFocus.ts | 12 +- .../src/hooks/useSearchLinks.ts | 57 ++- .../src/hooks/useSettingsPanelReposition.ts | 95 ++-- .../src/hooks/useTypeaheadTriggerMatch.ts | 10 +- .../src/hooks/useVisibilityToggle.ts | 30 +- packages/koenig-lexical/src/index.ts | 4 +- .../koenig-lexical/src/nodes/AsideNode.ts | 11 +- .../koenig-lexical/src/nodes/AudioNode.tsx | 20 +- .../src/nodes/AudioNodeComponent.tsx | 66 ++- .../koenig-lexical/src/nodes/BookmarkNode.tsx | 35 +- .../src/nodes/BookmarkNodeComponent.tsx | 68 ++- .../koenig-lexical/src/nodes/ButtonNode.tsx | 10 +- .../src/nodes/ButtonNodeComponent.tsx | 27 +- .../src/nodes/CallToActionNode.tsx | 73 ++- .../src/nodes/CallToActionNodeComponent.tsx | 118 +++-- .../koenig-lexical/src/nodes/CalloutNode.tsx | 17 +- .../src/nodes/CalloutNodeComponent.tsx | 38 +- .../src/nodes/CodeBlockNode.tsx | 21 +- .../src/nodes/CodeBlockNodeComponent.tsx | 28 +- .../koenig-lexical/src/nodes/EmailCtaNode.tsx | 33 +- .../src/nodes/EmailCtaNodeComponent.tsx | 56 ++- .../src/nodes/EmailEmbedNode.tsx | 2 +- .../koenig-lexical/src/nodes/EmailNode.tsx | 17 +- .../src/nodes/EmailNodeComponent.tsx | 13 +- .../koenig-lexical/src/nodes/EmbedNode.tsx | 33 +- .../src/nodes/EmbedNodeComponent.tsx | 53 +- .../koenig-lexical/src/nodes/FileNode.tsx | 26 +- .../src/nodes/FileNodeComponent.tsx | 48 +- .../koenig-lexical/src/nodes/GalleryNode.tsx | 30 +- .../src/nodes/GalleryNodeComponent.tsx | 51 +- .../koenig-lexical/src/nodes/HeaderNode.tsx | 120 +++-- .../src/nodes/HorizontalRuleNode.tsx | 4 +- .../koenig-lexical/src/nodes/HtmlNode.tsx | 10 +- .../src/nodes/HtmlNodeComponent.tsx | 22 +- .../koenig-lexical/src/nodes/ImageNode.tsx | 45 +- .../src/nodes/ImageNodeComponent.tsx | 101 ++-- .../koenig-lexical/src/nodes/MarkdownNode.tsx | 6 +- .../src/nodes/MarkdownNodeComponent.tsx | 18 +- .../koenig-lexical/src/nodes/PaywallNode.tsx | 4 +- .../koenig-lexical/src/nodes/ProductNode.tsx | 65 ++- .../src/nodes/ProductNodeComponent.tsx | 85 ++-- .../koenig-lexical/src/nodes/SignupNode.tsx | 93 ++-- .../src/nodes/SignupNodeComponent.tsx | 132 +++-- .../koenig-lexical/src/nodes/ToggleNode.tsx | 23 +- .../src/nodes/ToggleNodeComponent.tsx | 17 +- .../src/nodes/TransistorNode.tsx | 14 +- .../src/nodes/TransistorNodeComponent.tsx | 12 +- .../koenig-lexical/src/nodes/VideoNode.tsx | 50 +- .../src/nodes/VideoNodeComponent.tsx | 108 ++-- .../nodes/header/v1/HeaderNodeComponent.tsx | 72 ++- .../nodes/header/v2/HeaderNodeComponent.tsx | 143 ++++-- .../src/plugins/AtLinkPlugin.tsx | 83 ++-- .../src/plugins/AudioPlugin.tsx | 4 +- .../src/plugins/BookmarkPlugin.tsx | 2 +- .../src/plugins/ButtonPlugin.tsx | 2 +- .../src/plugins/CallToActionPlugin.tsx | 2 +- .../src/plugins/CalloutPlugin.tsx | 2 +- .../src/plugins/DragDropPastePlugin.tsx | 61 ++- .../src/plugins/DragDropReorderPlugin.tsx | 88 ++-- .../src/plugins/EmEnDashPlugin.tsx | 11 +- .../src/plugins/EmailCtaPlugin.tsx | 4 +- .../src/plugins/EmailPlugin.tsx | 2 +- .../src/plugins/EmbedPlugin.tsx | 2 +- .../src/plugins/EmojiPickerPlugin.tsx | 54 +- .../src/plugins/ExternalControlPlugin.tsx | 20 +- .../koenig-lexical/src/plugins/FilePlugin.tsx | 2 +- .../src/plugins/FloatingToolbarPlugin.tsx | 21 +- .../src/plugins/GalleryPlugin.tsx | 2 +- .../src/plugins/HeaderPlugin.tsx | 2 +- .../src/plugins/HorizontalRulePlugin.tsx | 7 +- .../src/plugins/HtmlOutputPlugin.tsx | 2 +- .../koenig-lexical/src/plugins/HtmlPlugin.tsx | 2 +- .../src/plugins/ImagePlugin.tsx | 6 +- .../src/plugins/KoenigBehaviourPlugin.tsx | 230 +++++---- .../src/plugins/KoenigBlurPlugin.tsx | 3 +- .../src/plugins/KoenigFocusPlugin.tsx | 3 +- .../src/plugins/KoenigNestedEditorPlugin.tsx | 35 +- .../src/plugins/KoenigSelectorPlugin.tsx | 10 +- .../src/plugins/KoenigSnippetPlugin.tsx | 8 +- .../src/plugins/MarkdownPastePlugin.tsx | 6 +- .../src/plugins/MarkdownPlugin.tsx | 2 +- .../src/plugins/MarkdownShortcutPlugin.tsx | 59 ++- .../src/plugins/PaywallPlugin.tsx | 7 +- .../src/plugins/PlusCardMenuPlugin.tsx | 69 +-- .../src/plugins/ProductPlugin.tsx | 2 +- .../src/plugins/ReplacementStringsPlugin.tsx | 16 +- .../src/plugins/RestrictContentPlugin.tsx | 16 +- .../src/plugins/SignupPlugin.tsx | 2 +- .../src/plugins/SlashCardMenuPlugin.tsx | 96 ++-- .../src/plugins/TKCountPlugin.tsx | 4 +- .../koenig-lexical/src/plugins/TKPlugin.tsx | 49 +- .../src/plugins/TogglePlugin.tsx | 2 +- .../src/plugins/TransistorPlugin.tsx | 2 +- .../src/plugins/VideoPlugin.tsx | 4 +- .../src/plugins/WordCountPlugin.tsx | 9 +- .../koenig-lexical/src/types/GalleryImage.ts | 10 + .../src/utils/$getSelectionRangeRect.ts | 3 +- .../src/utils/$insertAndSelectNode.ts | 3 +- .../src/utils/$isAtStartOfDocument.ts | 9 +- .../src/utils/$isAtTopOfNode.ts | 18 +- .../src/utils/$selectDecoratorNode.ts | 3 +- .../koenig-lexical/src/utils/analytics.ts | 18 +- .../src/utils/audioUploadHandler.ts | 17 +- .../src/utils/autoExpandTextArea.ts | 2 +- .../koenig-lexical/src/utils/buildCardMenu.ts | 60 ++- .../koenig-lexical/src/utils/dataSrcToFile.ts | 6 +- .../src/utils/draggable/DragDropContainer.ts | 101 ++-- .../src/utils/draggable/DragDropHandler.tsx | 290 ++++++----- .../src/utils/draggable/ScrollHandler.ts | 53 +- .../src/utils/draggable/draggable-utils.ts | 70 ++- .../src/utils/extractVideoMetadata.ts | 15 +- .../src/utils/fileUploadHandler.ts | 21 +- .../src/utils/generateEditorState.ts | 5 +- .../src/utils/getAudioMetadata.ts | 6 +- .../src/utils/getDOMRangeRect.ts | 8 +- .../src/utils/getEditorCardNodes.ts | 10 +- .../src/utils/getImageDimensions.ts | 2 +- .../src/utils/getImageFilenameFromSrc.ts | 4 +- .../src/utils/getScrollParent.ts | 10 +- .../src/utils/getSelectedNode.ts | 3 +- .../src/utils/getTopLevelNativeElement.ts | 15 +- .../src/utils/image-card-widths.ts | 9 +- .../src/utils/imageUploadHandler.ts | 29 +- .../koenig-lexical/src/utils/isEditorEmpty.ts | 5 +- packages/koenig-lexical/src/utils/isGif.ts | 2 +- .../koenig-lexical/src/utils/isInternalUrl.ts | 4 +- .../src/utils/nested-editors.ts | 19 +- .../src/utils/openFileSelection.ts | 2 +- .../src/utils/prettifyFileName.ts | 4 +- .../koenig-lexical/src/utils/sanitize-html.ts | 2 +- .../src/utils/services/tenor.ts | 85 ++-- .../src/utils/setFloatingElemPosition.ts | 19 +- .../src/utils/shouldIgnoreEvent.ts | 24 + .../storybook/populate-storybook-editor.ts | 5 +- .../src/utils/thumbnailUploadHandler.ts | 17 +- .../koenig-lexical/src/utils/visibility.ts | 52 +- packages/koenig-lexical/src/vite-env.d.ts | 9 + .../test/e2e/card-behaviour.test.ts | 57 ++- .../test/e2e/cards/audio-card.test.ts | 5 +- .../cards/bookmark-card-with-search.test.ts | 5 +- .../bookmark-card-without-search.test.ts | 3 +- .../test/e2e/cards/button-card.test.ts | 3 +- .../e2e/cards/call-to-action-card.test.ts | 25 +- .../test/e2e/cards/callout-card.test.ts | 3 +- .../test/e2e/cards/code-block-card.test.ts | 3 +- .../test/e2e/cards/email-card.test.ts | 11 +- .../test/e2e/cards/email-cta-card.test.ts | 5 +- .../test/e2e/cards/embed-card.test.ts | 5 +- .../test/e2e/cards/file-card.test.ts | 5 +- .../test/e2e/cards/gallery-card.test.ts | 5 +- .../test/e2e/cards/header-card.test.ts | 43 +- .../test/e2e/cards/html-card.test.ts | 3 +- .../test/e2e/cards/image-card.test.ts | 34 +- .../test/e2e/cards/markdown-card.test.ts | 3 +- .../test/e2e/cards/paywall-card.test.ts | 5 +- .../test/e2e/cards/product-card.test.ts | 5 +- .../test/e2e/cards/signup-card.test.ts | 7 +- .../test/e2e/cards/toggle-card.test.ts | 5 +- .../test/e2e/cards/transistor-card.test.ts | 3 +- .../test/e2e/cards/video-card.firefox.test.ts | 5 +- .../test/e2e/content-visibility.test.ts | 3 +- .../test/e2e/editors/basic-editor.test.ts | 3 +- .../test/e2e/editors/email-editor.test.ts | 3 +- .../test/e2e/editors/minimal-editor.test.ts | 3 +- .../test/e2e/floating-toolbar.test.ts | 3 +- .../test/e2e/format-shortcuts.test.ts | 3 +- .../koenig-lexical/test/e2e/linking.test.ts | 3 +- .../test/e2e/list-behaviour.test.ts | 5 +- .../test/e2e/modals/UnsplashSelector.test.ts | 5 +- .../test/e2e/node-transforms.test.ts | 3 +- .../test/e2e/paste-behaviour.test.ts | 3 +- .../DragDropPastePlugin.firefox.test.ts | 3 +- .../e2e/plugins/DragDropPastePlugin.test.ts | 3 +- .../e2e/plugins/EmojiPickerPlugin.test.ts | 3 +- .../test/e2e/plugins/HtmlOutputPlugin.test.ts | 7 +- .../e2e/plugins/KoenigSnippetPlugin.test.ts | 3 +- .../plugins/ReplacementStringsPlugin.test.ts | 3 +- .../e2e/plugins/RestrictContentPlugin.test.ts | 3 +- .../test/e2e/plugins/TKPlugin.test.ts | 7 +- .../test/e2e/plugins/WordCountPlugin.test.ts | 3 +- .../test/e2e/plus-button.test.ts | 31 +- .../koenig-lexical/test/e2e/selection.test.ts | 7 +- .../test/e2e/slash-menu.test.ts | 5 +- .../e2e/text-transforms/code-block.test.ts | 3 +- .../e2e/text-transforms/emdash-endash.test.ts | 9 +- .../test/e2e/text-transforms/headings.test.ts | 17 +- .../horizontal-line-rule.test.ts | 3 +- .../test/e2e/text-transforms/links.test.ts | 3 +- .../test/e2e/text-transforms/markdown.test.ts | 3 +- .../test/e2e/text-transforms/paywall.test.ts | 3 +- .../test/e2e/title-behaviour.test.ts | 49 +- .../test/e2e/utils/getImageDimensions.test.ts | 3 +- packages/koenig-lexical/test/types.d.ts | 20 + .../test/unit/KoenigComposer.test.tsx | 12 +- .../test/unit/buildCardMenu.test.ts | 28 +- .../test/unit/headerCardv2.test.ts | 15 +- .../unit/hooks/useVisibilityToggle.test.ts | 8 +- .../test/unit/productCard.test.ts | 15 +- .../test/unit/signupCard.test.ts | 17 +- .../test/unit/toggleCard.test.ts | 15 +- .../unit/utils/generateEditorState.test.ts | 7 +- .../test/unit/utils/image-card-widths.test.ts | 2 +- .../test/unit/utils/visibility.test.ts | 12 +- .../test/utils/color-select-helper.ts | 8 +- packages/koenig-lexical/test/utils/e2e.ts | 172 ++++--- packages/koenig-lexical/tsconfig.json | 21 + packages/koenig-lexical/vite.config.demo.ts | 7 +- packages/koenig-lexical/vite.config.ts | 11 +- yarn.lock | 466 +++++++++++++++--- 405 files changed, 7420 insertions(+), 4256 deletions(-) create mode 100644 packages/koenig-lexical/src/components/ui/LinkActionToolbar.tsx create mode 100644 packages/koenig-lexical/src/components/ui/TextInput.tsx create mode 100644 packages/koenig-lexical/src/components/ui/cards/TransistorCard.tsx create mode 100644 packages/koenig-lexical/src/types/GalleryImage.ts create mode 100644 packages/koenig-lexical/src/utils/shouldIgnoreEvent.ts create mode 100644 packages/koenig-lexical/src/vite-env.d.ts create mode 100644 packages/koenig-lexical/test/types.d.ts create mode 100644 packages/koenig-lexical/tsconfig.json diff --git a/packages/koenig-lexical/.storybook/main.ts b/packages/koenig-lexical/.storybook/main.ts index 00c4f1604c..d552cce75e 100644 --- a/packages/koenig-lexical/.storybook/main.ts +++ b/packages/koenig-lexical/.storybook/main.ts @@ -1,7 +1,10 @@ import { dirname, join } from "path"; +import { createRequire } from "module"; import { mergeConfig } from 'vite'; import type {StorybookConfig} from '@storybook/react-vite'; +const require = createRequire(import.meta.url); + const config: StorybookConfig = { framework: { name: getAbsolutePath("@storybook/react-vite"), diff --git a/packages/koenig-lexical/demo/DemoApp.tsx b/packages/koenig-lexical/demo/DemoApp.tsx index 97376bcf74..f2f8a6f7ff 100644 --- a/packages/koenig-lexical/demo/DemoApp.tsx +++ b/packages/koenig-lexical/demo/DemoApp.tsx @@ -6,19 +6,23 @@ import InitialContentToggle from './components/InitialContentToggle'; import LockIcon from './assets/icons/kg-lock.svg?react'; import React, {useState} from 'react'; import Sidebar from './components/Sidebar'; -import TitleTextBox from './components/TitleTextBox'; +import TitleTextBox, {type TitleTextBoxHandle} from './components/TitleTextBox'; import Watermark from './components/Watermark'; import WordCount from './components/WordCount'; import basicContent from './content/basic-content.json'; import content from './content/content.json'; import emailContent from './content/email-content.json'; import minimalContent from './content/minimal-content.json'; -import {$getRoot, $isDecoratorNode} from 'lexical'; +import {$getRoot, $isDecoratorNode, type Klass, type LexicalNode, type LexicalNodeReplacement} from 'lexical'; import { - BASIC_NODES, BASIC_TRANSFORMERS, EmailEditor, - KoenigComposableEditor, KoenigComposer, KoenigEditor, MINIMAL_NODES, - MINIMAL_TRANSFORMERS, RestrictContentPlugin, TKCountPlugin, WordCountPlugin + BASIC_NODES, BASIC_TRANSFORMERS, BookmarkPlugin, + ButtonPlugin, CallToActionPlugin, CalloutPlugin, CardMenuPlugin, EMAIL_EDITOR_NODES, + EMAIL_TRANSFORMERS, EmEnDashPlugin, EmailCtaPlugin, EmbedPlugin, EmojiPickerPlugin, + HorizontalRulePlugin, HtmlPlugin, ImagePlugin, + KoenigComposableEditor, KoenigComposer, KoenigEditor, KoenigSelectorPlugin, KoenigSnippetPlugin, ListPlugin, MINIMAL_NODES, + MINIMAL_TRANSFORMERS, ProductPlugin, ReplacementStringsPlugin, RestrictContentPlugin, TKCountPlugin, WordCountPlugin } from '../src'; +import {VISIBILITY_SETTINGS} from '../src/utils/visibility'; import {defaultHeaders as defaultUnsplashHeaders} from './utils/unsplashConfig'; import {fetchEmbed} from './utils/fetchEmbed'; import {fileTypes, useFileUpload} from './utils/useFileUpload'; @@ -33,7 +37,7 @@ const WEBSOCKET_ID = params.get('multiplayerId') || '0'; // show deprecated cards by default so they can be tested, unless explicitly hidden // so we can test they are removed from the menu when deprecated/behind a feature flag -function hideDeprecatedCardInMenu(searchParams) { +function hideDeprecatedCardInMenu(searchParams: URLSearchParams) { // allow tests to opt in to hiding deprecated cards if (searchParams.get('hideDeprecatedCards') === 'true') { return true; @@ -62,7 +66,7 @@ const defaultCardConfig = { transistor: false }, // this enables the internal linking feature, can be disabled with `/#/?searchLinks=false` - searchLinks: async (term) => { + searchLinks: async (term: string) => { // default to showing latest posts when search is empty // no delay to simulate posts being pre-loaded in editor if (!term) { @@ -110,7 +114,7 @@ const defaultCardConfig = { } }; -function getDefaultContent({editorType}) { +function getDefaultContent({editorType}: {editorType?: string}) { if (editorType === 'basic') { return basicContent; } else if (editorType === 'minimal') { @@ -121,16 +125,38 @@ function getDefaultContent({editorType}) { return content; } -function getAllowedNodes({editorType}) { +function getAllowedNodes({editorType}: {editorType?: string}): ReadonlyArray | LexicalNodeReplacement> | undefined { if (editorType === 'basic') { - return BASIC_NODES; + return BASIC_NODES as ReadonlyArray | LexicalNodeReplacement>; } else if (editorType === 'minimal') { - return MINIMAL_NODES; + return MINIMAL_NODES as ReadonlyArray | LexicalNodeReplacement>; + } else if (editorType === 'email') { + return EMAIL_EDITOR_NODES as ReadonlyArray | LexicalNodeReplacement>; } return undefined; } -function DemoEditor({editorType, registerAPI, cursorDidExitAtTop, darkMode, setWordCount, setTKCount}) { +interface DemoEditorAPI { + editorInstance: unknown; + editorIsEmpty: () => boolean; + insertParagraphAtTop: (options: {focus: boolean}) => void; + insertParagraphAtBottom: () => void; + focusEditor: (options: {position: string}) => void; + insertFiles: (files: File[]) => void; + serialize: () => string; + [key: string]: unknown; +} + +interface DemoEditorProps { + editorType?: string; + registerAPI: (api: unknown) => void; + cursorDidExitAtTop: () => void; + darkMode: boolean; + setWordCount: (count: number) => void; + setTKCount: (count: number) => void; +} + +function DemoEditor({editorType, registerAPI, cursorDidExitAtTop, darkMode, setWordCount, setTKCount}: DemoEditorProps) { if (editorType === 'basic') { return ( ); + } else if (editorType === 'email') { + return ( + + + + + + + + + + + + + + + + + + + + + ); } return ( @@ -167,7 +221,14 @@ function DemoEditor({editorType, registerAPI, cursorDidExitAtTop, darkMode, setW ); } -function DemoComposer({editorType, isMultiplayer, setWordCount, setTKCount}) { +interface DemoComposerProps { + editorType?: string; + isMultiplayer?: boolean; + setWordCount: (count: number) => void; + setTKCount: (count: number) => void; +} + +function DemoComposer({editorType, isMultiplayer, setWordCount, setTKCount}: DemoComposerProps) { const [searchParams, setSearchParams] = useSearchParams(); const [isSidebarOpen, setIsSidebarOpen] = useState(false); const [sidebarView, setSidebarView] = useState('json'); @@ -195,9 +256,9 @@ function DemoComposer({editorType, isMultiplayer, setWordCount, setTKCount}) { }, [isMultiplayer, contentParam, defaultContent]); const [title, setTitle] = useState(initialContent ? 'Meet the Koenig editor.' : ''); - const [editorAPI, setEditorAPI] = useState(null); - const titleRef = React.useRef(null); - const containerRef = React.useRef(null); + const [editorAPI, setEditorAPI] = useState(null); + const titleRef = React.useRef(null); + const containerRef = React.useRef(null); function openSidebar(view = 'json') { if (isSidebarOpen && sidebarView === view) { @@ -215,27 +276,29 @@ function DemoComposer({editorType, isMultiplayer, setWordCount, setTKCount}) { // mouseup/click event can occur outside of the initially clicked node, in // which case we don't want to then "re-focus" the editor and cause unexpected // selection changes - function maybeSkipFocusEditor(event) { - const clickedOnDecorator = (event.target.closest('[data-lexical-decorator]') !== null) || event.target.hasAttribute('data-lexical-decorator'); - const clickedOnSlashMenu = (event.target.closest('[data-kg-slash-menu]') !== null) || event.target.hasAttribute('data-kg-slash-menu'); - const clickedOnPortal = (event.target.closest('[data-kg-portal]') !== null) || event.target.hasAttribute('data-kg-portal'); + function maybeSkipFocusEditor(event: React.MouseEvent) { + const target = event.target as HTMLElement; + const clickedOnDecorator = (target.closest('[data-lexical-decorator]') !== null) || target.hasAttribute('data-lexical-decorator'); + const clickedOnSlashMenu = (target.closest('[data-kg-slash-menu]') !== null) || target.hasAttribute('data-kg-slash-menu'); + const clickedOnPortal = (target.closest('[data-kg-portal]') !== null) || target.hasAttribute('data-kg-portal'); if (clickedOnDecorator || clickedOnSlashMenu || clickedOnPortal) { skipFocusEditor.current = true; } } - function focusEditor(event) { - const clickedOnDecorator = (event.target.closest('[data-lexical-decorator]') !== null) || event.target.hasAttribute('data-lexical-decorator'); - const clickedOnSlashMenu = (event.target.closest('[data-kg-slash-menu]') !== null) || event.target.hasAttribute('data-kg-slash-menu'); - const clickedOnPortal = (event.target.closest('[data-kg-portal]') !== null) || event.target.hasAttribute('data-kg-portal'); + function focusEditor(event: React.MouseEvent) { + const target = event.target as HTMLElement; + const clickedOnDecorator = (target.closest('[data-lexical-decorator]') !== null) || target.hasAttribute('data-lexical-decorator'); + const clickedOnSlashMenu = (target.closest('[data-kg-slash-menu]') !== null) || target.hasAttribute('data-kg-slash-menu'); + const clickedOnPortal = (target.closest('[data-kg-portal]') !== null) || target.hasAttribute('data-kg-portal'); if (!skipFocusEditor.current && editorAPI && !clickedOnDecorator && !clickedOnSlashMenu && !clickedOnPortal) { - let editor = editorAPI.editorInstance; + const editor = editorAPI.editorInstance as {_rootElement: HTMLElement; getEditorState: () => {read: (fn: () => void) => void}}; // if a mousedown and subsequent mouseup occurs below the editor // canvas, focus the editor and put the cursor at the end of the document - let {bottom} = editor._rootElement.getBoundingClientRect(); + const {bottom} = editor._rootElement.getBoundingClientRect(); if (event.pageY > bottom && event.clientY > bottom) { event.preventDefault(); @@ -261,7 +324,7 @@ function DemoComposer({editorType, isMultiplayer, setWordCount, setTKCount}) { editorAPI.focusEditor({position: 'bottom'}); //scroll to the bottom of the container - containerRef.current.scrollTop = containerRef.current.scrollHeight; + containerRef.current!.scrollTop = containerRef.current!.scrollHeight; } } @@ -278,19 +341,19 @@ function DemoComposer({editorType, isMultiplayer, setWordCount, setTKCount}) { } function saveContent() { - const serializedState = editorAPI.serialize(); + const serializedState = editorAPI!.serialize(); const encodedContent = encodeURIComponent(serializedState); searchParams.set('content', encodedContent); setSearchParams(searchParams); } React.useEffect(() => { - const handleFileDrag = (event) => { + const handleFileDrag = (event: DragEvent) => { event.preventDefault(); }; - const handleFileDrop = (event) => { - if (event.dataTransfer.files.length > 0) { + const handleFileDrop = (event: DragEvent) => { + if (event.dataTransfer && event.dataTransfer.files.length > 0) { event.preventDefault(); editorAPI?.insertFiles(Array.from(event.dataTransfer.files)); } @@ -305,7 +368,7 @@ function DemoComposer({editorType, isMultiplayer, setWordCount, setTKCount}) { }; }, [editorAPI]); - const showTitle = !isMultiplayer && !['basic', 'minimal', 'email'].includes(editorType); + const showTitle = !isMultiplayer && !['basic', 'minimal', 'email'].includes(editorType || ''); const isEmailEditor = editorType === 'email'; const cardConfig = { @@ -323,99 +386,85 @@ function DemoComposer({editorType, isMultiplayer, setWordCount, setTKCount}) { deprecated: { headerV1: hideDeprecatedCardInMenu(searchParams), emailCta: hideDeprecatedCardInMenu(searchParams) - } + }, + ...(isEmailEditor ? { + image: { + ...((defaultCardConfig as Record).image as Record || {}), + allowedWidths: ['regular'] + }, + visibilitySettings: VISIBILITY_SETTINGS.EMAIL_ONLY + } : {}) }; - const fileUploader = {useFileUpload: useFileUpload({isMultiplayer}), fileTypes}; - - // Sidebar uses useLexicalComposerContext so it must be inside a KoenigComposer. - // The email editor manages its own composer, so the sidebar is only available - // for non-email editor types. - const demoChrome = ( - <> - - {!isEmailEditor && ( -
- - -
- )} - - ); - - const demoLayout = (children) => ( -
- { - !isMultiplayer && !isEmailEditor && contentParam !== 'false' - ? - : null - } - -
-
- {showTitle - ? - : null - } - {children} -
-
-
- ); - - // Email editor includes its own KoenigComposer, so it renders outside the shared one - if (isEmailEditor) { - return ( - <> - {demoLayout( - - - - - - )} - {demoChrome} - - ); - } - return ( - {demoLayout( - - )} - {demoChrome} +
+ { + !isMultiplayer + ? + : null + } + +
+
+ {showTitle + ? + : null + } + {editorType === 'email' ? ( + + void} + setTKCount={setTKCount} + setWordCount={setWordCount} + /> + + ) : ( + void} + setTKCount={setTKCount} + setWordCount={setWordCount} + /> + )} +
+
+
+ +
+ + +
); } const MemoizedDemoComposer = React.memo(DemoComposer); -function DemoApp({editorType, isMultiplayer}) { +interface DemoAppProps { + editorType?: string; + isMultiplayer?: boolean; + introContent?: boolean; +} + +function DemoApp({editorType, isMultiplayer}: DemoAppProps) { const [wordCount, setWordCount] = useState(0); const [tkCount, setTKCount] = useState(0); diff --git a/packages/koenig-lexical/demo/HtmlOutputDemo.tsx b/packages/koenig-lexical/demo/HtmlOutputDemo.tsx index 547f9998e3..cce8a121c4 100644 --- a/packages/koenig-lexical/demo/HtmlOutputDemo.tsx +++ b/packages/koenig-lexical/demo/HtmlOutputDemo.tsx @@ -20,9 +20,14 @@ function HtmlOutputDemo() { const [html, setHtml] = useState('

check ghost.org/changelog/markdown/

'); const [sidebarView, setSidebarView] = useState('json'); const [defaultContent] = useState(undefined); - const [editorAPI, setEditorAPI] = useState(null); - const titleRef = React.useRef(null); - const containerRef = React.useRef(null); + const [editorAPI, setEditorAPI] = useState<{ + editorInstance: unknown; + insertParagraphAtBottom: () => void; + focusEditor: (options: {position: string}) => void; + [key: string]: unknown; + } | null>(null); + const titleRef = React.useRef<{focus: () => void} | null>(null); + const containerRef = React.useRef(null); const {snippets, createSnippet, deleteSnippet} = useSnippets(); function openSidebar(view = 'json') { @@ -37,13 +42,14 @@ function HtmlOutputDemo() { titleRef.current?.focus(); } - function focusEditor(event) { - const clickedOnDecorator = (event.target.closest('[data-lexical-decorator]') !== null) || event.target.hasAttribute('data-lexical-decorator'); - const clickedOnSlashMenu = (event.target.closest('[data-kg-slash-menu]') !== null) || event.target.hasAttribute('data-kg-slash-menu'); + function focusEditor(event: React.MouseEvent) { + const target = event.target as HTMLElement; + const clickedOnDecorator = (target.closest('[data-lexical-decorator]') !== null) || target.hasAttribute('data-lexical-decorator'); + const clickedOnSlashMenu = (target.closest('[data-kg-slash-menu]') !== null) || target.hasAttribute('data-kg-slash-menu'); if (editorAPI && !clickedOnDecorator && !clickedOnSlashMenu) { - let editor = editorAPI.editorInstance; - let {bottom} = editor._rootElement.getBoundingClientRect(); + const editor = editorAPI.editorInstance as {_rootElement: HTMLElement; getEditorState: () => {read: (fn: () => void) => void}}; + const {bottom} = editor._rootElement.getBoundingClientRect(); // if a mousedown and subsequent mouseup occurs below the editor // canvas, focus the editor and put the cursor at the end of the document @@ -72,7 +78,7 @@ function HtmlOutputDemo() { editorAPI.focusEditor({position: 'bottom'}); //scroll to the bottom of the container - containerRef.current.scrollTop = containerRef.current.scrollHeight; + containerRef.current!.scrollTop = containerRef.current!.scrollHeight; } } } @@ -93,7 +99,7 @@ function HtmlOutputDemo() {
void} > diff --git a/packages/koenig-lexical/demo/RestrictedContentDemo.tsx b/packages/koenig-lexical/demo/RestrictedContentDemo.tsx index 6002645a4c..77626a6b11 100644 --- a/packages/koenig-lexical/demo/RestrictedContentDemo.tsx +++ b/packages/koenig-lexical/demo/RestrictedContentDemo.tsx @@ -22,15 +22,20 @@ function useQuery() { return React.useMemo(() => new URLSearchParams(search), [search]); } -function RestrictedContentDemo() { - let query = useQuery(); +function RestrictedContentDemo(_props: {paragraphs?: number}) { + const query = useQuery(); const [isSidebarOpen, setIsSidebarOpen] = useState(false); const [sidebarView, setSidebarView] = useState('json'); const [defaultContent] = useState(undefined); - const [editorAPI, setEditorAPI] = useState(null); - const titleRef = React.useRef(null); - const containerRef = React.useRef(null); - const paragraphs = query.get('paragraphs') || 1; + const [editorAPI, setEditorAPI] = useState<{ + editorInstance: unknown; + insertParagraphAtBottom: () => void; + focusEditor: (options: {position: string}) => void; + [key: string]: unknown; + } | null>(null); + const titleRef = React.useRef<{focus: () => void} | null>(null); + const containerRef = React.useRef(null); + const paragraphs = Number(query.get('paragraphs')) || 1; const {snippets, createSnippet, deleteSnippet} = useSnippets(); function openSidebar(view = 'json') { @@ -45,13 +50,14 @@ function RestrictedContentDemo() { titleRef.current?.focus(); } - function focusEditor(event) { - const clickedOnDecorator = (event.target.closest('[data-lexical-decorator]') !== null) || event.target.hasAttribute('data-lexical-decorator'); - const clickedOnSlashMenu = (event.target.closest('[data-kg-slash-menu]') !== null) || event.target.hasAttribute('data-kg-slash-menu'); + function focusEditor(event: React.MouseEvent) { + const target = event.target as HTMLElement; + const clickedOnDecorator = (target.closest('[data-lexical-decorator]') !== null) || target.hasAttribute('data-lexical-decorator'); + const clickedOnSlashMenu = (target.closest('[data-kg-slash-menu]') !== null) || target.hasAttribute('data-kg-slash-menu'); if (editorAPI && !clickedOnDecorator && !clickedOnSlashMenu) { - let editor = editorAPI.editorInstance; - let {bottom} = editor._rootElement.getBoundingClientRect(); + const editor = editorAPI.editorInstance as {_rootElement: HTMLElement; getEditorState: () => {read: (fn: () => void) => void}}; + const {bottom} = editor._rootElement.getBoundingClientRect(); // if a mousedown and subsequent mouseup occurs below the editor // canvas, focus the editor and put the cursor at the end of the document @@ -80,7 +86,7 @@ function RestrictedContentDemo() { editorAPI.focusEditor({position: 'bottom'}); //scroll to the bottom of the container - containerRef.current.scrollTop = containerRef.current.scrollHeight; + containerRef.current!.scrollTop = containerRef.current!.scrollHeight; } } } @@ -99,7 +105,7 @@ function RestrictedContentDemo() {
void} > diff --git a/packages/koenig-lexical/demo/components/DarkModeToggle.tsx b/packages/koenig-lexical/demo/components/DarkModeToggle.tsx index cb39d8eaba..48833e77c8 100644 --- a/packages/koenig-lexical/demo/components/DarkModeToggle.tsx +++ b/packages/koenig-lexical/demo/components/DarkModeToggle.tsx @@ -1,4 +1,9 @@ -const DarkModeToggle = ({darkMode, toggleDarkMode}) => { +interface DarkModeToggleProps { + darkMode: boolean; + toggleDarkMode: () => void; +} + +const DarkModeToggle = ({darkMode, toggleDarkMode}: DarkModeToggleProps) => { return ( <>
); } else if (IndicatorIcon) { + const Icon = IndicatorIcon as React.ComponentType>; indicatorIcon = (
- @@ -99,21 +115,10 @@ export const CardWrapper = React.forwardRef(({ data-kg-card-selected={isSelected} {...props} > - {children} + {children as React.ReactNode}
); }); CardWrapper.displayName = 'CardWrapper'; - -CardWrapper.propTypes = { - isSelected: PropTypes.bool, - isEditing: PropTypes.bool, - cardWidth: PropTypes.oneOf(['regular', 'wide', 'full']), - icon: PropTypes.string, - indicatorPosition: PropTypes.shape({ - left: PropTypes.string, - top: PropTypes.string - }) -}; diff --git a/packages/koenig-lexical/src/components/ui/ColorOptionButtons.tsx b/packages/koenig-lexical/src/components/ui/ColorOptionButtons.tsx index c1794512ce..342dfc2405 100644 --- a/packages/koenig-lexical/src/components/ui/ColorOptionButtons.tsx +++ b/packages/koenig-lexical/src/components/ui/ColorOptionButtons.tsx @@ -4,9 +4,21 @@ import {Tooltip} from './Tooltip'; import {useClickOutside} from '../../hooks/useClickOutside'; import {usePreviousFocus} from '../../hooks/usePreviousFocus'; -export function ColorOptionButtons({buttons = [], selectedName, onClick}) { +interface ColorOptionButton { + label: string; + name: string; + color?: string; +} + +interface ColorOptionButtonsProps { + buttons?: ColorOptionButton[]; + selectedName?: string; + onClick: (name: string) => void; +} + +export function ColorOptionButtons({buttons = [], selectedName, onClick}: ColorOptionButtonsProps) { const [isOpen, setIsOpen] = useState(false); - const componentRef = React.useRef(null); + const componentRef = React.useRef(null); const selectedButton = buttons.find(button => button.name === selectedName); @@ -49,13 +61,13 @@ export function ColorOptionButtons({buttons = [], selectedName, onClick}) { label={label} name={name} selectedName={selectedName} - onClick={(title) => { + onClick={(title: string) => { onClick(title); setIsOpen(false); }} /> : -
  • onClick(name)}> +
  • onClick(name)}> @@ -69,7 +81,16 @@ export function ColorOptionButtons({buttons = [], selectedName, onClick}) { ); } -export function ColorButton({onClick, label, name, color, selectedName}) { +interface ColorButtonProps { + onClick: (name: string) => void; + label: string; + name: string; + color?: string; + selectedName?: string; + [key: string]: unknown; +} + +export function ColorButton({onClick, label, name, color, selectedName}: ColorButtonProps) { const isActive = name === selectedName; const {handleMousedown, handleClick} = usePreviousFocus(onClick, name); diff --git a/packages/koenig-lexical/src/components/ui/ColorPicker.stories.tsx b/packages/koenig-lexical/src/components/ui/ColorPicker.stories.tsx index b6bacf0b41..6ebab91f29 100644 --- a/packages/koenig-lexical/src/components/ui/ColorPicker.stories.tsx +++ b/packages/koenig-lexical/src/components/ui/ColorPicker.stories.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import {ColorPicker} from './ColorPicker'; const story = { diff --git a/packages/koenig-lexical/src/components/ui/ColorPicker.tsx b/packages/koenig-lexical/src/components/ui/ColorPicker.tsx index e10e658f80..c4b13d66ff 100644 --- a/packages/koenig-lexical/src/components/ui/ColorPicker.tsx +++ b/packages/koenig-lexical/src/components/ui/ColorPicker.tsx @@ -8,11 +8,19 @@ import {Tooltip} from './Tooltip'; import {getAccentColor} from '../../utils/getAccentColor'; import {useClickOutside} from '../../hooks/useClickOutside'; -export function ColorPicker({value, eyedropper, hasTransparentOption, onChange, children}) { +interface ColorPickerProps { + value?: string; + eyedropper?: boolean; + hasTransparentOption?: boolean; + onChange: (color: string) => void; + children?: React.ReactNode; +} + +export function ColorPicker({value, eyedropper, hasTransparentOption, onChange, children}: ColorPickerProps) { // HexColorInput doesn't support adding a ref on the input itself - const inputWrapperRef = useRef(null); + const inputWrapperRef = useRef(null); - const stopPropagation = useCallback((e) => { + const stopPropagation = useCallback((e: React.MouseEvent | React.TouchEvent) => { e.stopPropagation(); const inputElement = inputWrapperRef.current?.querySelector('input'); @@ -46,15 +54,15 @@ export function ColorPicker({value, eyedropper, hasTransparentOption, onChange, document.addEventListener('touchend', stopUsingColorPicker); }, [stopUsingColorPicker]); - const openColorPicker = useCallback((e) => { + const openColorPicker = useCallback((e: React.MouseEvent) => { e.preventDefault(); isUsingColorPicker.current = true; document.body.style.setProperty('pointer-events', 'none'); - const eyeDropper = new window.EyeDropper(); + const eyeDropper = new (window as unknown as {EyeDropper: new () => {open: () => Promise<{sRGBHex: string}>}}).EyeDropper(); eyeDropper.open() - .then(result => onChange(result.sRGBHex)) + .then((result: {sRGBHex: string}) => onChange(result.sRGBHex)) .finally(() => { isUsingColorPicker.current = false; document.body.style.removeProperty('pointer-events'); @@ -73,7 +81,7 @@ export function ColorPicker({value, eyedropper, hasTransparentOption, onChange, hexValue = ''; } - const focusHexInputOnClick = useCallback((e) => { + const focusHexInputOnClick = useCallback(() => { inputWrapperRef.current?.querySelector('input')?.focus(); }, []); @@ -84,7 +92,7 @@ export function ColorPicker({value, eyedropper, hasTransparentOption, onChange,
    # - {eyedropper && !!window.EyeDropper && ( + {eyedropper && !!(window as unknown as {EyeDropper?: unknown}).EyeDropper && ( @@ -85,7 +90,3 @@ export function LinkInput({href, update, cancel}) {
    ); } - -LinkInput.propTypes = { - href: PropTypes.string -}; diff --git a/packages/koenig-lexical/src/components/ui/LinkInputSearchItem.tsx b/packages/koenig-lexical/src/components/ui/LinkInputSearchItem.tsx index d8157223f5..f6197b4565 100644 --- a/packages/koenig-lexical/src/components/ui/LinkInputSearchItem.tsx +++ b/packages/koenig-lexical/src/components/ui/LinkInputSearchItem.tsx @@ -1,7 +1,25 @@ import {HighlightedString} from './HighlightedString'; import {InputListItem} from './InputList'; -export function LinkInputSearchItem({dataTestId, item, highlightString, selected, onMouseOver, scrollIntoView, onClick}) { +interface LinkInputSearchItemProps { + dataTestId?: string; + item: { + Icon?: React.ComponentType>; + label: string; + highlight?: boolean; + metaText?: string; + MetaIcon?: React.ComponentType>; + metaIconTitle?: string; + [key: string]: unknown; + }; + highlightString?: string; + selected?: boolean; + onMouseOver?: () => void; + scrollIntoView?: boolean; + onClick?: () => void; +} + +export function LinkInputSearchItem({dataTestId, item, highlightString, selected, onMouseOver, scrollIntoView, onClick}: LinkInputSearchItemProps) { return ( void; + cancel: () => void; +} + +export function LinkInputWithSearch({href, update, cancel}: LinkInputWithSearchProps) { const {cardConfig: {searchLinks}} = React.useContext(KoenigComposerContext); // store the href/query in state so we can update it without affecting the saved editor value const [_href, setHref] = React.useState(href); - const {isSearching, listOptions} = useSearchLinks(_href, searchLinks); + const {isSearching, listOptions} = useSearchLinks(_href || '', searchLinks as (term?: string) => Promise); // add refs for input and container - const containerRef = React.useRef(null); + const containerRef = React.useRef(null); const testId = 'link-input'; @@ -32,13 +37,13 @@ export function LinkInputWithSearch({href, update, cancel}) { // close link input when clicking outside or pressing escape React.useEffect(() => { - const closeOnClickOutside = (event) => { - if (containerRef.current && !containerRef.current.contains(event.target)) { + const closeOnClickOutside = (event: MouseEvent) => { + if (containerRef.current && !containerRef.current.contains(event.target as Node)) { cancel(); } }; - const onEscape = (event) => { + const onEscape = (event: KeyboardEvent) => { if (event.key === 'Escape') { cancel(); } @@ -53,11 +58,11 @@ export function LinkInputWithSearch({href, update, cancel}) { }; }, [cancel]); - const onItemSelected = (item) => { + const onItemSelected = (item: {value: string; type?: string}) => { update(item.value, item.type); }; - const getItem = (item, selected, onMouseOver, scrollIntoView) => { + const getItem = (item: {value: string; label: string; [key: string]: unknown}, selected: boolean, onMouseOver: () => void, scrollIntoView: boolean) => { return ( void} onMouseOver={onMouseOver} /> ); }; - const getGroup = (group, {showSpinner} = {}) => { + const getGroup = (group: unknown, {showSpinner}: {showSpinner?: boolean} = {}) => { return ( - + ); }; @@ -90,16 +95,16 @@ export function LinkInputWithSearch({href, update, cancel}) { placeholder="Search or enter URL to link" value={_href} data-kg-link-input - onChange={(e) => { + onChange={(e: React.ChangeEvent) => { // update local value to allow searching setHref(e.target.value); }} - onKeyDown={(e) => { + onKeyDown={(e: React.KeyboardEvent) => { if (e.key === 'Enter') { // prevent Enter from triggering in the editor and removing text // update the link value in the editor e.preventDefault(); - update(_href); + update(_href || ''); return; } }} @@ -109,11 +114,11 @@ export function LinkInputWithSearch({href, update, cancel}) {
      {isSearching && !listOptions.length && } React.ReactNode} + getItem={getItem as (item: unknown, selected: boolean, onMouseOver: () => void, scrollIntoView: boolean) => React.ReactNode} groups={listOptions} isLoading={isSearching} - onSelect={onItemSelected} + onSelect={onItemSelected as (item: unknown) => void} />
    @@ -121,7 +126,3 @@ export function LinkInputWithSearch({href, update, cancel}) {
    • ); } - -LinkInputWithSearch.propTypes = { - href: PropTypes.string -}; diff --git a/packages/koenig-lexical/src/components/ui/LinkToolbar.stories.tsx b/packages/koenig-lexical/src/components/ui/LinkToolbar.stories.tsx index b6e779ac62..4b5356d8b1 100644 --- a/packages/koenig-lexical/src/components/ui/LinkToolbar.stories.tsx +++ b/packages/koenig-lexical/src/components/ui/LinkToolbar.stories.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import {LinkToolbar} from './LinkToolbar'; const story = { diff --git a/packages/koenig-lexical/src/components/ui/LinkToolbar.tsx b/packages/koenig-lexical/src/components/ui/LinkToolbar.tsx index e3aa8c4fe0..11c238973d 100644 --- a/packages/koenig-lexical/src/components/ui/LinkToolbar.tsx +++ b/packages/koenig-lexical/src/components/ui/LinkToolbar.tsx @@ -1,6 +1,12 @@ import {ToolbarMenuItem} from './ToolbarMenu'; -export function LinkToolbar({href, onEdit, onRemove}) { +interface LinkToolbarProps { + href?: string; + onEdit?: () => void; + onRemove?: () => void; +} + +export function LinkToolbar({href, onEdit, onRemove}: LinkToolbarProps) { return (
    {href} diff --git a/packages/koenig-lexical/src/components/ui/MediaPlaceholder.stories.tsx b/packages/koenig-lexical/src/components/ui/MediaPlaceholder.stories.tsx index a14acc19bd..8d58209b62 100644 --- a/packages/koenig-lexical/src/components/ui/MediaPlaceholder.stories.tsx +++ b/packages/koenig-lexical/src/components/ui/MediaPlaceholder.stories.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import {MediaPlaceholder} from './MediaPlaceholder'; const story = { diff --git a/packages/koenig-lexical/src/components/ui/MediaPlaceholder.tsx b/packages/koenig-lexical/src/components/ui/MediaPlaceholder.tsx index f347e7a689..07f543d073 100644 --- a/packages/koenig-lexical/src/components/ui/MediaPlaceholder.tsx +++ b/packages/koenig-lexical/src/components/ui/MediaPlaceholder.tsx @@ -3,11 +3,11 @@ import FilePlaceholderIcon from '../../assets/icons/kg-file-placeholder.svg?reac import GalleryPlaceholderIcon from '../../assets/icons/kg-gallery-placeholder.svg?react'; import ImgPlaceholderIcon from '../../assets/icons/kg-img-placeholder.svg?react'; import ProductPlaceholderIcon from '../../assets/icons/kg-product-placeholder.svg?react'; -import PropTypes from 'prop-types'; +import React from 'react'; import VideoPlaceholderIcon from '../../assets/icons/kg-video-placeholder.svg?react'; import clsx from 'clsx'; -export const PLACEHOLDER_ICONS = { +export const PLACEHOLDER_ICONS: Record>> = { image: ImgPlaceholderIcon, gallery: GalleryPlaceholderIcon, video: VideoPlaceholderIcon, @@ -16,7 +16,7 @@ export const PLACEHOLDER_ICONS = { product: ProductPlaceholderIcon }; -export const CardText = ({text, type}) => ( +export const CardText = ({text, type}: {text: string; type?: string}) => ( ( ); -const ButtonContents = ({desc, hasErrors}) => { +const ButtonContents = ({desc, hasErrors}: {desc?: string; hasErrors: boolean}) => { if (hasErrors) { return null; } return

    {desc}

    ; }; -const StandardContents = ({desc, hasErrors, icon, size}) => { +const StandardContents = ({desc, hasErrors, icon, size}: {desc?: string; hasErrors: boolean; icon?: string; size?: string}) => { if (size === 'xsmall' && hasErrors) { return null; } - const Icon = PLACEHOLDER_ICONS[icon]; + const Icon = icon ? PLACEHOLDER_ICONS[icon] : null; const iconClasses = clsx( 'shrink-0 opacity-80 transition-all ease-linear hover:scale-105 group-hover:opacity-100', size === 'large' && 'size-20 text-grey', size === 'small' && 'size-14 text-grey', size === 'xsmall' && 'size-5 text-grey-700', - !['large', 'small', 'xsmall'].includes(size) && 'size-16 text-grey', + !['large', 'small', 'xsmall'].includes(size || '') && 'size-16 text-grey', (size === 'xsmall' && desc) && 'mr-3' ); @@ -58,11 +58,27 @@ const StandardContents = ({desc, hasErrors, icon, size}) => { ); return <> - + {Icon && }

    {desc}

    ; }; +interface MediaPlaceholderProps { + desc?: string; + icon?: 'image' | 'gallery' | 'video' | 'audio' | 'file' | 'product'; + filePicker?: () => void; + size?: 'xsmall' | 'small' | 'medium' | 'large'; + type?: 'image' | 'button'; + borderStyle?: 'squared' | 'rounded'; + isDraggedOver?: boolean; + errors?: {message: string}[]; + placeholderRef?: React.Ref; + dataTestId?: string; + errorDataTestId?: string; + multiple?: boolean; + [key: string]: unknown; +} + export function MediaPlaceholder({ desc, icon, @@ -77,7 +93,7 @@ export function MediaPlaceholder({ errorDataTestId = 'media-placeholder-errors', multiple = false, ...props -}) { +}: MediaPlaceholderProps) { const containerClasses = clsx( 'relative flex h-full items-center justify-center', type === 'button' ? 'rounded-lg bg-grey-100' : 'border bg-grey-50', @@ -137,11 +153,3 @@ export function MediaPlaceholder({
    ); } - -MediaPlaceholder.propTypes = { - icon: PropTypes.oneOf(['image', 'gallery', 'video', 'audio', 'file', 'product']), - desc: PropTypes.string, - size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large']), - type: PropTypes.oneOf(['image', 'button']), - borderStyle: PropTypes.oneOf(['squared', 'rounded']) -}; diff --git a/packages/koenig-lexical/src/components/ui/MediaPlayer.stories.tsx b/packages/koenig-lexical/src/components/ui/MediaPlayer.stories.tsx index 293041424d..bd54e1e85d 100644 --- a/packages/koenig-lexical/src/components/ui/MediaPlayer.stories.tsx +++ b/packages/koenig-lexical/src/components/ui/MediaPlayer.stories.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import {MediaPlayer} from './MediaPlayer'; const story = { diff --git a/packages/koenig-lexical/src/components/ui/MediaPlayer.tsx b/packages/koenig-lexical/src/components/ui/MediaPlayer.tsx index d2f90890af..607baee905 100644 --- a/packages/koenig-lexical/src/components/ui/MediaPlayer.tsx +++ b/packages/koenig-lexical/src/components/ui/MediaPlayer.tsx @@ -1,8 +1,14 @@ import PlayIcon from '../../assets/icons/kg-play.svg?react'; -import PropTypes from 'prop-types'; import UnmuteIcon from '../../assets/icons/kg-unmute.svg?react'; -export function MediaPlayer({type, duration, theme, ...args}) { +interface MediaPlayerProps { + type?: string; + duration?: string; + theme?: 'light' | 'dark'; + [key: string]: unknown; +} + +export function MediaPlayer({type: _type, duration, theme, ...args}: MediaPlayerProps) { return (
    @@ -25,7 +31,3 @@ export function MediaPlayer({type, duration, theme, ...args}) {
    ); } - -MediaPlayer.propTypes = { - theme: PropTypes.oneOf(['light', 'dark']) -}; diff --git a/packages/koenig-lexical/src/components/ui/MediaUploader.tsx b/packages/koenig-lexical/src/components/ui/MediaUploader.tsx index 6d98fd1ad1..1e49618d14 100644 --- a/packages/koenig-lexical/src/components/ui/MediaUploader.tsx +++ b/packages/koenig-lexical/src/components/ui/MediaUploader.tsx @@ -1,6 +1,6 @@ import DeleteIcon from '../../assets/icons/kg-trash.svg?react'; import ImageUploadForm from './ImageUploadForm'; -import PropTypes from 'prop-types'; +import React from 'react'; import WandIcon from '../../assets/icons/kg-wand.svg?react'; import clsx from 'clsx'; import {IconButton} from './IconButton'; @@ -9,6 +9,31 @@ import {ProgressBar} from './ProgressBar'; import {openFileSelection} from '../../utils/openFileSelection'; import {useRef} from 'react'; +interface MediaUploaderProps { + className?: string; + imgClassName?: string; + src?: string; + alt?: string; + desc?: string; + icon?: string; + size?: string; + type?: 'image' | 'button'; + borderStyle?: 'squared' | 'rounded'; + backgroundSize?: 'cover' | 'contain'; + mimeTypes?: string[]; + onFileChange: (e: React.ChangeEvent) => void; + dragHandler?: {isDraggedOver?: boolean; setRef?: React.Ref}; + isEditing?: boolean; + isLoading?: boolean; + isPinturaEnabled?: boolean; + openImageEditor?: (opts: unknown) => void; + progress?: number; + errors?: {message: string}[]; + onRemoveMedia?: () => void; + additionalActions?: React.ReactNode; + setFileInputRef?: (el: HTMLInputElement | null) => void; +} + export function MediaUploader({ className, imgClassName, @@ -32,10 +57,10 @@ export function MediaUploader({ onRemoveMedia = () => {}, additionalActions, setFileInputRef -}) { - const fileInputRef = useRef(null); +}: MediaUploaderProps) { + const fileInputRef = useRef(null); - const onFileInputRef = (element) => { + const onFileInputRef = (element: HTMLInputElement | null) => { fileInputRef.current = element; setFileInputRef?.(element); }; @@ -44,7 +69,7 @@ export function MediaUploader({ width: `${progress?.toFixed(0)}%` }; - const onRemove = (e) => { + const onRemove = (e: React.MouseEvent) => { e.stopPropagation(); // prevents card from losing selected state onRemoveMedia(); }; @@ -61,15 +86,14 @@ export function MediaUploader({ errorDataTestId="media-upload-errors" errors={errors} filePicker={() => openFileSelection({fileInputRef})} - icon={icon} + icon={icon as 'image' | 'gallery' | 'video' | 'audio' | 'file' | 'product'} isDraggedOver={dragHandler?.isDraggedOver} placeholderRef={dragHandler?.setRef} - size={size} + size={size as 'xsmall' | 'small' | 'medium' | 'large'} type={type} /> openFileSelection({fileInputRef})} mimeTypes={mimeTypes} onFileChange={onFileChange} /> @@ -79,9 +103,9 @@ export function MediaUploader({ return (
    {src && ( @@ -94,14 +118,14 @@ export function MediaUploader({ {!isLoading && (
    {additionalActions} - { isPinturaEnabled && openImageEditor({ + { isPinturaEnabled && openImageEditor?.({ image: src, - handleSave: (editedImage) => { + handleSave: (editedImage: unknown) => { onFileChange({ target: { - files: [editedImage] + files: [editedImage as File] } - }); + } as unknown as React.ChangeEvent); } })} /> } @@ -119,28 +143,3 @@ export function MediaUploader({
    ); } - -MediaUploader.propTypes = { - additionalActions: PropTypes.node, - alt: PropTypes.string, - backgroundSize: PropTypes.oneOf(['cover', 'contain']), - borderStyle: PropTypes.oneOf(['squared', 'rounded']), - className: PropTypes.string, - desc: PropTypes.string, - dragHandler: PropTypes.shape({isDraggedOver: PropTypes.bool, setRef: PropTypes.func}), - errors: PropTypes.arrayOf(PropTypes.shape({message: PropTypes.string})), - icon: PropTypes.string, - imgClassName: PropTypes.string, - isEditing: PropTypes.bool, - isLoading: PropTypes.bool, - isPinturaEnabled: PropTypes.bool, - mimeTypes: PropTypes.arrayOf(PropTypes.string), - onFileChange: PropTypes.func, - onRemoveMedia: PropTypes.func, - openImageEditor: PropTypes.func, - progress: PropTypes.number, - setFileInputRef: PropTypes.func, - size: PropTypes.string, - src: PropTypes.string, - type: PropTypes.oneOf(['image', 'button']) -}; diff --git a/packages/koenig-lexical/src/components/ui/Modal.stories.tsx b/packages/koenig-lexical/src/components/ui/Modal.stories.tsx index 12ca012997..c5b1a6bd8f 100644 --- a/packages/koenig-lexical/src/components/ui/Modal.stories.tsx +++ b/packages/koenig-lexical/src/components/ui/Modal.stories.tsx @@ -1,3 +1,5 @@ +// @ts-nocheck +import React, {useState} from 'react'; import {Modal} from './Modal'; import {useState} from 'react'; @@ -12,7 +14,7 @@ const story = { }; export default story; -const Template = (args) => { +const Template = (_args) => { const [isOpen, setOpen] = useState(false); const openModal = () => setOpen(true); diff --git a/packages/koenig-lexical/src/components/ui/Modal.tsx b/packages/koenig-lexical/src/components/ui/Modal.tsx index b131f6b373..81b4226899 100644 --- a/packages/koenig-lexical/src/components/ui/Modal.tsx +++ b/packages/koenig-lexical/src/components/ui/Modal.tsx @@ -1,9 +1,15 @@ import CloseIcon from '../../assets/icons/kg-close.svg?react'; import Portal from './Portal'; -import PropTypes from 'prop-types'; +import React from 'react'; -export function Modal({isOpen, onClose, children}) { - const controlByKeys = (event) => { +interface ModalProps { + isOpen?: boolean; + onClose: () => void; + children?: React.ReactNode; +} + +export function Modal({isOpen, onClose, children}: ModalProps) { + const controlByKeys = (event: React.KeyboardEvent) => { event.stopPropagation(); event.preventDefault(); @@ -35,9 +41,3 @@ export function Modal({isOpen, onClose, children}) { ); } - -Modal.propTypes = { - isOpen: PropTypes.bool, - onClose: PropTypes.func, - children: PropTypes.node -}; diff --git a/packages/koenig-lexical/src/components/ui/MultiSelectDropdown.tsx b/packages/koenig-lexical/src/components/ui/MultiSelectDropdown.tsx index ab5ea1524a..c5d7f5133e 100644 --- a/packages/koenig-lexical/src/components/ui/MultiSelectDropdown.tsx +++ b/packages/koenig-lexical/src/components/ui/MultiSelectDropdown.tsx @@ -4,7 +4,12 @@ import React from 'react'; import {DropdownContainer} from './DropdownContainer'; import {KeyboardSelection} from './KeyboardSelection'; -function Item({item, selected, onChange}) { +interface DropdownItem { + name: string; + label: React.ReactNode; +} + +function Item({item, selected, onChange}: {item: DropdownItem; selected: boolean; onChange: (item: DropdownItem) => void}) { let selectionClass = ''; if (selected) { @@ -13,7 +18,7 @@ function Item({item, selected, onChange}) { // We use the capture phase of the mouse down event, otherwise the list option will be removed when blurring the input // before calling the click event - const handleOptionMouseDown = (event) => { + const handleOptionMouseDown = (event: React.MouseEvent) => { // Prevent losing focus when clicking an option event.preventDefault(); onChange(item); @@ -33,18 +38,27 @@ function Item({item, selected, onChange}) { ); } -export function MultiSelectDropdown({placeholder = '', items = [], availableItems = [], onChange, dataTestId, allowAdd = true}) { +interface MultiSelectDropdownProps { + placeholder?: string; + items?: string[]; + availableItems?: string[]; + onChange: (items: string[]) => void; + dataTestId?: string; + allowAdd?: boolean; +} + +export function MultiSelectDropdown({placeholder = '', items = [], availableItems = [], onChange, dataTestId, allowAdd = true}: MultiSelectDropdownProps) { const [open, setOpen] = React.useState(false); const [filter, setFilter] = React.useState(''); const [isFocused, setIsFocused] = React.useState(false); - const inputRef = React.useRef(null); + const inputRef = React.useRef(null); - const handleOpen = (event) => { + const handleOpen = (event?: React.MouseEvent) => { setOpen(!open); // For Safari, we need to manually focus the button (doesn't happen by default) - if (!open) { - event.target.focus(); + if (!open && event) { + (event.target as HTMLElement).focus(); } }; @@ -59,7 +73,7 @@ export function MultiSelectDropdown({placeholder = '', items = [], availableItem handleOpen(); }; - const handleSelect = (item) => { + const handleSelect = (item: DropdownItem) => { if (!item.name || items?.includes(item.name)) { return; } @@ -68,7 +82,7 @@ export function MultiSelectDropdown({placeholder = '', items = [], availableItem setFilter(''); }; - const handleDeselect = (event, selectedItem) => { + const handleDeselect = (event: React.MouseEvent, selectedItem: DropdownItem) => { // Prevent losing focus when clicking an option event.preventDefault(); event.stopPropagation(); @@ -76,25 +90,26 @@ export function MultiSelectDropdown({placeholder = '', items = [], availableItem onChange(items.filter(selection => selection !== selectedItem.name)); }; - const handleBackspace = (event) => { + const handleBackspace = (event: React.KeyboardEvent) => { if (event.key === 'Backspace' && !filter) { onChange(items.slice(0, -1)); } }; - const getItem = (item, selected) => { + const getItem = (item: unknown, selected: boolean) => { + const typedItem = item as DropdownItem; return ( - + ); }; const selectedItems = items.map(item => ({name: item, label: item})); - const nonSelectedItems = availableItems.map(item => ({name: item, label: item})).filter( + const nonSelectedItems = availableItems.map(item => ({name: item, label: item as React.ReactNode})).filter( ai => !selectedItems.some(ii => ii.name === ai.name) ); - const filteredItems = nonSelectedItems.filter(item => item.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())); - let prefixItem = ''; + const filteredItems: DropdownItem[] = nonSelectedItems.filter(item => item.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())); + const prefixItem = ''; const defaultSelected = filteredItems[0]; if (filter && allowAdd) { @@ -109,8 +124,7 @@ export function MultiSelectDropdown({placeholder = '', items = [], availableItem
    inputRef.current.focus()} + onClick={() => inputRef.current?.focus()} > {selectedItems.map(item => (
    diff --git a/packages/koenig-lexical/src/components/ui/TextInput.tsx b/packages/koenig-lexical/src/components/ui/TextInput.tsx new file mode 100644 index 0000000000..8a67f5dc4a --- /dev/null +++ b/packages/koenig-lexical/src/components/ui/TextInput.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +interface TextInputProps extends React.InputHTMLAttributes { + value?: string; + onChange: (e: React.ChangeEvent) => void; +} + +export function TextInput({value, onChange, ...args}: TextInputProps) { + const handleOnChange = (e: React.ChangeEvent) => { + onChange(e); + }; + + return ( + + ); +} diff --git a/packages/koenig-lexical/src/components/ui/Toggle.stories.tsx b/packages/koenig-lexical/src/components/ui/Toggle.stories.tsx index 8f1f1c2b0e..14658db8d3 100644 --- a/packages/koenig-lexical/src/components/ui/Toggle.stories.tsx +++ b/packages/koenig-lexical/src/components/ui/Toggle.stories.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import {Toggle} from './Toggle'; const story = { diff --git a/packages/koenig-lexical/src/components/ui/Toggle.tsx b/packages/koenig-lexical/src/components/ui/Toggle.tsx index a1ad95040d..d4456a4bb2 100644 --- a/packages/koenig-lexical/src/components/ui/Toggle.tsx +++ b/packages/koenig-lexical/src/components/ui/Toggle.tsx @@ -1,6 +1,12 @@ -import PropTypes from 'prop-types'; +import React from 'react'; -export function Toggle({isChecked, onChange, dataTestId}) { +interface ToggleProps { + isChecked?: boolean; + onChange?: (e: React.ChangeEvent) => void; + dataTestId?: string; +} + +export function Toggle({isChecked, onChange, dataTestId}: ToggleProps) { return (
    ); diff --git a/packages/koenig-lexical/src/components/ui/VisibilitySettings.tsx b/packages/koenig-lexical/src/components/ui/VisibilitySettings.tsx index 2ca3ca2b7f..d5ed7025c1 100644 --- a/packages/koenig-lexical/src/components/ui/VisibilitySettings.tsx +++ b/packages/koenig-lexical/src/components/ui/VisibilitySettings.tsx @@ -1,6 +1,23 @@ import {ToggleSetting} from './SettingsPanel'; -export function VisibilitySettings({visibilityOptions, toggleVisibility}) { +interface VisibilityToggle { + key: string; + label: string; + checked: boolean; +} + +export interface VisibilityGroup { + key: string; + label: string; + toggles: VisibilityToggle[]; +} + +interface VisibilitySettingsProps { + visibilityOptions: VisibilityGroup[]; + toggleVisibility: (groupKey: string, toggleKey: string, value: boolean) => void; +} + +export function VisibilitySettings({visibilityOptions, toggleVisibility}: VisibilitySettingsProps) { const settingGroups = visibilityOptions.map((group, index) => { const toggles = group.toggles.map((toggle) => { return ( diff --git a/packages/koenig-lexical/src/components/ui/cards/AudioCard.stories.tsx b/packages/koenig-lexical/src/components/ui/cards/AudioCard.stories.tsx index f7645ad09a..f526839f78 100644 --- a/packages/koenig-lexical/src/components/ui/cards/AudioCard.stories.tsx +++ b/packages/koenig-lexical/src/components/ui/cards/AudioCard.stories.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import {AudioCard} from './AudioCard'; import {CardWrapper} from './../CardWrapper'; diff --git a/packages/koenig-lexical/src/components/ui/cards/AudioCard.tsx b/packages/koenig-lexical/src/components/ui/cards/AudioCard.tsx index c982ac5de8..8bd904798e 100644 --- a/packages/koenig-lexical/src/components/ui/cards/AudioCard.tsx +++ b/packages/koenig-lexical/src/components/ui/cards/AudioCard.tsx @@ -1,7 +1,6 @@ import AudioFileIcon from '../../../assets/icons/kg-audio-file.svg?react'; import DeleteIcon from '../../../assets/icons/kg-trash.svg?react'; import FilePlaceholderIcon from '../../../assets/icons/kg-file-placeholder.svg?react'; -import PropTypes from 'prop-types'; import React from 'react'; import {AudioUploadForm} from '../AudioUploadForm'; import {IconButton} from '../IconButton'; @@ -13,7 +12,18 @@ import {ReadOnlyOverlay} from '../ReadOnlyOverlay'; import {TextInput} from '../TextInput'; import {openFileSelection} from '../../../utils/openFileSelection'; -function AudioUploading({progress}) { +interface FileUploader { + isLoading?: boolean; + progress?: number; + errors?: {message: string}[]; +} + +interface DragHandler { + isDraggedOver?: boolean; + setRef?: React.Ref; +} + +function AudioUploading({progress}: {progress?: number}) { const progressStyle = { width: `${progress?.toFixed(0)}%` }; @@ -29,18 +39,26 @@ function AudioUploading({progress}) { ); } +interface EmptyAudioCardProps { + audioUploader: FileUploader; + audioMimeTypes?: string[]; + onFileChange?: (e: React.ChangeEvent) => void; + setFileInputRef: (ref: React.RefObject) => void; + audioDragHandler?: DragHandler; +} + function EmptyAudioCard({ audioUploader, audioMimeTypes, onFileChange, setFileInputRef, audioDragHandler = {} -}) { +}: EmptyAudioCardProps) { const {isLoading: isUploading, progress, errors} = audioUploader; - const fileInputRef = React.useRef(null); + const fileInputRef = React.useRef(null); - const onFileInputRef = (element) => { - fileInputRef.current = element; + const onFileInputRef = (element: HTMLInputElement | null) => { + (fileInputRef as React.MutableRefObject).current = element; setFileInputRef(fileInputRef); }; @@ -63,13 +81,26 @@ function EmptyAudioCard({ fileInputRef={onFileInputRef} filePicker={() => openFileSelection({fileInputRef: fileInputRef})} mimeTypes={audioMimeTypes} - onFileChange={onFileChange} + onFileChange={onFileChange!} /> ); } } +interface AudioThumbnailProps { + mimeTypes?: string[]; + src?: string; + progress?: number; + isUploading?: boolean; + isEditing?: boolean; + setFileInputRef: (ref: React.RefObject) => void; + onFileChange?: (e: React.ChangeEvent) => void; + removeThumbnail?: () => void; + isDraggedOver?: boolean; + errors?: {message: string}[]; +} + function AudioThumbnail({ mimeTypes, src, @@ -81,11 +112,11 @@ function AudioThumbnail({ removeThumbnail, isDraggedOver, errors -}) { - const fileInputRef = React.useRef(null); +}: AudioThumbnailProps) { + const fileInputRef = React.useRef(null); - const onFileInputRef = (element) => { - fileInputRef.current = element; + const onFileInputRef = (element: HTMLInputElement | null) => { + (fileInputRef as React.MutableRefObject).current = element; setFileInputRef(fileInputRef); }; @@ -143,13 +174,28 @@ function AudioThumbnail({ fileInputRef={onFileInputRef} filePicker={() => openFileSelection({fileInputRef: fileInputRef})} mimeTypes={mimeTypes} - onFileChange={onFileChange} + onFileChange={onFileChange!} />
    ); } } +interface PopulatedAudioCardProps { + isEditing?: boolean; + title?: string; + placeholder?: string; + thumbnailUploader: FileUploader; + thumbnailMimeTypes?: string[]; + duration?: number; + updateTitle?: (value: string) => void; + thumbnailSrc?: string; + setFileInputRef: (ref: React.RefObject) => void; + onFileChange?: (e: React.ChangeEvent) => void; + removeThumbnail?: () => void; + thumbnailDragHandler?: DragHandler; +} + function PopulatedAudioCard({ isEditing, title, @@ -163,9 +209,9 @@ function PopulatedAudioCard({ onFileChange, removeThumbnail, thumbnailDragHandler = {} -}) { +}: PopulatedAudioCardProps) { const {isLoading: isUploading, progress, errors} = thumbnailUploader; - const formatDuration = (rawDuration) => { + const formatDuration = (rawDuration: number) => { const minutes = Math.floor(rawDuration / 60); const seconds = Math.floor(rawDuration - (minutes * 60)); const returnedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`; @@ -173,14 +219,14 @@ function PopulatedAudioCard({ return formattedDuration; }; - const handleChange = (event) => { - updateTitle(event.target.value); + const handleChange = (event: React.ChangeEvent) => { + updateTitle?.(event.target.value); }; return ( <>
    } className="flex rounded-md border border-grey/30 p-2" data-testid="audio-card-populated" > @@ -208,7 +254,7 @@ function PopulatedAudioCard({ onChange={handleChange} /> )} - +
    {!isEditing && } @@ -216,6 +262,26 @@ function PopulatedAudioCard({ ); } +interface AudioCardProps { + src?: string; + thumbnailSrc?: string; + title?: string; + isEditing?: boolean; + updateTitle?: (value: string) => void; + duration?: number; + audioUploader: FileUploader; + audioMimeTypes?: string[]; + thumbnailUploader: FileUploader; + thumbnailMimeTypes?: string[]; + audioFileInputRef?: React.MutableRefObject; + thumbnailFileInputRef?: React.MutableRefObject; + onAudioFileChange?: (e: React.ChangeEvent) => void; + onThumbnailFileChange?: (e: React.ChangeEvent) => void; + audioDragHandler?: DragHandler; + removeThumbnail?: () => void; + thumbnailDragHandler?: DragHandler; +} + export function AudioCard({ src, thumbnailSrc, @@ -234,14 +300,14 @@ export function AudioCard({ audioDragHandler, removeThumbnail, thumbnailDragHandler -}) { - const setAudioFileInputRef = (ref) => { +}: AudioCardProps) { + const setAudioFileInputRef = (ref: React.RefObject) => { if (audioFileInputRef) { audioFileInputRef.current = ref.current; } }; - const setThumbnailFileInputRef = (ref) => { + const setThumbnailFileInputRef = (ref: React.RefObject) => { if (thumbnailFileInputRef) { thumbnailFileInputRef.current = ref.current; } @@ -256,7 +322,6 @@ export function AudioCard({ placeholder='Add a title...' removeThumbnail={removeThumbnail} setFileInputRef={setThumbnailFileInputRef} - setTitle={updateTitle} thumbnailDragHandler={thumbnailDragHandler} thumbnailMimeTypes={thumbnailMimeTypes} thumbnailSrc={thumbnailSrc} @@ -281,64 +346,3 @@ export function AudioCard({ ); } } - -AudioCard.propTypes = { - src: PropTypes.string, - title: PropTypes.string, - isEditing: PropTypes.bool, - updateTitle: PropTypes.func, - duration: PropTypes.number, - thumbnailSrc: PropTypes.string, - audioUploader: PropTypes.object, - audioMimeTypes: PropTypes.array, - thumbnailUploader: PropTypes.object, - thumbnailMimeTypes: PropTypes.array, - audioFileInputRef: PropTypes.object, - thumbnailFileInputRef: PropTypes.object, - onAudioFileChange: PropTypes.func, - onThumbnailFileChange: PropTypes.func, - audioDragHandler: PropTypes.object, - removeThumbnail: PropTypes.func, - thumbnailDragHandler: PropTypes.object -}; - -AudioUploading.propTypes = { - progress: PropTypes.number -}; - -AudioThumbnail.propTypes = { - errors: PropTypes.array, - isDraggedOver: PropTypes.bool, - isEditing: PropTypes.bool, - isUploading: PropTypes.bool, - mimeTypes: PropTypes.array, - progress: PropTypes.number, - removeThumbnail: PropTypes.func, - setFileInputRef: PropTypes.func, - src: PropTypes.string, - onFileChange: PropTypes.func -}; - -PopulatedAudioCard.propTypes = { - duration: PropTypes.number, - errors: PropTypes.array, - isEditing: PropTypes.bool, - placeholder: PropTypes.string, - removeThumbnail: PropTypes.func, - setFileInputRef: PropTypes.func, - thumbnailDragHandler: PropTypes.object, - thumbnailMimeTypes: PropTypes.array, - thumbnailSrc: PropTypes.string, - thumbnailUploader: PropTypes.object, - title: PropTypes.string, - updateTitle: PropTypes.func, - onFileChange: PropTypes.func -}; - -EmptyAudioCard.propTypes = { - audioDragHandler: PropTypes.object, - audioMimeTypes: PropTypes.array, - audioUploader: PropTypes.object, - setFileInputRef: PropTypes.func, - onFileChange: PropTypes.func -}; diff --git a/packages/koenig-lexical/src/components/ui/cards/BookmarkCard.stories.tsx b/packages/koenig-lexical/src/components/ui/cards/BookmarkCard.stories.tsx index d7563f46b7..3c07dd4eec 100644 --- a/packages/koenig-lexical/src/components/ui/cards/BookmarkCard.stories.tsx +++ b/packages/koenig-lexical/src/components/ui/cards/BookmarkCard.stories.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import populateEditor from '../../../utils/storybook/populate-storybook-editor'; import {BookmarkCard} from './BookmarkCard'; import {CardWrapper} from './../CardWrapper'; diff --git a/packages/koenig-lexical/src/components/ui/cards/BookmarkCard.tsx b/packages/koenig-lexical/src/components/ui/cards/BookmarkCard.tsx index 6cbd765df8..96cef80417 100644 --- a/packages/koenig-lexical/src/components/ui/cards/BookmarkCard.tsx +++ b/packages/koenig-lexical/src/components/ui/cards/BookmarkCard.tsx @@ -1,8 +1,31 @@ -import PropTypes from 'prop-types'; import React from 'react'; import {CardCaptionEditor} from '../CardCaptionEditor'; import {UrlInput} from '../UrlInput'; import {UrlSearchInput} from '../UrlSearchInput'; +import type {LexicalEditor} from 'lexical'; + +interface BookmarkCardProps { + author?: string; + handleClose?: () => void; + handlePasteAsLink?: (value?: string) => void; + handleRetry?: () => void; + handleUrlChange?: ((e: React.ChangeEvent) => void) | ((value: string) => void); + handleUrlSubmit?: ((e: KeyboardEvent | React.KeyboardEvent) => void) | ((url: string, type?: string) => void); + url?: string; + urlInputValue?: string; + urlPlaceholder?: string; + thumbnail?: string; + title?: string; + description?: string; + icon?: string; + publisher?: string; + captionEditor?: LexicalEditor; + captionEditorInitialState?: string; + isSelected?: boolean; + isLoading?: boolean; + urlError?: boolean; + searchLinks?: (term?: string) => Promise; +} export function BookmarkCard({ author, @@ -25,7 +48,7 @@ export function BookmarkCard({ isLoading, urlError, searchLinks -}) { +}: BookmarkCardProps) { // State to manage thumbnail visibility const [thumbnailVisible, setThumbnailVisible] = React.useState(true); @@ -53,13 +76,15 @@ export function BookmarkCard({ }
    - + {captionEditor && ( + + )} ); } @@ -71,8 +96,8 @@ export function BookmarkCard({ handleClose={handleClose} handlePasteAsLink={handlePasteAsLink} handleRetry={handleRetry} - handleUrlChange={handleUrlChange} - handleUrlSubmit={handleUrlSubmit} + handleUrlChange={handleUrlChange as (value: string) => void} + handleUrlSubmit={handleUrlSubmit as (url: string, type?: string) => void} hasError={urlError} isLoading={isLoading} placeholder={urlPlaceholder} @@ -87,8 +112,8 @@ export function BookmarkCard({ handleClose={handleClose} handlePasteAsLink={handlePasteAsLink} handleRetry={handleRetry} - handleUrlChange={handleUrlChange} - handleUrlSubmit={handleUrlSubmit} + handleUrlChange={handleUrlChange as (e: React.ChangeEvent) => void} + handleUrlSubmit={handleUrlSubmit as (e: KeyboardEvent | React.KeyboardEvent) => void} hasError={urlError} isLoading={isLoading} placeholder={urlPlaceholder} @@ -98,35 +123,12 @@ export function BookmarkCard({ } } -export function BookmarkIcon({src}) { +interface BookmarkIconProps { + src: string; +} + +export function BookmarkIcon({src}: BookmarkIconProps) { return ( ); } - -BookmarkCard.propTypes = { - author: PropTypes.string, - handleClose: PropTypes.func, - handlePasteAsLink: PropTypes.func, - handleRetry: PropTypes.func, - handleUrlChange: PropTypes.func, - handleUrlSubmit: PropTypes.func, - url: PropTypes.string, - urlInputValue: PropTypes.string, - urlPlaceholder: PropTypes.string, - thumbnail: PropTypes.string, - title: PropTypes.string, - description: PropTypes.string, - icon: PropTypes.string, - publisher: PropTypes.string, - captionEditor: PropTypes.object, - captionEditorInitialState: PropTypes.object, - isSelected: PropTypes.bool, - isLoading: PropTypes.bool, - urlError: PropTypes.bool, - searchLinks: PropTypes.func -}; - -BookmarkIcon.propTypes = { - src: PropTypes.string -}; diff --git a/packages/koenig-lexical/src/components/ui/cards/ButtonCard.stories.tsx b/packages/koenig-lexical/src/components/ui/cards/ButtonCard.stories.tsx index 6844c2e3c5..fd391e7f15 100644 --- a/packages/koenig-lexical/src/components/ui/cards/ButtonCard.stories.tsx +++ b/packages/koenig-lexical/src/components/ui/cards/ButtonCard.stories.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import {ButtonCard} from './ButtonCard'; import {CardWrapper} from './../CardWrapper'; diff --git a/packages/koenig-lexical/src/components/ui/cards/ButtonCard.tsx b/packages/koenig-lexical/src/components/ui/cards/ButtonCard.tsx index 1c85754136..a451eb2674 100644 --- a/packages/koenig-lexical/src/components/ui/cards/ButtonCard.tsx +++ b/packages/koenig-lexical/src/components/ui/cards/ButtonCard.tsx @@ -1,10 +1,21 @@ import CenterAlignIcon from '../../../assets/icons/kg-align-center.svg?react'; import LeftAlignIcon from '../../../assets/icons/kg-align-left.svg?react'; -import PropTypes from 'prop-types'; +import React from 'react'; import {Button} from '../Button'; import {ButtonGroupSetting, InputSetting, InputUrlSetting, SettingsPanel} from '../SettingsPanel'; import {ReadOnlyOverlay} from '../ReadOnlyOverlay'; +interface ButtonCardProps { + alignment?: string; + buttonText?: string; + buttonPlaceholder?: string; + buttonUrl?: string; + handleAlignmentChange?: (name: string) => void; + handleButtonTextChange?: (e: React.ChangeEvent) => void; + handleButtonUrlChange?: (value: string) => void; + isEditing?: boolean; +} + export function ButtonCard({ alignment, buttonText, @@ -14,7 +25,7 @@ export function ButtonCard({ handleButtonTextChange, handleButtonUrlChange, isEditing -}) { +}: ButtonCardProps) { const buttonGroupChildren = [ { label: 'Left', @@ -43,8 +54,8 @@ export function ButtonCard({ )} ); } - -ButtonCard.propTypes = { - alignment: PropTypes.string, - buttonText: PropTypes.string, - buttonPlaceholder: PropTypes.string, - buttonUrl: PropTypes.string, - handleAlignmentChange: PropTypes.func, - handleButtonTextChange: PropTypes.func, - handleButtonUrlChange: PropTypes.func, - handleButtonUrlFocus: PropTypes.func, - handleOptionClick: PropTypes.func, - isEditing: PropTypes.bool, - suggestedUrls: PropTypes.array, - suggestedUrlVisibility: PropTypes.bool -}; diff --git a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.stories.tsx b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.stories.tsx index 5eb02393bc..d88e54ff8b 100644 --- a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.stories.tsx +++ b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.stories.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import VisibilityIndicatorIcon from '../../../assets/icons/kg-indicator-visibility.svg?react'; import populateEditor from '../../../utils/storybook/populate-storybook-editor.js'; import {BASIC_NODES} from '../../../index.js'; diff --git a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.tsx b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.tsx index 6a765ecf6c..f498309df6 100644 --- a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.tsx +++ b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.tsx @@ -3,7 +3,7 @@ import ImmersiveLayoutIcon from '../../../assets/icons/kg-layout-immersive.svg?r import KoenigNestedEditor from '../../KoenigNestedEditor.jsx'; import LeftAlignIcon from '../../../assets/icons/kg-align-left.svg?react'; import MinimalLayoutIcon from '../../../assets/icons/kg-layout-minimal.svg?react'; -import PropTypes from 'prop-types'; +import React, {useState} from 'react'; import ReplacementStringsPlugin from '../../../plugins/ReplacementStringsPlugin.jsx'; import clsx from 'clsx'; import defaultTheme from '../../../themes/default.js'; @@ -15,7 +15,7 @@ import {RestrictContentPlugin} from '../../../index.js'; import {VisibilitySettings} from '../VisibilitySettings.jsx'; import {getAccentColor} from '../../../utils/getAccentColor.js'; import {textColorForBackgroundColor} from '@tryghost/color-utils'; -import {useState} from 'react'; +import type {LexicalEditor} from 'lexical'; const getTheme = () => ({ ...defaultTheme, @@ -83,6 +83,46 @@ export const callToActionLinkColorPicker = [ } ]; +type CtaColor = 'none' | 'grey' | 'white' | 'blue' | 'green' | 'yellow' | 'red' | 'pink' | 'purple'; + +interface CallToActionCardProps { + alignment?: 'left' | 'center'; + buttonColor?: string; + buttonText?: string; + buttonTextColor?: string; + buttonUrl?: string; + color?: CtaColor; + hasSponsorLabel?: boolean; + htmlEditor?: LexicalEditor; + htmlEditorInitialState?: string; + sponsorLabelHtmlEditor?: LexicalEditor; + sponsorLabelHtmlEditorInitialState?: string; + imageSrc?: string; + isEditing?: boolean; + layout?: 'minimal' | 'immersive'; + showButton?: boolean; + showDividers?: boolean; + visibilityOptions?: import('../VisibilitySettings').VisibilityGroup[]; + handleButtonColor?: (bgColor: string, textColor: string) => void; + handleColorChange?: (name: string) => void; + handleLinkColorChange?: (name: string) => void; + onFileChange?: (e: React.ChangeEvent) => void; + onRemoveMedia?: () => void; + setFileInputRef?: (el: HTMLInputElement | null) => void; + updateAlignment?: (name: string) => void; + updateButtonText?: (e: React.ChangeEvent) => void; + updateButtonUrl?: (value: string) => void; + updateHasSponsorLabel?: (event: React.ChangeEvent) => void; + updateLayout?: (name: string) => void; + updateShowButton?: (event: React.ChangeEvent) => void; + updateShowDividers?: (event: React.ChangeEvent) => void; + toggleVisibility?: (groupKey: string, toggleKey: string, value: boolean) => void; + imageDragHandler?: {isDraggedOver?: boolean; setRef?: React.Ref}; + imageUploader?: {isLoading?: boolean; progress?: number}; + linkColor?: 'text' | 'accent'; + showVisibilitySettings?: boolean; +} + export function CallToActionCard({ alignment = 'left', buttonColor = '', @@ -100,7 +140,7 @@ export function CallToActionCard({ layout = 'immersive', showButton = false, showDividers = true, - visibilityOptions = {}, + visibilityOptions = [], handleButtonColor = () => {}, handleColorChange = () => {}, handleLinkColorChange = () => {}, @@ -116,10 +156,10 @@ export function CallToActionCard({ updateShowDividers = () => {}, toggleVisibility = () => {}, imageDragHandler = {}, - imageUploader = () => {}, + imageUploader = {}, linkColor = 'text', showVisibilitySettings = false -}) { +}: CallToActionCardProps) { const [buttonColorPickerExpanded, setButtonColorPickerExpanded] = useState(false); const {isLoading, progress} = imageUploader || {}; @@ -164,7 +204,7 @@ export function CallToActionCard({ } ]; - const matchingTextColor = (bgColor) => { + const matchingTextColor = (bgColor: string) => { return bgColor === 'transparent' ? '' : textColorForBackgroundColor(bgColor === 'accent' ? getAccentColor() : bgColor).hex(); }; @@ -281,12 +321,12 @@ export function CallToActionCard({ {title: 'Brand color', accent: true} ]} value={buttonColor} - onPickerChange={bgColor => handleButtonColor(bgColor, matchingTextColor(bgColor))} - onSwatchChange={(bgColor) => { + onPickerChange={(bgColor: string) => handleButtonColor(bgColor, matchingTextColor(bgColor))} + onSwatchChange={(bgColor: string) => { handleButtonColor(bgColor, matchingTextColor(bgColor)); setButtonColorPickerExpanded(false); }} - onTogglePicker={(isExpanded) => { + onTogglePicker={(isExpanded: boolean) => { setButtonColorPickerExpanded(isExpanded); }} /> @@ -318,7 +358,7 @@ export function CallToActionCard({ '--cta-link-color': linkColor === 'accent' ? getAccentColor() : 'var(--cta-link-color-text)' - }} + } as React.CSSProperties} > {/* Sponsor label */} @@ -331,7 +371,7 @@ export function CallToActionCard({ autoFocus={true} dataTestId={'sponsor-label-editor'} hasSettingsPanel={true} - initialEditor={sponsorLabelHtmlEditor} + initialEditor={sponsorLabelHtmlEditor!} initialEditorState={sponsorLabelHtmlEditorInitialState} initialTheme={theme} nodes='basic' @@ -378,7 +418,7 @@ export function CallToActionCard({ autoFocus={true} dataTestId={'cta-card-content-editor'} hasSettingsPanel={true} - initialEditor={htmlEditor} + initialEditor={htmlEditor!} initialEditorState={htmlEditorInitialState} initialTheme={theme} nodes='basic' @@ -423,7 +463,7 @@ export function CallToActionCard({ e.preventDefault()} + onMouseDown={(e: React.MouseEvent) => e.preventDefault()} > {{ content: contentSettings, @@ -435,42 +475,3 @@ export function CallToActionCard({ ); } - -CallToActionCard.propTypes = { - alignment: PropTypes.oneOf(['left', 'center']), - buttonText: PropTypes.string, - buttonUrl: PropTypes.string, - buttonColor: PropTypes.string, - buttonTextColor: PropTypes.string, - color: PropTypes.oneOf(['none', 'grey', 'white', 'blue', 'green', 'yellow', 'red', 'pink', 'purple']), - hasSponsorLabel: PropTypes.bool, - imageSrc: PropTypes.string, - isEditing: PropTypes.bool, - layout: PropTypes.oneOf(['minimal', 'immersive']), - showButton: PropTypes.bool, - showDividers: PropTypes.bool, - htmlEditor: PropTypes.object, - htmlEditorInitialState: PropTypes.object, - updateAlignment: PropTypes.func, - updateButtonText: PropTypes.func, - updateButtonUrl: PropTypes.func, - updateHasSponsorLabel: PropTypes.func, - updateShowButton: PropTypes.func, - updateShowDividers: PropTypes.func, - updateLayout: PropTypes.func, - handleColorChange: PropTypes.func, - handleButtonColor: PropTypes.func, - onFileChange: PropTypes.func, - setFileInputRef: PropTypes.func, - onRemoveMedia: PropTypes.func, - sponsorLabelHtmlEditor: PropTypes.object, - sponsorLabelHtmlEditorInitialState: PropTypes.object, - visibilityOptions: PropTypes.array, - toggleVisibility: PropTypes.func, - imageUploadHandler: PropTypes.func, - imageDragHandler: PropTypes.object, - linkColor: PropTypes.oneOf(['text', 'accent']), - handleLinkColorChange: PropTypes.func, - imageUploader: PropTypes.object, - showVisibilitySettings: PropTypes.bool -}; diff --git a/packages/koenig-lexical/src/components/ui/cards/CalloutCard.stories.tsx b/packages/koenig-lexical/src/components/ui/cards/CalloutCard.stories.tsx index 6e6e45c7b5..8d7adb743e 100644 --- a/packages/koenig-lexical/src/components/ui/cards/CalloutCard.stories.tsx +++ b/packages/koenig-lexical/src/components/ui/cards/CalloutCard.stories.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import populateEditor from '../../../utils/storybook/populate-storybook-editor.js'; import {CalloutCard} from './CalloutCard'; import {CardWrapper} from './../CardWrapper'; diff --git a/packages/koenig-lexical/src/components/ui/cards/CalloutCard.tsx b/packages/koenig-lexical/src/components/ui/cards/CalloutCard.tsx index e00576b1ce..7c7488a515 100644 --- a/packages/koenig-lexical/src/components/ui/cards/CalloutCard.tsx +++ b/packages/koenig-lexical/src/components/ui/cards/CalloutCard.tsx @@ -1,12 +1,14 @@ import EmojiPickerPortal from '../EmojiPickerPortal'; import KoenigComposerContext from '../../../context/KoenigComposerContext.jsx'; import KoenigNestedEditor from '../../KoenigNestedEditor'; -import PropTypes from 'prop-types'; import React from 'react'; import {ColorOptionSetting, SettingsPanel, ToggleSetting} from '../SettingsPanel'; import {ReadOnlyOverlay} from '../ReadOnlyOverlay'; +import type {LexicalEditor} from 'lexical'; -export const CALLOUT_COLORS = { +export type CalloutColor = 'white' | 'grey' | 'blue' | 'green' | 'yellow' | 'red' | 'pink' | 'purple' | 'accent'; + +export const CALLOUT_COLORS: Record = { white: 'bg-transparent border-grey/30', grey: 'bg-grey/10 border-transparent', blue: 'bg-blue/10 border-transparent', @@ -21,7 +23,7 @@ export const CALLOUT_COLORS = { const TEXT_BLACK = 'text-black dark:text-grey-300 caret-black dark:caret-grey-300'; const TEXT_WHITE = 'text-white caret-white'; -export const CALLOUT_TEXT_COLORS = { +export const CALLOUT_TEXT_COLORS: Record = { white: TEXT_BLACK, grey: TEXT_BLACK, blue: TEXT_BLACK, @@ -82,6 +84,22 @@ export const calloutColorPicker = [ } ]; +interface CalloutCardProps { + color?: CalloutColor; + isEditing?: boolean; + setShowEmojiPicker: (show: boolean) => void; + toggleEmoji?: (event: React.ChangeEvent) => void; + hasEmoji?: boolean; + handleColorChange?: (name: string) => void; + changeEmoji?: (emoji: {native: string}) => void; + calloutEmoji?: string; + textEditor?: LexicalEditor; + textEditorInitialState?: string; + nodeKey?: string; + toggleEmojiPicker?: () => void; + showEmojiPicker?: boolean; +} + export function CalloutCard({ color = 'green', isEditing, @@ -90,14 +108,14 @@ export function CalloutCard({ hasEmoji = true, handleColorChange, changeEmoji, - calloutEmoji = '💡', + calloutEmoji = '\u{1F4A1}', textEditor, textEditorInitialState, - nodeKey, + nodeKey: _nodeKey, toggleEmojiPicker, showEmojiPicker -}) { - const emojiButtonRef = React.useRef(null); +}: CalloutCardProps) { + const emojiButtonRef = React.useRef(null); const {darkMode} = React.useContext(KoenigComposerContext); React.useEffect(() => { @@ -134,7 +152,7 @@ export function CalloutCard({ ) : ( @@ -169,22 +187,3 @@ export function CalloutCard({ ); } - -CalloutCard.propTypes = { - color: PropTypes.oneOf(['white', 'grey', 'blue', 'green', 'yellow', 'red', 'pink', 'purple', 'accent']), - text: PropTypes.string, - hasEmoji: PropTypes.bool, - placeholder: PropTypes.string, - isEditing: PropTypes.bool, - updateText: PropTypes.func, - calloutEmoji: PropTypes.string, - setShowEmojiPicker: PropTypes.func, - toggleEmoji: PropTypes.func, - handleColorChange: PropTypes.func, - changeEmoji: PropTypes.func, - textEditor: PropTypes.object, - textEditorInitialState: PropTypes.object, - nodeKey: PropTypes.string, - toggleEmojiPicker: PropTypes.func, - showEmojiPicker: PropTypes.bool -}; diff --git a/packages/koenig-lexical/src/components/ui/cards/CodeBlockCard.stories.tsx b/packages/koenig-lexical/src/components/ui/cards/CodeBlockCard.stories.tsx index 950815eda5..426974616b 100644 --- a/packages/koenig-lexical/src/components/ui/cards/CodeBlockCard.stories.tsx +++ b/packages/koenig-lexical/src/components/ui/cards/CodeBlockCard.stories.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import populateEditor from '../../../utils/storybook/populate-storybook-editor'; import {CardWrapper} from './../CardWrapper'; import {CodeBlockCard} from './CodeBlockCard'; diff --git a/packages/koenig-lexical/src/components/ui/cards/CodeBlockCard.tsx b/packages/koenig-lexical/src/components/ui/cards/CodeBlockCard.tsx index 832f2a1b85..7ce4ea8831 100644 --- a/packages/koenig-lexical/src/components/ui/cards/CodeBlockCard.tsx +++ b/packages/koenig-lexical/src/components/ui/cards/CodeBlockCard.tsx @@ -1,21 +1,26 @@ import CodeMirror from '@uiw/react-codemirror'; import KoenigComposerContext from '../../../context/KoenigComposerContext'; -import PropTypes from 'prop-types'; import React from 'react'; import {CardCaptionEditor} from '../CardCaptionEditor'; +import {EditorView, keymap, lineNumbers} from '@codemirror/view'; +import {HighlightStyle, syntaxHighlighting} from '@codemirror/language'; import {css} from '@codemirror/lang-css'; -import {darkBaseExtensions, lightBaseExtensions} from '../../../utils/codemirror-config'; +import {history, standardKeymap} from '@codemirror/commands'; import {html} from '@codemirror/lang-html'; import {javascript} from '@codemirror/lang-javascript'; +import {minimalSetup} from '@uiw/codemirror-extensions-basic-setup'; +import {tags as t} from '@lezer/highlight'; +import type {LexicalEditor} from 'lexical'; -const languageMap = new Map([ - ['javascript', javascript], - ['js', javascript], - ['html', html], - ['css', css] -]); +interface CodeEditorProps { + code?: string; + language?: string; + updateCode?: (value: string) => void; + updateLanguage?: (value: string) => void; + darkMode?: boolean; +} -export function CodeEditor({code, language, updateCode, updateLanguage}) { +export function CodeEditor({code, language, updateCode, updateLanguage}: CodeEditorProps) { const [showLanguage, setShowLanguage] = React.useState(true); const {darkMode} = React.useContext(KoenigComposerContext); @@ -32,26 +37,167 @@ export function CodeEditor({code, language, updateCode, updateLanguage}) { }; }, []); - const onChange = React.useCallback((value) => { + const onChange = React.useCallback((value: string) => { setShowLanguage(false); // hide language input whenever the user types in the editor - updateCode(value); + updateCode?.(value); }, [updateCode]); - const onLanguageChange = React.useCallback((event) => { - updateLanguage(event.target.value); + const onLanguageChange = React.useCallback((event: React.ChangeEvent) => { + updateLanguage?.(event.target.value); }, [updateLanguage]); - const extensions = React.useMemo(() => { - const base = darkMode ? darkBaseExtensions : lightBaseExtensions; - const highlighter = languageMap.get(language?.toLowerCase().trim()); - return highlighter ? [...base, highlighter()] : base; - }, [darkMode, language]); + const editorLightCSS = EditorView.theme({ + '&.cm-editor': { + background: 'transparent' + }, + '&.cm-focused': { + outline: '0' + }, + '&.cm-editor .cm-content': { + padding: '7px 0' + }, + '&.cm-editor .cm-scroller': { + overflow: 'auto' + }, + '&.cm-editor .cm-gutters': { + background: 'none', + border: 'none', + fontFamily: 'Consolas,Liberation Mono,Menlo,Courier,monospace;', + color: '#CED4D9', + lineHeight: '2.25rem' + }, + '&.cm-editor .cm-gutter': { + minHeight: '170px' + }, + '&.cm-editor .cm-lineNumbers': { + padding: '0' + }, + '&.cm-editor .cm-foldGutter': { + width: '0' + }, + '&.cm-editor .cm-line': { + padding: '0 .8rem', + color: '#394047', + fontFamily: 'Consolas,Liberation Mono,Menlo,Courier,monospace;', + fontSize: '1.6rem', + lineHeight: '2.25rem' + }, + '&.cm-editor .cm-activeLine, &.cm-editor .cm-activeLineGutter': { + background: 'none' + }, + '&.cm-editor .cm-cursor, &.cm-editor .cm-dropCursor': { + borderLeft: '1.2px solid black' + } + }); + + const editorDarkCSS = EditorView.theme({ + '&.cm-editor': { + background: 'transparent' + }, + '&.cm-focused': { + outline: '0' + }, + '&.cm-editor .cm-content': { + padding: '7px 0' + }, + '&.cm-editor .cm-scroller': { + overflow: 'auto' + }, + '&.cm-editor .cm-gutters': { + background: 'none', + border: 'none', + fontFamily: 'Consolas,Liberation Mono,Menlo,Courier,monospace;', + color: 'rgb(108, 118, 127);', + lineHeight: '2.25rem' + }, + '&.cm-editor .cm-gutter': { + minHeight: '170px' + }, + '&.cm-editor .cm-lineNumbers': { + padding: '0' + }, + '&.cm-editor .cm-foldGutter': { + width: '0' + }, + '&.cm-editor .cm-line': { + padding: '0 .8rem', + color: 'rgb(210, 215, 218)', + fontFamily: 'Consolas,Liberation Mono,Menlo,Courier,monospace;', + fontSize: '1.6rem', + lineHeight: '2.25rem' + }, + '&.cm-editor .cm-activeLine, &.cm-editor .cm-activeLineGutter': { + background: 'none' + }, + '&.cm-editor .cm-cursor, &.cm-editor .cm-dropCursor': { + borderLeft: '1.2px solid white' + } + + }); + + const editorLightHighlightStyle = HighlightStyle.define([ + {tag: t.keyword, color: '#5A5CAD'}, + {tag: t.atom, color: '#6C8CD5'}, + {tag: t.number, color: '#116644'}, + {tag: t.definition(t.variableName), textDecoration: 'underline'}, + {tag: t.variableName, color: 'black'}, + {tag: t.comment, color: '#0080FF', fontStyle: 'italic', background: 'rgba(0,0,0,.05)'}, + {tag: [t.string, t.special(t.brace)], color: '#183691'}, + {tag: t.meta, color: 'yellow'}, + {tag: t.bracket, color: '#63a35c'}, + {tag: t.tagName, color: '#63a35c'}, + {tag: t.attributeName, color: '#795da3'} + ]); + + const editorDarkHighlightStyle = HighlightStyle.define([ + {tag: t.keyword, color: '#795da3'}, + {tag: t.atom, color: '#6C8CD5'}, + {tag: t.number, color: '#63a35c'}, + {tag: t.definition(t.variableName), textDecoration: 'underline'}, + {tag: t.variableName, color: 'white'}, + {tag: t.comment, color: '#0080FF', fontStyle: 'italic', background: 'rgba(0,0,0,.05)'}, + {tag: [t.string, t.special(t.brace)], color: 'rgb(72, 110, 225)'}, + {tag: t.meta, color: 'yellow'}, + {tag: t.bracket, color: '#63a35c'}, + {tag: t.tagName, color: '#63a35c'}, + {tag: t.attributeName, color: '#795da3'}, + {tag: [t.className, t.propertyName], color: 'rgb(72, 110, 225)'} + ]); + + const editorCSS = darkMode ? editorDarkCSS : editorLightCSS; + const editorHighlightStyle = darkMode ? editorDarkHighlightStyle : editorLightHighlightStyle; + + // Base extensions for the CodeMirror editor + const extensions = [ + EditorView.lineWrapping, // wraps lines that exceed the viewport width + syntaxHighlighting(editorHighlightStyle), // customizes syntax highlighting rules + editorCSS, // customizes general editor appearance (does not include syntax highlighting) + lineNumbers(), // adds line numbers to the gutter + minimalSetup({defaultKeymap: false, history: false}), // disable defaultKeymap to prevent Mod+Enter from inserting new line + keymap.of(standardKeymap), // add back in standardKeymap, which doesn't include Mod+Enter + // adds undo/redo functionality with custom behaviour to make tests faster + history({ + joinToEvent: process.env.NODE_ENV === 'test' ? () => false : undefined + }) + ]; + + // If provided language is supported, add the corresponding extension + const languageMap: Record = { + javascript: javascript, + js: javascript, + html: html, + css: css + }; + const highlighter = languageMap[language?.toLowerCase().trim() || ''] || null; + if (highlighter) { + extensions.push(highlighter()); + } return ( 
    -                
+                
                     {code}
    @@ -87,7 +239,19 @@ export function CodeBlock({code, darkMode, language}) { ); } -export function CodeBlockCard({captionEditor, captionEditorInitialState, code, darkMode, isEditing, isSelected, language, updateCode, updateLanguage}) { +interface CodeBlockCardProps { + captionEditor?: LexicalEditor; + captionEditorInitialState?: string; + code?: string; + darkMode?: boolean; + isEditing?: boolean; + isSelected?: boolean; + language?: string; + updateCode?: (value: string) => void; + updateLanguage?: (value: string) => void; +} + +export function CodeBlockCard({captionEditor, captionEditorInitialState, code, darkMode, isEditing, isSelected, language, updateCode, updateLanguage}: CodeBlockCardProps) { if (isEditing) { return ( - + {captionEditor && ( + + )} ); } } - -CodeEditor.propTypes = { - code: PropTypes.string, - language: PropTypes.string, - updateCode: PropTypes.func, - updateLanguage: PropTypes.func -}; - -CodeBlock.propTypes = { - code: PropTypes.string, - darkMode: PropTypes.bool, - language: PropTypes.string -}; - -CodeBlockCard.propTypes = { - code: PropTypes.string, - darkMode: PropTypes.bool, - language: PropTypes.string, - captionEditor: PropTypes.object, - captionEditorInitialState: PropTypes.object, - isEditing: PropTypes.bool, - isSelected: PropTypes.bool, - updateCode: PropTypes.func, - updateLanguage: PropTypes.func -}; diff --git a/packages/koenig-lexical/src/components/ui/cards/EmailCard.stories.tsx b/packages/koenig-lexical/src/components/ui/cards/EmailCard.stories.tsx index 4a0a4df174..4d37d9de22 100644 --- a/packages/koenig-lexical/src/components/ui/cards/EmailCard.stories.tsx +++ b/packages/koenig-lexical/src/components/ui/cards/EmailCard.stories.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import EmailIndicatorIcon from '../../../assets/icons/kg-indicator-email.svg?react'; import populateEditor from '../../../utils/storybook/populate-storybook-editor'; import {BASIC_NODES} from '../../../index.js'; diff --git a/packages/koenig-lexical/src/components/ui/cards/EmailCard.tsx b/packages/koenig-lexical/src/components/ui/cards/EmailCard.tsx index ca6485b2a8..39d0672496 100644 --- a/packages/koenig-lexical/src/components/ui/cards/EmailCard.tsx +++ b/packages/koenig-lexical/src/components/ui/cards/EmailCard.tsx @@ -1,21 +1,27 @@ import KoenigNestedEditor from '../../KoenigNestedEditor'; -import PropTypes from 'prop-types'; import ReplacementStringsPlugin from '../../../plugins/ReplacementStringsPlugin'; import {CardVisibilityMessage} from '../CardVisibilityMessage.jsx'; import {ReadOnlyOverlay} from '../ReadOnlyOverlay'; +import type {LexicalEditor} from 'lexical'; + +interface EmailCardProps { + htmlEditor?: LexicalEditor; + htmlEditorInitialState?: string; + isEditing?: boolean; +} export function EmailCard({ htmlEditor, htmlEditorInitialState, isEditing = false -}) { +}: EmailCardProps) { return ( <>
    ); } - -EmailCard.propTypes = { - htmlEditor: PropTypes.object, - isEditing: PropTypes.bool, - htmlEditorInitialState: PropTypes.object -}; diff --git a/packages/koenig-lexical/src/components/ui/cards/EmailCtaCard.stories.tsx b/packages/koenig-lexical/src/components/ui/cards/EmailCtaCard.stories.tsx index 38e1881026..7417306dd3 100644 --- a/packages/koenig-lexical/src/components/ui/cards/EmailCtaCard.stories.tsx +++ b/packages/koenig-lexical/src/components/ui/cards/EmailCtaCard.stories.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import EmailIndicatorIcon from '../../../assets/icons/kg-indicator-email.svg?react'; import populateEditor from '../../../utils/storybook/populate-storybook-editor.js'; import {BASIC_NODES} from '../../../index.js'; diff --git a/packages/koenig-lexical/src/components/ui/cards/EmailCtaCard.tsx b/packages/koenig-lexical/src/components/ui/cards/EmailCtaCard.tsx index e8a28f7acd..6a9f48be8f 100644 --- a/packages/koenig-lexical/src/components/ui/cards/EmailCtaCard.tsx +++ b/packages/koenig-lexical/src/components/ui/cards/EmailCtaCard.tsx @@ -1,12 +1,31 @@ import CenterAlignIcon from '../../../assets/icons/kg-align-center.svg?react'; import KoenigNestedEditor from '../../KoenigNestedEditor'; import LeftAlignIcon from '../../../assets/icons/kg-align-left.svg?react'; -import PropTypes from 'prop-types'; +import React from 'react'; import ReplacementStringsPlugin from '../../../plugins/ReplacementStringsPlugin'; import {Button} from '../Button'; import {ButtonGroupSetting, DropdownSetting, InputSetting, InputUrlSetting, SettingsPanel, ToggleSetting} from '../SettingsPanel'; import {CardVisibilityMessage} from '../CardVisibilityMessage.jsx'; import {ReadOnlyOverlay} from '../ReadOnlyOverlay'; +import type {LexicalEditor} from 'lexical'; + +interface EmailCtaCardProps { + alignment?: 'left' | 'center'; + buttonText?: string; + buttonUrl?: string; + handleSegmentChange?: (value: string) => void; + htmlEditor?: LexicalEditor; + htmlEditorInitialState?: string; + isEditing?: boolean; + segment?: 'status:free' | 'status:-free'; + showDividers?: boolean; + showButton?: boolean; + toggleDividers?: (event: React.ChangeEvent) => void; + updateAlignment?: (name: string) => void; + updateShowButton?: (event: React.ChangeEvent) => void; + updateButtonText?: (e: React.ChangeEvent) => void; + updateButtonUrl?: (value: string) => void; +} export function EmailCtaCard({ alignment = 'left', @@ -24,7 +43,7 @@ export function EmailCtaCard({ updateShowButton, updateButtonText, updateButtonUrl -}) { +}: EmailCtaCardProps) { const alignmentOpts = [ { label: 'Left', @@ -48,7 +67,7 @@ export function EmailCtaCard({ name: 'status:-free' }]; - const getVisibilityMessage = (segmentType) => { + const getVisibilityMessage = (segmentType: string) => { switch (segmentType) { case 'status:free': return 'Hidden on website and paid newsletter'; @@ -74,7 +93,7 @@ export function EmailCtaCard({ {/* Alignment settings */} @@ -114,7 +133,7 @@ export function EmailCtaCard({ buttons={alignmentOpts} label='Content alignment' selectedName={alignment} - onClick={updateAlignment} + onClick={updateAlignment!} /> {/* Dividers settings */} @@ -145,7 +164,7 @@ export function EmailCtaCard({ dataTestId="button-url" label='Button URL' value={buttonUrl} - onChange={updateButtonUrl} + onChange={updateButtonUrl!} /> )} @@ -154,22 +173,3 @@ export function EmailCtaCard({ ); } - -EmailCtaCard.propTypes = { - alignment: PropTypes.oneOf(['left', 'center']), - buttonText: PropTypes.string, - buttonUrl: PropTypes.string, - isEditing: PropTypes.bool, - segment: PropTypes.oneOf(['status:free', 'status:-free']), - showButton: PropTypes.bool, - showDividers: PropTypes.bool, - updateAlignment: PropTypes.func, - updateButtonText: PropTypes.func, - updateButtonUrl: PropTypes.func, - updateShowButton: PropTypes.func, - toggleDividers: PropTypes.func, - suggestedUrls: PropTypes.array, - handleSegmentChange: PropTypes.func, - htmlEditor: PropTypes.object, - htmlEditorInitialState: PropTypes.object -}; diff --git a/packages/koenig-lexical/src/components/ui/cards/EmbedCard.stories.tsx b/packages/koenig-lexical/src/components/ui/cards/EmbedCard.stories.tsx index 0403798509..9ea5e99213 100644 --- a/packages/koenig-lexical/src/components/ui/cards/EmbedCard.stories.tsx +++ b/packages/koenig-lexical/src/components/ui/cards/EmbedCard.stories.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import populateEditor from '../../../utils/storybook/populate-storybook-editor'; import {CardWrapper} from './../CardWrapper'; import {EmbedCard} from './EmbedCard'; diff --git a/packages/koenig-lexical/src/components/ui/cards/EmbedCard.tsx b/packages/koenig-lexical/src/components/ui/cards/EmbedCard.tsx index ce3b12b5dd..f35f71bb7c 100644 --- a/packages/koenig-lexical/src/components/ui/cards/EmbedCard.tsx +++ b/packages/koenig-lexical/src/components/ui/cards/EmbedCard.tsx @@ -1,10 +1,26 @@ import '@tryghost/kg-simplemde/dist/simplemde.min.css'; -import PropTypes from 'prop-types'; import React from 'react'; import {CardCaptionEditor} from '../CardCaptionEditor'; import {UrlInput} from '../UrlInput'; +import type {LexicalEditor} from 'lexical'; + +interface EmbedCardProps { + captionEditor?: LexicalEditor; + captionEditorInitialState?: string; + html?: string; + isSelected?: boolean; + urlInputValue?: string; + urlPlaceholder?: string; + urlError?: boolean; + isLoading?: boolean; + handleUrlChange?: (e: React.ChangeEvent) => void; + handleUrlSubmit: (e: KeyboardEvent | React.KeyboardEvent) => void; + handleRetry?: () => void; + handlePasteAsLink?: (value?: string) => void; + handleClose?: () => void; +} -export function EmbedCard({captionEditor, captionEditorInitialState, html, isSelected, urlInputValue, urlPlaceholder, urlError, isLoading, handleUrlChange, handleUrlSubmit, handleRetry, handlePasteAsLink, handleClose}) { +export function EmbedCard({captionEditor, captionEditorInitialState, html, isSelected, urlInputValue, urlPlaceholder, urlError, isLoading, handleUrlChange, handleUrlSubmit, handleRetry, handlePasteAsLink, handleClose}: EmbedCardProps) { if (html) { return (
    @@ -12,13 +28,15 @@ export function EmbedCard({captionEditor, captionEditorInitialState, html, isSel
    - + {captionEditor && ( + + )}
    ); } @@ -38,12 +56,17 @@ export function EmbedCard({captionEditor, captionEditorInitialState, html, isSel ); } -function EmbedIframe({dataTestId, html}) { - const iframeRef = React.useRef(null); +interface EmbedIframeProps { + dataTestId?: string; + html: string; +} + +function EmbedIframe({dataTestId, html}: EmbedIframeProps) { + const iframeRef = React.useRef(null); const handleResize = () => { // get ratio from nested iframe if present (eg, Vimeo) - const firstElement = iframeRef.current?.contentDocument?.body?.firstChild; + const firstElement = iframeRef.current?.contentDocument?.body?.firstChild as HTMLElement | null; // won't have an iframe if the embed is invalid or fetching if (!firstElement) { @@ -51,20 +74,21 @@ function EmbedIframe({dataTestId, html}) { } if (firstElement.tagName === 'IFRAME') { - const widthAttr = firstElement.getAttribute('width'); - const heightAttr = firstElement.getAttribute('height'); + const iframeElement = firstElement as HTMLIFrameElement; + const widthAttr = iframeElement.getAttribute('width'); + const heightAttr = iframeElement.getAttribute('height'); if (widthAttr && heightAttr && widthAttr.indexOf('%') === -1 && heightAttr.indexOf('%') === -1) { const ratio = parseInt(widthAttr) / parseInt(heightAttr); - const newHeight = iframeRef.current.offsetWidth / ratio; - firstElement.style.height = `${newHeight}px`; - iframeRef.current.style.height = `${newHeight}px`; - firstElement.style.width = '100%'; + const newHeight = iframeRef.current!.offsetWidth / ratio; + iframeElement.style.height = `${newHeight}px`; + iframeRef.current!.style.height = `${newHeight}px`; + iframeElement.style.width = '100%'; return; } if (heightAttr && heightAttr.indexOf('%') === -1) { - iframeRef.current.style.height = `${heightAttr}px`; + iframeRef.current!.style.height = `${heightAttr}px`; return; } } @@ -76,11 +100,11 @@ function EmbedIframe({dataTestId, html}) { return; } - iframeRef.current.style.height = `${scrollHeight}px`; + iframeRef.current!.style.height = `${scrollHeight}px`; }; // register mutation observer to handle changes to iframe content (e.g. twitter embeds loading richer content) - const config = { + const config: MutationObserverInit = { attributes: true, attributeOldValue: false, characterData: true, @@ -91,7 +115,7 @@ function EmbedIframe({dataTestId, html}) { const mutationObserver = new MutationObserver(handleResize); const handleLoad = () => { - const iframeBody = iframeRef.current.contentDocument.body; + const iframeBody = iframeRef.current!.contentDocument!.body; // apply styles iframeBody.style.display = 'flex'; iframeBody.style.margin = '0'; @@ -99,20 +123,20 @@ function EmbedIframe({dataTestId, html}) { // resize first load handleResize(); // start listening to mutations when the iframe content is loaded - mutationObserver.observe(iframeRef.current.contentWindow.document, config); + mutationObserver.observe(iframeRef.current!.contentWindow!.document, config); }; // register listener for window resize events React.useEffect(() => { const resizeObserver = new ResizeObserver(handleResize); - resizeObserver.observe(iframeRef.current); + resizeObserver.observe(iframeRef.current!); // cleanup listener when component unmounts return function cleanup() { resizeObserver.disconnect(); mutationObserver.disconnect(); }; - }, []); + }, []); // eslint-disable-line react-hooks/exhaustive-deps return (