From 98e3fcdfcc8edac211acf1c3a2d7d7f4e4e16b88 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Fri, 13 Sep 2024 02:07:54 +0200 Subject: [PATCH] lint --- .../styles/default/align-dropdown-menu.json | 2 +- .../styles/default/blockquote-element.json | 2 +- .../registry/styles/default/button.json | 2 +- .../registry/styles/default/checkbox.json | 2 +- .../public/registry/styles/default/cloud.json | 10 +- .../styles/default/code-block-element.json | 4 +- .../registry/styles/default/code-leaf.json | 2 +- .../styles/default/color-dropdown-menu.json | 10 +- .../styles/default/column-element.json | 4 +- .../registry/styles/default/command.json | 2 +- .../registry/styles/default/comment-leaf.json | 2 +- .../styles/default/comments-popover.json | 8 +- .../styles/default/cursor-overlay.json | 2 +- .../registry/styles/default/date-element.json | 2 +- .../registry/styles/default/dialog.json | 2 +- .../registry/styles/default/draggable.json | 10 +- .../styles/default/dropdown-menu.json | 2 +- .../registry/styles/default/editor.json | 2 +- .../styles/default/emoji-dropdown-menu.json | 14 +- .../styles/default/emoji-input-element.json | 2 +- .../styles/default/floating-toolbar.json | 2 +- .../styles/default/heading-element.json | 2 +- .../styles/default/highlight-leaf.json | 2 +- .../styles/default/image-element.json | 2 +- .../styles/default/inline-combobox.json | 2 +- .../styles/default/insert-dropdown-menu.json | 2 +- .../registry/styles/default/kbd-leaf.json | 2 +- .../default/line-height-dropdown-menu.json | 2 +- .../registry/styles/default/link-element.json | 2 +- .../styles/default/link-floating-toolbar.json | 2 +- .../registry/styles/default/list-element.json | 2 +- .../styles/default/mark-toolbar-button.json | 2 +- .../styles/default/media-embed-element.json | 2 +- .../styles/default/media-popover.json | 2 +- .../styles/default/mention-element.json | 2 +- .../styles/default/mention-input-element.json | 2 +- .../styles/default/mode-dropdown-menu.json | 2 +- .../styles/default/more-dropdown-menu.json | 2 +- .../registry/styles/default/placeholder.json | 2 +- .../registry/styles/default/popover.json | 2 +- .../registry/styles/default/resizable.json | 2 +- .../styles/default/slash-input-element.json | 2 +- .../styles/default/table-cell-element.json | 2 +- .../styles/default/table-dropdown-menu.json | 2 +- .../styles/default/table-element.json | 2 +- .../styles/default/table-row-element.json | 2 +- .../styles/default/todo-list-element.json | 2 +- .../styles/default/toggle-element.json | 2 +- .../registry/styles/default/toolbar.json | 2 +- .../registry/styles/default/tooltip.json | 2 +- .../default/turn-into-dropdown-menu.json | 2 +- config/eslint/bases/typescript.cjs | 1 + packages/alignment/src/lib/BaseAlignPlugin.ts | 2 +- .../alignment/src/lib/transforms/setAlign.ts | 2 +- .../src/react/useAlignDropdownMenu.ts | 2 +- .../src/lib/BaseAutoformatPlugin.ts | 2 +- .../src/lib/transforms/autoformatBlock.ts | 4 +- packages/autoformat/src/lib/types.ts | 14 +- .../src/lib/utils/isPreviousCharacterEmpty.ts | 2 +- packages/autoformat/src/lib/withAutoformat.ts | 2 +- packages/basic-marks/src/react/BoldPlugin.tsx | 4 +- packages/basic-marks/src/react/CodePlugin.tsx | 4 +- .../basic-marks/src/react/ItalicPlugin.tsx | 4 +- .../src/react/StrikethroughPlugin.tsx | 4 +- .../basic-marks/src/react/SubscriptPlugin.tsx | 6 +- .../src/react/SuperscriptPlugin.tsx | 6 +- .../basic-marks/src/react/UnderlinePlugin.tsx | 4 +- .../src/lib/BaseBlockquotePlugin.ts | 2 +- .../src/react/BlockquotePlugin.tsx | 4 +- .../lib/exit-break/transforms/exitBreak.ts | 2 +- packages/break/src/lib/exit-break/types.ts | 16 +-- .../lib/single-line/BaseSingleLinePlugin.ts | 2 +- .../src/lib/transforms/insertCallout.ts | 2 +- .../callout/src/react/hooks/useCallout.ts | 4 +- packages/caption/src/lib/BaseCaptionPlugin.ts | 4 +- packages/caption/src/lib/withCaption.ts | 2 +- .../src/react/components/CaptionTextarea.tsx | 4 +- packages/cli/src/utils/registry/index.ts | 2 +- packages/cli/src/utils/transformers/index.ts | 2 +- .../utils/transformers/transform-css-vars.ts | 4 +- .../src/attachment/CloudAttachmentPlugin.ts | 4 +- packages/cloud/src/cloud/CloudPlugin.ts | 4 +- packages/cloud/src/cloud/types.ts | 2 +- packages/cloud/src/cloud/uploadFiles.ts | 4 +- packages/cloud/src/image/CloudImagePlugin.ts | 4 +- packages/cn/src/withVariants.tsx | 2 +- .../code-block/src/lib/BaseCodeBlockPlugin.ts | 6 +- .../lib/transforms/insertEmptyCodeBlock.ts | 2 +- .../src/lib/transforms/unwrapCodeBlock.ts | 2 +- .../code-block/src/react/CodeBlockPlugin.tsx | 6 +- .../src/react/hooks/useCodeBlockCombobox.ts | 2 +- .../src/react/hooks/useCodeBlockElement.ts | 2 +- .../src/react/onKeyDownCodeBlock.ts | 2 +- packages/combobox/src/lib/types.ts | 2 +- .../src/lib/withTriggerCombobox.spec.tsx | 4 +- .../src/react/hooks/useComboboxInput.ts | 2 +- .../comments/src/lib/BaseCommentsPlugin.ts | 22 ++-- packages/comments/src/lib/types.ts | 4 +- .../react/components/CommentDeleteButton.tsx | 8 +- .../components/CommentEditSaveButton.tsx | 4 +- .../react/components/CommentEditTextarea.tsx | 8 +- .../components/CommentNewSubmitButton.tsx | 2 +- .../react/components/CommentNewTextarea.tsx | 8 +- .../useCommentsShowResolvedButton.ts | 2 +- .../react/stores/comment/CommentProvider.tsx | 4 +- .../lib/deserializer/utils/deserializeCsv.ts | 2 +- .../cursor/src/components/CursorOverlay.tsx | 12 +- .../cursor/src/hooks/useRequestReRender.ts | 2 +- packages/cursor/src/types.ts | 4 +- packages/date/src/lib/BaseDatePlugin.ts | 4 +- .../date/src/lib/queries/isPointNextToNode.ts | 4 +- .../date/src/lib/transforms/insertDate.ts | 4 +- .../internal/transforms/transformDiffTexts.ts | 2 +- .../diff/src/internal/utils/copy-without.ts | 2 +- .../diff/src/internal/utils/diff-nodes.ts | 2 +- .../internal/utils/with-change-tracking.ts | 16 +-- packages/diff/src/lib/computeDiff.spec.ts | 66 +++++----- packages/diff/src/lib/computeDiff.ts | 4 +- packages/dnd/src/DndPlugin.tsx | 14 +- .../src/components/Scroller/DndScroller.tsx | 2 +- .../src/components/Scroller/ScrollArea.tsx | 8 +- .../dnd/src/components/Scroller/Scroller.tsx | 2 +- packages/dnd/src/components/useDraggable.ts | 4 +- .../dnd/src/components/useWithDraggable.ts | 2 +- packages/dnd/src/hooks/useDndNode.ts | 12 +- packages/dnd/src/hooks/useDragNode.ts | 2 +- packages/dnd/src/hooks/useDropNode.ts | 16 +-- packages/dnd/src/transforms/onDropNode.ts | 4 +- packages/dnd/src/transforms/onHoverNode.ts | 4 +- packages/dnd/src/types.ts | 2 +- packages/dnd/src/utils/getHoverDirection.ts | 6 +- packages/docx/src/lib/DocxPlugin.ts | 4 +- packages/docx/src/lib/__tests__/font.spec.tsx | 4 +- .../docx-cleaner/utils/getDocxListIndent.ts | 2 +- .../lib/docx-cleaner/utils/getRtfImageHex.ts | 2 +- .../docx-cleaner/utils/getRtfImageMimeType.ts | 2 +- .../lib/docx-cleaner/utils/getRtfImageSpid.ts | 2 +- .../lib/docx-cleaner/utils/getRtfImagesMap.ts | 4 +- .../utils/getTextListStyleType.ts | 10 +- .../lib/docx-cleaner/utils/getVShapeSpid.ts | 2 +- packages/emoji/src/lib/BaseEmojiPlugin.ts | 2 +- packages/emoji/src/lib/constants.ts | 2 +- packages/emoji/src/lib/types.ts | 4 +- .../utils/EmojiLibrary/EmojiLibrary.types.ts | 2 +- .../emoji/src/lib/utils/Grid/Grid.types.ts | 4 +- .../emoji/src/lib/utils/Grid/GridSection.ts | 6 +- .../react/hooks/useEmojiDropdownMenuState.ts | 2 +- .../emoji/src/react/hooks/useEmojiPicker.ts | 22 ++-- .../src/react/storage/FrequentEmojiStorage.ts | 2 +- .../utils/EmojiLibrary/EmojiFloatingGrid.ts | 4 +- .../EmojiLibrary/EmojiFloatingLibrary.ts | 8 +- .../emoji/src/react/utils/EmojiPickerState.ts | 10 +- .../src/lib/transforms/insertExcalidraw.ts | 2 +- packages/excalidraw/src/lib/types.ts | 2 +- .../find-replace/src/lib/FindReplacePlugin.ts | 2 +- .../floating/src/hooks/useFloatingToolbar.ts | 4 +- .../src/utils/getBoundingClientRect.ts | 2 +- .../src/lib/BaseFontBackgroundColorPlugin.ts | 2 +- packages/font/src/lib/BaseFontColorPlugin.ts | 2 +- packages/font/src/lib/BaseFontFamilyPlugin.ts | 2 +- packages/font/src/lib/BaseFontSizePlugin.ts | 2 +- packages/font/src/lib/BaseFontWeightPlugin.ts | 2 +- .../src/react/hooks/useColorDropdownMenu.ts | 8 +- .../font/src/react/hooks/useColorsCustom.ts | 4 +- .../heading/src/internal/getHeadingList.ts | 2 +- packages/heading/src/lib/types.ts | 2 +- packages/heading/src/react/HeadingPlugin.tsx | 8 +- .../src/react/hooks/useContentController.ts | 6 +- .../heading/src/react/hooks/useTocElement.ts | 2 +- .../src/react/hooks/useTocSideBarState.ts | 12 +- .../highlight/src/react/HighlightPlugin.tsx | 4 +- packages/html/src/react/elementToHtml.ts | 2 +- packages/html/src/react/leafToHtml.ts | 2 +- packages/html/src/react/serializeHtml.ts | 6 +- .../src/react/utils/createElementWithSlate.ts | 2 +- .../src/__tests__/indentListPluginPage.ts | 2 +- .../src/lib/BaseIndentListPlugin.ts | 6 +- .../normalizers/withInsertBreakIndentList.ts | 2 +- .../src/lib/queries/getSiblingIndentList.ts | 10 +- .../lib/transforms/toggleIndentListByPath.ts | 2 +- .../src/react/IndentListPlugin.tsx | 8 +- .../react/hooks/useIndentListToolbarButton.ts | 2 +- .../react/hooks/useIndentTodoToolbarButton.ts | 2 +- .../src/react/renderIndentListBelowNodes.tsx | 2 +- packages/indent/src/lib/BaseIndentPlugin.ts | 4 +- .../indent/src/lib/BaseTextIndentPlugin.ts | 4 +- packages/juice/src/lib/JuicePlugin.ts | 2 +- packages/layout/src/lib/BaseColumnPlugin.ts | 2 +- .../src/lib/transforms/insertColumnGroup.ts | 2 +- .../src/lib/transforms/insertEmptyColumn.ts | 2 +- packages/layout/src/react/ColumnPlugin.tsx | 2 +- .../src/lib/BaseLineHeightPlugin.ts | 2 +- .../src/lib/transforms/setLineHeight.ts | 2 +- .../react/hooks/useLineHeightDropdownMenu.ts | 2 +- packages/link/src/lib/BaseLinkPlugin.ts | 6 +- packages/link/src/lib/withLink.ts | 2 +- packages/link/src/react/LinkPlugin.tsx | 18 +-- .../FloatingLink/FloatingLinkNewTabInput.tsx | 2 +- .../FloatingLink/LinkOpenButton.tsx | 2 +- .../react/components/useLinkToolbarButton.ts | 2 +- .../react/transforms/submitFloatingLink.ts | 2 +- packages/list/src/lib/BaseListPlugin.ts | 2 +- packages/list/src/lib/BaseTodoListPlugin.ts | 2 +- .../src/lib/normalizers/normalizeListItem.ts | 6 +- .../src/lib/queries/getHighestEmptyList.ts | 2 +- .../src/lib/transforms/insertTodoListItem.ts | 2 +- .../list/src/lib/transforms/moveListItems.ts | 2 +- .../src/lib/transforms/moveListItemsToList.ts | 2 +- .../list/src/lib/transforms/toggleList.ts | 2 +- .../list/src/lib/transforms/unwrapList.ts | 2 +- .../list/src/lib/withDeleteForwardList.ts | 2 +- .../list/src/lib/withDeleteFragmentList.ts | 2 +- .../list/src/lib/withInsertFragmentList.ts | 2 +- packages/list/src/lib/withNormalizeList.ts | 4 +- packages/list/src/react/ListPlugin.tsx | 8 +- packages/list/src/react/TodoListPlugin.tsx | 6 +- .../src/react/hooks/useListToolbarButton.ts | 2 +- packages/list/src/react/onKeyDownList.ts | 2 +- .../list/src/react/withDeleteBackwardList.ts | 4 +- .../list/src/react/withInsertBreakList.ts | 4 +- .../lib/deserializer/utils/deserializeMd.ts | 2 +- .../markdown/src/lib/remark-slate/types.ts | 2 +- .../src/lib/serializer/serializeMdNode.ts | 24 ++-- .../src/lib/serializer/serializeMdNodes.ts | 2 +- packages/markdown/src/lib/serializer/types.ts | 2 +- .../equation/components/EquationInput.ts | 4 +- .../components/InlineEquationInput.ts | 6 +- .../media/src/lib/image/BaseImagePlugin.ts | 14 +- .../src/lib/image/transforms/insertImage.ts | 2 +- .../media/src/lib/image/utils/isImageUrl.ts | 124 +++++++++--------- .../src/lib/media-embed/parseIframeUrl.ts | 2 +- .../transforms/insertMediaEmbed.ts | 2 +- packages/media/src/lib/media/parseMediaUrl.ts | 2 +- packages/media/src/lib/media/types.ts | 2 +- .../placeholder/transforms/setMediaNode.ts | 4 +- .../src/react/image/ImagePreviewStore.ts | 2 +- .../src/react/image/components/Image.tsx | 2 +- .../react/image/components/PreviewImage.tsx | 8 +- .../src/react/image/components/ScaleInput.tsx | 2 +- .../src/react/media/useMediaController.ts | 2 +- .../media/src/react/media/useMediaState.ts | 4 +- .../placeholder/usePlaceholderPopover.ts | 2 +- packages/mention/src/lib/BaseMentionPlugin.ts | 2 +- .../mention/src/lib/getMentionOnSelectItem.ts | 2 +- packages/node-id/src/lib/NodeIdPlugin.ts | 4 +- .../withNormalizeType/invalid-path.spec.tsx | 2 +- .../withNormalizeType/nested.spec.tsx | 2 +- .../src/lib/NormalizeTypesPlugin.ts | 2 +- .../src/lib/RemoveEmptyNodesPlugin.ts | 4 +- .../normalizers/src/lib/withNormalizeTypes.ts | 2 +- packages/plate-utils/src/lib/isType.ts | 2 +- .../plate-utils/src/react/PlateElement.tsx | 2 +- packages/plate-utils/src/react/PlateLeaf.tsx | 2 +- .../plate-utils/src/react/createNodesHOC.tsx | 2 +- .../src/react/useMarkToolbarButton.ts | 6 +- .../src/__tests__/useHotkeys.test.tsx | 34 ++--- .../src/__tests__/useRecordHotkeys.test.tsx | 4 +- .../src/internal/HotkeysProvider.tsx | 4 +- .../src/internal/isHotkeyPressed.ts | 4 +- .../src/internal/parseHotkeys.ts | 8 +- packages/react-hotkeys/src/internal/types.ts | 4 +- .../react-hotkeys/src/internal/validators.ts | 6 +- .../src/createPrimitiveComponent.tsx | 2 +- packages/react-utils/src/useOnClickOutside.ts | 4 +- .../reset-node/src/lib/BaseResetNodePlugin.ts | 2 +- packages/reset-node/src/lib/types.ts | 2 +- .../src/react/onKeyDownResetNode.spec.tsx | 4 +- .../src/react/onKeyDownResetNode.ts | 2 +- .../resizable/src/components/ResizeHandle.tsx | 12 +- packages/select/src/lib/DeletePlugin.ts | 4 +- .../select/src/lib/SelectOnBackspacePlugin.ts | 2 +- .../selection/src/internal/utils/events.ts | 8 +- .../src/react/BlockContextMenuPlugin.tsx | 10 +- .../src/react/BlockSelectionPlugin.tsx | 10 +- .../src/react/components/BlockSelectable.tsx | 4 +- .../src/react/components/BlockSelection.tsx | 2 +- .../selection/src/react/context-menu/types.ts | 2 +- .../slash-command/src/lib/BaseSlashPlugin.ts | 2 +- .../src/queries/getPointBeforeLocation.ts | 14 +- .../src/queries/getPointNextToVoid.ts | 4 +- .../src/queries/getPreviousBlockById.spec.ts | 18 +-- .../src/queries/isPointAtWordEnd.ts | 2 +- .../slate-utils/src/transforms/removeMark.ts | 4 +- .../slate-utils/src/transforms/setMarks.ts | 2 +- .../slate-utils/src/transforms/toggleMark.ts | 4 +- .../slate/src/interfaces/editor/TEditor.ts | 20 +-- .../src/interfaces/editor/createPathRef.ts | 2 +- .../src/interfaces/editor/createPointRef.ts | 2 +- .../src/interfaces/editor/createRangeRef.ts | 2 +- .../src/interfaces/editor/deleteMerge.ts | 2 +- .../src/interfaces/editor/getEdgePoints.ts | 2 +- .../src/interfaces/editor/getEditorString.ts | 4 +- .../src/interfaces/editor/getEndPoint.ts | 2 +- .../src/interfaces/editor/getFirstNode.ts | 2 +- .../src/interfaces/editor/getFragment.ts | 2 +- .../src/interfaces/editor/getLastNode.ts | 2 +- .../src/interfaces/editor/getLeafNode.ts | 2 +- .../slate/src/interfaces/editor/getLevels.ts | 2 +- .../src/interfaces/editor/getNextNode.ts | 2 +- .../src/interfaces/editor/getNodeEntries.ts | 2 +- .../src/interfaces/editor/getNodeEntry.ts | 2 +- .../src/interfaces/editor/getParentNode.ts | 2 +- .../slate/src/interfaces/editor/getPath.ts | 2 +- .../slate/src/interfaces/editor/getPoint.ts | 2 +- .../src/interfaces/editor/getPointAfter.ts | 2 +- .../src/interfaces/editor/getPointBefore.ts | 2 +- .../src/interfaces/editor/getPositions.ts | 2 +- .../src/interfaces/editor/getPreviousNode.ts | 2 +- .../slate/src/interfaces/editor/getRange.ts | 2 +- .../src/interfaces/editor/getStartPoint.ts | 2 +- .../src/interfaces/editor/getVoidNode.ts | 2 +- .../src/interfaces/editor/isEdgePoint.ts | 2 +- .../slate/src/interfaces/editor/isEndPoint.ts | 2 +- .../src/interfaces/editor/isStartPoint.ts | 2 +- .../src/interfaces/editor/normalizeEditor.ts | 2 +- .../src/interfaces/editor/unhangRange.ts | 4 +- .../src/interfaces/node/getCommonNode.ts | 2 +- .../src/interfaces/node/getNodeAncestor.ts | 2 +- .../src/interfaces/node/getNodeAncestors.ts | 2 +- .../src/interfaces/node/getNodeChildren.ts | 2 +- .../src/interfaces/node/getNodeDescendant.ts | 2 +- .../src/interfaces/node/getNodeDescendants.ts | 2 +- .../src/interfaces/node/getNodeElements.ts | 2 +- .../src/interfaces/node/getNodeFirstNode.ts | 2 +- .../src/interfaces/node/getNodeFragment.ts | 2 +- .../src/interfaces/node/getNodeLastNode.ts | 2 +- .../slate/src/interfaces/node/getNodeLeaf.ts | 2 +- .../src/interfaces/node/getNodeLevels.ts | 2 +- .../src/interfaces/node/getNodeParent.ts | 2 +- .../slate/src/interfaces/node/getNodeTexts.ts | 2 +- .../slate/src/interfaces/node/getNodes.ts | 2 +- packages/slate/src/interfaces/node/hasNode.ts | 2 +- .../src/interfaces/transforms/mergeNodes.ts | 6 +- .../slate/src/transforms/addRangeMarks.ts | 2 +- packages/slate/src/types/QueryNodeOptions.ts | 8 +- packages/slate/src/utils/match.ts | 2 +- .../src/lib/BaseSuggestionPlugin.ts | 32 ++--- .../src/lib/transforms/deleteSuggestion.ts | 2 +- packages/suggestion/src/lib/types.ts | 6 +- .../src/lib/utils/getSuggestionKeys.ts | 2 +- .../src/lib/withSuggestion.spec.tsx | 4 +- packages/suggestion/src/lib/withSuggestion.ts | 2 +- packages/table/src/lib/BaseTablePlugin.ts | 2 +- .../lib/transforms/insertTableColumn.spec.tsx | 2 +- .../table/src/lib/transforms/setBorderSize.ts | 2 +- packages/table/src/lib/types.ts | 2 +- packages/table/src/react/TablePlugin.tsx | 2 +- .../getOnSelectTableBorderFactory.ts | 2 +- .../useTableCellElementState.ts | 2 +- .../TableElement/useTableElement.ts | 2 +- .../table/src/react/merge/deleteColumn.ts | 2 +- .../react/merge/deleteColumnWhenExpanded.ts | 4 +- .../src/react/merge/unmergeTableCells.ts | 2 +- packages/table/src/react/onKeyDownTable.ts | 4 +- packages/table/src/react/stores/tableStore.ts | 6 +- .../table/src/react/transforms/deleteRow.ts | 2 +- packages/test-utils/src/createDataTransfer.ts | 2 +- packages/test-utils/src/jsx.ts | 20 +-- .../src/react/hooks/useToggleToolbarButton.ts | 2 +- packages/toggle/src/react/toggleIndexAtom.ts | 2 +- .../src/lib/TrailingBlockPlugin.spec.tsx | 2 +- .../src/lib/TrailingBlockPlugin.ts | 4 +- packages/utils/src/environment.ts | 2 +- packages/utils/src/escapeRegexp.ts | 2 +- packages/utils/src/isUrl.ts | 4 +- packages/utils/src/sanitizeUrl.ts | 2 +- .../utils/src/types/FunctionProperties.ts | 2 +- packages/yjs/src/lib/BaseYjsPlugin.ts | 14 +- packages/yjs/src/react/YjsAboveEditable.tsx | 2 +- 369 files changed, 812 insertions(+), 809 deletions(-) diff --git a/apps/www/public/registry/styles/default/align-dropdown-menu.json b/apps/www/public/registry/styles/default/align-dropdown-menu.json index dc53c141a3..1ec90db80a 100644 --- a/apps/www/public/registry/styles/default/align-dropdown-menu.json +++ b/apps/www/public/registry/styles/default/align-dropdown-menu.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n useAlignDropdownMenu,\n useAlignDropdownMenuState,\n} from '@udecode/plate-alignment/react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n {\n icon: Icons.alignLeft,\n value: 'left',\n },\n {\n icon: Icons.alignCenter,\n value: 'center',\n },\n {\n icon: Icons.alignRight,\n value: 'right',\n },\n {\n icon: Icons.alignJustify,\n value: 'justify',\n },\n];\n\nexport function AlignDropdownMenu({ children, ...props }: DropdownMenuProps) {\n const state = useAlignDropdownMenuState();\n const { radioGroupProps } = useAlignDropdownMenu(state);\n\n const openState = useOpenState();\n const IconValue =\n items.find((item) => item.value === radioGroupProps.value)?.icon ??\n Icons.alignLeft;\n\n return (\n \n \n \n \n \n \n\n \n \n {items.map(({ icon: Icon, value: itemValue }) => (\n \n \n \n ))}\n \n \n \n );\n}\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n useAlignDropdownMenu,\n useAlignDropdownMenuState,\n} from '@udecode/plate-alignment/react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n {\n icon: Icons.alignLeft,\n value: 'left',\n },\n {\n icon: Icons.alignCenter,\n value: 'center',\n },\n {\n icon: Icons.alignRight,\n value: 'right',\n },\n {\n icon: Icons.alignJustify,\n value: 'justify',\n },\n];\n\nexport function AlignDropdownMenu({ children, ...props }: DropdownMenuProps) {\n const state = useAlignDropdownMenuState();\n const { radioGroupProps } = useAlignDropdownMenu(state);\n\n const openState = useOpenState();\n const IconValue =\n items.find((item) => item.value === radioGroupProps.value)?.icon ??\n Icons.alignLeft;\n\n return (\n \n \n \n \n \n \n\n \n \n {items.map(({ icon: Icon, value: itemValue }) => (\n \n \n \n ))}\n \n \n \n );\n}\n", "name": "align-dropdown-menu.tsx" } ], diff --git a/apps/www/public/registry/styles/default/blockquote-element.json b/apps/www/public/registry/styles/default/blockquote-element.json index a0bf298879..87dfb35f5b 100644 --- a/apps/www/public/registry/styles/default/blockquote-element.json +++ b/apps/www/public/registry/styles/default/blockquote-element.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\n\nexport const BlockquoteElement = withRef(\n ({ children, className, ...props }, ref) => {\n return (\n \n
{children}
\n \n );\n }\n);\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\n\nexport const BlockquoteElement = withRef(\n ({ children, className, ...props }, ref) => {\n return (\n \n
{children}
\n \n );\n }\n);\n", "name": "blockquote-element.tsx" } ], diff --git a/apps/www/public/registry/styles/default/button.json b/apps/www/public/registry/styles/default/button.json index 98214385e6..dca5049768 100644 --- a/apps/www/public/registry/styles/default/button.json +++ b/apps/www/public/registry/styles/default/button.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import * as React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cn, withRef } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nexport const buttonVariants = cva(\n 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n {\n defaultVariants: {\n size: 'default',\n variant: 'default',\n },\n variants: {\n isMenu: {\n true: 'h-auto w-full cursor-pointer justify-start',\n },\n size: {\n default: 'h-10 px-4 py-2',\n icon: 'size-10',\n lg: 'h-11 rounded-md px-8',\n none: '',\n sm: 'h-9 rounded-md px-3',\n sms: 'size-9 rounded-md px-0',\n xs: 'h-8 rounded-md px-3',\n },\n variant: {\n default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n destructive:\n 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n ghost: 'hover:bg-accent hover:text-accent-foreground',\n inlineLink: 'text-base text-primary underline underline-offset-4',\n link: 'text-primary underline-offset-4 hover:underline',\n outline:\n 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n secondary:\n 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n },\n },\n }\n);\n\nexport const Button = withRef<\n 'button',\n {\n asChild?: boolean;\n } & VariantProps\n>(({ asChild = false, className, isMenu, size, variant, ...props }, ref) => {\n const Comp = asChild ? Slot : 'button';\n\n return (\n \n );\n});\n", + "content": "import * as React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cn, withRef } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nexport const buttonVariants = cva(\n 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n {\n defaultVariants: {\n size: 'default',\n variant: 'default',\n },\n variants: {\n isMenu: {\n true: 'h-auto w-full cursor-pointer justify-start',\n },\n size: {\n default: 'h-10 px-4 py-2',\n icon: 'size-10',\n lg: 'h-11 rounded-md px-8',\n none: '',\n sm: 'h-9 rounded-md px-3',\n sms: 'size-9 rounded-md px-0',\n xs: 'h-8 rounded-md px-3',\n },\n variant: {\n default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n destructive:\n 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n ghost: 'hover:bg-accent hover:text-accent-foreground',\n inlineLink: 'text-base text-primary underline underline-offset-4',\n link: 'text-primary underline-offset-4 hover:underline',\n outline:\n 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n secondary:\n 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n },\n },\n }\n);\n\nexport const Button = withRef<\n 'button',\n {\n asChild?: boolean;\n } & VariantProps\n>(({ asChild = false, className, isMenu, size, variant, ...props }, ref) => {\n const Comp = asChild ? Slot : 'button';\n\n return (\n \n );\n});\n", "name": "button.tsx" } ], diff --git a/apps/www/public/registry/styles/default/checkbox.json b/apps/www/public/registry/styles/default/checkbox.json index a4153824be..110344ed91 100644 --- a/apps/www/public/registry/styles/default/checkbox.json +++ b/apps/www/public/registry/styles/default/checkbox.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { cn, withRef } from '@udecode/cn';\n\nimport { Icons } from '@/components/icons';\n\nexport const Checkbox = withRef(\n ({ className, ...props }, ref) => (\n \n \n \n \n \n )\n);\n", + "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { cn, withRef } from '@udecode/cn';\n\nimport { Icons } from '@/components/icons';\n\nexport const Checkbox = withRef(\n ({ className, ...props }, ref) => (\n \n \n \n \n \n )\n);\n", "name": "checkbox.tsx" } ], diff --git a/apps/www/public/registry/styles/default/cloud.json b/apps/www/public/registry/styles/default/cloud.json index 8563bba77e..e6c3e33df4 100644 --- a/apps/www/public/registry/styles/default/cloud.json +++ b/apps/www/public/registry/styles/default/cloud.json @@ -8,23 +8,23 @@ "name": "cloud.tsx" }, { - "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n type TCloudAttachmentElement,\n useCloudAttachmentElementState,\n} from '@udecode/plate-cloud';\nimport {\n PlateElement,\n type PlateElementProps,\n} from '@udecode/plate-common/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { StatusBar } from './cloud-status-bar';\n\nexport interface CloudAttachmentElementProps\n extends PlateElementProps {}\n\nexport function CloudAttachmentElement({\n className,\n ...props\n}: CloudAttachmentElementProps) {\n const { children, element } = props;\n\n const { focused, selected, upload } = useCloudAttachmentElementState({\n element,\n });\n\n return (\n \n
\n \n
\n
\n
{element.filename}
\n \n
\n {element.bytes} bytes\n
\n \n
\n \n {upload.status === 'success' && (\n \n \n \n )}\n \n {children}\n \n );\n}\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n type TCloudAttachmentElement,\n useCloudAttachmentElementState,\n} from '@udecode/plate-cloud';\nimport {\n type PlateElementProps,\n PlateElement,\n} from '@udecode/plate-common/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { StatusBar } from './cloud-status-bar';\n\nexport interface CloudAttachmentElementProps\n extends PlateElementProps {}\n\nexport function CloudAttachmentElement({\n className,\n ...props\n}: CloudAttachmentElementProps) {\n const { children, element } = props;\n\n const { focused, selected, upload } = useCloudAttachmentElementState({\n element,\n });\n\n return (\n \n
\n \n
\n
\n
{element.filename}
\n \n
\n {element.bytes} bytes\n
\n \n
\n \n {upload.status === 'success' && (\n \n \n \n )}\n \n {children}\n \n );\n}\n", "name": "cloud-attachment-element.tsx" }, { - "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n type TCloudImageElement,\n useCloudImageElementState,\n} from '@udecode/plate-cloud';\nimport {\n PlateElement,\n type PlateElementProps,\n} from '@udecode/plate-common/react';\n\nimport { ResizeControls } from './cloud-resize-controls';\nimport { StatusBar } from './cloud-status-bar';\n\nexport interface CloudImageElementProps\n extends PlateElementProps {}\n\nexport function CloudImageElement({\n className,\n ...props\n}: CloudImageElementProps) {\n const { children, element } = props;\n\n const { focused, selected, setSize, size, src, srcSet, upload } =\n useCloudImageElementState({ element });\n\n return (\n \n on the inside is display: 'block'.\n */\n verticalAlign: 'top',\n }}\n >\n {src === '' ? (\n \n ) : (\n \n )}\n
\n \n
\n {selected && focused && (\n \n )}\n \n {children}\n \n );\n}\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n type TCloudImageElement,\n useCloudImageElementState,\n} from '@udecode/plate-cloud';\nimport {\n type PlateElementProps,\n PlateElement,\n} from '@udecode/plate-common/react';\n\nimport { ResizeControls } from './cloud-resize-controls';\nimport { StatusBar } from './cloud-status-bar';\n\nexport interface CloudImageElementProps\n extends PlateElementProps {}\n\nexport function CloudImageElement({\n className,\n ...props\n}: CloudImageElementProps) {\n const { children, element } = props;\n\n const { focused, selected, setSize, size, src, srcSet, upload } =\n useCloudImageElementState({ element });\n\n return (\n \n on the inside is display: 'block'.\n */\n verticalAlign: 'top',\n }}\n contentEditable={false}\n >\n {src === '' ? (\n \n ) : (\n \n )}\n
\n \n
\n {selected && focused && (\n \n )}\n \n {children}\n \n );\n}\n", "name": "cloud-image-element.tsx" }, { - "content": "'use client';\n\nimport React, {\n type Dispatch,\n type SetStateAction,\n useCallback,\n useRef,\n useState,\n} from 'react';\n\nimport { resizeInWidth } from '@portive/client';\nimport {\n CloudImagePlugin,\n type TCloudImageElement,\n} from '@udecode/plate-cloud';\nimport { setNodes } from '@udecode/plate-common';\nimport { findNodePath, useEditorRef } from '@udecode/plate-common/react';\n\ntype ImageSize = { height: number; width: number };\n\ntype SetImageSize = Dispatch>;\n\n/** The resize label that shows the width/height of the image */\nfunction ResizeLabel({ size }: { size: { height: number; width: number } }) {\n const isBelow = size.width < 100 || size.height < 100;\n const bottom = isBelow ? -24 : 4;\n\n return (\n \n {size.width} × {size.height}\n \n );\n}\n\n/** The little divets on the resize handle bar. */\nconst barStyle = {\n background: 'rgba(255,255,255,0.75)',\n height: 16,\n position: 'absolute',\n top: 8,\n width: 1,\n} as const;\n\n/** The handle used to drag resize an image */\nfunction ResizeHandles({\n onMouseDown,\n}: {\n onMouseDown: React.MouseEventHandler;\n}) {\n return (\n <>\n {/* Invisible Handle */}\n \n {/* Visible Handle */}\n \n
\n
\n
\n
\n
\n \n );\n}\n\nexport function ResizeControls({\n element,\n setSize,\n size,\n}: {\n element: TCloudImageElement;\n setSize: SetImageSize;\n size: ImageSize;\n}) {\n const editor = useEditorRef();\n const [isResizing, setIsResizing] = useState(false);\n\n const { maxResizeWidth, minResizeWidth } =\n editor.getOptions(CloudImagePlugin);\n\n const currentSizeRef = useRef<{ height: number; width: number }>();\n\n const onMouseDown = useCallback(\n (mouseDownEvent: React.MouseEvent) => {\n setIsResizing(true);\n const startX = mouseDownEvent.clientX;\n const startWidth = size.width;\n const minWidth = minResizeWidth;\n const maxWidth = Math.min(element.maxWidth, maxResizeWidth);\n\n /**\n * Handle resize dragging through an event handler on mouseMove on the\n * document.\n */\n function onDocumentMouseMove(mouseMoveEvent: MouseEvent) {\n mouseMoveEvent.preventDefault();\n mouseMoveEvent.stopPropagation();\n /** Calculate the proposed width based on drag position */\n const proposedWidth = startWidth + mouseMoveEvent.clientX - startX;\n\n /** Constrain the proposed with between min, max and original width */\n const nextWidth = Math.min(maxWidth, Math.max(minWidth, proposedWidth));\n\n const currentSize = resizeInWidth(\n { height: element.maxHeight, width: element.maxWidth },\n nextWidth\n );\n\n currentSizeRef.current = currentSize;\n setSize(currentSize);\n }\n\n const originalCursor = document.body.style.cursor;\n\n /** When the user releases the mouse, remove all the event handlers */\n function onDocumentMouseUp() {\n setIsResizing(false);\n document.removeEventListener('mousemove', onDocumentMouseMove);\n document.removeEventListener('mouseup', onDocumentMouseUp);\n document.body.style.cursor = originalCursor;\n\n const at = findNodePath(editor, element);\n\n if (!currentSizeRef.current) return;\n\n setNodes(editor, currentSizeRef.current, { at });\n }\n\n /** Attach document event listeners */\n document.addEventListener('mousemove', onDocumentMouseMove);\n document.addEventListener('mouseup', onDocumentMouseUp);\n\n /**\n * While dragging, we want the cursor to be `ew-resize` (left-right arrow)\n * even if the cursor happens to not be exactly on the handle at the\n * moment due to a delay in the cursor moving to a location and the image\n * resizing to it.\n *\n * Also, image has max width/height and the cursor can fall outside of it.\n */\n document.body.style.cursor = 'ew-resize';\n },\n [size.width, minResizeWidth, element, maxResizeWidth, setSize, editor]\n );\n\n if (element.width < minResizeWidth) return null;\n\n return (\n <>\n {isResizing ? : null}\n \n \n );\n}\n", + "content": "'use client';\n\nimport React, {\n type Dispatch,\n type SetStateAction,\n useCallback,\n useRef,\n useState,\n} from 'react';\n\nimport { resizeInWidth } from '@portive/client';\nimport {\n type TCloudImageElement,\n CloudImagePlugin,\n} from '@udecode/plate-cloud';\nimport { setNodes } from '@udecode/plate-common';\nimport { findNodePath, useEditorRef } from '@udecode/plate-common/react';\n\ntype ImageSize = { height: number; width: number };\n\ntype SetImageSize = Dispatch>;\n\n/** The resize label that shows the width/height of the image */\nfunction ResizeLabel({ size }: { size: { height: number; width: number } }) {\n const isBelow = size.width < 100 || size.height < 100;\n const bottom = isBelow ? -24 : 4;\n\n return (\n \n {size.width} × {size.height}\n
\n );\n}\n\n/** The little divets on the resize handle bar. */\nconst barStyle = {\n background: 'rgba(255,255,255,0.75)',\n height: 16,\n position: 'absolute',\n top: 8,\n width: 1,\n} as const;\n\n/** The handle used to drag resize an image */\nfunction ResizeHandles({\n onMouseDown,\n}: {\n onMouseDown: React.MouseEventHandler;\n}) {\n return (\n <>\n {/* Invisible Handle */}\n \n {/* Visible Handle */}\n \n
\n
\n
\n
\n
\n \n );\n}\n\nexport function ResizeControls({\n element,\n setSize,\n size,\n}: {\n element: TCloudImageElement;\n setSize: SetImageSize;\n size: ImageSize;\n}) {\n const editor = useEditorRef();\n const [isResizing, setIsResizing] = useState(false);\n\n const { maxResizeWidth, minResizeWidth } =\n editor.getOptions(CloudImagePlugin);\n\n const currentSizeRef = useRef<{ height: number; width: number }>();\n\n const onMouseDown = useCallback(\n (mouseDownEvent: React.MouseEvent) => {\n setIsResizing(true);\n const startX = mouseDownEvent.clientX;\n const startWidth = size.width;\n const minWidth = minResizeWidth;\n const maxWidth = Math.min(element.maxWidth, maxResizeWidth);\n\n /**\n * Handle resize dragging through an event handler on mouseMove on the\n * document.\n */\n function onDocumentMouseMove(mouseMoveEvent: MouseEvent) {\n mouseMoveEvent.preventDefault();\n mouseMoveEvent.stopPropagation();\n /** Calculate the proposed width based on drag position */\n const proposedWidth = startWidth + mouseMoveEvent.clientX - startX;\n\n /** Constrain the proposed with between min, max and original width */\n const nextWidth = Math.min(maxWidth, Math.max(minWidth, proposedWidth));\n\n const currentSize = resizeInWidth(\n { height: element.maxHeight, width: element.maxWidth },\n nextWidth\n );\n\n currentSizeRef.current = currentSize;\n setSize(currentSize);\n }\n\n const originalCursor = document.body.style.cursor;\n\n /** When the user releases the mouse, remove all the event handlers */\n function onDocumentMouseUp() {\n setIsResizing(false);\n document.removeEventListener('mousemove', onDocumentMouseMove);\n document.removeEventListener('mouseup', onDocumentMouseUp);\n document.body.style.cursor = originalCursor;\n\n const at = findNodePath(editor, element);\n\n if (!currentSizeRef.current) return;\n\n setNodes(editor, currentSizeRef.current, { at });\n }\n\n /** Attach document event listeners */\n document.addEventListener('mousemove', onDocumentMouseMove);\n document.addEventListener('mouseup', onDocumentMouseUp);\n\n /**\n * While dragging, we want the cursor to be `ew-resize` (left-right arrow)\n * even if the cursor happens to not be exactly on the handle at the\n * moment due to a delay in the cursor moving to a location and the image\n * resizing to it.\n *\n * Also, image has max width/height and the cursor can fall outside of it.\n */\n document.body.style.cursor = 'ew-resize';\n },\n [size.width, minResizeWidth, element, maxResizeWidth, setSize, editor]\n );\n\n if (element.width < minResizeWidth) return null;\n\n return (\n <>\n {isResizing ? : null}\n \n \n );\n}\n", "name": "cloud-resize-controls.tsx" }, { - "content": "'use client';\n\nimport React, { type HTMLAttributes, useEffect, useRef, useState } from 'react';\n\nimport type { Upload, UploadProgress } from '@udecode/plate-cloud';\n\nimport { cn } from '@udecode/cn';\n\nexport function ProgressBar({\n className,\n upload,\n ...props\n}: {\n upload: UploadProgress;\n} & HTMLAttributes) {\n const [width, setWidth] = useState(null);\n const ref = useRef(null);\n\n useEffect(() => {\n if (ref.current) setWidth(ref.current.offsetWidth);\n }, []);\n\n /**\n * This formula looks a little funny because we want the `0` value of the\n * progress bar to have a width that is still the height of the progress bar.\n *\n * This is for a few reasons:\n *\n * 1. We want the zero point to start with the progress bar being a circle\n * 2. If we want rounded edges, if the width is shorter than the height, we get\n * an oval instead of a circle\n * 3. The halfway point looks visually wrong because of the circle progress bar\n * when it is technically at the halfway point.\n */\n const progressWidth =\n width == null\n ? 0\n : (upload.sentBytes / upload.totalBytes) * (width - 16) + 16;\n\n return (\n \n \n
\n );\n}\n\nexport function FailBar({\n className,\n ...props\n}: HTMLAttributes) {\n return (\n \n );\n}\n\nexport function StatusBar(props: {\n children?: React.ReactNode;\n upload: Upload;\n}) {\n const { children, upload } = props;\n\n switch (upload.status) {\n case 'progress': {\n return ;\n }\n case 'error': {\n return Upload Failed;\n }\n case 'not-found': {\n return Uploading...;\n }\n case 'success': {\n return children || null;\n }\n default: {\n throw new Error(`Should be unreachable`);\n }\n }\n}\n", + "content": "'use client';\n\nimport React, { type HTMLAttributes, useEffect, useRef, useState } from 'react';\n\nimport type { Upload, UploadProgress } from '@udecode/plate-cloud';\n\nimport { cn } from '@udecode/cn';\n\nexport function ProgressBar({\n className,\n upload,\n ...props\n}: {\n upload: UploadProgress;\n} & HTMLAttributes) {\n const [width, setWidth] = useState(null);\n const ref = useRef(null);\n\n useEffect(() => {\n if (ref.current) setWidth(ref.current.offsetWidth);\n }, []);\n\n /**\n * This formula looks a little funny because we want the `0` value of the\n * progress bar to have a width that is still the height of the progress bar.\n *\n * This is for a few reasons:\n *\n * 1. We want the zero point to start with the progress bar being a circle\n * 2. If we want rounded edges, if the width is shorter than the height, we get\n * an oval instead of a circle\n * 3. The halfway point looks visually wrong because of the circle progress bar\n * when it is technically at the halfway point.\n */\n const progressWidth =\n width == null\n ? 0\n : (upload.sentBytes / upload.totalBytes) * (width - 16) + 16;\n\n return (\n \n \n \n );\n}\n\nexport function FailBar({\n className,\n ...props\n}: HTMLAttributes) {\n return (\n \n );\n}\n\nexport function StatusBar(props: {\n upload: Upload;\n children?: React.ReactNode;\n}) {\n const { children, upload } = props;\n\n switch (upload.status) {\n case 'progress': {\n return ;\n }\n case 'error': {\n return Upload Failed;\n }\n case 'not-found': {\n return Uploading...;\n }\n case 'success': {\n return children || null;\n }\n default: {\n throw new Error(`Should be unreachable`);\n }\n }\n}\n", "name": "cloud-status-bar.tsx" }, { - "content": "'use client';\n\nimport React from 'react';\n\nimport { CloudPlugin } from '@udecode/plate-cloud';\nimport { useEditorPlugin } from '@udecode/plate-common/react';\n\nconst buttonStyle: React.CSSProperties = {\n background: '#f0f0f0',\n border: 'none',\n cursor: 'pointer',\n marginRight: 4,\n padding: 8,\n};\n\nexport function CloudToolbarButtons() {\n const { api, editor } = useEditorPlugin(CloudPlugin);\n\n const getSaveValue = () => {\n console.info('editor.children', editor.children);\n console.info('editor.cloud.getSaveValue()', api.cloud.getSaveValue());\n };\n\n const finishUploads = async () => {\n await api.cloud.finishUploads();\n };\n\n return (\n <>\n \n \n \n Note: After clicking a button, output will be shown in console.\n \n \n );\n}\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport { CloudPlugin } from '@udecode/plate-cloud';\nimport { useEditorPlugin } from '@udecode/plate-common/react';\n\nconst buttonStyle: React.CSSProperties = {\n background: '#f0f0f0',\n border: 'none',\n cursor: 'pointer',\n marginRight: 4,\n padding: 8,\n};\n\nexport function CloudToolbarButtons() {\n const { api, editor } = useEditorPlugin(CloudPlugin);\n\n const getSaveValue = () => {\n console.info('editor.children', editor.children);\n console.info('editor.cloud.getSaveValue()', api.cloud.getSaveValue());\n };\n\n const finishUploads = async () => {\n await api.cloud.finishUploads();\n };\n\n return (\n <>\n \n \n \n Note: After clicking a button, output will be shown in console.\n \n \n );\n}\n", "name": "cloud-toolbar-buttons.tsx" } ], diff --git a/apps/www/public/registry/styles/default/code-block-element.json b/apps/www/public/registry/styles/default/code-block-element.json index e65729dd83..3712682048 100644 --- a/apps/www/public/registry/styles/default/code-block-element.json +++ b/apps/www/public/registry/styles/default/code-block-element.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useCodeBlockElementState } from '@udecode/plate-code-block/react';\nimport { PlateElement } from '@udecode/plate-common/react';\n\nimport { CodeBlockCombobox } from './code-block-combobox';\n\nimport './code-block-element.css';\n\nexport const CodeBlockElement = withRef(\n ({ children, className, ...props }, ref) => {\n const { element } = props;\n const state = useCodeBlockElementState({ element });\n\n return (\n \n 
\n          {children}\n
\n\n {state.syntax && (\n \n \n \n )}\n \n );\n }\n);\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useCodeBlockElementState } from '@udecode/plate-code-block/react';\nimport { PlateElement } from '@udecode/plate-common/react';\n\nimport { CodeBlockCombobox } from './code-block-combobox';\n\nimport './code-block-element.css';\n\nexport const CodeBlockElement = withRef(\n ({ children, className, ...props }, ref) => {\n const { element } = props;\n const state = useCodeBlockElementState({ element });\n\n return (\n \n 
\n          {children}\n
\n\n {state.syntax && (\n \n \n \n )}\n \n );\n }\n);\n", "name": "code-block-element.tsx" }, { @@ -12,7 +12,7 @@ "name": "code-block-element.css" }, { - "content": "'use client';\n\n/* eslint-disable unicorn/prefer-export-from */\n\nimport React, { useState } from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n useCodeBlockCombobox,\n useCodeBlockComboboxState,\n} from '@udecode/plate-code-block/react';\n// Prism must be imported before all language files\nimport Prism from 'prismjs';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button } from './button';\nimport {\n Command,\n CommandEmpty,\n CommandInput,\n CommandItem,\n CommandList,\n} from './command';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\n\nimport 'prismjs/components/prism-antlr4.js';\nimport 'prismjs/components/prism-bash.js';\nimport 'prismjs/components/prism-c.js';\nimport 'prismjs/components/prism-cmake.js';\nimport 'prismjs/components/prism-coffeescript.js';\nimport 'prismjs/components/prism-cpp.js';\nimport 'prismjs/components/prism-csharp.js';\nimport 'prismjs/components/prism-css.js';\nimport 'prismjs/components/prism-dart.js';\n// import 'prismjs/components/prism-django.js';\nimport 'prismjs/components/prism-docker.js';\n// import 'prismjs/components/prism-ejs.js';\nimport 'prismjs/components/prism-erlang.js';\nimport 'prismjs/components/prism-git.js';\nimport 'prismjs/components/prism-go.js';\nimport 'prismjs/components/prism-graphql.js';\nimport 'prismjs/components/prism-groovy.js';\nimport 'prismjs/components/prism-java.js';\nimport 'prismjs/components/prism-javascript.js';\nimport 'prismjs/components/prism-json.js';\nimport 'prismjs/components/prism-jsx.js';\nimport 'prismjs/components/prism-kotlin.js';\nimport 'prismjs/components/prism-latex.js';\nimport 'prismjs/components/prism-less.js';\nimport 'prismjs/components/prism-lua.js';\nimport 'prismjs/components/prism-makefile.js';\nimport 'prismjs/components/prism-markdown.js';\nimport 'prismjs/components/prism-matlab.js';\nimport 'prismjs/components/prism-mermaid.js';\nimport 'prismjs/components/prism-objectivec.js';\nimport 'prismjs/components/prism-perl.js';\n// import 'prismjs/components/prism-php.js';\nimport 'prismjs/components/prism-powershell.js';\nimport 'prismjs/components/prism-properties.js';\nimport 'prismjs/components/prism-protobuf.js';\nimport 'prismjs/components/prism-python.js';\nimport 'prismjs/components/prism-r.js';\nimport 'prismjs/components/prism-ruby.js';\nimport 'prismjs/components/prism-sass.js';\nimport 'prismjs/components/prism-scala.js';\nimport 'prismjs/components/prism-scheme.js';\nimport 'prismjs/components/prism-scss.js';\nimport 'prismjs/components/prism-sql.js';\nimport 'prismjs/components/prism-swift.js';\nimport 'prismjs/components/prism-tsx.js';\nimport 'prismjs/components/prism-typescript.js';\nimport 'prismjs/components/prism-wasm.js';\nimport 'prismjs/components/prism-yaml.js';\n\nexport { Prism };\n\nconst languages: { label: string; value: string }[] = [\n { label: 'Plain Text', value: 'text' },\n { label: 'Bash', value: 'bash' },\n { label: 'CSS', value: 'css' },\n { label: 'Git', value: 'git' },\n { label: 'GraphQL', value: 'graphql' },\n { label: 'HTML', value: 'html' },\n { label: 'JavaScript', value: 'javascript' },\n { label: 'JSON', value: 'json' },\n { label: 'JSX', value: 'jsx' },\n { label: 'Markdown', value: 'markdown' },\n { label: 'SQL', value: 'sql' },\n { label: 'SVG', value: 'svg' },\n { label: 'TSX', value: 'tsx' },\n { label: 'TypeScript', value: 'typescript' },\n { label: 'WebAssembly', value: 'wasm' },\n { label: 'ANTLR4', value: 'antlr4' },\n { label: 'C', value: 'c' },\n { label: 'CMake', value: 'cmake' },\n { label: 'CoffeeScript', value: 'coffeescript' },\n { label: 'C#', value: 'csharp' },\n { label: 'Dart', value: 'dart' },\n { label: 'Django', value: 'django' },\n { label: 'Docker', value: 'docker' },\n { label: 'EJS', value: 'ejs' },\n { label: 'Erlang', value: 'erlang' },\n { label: 'Go', value: 'go' },\n { label: 'Groovy', value: 'groovy' },\n { label: 'Java', value: 'java' },\n { label: 'Kotlin', value: 'kotlin' },\n { label: 'LaTeX', value: 'latex' },\n { label: 'Less', value: 'less' },\n { label: 'Lua', value: 'lua' },\n { label: 'Makefile', value: 'makefile' },\n { label: 'Markup', value: 'markup' },\n { label: 'MATLAB', value: 'matlab' },\n { label: 'Mermaid', value: 'mermaid' },\n { label: 'Objective-C', value: 'objectivec' },\n { label: 'Perl', value: 'perl' },\n { label: 'PHP', value: 'php' },\n { label: 'PowerShell', value: 'powershell' },\n { label: '.properties', value: 'properties' },\n { label: 'Protocol Buffers', value: 'protobuf' },\n { label: 'Python', value: 'python' },\n { label: 'R', value: 'r' },\n { label: 'Ruby', value: 'ruby' },\n { label: 'Sass (Sass)', value: 'sass' },\n // FIXME: Error with current scala grammar\n { label: 'Scala', value: 'scala' },\n { label: 'Scheme', value: 'scheme' },\n { label: 'Sass (Scss)', value: 'scss' },\n { label: 'Shell', value: 'shell' },\n { label: 'Swift', value: 'swift' },\n { label: 'XML', value: 'xml' },\n { label: 'YAML', value: 'yaml' },\n];\n\nexport function CodeBlockCombobox() {\n const state = useCodeBlockComboboxState();\n const { commandItemProps } = useCodeBlockCombobox(state);\n\n const [open, setOpen] = useState(false);\n\n if (state.readOnly) return null;\n\n return (\n \n \n \n {state.value\n ? languages.find((language) => language.value === state.value)\n ?.label\n : 'Plain Text'}\n \n \n \n \n \n \n No language found.\n\n \n {languages.map((language) => (\n {\n commandItemProps.onSelect(_value);\n setOpen(false);\n }}\n value={language.value}\n >\n \n {language.label}\n \n ))}\n \n \n \n \n );\n}\n", + "content": "'use client';\n\n/* eslint-disable unicorn/prefer-export-from */\n\nimport React, { useState } from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n useCodeBlockCombobox,\n useCodeBlockComboboxState,\n} from '@udecode/plate-code-block/react';\n// Prism must be imported before all language files\nimport Prism from 'prismjs';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button } from './button';\nimport {\n Command,\n CommandEmpty,\n CommandInput,\n CommandItem,\n CommandList,\n} from './command';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\n\nimport 'prismjs/components/prism-antlr4.js';\nimport 'prismjs/components/prism-bash.js';\nimport 'prismjs/components/prism-c.js';\nimport 'prismjs/components/prism-cmake.js';\nimport 'prismjs/components/prism-coffeescript.js';\nimport 'prismjs/components/prism-cpp.js';\nimport 'prismjs/components/prism-csharp.js';\nimport 'prismjs/components/prism-css.js';\nimport 'prismjs/components/prism-dart.js';\n// import 'prismjs/components/prism-django.js';\nimport 'prismjs/components/prism-docker.js';\n// import 'prismjs/components/prism-ejs.js';\nimport 'prismjs/components/prism-erlang.js';\nimport 'prismjs/components/prism-git.js';\nimport 'prismjs/components/prism-go.js';\nimport 'prismjs/components/prism-graphql.js';\nimport 'prismjs/components/prism-groovy.js';\nimport 'prismjs/components/prism-java.js';\nimport 'prismjs/components/prism-javascript.js';\nimport 'prismjs/components/prism-json.js';\nimport 'prismjs/components/prism-jsx.js';\nimport 'prismjs/components/prism-kotlin.js';\nimport 'prismjs/components/prism-latex.js';\nimport 'prismjs/components/prism-less.js';\nimport 'prismjs/components/prism-lua.js';\nimport 'prismjs/components/prism-makefile.js';\nimport 'prismjs/components/prism-markdown.js';\nimport 'prismjs/components/prism-matlab.js';\nimport 'prismjs/components/prism-mermaid.js';\nimport 'prismjs/components/prism-objectivec.js';\nimport 'prismjs/components/prism-perl.js';\n// import 'prismjs/components/prism-php.js';\nimport 'prismjs/components/prism-powershell.js';\nimport 'prismjs/components/prism-properties.js';\nimport 'prismjs/components/prism-protobuf.js';\nimport 'prismjs/components/prism-python.js';\nimport 'prismjs/components/prism-r.js';\nimport 'prismjs/components/prism-ruby.js';\nimport 'prismjs/components/prism-sass.js';\nimport 'prismjs/components/prism-scala.js';\nimport 'prismjs/components/prism-scheme.js';\nimport 'prismjs/components/prism-scss.js';\nimport 'prismjs/components/prism-sql.js';\nimport 'prismjs/components/prism-swift.js';\nimport 'prismjs/components/prism-tsx.js';\nimport 'prismjs/components/prism-typescript.js';\nimport 'prismjs/components/prism-wasm.js';\nimport 'prismjs/components/prism-yaml.js';\n\nexport { Prism };\n\nconst languages: { label: string; value: string }[] = [\n { label: 'Plain Text', value: 'text' },\n { label: 'Bash', value: 'bash' },\n { label: 'CSS', value: 'css' },\n { label: 'Git', value: 'git' },\n { label: 'GraphQL', value: 'graphql' },\n { label: 'HTML', value: 'html' },\n { label: 'JavaScript', value: 'javascript' },\n { label: 'JSON', value: 'json' },\n { label: 'JSX', value: 'jsx' },\n { label: 'Markdown', value: 'markdown' },\n { label: 'SQL', value: 'sql' },\n { label: 'SVG', value: 'svg' },\n { label: 'TSX', value: 'tsx' },\n { label: 'TypeScript', value: 'typescript' },\n { label: 'WebAssembly', value: 'wasm' },\n { label: 'ANTLR4', value: 'antlr4' },\n { label: 'C', value: 'c' },\n { label: 'CMake', value: 'cmake' },\n { label: 'CoffeeScript', value: 'coffeescript' },\n { label: 'C#', value: 'csharp' },\n { label: 'Dart', value: 'dart' },\n { label: 'Django', value: 'django' },\n { label: 'Docker', value: 'docker' },\n { label: 'EJS', value: 'ejs' },\n { label: 'Erlang', value: 'erlang' },\n { label: 'Go', value: 'go' },\n { label: 'Groovy', value: 'groovy' },\n { label: 'Java', value: 'java' },\n { label: 'Kotlin', value: 'kotlin' },\n { label: 'LaTeX', value: 'latex' },\n { label: 'Less', value: 'less' },\n { label: 'Lua', value: 'lua' },\n { label: 'Makefile', value: 'makefile' },\n { label: 'Markup', value: 'markup' },\n { label: 'MATLAB', value: 'matlab' },\n { label: 'Mermaid', value: 'mermaid' },\n { label: 'Objective-C', value: 'objectivec' },\n { label: 'Perl', value: 'perl' },\n { label: 'PHP', value: 'php' },\n { label: 'PowerShell', value: 'powershell' },\n { label: '.properties', value: 'properties' },\n { label: 'Protocol Buffers', value: 'protobuf' },\n { label: 'Python', value: 'python' },\n { label: 'R', value: 'r' },\n { label: 'Ruby', value: 'ruby' },\n { label: 'Sass (Sass)', value: 'sass' },\n // FIXME: Error with current scala grammar\n { label: 'Scala', value: 'scala' },\n { label: 'Scheme', value: 'scheme' },\n { label: 'Sass (Scss)', value: 'scss' },\n { label: 'Shell', value: 'shell' },\n { label: 'Swift', value: 'swift' },\n { label: 'XML', value: 'xml' },\n { label: 'YAML', value: 'yaml' },\n];\n\nexport function CodeBlockCombobox() {\n const state = useCodeBlockComboboxState();\n const { commandItemProps } = useCodeBlockCombobox(state);\n\n const [open, setOpen] = useState(false);\n const [value, setValue] = useState('');\n\n if (state.readOnly) return null;\n\n const items = languages.filter(\n (language) =>\n !value ||\n language.label.toLowerCase().includes(value.toLowerCase()) ||\n language.value.toLowerCase().includes(value.toLowerCase())\n );\n\n return (\n \n \n \n {state.value\n ? languages.find((language) => language.value === state.value)\n ?.label\n : 'Plain Text'}\n \n \n \n \n \n setValue(value)}\n placeholder=\"Search language...\"\n />\n No language found.\n\n \n {items.map((language) => (\n {\n commandItemProps.onSelect(_value);\n setOpen(false);\n }}\n >\n \n {language.label}\n \n ))}\n \n \n \n \n );\n}\n", "name": "code-block-combobox.tsx" } ], diff --git a/apps/www/public/registry/styles/default/code-leaf.json b/apps/www/public/registry/styles/default/code-leaf.json index 8eff90361d..cd79bbcacd 100644 --- a/apps/www/public/registry/styles/default/code-leaf.json +++ b/apps/www/public/registry/styles/default/code-leaf.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const CodeLeaf = withRef(\n ({ children, className, ...props }, ref) => {\n return (\n \n {children}\n \n );\n }\n);\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const CodeLeaf = withRef(\n ({ children, className, ...props }, ref) => {\n return (\n \n {children}\n \n );\n }\n);\n", "name": "code-leaf.tsx" } ], diff --git a/apps/www/public/registry/styles/default/color-dropdown-menu.json b/apps/www/public/registry/styles/default/color-dropdown-menu.json index b5c595cfdc..cef1edcea4 100644 --- a/apps/www/public/registry/styles/default/color-dropdown-menu.json +++ b/apps/www/public/registry/styles/default/color-dropdown-menu.json @@ -2,7 +2,7 @@ "dependencies": [], "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n useColorDropdownMenu,\n useColorDropdownMenuState,\n} from '@udecode/plate-font/react';\n\nimport { DEFAULT_COLORS, DEFAULT_CUSTOM_COLORS } from './color-constants';\nimport { ColorPicker } from './color-picker';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport type TColor = {\n isBrightColor: boolean;\n name: string;\n value: string;\n};\n\ntype ColorDropdownMenuProps = {\n nodeType: string;\n tooltip?: string;\n} & DropdownMenuProps;\n\nexport function ColorDropdownMenu({\n children,\n nodeType,\n tooltip,\n}: ColorDropdownMenuProps) {\n const state = useColorDropdownMenuState({\n closeOnSelect: true,\n colors: DEFAULT_COLORS,\n customColors: DEFAULT_CUSTOM_COLORS,\n nodeType,\n });\n\n const { buttonProps, menuProps } = useColorDropdownMenu(state);\n\n return (\n \n \n \n {children}\n \n \n\n \n \n \n \n );\n}\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n useColorDropdownMenu,\n useColorDropdownMenuState,\n} from '@udecode/plate-font/react';\n\nimport { DEFAULT_COLORS, DEFAULT_CUSTOM_COLORS } from './color-constants';\nimport { ColorPicker } from './color-picker';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport type TColor = {\n isBrightColor: boolean;\n name: string;\n value: string;\n};\n\ntype ColorDropdownMenuProps = {\n nodeType: string;\n tooltip?: string;\n} & DropdownMenuProps;\n\nexport function ColorDropdownMenu({\n children,\n nodeType,\n tooltip,\n}: ColorDropdownMenuProps) {\n const state = useColorDropdownMenuState({\n closeOnSelect: true,\n colors: DEFAULT_COLORS,\n customColors: DEFAULT_CUSTOM_COLORS,\n nodeType,\n });\n\n const { buttonProps, menuProps } = useColorDropdownMenu(state);\n\n return (\n \n \n \n {children}\n \n \n\n \n \n \n \n );\n}\n", "name": "color-dropdown-menu.tsx" }, { @@ -10,19 +10,19 @@ "name": "color-constants.ts" }, { - "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\n\nimport { Icons } from '@/components/icons';\n\nimport type { TColor } from './color-dropdown-menu';\n\nimport { buttonVariants } from './button';\nimport { DropdownMenuItem } from './dropdown-menu';\nimport { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';\n\ntype ColorDropdownMenuItemProps = {\n isBrightColor: boolean;\n isSelected: boolean;\n name?: string;\n updateColor: (color: string) => void;\n value: string;\n} & DropdownMenuItemProps;\n\nexport function ColorDropdownMenuItem({\n className,\n isBrightColor,\n isSelected,\n name,\n updateColor,\n value,\n ...props\n}: ColorDropdownMenuItemProps) {\n const content = (\n {\n e.preventDefault();\n updateColor(value);\n }}\n style={{ backgroundColor: value }}\n {...props}\n >\n {isSelected ? : null}\n \n );\n\n return name ? (\n \n {content}\n {name}\n \n ) : (\n content\n );\n}\n\ntype ColorDropdownMenuItemsProps = {\n color?: string;\n colors: TColor[];\n updateColor: (color: string) => void;\n} & React.HTMLAttributes;\n\nexport function ColorDropdownMenuItems({\n className,\n color,\n colors,\n updateColor,\n ...props\n}: ColorDropdownMenuItemsProps) {\n return (\n \n {colors.map(({ isBrightColor, name, value }) => (\n \n ))}\n \n );\n}\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\n\nimport { Icons } from '@/components/icons';\n\nimport type { TColor } from './color-dropdown-menu';\n\nimport { buttonVariants } from './button';\nimport { DropdownMenuItem } from './dropdown-menu';\nimport { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';\n\ntype ColorDropdownMenuItemProps = {\n isBrightColor: boolean;\n isSelected: boolean;\n updateColor: (color: string) => void;\n value: string;\n name?: string;\n} & DropdownMenuItemProps;\n\nexport function ColorDropdownMenuItem({\n className,\n isBrightColor,\n isSelected,\n name,\n updateColor,\n value,\n ...props\n}: ColorDropdownMenuItemProps) {\n const content = (\n {\n e.preventDefault();\n updateColor(value);\n }}\n {...props}\n >\n {isSelected ? : null}\n \n );\n\n return name ? (\n \n {content}\n {name}\n \n ) : (\n content\n );\n}\n\ntype ColorDropdownMenuItemsProps = {\n colors: TColor[];\n updateColor: (color: string) => void;\n color?: string;\n} & React.HTMLAttributes;\n\nexport function ColorDropdownMenuItems({\n className,\n color,\n colors,\n updateColor,\n ...props\n}: ColorDropdownMenuItemsProps) {\n return (\n \n {colors.map(({ isBrightColor, name, value }) => (\n \n ))}\n \n );\n}\n", "name": "color-dropdown-menu-items.tsx" }, { - "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useComposedRef } from '@udecode/plate-common/react';\nimport { useColorInput } from '@udecode/plate-font/react';\n\nexport const ColorInput = withRef<'input'>(\n ({ children, className, value = '#000000', ...props }, ref) => {\n const { childProps, inputRef } = useColorInput();\n\n return (\n
\n {React.Children.map(children, (child) => {\n if (!child) return child;\n\n return React.cloneElement(child as React.ReactElement, childProps);\n })}\n\n \n
\n );\n }\n);\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useComposedRef } from '@udecode/plate-common/react';\nimport { useColorInput } from '@udecode/plate-font/react';\n\nexport const ColorInput = withRef<'input'>(\n ({ children, className, value = '#000000', ...props }, ref) => {\n const { childProps, inputRef } = useColorInput();\n\n return (\n
\n {React.Children.map(children, (child) => {\n if (!child) return child;\n\n return React.cloneElement(child as React.ReactElement, childProps);\n })}\n\n \n
\n );\n }\n);\n", "name": "color-input.tsx" }, { - "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\n\nimport type { TColor } from './color-dropdown-menu';\n\nimport { buttonVariants } from './button';\nimport { ColorDropdownMenuItems } from './color-dropdown-menu-items';\nimport { ColorsCustom } from './colors-custom';\nimport { DropdownMenuItem } from './dropdown-menu';\nimport { Separator } from './separator';\n\nexport const ColorPickerContent = withRef<\n 'div',\n {\n clearColor: () => void;\n color?: string;\n colors: TColor[];\n customColors: TColor[];\n updateColor: (color: string) => void;\n updateCustomColor: (color: string) => void;\n }\n>(\n (\n {\n className,\n clearColor,\n color,\n colors,\n customColors,\n updateColor,\n updateCustomColor,\n ...props\n },\n ref\n ) => {\n return (\n \n \n\n \n\n \n {color && (\n \n Clear\n \n )}\n \n );\n }\n);\n\nexport const ColorPicker = React.memo(\n ColorPickerContent,\n (prev, next) =>\n prev.color === next.color &&\n prev.colors === next.colors &&\n prev.customColors === next.customColors\n);\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\n\nimport type { TColor } from './color-dropdown-menu';\n\nimport { buttonVariants } from './button';\nimport { ColorDropdownMenuItems } from './color-dropdown-menu-items';\nimport { ColorsCustom } from './colors-custom';\nimport { DropdownMenuItem } from './dropdown-menu';\nimport { Separator } from './separator';\n\nexport const ColorPickerContent = withRef<\n 'div',\n {\n clearColor: () => void;\n colors: TColor[];\n customColors: TColor[];\n updateColor: (color: string) => void;\n updateCustomColor: (color: string) => void;\n color?: string;\n }\n>(\n (\n {\n className,\n clearColor,\n color,\n colors,\n customColors,\n updateColor,\n updateCustomColor,\n ...props\n },\n ref\n ) => {\n return (\n \n \n\n \n\n \n {color && (\n \n Clear\n \n )}\n \n );\n }\n);\n\nexport const ColorPicker = React.memo(\n ColorPickerContent,\n (prev, next) =>\n prev.color === next.color &&\n prev.colors === next.colors &&\n prev.customColors === next.customColors\n);\n", "name": "color-picker.tsx" }, { - "content": "'use client';\n\nimport React from 'react';\n\nimport {\n useColorsCustom,\n useColorsCustomState,\n} from '@udecode/plate-font/react';\n\nimport type { TColor } from './color-dropdown-menu';\n\nimport { buttonVariants } from './button';\nimport { ColorDropdownMenuItems } from './color-dropdown-menu-items';\nimport { ColorInput } from './color-input';\nimport { DropdownMenuItem } from './dropdown-menu';\n\ntype ColorsCustomProps = {\n color?: string;\n colors: TColor[];\n customColors: TColor[];\n updateColor: (color: string) => void;\n updateCustomColor: (color: string) => void;\n};\n\nexport function ColorsCustom({\n color,\n colors,\n customColors,\n updateColor,\n updateCustomColor,\n}: ColorsCustomProps) {\n const state = useColorsCustomState({\n color,\n colors,\n customColors,\n updateCustomColor,\n });\n const { inputProps, menuItemProps } = useColorsCustom(state);\n\n return (\n
\n \n \n CUSTOM\n \n \n\n \n
\n );\n}\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport {\n useColorsCustom,\n useColorsCustomState,\n} from '@udecode/plate-font/react';\n\nimport type { TColor } from './color-dropdown-menu';\n\nimport { buttonVariants } from './button';\nimport { ColorDropdownMenuItems } from './color-dropdown-menu-items';\nimport { ColorInput } from './color-input';\nimport { DropdownMenuItem } from './dropdown-menu';\n\ntype ColorsCustomProps = {\n colors: TColor[];\n customColors: TColor[];\n updateColor: (color: string) => void;\n updateCustomColor: (color: string) => void;\n color?: string;\n};\n\nexport function ColorsCustom({\n color,\n colors,\n customColors,\n updateColor,\n updateCustomColor,\n}: ColorsCustomProps) {\n const state = useColorsCustomState({\n color,\n colors,\n customColors,\n updateCustomColor,\n });\n const { inputProps, menuItemProps } = useColorsCustom(state);\n\n return (\n
\n \n \n CUSTOM\n \n \n\n \n
\n );\n}\n", "name": "colors-custom.tsx" } ], diff --git a/apps/www/public/registry/styles/default/column-element.json b/apps/www/public/registry/styles/default/column-element.json index eeca747724..efd0b00bc2 100644 --- a/apps/www/public/registry/styles/default/column-element.json +++ b/apps/www/public/registry/styles/default/column-element.json @@ -4,11 +4,11 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport type { TColumnElement } from '@udecode/plate-layout';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement, useElement, withHOC } from '@udecode/plate-common/react';\nimport { ResizableProvider } from '@udecode/plate-resizable';\nimport { useReadOnly } from 'slate-react';\n\nexport const ColumnElement = withHOC(\n ResizableProvider,\n withRef(({ children, className, ...props }, ref) => {\n const readOnly = useReadOnly();\n const { width } = useElement();\n\n return (\n \n {children}\n \n );\n })\n);\n", + "content": "import React from 'react';\n\nimport type { TColumnElement } from '@udecode/plate-layout';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement, useElement, withHOC } from '@udecode/plate-common/react';\nimport { ResizableProvider } from '@udecode/plate-resizable';\nimport { useReadOnly } from 'slate-react';\n\nexport const ColumnElement = withHOC(\n ResizableProvider,\n withRef(({ children, className, ...props }, ref) => {\n const readOnly = useReadOnly();\n const { width } = useElement();\n\n return (\n \n {children}\n \n );\n })\n);\n", "name": "column-element.tsx" }, { - "content": "import React from 'react';\n\nimport type { TColumnElement } from '@udecode/plate-layout';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n PlateElement,\n useElement,\n useRemoveNodeButton,\n} from '@udecode/plate-common/react';\nimport {\n ColumnItemPlugin,\n useColumnState,\n useDebouncePopoverOpen,\n} from '@udecode/plate-layout/react';\nimport { useReadOnly } from 'slate-react';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button } from './button';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\nimport { Separator } from './separator';\n\nexport const ColumnGroupElement = withRef(\n ({ children, className, ...props }, ref) => {\n return (\n \n \n
{children}
\n \n \n );\n }\n);\n\nexport function ColumnFloatingToolbar({ children }: React.PropsWithChildren) {\n const readOnly = useReadOnly();\n\n const {\n setDoubleColumn,\n setDoubleSideDoubleColumn,\n setLeftSideDoubleColumn,\n setRightSideDoubleColumn,\n setThreeColumn,\n } = useColumnState();\n\n const element = useElement(ColumnItemPlugin.key);\n\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n const isOpen = useDebouncePopoverOpen();\n\n if (readOnly) return <>{children};\n\n return (\n \n {children}\n e.preventDefault()}\n side=\"top\"\n sideOffset={10}\n >\n
\n \n \n \n \n \n \n \n\n \n \n
\n \n \n );\n}\n", + "content": "import React from 'react';\n\nimport type { TColumnElement } from '@udecode/plate-layout';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n PlateElement,\n useElement,\n useRemoveNodeButton,\n} from '@udecode/plate-common/react';\nimport {\n ColumnItemPlugin,\n useColumnState,\n useDebouncePopoverOpen,\n} from '@udecode/plate-layout/react';\nimport { useReadOnly } from 'slate-react';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button } from './button';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\nimport { Separator } from './separator';\n\nexport const ColumnGroupElement = withRef(\n ({ children, className, ...props }, ref) => {\n return (\n \n \n
{children}
\n \n \n );\n }\n);\n\nexport function ColumnFloatingToolbar({ children }: React.PropsWithChildren) {\n const readOnly = useReadOnly();\n\n const {\n setDoubleColumn,\n setDoubleSideDoubleColumn,\n setLeftSideDoubleColumn,\n setRightSideDoubleColumn,\n setThreeColumn,\n } = useColumnState();\n\n const element = useElement(ColumnItemPlugin.key);\n\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n const isOpen = useDebouncePopoverOpen();\n\n if (readOnly) return <>{children};\n\n return (\n \n {children}\n e.preventDefault()}\n align=\"center\"\n side=\"top\"\n sideOffset={10}\n >\n
\n \n \n \n \n \n \n \n\n \n \n
\n \n \n );\n}\n", "name": "column-group-element.tsx" } ], diff --git a/apps/www/public/registry/styles/default/command.json b/apps/www/public/registry/styles/default/command.json index eceb96983d..928c562333 100644 --- a/apps/www/public/registry/styles/default/command.json +++ b/apps/www/public/registry/styles/default/command.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "'use client';\n\nimport * as React from 'react';\n\nimport type { DialogProps } from '@radix-ui/react-dialog';\n\nimport { cn, createPrimitiveElement, withCn, withRef } from '@udecode/cn';\nimport { Command as CommandPrimitive } from 'cmdk';\n\nimport { Icons } from '@/components/icons';\n\nimport { Dialog, DialogContent } from './dialog';\n\nexport const Command = withCn(\n CommandPrimitive,\n 'flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground'\n);\n\nexport function CommandDialog({ children, ...props }: DialogProps) {\n return (\n \n \n \n {children}\n \n \n \n );\n}\n\nexport const CommandInput = withRef(\n ({ className, ...props }, ref) => (\n
\n \n \n
\n )\n);\n\nexport const CommandList = withCn(\n CommandPrimitive.List,\n 'max-h-[500px] overflow-y-auto overflow-x-hidden'\n);\n\nexport const CommandEmpty = withCn(\n CommandPrimitive.Empty,\n 'py-6 text-center text-sm'\n);\n\nexport const CommandGroup = withCn(\n CommandPrimitive.Group,\n 'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground'\n);\n\nexport const CommandSeparator = withCn(\n CommandPrimitive.Separator,\n '-mx-1 h-px bg-border'\n);\n\nexport const CommandItem = withCn(\n CommandPrimitive.Item,\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50'\n);\n\nexport const CommandShortcut = withCn(\n createPrimitiveElement('span'),\n 'ml-auto text-xs tracking-widest text-muted-foreground'\n);\n", + "content": "'use client';\n\nimport * as React from 'react';\n\nimport type { DialogProps } from '@radix-ui/react-dialog';\n\nimport { cn, createPrimitiveElement, withCn, withRef } from '@udecode/cn';\nimport { Command as CommandPrimitive } from 'cmdk';\n\nimport { Icons } from '@/components/icons';\n\nimport { Dialog, DialogContent } from './dialog';\n\nexport const Command = withCn(\n CommandPrimitive,\n 'flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground'\n);\n\nexport function CommandDialog({ children, ...props }: DialogProps) {\n return (\n \n \n \n {children}\n \n \n \n );\n}\n\nexport const CommandInput = withRef(\n ({ className, ...props }, ref) => (\n
\n \n \n
\n )\n);\n\nexport const CommandList = withCn(\n CommandPrimitive.List,\n 'max-h-[500px] overflow-y-auto overflow-x-hidden'\n);\n\nexport const CommandEmpty = withCn(\n CommandPrimitive.Empty,\n 'py-6 text-center text-sm'\n);\n\nexport const CommandGroup = withCn(\n CommandPrimitive.Group,\n 'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground'\n);\n\nexport const CommandSeparator = withCn(\n CommandPrimitive.Separator,\n '-mx-1 h-px bg-border'\n);\n\nexport const CommandItem = withCn(\n CommandPrimitive.Item,\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50'\n);\n\nexport const CommandShortcut = withCn(\n createPrimitiveElement('span'),\n 'ml-auto text-xs tracking-widest text-muted-foreground'\n);\n", "name": "command.tsx" } ], diff --git a/apps/www/public/registry/styles/default/comment-leaf.json b/apps/www/public/registry/styles/default/comment-leaf.json index 4bfd4a259a..bd3284b407 100644 --- a/apps/www/public/registry/styles/default/comment-leaf.json +++ b/apps/www/public/registry/styles/default/comment-leaf.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport type { TCommentText } from '@udecode/plate-comments';\n\nimport { cn } from '@udecode/cn';\nimport {\n useCommentLeaf,\n useCommentLeafState,\n} from '@udecode/plate-comments/react';\nimport { PlateLeaf, type PlateLeafProps } from '@udecode/plate-common/react';\n\nexport function CommentLeaf({\n className,\n ...props\n}: PlateLeafProps) {\n const { children, leaf, nodeProps } = props;\n\n const state = useCommentLeafState({ leaf });\n const { props: rootProps } = useCommentLeaf(state);\n\n if (!state.commentCount) return <>{children};\n\n let aboveChildren = <>{children};\n\n if (!state.isActive) {\n for (let i = 1; i < state.commentCount; i++) {\n aboveChildren = {aboveChildren};\n }\n }\n\n return (\n \n {aboveChildren}\n \n );\n}\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport type { TCommentText } from '@udecode/plate-comments';\n\nimport { cn } from '@udecode/cn';\nimport {\n useCommentLeaf,\n useCommentLeafState,\n} from '@udecode/plate-comments/react';\nimport { type PlateLeafProps, PlateLeaf } from '@udecode/plate-common/react';\n\nexport function CommentLeaf({\n className,\n ...props\n}: PlateLeafProps) {\n const { children, leaf, nodeProps } = props;\n\n const state = useCommentLeafState({ leaf });\n const { props: rootProps } = useCommentLeaf(state);\n\n if (!state.commentCount) return <>{children};\n\n let aboveChildren = <>{children};\n\n if (!state.isActive) {\n for (let i = 1; i < state.commentCount; i++) {\n aboveChildren = {aboveChildren};\n }\n }\n\n return (\n \n {aboveChildren}\n \n );\n}\n", "name": "comment-leaf.tsx" } ], diff --git a/apps/www/public/registry/styles/default/comments-popover.json b/apps/www/public/registry/styles/default/comments-popover.json index 4bf24586e7..fb536d1028 100644 --- a/apps/www/public/registry/styles/default/comments-popover.json +++ b/apps/www/public/registry/styles/default/comments-popover.json @@ -4,11 +4,11 @@ ], "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n CommentProvider,\n CommentsPositioner,\n SCOPE_ACTIVE_COMMENT,\n useFloatingCommentsContentState,\n useFloatingCommentsState,\n} from '@udecode/plate-comments/react';\nimport { PortalBody } from '@udecode/plate-common/react';\n\nimport { CommentCreateForm } from './comment-create-form';\nimport { CommentItem } from './comment-item';\nimport { CommentReplyItems } from './comment-reply-items';\nimport { popoverVariants } from './popover';\n\nexport type FloatingCommentsContentProps = {\n disableForm?: boolean;\n};\n\nexport function CommentsPopoverContent(props: FloatingCommentsContentProps) {\n const { disableForm } = props;\n\n const { activeCommentId, hasNoComment, myUserId, ref } =\n useFloatingCommentsContentState();\n\n return (\n \n
\n {!hasNoComment && (\n <>\n \n\n \n \n )}\n\n {!!myUserId && !disableForm && }\n
\n \n );\n}\n\nexport function CommentsPopover() {\n const { activeCommentId, loaded } = useFloatingCommentsState();\n\n if (!loaded || !activeCommentId) return null;\n\n return (\n \n \n \n \n \n );\n}\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n CommentProvider,\n CommentsPositioner,\n SCOPE_ACTIVE_COMMENT,\n useFloatingCommentsContentState,\n useFloatingCommentsState,\n} from '@udecode/plate-comments/react';\nimport { PortalBody } from '@udecode/plate-common/react';\n\nimport { CommentCreateForm } from './comment-create-form';\nimport { CommentItem } from './comment-item';\nimport { CommentReplyItems } from './comment-reply-items';\nimport { popoverVariants } from './popover';\n\nexport type FloatingCommentsContentProps = {\n disableForm?: boolean;\n};\n\nexport function CommentsPopoverContent(props: FloatingCommentsContentProps) {\n const { disableForm } = props;\n\n const { activeCommentId, hasNoComment, myUserId, ref } =\n useFloatingCommentsContentState();\n\n return (\n \n
\n {!hasNoComment && (\n <>\n \n\n \n \n )}\n\n {!!myUserId && !disableForm && }\n
\n \n );\n}\n\nexport function CommentsPopover() {\n const { activeCommentId, loaded } = useFloatingCommentsState();\n\n if (!loaded || !activeCommentId) return null;\n\n return (\n \n \n \n \n \n );\n}\n", "name": "comments-popover.tsx" }, { - "content": "'use client';\n\nimport React from 'react';\n\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport { useEditorPlugin } from '@udecode/plate-common/react';\n\nimport { Avatar, AvatarFallback, AvatarImage } from './avatar';\n\nexport function CommentAvatar({ userId }: { userId: null | string }) {\n const { useOption } = useEditorPlugin(CommentsPlugin);\n const user = useOption('userById', userId);\n\n if (!user) return null;\n\n return (\n \n \n {user.name?.[0]}\n \n );\n}\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport { useEditorPlugin } from '@udecode/plate-common/react';\n\nimport { Avatar, AvatarFallback, AvatarImage } from './avatar';\n\nexport function CommentAvatar({ userId }: { userId: string | null }) {\n const { useOption } = useEditorPlugin(CommentsPlugin);\n const user = useOption('userById', userId);\n\n if (!user) return null;\n\n return (\n \n \n {user.name?.[0]}\n \n );\n}\n", "name": "comment-avatar.tsx" }, { @@ -20,11 +20,11 @@ "name": "comment-item.tsx" }, { - "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n useCommentDeleteButton,\n useCommentDeleteButtonState,\n useCommentEditButton,\n useCommentEditButtonState,\n} from '@udecode/plate-comments/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button } from './button';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from './dropdown-menu';\n\nexport function CommentMoreDropdown() {\n const editButtonState = useCommentEditButtonState();\n const { props: editProps } = useCommentEditButton(editButtonState);\n const deleteButtonState = useCommentDeleteButtonState();\n const { props: deleteProps } = useCommentDeleteButton(deleteButtonState);\n\n return (\n \n \n \n \n \n Edit comment\n Delete comment\n \n \n );\n}\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n useCommentDeleteButton,\n useCommentDeleteButtonState,\n useCommentEditButton,\n useCommentEditButtonState,\n} from '@udecode/plate-comments/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button } from './button';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from './dropdown-menu';\n\nexport function CommentMoreDropdown() {\n const editButtonState = useCommentEditButtonState();\n const { props: editProps } = useCommentEditButton(editButtonState);\n const deleteButtonState = useCommentDeleteButtonState();\n const { props: deleteProps } = useCommentDeleteButton(deleteButtonState);\n\n return (\n \n \n \n \n \n Edit comment\n Delete comment\n \n \n );\n}\n", "name": "comment-more-dropdown.tsx" }, { - "content": "'use client';\n\nimport React from 'react';\n\nimport {\n SCOPE_ACTIVE_COMMENT,\n useCommentReplies,\n} from '@udecode/plate-comments/react';\n\nimport { CommentItem } from './comment-item';\n\nexport function CommentReplyItems() {\n const commentReplies = useCommentReplies(SCOPE_ACTIVE_COMMENT);\n\n return (\n <>\n {Object.keys(commentReplies).map((id) => (\n \n ))}\n \n );\n}\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport {\n SCOPE_ACTIVE_COMMENT,\n useCommentReplies,\n} from '@udecode/plate-comments/react';\n\nimport { CommentItem } from './comment-item';\n\nexport function CommentReplyItems() {\n const commentReplies = useCommentReplies(SCOPE_ACTIVE_COMMENT);\n\n return (\n <>\n {Object.keys(commentReplies).map((id) => (\n \n ))}\n \n );\n}\n", "name": "comment-reply-items.tsx" }, { diff --git a/apps/www/public/registry/styles/default/cursor-overlay.json b/apps/www/public/registry/styles/default/cursor-overlay.json index b96b443767..df7747e729 100644 --- a/apps/www/public/registry/styles/default/cursor-overlay.json +++ b/apps/www/public/registry/styles/default/cursor-overlay.json @@ -2,7 +2,7 @@ "dependencies": [], "files": [ { - "content": "import React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n createPlatePlugin,\n findEventRange,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport {\n type CursorData,\n CursorOverlay as CursorOverlayPrimitive,\n type CursorOverlayProps,\n type CursorProps,\n type CursorState,\n} from '@udecode/plate-cursor';\nimport { DndPlugin } from '@udecode/plate-dnd';\n\nexport function Cursor({\n caretPosition,\n classNames,\n data,\n disableCaret,\n disableSelection,\n selectionRects,\n}: CursorProps) {\n const { style, selectionStyle = style } = data ?? ({} as CursorData);\n\n return (\n <>\n {!disableSelection &&\n selectionRects.map((position, i) => (\n \n ))}\n {!disableCaret && caretPosition && (\n \n )}\n \n );\n}\n\nexport function CursorOverlay({ cursors, ...props }: CursorOverlayProps) {\n const editor = useEditorRef();\n const dynamicCursors = editor.useOption(DragOverCursorPlugin, 'cursors');\n\n const allCursors = { ...cursors, ...dynamicCursors };\n\n return (\n \n );\n}\n\nconst DragOverCursorPlugin = createPlatePlugin({\n handlers: {\n onDragEnd: ({ editor, plugin }) => {\n editor.setOption(plugin, 'cursors', {});\n },\n onDragLeave: ({ editor, plugin }) => {\n editor.setOption(plugin, 'cursors', {});\n },\n onDragOver: ({ editor, event, plugin }) => {\n if (editor.getOptions(DndPlugin).isDragging) return;\n\n const range = findEventRange(editor, event);\n\n if (!range) return;\n\n editor.setOption(plugin, 'cursors', {\n drag: {\n data: {\n style: {\n backgroundColor: 'hsl(222.2 47.4% 11.2%)',\n width: 3,\n },\n },\n key: 'drag',\n selection: range,\n },\n });\n },\n onDrop: ({ editor, plugin }) => {\n editor.setOption(plugin, 'cursors', {});\n },\n },\n key: 'dragOverCursor',\n options: { cursors: {} as Record> },\n});\n", + "content": "import React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n createPlatePlugin,\n findEventRange,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport {\n type CursorData,\n type CursorOverlayProps,\n type CursorProps,\n type CursorState,\n CursorOverlay as CursorOverlayPrimitive,\n} from '@udecode/plate-cursor';\nimport { DndPlugin } from '@udecode/plate-dnd';\n\nexport function Cursor({\n caretPosition,\n classNames,\n data,\n disableCaret,\n disableSelection,\n selectionRects,\n}: CursorProps) {\n const { style, selectionStyle = style } = data ?? ({} as CursorData);\n\n return (\n <>\n {!disableSelection &&\n selectionRects.map((position, i) => (\n \n ))}\n {!disableCaret && caretPosition && (\n \n )}\n \n );\n}\n\nexport function CursorOverlay({ cursors, ...props }: CursorOverlayProps) {\n const editor = useEditorRef();\n const dynamicCursors = editor.useOption(DragOverCursorPlugin, 'cursors');\n\n const allCursors = { ...cursors, ...dynamicCursors };\n\n return (\n \n );\n}\n\nconst DragOverCursorPlugin = createPlatePlugin({\n key: 'dragOverCursor',\n options: { cursors: {} as Record> },\n handlers: {\n onDragEnd: ({ editor, plugin }) => {\n editor.setOption(plugin, 'cursors', {});\n },\n onDragLeave: ({ editor, plugin }) => {\n editor.setOption(plugin, 'cursors', {});\n },\n onDragOver: ({ editor, event, plugin }) => {\n if (editor.getOptions(DndPlugin).isDragging) return;\n\n const range = findEventRange(editor, event);\n\n if (!range) return;\n\n editor.setOption(plugin, 'cursors', {\n drag: {\n key: 'drag',\n data: {\n style: {\n backgroundColor: 'hsl(222.2 47.4% 11.2%)',\n width: 3,\n },\n },\n selection: range,\n },\n });\n },\n onDrop: ({ editor, plugin }) => {\n editor.setOption(plugin, 'cursors', {});\n },\n },\n});\n", "name": "cursor-overlay.tsx" } ], diff --git a/apps/www/public/registry/styles/default/date-element.json b/apps/www/public/registry/styles/default/date-element.json index 9f3910723a..9c9b69eab2 100644 --- a/apps/www/public/registry/styles/default/date-element.json +++ b/apps/www/public/registry/styles/default/date-element.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "'use client';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { setNodes } from '@udecode/plate-common';\nimport { PlateElement, findNodePath } from '@udecode/plate-common/react';\n\nimport { Calendar } from './calendar';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\n\nexport const DateElement = withRef(\n ({ children, className, ...props }, ref) => {\n const { editor, element } = props;\n\n return (\n \n \n \n \n {element.date ? (\n (() => {\n const today = new Date();\n const elementDate = new Date(element.date as string);\n const isToday =\n elementDate.getDate() === today.getDate() &&\n elementDate.getMonth() === today.getMonth() &&\n elementDate.getFullYear() === today.getFullYear();\n\n const isYesterday =\n new Date(\n today.setDate(today.getDate() - 1)\n ).toDateString() === elementDate.toDateString();\n const isTomorrow =\n new Date(\n today.setDate(today.getDate() + 2)\n ).toDateString() === elementDate.toDateString();\n\n if (isToday) return 'Today';\n if (isYesterday) return 'Yesterday';\n if (isTomorrow) return 'Tomorrow';\n\n return elementDate.toLocaleDateString(undefined, {\n day: 'numeric',\n month: 'long',\n year: 'numeric',\n });\n })()\n ) : (\n Pick a date\n )}\n \n \n \n {\n if (!date) return;\n\n setNodes(\n editor,\n { date: date.toDateString() },\n { at: findNodePath(editor, element) }\n );\n }}\n selected={new Date(element.date as string)}\n />\n \n \n {children}\n \n );\n }\n);\n", + "content": "'use client';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { setNodes } from '@udecode/plate-common';\nimport { PlateElement, findNodePath } from '@udecode/plate-common/react';\n\nimport { Calendar } from './calendar';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\n\nexport const DateElement = withRef(\n ({ children, className, ...props }, ref) => {\n const { editor, element } = props;\n\n return (\n \n \n \n \n {element.date ? (\n (() => {\n const today = new Date();\n const elementDate = new Date(element.date as string);\n const isToday =\n elementDate.getDate() === today.getDate() &&\n elementDate.getMonth() === today.getMonth() &&\n elementDate.getFullYear() === today.getFullYear();\n\n const isYesterday =\n new Date(\n today.setDate(today.getDate() - 1)\n ).toDateString() === elementDate.toDateString();\n const isTomorrow =\n new Date(\n today.setDate(today.getDate() + 2)\n ).toDateString() === elementDate.toDateString();\n\n if (isToday) return 'Today';\n if (isYesterday) return 'Yesterday';\n if (isTomorrow) return 'Tomorrow';\n\n return elementDate.toLocaleDateString(undefined, {\n day: 'numeric',\n month: 'long',\n year: 'numeric',\n });\n })()\n ) : (\n Pick a date\n )}\n \n \n \n {\n if (!date) return;\n\n setNodes(\n editor,\n { date: date.toDateString() },\n { at: findNodePath(editor, element) }\n );\n }}\n mode=\"single\"\n initialFocus\n />\n \n \n {children}\n \n );\n }\n);\n", "name": "date-element.tsx" } ], diff --git a/apps/www/public/registry/styles/default/dialog.json b/apps/www/public/registry/styles/default/dialog.json index 8bf0aadd60..2d90e9de98 100644 --- a/apps/www/public/registry/styles/default/dialog.json +++ b/apps/www/public/registry/styles/default/dialog.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { cn, createPrimitiveElement, withCn, withRef } from '@udecode/cn';\n\nimport { Icons } from '@/components/icons';\n\nexport const Dialog = DialogPrimitive.Root;\n\nexport const DialogTrigger = DialogPrimitive.Trigger;\n\nexport const DialogPortal = DialogPrimitive.Portal;\n\nexport const DialogClose = DialogPrimitive.Close;\n\nexport const DialogOverlay = withCn(\n DialogPrimitive.Overlay,\n 'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0'\n);\n\nexport const DialogContent = withRef(\n ({ children, className, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n )\n);\n\nexport const DialogHeader = withCn(\n createPrimitiveElement('div'),\n 'flex flex-col space-y-1.5 text-center sm:text-left'\n);\n\nexport const DialogFooter = withCn(\n createPrimitiveElement('div'),\n 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2'\n);\n\nexport const DialogTitle = withCn(\n DialogPrimitive.Title,\n 'text-lg font-semibold leading-none tracking-tight'\n);\n\nexport const DialogDescription = withCn(\n DialogPrimitive.Description,\n 'text-sm text-muted-foreground'\n);\n", + "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { cn, createPrimitiveElement, withCn, withRef } from '@udecode/cn';\n\nimport { Icons } from '@/components/icons';\n\nexport const Dialog = DialogPrimitive.Root;\n\nexport const DialogTrigger = DialogPrimitive.Trigger;\n\nexport const DialogPortal = DialogPrimitive.Portal;\n\nexport const DialogClose = DialogPrimitive.Close;\n\nexport const DialogOverlay = withCn(\n DialogPrimitive.Overlay,\n 'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0'\n);\n\nexport const DialogContent = withRef(\n ({ children, className, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n )\n);\n\nexport const DialogHeader = withCn(\n createPrimitiveElement('div'),\n 'flex flex-col space-y-1.5 text-center sm:text-left'\n);\n\nexport const DialogFooter = withCn(\n createPrimitiveElement('div'),\n 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2'\n);\n\nexport const DialogTitle = withCn(\n DialogPrimitive.Title,\n 'text-lg font-semibold leading-none tracking-tight'\n);\n\nexport const DialogDescription = withCn(\n DialogPrimitive.Description,\n 'text-sm text-muted-foreground'\n);\n", "name": "dialog.tsx" } ], diff --git a/apps/www/public/registry/styles/default/draggable.json b/apps/www/public/registry/styles/default/draggable.json index ca1fd472b3..25b1577c39 100644 --- a/apps/www/public/registry/styles/default/draggable.json +++ b/apps/www/public/registry/styles/default/draggable.json @@ -6,15 +6,17 @@ ], "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport type { ClassNames, TEditor } from '@udecode/plate-common';\nimport type { DropTargetMonitor } from 'react-dnd';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n type PlateElementProps,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport {\n type DragItemNode,\n useDraggable,\n useDraggableState,\n} from '@udecode/plate-dnd';\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n Tooltip,\n TooltipContent,\n TooltipPortal,\n TooltipTrigger,\n} from './tooltip';\n\nexport interface DraggableProps\n extends PlateElementProps,\n ClassNames<{\n /** Block. */\n block: string;\n\n /** Block and gutter. */\n blockAndGutter: string;\n\n /** Block toolbar in the gutter. */\n blockToolbar: string;\n\n /**\n * Block toolbar wrapper in the gutter left. It has the height of a line\n * of the block.\n */\n blockToolbarWrapper: string;\n\n blockWrapper: string;\n\n /** Button to dnd the block, in the block toolbar. */\n dragHandle: string;\n\n /** Icon of the drag button, in the drag icon. */\n dragIcon: string;\n\n /** Show a dropline above or below the block when dragging a block. */\n dropLine: string;\n\n /** Gutter at the left side of the editor. It has the height of the block */\n gutterLeft: string;\n }> {\n /**\n * Intercepts the drop handling. If `false` is returned, the default drop\n * behavior is called after. If `true` is returned, the default behavior is\n * not called.\n */\n onDropHandler?: (\n editor: TEditor,\n props: {\n dragItem: DragItemNode;\n id: string;\n monitor: DropTargetMonitor;\n nodeRef: any;\n }\n ) => boolean;\n}\n\nconst DragHandle = () => {\n const editor = useEditorRef();\n\n return (\n \n \n {\n event.stopPropagation();\n event.preventDefault();\n\n // if (element.id) {\n // editor.getApi(BlockSelectionPlugin).blockSelection.addSelectedRow(element.id as string);\n // api.blockContextMenu.show(editor.id, event as any);\n // }\n }}\n onMouseDown={() => {\n editor\n .getApi(BlockSelectionPlugin)\n .blockSelection.resetSelectedIds();\n }}\n />\n \n \n Drag to move\n \n \n );\n};\n\nexport const Draggable = withRef<'div', DraggableProps>(\n ({ className, classNames = {}, onDropHandler, ...props }, ref) => {\n const { children, element } = props;\n\n const state = useDraggableState({ element, onDropHandler });\n const { dropLine, isDragging, isHovered } = state;\n const {\n droplineProps,\n groupProps,\n gutterLeftProps,\n handleRef,\n previewRef,\n } = useDraggable(state);\n\n return (\n \n \n
\n \n \n {isHovered && }\n
\n \n \n \n\n
\n {children}\n\n {!!dropLine && (\n \n )}\n
\n \n );\n }\n);\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport type { ClassNames, TEditor } from '@udecode/plate-common';\nimport type { DropTargetMonitor } from 'react-dnd';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n type PlateElementProps,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport {\n type DragItemNode,\n useDraggable,\n useDraggableState,\n} from '@udecode/plate-dnd';\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n Tooltip,\n TooltipContent,\n TooltipPortal,\n TooltipTrigger,\n} from './tooltip';\n\nexport interface DraggableProps\n extends PlateElementProps,\n ClassNames<{\n /** Block. */\n block: string;\n\n /** Block and gutter. */\n blockAndGutter: string;\n\n /** Block toolbar in the gutter. */\n blockToolbar: string;\n\n /**\n * Block toolbar wrapper in the gutter left. It has the height of a line\n * of the block.\n */\n blockToolbarWrapper: string;\n\n blockWrapper: string;\n\n /** Button to dnd the block, in the block toolbar. */\n dragHandle: string;\n\n /** Icon of the drag button, in the drag icon. */\n dragIcon: string;\n\n /** Show a dropline above or below the block when dragging a block. */\n dropLine: string;\n\n /** Gutter at the left side of the editor. It has the height of the block */\n gutterLeft: string;\n }> {\n /**\n * Intercepts the drop handling. If `false` is returned, the default drop\n * behavior is called after. If `true` is returned, the default behavior is\n * not called.\n */\n onDropHandler?: (\n editor: TEditor,\n props: {\n id: string;\n dragItem: DragItemNode;\n monitor: DropTargetMonitor;\n nodeRef: any;\n }\n ) => boolean;\n}\n\nconst DragHandle = () => {\n const editor = useEditorRef();\n\n return (\n \n \n {\n event.stopPropagation();\n event.preventDefault();\n\n // if (element.id) {\n // editor.getApi(BlockSelectionPlugin).blockSelection.addSelectedRow(element.id as string);\n // api.blockContextMenu.show(editor.id, event as any);\n // }\n }}\n onMouseDown={() => {\n editor\n .getApi(BlockSelectionPlugin)\n .blockSelection.resetSelectedIds();\n }}\n />\n \n \n Drag to move\n \n \n );\n};\n\nexport const Draggable = withRef<'div', DraggableProps>(\n ({ className, classNames = {}, onDropHandler, ...props }, ref) => {\n const { children, element } = props;\n\n const state = useDraggableState({ element, onDropHandler });\n const { dropLine, isDragging, isHovered } = state;\n const {\n droplineProps,\n groupProps,\n gutterLeftProps,\n previewRef,\n handleRef,\n } = useDraggable(state);\n\n return (\n \n \n
\n \n \n {isHovered && }\n
\n \n \n \n\n
\n {children}\n\n {!!dropLine && (\n \n )}\n
\n \n );\n }\n);\n", "name": "draggable.tsx" }, { - "content": "import type { FC } from 'react';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport {\n ParagraphPlugin,\n createNodesWithHOC,\n} from '@udecode/plate-common/react';\nimport {\n type WithDraggableOptions,\n withDraggable as withDraggablePrimitive,\n} from '@udecode/plate-dnd';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ColumnPlugin } from '@udecode/plate-layout';\nimport {\n BulletedListPlugin,\n NumberedListPlugin,\n} from '@udecode/plate-list/react';\nimport {\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n} from '@udecode/plate-media';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { Draggable, type DraggableProps } from './draggable';\n\nexport const withDraggable = (\n Component: FC,\n options?: WithDraggableOptions<\n Partial>\n >\n) =>\n withDraggablePrimitive(Draggable, Component, options as any);\n\nexport const withDraggablesPrimitive = createNodesWithHOC(withDraggable);\n\nexport const withDraggables = (components: any) => {\n return withDraggablesPrimitive(components, [\n {\n keys: [\n ParagraphPlugin.key,\n BulletedListPlugin.key,\n NumberedListPlugin.key,\n ],\n level: 0,\n },\n {\n draggableProps: {\n classNames: {\n blockToolbarWrapper: 'h-[1.3em]',\n gutterLeft: 'px-0 pb-1 text-[1.875em]',\n },\n },\n key: HEADING_KEYS.h1,\n },\n {\n draggableProps: {\n classNames: {\n blockToolbarWrapper: 'h-[1.3em]',\n gutterLeft: 'px-0 pb-1 text-[1.5em]',\n },\n },\n key: HEADING_KEYS.h2,\n },\n {\n draggableProps: {\n classNames: {\n blockToolbarWrapper: 'h-[1.3em]',\n gutterLeft: 'pt-[2px] px-0 pb-1 text-[1.25em]',\n },\n },\n key: HEADING_KEYS.h3,\n },\n {\n draggableProps: {\n classNames: {\n blockToolbarWrapper: 'h-[1.3em]',\n gutterLeft: 'pt-[3px] px-0 pb-0 text-[1.1em]',\n },\n },\n keys: [HEADING_KEYS.h4, HEADING_KEYS.h5],\n },\n {\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-[3px] px-0 pb-0',\n },\n },\n keys: [ParagraphPlugin.key],\n },\n {\n draggableProps: {\n classNames: {\n gutterLeft: 'px-0 pb-0',\n },\n },\n keys: [HEADING_KEYS.h6, BulletedListPlugin.key, NumberedListPlugin.key],\n },\n {\n draggableProps: {\n classNames: {\n gutterLeft: 'px-0 pb-0',\n },\n },\n key: BlockquotePlugin.key,\n },\n {\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-6 px-0 pb-0',\n },\n },\n key: CodeBlockPlugin.key,\n },\n {\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-0 px-0 pb-0',\n },\n },\n key: ImagePlugin.key,\n },\n {\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-0 px-0 pb-0',\n },\n },\n key: MediaEmbedPlugin.key,\n },\n {\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-0 px-0 pb-0',\n },\n },\n key: ExcalidrawPlugin.key,\n },\n {\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-0 px-0 pb-0',\n },\n },\n key: TogglePlugin.key,\n },\n {\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-0 px-0 pb-0',\n },\n },\n key: ColumnPlugin.key,\n },\n {\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-3 px-0 pb-0',\n },\n },\n key: PlaceholderPlugin.key,\n },\n {\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-3 px-0 pb-0',\n },\n },\n key: TablePlugin.key,\n },\n ]);\n};\n", + "content": "import type { FC } from 'react';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport {\n ParagraphPlugin,\n createNodesWithHOC,\n} from '@udecode/plate-common/react';\nimport {\n type WithDraggableOptions,\n withDraggable as withDraggablePrimitive,\n} from '@udecode/plate-dnd';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport {\n BulletedListPlugin,\n NumberedListPlugin,\n} from '@udecode/plate-list/react';\nimport {\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n} from '@udecode/plate-media/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { type DraggableProps, Draggable } from './draggable';\n\nexport const withDraggable = (\n Component: FC,\n options?: WithDraggableOptions<\n Partial>\n >\n) =>\n withDraggablePrimitive(Draggable, Component, options as any);\n\nexport const withDraggablesPrimitive = createNodesWithHOC(withDraggable);\n\nexport const withDraggables = (components: any) => {\n return withDraggablesPrimitive(components, [\n {\n keys: [\n ParagraphPlugin.key,\n BulletedListPlugin.key,\n NumberedListPlugin.key,\n ],\n level: 0,\n },\n {\n key: HEADING_KEYS.h1,\n draggableProps: {\n classNames: {\n blockToolbarWrapper: 'h-[1.3em]',\n gutterLeft: 'px-0 pb-1 text-[1.875em]',\n },\n },\n },\n {\n key: HEADING_KEYS.h2,\n draggableProps: {\n classNames: {\n blockToolbarWrapper: 'h-[1.3em]',\n gutterLeft: 'px-0 pb-1 text-[1.5em]',\n },\n },\n },\n {\n key: HEADING_KEYS.h3,\n draggableProps: {\n classNames: {\n blockToolbarWrapper: 'h-[1.3em]',\n gutterLeft: 'pt-[2px] px-0 pb-1 text-[1.25em]',\n },\n },\n },\n {\n keys: [HEADING_KEYS.h4, HEADING_KEYS.h5],\n draggableProps: {\n classNames: {\n blockToolbarWrapper: 'h-[1.3em]',\n gutterLeft: 'pt-[3px] px-0 pb-0 text-[1.1em]',\n },\n },\n },\n {\n keys: [ParagraphPlugin.key],\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-[3px] px-0 pb-0',\n },\n },\n },\n {\n keys: [HEADING_KEYS.h6, BulletedListPlugin.key, NumberedListPlugin.key],\n draggableProps: {\n classNames: {\n gutterLeft: 'px-0 pb-0',\n },\n },\n },\n {\n key: BlockquotePlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'px-0 pb-0',\n },\n },\n },\n {\n key: CodeBlockPlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-6 px-0 pb-0',\n },\n },\n },\n {\n key: ImagePlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-0 px-0 pb-0',\n },\n },\n },\n {\n key: MediaEmbedPlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-0 px-0 pb-0',\n },\n },\n },\n {\n key: ExcalidrawPlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-0 px-0 pb-0',\n },\n },\n },\n {\n key: TogglePlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-0 px-0 pb-0',\n },\n },\n },\n {\n key: ColumnPlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-0 px-0 pb-0',\n },\n },\n },\n {\n key: PlaceholderPlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-3 px-0 pb-0',\n },\n },\n },\n {\n key: TablePlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-3 px-0 pb-0',\n },\n },\n },\n ]);\n};\n", "name": "with-draggables.tsx" } ], "name": "draggable", - "registryDependencies": ["tooltip"], + "registryDependencies": [ + "tooltip" + ], "type": "components:plate-ui" -} +} \ No newline at end of file diff --git a/apps/www/public/registry/styles/default/dropdown-menu.json b/apps/www/public/registry/styles/default/dropdown-menu.json index d3c6cca097..727497f3e1 100644 --- a/apps/www/public/registry/styles/default/dropdown-menu.json +++ b/apps/www/public/registry/styles/default/dropdown-menu.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "'use client';\n\nimport * as React from 'react';\nimport { useCallback, useState } from 'react';\n\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport {\n cn,\n createPrimitiveElement,\n withCn,\n withProps,\n withRef,\n withVariants,\n} from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nimport { Icons } from '@/components/icons';\n\nexport const DropdownMenu = DropdownMenuPrimitive.Root;\n\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\n\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\n\nexport const DropdownMenuPortal = DropdownMenuPrimitive.Portal;\n\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\n\nexport const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nexport const DropdownMenuSubTrigger = withRef<\n typeof DropdownMenuPrimitive.SubTrigger,\n {\n inset?: boolean;\n }\n>(({ children, className, inset, ...props }, ref) => (\n \n {children}\n \n \n));\n\nexport const DropdownMenuSubContent = withCn(\n DropdownMenuPrimitive.SubContent,\n 'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'\n);\n\nconst DropdownMenuContentVariants = withProps(DropdownMenuPrimitive.Content, {\n className: cn(\n 'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'\n ),\n sideOffset: 4,\n});\n\nexport const DropdownMenuContent = withRef<\n typeof DropdownMenuPrimitive.Content\n>(({ ...props }, ref) => (\n \n \n \n));\n\nconst menuItemVariants = cva(\n cn(\n 'relative flex h-9 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',\n 'focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50'\n ),\n {\n variants: {\n inset: {\n true: 'pl-8',\n },\n },\n }\n);\n\nexport const DropdownMenuItem = withVariants(\n DropdownMenuPrimitive.Item,\n menuItemVariants,\n ['inset']\n);\n\nexport const DropdownMenuCheckboxItem = withRef<\n typeof DropdownMenuPrimitive.CheckboxItem\n>(({ children, className, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n));\n\nexport const DropdownMenuRadioItem = withRef<\n typeof DropdownMenuPrimitive.RadioItem,\n {\n hideIcon?: boolean;\n }\n>(({ children, className, hideIcon, ...props }, ref) => (\n \n {!hideIcon && (\n \n \n \n \n \n )}\n {children}\n \n));\n\nconst dropdownMenuLabelVariants = cva(\n cn('select-none px-2 py-1.5 text-sm font-semibold'),\n {\n variants: {\n inset: {\n true: 'pl-8',\n },\n },\n }\n);\n\nexport const DropdownMenuLabel = withVariants(\n DropdownMenuPrimitive.Label,\n dropdownMenuLabelVariants,\n ['inset']\n);\n\nexport const DropdownMenuSeparator = withCn(\n DropdownMenuPrimitive.Separator,\n '-mx-1 my-1 h-px bg-muted'\n);\n\nexport const DropdownMenuShortcut = withCn(\n createPrimitiveElement('span'),\n 'ml-auto text-xs tracking-widest opacity-60'\n);\n\nexport const useOpenState = () => {\n const [open, setOpen] = useState(false);\n\n const onOpenChange = useCallback(\n (_value = !open) => {\n setOpen(_value);\n },\n [open]\n );\n\n return {\n onOpenChange,\n open,\n };\n};\n", + "content": "'use client';\n\nimport * as React from 'react';\nimport { useCallback, useState } from 'react';\n\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport {\n cn,\n createPrimitiveElement,\n withCn,\n withProps,\n withRef,\n withVariants,\n} from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nimport { Icons } from '@/components/icons';\n\nexport const DropdownMenu = DropdownMenuPrimitive.Root;\n\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\n\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\n\nexport const DropdownMenuPortal = DropdownMenuPrimitive.Portal;\n\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\n\nexport const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nexport const DropdownMenuSubTrigger = withRef<\n typeof DropdownMenuPrimitive.SubTrigger,\n {\n inset?: boolean;\n }\n>(({ children, className, inset, ...props }, ref) => (\n \n {children}\n \n \n));\n\nexport const DropdownMenuSubContent = withCn(\n DropdownMenuPrimitive.SubContent,\n 'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'\n);\n\nconst DropdownMenuContentVariants = withProps(DropdownMenuPrimitive.Content, {\n className: cn(\n 'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'\n ),\n sideOffset: 4,\n});\n\nexport const DropdownMenuContent = withRef<\n typeof DropdownMenuPrimitive.Content\n>(({ ...props }, ref) => (\n \n \n \n));\n\nconst menuItemVariants = cva(\n cn(\n 'relative flex h-9 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',\n 'focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50'\n ),\n {\n variants: {\n inset: {\n true: 'pl-8',\n },\n },\n }\n);\n\nexport const DropdownMenuItem = withVariants(\n DropdownMenuPrimitive.Item,\n menuItemVariants,\n ['inset']\n);\n\nexport const DropdownMenuCheckboxItem = withRef<\n typeof DropdownMenuPrimitive.CheckboxItem\n>(({ children, className, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n));\n\nexport const DropdownMenuRadioItem = withRef<\n typeof DropdownMenuPrimitive.RadioItem,\n {\n hideIcon?: boolean;\n }\n>(({ children, className, hideIcon, ...props }, ref) => (\n \n {!hideIcon && (\n \n \n \n \n \n )}\n {children}\n \n));\n\nconst dropdownMenuLabelVariants = cva(\n cn('select-none px-2 py-1.5 text-sm font-semibold'),\n {\n variants: {\n inset: {\n true: 'pl-8',\n },\n },\n }\n);\n\nexport const DropdownMenuLabel = withVariants(\n DropdownMenuPrimitive.Label,\n dropdownMenuLabelVariants,\n ['inset']\n);\n\nexport const DropdownMenuSeparator = withCn(\n DropdownMenuPrimitive.Separator,\n '-mx-1 my-1 h-px bg-muted'\n);\n\nexport const DropdownMenuShortcut = withCn(\n createPrimitiveElement('span'),\n 'ml-auto text-xs tracking-widest opacity-60'\n);\n\nexport const useOpenState = () => {\n const [open, setOpen] = useState(false);\n\n const onOpenChange = useCallback(\n (_value = !open) => {\n setOpen(_value);\n },\n [open]\n );\n\n return {\n open,\n onOpenChange,\n };\n};\n", "name": "dropdown-menu.tsx" } ], diff --git a/apps/www/public/registry/styles/default/editor.json b/apps/www/public/registry/styles/default/editor.json index ac083f243e..11dd880dfa 100644 --- a/apps/www/public/registry/styles/default/editor.json +++ b/apps/www/public/registry/styles/default/editor.json @@ -2,7 +2,7 @@ "dependencies": [], "files": [ { - "content": "import React from 'react';\n\nimport type { PlateContentProps } from '@udecode/plate-common/react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@udecode/cn';\nimport { PlateContent } from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\nconst editorVariants = cva(\n cn(\n 'relative overflow-x-auto whitespace-pre-wrap break-words',\n 'min-h-[80px] w-full rounded-md bg-background px-6 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none',\n '[&_[data-slate-placeholder]]:text-muted-foreground [&_[data-slate-placeholder]]:!opacity-100',\n '[&_[data-slate-placeholder]]:top-[auto_!important]',\n '[&_strong]:font-bold'\n ),\n {\n defaultVariants: {\n focusRing: true,\n size: 'sm',\n variant: 'outline',\n },\n variants: {\n disabled: {\n true: 'cursor-not-allowed opacity-50',\n },\n focusRing: {\n false: '',\n true: 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n },\n focused: {\n true: 'ring-2 ring-ring ring-offset-2',\n },\n size: {\n md: 'text-base',\n sm: 'text-sm',\n },\n variant: {\n ghost: '',\n outline: 'border border-input',\n },\n },\n }\n);\n\nexport type EditorProps = PlateContentProps &\n VariantProps;\n\nconst Editor = React.forwardRef(\n (\n {\n className,\n disabled,\n focusRing,\n focused,\n readOnly,\n size,\n variant,\n ...props\n },\n ref\n ) => {\n return (\n
\n \n
\n );\n }\n);\nEditor.displayName = 'Editor';\n\nexport { Editor };\n", + "content": "import React from 'react';\n\nimport type { PlateContentProps } from '@udecode/plate-common/react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@udecode/cn';\nimport { PlateContent } from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\nconst editorVariants = cva(\n cn(\n 'relative overflow-x-auto whitespace-pre-wrap break-words',\n 'min-h-[80px] w-full rounded-md bg-background px-6 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none',\n '[&_[data-slate-placeholder]]:text-muted-foreground [&_[data-slate-placeholder]]:!opacity-100',\n '[&_[data-slate-placeholder]]:top-[auto_!important]',\n '[&_strong]:font-bold'\n ),\n {\n defaultVariants: {\n focusRing: true,\n size: 'sm',\n variant: 'outline',\n },\n variants: {\n disabled: {\n true: 'cursor-not-allowed opacity-50',\n },\n focusRing: {\n false: '',\n true: 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n },\n focused: {\n true: 'ring-2 ring-ring ring-offset-2',\n },\n size: {\n md: 'text-base',\n sm: 'text-sm',\n },\n variant: {\n ghost: '',\n outline: 'border border-input',\n },\n },\n }\n);\n\nexport type EditorProps = PlateContentProps &\n VariantProps;\n\nconst Editor = React.forwardRef(\n (\n {\n className,\n disabled,\n focusRing,\n focused,\n readOnly,\n size,\n variant,\n ...props\n },\n ref\n ) => {\n return (\n
\n \n
\n );\n }\n);\nEditor.displayName = 'Editor';\n\nexport { Editor };\n", "name": "editor.tsx" } ], diff --git a/apps/www/public/registry/styles/default/emoji-dropdown-menu.json b/apps/www/public/registry/styles/default/emoji-dropdown-menu.json index ca2d55a0bd..d57fbd4af5 100644 --- a/apps/www/public/registry/styles/default/emoji-dropdown-menu.json +++ b/apps/www/public/registry/styles/default/emoji-dropdown-menu.json @@ -4,11 +4,11 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport {\n type EmojiDropdownMenuOptions,\n useEmojiDropdownMenuState,\n} from '@udecode/plate-emoji/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { emojiCategoryIcons, emojiSearchIcons } from './emoji-icons';\nimport { EmojiPicker } from './emoji-picker';\nimport { EmojiToolbarDropdown } from './emoji-toolbar-dropdown';\nimport { ToolbarButton } from './toolbar';\n\ntype EmojiDropdownMenuProps = {\n options?: EmojiDropdownMenuOptions;\n} & React.ComponentPropsWithoutRef;\n\nexport function EmojiDropdownMenu({\n options,\n ...props\n}: EmojiDropdownMenuProps) {\n const { emojiPickerState, isOpen, setIsOpen } =\n useEmojiDropdownMenuState(options);\n\n return (\n \n \n \n }\n isOpen={isOpen}\n setIsOpen={setIsOpen}\n >\n \n \n );\n}\n", + "content": "import React from 'react';\n\nimport {\n type EmojiDropdownMenuOptions,\n useEmojiDropdownMenuState,\n} from '@udecode/plate-emoji/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { emojiCategoryIcons, emojiSearchIcons } from './emoji-icons';\nimport { EmojiPicker } from './emoji-picker';\nimport { EmojiToolbarDropdown } from './emoji-toolbar-dropdown';\nimport { ToolbarButton } from './toolbar';\n\ntype EmojiDropdownMenuProps = {\n options?: EmojiDropdownMenuOptions;\n} & React.ComponentPropsWithoutRef;\n\nexport function EmojiDropdownMenu({\n options,\n ...props\n}: EmojiDropdownMenuProps) {\n const { emojiPickerState, isOpen, setIsOpen } =\n useEmojiDropdownMenuState(options);\n\n return (\n \n \n \n }\n isOpen={isOpen}\n setIsOpen={setIsOpen}\n >\n \n \n );\n}\n", "name": "emoji-dropdown-menu.tsx" }, { - "content": "import React, { type ReactNode } from 'react';\n\nimport * as Popover from '@radix-ui/react-popover';\n\ntype EmojiToolbarDropdownProps = {\n children: ReactNode;\n control: ReactNode;\n isOpen: boolean;\n setIsOpen: (open: boolean) => void;\n};\n\nexport function EmojiToolbarDropdown({\n children,\n control,\n isOpen,\n setIsOpen,\n}: EmojiToolbarDropdownProps) {\n return (\n \n {control}\n\n \n {children}\n \n \n );\n}\n", + "content": "import React, { type ReactNode } from 'react';\n\nimport * as Popover from '@radix-ui/react-popover';\n\ntype EmojiToolbarDropdownProps = {\n children: ReactNode;\n control: ReactNode;\n isOpen: boolean;\n setIsOpen: (open: boolean) => void;\n};\n\nexport function EmojiToolbarDropdown({\n children,\n control,\n isOpen,\n setIsOpen,\n}: EmojiToolbarDropdownProps) {\n return (\n \n {control}\n\n \n {children}\n \n \n );\n}\n", "name": "emoji-toolbar-dropdown.tsx" }, { @@ -16,15 +16,15 @@ "name": "emoji-icons.tsx" }, { - "content": "import React from 'react';\n\nimport type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\nimport { EmojiSettings } from '@udecode/plate-emoji';\n\nimport { EmojiPickerContent } from './emoji-picker-content';\nimport { EmojiPickerNavigation } from './emoji-picker-navigation';\nimport { EmojiPickerPreview } from './emoji-picker-preview';\nimport { EmojiPickerSearchAndClear } from './emoji-picker-search-and-clear';\nimport { EmojiPickerSearchBar } from './emoji-picker-search-bar';\n\nexport function EmojiPicker({\n clearSearch,\n emoji,\n emojiLibrary,\n focusedCategory,\n handleCategoryClick,\n hasFound,\n i18n,\n icons,\n isSearching,\n onMouseOver,\n onSelectEmoji,\n refs,\n searchResult,\n searchValue,\n setSearch,\n settings = EmojiSettings,\n visibleCategories,\n}: UseEmojiPickerType) {\n return (\n \n \n \n \n \n \n \n \n );\n}\n", + "content": "import React from 'react';\n\nimport type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\nimport { EmojiSettings } from '@udecode/plate-emoji';\n\nimport { EmojiPickerContent } from './emoji-picker-content';\nimport { EmojiPickerNavigation } from './emoji-picker-navigation';\nimport { EmojiPickerPreview } from './emoji-picker-preview';\nimport { EmojiPickerSearchAndClear } from './emoji-picker-search-and-clear';\nimport { EmojiPickerSearchBar } from './emoji-picker-search-bar';\n\nexport function EmojiPicker({\n clearSearch,\n emoji,\n emojiLibrary,\n focusedCategory,\n hasFound,\n i18n,\n icons,\n isSearching,\n refs,\n searchResult,\n searchValue,\n setSearch,\n settings = EmojiSettings,\n visibleCategories,\n handleCategoryClick,\n onMouseOver,\n onSelectEmoji,\n}: UseEmojiPickerType) {\n return (\n \n \n \n \n \n \n \n \n );\n}\n", "name": "emoji-picker.tsx" }, { - "content": "import { memo, useCallback } from 'react';\n\nimport type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\nimport { type Emoji, EmojiSettings, type GridRow } from '@udecode/plate-emoji';\n\nexport type EmojiPickerContentProps = Pick<\n UseEmojiPickerType,\n | 'emojiLibrary'\n | 'i18n'\n | 'isSearching'\n | 'onMouseOver'\n | 'onSelectEmoji'\n | 'refs'\n | 'searchResult'\n | 'settings'\n | 'visibleCategories'\n>;\n\nexport type EmojiButtonProps = {\n emoji: Emoji;\n index: number;\n onMouseOver: (emoji?: Emoji) => void;\n onSelect: (emoji: Emoji) => void;\n};\n\nexport type RowOfButtonsProps = {\n row: GridRow;\n} & Pick;\n\nconst Button = memo(\n ({ emoji, index, onMouseOver, onSelect }: EmojiButtonProps) => {\n return (\n onSelect(emoji)}\n onMouseEnter={() => onMouseOver(emoji)}\n onMouseLeave={() => onMouseOver()}\n tabIndex={-1}\n type=\"button\"\n >\n \n \n {emoji.skins[0].native}\n \n \n );\n }\n);\nButton.displayName = 'Button';\n\nconst RowOfButtons = memo(\n ({ emojiLibrary, onMouseOver, onSelectEmoji, row }: RowOfButtonsProps) => (\n
\n {row.elements.map((emojiId, index) => (\n \n ))}\n
\n )\n);\nRowOfButtons.displayName = 'RowOfButtons';\n\nexport function EmojiPickerContent({\n emojiLibrary,\n i18n,\n isSearching = false,\n onMouseOver,\n onSelectEmoji,\n refs,\n searchResult,\n settings = EmojiSettings,\n visibleCategories,\n}: EmojiPickerContentProps) {\n const getRowWidth = settings.perLine.value * settings.buttonSize.value;\n\n const isCategoryVisible = useCallback(\n (categoryId: any) => {\n return visibleCategories.has(categoryId)\n ? visibleCategories.get(categoryId)\n : false;\n },\n [visibleCategories]\n );\n\n const EmojiList = useCallback(() => {\n return emojiLibrary\n .getGrid()\n .sections()\n .map(({ id: categoryId }) => {\n const section = emojiLibrary.getGrid().section(categoryId);\n const { buttonSize } = settings;\n\n return (\n \n
\n {i18n.categories[categoryId]}\n
\n \n {isCategoryVisible(categoryId) &&\n section\n .getRows()\n .map((row: GridRow) => (\n \n ))}\n \n \n );\n });\n }, [\n emojiLibrary,\n getRowWidth,\n i18n.categories,\n isCategoryVisible,\n onSelectEmoji,\n onMouseOver,\n settings,\n ]);\n\n const SearchList = useCallback(() => {\n return (\n
\n
\n {i18n.searchResult}\n
\n
\n {searchResult.map((emoji: Emoji, index: number) => (\n \n ))}\n
\n
\n );\n }, [\n emojiLibrary,\n getRowWidth,\n i18n.searchResult,\n searchResult,\n onSelectEmoji,\n onMouseOver,\n ]);\n\n return (\n \n
\n {isSearching ? SearchList() : EmojiList()}\n
\n \n );\n}\n", + "content": "import { memo, useCallback } from 'react';\n\nimport type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\nimport { type Emoji, type GridRow, EmojiSettings } from '@udecode/plate-emoji';\n\nexport type EmojiPickerContentProps = Pick<\n UseEmojiPickerType,\n | 'emojiLibrary'\n | 'i18n'\n | 'isSearching'\n | 'onMouseOver'\n | 'onSelectEmoji'\n | 'refs'\n | 'searchResult'\n | 'settings'\n | 'visibleCategories'\n>;\n\nexport type EmojiButtonProps = {\n emoji: Emoji;\n index: number;\n onMouseOver: (emoji?: Emoji) => void;\n onSelect: (emoji: Emoji) => void;\n};\n\nexport type RowOfButtonsProps = {\n row: GridRow;\n} & Pick;\n\nconst Button = memo(\n ({ emoji, index, onMouseOver, onSelect }: EmojiButtonProps) => {\n return (\n onSelect(emoji)}\n onMouseEnter={() => onMouseOver(emoji)}\n onMouseLeave={() => onMouseOver()}\n aria-label={emoji.skins[0].native}\n data-index={index}\n tabIndex={-1}\n type=\"button\"\n >\n \n \n {emoji.skins[0].native}\n \n \n );\n }\n);\nButton.displayName = 'Button';\n\nconst RowOfButtons = memo(\n ({ emojiLibrary, row, onMouseOver, onSelectEmoji }: RowOfButtonsProps) => (\n
\n {row.elements.map((emojiId, index) => (\n \n ))}\n
\n )\n);\nRowOfButtons.displayName = 'RowOfButtons';\n\nexport function EmojiPickerContent({\n emojiLibrary,\n i18n,\n isSearching = false,\n refs,\n searchResult,\n settings = EmojiSettings,\n visibleCategories,\n onMouseOver,\n onSelectEmoji,\n}: EmojiPickerContentProps) {\n const getRowWidth = settings.perLine.value * settings.buttonSize.value;\n\n const isCategoryVisible = useCallback(\n (categoryId: any) => {\n return visibleCategories.has(categoryId)\n ? visibleCategories.get(categoryId)\n : false;\n },\n [visibleCategories]\n );\n\n const EmojiList = useCallback(() => {\n return emojiLibrary\n .getGrid()\n .sections()\n .map(({ id: categoryId }) => {\n const section = emojiLibrary.getGrid().section(categoryId);\n const { buttonSize } = settings;\n\n return (\n \n
\n {i18n.categories[categoryId]}\n
\n \n {isCategoryVisible(categoryId) &&\n section\n .getRows()\n .map((row: GridRow) => (\n \n ))}\n \n \n );\n });\n }, [\n emojiLibrary,\n getRowWidth,\n i18n.categories,\n isCategoryVisible,\n onSelectEmoji,\n onMouseOver,\n settings,\n ]);\n\n const SearchList = useCallback(() => {\n return (\n
\n
\n {i18n.searchResult}\n
\n
\n {searchResult.map((emoji: Emoji, index: number) => (\n \n ))}\n
\n
\n );\n }, [\n emojiLibrary,\n getRowWidth,\n i18n.searchResult,\n searchResult,\n onSelectEmoji,\n onMouseOver,\n ]);\n\n return (\n \n
\n {isSearching ? SearchList() : EmojiList()}\n
\n \n );\n}\n", "name": "emoji-picker-content.tsx" }, { - "content": "import React from 'react';\n\nimport type { EmojiCategoryList } from '@udecode/plate-emoji';\nimport type {\n IEmojiFloatingLibrary,\n UseEmojiPickerType,\n} from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\n\nimport { Button } from './button';\n\nexport type EmojiPickerNavigationProps = {\n onClick: (id: EmojiCategoryList) => void;\n} & Pick<\n UseEmojiPickerType,\n 'emojiLibrary' | 'focusedCategory' | 'i18n' | 'icons'\n>;\n\nconst getBarProperty = (\n emojiLibrary: IEmojiFloatingLibrary,\n focusedCategory?: EmojiCategoryList\n) => {\n let width = 0;\n let position = 0;\n\n if (focusedCategory) {\n width = 100 / emojiLibrary.getGrid().size;\n position = focusedCategory\n ? emojiLibrary.indexOf(focusedCategory) * 100\n : 0;\n }\n\n return { position, width };\n};\n\nexport function EmojiPickerNavigation({\n emojiLibrary,\n focusedCategory,\n i18n,\n icons,\n onClick,\n}: EmojiPickerNavigationProps) {\n const { position, width } = getBarProperty(emojiLibrary, focusedCategory);\n\n return (\n \n
\n {emojiLibrary\n .getGrid()\n .sections()\n .map(({ id }) => (\n onClick(id)}\n size=\"icon\"\n title={i18n.categories[id]}\n type=\"button\"\n variant=\"ghost\"\n >\n {icons.categories[id].outline}\n \n ))}\n \n
\n \n );\n}\n", + "content": "import React from 'react';\n\nimport type { EmojiCategoryList } from '@udecode/plate-emoji';\nimport type {\n IEmojiFloatingLibrary,\n UseEmojiPickerType,\n} from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\n\nimport { Button } from './button';\n\nexport type EmojiPickerNavigationProps = {\n onClick: (id: EmojiCategoryList) => void;\n} & Pick<\n UseEmojiPickerType,\n 'emojiLibrary' | 'focusedCategory' | 'i18n' | 'icons'\n>;\n\nconst getBarProperty = (\n emojiLibrary: IEmojiFloatingLibrary,\n focusedCategory?: EmojiCategoryList\n) => {\n let width = 0;\n let position = 0;\n\n if (focusedCategory) {\n width = 100 / emojiLibrary.getGrid().size;\n position = focusedCategory\n ? emojiLibrary.indexOf(focusedCategory) * 100\n : 0;\n }\n\n return { position, width };\n};\n\nexport function EmojiPickerNavigation({\n emojiLibrary,\n focusedCategory,\n i18n,\n icons,\n onClick,\n}: EmojiPickerNavigationProps) {\n const { position, width } = getBarProperty(emojiLibrary, focusedCategory);\n\n return (\n \n
\n {emojiLibrary\n .getGrid()\n .sections()\n .map(({ id }) => (\n onClick(id)}\n title={i18n.categories[id]}\n aria-label={i18n.categories[id]}\n type=\"button\"\n >\n {icons.categories[id].outline}\n \n ))}\n \n
\n \n );\n}\n", "name": "emoji-picker-navigation.tsx" }, { @@ -32,11 +32,11 @@ "name": "emoji-picker-preview.tsx" }, { - "content": "import type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\nimport { DeleteIcon, SearchIcon } from 'lucide-react';\n\nimport { Button } from './button';\n\nexport type EmojiPickerSearchAndClearProps = Pick<\n UseEmojiPickerType,\n 'clearSearch' | 'i18n' | 'searchValue'\n>;\n\nexport function EmojiPickerSearchAndClear({\n clearSearch,\n i18n,\n searchValue,\n}: EmojiPickerSearchAndClearProps) {\n return (\n
\n \n \n
\n {searchValue && (\n \n \n \n )}\n \n );\n}\n", + "content": "import type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\nimport { DeleteIcon, SearchIcon } from 'lucide-react';\n\nimport { Button } from './button';\n\nexport type EmojiPickerSearchAndClearProps = Pick<\n UseEmojiPickerType,\n 'clearSearch' | 'i18n' | 'searchValue'\n>;\n\nexport function EmojiPickerSearchAndClear({\n clearSearch,\n i18n,\n searchValue,\n}: EmojiPickerSearchAndClearProps) {\n return (\n
\n \n \n
\n {searchValue && (\n \n \n \n )}\n \n );\n}\n", "name": "emoji-picker-search-and-clear.tsx" }, { - "content": "import type { ReactNode } from 'react';\n\nimport type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nexport type EmojiPickerSearchBarProps = {\n children: ReactNode;\n} & Pick;\n\nexport function EmojiPickerSearchBar({\n children,\n i18n,\n searchValue,\n setSearch,\n}: EmojiPickerSearchBarProps) {\n return (\n
\n
\n setSearch(event.target.value)}\n placeholder={i18n.search}\n type=\"text\"\n value={searchValue}\n />\n {children}\n
\n
\n );\n}\n", + "content": "import type { ReactNode } from 'react';\n\nimport type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nexport type EmojiPickerSearchBarProps = {\n children: ReactNode;\n} & Pick;\n\nexport function EmojiPickerSearchBar({\n children,\n i18n,\n searchValue,\n setSearch,\n}: EmojiPickerSearchBarProps) {\n return (\n
\n
\n setSearch(event.target.value)}\n placeholder={i18n.search}\n aria-label=\"Search\"\n autoComplete=\"off\"\n type=\"text\"\n />\n {children}\n
\n
\n );\n}\n", "name": "emoji-picker-search-bar.tsx" } ], diff --git a/apps/www/public/registry/styles/default/emoji-input-element.json b/apps/www/public/registry/styles/default/emoji-input-element.json index 3b560c3c1d..00bb102a01 100644 --- a/apps/www/public/registry/styles/default/emoji-input-element.json +++ b/apps/www/public/registry/styles/default/emoji-input-element.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React, { useMemo, useState } from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport { EmojiInlineIndexSearch, insertEmoji } from '@udecode/plate-emoji';\n\nimport {\n InlineCombobox,\n InlineComboboxContent,\n InlineComboboxEmpty,\n InlineComboboxInput,\n InlineComboboxItem,\n} from './inline-combobox';\n\nexport const EmojiInputElement = withRef(\n ({ className, ...props }, ref) => {\n const { children, editor, element } = props;\n const [value, setValue] = useState('');\n const debouncedValue = useDebounce(value, 100);\n const isPending = value !== debouncedValue;\n\n const filteredEmojis = useMemo(() => {\n if (debouncedValue.trim().length === 0) return [];\n\n return EmojiInlineIndexSearch.getInstance()\n .search(debouncedValue.replace(/:$/, ''))\n .get();\n }, [debouncedValue]);\n\n return (\n \n \n \n\n \n {!isPending && (\n No matching emoji found\n )}\n\n {filteredEmojis.map((emoji) => (\n insertEmoji(editor, emoji)}\n value={emoji.name}\n >\n {emoji.skins[0].native} {emoji.name}\n \n ))}\n \n \n\n {children}\n \n );\n }\n);\n\nconst useDebounce = (value: any, delay = 500) => {\n const [debouncedValue, setDebouncedValue] = React.useState(value);\n\n React.useEffect(() => {\n const handler: NodeJS.Timeout = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n\n // Cancel the timeout if value changes (also on delay change or unmount)\n return () => {\n clearTimeout(handler);\n };\n }, [value, delay]);\n\n return debouncedValue;\n};\n", + "content": "import React, { useMemo, useState } from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport { EmojiInlineIndexSearch, insertEmoji } from '@udecode/plate-emoji';\n\nimport {\n InlineCombobox,\n InlineComboboxContent,\n InlineComboboxEmpty,\n InlineComboboxInput,\n InlineComboboxItem,\n} from './inline-combobox';\n\nexport const EmojiInputElement = withRef(\n ({ className, ...props }, ref) => {\n const { children, editor, element } = props;\n const [value, setValue] = useState('');\n const debouncedValue = useDebounce(value, 100);\n const isPending = value !== debouncedValue;\n\n const filteredEmojis = useMemo(() => {\n if (debouncedValue.trim().length === 0) return [];\n\n return EmojiInlineIndexSearch.getInstance()\n .search(debouncedValue.replace(/:$/, ''))\n .get();\n }, [debouncedValue]);\n\n return (\n \n \n \n\n \n {!isPending && (\n No matching emoji found\n )}\n\n {filteredEmojis.map((emoji) => (\n insertEmoji(editor, emoji)}\n >\n {emoji.skins[0].native} {emoji.name}\n \n ))}\n \n \n\n {children}\n \n );\n }\n);\n\nconst useDebounce = (value: any, delay = 500) => {\n const [debouncedValue, setDebouncedValue] = React.useState(value);\n\n React.useEffect(() => {\n const handler: NodeJS.Timeout = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n\n // Cancel the timeout if value changes (also on delay change or unmount)\n return () => {\n clearTimeout(handler);\n };\n }, [value, delay]);\n\n return debouncedValue;\n};\n", "name": "emoji-input-element.tsx" } ], diff --git a/apps/www/public/registry/styles/default/floating-toolbar.json b/apps/www/public/registry/styles/default/floating-toolbar.json index 9abdd00694..c0b06a4827 100644 --- a/apps/www/public/registry/styles/default/floating-toolbar.json +++ b/apps/www/public/registry/styles/default/floating-toolbar.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n PortalBody,\n useComposedRef,\n useEditorId,\n useEventEditorSelectors,\n} from '@udecode/plate-common/react';\nimport {\n type FloatingToolbarState,\n flip,\n offset,\n useFloatingToolbar,\n useFloatingToolbarState,\n} from '@udecode/plate-floating';\n\nimport { Toolbar } from './toolbar';\n\nexport const FloatingToolbar = withRef<\n typeof Toolbar,\n {\n state?: FloatingToolbarState;\n }\n>(({ children, state, ...props }, componentRef) => {\n const editorId = useEditorId();\n const focusedEditorId = useEventEditorSelectors.focus();\n\n const floatingToolbarState = useFloatingToolbarState({\n editorId,\n focusedEditorId,\n ...state,\n floatingOptions: {\n middleware: [\n offset(12),\n flip({\n fallbackPlacements: [\n 'top-start',\n 'top-end',\n 'bottom-start',\n 'bottom-end',\n ],\n padding: 12,\n }),\n ],\n placement: 'top',\n ...state?.floatingOptions,\n },\n });\n\n const {\n hidden,\n props: rootProps,\n ref: floatingRef,\n } = useFloatingToolbar(floatingToolbarState);\n\n const ref = useComposedRef(componentRef, floatingRef);\n\n if (hidden) return null;\n\n return (\n \n \n {children}\n \n \n );\n});\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n PortalBody,\n useComposedRef,\n useEditorId,\n useEventEditorSelectors,\n} from '@udecode/plate-common/react';\nimport {\n type FloatingToolbarState,\n flip,\n offset,\n useFloatingToolbar,\n useFloatingToolbarState,\n} from '@udecode/plate-floating';\n\nimport { Toolbar } from './toolbar';\n\nexport const FloatingToolbar = withRef<\n typeof Toolbar,\n {\n state?: FloatingToolbarState;\n }\n>(({ children, state, ...props }, componentRef) => {\n const editorId = useEditorId();\n const focusedEditorId = useEventEditorSelectors.focus();\n\n const floatingToolbarState = useFloatingToolbarState({\n editorId,\n focusedEditorId,\n ...state,\n floatingOptions: {\n middleware: [\n offset(12),\n flip({\n fallbackPlacements: [\n 'top-start',\n 'top-end',\n 'bottom-start',\n 'bottom-end',\n ],\n padding: 12,\n }),\n ],\n placement: 'top',\n ...state?.floatingOptions,\n },\n });\n\n const {\n hidden,\n props: rootProps,\n ref: floatingRef,\n } = useFloatingToolbar(floatingToolbarState);\n\n const ref = useComposedRef(componentRef, floatingRef);\n\n if (hidden) return null;\n\n return (\n \n \n {children}\n \n \n );\n});\n", "name": "floating-toolbar.tsx" } ], diff --git a/apps/www/public/registry/styles/default/heading-element.json b/apps/www/public/registry/styles/default/heading-element.json index f87c4cfd84..bb070c0c5d 100644 --- a/apps/www/public/registry/styles/default/heading-element.json +++ b/apps/www/public/registry/styles/default/heading-element.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport { withRef, withVariants } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\nconst headingVariants = cva('', {\n variants: {\n isFirstBlock: {\n false: '',\n true: 'mt-0',\n },\n variant: {\n h1: 'mb-1 mt-[2em] font-heading text-4xl font-bold',\n h2: 'mb-px mt-[1.4em] font-heading text-2xl font-semibold tracking-tight',\n h3: 'mb-px mt-[1em] font-heading text-xl font-semibold tracking-tight',\n h4: 'mt-[0.75em] font-heading text-lg font-semibold tracking-tight',\n h5: 'mt-[0.75em] text-lg font-semibold tracking-tight',\n h6: 'mt-[0.75em] text-base font-semibold tracking-tight',\n },\n },\n});\n\nconst HeadingElementVariants = withVariants(PlateElement, headingVariants, [\n 'isFirstBlock',\n 'variant',\n]);\n\nexport const HeadingElement = withRef(\n ({ children, isFirstBlock, variant = 'h1', ...props }, ref) => {\n const { editor, element } = props;\n\n const Element = variant!;\n\n return (\n \n {children}\n \n );\n }\n);\n", + "content": "import React from 'react';\n\nimport { withRef, withVariants } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\nconst headingVariants = cva('', {\n variants: {\n isFirstBlock: {\n false: '',\n true: 'mt-0',\n },\n variant: {\n h1: 'mb-1 mt-[2em] font-heading text-4xl font-bold',\n h2: 'mb-px mt-[1.4em] font-heading text-2xl font-semibold tracking-tight',\n h3: 'mb-px mt-[1em] font-heading text-xl font-semibold tracking-tight',\n h4: 'mt-[0.75em] font-heading text-lg font-semibold tracking-tight',\n h5: 'mt-[0.75em] text-lg font-semibold tracking-tight',\n h6: 'mt-[0.75em] text-base font-semibold tracking-tight',\n },\n },\n});\n\nconst HeadingElementVariants = withVariants(PlateElement, headingVariants, [\n 'isFirstBlock',\n 'variant',\n]);\n\nexport const HeadingElement = withRef(\n ({ children, isFirstBlock, variant = 'h1', ...props }, ref) => {\n const { editor, element } = props;\n\n const Element = variant!;\n\n return (\n \n {children}\n \n );\n }\n);\n", "name": "heading-element.tsx" } ], diff --git a/apps/www/public/registry/styles/default/highlight-leaf.json b/apps/www/public/registry/styles/default/highlight-leaf.json index 691b23310a..40ccab83e9 100644 --- a/apps/www/public/registry/styles/default/highlight-leaf.json +++ b/apps/www/public/registry/styles/default/highlight-leaf.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const HighlightLeaf = withRef(\n ({ children, className, ...props }, ref) => (\n \n {children}\n \n )\n);\n", + "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const HighlightLeaf = withRef(\n ({ children, className, ...props }, ref) => (\n \n {children}\n \n )\n);\n", "name": "highlight-leaf.tsx" } ], diff --git a/apps/www/public/registry/styles/default/image-element.json b/apps/www/public/registry/styles/default/image-element.json index 634097187b..0573c27319 100644 --- a/apps/www/public/registry/styles/default/image-element.json +++ b/apps/www/public/registry/styles/default/image-element.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement, withHOC } from '@udecode/plate-common/react';\nimport { Image, ImagePlugin, useMediaState } from '@udecode/plate-media/react';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport {\n Resizable,\n ResizeHandle,\n mediaResizeHandleVariants,\n} from './resizable';\n\nexport const ImageElement = withHOC(\n ResizableProvider,\n withRef(\n ({ children, className, nodeProps, ...props }, ref) => {\n const { align = 'center', focused, readOnly, selected } = useMediaState();\n\n const width = useResizableStore().get.width();\n\n return (\n \n \n
\n \n \n \n \n \n\n \n \n \n
\n\n {children}\n \n \n );\n }\n )\n);\n", + "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement, withHOC } from '@udecode/plate-common/react';\nimport { Image, ImagePlugin, useMediaState } from '@udecode/plate-media/react';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport {\n Resizable,\n ResizeHandle,\n mediaResizeHandleVariants,\n} from './resizable';\n\nexport const ImageElement = withHOC(\n ResizableProvider,\n withRef(\n ({ children, className, nodeProps, ...props }, ref) => {\n const { align = 'center', focused, readOnly, selected } = useMediaState();\n\n const width = useResizableStore().get.width();\n\n return (\n \n \n
\n \n \n \n \n \n\n \n \n \n
\n\n {children}\n \n \n );\n }\n )\n);\n", "name": "image-element.tsx" } ], diff --git a/apps/www/public/registry/styles/default/inline-combobox.json b/apps/www/public/registry/styles/default/inline-combobox.json index 575a61b809..a2cc42aa01 100644 --- a/apps/www/public/registry/styles/default/inline-combobox.json +++ b/apps/www/public/registry/styles/default/inline-combobox.json @@ -5,7 +5,7 @@ ], "files": [ { - "content": "import React, {\n type HTMLAttributes,\n type ReactNode,\n type RefObject,\n createContext,\n forwardRef,\n startTransition,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from 'react';\n\nimport type { PointRef } from 'slate';\n\nimport {\n Combobox,\n ComboboxItem,\n type ComboboxItemProps,\n ComboboxPopover,\n ComboboxProvider,\n Portal,\n useComboboxContext,\n useComboboxStore,\n} from '@ariakit/react';\nimport { cn } from '@udecode/cn';\nimport { filterWords } from '@udecode/plate-combobox';\nimport {\n type UseComboboxInputResult,\n useComboboxInput,\n useHTMLInputCursorState,\n} from '@udecode/plate-combobox/react';\nimport {\n type TElement,\n createPointRef,\n getPointBefore,\n insertText,\n moveSelection,\n} from '@udecode/plate-common';\nimport {\n findNodePath,\n useComposedRef,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\ntype FilterFn = (\n item: { keywords?: string[]; value: string },\n search: string\n) => boolean;\n\ninterface InlineComboboxContextValue {\n filter: FilterFn | false;\n inputProps: UseComboboxInputResult['props'];\n inputRef: RefObject;\n removeInput: UseComboboxInputResult['removeInput'];\n setHasEmpty: (hasEmpty: boolean) => void;\n showTrigger: boolean;\n trigger: string;\n}\n\nconst InlineComboboxContext = createContext(\n null as any\n);\n\nexport const defaultFilter: FilterFn = ({ keywords = [], value }, search) =>\n [value, ...keywords].some((keyword) => filterWords(keyword, search));\n\ninterface InlineComboboxProps {\n children: ReactNode;\n element: TElement;\n trigger: string;\n filter?: FilterFn | false;\n hideWhenNoValue?: boolean;\n setValue?: (value: string) => void;\n showTrigger?: boolean;\n value?: string;\n}\n\nconst InlineCombobox = ({\n children,\n element,\n filter = defaultFilter,\n hideWhenNoValue = false,\n setValue: setValueProp,\n showTrigger = true,\n trigger,\n value: valueProp,\n}: InlineComboboxProps) => {\n const editor = useEditorRef();\n const inputRef = React.useRef(null);\n const cursorState = useHTMLInputCursorState(inputRef);\n\n const [valueState, setValueState] = useState('');\n const hasValueProp = valueProp !== undefined;\n const value = hasValueProp ? valueProp : valueState;\n\n const setValue = useCallback(\n (newValue: string) => {\n setValueProp?.(newValue);\n\n if (!hasValueProp) {\n setValueState(newValue);\n }\n },\n [setValueProp, hasValueProp]\n );\n\n /**\n * Track the point just before the input element so we know where to\n * insertText if the combobox closes due to a selection change.\n */\n const [insertPoint, setInsertPoint] = useState(null);\n\n useEffect(() => {\n const path = findNodePath(editor, element);\n\n if (!path) return;\n\n const point = getPointBefore(editor, path);\n\n if (!point) return;\n\n const pointRef = createPointRef(editor, point);\n setInsertPoint(pointRef);\n\n return () => {\n pointRef.unref();\n };\n }, [editor, element]);\n\n const { props: inputProps, removeInput } = useComboboxInput({\n cancelInputOnBlur: false,\n cursorState,\n onCancelInput: (cause) => {\n if (cause !== 'backspace') {\n insertText(editor, trigger + value, {\n at: insertPoint?.current ?? undefined,\n });\n }\n if (cause === 'arrowLeft' || cause === 'arrowRight') {\n moveSelection(editor, {\n distance: 1,\n reverse: cause === 'arrowLeft',\n });\n }\n },\n ref: inputRef,\n });\n\n const [hasEmpty, setHasEmpty] = useState(false);\n\n const contextValue: InlineComboboxContextValue = useMemo(\n () => ({\n filter,\n inputProps,\n inputRef,\n removeInput,\n setHasEmpty,\n showTrigger,\n trigger,\n }),\n [\n trigger,\n showTrigger,\n filter,\n inputRef,\n inputProps,\n removeInput,\n setHasEmpty,\n ]\n );\n\n const store = useComboboxStore({\n // open: ,\n setValue: (newValue) => startTransition(() => setValue(newValue)),\n });\n\n const items = store.useState('items');\n\n /**\n * If there is no active ID and the list of items changes, select the first\n * item.\n */\n useEffect(() => {\n if (!store.getState().activeId) {\n store.setActiveId(store.first());\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [items, store]);\n\n return (\n \n 0 || hasEmpty) &&\n (!hideWhenNoValue || value.length > 0)\n }\n store={store}\n >\n \n {children}\n \n \n \n );\n};\n\nconst InlineComboboxInput = forwardRef<\n HTMLInputElement,\n HTMLAttributes\n>(({ className, ...props }, propRef) => {\n const {\n inputProps,\n inputRef: contextRef,\n showTrigger,\n trigger,\n } = useContext(InlineComboboxContext);\n\n const store = useComboboxContext()!;\n const value = store.useState('value');\n\n const ref = useComposedRef(propRef, contextRef);\n\n /**\n * To create an auto-resizing input, we render a visually hidden span\n * containing the input value and position the input element on top of it.\n * This works well for all cases except when input exceeds the width of the\n * container.\n */\n\n return (\n <>\n {showTrigger && trigger}\n\n \n \n {value || '\\u200B'}\n \n\n \n \n \n );\n});\n\nInlineComboboxInput.displayName = 'InlineComboboxInput';\n\nconst InlineComboboxContent: typeof ComboboxPopover = ({\n className,\n ...props\n}) => {\n // Portal prevents CSS from leaking into popover\n return (\n \n \n \n );\n};\n\nconst comboboxItemVariants = cva(\n 'relative flex h-9 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',\n {\n defaultVariants: {\n interactive: true,\n },\n variants: {\n interactive: {\n false: '',\n true: 'cursor-pointer transition-colors hover:bg-accent hover:text-accent-foreground data-[active-item=true]:bg-accent data-[active-item=true]:text-accent-foreground',\n },\n },\n }\n);\n\nexport type InlineComboboxItemProps = {\n keywords?: string[];\n} & ComboboxItemProps &\n Required>;\n\nconst InlineComboboxItem = ({\n className,\n keywords,\n onClick,\n ...props\n}: InlineComboboxItemProps) => {\n const { value } = props;\n\n const { filter, removeInput } = useContext(InlineComboboxContext);\n\n const store = useComboboxContext()!;\n\n // Optimization: Do not subscribe to value if filter is false\n const search = filter && store.useState('value');\n\n const visible = useMemo(\n () => !filter || filter({ keywords, value }, search as string),\n [filter, value, keywords, search]\n );\n\n if (!visible) return null;\n\n return (\n {\n removeInput(true);\n onClick?.(event);\n }}\n {...props}\n />\n );\n};\n\nconst InlineComboboxEmpty = ({\n children,\n className,\n}: HTMLAttributes) => {\n const { setHasEmpty } = useContext(InlineComboboxContext);\n const store = useComboboxContext()!;\n const items = store.useState('items');\n\n useEffect(() => {\n setHasEmpty(true);\n\n return () => {\n setHasEmpty(false);\n };\n }, [setHasEmpty]);\n\n if (items.length > 0) return null;\n\n return (\n \n {children}\n \n );\n};\n\nexport {\n InlineCombobox,\n InlineComboboxContent,\n InlineComboboxEmpty,\n InlineComboboxInput,\n InlineComboboxItem,\n};\n", + "content": "import React, {\n type HTMLAttributes,\n type ReactNode,\n type RefObject,\n createContext,\n forwardRef,\n startTransition,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from 'react';\n\nimport type { PointRef } from 'slate';\n\nimport {\n type ComboboxItemProps,\n Combobox,\n ComboboxItem,\n ComboboxPopover,\n ComboboxProvider,\n Portal,\n useComboboxContext,\n useComboboxStore,\n} from '@ariakit/react';\nimport { cn } from '@udecode/cn';\nimport { filterWords } from '@udecode/plate-combobox';\nimport {\n type UseComboboxInputResult,\n useComboboxInput,\n useHTMLInputCursorState,\n} from '@udecode/plate-combobox/react';\nimport {\n type TElement,\n createPointRef,\n getPointBefore,\n insertText,\n moveSelection,\n} from '@udecode/plate-common';\nimport {\n findNodePath,\n useComposedRef,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\ntype FilterFn = (\n item: { value: string; keywords?: string[] },\n search: string\n) => boolean;\n\ninterface InlineComboboxContextValue {\n filter: FilterFn | false;\n inputProps: UseComboboxInputResult['props'];\n inputRef: RefObject;\n removeInput: UseComboboxInputResult['removeInput'];\n setHasEmpty: (hasEmpty: boolean) => void;\n showTrigger: boolean;\n trigger: string;\n}\n\nconst InlineComboboxContext = createContext(\n null as any\n);\n\nexport const defaultFilter: FilterFn = ({ keywords = [], value }, search) =>\n [value, ...keywords].some((keyword) => filterWords(keyword, search));\n\ninterface InlineComboboxProps {\n children: ReactNode;\n element: TElement;\n trigger: string;\n filter?: FilterFn | false;\n hideWhenNoValue?: boolean;\n setValue?: (value: string) => void;\n showTrigger?: boolean;\n value?: string;\n}\n\nconst InlineCombobox = ({\n children,\n element,\n filter = defaultFilter,\n hideWhenNoValue = false,\n setValue: setValueProp,\n showTrigger = true,\n trigger,\n value: valueProp,\n}: InlineComboboxProps) => {\n const editor = useEditorRef();\n const inputRef = React.useRef(null);\n const cursorState = useHTMLInputCursorState(inputRef);\n\n const [valueState, setValueState] = useState('');\n const hasValueProp = valueProp !== undefined;\n const value = hasValueProp ? valueProp : valueState;\n\n const setValue = useCallback(\n (newValue: string) => {\n setValueProp?.(newValue);\n\n if (!hasValueProp) {\n setValueState(newValue);\n }\n },\n [setValueProp, hasValueProp]\n );\n\n /**\n * Track the point just before the input element so we know where to\n * insertText if the combobox closes due to a selection change.\n */\n const [insertPoint, setInsertPoint] = useState(null);\n\n useEffect(() => {\n const path = findNodePath(editor, element);\n\n if (!path) return;\n\n const point = getPointBefore(editor, path);\n\n if (!point) return;\n\n const pointRef = createPointRef(editor, point);\n setInsertPoint(pointRef);\n\n return () => {\n pointRef.unref();\n };\n }, [editor, element]);\n\n const { props: inputProps, removeInput } = useComboboxInput({\n cancelInputOnBlur: false,\n cursorState,\n ref: inputRef,\n onCancelInput: (cause) => {\n if (cause !== 'backspace') {\n insertText(editor, trigger + value, {\n at: insertPoint?.current ?? undefined,\n });\n }\n if (cause === 'arrowLeft' || cause === 'arrowRight') {\n moveSelection(editor, {\n distance: 1,\n reverse: cause === 'arrowLeft',\n });\n }\n },\n });\n\n const [hasEmpty, setHasEmpty] = useState(false);\n\n const contextValue: InlineComboboxContextValue = useMemo(\n () => ({\n filter,\n inputProps,\n inputRef,\n removeInput,\n setHasEmpty,\n showTrigger,\n trigger,\n }),\n [\n trigger,\n showTrigger,\n filter,\n inputRef,\n inputProps,\n removeInput,\n setHasEmpty,\n ]\n );\n\n const store = useComboboxStore({\n // open: ,\n setValue: (newValue) => startTransition(() => setValue(newValue)),\n });\n\n const items = store.useState('items');\n\n /**\n * If there is no active ID and the list of items changes, select the first\n * item.\n */\n useEffect(() => {\n if (!store.getState().activeId) {\n store.setActiveId(store.first());\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [items, store]);\n\n return (\n \n 0 || hasEmpty) &&\n (!hideWhenNoValue || value.length > 0)\n }\n store={store}\n >\n \n {children}\n \n \n \n );\n};\n\nconst InlineComboboxInput = forwardRef<\n HTMLInputElement,\n HTMLAttributes\n>(({ className, ...props }, propRef) => {\n const {\n inputProps,\n inputRef: contextRef,\n showTrigger,\n trigger,\n } = useContext(InlineComboboxContext);\n\n const store = useComboboxContext()!;\n const value = store.useState('value');\n\n const ref = useComposedRef(propRef, contextRef);\n\n /**\n * To create an auto-resizing input, we render a visually hidden span\n * containing the input value and position the input element on top of it.\n * This works well for all cases except when input exceeds the width of the\n * container.\n */\n\n return (\n <>\n {showTrigger && trigger}\n\n \n \n {value || '\\u200B'}\n \n\n \n \n \n );\n});\n\nInlineComboboxInput.displayName = 'InlineComboboxInput';\n\nconst InlineComboboxContent: typeof ComboboxPopover = ({\n className,\n ...props\n}) => {\n // Portal prevents CSS from leaking into popover\n return (\n \n \n \n );\n};\n\nconst comboboxItemVariants = cva(\n 'relative flex h-9 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',\n {\n defaultVariants: {\n interactive: true,\n },\n variants: {\n interactive: {\n false: '',\n true: 'cursor-pointer transition-colors hover:bg-accent hover:text-accent-foreground data-[active-item=true]:bg-accent data-[active-item=true]:text-accent-foreground',\n },\n },\n }\n);\n\nexport type InlineComboboxItemProps = {\n keywords?: string[];\n} & ComboboxItemProps &\n Required>;\n\nconst InlineComboboxItem = ({\n className,\n keywords,\n onClick,\n ...props\n}: InlineComboboxItemProps) => {\n const { value } = props;\n\n const { filter, removeInput } = useContext(InlineComboboxContext);\n\n const store = useComboboxContext()!;\n\n // Optimization: Do not subscribe to value if filter is false\n const search = filter && store.useState('value');\n\n const visible = useMemo(\n () => !filter || filter({ keywords, value }, search as string),\n [filter, value, keywords, search]\n );\n\n if (!visible) return null;\n\n return (\n {\n removeInput(true);\n onClick?.(event);\n }}\n {...props}\n />\n );\n};\n\nconst InlineComboboxEmpty = ({\n children,\n className,\n}: HTMLAttributes) => {\n const { setHasEmpty } = useContext(InlineComboboxContext);\n const store = useComboboxContext()!;\n const items = store.useState('items');\n\n useEffect(() => {\n setHasEmpty(true);\n\n return () => {\n setHasEmpty(false);\n };\n }, [setHasEmpty]);\n\n if (items.length > 0) return null;\n\n return (\n \n {children}\n \n );\n};\n\nexport {\n InlineCombobox,\n InlineComboboxContent,\n InlineComboboxEmpty,\n InlineComboboxInput,\n InlineComboboxItem,\n};\n", "name": "inline-combobox.tsx" } ], diff --git a/apps/www/public/registry/styles/default/insert-dropdown-menu.json b/apps/www/public/registry/styles/default/insert-dropdown-menu.json index d7218b2498..9b15182ae5 100644 --- a/apps/www/public/registry/styles/default/insert-dropdown-menu.json +++ b/apps/www/public/registry/styles/default/insert-dropdown-menu.json @@ -5,7 +5,7 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { ParagraphPlugin, insertEmptyElement } from '@udecode/plate-common';\nimport { focusEditor, useEditorRef } from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n {\n items: [\n {\n description: 'Paragraph',\n icon: Icons.paragraph,\n label: 'Paragraph',\n value: ParagraphPlugin.key,\n },\n {\n description: 'Heading 1',\n icon: Icons.h1,\n label: 'Heading 1',\n value: HEADING_KEYS.h1,\n },\n {\n description: 'Heading 2',\n icon: Icons.h2,\n label: 'Heading 2',\n value: HEADING_KEYS.h2,\n },\n {\n description: 'Heading 3',\n icon: Icons.h3,\n label: 'Heading 3',\n value: HEADING_KEYS.h3,\n },\n {\n description: 'Quote (⌘+⇧+.)',\n icon: Icons.blockquote,\n label: 'Quote',\n value: BlockquotePlugin.key,\n },\n // {\n // value: TablePlugin.key,\n // label: 'Table',\n // description: 'Table',\n // icon: Icons.table,\n // },\n // {\n // value: 'ul',\n // label: 'Bulleted list',\n // description: 'Bulleted list',\n // icon: Icons.ul,\n // },\n // {\n // value: 'ol',\n // label: 'Numbered list',\n // description: 'Numbered list',\n // icon: Icons.ol,\n // },\n // {\n // value: HorizontalRulePlugin.key,\n // label: 'Divider',\n // description: 'Divider (---)',\n // icon: Icons.hr,\n // },\n ],\n label: 'Basic blocks',\n },\n // {\n // label: 'Media',\n // items: [\n // {\n // value: CodeBlockPlugin.key,\n // label: 'Code',\n // description: 'Code (```)',\n // icon: Icons.codeblock,\n // },\n // {\n // value: ImagePlugin.key,\n // label: 'Image',\n // description: 'Image',\n // icon: Icons.image,\n // },\n // {\n // value: MediaEmbedPlugin.key,\n // label: 'Embed',\n // description: 'Embed',\n // icon: Icons.embed,\n // },\n // {\n // value: ExcalidrawPlugin.key,\n // label: 'Excalidraw',\n // description: 'Excalidraw',\n // icon: Icons.excalidraw,\n // },\n // ],\n // },\n // {\n // label: 'Inline',\n // items: [\n // {\n // value: LinkPlugin.key,\n // label: 'Link',\n // description: 'Link',\n // icon: Icons.link,\n // },\n // ],\n // },\n];\n\nexport function InsertDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const openState = useOpenState();\n\n return (\n \n \n \n \n \n \n\n \n {items.map(({ items: nestedItems, label }, index) => (\n \n {index !== 0 && }\n\n {label}\n {nestedItems.map(\n ({ icon: Icon, label: itemLabel, value: type }) => (\n {\n switch (type) {\n // case CodeBlockPlugin.key: {\n // insertEmptyCodeBlock(editor);\n //\n // break;\n // }\n // case ImagePlugin.key: {\n // await insertMedia(editor, { type: ImagePlugin.key });\n //\n // break;\n // }\n // case MediaEmbedPlugin.key: {\n // await insertMedia(editor, {\n // type: MediaEmbedPlugin.key,\n // });\n //\n // break;\n // }\n // case 'ul':\n // case 'ol': {\n // insertEmptyElement(editor, ParagraphPlugin.key, {\n // select: true,\n // nextBlock: true,\n // });\n //\n // if (settingsStore.get.checkedId(IndentListPlugin.key)) {\n // toggleIndentList(editor, {\n // listStyleType: type === 'ul' ? 'disc' : 'decimal',\n // });\n // } else if (settingsStore.get.checkedId('list')) {\n // toggleList(editor, { type });\n // }\n //\n // break;\n // }\n // case TablePlugin.key: {\n // insertTable(editor);\n //\n // break;\n // }\n // case LinkPlugin.key: {\n // triggerFloatingLink(editor, { focused: true });\n //\n // break;\n // }\n default: {\n insertEmptyElement(editor, type, {\n nextBlock: true,\n select: true,\n });\n }\n }\n\n focusEditor(editor);\n }}\n >\n \n {itemLabel}\n \n )\n )}\n \n ))}\n \n \n );\n}\n", + "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { insertEmptyElement } from '@udecode/plate-common';\nimport {\n ParagraphPlugin,\n focusEditor,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n {\n items: [\n {\n description: 'Paragraph',\n icon: Icons.paragraph,\n label: 'Paragraph',\n value: ParagraphPlugin.key,\n },\n {\n description: 'Heading 1',\n icon: Icons.h1,\n label: 'Heading 1',\n value: HEADING_KEYS.h1,\n },\n {\n description: 'Heading 2',\n icon: Icons.h2,\n label: 'Heading 2',\n value: HEADING_KEYS.h2,\n },\n {\n description: 'Heading 3',\n icon: Icons.h3,\n label: 'Heading 3',\n value: HEADING_KEYS.h3,\n },\n {\n description: 'Quote (⌘+⇧+.)',\n icon: Icons.blockquote,\n label: 'Quote',\n value: BlockquotePlugin.key,\n },\n // {\n // value: TablePlugin.key,\n // label: 'Table',\n // description: 'Table',\n // icon: Icons.table,\n // },\n // {\n // value: 'ul',\n // label: 'Bulleted list',\n // description: 'Bulleted list',\n // icon: Icons.ul,\n // },\n // {\n // value: 'ol',\n // label: 'Numbered list',\n // description: 'Numbered list',\n // icon: Icons.ol,\n // },\n // {\n // value: HorizontalRulePlugin.key,\n // label: 'Divider',\n // description: 'Divider (---)',\n // icon: Icons.hr,\n // },\n ],\n label: 'Basic blocks',\n },\n // {\n // label: 'Media',\n // items: [\n // {\n // value: CodeBlockPlugin.key,\n // label: 'Code',\n // description: 'Code (```)',\n // icon: Icons.codeblock,\n // },\n // {\n // value: ImagePlugin.key,\n // label: 'Image',\n // description: 'Image',\n // icon: Icons.image,\n // },\n // {\n // value: MediaEmbedPlugin.key,\n // label: 'Embed',\n // description: 'Embed',\n // icon: Icons.embed,\n // },\n // {\n // value: ExcalidrawPlugin.key,\n // label: 'Excalidraw',\n // description: 'Excalidraw',\n // icon: Icons.excalidraw,\n // },\n // ],\n // },\n // {\n // label: 'Inline',\n // items: [\n // {\n // value: LinkPlugin.key,\n // label: 'Link',\n // description: 'Link',\n // icon: Icons.link,\n // },\n // ],\n // },\n];\n\nexport function InsertDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const openState = useOpenState();\n\n return (\n \n \n \n \n \n \n\n \n {items.map(({ items: nestedItems, label }, index) => (\n \n {index !== 0 && }\n\n {label}\n {nestedItems.map(\n ({ icon: Icon, label: itemLabel, value: type }) => (\n {\n switch (type) {\n // case CodeBlockPlugin.key: {\n // insertEmptyCodeBlock(editor);\n //\n // break;\n // }\n // case ImagePlugin.key: {\n // await insertMedia(editor, { type: ImagePlugin.key });\n //\n // break;\n // }\n // case MediaEmbedPlugin.key: {\n // await insertMedia(editor, {\n // type: MediaEmbedPlugin.key,\n // });\n //\n // break;\n // }\n // case 'ul':\n // case 'ol': {\n // insertEmptyElement(editor, ParagraphPlugin.key, {\n // select: true,\n // nextBlock: true,\n // });\n //\n // if (settingsStore.get.checkedId(IndentListPlugin.key)) {\n // toggleIndentList(editor, {\n // listStyleType: type === 'ul' ? 'disc' : 'decimal',\n // });\n // } else if (settingsStore.get.checkedId('list')) {\n // toggleList(editor, { type });\n // }\n //\n // break;\n // }\n // case TablePlugin.key: {\n // insertTable(editor);\n //\n // break;\n // }\n // case LinkPlugin.key: {\n // triggerFloatingLink(editor, { focused: true });\n //\n // break;\n // }\n default: {\n insertEmptyElement(editor, type, {\n nextBlock: true,\n select: true,\n });\n }\n }\n\n focusEditor(editor);\n }}\n >\n \n {itemLabel}\n \n )\n )}\n \n ))}\n \n \n );\n}\n", "name": "insert-dropdown-menu.tsx" } ], diff --git a/apps/www/public/registry/styles/default/kbd-leaf.json b/apps/www/public/registry/styles/default/kbd-leaf.json index 8dcb6d5546..d6ff3ab250 100644 --- a/apps/www/public/registry/styles/default/kbd-leaf.json +++ b/apps/www/public/registry/styles/default/kbd-leaf.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const KbdLeaf = withRef(\n ({ children, className, ...props }, ref) => (\n \n {children}\n \n )\n);\n", + "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const KbdLeaf = withRef(\n ({ children, className, ...props }, ref) => (\n \n {children}\n \n )\n);\n", "name": "kbd-leaf.tsx" } ], diff --git a/apps/www/public/registry/styles/default/line-height-dropdown-menu.json b/apps/www/public/registry/styles/default/line-height-dropdown-menu.json index d6c49e00fd..f21ba64049 100644 --- a/apps/www/public/registry/styles/default/line-height-dropdown-menu.json +++ b/apps/www/public/registry/styles/default/line-height-dropdown-menu.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n useLineHeightDropdownMenu,\n useLineHeightDropdownMenuState,\n} from '@udecode/plate-line-height/react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function LineHeightDropdownMenu({ ...props }: DropdownMenuProps) {\n const openState = useOpenState();\n const state = useLineHeightDropdownMenuState();\n const { radioGroupProps } = useLineHeightDropdownMenu(state);\n\n return (\n \n \n \n \n \n \n\n \n \n {state.values.map((_value) => (\n \n {_value}\n \n ))}\n \n \n \n );\n}\n", + "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n useLineHeightDropdownMenu,\n useLineHeightDropdownMenuState,\n} from '@udecode/plate-line-height/react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function LineHeightDropdownMenu({ ...props }: DropdownMenuProps) {\n const openState = useOpenState();\n const state = useLineHeightDropdownMenuState();\n const { radioGroupProps } = useLineHeightDropdownMenu(state);\n\n return (\n \n \n \n \n \n \n\n \n \n {state.values.map((_value) => (\n \n {_value}\n \n ))}\n \n \n \n );\n}\n", "name": "line-height-dropdown-menu.tsx" } ], diff --git a/apps/www/public/registry/styles/default/link-element.json b/apps/www/public/registry/styles/default/link-element.json index 32369a89a9..fb3ccaf50e 100644 --- a/apps/www/public/registry/styles/default/link-element.json +++ b/apps/www/public/registry/styles/default/link-element.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport type { TLinkElement } from '@udecode/plate-link';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement, useElement } from '@udecode/plate-common/react';\nimport { useLink } from '@udecode/plate-link/react';\n\nexport const LinkElement = withRef(\n ({ children, className, ...props }, ref) => {\n const element = useElement();\n const { props: linkProps } = useLink({ element });\n\n return (\n \n {children}\n \n );\n }\n);\n", + "content": "import React from 'react';\n\nimport type { TLinkElement } from '@udecode/plate-link';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement, useElement } from '@udecode/plate-common/react';\nimport { useLink } from '@udecode/plate-link/react';\n\nexport const LinkElement = withRef(\n ({ children, className, ...props }, ref) => {\n const element = useElement();\n const { props: linkProps } = useLink({ element });\n\n return (\n \n {children}\n \n );\n }\n);\n", "name": "link-element.tsx" } ], diff --git a/apps/www/public/registry/styles/default/link-floating-toolbar.json b/apps/www/public/registry/styles/default/link-floating-toolbar.json index df0ccbcf64..c417efebb2 100644 --- a/apps/www/public/registry/styles/default/link-floating-toolbar.json +++ b/apps/www/public/registry/styles/default/link-floating-toolbar.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport { useFormInputProps } from '@udecode/plate-common/react';\nimport {\n type UseVirtualFloatingOptions,\n flip,\n offset,\n} from '@udecode/plate-floating';\nimport {\n FloatingLinkUrlInput,\n type LinkFloatingToolbarState,\n LinkOpenButton,\n useFloatingLinkEdit,\n useFloatingLinkEditState,\n useFloatingLinkInsert,\n useFloatingLinkInsertState,\n} from '@udecode/plate-link/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { buttonVariants } from './button';\nimport { inputVariants } from './input';\nimport { popoverVariants } from './popover';\nimport { Separator } from './separator';\n\nconst floatingOptions: UseVirtualFloatingOptions = {\n middleware: [\n offset(12),\n flip({\n fallbackPlacements: ['bottom-end', 'top-start', 'top-end'],\n padding: 12,\n }),\n ],\n placement: 'bottom-start',\n};\n\nexport interface LinkFloatingToolbarProps {\n state?: LinkFloatingToolbarState;\n}\n\nexport function LinkFloatingToolbar({ state }: LinkFloatingToolbarProps) {\n const insertState = useFloatingLinkInsertState({\n ...state,\n floatingOptions: {\n ...floatingOptions,\n ...state?.floatingOptions,\n },\n });\n const {\n hidden,\n props: insertProps,\n ref: insertRef,\n textInputProps,\n } = useFloatingLinkInsert(insertState);\n\n const editState = useFloatingLinkEditState({\n ...state,\n floatingOptions: {\n ...floatingOptions,\n ...state?.floatingOptions,\n },\n });\n const {\n editButtonProps,\n props: editProps,\n ref: editRef,\n unlinkButtonProps,\n } = useFloatingLinkEdit(editState);\n const inputProps = useFormInputProps({\n preventDefaultOnEnterKeydown: true,\n });\n\n if (hidden) return null;\n\n const input = (\n
\n
\n
\n \n
\n\n \n
\n \n
\n
\n \n
\n \n
\n
\n );\n\n const editContent = editState.isEditing ? (\n input\n ) : (\n
\n \n Edit link\n \n\n \n\n \n \n \n\n \n\n \n \n \n
\n );\n\n return (\n <>\n \n {input}\n \n\n \n {editContent}\n \n \n );\n}\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport { useFormInputProps } from '@udecode/plate-common/react';\nimport {\n type UseVirtualFloatingOptions,\n flip,\n offset,\n} from '@udecode/plate-floating';\nimport {\n type LinkFloatingToolbarState,\n FloatingLinkUrlInput,\n LinkOpenButton,\n useFloatingLinkEdit,\n useFloatingLinkEditState,\n useFloatingLinkInsert,\n useFloatingLinkInsertState,\n} from '@udecode/plate-link/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { buttonVariants } from './button';\nimport { inputVariants } from './input';\nimport { popoverVariants } from './popover';\nimport { Separator } from './separator';\n\nconst floatingOptions: UseVirtualFloatingOptions = {\n middleware: [\n offset(12),\n flip({\n fallbackPlacements: ['bottom-end', 'top-start', 'top-end'],\n padding: 12,\n }),\n ],\n placement: 'bottom-start',\n};\n\nexport interface LinkFloatingToolbarProps {\n state?: LinkFloatingToolbarState;\n}\n\nexport function LinkFloatingToolbar({ state }: LinkFloatingToolbarProps) {\n const insertState = useFloatingLinkInsertState({\n ...state,\n floatingOptions: {\n ...floatingOptions,\n ...state?.floatingOptions,\n },\n });\n const {\n hidden,\n props: insertProps,\n ref: insertRef,\n textInputProps,\n } = useFloatingLinkInsert(insertState);\n\n const editState = useFloatingLinkEditState({\n ...state,\n floatingOptions: {\n ...floatingOptions,\n ...state?.floatingOptions,\n },\n });\n const {\n editButtonProps,\n props: editProps,\n ref: editRef,\n unlinkButtonProps,\n } = useFloatingLinkEdit(editState);\n const inputProps = useFormInputProps({\n preventDefaultOnEnterKeydown: true,\n });\n\n if (hidden) return null;\n\n const input = (\n
\n
\n
\n \n
\n\n \n
\n \n
\n
\n \n
\n \n
\n
\n );\n\n const editContent = editState.isEditing ? (\n input\n ) : (\n
\n \n Edit link\n \n\n \n\n \n \n \n\n \n\n \n \n \n
\n );\n\n return (\n <>\n \n {input}\n \n\n \n {editContent}\n \n \n );\n}\n", "name": "link-floating-toolbar.tsx" } ], diff --git a/apps/www/public/registry/styles/default/list-element.json b/apps/www/public/registry/styles/default/list-element.json index 705530fb3f..be927347eb 100644 --- a/apps/www/public/registry/styles/default/list-element.json +++ b/apps/www/public/registry/styles/default/list-element.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport { withRef, withVariants } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\nconst listVariants = cva('m-0 ps-6', {\n variants: {\n variant: {\n ol: 'list-decimal',\n ul: 'list-disc [&_ul]:list-[circle] [&_ul_ul]:list-[square]',\n },\n },\n});\n\nconst ListElementVariants = withVariants(PlateElement, listVariants, [\n 'variant',\n]);\n\nexport const ListElement = withRef(\n ({ children, variant = 'ul', ...props }, ref) => {\n const Component = variant!;\n\n return (\n \n {children}\n \n );\n }\n);\n", + "content": "import React from 'react';\n\nimport { withRef, withVariants } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\nconst listVariants = cva('m-0 ps-6', {\n variants: {\n variant: {\n ol: 'list-decimal',\n ul: 'list-disc [&_ul]:list-[circle] [&_ul_ul]:list-[square]',\n },\n },\n});\n\nconst ListElementVariants = withVariants(PlateElement, listVariants, [\n 'variant',\n]);\n\nexport const ListElement = withRef(\n ({ children, variant = 'ul', ...props }, ref) => {\n const Component = variant!;\n\n return (\n \n {children}\n \n );\n }\n);\n", "name": "list-element.tsx" } ], diff --git a/apps/www/public/registry/styles/default/mark-toolbar-button.json b/apps/www/public/registry/styles/default/mark-toolbar-button.json index 2ec450cc3f..ea9fb2edac 100644 --- a/apps/www/public/registry/styles/default/mark-toolbar-button.json +++ b/apps/www/public/registry/styles/default/mark-toolbar-button.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport {\n useMarkToolbarButton,\n useMarkToolbarButtonState,\n} from '@udecode/plate-common/react';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const MarkToolbarButton = withRef<\n typeof ToolbarButton,\n {\n clear?: string | string[];\n nodeType: string;\n }\n>(({ clear, nodeType, ...rest }, ref) => {\n const state = useMarkToolbarButtonState({ clear, nodeType });\n const { props } = useMarkToolbarButton(state);\n\n return ;\n});\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport {\n useMarkToolbarButton,\n useMarkToolbarButtonState,\n} from '@udecode/plate-common/react';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const MarkToolbarButton = withRef<\n typeof ToolbarButton,\n {\n nodeType: string;\n clear?: string[] | string;\n }\n>(({ clear, nodeType, ...rest }, ref) => {\n const state = useMarkToolbarButtonState({ clear, nodeType });\n const { props } = useMarkToolbarButton(state);\n\n return ;\n});\n", "name": "mark-toolbar-button.tsx" } ], diff --git a/apps/www/public/registry/styles/default/media-embed-element.json b/apps/www/public/registry/styles/default/media-embed-element.json index eb6a16b7a7..4dab1429b6 100644 --- a/apps/www/public/registry/styles/default/media-embed-element.json +++ b/apps/www/public/registry/styles/default/media-embed-element.json @@ -6,7 +6,7 @@ ], "files": [ { - "content": "import React from 'react';\nimport LiteYouTubeEmbed from 'react-lite-youtube-embed';\nimport { Tweet } from 'react-tweet';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement, withHOC } from '@udecode/plate-common/react';\nimport { parseTwitterUrl, parseVideoUrl } from '@udecode/plate-media';\nimport { MediaEmbedPlugin, useMediaState } from '@udecode/plate-media/react';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport {\n Resizable,\n ResizeHandle,\n mediaResizeHandleVariants,\n} from './resizable';\n\nexport const MediaEmbedElement = withHOC(\n ResizableProvider,\n withRef(({ children, className, ...props }, ref) => {\n const {\n align = 'center',\n embed,\n focused,\n isTweet,\n isVideo,\n isYoutube,\n readOnly,\n selected,\n } = useMediaState({\n urlParsers: [parseTwitterUrl, parseVideoUrl],\n });\n const width = useResizableStore().get.width();\n const provider = embed?.provider;\n\n return (\n \n \n
\n \n \n\n {isVideo ? (\n isYoutube ? (\n _iframe]:absolute [&_>_iframe]:left-0 [&_>_iframe]:top-0 [&_>_iframe]:size-full',\n '[&_>_.lty-playbtn]:z-[1] [&_>_.lty-playbtn]:h-[46px] [&_>_.lty-playbtn]:w-[70px] [&_>_.lty-playbtn]:rounded-[14%] [&_>_.lty-playbtn]:bg-[#212121] [&_>_.lty-playbtn]:opacity-80 [&_>_.lty-playbtn]:[transition:all_0.2s_cubic-bezier(0,_0,_0.2,_1)]',\n '[&:hover_>_.lty-playbtn]:bg-[red] [&:hover_>_.lty-playbtn]:opacity-100',\n '[&_>_.lty-playbtn]:before:border-y-[11px] [&_>_.lty-playbtn]:before:border-l-[19px] [&_>_.lty-playbtn]:before:border-r-0 [&_>_.lty-playbtn]:before:border-[transparent_transparent_transparent_#fff] [&_>_.lty-playbtn]:before:content-[\"\"]',\n '[&_>_.lty-playbtn]:absolute [&_>_.lty-playbtn]:left-1/2 [&_>_.lty-playbtn]:top-1/2 [&_>_.lty-playbtn]:[transform:translate3d(-50%,-50%,0)]',\n '[&_>_.lty-playbtn]:before:absolute [&_>_.lty-playbtn]:before:left-1/2 [&_>_.lty-playbtn]:before:top-1/2 [&_>_.lty-playbtn]:before:[transform:translate3d(-50%,-50%,0)]',\n '[&.lyt-activated]:cursor-[unset]',\n '[&.lyt-activated]:before:pointer-events-none [&.lyt-activated]:before:opacity-0',\n '[&.lyt-activated_>_.lty-playbtn]:pointer-events-none [&.lyt-activated_>_.lty-playbtn]:!opacity-0'\n )}\n />\n ) : (\n \n \n \n )\n ) : null}\n\n {isTweet && (\n \n \n \n )}\n\n \n \n\n \n \n \n
\n\n {children}\n \n \n );\n })\n);\n", + "content": "import React from 'react';\nimport LiteYouTubeEmbed from 'react-lite-youtube-embed';\nimport { Tweet } from 'react-tweet';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement, withHOC } from '@udecode/plate-common/react';\nimport { parseTwitterUrl, parseVideoUrl } from '@udecode/plate-media';\nimport { MediaEmbedPlugin, useMediaState } from '@udecode/plate-media/react';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport {\n Resizable,\n ResizeHandle,\n mediaResizeHandleVariants,\n} from './resizable';\n\nexport const MediaEmbedElement = withHOC(\n ResizableProvider,\n withRef(({ children, className, ...props }, ref) => {\n const {\n align = 'center',\n embed,\n focused,\n isTweet,\n isVideo,\n isYoutube,\n readOnly,\n selected,\n } = useMediaState({\n urlParsers: [parseTwitterUrl, parseVideoUrl],\n });\n const width = useResizableStore().get.width();\n const provider = embed?.provider;\n\n return (\n \n \n
\n \n \n\n {isVideo ? (\n isYoutube ? (\n _iframe]:absolute [&_>_iframe]:left-0 [&_>_iframe]:top-0 [&_>_iframe]:size-full',\n '[&_>_.lty-playbtn]:z-[1] [&_>_.lty-playbtn]:h-[46px] [&_>_.lty-playbtn]:w-[70px] [&_>_.lty-playbtn]:rounded-[14%] [&_>_.lty-playbtn]:bg-[#212121] [&_>_.lty-playbtn]:opacity-80 [&_>_.lty-playbtn]:[transition:all_0.2s_cubic-bezier(0,_0,_0.2,_1)]',\n '[&:hover_>_.lty-playbtn]:bg-[red] [&:hover_>_.lty-playbtn]:opacity-100',\n '[&_>_.lty-playbtn]:before:border-y-[11px] [&_>_.lty-playbtn]:before:border-l-[19px] [&_>_.lty-playbtn]:before:border-r-0 [&_>_.lty-playbtn]:before:border-[transparent_transparent_transparent_#fff] [&_>_.lty-playbtn]:before:content-[\"\"]',\n '[&_>_.lty-playbtn]:absolute [&_>_.lty-playbtn]:left-1/2 [&_>_.lty-playbtn]:top-1/2 [&_>_.lty-playbtn]:[transform:translate3d(-50%,-50%,0)]',\n '[&_>_.lty-playbtn]:before:absolute [&_>_.lty-playbtn]:before:left-1/2 [&_>_.lty-playbtn]:before:top-1/2 [&_>_.lty-playbtn]:before:[transform:translate3d(-50%,-50%,0)]',\n '[&.lyt-activated]:cursor-[unset]',\n '[&.lyt-activated]:before:pointer-events-none [&.lyt-activated]:before:opacity-0',\n '[&.lyt-activated_>_.lty-playbtn]:pointer-events-none [&.lyt-activated_>_.lty-playbtn]:!opacity-0'\n )}\n />\n ) : (\n \n \n \n )\n ) : null}\n\n {isTweet && (\n \n \n \n )}\n\n \n \n\n \n \n \n
\n\n {children}\n \n \n );\n })\n);\n", "name": "media-embed-element.tsx" } ], diff --git a/apps/www/public/registry/styles/default/media-popover.json b/apps/www/public/registry/styles/default/media-popover.json index e9e3d8cf7d..14eb2bcbf5 100644 --- a/apps/www/public/registry/styles/default/media-popover.json +++ b/apps/www/public/registry/styles/default/media-popover.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React, { useEffect } from 'react';\n\nimport {\n type WithRequiredKey,\n isSelectionExpanded,\n} from '@udecode/plate-common';\nimport {\n useEditorSelector,\n useElement,\n useRemoveNodeButton,\n} from '@udecode/plate-common/react';\nimport {\n FloatingMedia as FloatingMediaPrimitive,\n floatingMediaActions,\n useFloatingMediaSelectors,\n} from '@udecode/plate-media/react';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button, buttonVariants } from './button';\nimport { CaptionButton } from './caption';\nimport { inputVariants } from './input';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\nimport { Separator } from './separator';\n\nexport interface MediaPopoverProps {\n children: React.ReactNode;\n plugin: WithRequiredKey;\n}\n\nexport function MediaPopover({ children, plugin }: MediaPopoverProps) {\n const readOnly = useReadOnly();\n const selected = useSelected();\n\n const selectionCollapsed = useEditorSelector(\n (editor) => !isSelectionExpanded(editor),\n []\n );\n const isOpen = !readOnly && selected && selectionCollapsed;\n const isEditing = useFloatingMediaSelectors().isEditing();\n\n useEffect(() => {\n if (!isOpen && isEditing) {\n floatingMediaActions.isEditing(false);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpen]);\n\n const element = useElement();\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n if (readOnly) return <>{children};\n\n return (\n \n {children}\n\n e.preventDefault()}\n >\n {isEditing ? (\n
\n
\n
\n \n
\n\n \n
\n
\n ) : (\n
\n \n Edit link\n \n\n Caption\n\n \n\n \n
\n )}\n \n \n );\n}\n", + "content": "import React, { useEffect } from 'react';\n\nimport {\n type WithRequiredKey,\n isSelectionExpanded,\n} from '@udecode/plate-common';\nimport {\n useEditorSelector,\n useElement,\n useRemoveNodeButton,\n} from '@udecode/plate-common/react';\nimport {\n FloatingMedia as FloatingMediaPrimitive,\n floatingMediaActions,\n useFloatingMediaSelectors,\n} from '@udecode/plate-media/react';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button, buttonVariants } from './button';\nimport { CaptionButton } from './caption';\nimport { inputVariants } from './input';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\nimport { Separator } from './separator';\n\nexport interface MediaPopoverProps {\n children: React.ReactNode;\n plugin: WithRequiredKey;\n}\n\nexport function MediaPopover({ children, plugin }: MediaPopoverProps) {\n const readOnly = useReadOnly();\n const selected = useSelected();\n\n const selectionCollapsed = useEditorSelector(\n (editor) => !isSelectionExpanded(editor),\n []\n );\n const isOpen = !readOnly && selected && selectionCollapsed;\n const isEditing = useFloatingMediaSelectors().isEditing();\n\n useEffect(() => {\n if (!isOpen && isEditing) {\n floatingMediaActions.isEditing(false);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpen]);\n\n const element = useElement();\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n if (readOnly) return <>{children};\n\n return (\n \n {children}\n\n e.preventDefault()}\n >\n {isEditing ? (\n
\n
\n
\n \n
\n\n \n
\n
\n ) : (\n
\n \n Edit link\n \n\n Caption\n\n \n\n \n
\n )}\n \n \n );\n}\n", "name": "media-popover.tsx" } ], diff --git a/apps/www/public/registry/styles/default/mention-element.json b/apps/www/public/registry/styles/default/mention-element.json index 9edde80fc4..e16b677675 100644 --- a/apps/www/public/registry/styles/default/mention-element.json +++ b/apps/www/public/registry/styles/default/mention-element.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport type { TMentionElement } from '@udecode/plate-mention';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { getHandler } from '@udecode/plate-common';\nimport { PlateElement, useElement } from '@udecode/plate-common/react';\nimport { useFocused, useSelected } from 'slate-react';\n\nexport const MentionElement = withRef<\n typeof PlateElement,\n {\n onClick?: (mentionNode: any) => void;\n prefix?: string;\n renderLabel?: (mentionable: TMentionElement) => string;\n }\n>(({ children, className, onClick, prefix, renderLabel, ...props }, ref) => {\n const element = useElement();\n const selected = useSelected();\n const focused = useFocused();\n\n return (\n \n {prefix}\n {renderLabel ? renderLabel(element) : element.value}\n {children}\n \n );\n});\n", + "content": "import React from 'react';\n\nimport type { TMentionElement } from '@udecode/plate-mention';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { getHandler } from '@udecode/plate-common';\nimport { PlateElement, useElement } from '@udecode/plate-common/react';\nimport { useFocused, useSelected } from 'slate-react';\n\nexport const MentionElement = withRef<\n typeof PlateElement,\n {\n prefix?: string;\n renderLabel?: (mentionable: TMentionElement) => string;\n onClick?: (mentionNode: any) => void;\n }\n>(({ children, className, prefix, renderLabel, onClick, ...props }, ref) => {\n const element = useElement();\n const selected = useSelected();\n const focused = useFocused();\n\n return (\n \n {prefix}\n {renderLabel ? renderLabel(element) : element.value}\n {children}\n \n );\n});\n", "name": "mention-element.tsx" } ], diff --git a/apps/www/public/registry/styles/default/mention-input-element.json b/apps/www/public/registry/styles/default/mention-input-element.json index e1281411c5..f63a61b0b1 100644 --- a/apps/www/public/registry/styles/default/mention-input-element.json +++ b/apps/www/public/registry/styles/default/mention-input-element.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React, { useState } from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport { getMentionOnSelectItem } from '@udecode/plate-mention';\n\nimport {\n InlineCombobox,\n InlineComboboxContent,\n InlineComboboxEmpty,\n InlineComboboxInput,\n InlineComboboxItem,\n} from './inline-combobox';\n\nconst onSelectItem = getMentionOnSelectItem();\n\nexport const MentionInputElement = withRef(\n ({ className, ...props }, ref) => {\n const { children, editor, element } = props;\n const [search, setSearch] = useState('');\n\n return (\n \n \n \n \n \n\n \n No results found\n\n {MENTIONABLES.map((item) => (\n onSelectItem(editor, item, search)}\n value={item.text}\n >\n {item.text}\n \n ))}\n \n \n\n {children}\n \n );\n }\n);\n\nexport const MENTIONABLES = [\n { key: '0', text: 'Aayla Secura' },\n { key: '1', text: 'Adi Gallia' },\n {\n key: '2',\n text: 'Admiral Dodd Rancit',\n },\n {\n key: '3',\n text: 'Admiral Firmus Piett',\n },\n {\n key: '4',\n text: 'Admiral Gial Ackbar',\n },\n { key: '5', text: 'Admiral Ozzel' },\n { key: '6', text: 'Admiral Raddus' },\n {\n key: '7',\n text: 'Admiral Terrinald Screed',\n },\n { key: '8', text: 'Admiral Trench' },\n {\n key: '9',\n text: 'Admiral U.O. Statura',\n },\n { key: '10', text: 'Agen Kolar' },\n { key: '11', text: 'Agent Kallus' },\n {\n key: '12',\n text: 'Aiolin and Morit Astarte',\n },\n { key: '13', text: 'Aks Moe' },\n { key: '14', text: 'Almec' },\n { key: '15', text: 'Alton Kastle' },\n { key: '16', text: 'Amee' },\n { key: '17', text: 'AP-5' },\n { key: '18', text: 'Armitage Hux' },\n { key: '19', text: 'Artoo' },\n { key: '20', text: 'Arvel Crynyd' },\n { key: '21', text: 'Asajj Ventress' },\n { key: '22', text: 'Aurra Sing' },\n { key: '23', text: 'AZI-3' },\n { key: '24', text: 'Bala-Tik' },\n { key: '25', text: 'Barada' },\n { key: '26', text: 'Bargwill Tomder' },\n { key: '27', text: 'Baron Papanoida' },\n { key: '28', text: 'Barriss Offee' },\n { key: '29', text: 'Baze Malbus' },\n { key: '30', text: 'Bazine Netal' },\n { key: '31', text: 'BB-8' },\n { key: '32', text: 'BB-9E' },\n { key: '33', text: 'Ben Quadinaros' },\n { key: '34', text: 'Berch Teller' },\n { key: '35', text: 'Beru Lars' },\n { key: '36', text: 'Bib Fortuna' },\n {\n key: '37',\n text: 'Biggs Darklighter',\n },\n { key: '38', text: 'Black Krrsantan' },\n { key: '39', text: 'Bo-Katan Kryze' },\n { key: '40', text: 'Boba Fett' },\n { key: '41', text: 'Bobbajo' },\n { key: '42', text: 'Bodhi Rook' },\n { key: '43', text: 'Borvo the Hutt' },\n { key: '44', text: 'Boss Nass' },\n { key: '45', text: 'Bossk' },\n {\n key: '46',\n text: 'Breha Antilles-Organa',\n },\n { key: '47', text: 'Bren Derlin' },\n { key: '48', text: 'Brendol Hux' },\n { key: '49', text: 'BT-1' },\n];\n", + "content": "import React, { useState } from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport { getMentionOnSelectItem } from '@udecode/plate-mention';\n\nimport {\n InlineCombobox,\n InlineComboboxContent,\n InlineComboboxEmpty,\n InlineComboboxInput,\n InlineComboboxItem,\n} from './inline-combobox';\n\nconst onSelectItem = getMentionOnSelectItem();\n\nexport const MentionInputElement = withRef(\n ({ className, ...props }, ref) => {\n const { children, editor, element } = props;\n const [search, setSearch] = useState('');\n\n return (\n \n \n \n \n \n\n \n No results found\n\n {MENTIONABLES.map((item) => (\n onSelectItem(editor, item, search)}\n >\n {item.text}\n \n ))}\n \n \n\n {children}\n \n );\n }\n);\n\nexport const MENTIONABLES = [\n { key: '0', text: 'Aayla Secura' },\n { key: '1', text: 'Adi Gallia' },\n {\n key: '2',\n text: 'Admiral Dodd Rancit',\n },\n {\n key: '3',\n text: 'Admiral Firmus Piett',\n },\n {\n key: '4',\n text: 'Admiral Gial Ackbar',\n },\n { key: '5', text: 'Admiral Ozzel' },\n { key: '6', text: 'Admiral Raddus' },\n {\n key: '7',\n text: 'Admiral Terrinald Screed',\n },\n { key: '8', text: 'Admiral Trench' },\n {\n key: '9',\n text: 'Admiral U.O. Statura',\n },\n { key: '10', text: 'Agen Kolar' },\n { key: '11', text: 'Agent Kallus' },\n {\n key: '12',\n text: 'Aiolin and Morit Astarte',\n },\n { key: '13', text: 'Aks Moe' },\n { key: '14', text: 'Almec' },\n { key: '15', text: 'Alton Kastle' },\n { key: '16', text: 'Amee' },\n { key: '17', text: 'AP-5' },\n { key: '18', text: 'Armitage Hux' },\n { key: '19', text: 'Artoo' },\n { key: '20', text: 'Arvel Crynyd' },\n { key: '21', text: 'Asajj Ventress' },\n { key: '22', text: 'Aurra Sing' },\n { key: '23', text: 'AZI-3' },\n { key: '24', text: 'Bala-Tik' },\n { key: '25', text: 'Barada' },\n { key: '26', text: 'Bargwill Tomder' },\n { key: '27', text: 'Baron Papanoida' },\n { key: '28', text: 'Barriss Offee' },\n { key: '29', text: 'Baze Malbus' },\n { key: '30', text: 'Bazine Netal' },\n { key: '31', text: 'BB-8' },\n { key: '32', text: 'BB-9E' },\n { key: '33', text: 'Ben Quadinaros' },\n { key: '34', text: 'Berch Teller' },\n { key: '35', text: 'Beru Lars' },\n { key: '36', text: 'Bib Fortuna' },\n {\n key: '37',\n text: 'Biggs Darklighter',\n },\n { key: '38', text: 'Black Krrsantan' },\n { key: '39', text: 'Bo-Katan Kryze' },\n { key: '40', text: 'Boba Fett' },\n { key: '41', text: 'Bobbajo' },\n { key: '42', text: 'Bodhi Rook' },\n { key: '43', text: 'Borvo the Hutt' },\n { key: '44', text: 'Boss Nass' },\n { key: '45', text: 'Bossk' },\n {\n key: '46',\n text: 'Breha Antilles-Organa',\n },\n { key: '47', text: 'Bren Derlin' },\n { key: '48', text: 'Brendol Hux' },\n { key: '49', text: 'BT-1' },\n];\n", "name": "mention-input-element.tsx" } ], diff --git a/apps/www/public/registry/styles/default/mode-dropdown-menu.json b/apps/www/public/registry/styles/default/mode-dropdown-menu.json index 29887c599b..018d360952 100644 --- a/apps/www/public/registry/styles/default/mode-dropdown-menu.json +++ b/apps/www/public/registry/styles/default/mode-dropdown-menu.json @@ -2,7 +2,7 @@ "dependencies": [], "files": [ { - "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n focusEditor,\n useEditorReadOnly,\n useEditorRef,\n usePlateStore,\n} from '@udecode/plate-common/react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function ModeDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const setReadOnly = usePlateStore().set.readOnly();\n const readOnly = useEditorReadOnly();\n const openState = useOpenState();\n\n let value = 'editing';\n\n if (readOnly) value = 'viewing';\n\n const item: any = {\n editing: (\n <>\n \n Editing\n \n ),\n viewing: (\n <>\n \n Viewing\n \n ),\n };\n\n return (\n \n \n \n {item[value]}\n \n \n\n \n {\n if (newValue !== 'viewing') {\n setReadOnly(false);\n }\n if (newValue === 'viewing') {\n setReadOnly(true);\n\n return;\n }\n if (newValue === 'editing') {\n focusEditor(editor);\n\n return;\n }\n }}\n value={value}\n >\n \n {item.editing}\n \n\n \n {item.viewing}\n \n \n \n \n );\n}\n", + "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n focusEditor,\n useEditorReadOnly,\n useEditorRef,\n usePlateStore,\n} from '@udecode/plate-common/react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function ModeDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const setReadOnly = usePlateStore().set.readOnly();\n const readOnly = useEditorReadOnly();\n const openState = useOpenState();\n\n let value = 'editing';\n\n if (readOnly) value = 'viewing';\n\n const item: any = {\n editing: (\n <>\n \n Editing\n \n ),\n viewing: (\n <>\n \n Viewing\n \n ),\n };\n\n return (\n \n \n \n {item[value]}\n \n \n\n \n {\n if (newValue !== 'viewing') {\n setReadOnly(false);\n }\n if (newValue === 'viewing') {\n setReadOnly(true);\n\n return;\n }\n if (newValue === 'editing') {\n focusEditor(editor);\n\n return;\n }\n }}\n >\n \n {item.editing}\n \n\n \n {item.viewing}\n \n \n \n \n );\n}\n", "name": "mode-dropdown-menu.tsx" } ], diff --git a/apps/www/public/registry/styles/default/more-dropdown-menu.json b/apps/www/public/registry/styles/default/more-dropdown-menu.json index 791806db04..4ffc8329aa 100644 --- a/apps/www/public/registry/styles/default/more-dropdown-menu.json +++ b/apps/www/public/registry/styles/default/more-dropdown-menu.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n SubscriptPlugin,\n SuperscriptPlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { focusEditor, useEditorRef } from '@udecode/plate-common/react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function MoreDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const openState = useOpenState();\n\n return (\n \n \n \n \n \n \n\n \n {\n editor.tf.toggle.mark({\n clear: [SubscriptPlugin.key, SuperscriptPlugin.key],\n key: SuperscriptPlugin.key,\n });\n focusEditor(editor);\n }}\n >\n \n Superscript\n {/* (⌘+,) */}\n \n {\n editor.tf.toggle.mark({\n clear: [SuperscriptPlugin.key, SubscriptPlugin.key],\n key: SubscriptPlugin.key,\n });\n focusEditor(editor);\n }}\n >\n \n Subscript\n {/* (⌘+.) */}\n \n \n \n );\n}\n", + "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n SubscriptPlugin,\n SuperscriptPlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { focusEditor, useEditorRef } from '@udecode/plate-common/react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function MoreDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const openState = useOpenState();\n\n return (\n \n \n \n \n \n \n\n \n {\n editor.tf.toggle.mark({\n key: SuperscriptPlugin.key,\n clear: [SubscriptPlugin.key, SuperscriptPlugin.key],\n });\n focusEditor(editor);\n }}\n >\n \n Superscript\n {/* (⌘+,) */}\n \n {\n editor.tf.toggle.mark({\n key: SubscriptPlugin.key,\n clear: [SuperscriptPlugin.key, SubscriptPlugin.key],\n });\n focusEditor(editor);\n }}\n >\n \n Subscript\n {/* (⌘+.) */}\n \n \n \n );\n}\n", "name": "more-dropdown-menu.tsx" } ], diff --git a/apps/www/public/registry/styles/default/placeholder.json b/apps/www/public/registry/styles/default/placeholder.json index 3d1fb2eb2a..b47d08be45 100644 --- a/apps/www/public/registry/styles/default/placeholder.json +++ b/apps/www/public/registry/styles/default/placeholder.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport { ParagraphPlugin } from '@udecode/plate-common/react';\nimport {\n type PlaceholderProps,\n createNodeHOC,\n createNodesHOC,\n usePlaceholderState,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\n\nexport const Placeholder = (props: PlaceholderProps) => {\n const { children, nodeProps, placeholder } = props;\n\n const { enabled } = usePlaceholderState(props);\n\n return React.Children.map(children, (child) => {\n return React.cloneElement(child, {\n className: child.props.className,\n nodeProps: {\n ...nodeProps,\n className: cn(\n enabled &&\n 'before:absolute before:cursor-text before:opacity-30 before:content-[attr(placeholder)]'\n ),\n placeholder,\n },\n });\n });\n};\n\nexport const withPlaceholder = createNodeHOC(Placeholder);\n\nexport const withPlaceholdersPrimitive = createNodesHOC(Placeholder);\n\nexport const withPlaceholders = (components: any) =>\n withPlaceholdersPrimitive(components, [\n {\n hideOnBlur: true,\n key: ParagraphPlugin.key,\n placeholder: 'Type a paragraph',\n query: {\n maxLevel: 1,\n },\n },\n {\n hideOnBlur: false,\n key: HEADING_KEYS.h1,\n placeholder: 'Untitled',\n },\n ]);\n", + "content": "import React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport { ParagraphPlugin } from '@udecode/plate-common/react';\nimport {\n type PlaceholderProps,\n createNodeHOC,\n createNodesHOC,\n usePlaceholderState,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\n\nexport const Placeholder = (props: PlaceholderProps) => {\n const { children, nodeProps, placeholder } = props;\n\n const { enabled } = usePlaceholderState(props);\n\n return React.Children.map(children, (child) => {\n return React.cloneElement(child, {\n className: child.props.className,\n nodeProps: {\n ...nodeProps,\n className: cn(\n enabled &&\n 'before:absolute before:cursor-text before:opacity-30 before:content-[attr(placeholder)]'\n ),\n placeholder,\n },\n });\n });\n};\n\nexport const withPlaceholder = createNodeHOC(Placeholder);\n\nexport const withPlaceholdersPrimitive = createNodesHOC(Placeholder);\n\nexport const withPlaceholders = (components: any) =>\n withPlaceholdersPrimitive(components, [\n {\n key: ParagraphPlugin.key,\n hideOnBlur: true,\n placeholder: 'Type a paragraph',\n query: {\n maxLevel: 1,\n },\n },\n {\n key: HEADING_KEYS.h1,\n hideOnBlur: false,\n placeholder: 'Untitled',\n },\n ]);\n", "name": "placeholder.tsx" } ], diff --git a/apps/www/public/registry/styles/default/popover.json b/apps/www/public/registry/styles/default/popover.json index 71ec3ab1c7..a4843dd513 100644 --- a/apps/www/public/registry/styles/default/popover.json +++ b/apps/www/public/registry/styles/default/popover.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { cn, withRef } from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nexport const Popover = PopoverPrimitive.Root;\n\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\n\nexport const PopoverAnchor = PopoverPrimitive.Anchor;\n\nexport const popoverVariants = cva(\n 'w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 print:hidden'\n);\n\nexport const PopoverContent = withRef(\n ({ align = 'center', className, sideOffset = 4, style, ...props }, ref) => (\n \n \n \n )\n);\n", + "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { cn, withRef } from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nexport const Popover = PopoverPrimitive.Root;\n\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\n\nexport const PopoverAnchor = PopoverPrimitive.Anchor;\n\nexport const popoverVariants = cva(\n 'w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 print:hidden'\n);\n\nexport const PopoverContent = withRef(\n ({ align = 'center', className, sideOffset = 4, style, ...props }, ref) => (\n \n \n \n )\n);\n", "name": "popover.tsx" } ], diff --git a/apps/www/public/registry/styles/default/resizable.json b/apps/www/public/registry/styles/default/resizable.json index fa50586f94..abd268be18 100644 --- a/apps/www/public/registry/styles/default/resizable.json +++ b/apps/www/public/registry/styles/default/resizable.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef, withVariants } from '@udecode/cn';\nimport {\n Resizable as ResizablePrimitive,\n ResizeHandle as ResizeHandlePrimitive,\n} from '@udecode/plate-resizable';\nimport { cva } from 'class-variance-authority';\n\nexport const mediaResizeHandleVariants = cva(\n cn(\n 'top-0 flex w-6 select-none flex-col justify-center',\n \"after:flex after:h-16 after:w-[3px] after:rounded-[6px] after:bg-ring after:opacity-0 after:content-['_'] group-hover:after:opacity-100\"\n ),\n {\n variants: {\n direction: {\n left: '-left-3 -ml-3 pl-3',\n right: '-right-3 -mr-3 items-end pr-3',\n },\n },\n }\n);\n\nconst resizeHandleVariants = cva(cn('absolute z-40'), {\n variants: {\n direction: {\n bottom: 'w-full cursor-row-resize',\n left: 'h-full cursor-col-resize',\n right: 'h-full cursor-col-resize',\n top: 'w-full cursor-row-resize',\n },\n },\n});\n\nconst ResizeHandleVariants = withVariants(\n ResizeHandlePrimitive,\n resizeHandleVariants,\n ['direction']\n);\n\nexport const ResizeHandle = withRef(\n (props, ref) => (\n \n )\n);\n\nconst resizableVariants = cva('', {\n variants: {\n align: {\n center: 'mx-auto',\n left: 'mr-auto',\n right: 'ml-auto',\n },\n },\n});\n\nexport const Resizable = withVariants(ResizablePrimitive, resizableVariants, [\n 'align',\n]);\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef, withVariants } from '@udecode/cn';\nimport {\n Resizable as ResizablePrimitive,\n ResizeHandle as ResizeHandlePrimitive,\n} from '@udecode/plate-resizable';\nimport { cva } from 'class-variance-authority';\n\nexport const mediaResizeHandleVariants = cva(\n cn(\n 'top-0 flex w-6 select-none flex-col justify-center',\n \"after:flex after:h-16 after:w-[3px] after:rounded-[6px] after:bg-ring after:opacity-0 after:content-['_'] group-hover:after:opacity-100\"\n ),\n {\n variants: {\n direction: {\n left: '-left-3 -ml-3 pl-3',\n right: '-right-3 -mr-3 items-end pr-3',\n },\n },\n }\n);\n\nconst resizeHandleVariants = cva(cn('absolute z-40'), {\n variants: {\n direction: {\n bottom: 'w-full cursor-row-resize',\n left: 'h-full cursor-col-resize',\n right: 'h-full cursor-col-resize',\n top: 'w-full cursor-row-resize',\n },\n },\n});\n\nconst ResizeHandleVariants = withVariants(\n ResizeHandlePrimitive,\n resizeHandleVariants,\n ['direction']\n);\n\nexport const ResizeHandle = withRef(\n (props, ref) => (\n \n )\n);\n\nconst resizableVariants = cva('', {\n variants: {\n align: {\n center: 'mx-auto',\n left: 'mr-auto',\n right: 'ml-auto',\n },\n },\n});\n\nexport const Resizable = withVariants(ResizablePrimitive, resizableVariants, [\n 'align',\n]);\n", "name": "resizable.tsx" } ], diff --git a/apps/www/public/registry/styles/default/slash-input-element.json b/apps/www/public/registry/styles/default/slash-input-element.json index dbaa7c6dda..b98d079e64 100644 --- a/apps/www/public/registry/styles/default/slash-input-element.json +++ b/apps/www/public/registry/styles/default/slash-input-element.json @@ -5,7 +5,7 @@ ], "files": [ { - "content": "import React, { type ComponentType, type SVGProps } from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { type PlateEditor, PlateElement } from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListStyleType, toggleIndentList } from '@udecode/plate-indent-list';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n InlineCombobox,\n InlineComboboxContent,\n InlineComboboxEmpty,\n InlineComboboxInput,\n InlineComboboxItem,\n} from './inline-combobox';\n\ninterface SlashCommandRule {\n icon: ComponentType>;\n onSelect: (editor: PlateEditor) => void;\n value: string;\n keywords?: string[];\n}\n\nconst rules: SlashCommandRule[] = [\n {\n icon: Icons.h1,\n onSelect: (editor) => {\n editor.tf.toggle.block({ type: HEADING_KEYS.h1 });\n },\n value: 'Heading 1',\n },\n {\n icon: Icons.h2,\n onSelect: (editor) => {\n editor.tf.toggle.block({ type: HEADING_KEYS.h2 });\n },\n value: 'Heading 2',\n },\n {\n icon: Icons.h3,\n onSelect: (editor) => {\n editor.tf.toggle.block({ type: HEADING_KEYS.h3 });\n },\n value: 'Heading 3',\n },\n {\n icon: Icons.ul,\n keywords: ['ul', 'unordered list'],\n onSelect: (editor) => {\n toggleIndentList(editor, {\n listStyleType: ListStyleType.Disc,\n });\n },\n value: 'Bulleted list',\n },\n {\n icon: Icons.ol,\n keywords: ['ol', 'ordered list'],\n onSelect: (editor) => {\n toggleIndentList(editor, {\n listStyleType: ListStyleType.Decimal,\n });\n },\n value: 'Numbered list',\n },\n {\n icon: Icons.add,\n keywords: ['inline', 'date'],\n onSelect: (editor) => {\n editor.getTransforms(DatePlugin).insert.date();\n },\n value: 'Date',\n },\n];\n\nexport const SlashInputElement = withRef(\n ({ className, ...props }, ref) => {\n const { children, editor, element } = props;\n\n return (\n \n \n \n\n \n \n No matching commands found\n \n\n {rules.map(({ icon: Icon, keywords, onSelect, value }) => (\n onSelect(editor)}\n value={value}\n >\n \n {value}\n \n ))}\n \n \n\n {children}\n \n );\n }\n);\n", + "content": "import React, { type ComponentType, type SVGProps } from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { type PlateEditor, PlateElement } from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListStyleType, toggleIndentList } from '@udecode/plate-indent-list';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n InlineCombobox,\n InlineComboboxContent,\n InlineComboboxEmpty,\n InlineComboboxInput,\n InlineComboboxItem,\n} from './inline-combobox';\n\ninterface SlashCommandRule {\n icon: ComponentType>;\n onSelect: (editor: PlateEditor) => void;\n value: string;\n keywords?: string[];\n}\n\nconst rules: SlashCommandRule[] = [\n {\n icon: Icons.h1,\n value: 'Heading 1',\n onSelect: (editor) => {\n editor.tf.toggle.block({ type: HEADING_KEYS.h1 });\n },\n },\n {\n icon: Icons.h2,\n value: 'Heading 2',\n onSelect: (editor) => {\n editor.tf.toggle.block({ type: HEADING_KEYS.h2 });\n },\n },\n {\n icon: Icons.h3,\n value: 'Heading 3',\n onSelect: (editor) => {\n editor.tf.toggle.block({ type: HEADING_KEYS.h3 });\n },\n },\n {\n icon: Icons.ul,\n keywords: ['ul', 'unordered list'],\n value: 'Bulleted list',\n onSelect: (editor) => {\n toggleIndentList(editor, {\n listStyleType: ListStyleType.Disc,\n });\n },\n },\n {\n icon: Icons.ol,\n keywords: ['ol', 'ordered list'],\n value: 'Numbered list',\n onSelect: (editor) => {\n toggleIndentList(editor, {\n listStyleType: ListStyleType.Decimal,\n });\n },\n },\n {\n icon: Icons.add,\n keywords: ['inline', 'date'],\n value: 'Date',\n onSelect: (editor) => {\n editor.getTransforms(DatePlugin).insert.date();\n },\n },\n];\n\nexport const SlashInputElement = withRef(\n ({ className, ...props }, ref) => {\n const { children, editor, element } = props;\n\n return (\n \n \n \n\n \n \n No matching commands found\n \n\n {rules.map(({ icon: Icon, keywords, value, onSelect }) => (\n onSelect(editor)}\n keywords={keywords}\n >\n \n {value}\n \n ))}\n \n \n\n {children}\n \n );\n }\n);\n", "name": "slash-input-element.tsx" } ], diff --git a/apps/www/public/registry/styles/default/table-cell-element.json b/apps/www/public/registry/styles/default/table-cell-element.json index eeb2490897..b8582c21e9 100644 --- a/apps/www/public/registry/styles/default/table-cell-element.json +++ b/apps/www/public/registry/styles/default/table-cell-element.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport { cn, withProps, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport {\n useTableCellElement,\n useTableCellElementResizable,\n useTableCellElementResizableState,\n useTableCellElementState,\n} from '@udecode/plate-table/react';\n\nimport { ResizeHandle } from './resizable';\n\nexport const TableCellElement = withRef<\n typeof PlateElement,\n {\n hideBorder?: boolean;\n isHeader?: boolean;\n }\n>(({ children, className, hideBorder, isHeader, style, ...props }, ref) => {\n const { element } = props;\n\n const {\n borders,\n colIndex,\n colSpan,\n hovered,\n hoveredLeft,\n isSelectingCell,\n readOnly,\n rowIndex,\n rowSize,\n selected,\n } = useTableCellElementState();\n const { props: cellProps } = useTableCellElement({ element: props.element });\n const resizableState = useTableCellElementResizableState({\n colIndex,\n colSpan,\n rowIndex,\n });\n\n const { bottomProps, hiddenLeft, leftProps, rightProps } =\n useTableCellElementResizable(resizableState);\n\n const Cell = isHeader ? 'th' : 'td';\n\n return (\n _*]:m-0',\n 'before:size-full',\n selected && 'before:z-10 before:bg-muted',\n \"before:absolute before:box-border before:select-none before:content-['']\",\n borders &&\n cn(\n borders.bottom?.size &&\n `before:border-b before:border-b-border`,\n borders.right?.size && `before:border-r before:border-r-border`,\n borders.left?.size && `before:border-l before:border-l-border`,\n borders.top?.size && `before:border-t before:border-t-border`\n )\n ),\n className\n )}\n ref={ref}\n {...cellProps}\n {...props}\n style={\n {\n '--cellBackground': element.background,\n ...style,\n } as React.CSSProperties\n }\n >\n \n \n {children}\n \n\n {!isSelectingCell && (\n \n {!readOnly && (\n <>\n \n \n {!hiddenLeft && (\n \n )}\n\n {hovered && (\n \n )}\n {hoveredLeft && (\n \n )}\n \n )}\n \n )}\n \n \n );\n});\n\nTableCellElement.displayName = 'TableCellElement';\n\nexport const TableCellHeaderElement = withProps(TableCellElement, {\n isHeader: true,\n});\n", + "content": "import React from 'react';\n\nimport { cn, withProps, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport {\n useTableCellElement,\n useTableCellElementResizable,\n useTableCellElementResizableState,\n useTableCellElementState,\n} from '@udecode/plate-table/react';\n\nimport { ResizeHandle } from './resizable';\n\nexport const TableCellElement = withRef<\n typeof PlateElement,\n {\n hideBorder?: boolean;\n isHeader?: boolean;\n }\n>(({ children, className, hideBorder, isHeader, style, ...props }, ref) => {\n const { element } = props;\n\n const {\n borders,\n colIndex,\n colSpan,\n hovered,\n hoveredLeft,\n isSelectingCell,\n readOnly,\n rowIndex,\n rowSize,\n selected,\n } = useTableCellElementState();\n const { props: cellProps } = useTableCellElement({ element: props.element });\n const resizableState = useTableCellElementResizableState({\n colIndex,\n colSpan,\n rowIndex,\n });\n\n const { bottomProps, hiddenLeft, leftProps, rightProps } =\n useTableCellElementResizable(resizableState);\n\n const Cell = isHeader ? 'th' : 'td';\n\n return (\n _*]:m-0',\n 'before:size-full',\n selected && 'before:z-10 before:bg-muted',\n \"before:absolute before:box-border before:select-none before:content-['']\",\n borders &&\n cn(\n borders.bottom?.size &&\n `before:border-b before:border-b-border`,\n borders.right?.size && `before:border-r before:border-r-border`,\n borders.left?.size && `before:border-l before:border-l-border`,\n borders.top?.size && `before:border-t before:border-t-border`\n )\n ),\n className\n )}\n {...cellProps}\n {...props}\n style={\n {\n '--cellBackground': element.background,\n ...style,\n } as React.CSSProperties\n }\n >\n \n \n {children}\n \n\n {!isSelectingCell && (\n \n {!readOnly && (\n <>\n \n \n {!hiddenLeft && (\n \n )}\n\n {hovered && (\n \n )}\n {hoveredLeft && (\n \n )}\n \n )}\n \n )}\n \n \n );\n});\n\nTableCellElement.displayName = 'TableCellElement';\n\nexport const TableCellHeaderElement = withProps(TableCellElement, {\n isHeader: true,\n});\n", "name": "table-cell-element.tsx" } ], diff --git a/apps/www/public/registry/styles/default/table-dropdown-menu.json b/apps/www/public/registry/styles/default/table-dropdown-menu.json index 37e9bc38d9..1c1a704fa2 100644 --- a/apps/www/public/registry/styles/default/table-dropdown-menu.json +++ b/apps/www/public/registry/styles/default/table-dropdown-menu.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { someNode } from '@udecode/plate-common';\nimport {\n focusEditor,\n useEditorPlugin,\n useEditorSelector,\n} from '@udecode/plate-common/react';\nimport { deleteTable, insertTableRow } from '@udecode/plate-table';\nimport {\n TablePlugin,\n deleteColumn,\n deleteRow,\n insertTable,\n} from '@udecode/plate-table/react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function TableDropdownMenu(props: DropdownMenuProps) {\n const tableSelected = useEditorSelector(\n (editor) => someNode(editor, { match: { type: TablePlugin.key } }),\n []\n );\n\n const { editor, tf } = useEditorPlugin(TablePlugin);\n\n const openState = useOpenState();\n\n return (\n \n \n \n \n \n \n\n \n \n \n \n Table\n \n \n {\n insertTable(editor);\n focusEditor(editor);\n }}\n >\n \n Insert table\n \n {\n deleteTable(editor);\n focusEditor(editor);\n }}\n >\n \n Delete table\n \n \n \n\n \n \n \n Column\n \n \n {\n tf.insert.tableColumn();\n focusEditor(editor);\n }}\n >\n \n Insert column after\n \n {\n deleteColumn(editor);\n focusEditor(editor);\n }}\n >\n \n Delete column\n \n \n \n\n \n \n \n Row\n \n \n {\n insertTableRow(editor);\n focusEditor(editor);\n }}\n >\n \n Insert row after\n \n {\n deleteRow(editor);\n focusEditor(editor);\n }}\n >\n \n Delete row\n \n \n \n \n \n );\n}\n", + "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { someNode } from '@udecode/plate-common';\nimport {\n focusEditor,\n useEditorPlugin,\n useEditorSelector,\n} from '@udecode/plate-common/react';\nimport { deleteTable, insertTableRow } from '@udecode/plate-table';\nimport {\n TablePlugin,\n deleteColumn,\n deleteRow,\n insertTable,\n} from '@udecode/plate-table/react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function TableDropdownMenu(props: DropdownMenuProps) {\n const tableSelected = useEditorSelector(\n (editor) => someNode(editor, { match: { type: TablePlugin.key } }),\n []\n );\n\n const { editor, tf } = useEditorPlugin(TablePlugin);\n\n const openState = useOpenState();\n\n return (\n \n \n \n \n \n \n\n \n \n \n \n Table\n \n \n {\n insertTable(editor);\n focusEditor(editor);\n }}\n >\n \n Insert table\n \n {\n deleteTable(editor);\n focusEditor(editor);\n }}\n >\n \n Delete table\n \n \n \n\n \n \n \n Column\n \n \n {\n tf.insert.tableColumn();\n focusEditor(editor);\n }}\n >\n \n Insert column after\n \n {\n deleteColumn(editor);\n focusEditor(editor);\n }}\n >\n \n Delete column\n \n \n \n\n \n \n \n Row\n \n \n {\n insertTableRow(editor);\n focusEditor(editor);\n }}\n >\n \n Insert row after\n \n {\n deleteRow(editor);\n focusEditor(editor);\n }}\n >\n \n Delete row\n \n \n \n \n \n );\n}\n", "name": "table-dropdown-menu.tsx" } ], diff --git a/apps/www/public/registry/styles/default/table-element.json b/apps/www/public/registry/styles/default/table-element.json index 207fcbd901..9f212cdae7 100644 --- a/apps/www/public/registry/styles/default/table-element.json +++ b/apps/www/public/registry/styles/default/table-element.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport type * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport type { TTableElement } from '@udecode/plate-table';\n\nimport { PopoverAnchor } from '@radix-ui/react-popover';\nimport { cn, withRef } from '@udecode/cn';\nimport { isSelectionExpanded } from '@udecode/plate-common';\nimport {\n PlateElement,\n useEditorRef,\n useEditorSelector,\n useElement,\n useRemoveNodeButton,\n withHOC,\n} from '@udecode/plate-common/react';\nimport {\n TableProvider,\n mergeTableCells,\n unmergeTableCells,\n useTableBordersDropdownMenuContentState,\n useTableElement,\n useTableElementState,\n useTableMergeState,\n} from '@udecode/plate-table/react';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport { Button } from './button';\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { Popover, PopoverContent, popoverVariants } from './popover';\nimport { Separator } from './separator';\n\nexport const TableBordersDropdownMenuContent = withRef<\n typeof DropdownMenuPrimitive.Content\n>((props, ref) => {\n const {\n getOnSelectTableBorder,\n hasBottomBorder,\n hasLeftBorder,\n hasNoBorders,\n hasOuterBorders,\n hasRightBorder,\n hasTopBorder,\n } = useTableBordersDropdownMenuContentState();\n\n return (\n \n \n \n
Bottom Border
\n \n \n \n
Top Border
\n \n \n \n
Left Border
\n \n \n \n
Right Border
\n \n\n \n\n \n \n
No Border
\n \n \n \n
Outside Borders
\n \n \n );\n});\n\nexport const TableFloatingToolbar = withRef(\n ({ children, ...props }, ref) => {\n const element = useElement();\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n const selectionCollapsed = useEditorSelector(\n (editor) => !isSelectionExpanded(editor),\n []\n );\n\n const readOnly = useReadOnly();\n const selected = useSelected();\n const editor = useEditorRef();\n\n const collapsed = !readOnly && selected && selectionCollapsed;\n const open = !readOnly && selected;\n\n const { canMerge, canUnmerge } = useTableMergeState();\n\n const mergeContent = canMerge && (\n mergeTableCells(editor)}\n variant=\"ghost\"\n >\n \n Merge\n \n );\n\n const unmergeButton = canUnmerge && (\n unmergeTableCells(editor)}\n variant=\"ghost\"\n >\n \n Unmerge\n \n );\n\n const bordersContent = collapsed && (\n <>\n \n \n \n \n\n \n \n \n \n\n \n \n );\n\n return (\n \n {children}\n {(canMerge || canUnmerge || collapsed) && (\n e.preventDefault()}\n ref={ref}\n {...props}\n >\n {unmergeButton}\n {mergeContent}\n {bordersContent}\n \n )}\n \n );\n }\n);\n\nexport const TableElement = withHOC(\n TableProvider,\n withRef(({ children, className, ...props }, ref) => {\n const { colSizes, isSelectingCell, marginLeft, minColumnWidth } =\n useTableElementState();\n const { colGroupProps, props: tableProps } = useTableElement();\n\n return (\n \n
\n \n \n \n {colSizes.map((width, index) => (\n \n ))}\n \n\n {children}\n
\n \n
\n \n );\n })\n);\n", + "content": "import React from 'react';\n\nimport type * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport type { TTableElement } from '@udecode/plate-table';\n\nimport { PopoverAnchor } from '@radix-ui/react-popover';\nimport { cn, withRef } from '@udecode/cn';\nimport { isSelectionExpanded } from '@udecode/plate-common';\nimport {\n PlateElement,\n useEditorRef,\n useEditorSelector,\n useElement,\n useRemoveNodeButton,\n withHOC,\n} from '@udecode/plate-common/react';\nimport {\n TableProvider,\n mergeTableCells,\n unmergeTableCells,\n useTableBordersDropdownMenuContentState,\n useTableElement,\n useTableElementState,\n useTableMergeState,\n} from '@udecode/plate-table/react';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport { Button } from './button';\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { Popover, PopoverContent, popoverVariants } from './popover';\nimport { Separator } from './separator';\n\nexport const TableBordersDropdownMenuContent = withRef<\n typeof DropdownMenuPrimitive.Content\n>((props, ref) => {\n const {\n getOnSelectTableBorder,\n hasBottomBorder,\n hasLeftBorder,\n hasNoBorders,\n hasOuterBorders,\n hasRightBorder,\n hasTopBorder,\n } = useTableBordersDropdownMenuContentState();\n\n return (\n \n \n \n
Bottom Border
\n \n \n \n
Top Border
\n \n \n \n
Left Border
\n \n \n \n
Right Border
\n \n\n \n\n \n \n
No Border
\n \n \n \n
Outside Borders
\n \n \n );\n});\n\nexport const TableFloatingToolbar = withRef(\n ({ children, ...props }, ref) => {\n const element = useElement();\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n const selectionCollapsed = useEditorSelector(\n (editor) => !isSelectionExpanded(editor),\n []\n );\n\n const readOnly = useReadOnly();\n const selected = useSelected();\n const editor = useEditorRef();\n\n const collapsed = !readOnly && selected && selectionCollapsed;\n const open = !readOnly && selected;\n\n const { canMerge, canUnmerge } = useTableMergeState();\n\n const mergeContent = canMerge && (\n mergeTableCells(editor)}\n contentEditable={false}\n isMenu\n >\n \n Merge\n \n );\n\n const unmergeButton = canUnmerge && (\n unmergeTableCells(editor)}\n contentEditable={false}\n isMenu\n >\n \n Unmerge\n \n );\n\n const bordersContent = collapsed && (\n <>\n \n \n \n \n\n \n \n \n \n\n \n \n );\n\n return (\n \n {children}\n {(canMerge || canUnmerge || collapsed) && (\n e.preventDefault()}\n {...props}\n >\n {unmergeButton}\n {mergeContent}\n {bordersContent}\n \n )}\n \n );\n }\n);\n\nexport const TableElement = withHOC(\n TableProvider,\n withRef(({ children, className, ...props }, ref) => {\n const { colSizes, isSelectingCell, marginLeft, minColumnWidth } =\n useTableElementState();\n const { colGroupProps, props: tableProps } = useTableElement();\n\n return (\n \n
\n \n \n \n {colSizes.map((width, index) => (\n \n ))}\n \n\n {children}\n
\n \n
\n \n );\n })\n);\n", "name": "table-element.tsx" } ], diff --git a/apps/www/public/registry/styles/default/table-row-element.json b/apps/www/public/registry/styles/default/table-row-element.json index 2d42e802d5..80aa2f5af4 100644 --- a/apps/www/public/registry/styles/default/table-row-element.json +++ b/apps/www/public/registry/styles/default/table-row-element.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\n\nexport const TableRowElement = withRef<\n typeof PlateElement,\n {\n hideBorder?: boolean;\n }\n>(({ children, hideBorder, ...props }, ref) => {\n return (\n \n {children}\n \n );\n});\n", + "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\n\nexport const TableRowElement = withRef<\n typeof PlateElement,\n {\n hideBorder?: boolean;\n }\n>(({ children, hideBorder, ...props }, ref) => {\n return (\n \n {children}\n \n );\n});\n", "name": "table-row-element.tsx" } ], diff --git a/apps/www/public/registry/styles/default/todo-list-element.json b/apps/www/public/registry/styles/default/todo-list-element.json index 9311420009..5b40162e8b 100644 --- a/apps/www/public/registry/styles/default/todo-list-element.json +++ b/apps/www/public/registry/styles/default/todo-list-element.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport {\n useTodoListElement,\n useTodoListElementState,\n} from '@udecode/plate-list/react';\n\nimport { Checkbox } from './checkbox';\n\nexport const TodoListElement = withRef(\n ({ children, className, ...props }, ref) => {\n const { element } = props;\n const state = useTodoListElementState({ element });\n const { checkboxProps } = useTodoListElement(state);\n\n return (\n \n \n \n \n \n {children}\n \n \n );\n }\n);\n", + "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport {\n useTodoListElement,\n useTodoListElementState,\n} from '@udecode/plate-list/react';\n\nimport { Checkbox } from './checkbox';\n\nexport const TodoListElement = withRef(\n ({ children, className, ...props }, ref) => {\n const { element } = props;\n const state = useTodoListElementState({ element });\n const { checkboxProps } = useTodoListElement(state);\n\n return (\n \n \n \n \n \n {children}\n \n \n );\n }\n);\n", "name": "todo-list-element.tsx" } ], diff --git a/apps/www/public/registry/styles/default/toggle-element.json b/apps/www/public/registry/styles/default/toggle-element.json index 5841407b6c..75c7ec3745 100644 --- a/apps/www/public/registry/styles/default/toggle-element.json +++ b/apps/www/public/registry/styles/default/toggle-element.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import { withRef } from '@udecode/cn';\nimport { PlateElement, useElement } from '@udecode/plate-common/react';\nimport {\n useToggleButton,\n useToggleButtonState,\n} from '@udecode/plate-toggle/react';\n\nimport { Icons } from '@/components/icons';\n\nexport const ToggleElement = withRef(\n ({ children, ...props }, ref) => {\n const element = useElement();\n const state = useToggleButtonState(element.id as string);\n const { buttonProps, open } = useToggleButton(state);\n\n return (\n \n
\n \n {open ? : }\n \n {children}\n
\n \n );\n }\n);\n", + "content": "import { withRef } from '@udecode/cn';\nimport { PlateElement, useElement } from '@udecode/plate-common/react';\nimport {\n useToggleButton,\n useToggleButtonState,\n} from '@udecode/plate-toggle/react';\n\nimport { Icons } from '@/components/icons';\n\nexport const ToggleElement = withRef(\n ({ children, ...props }, ref) => {\n const element = useElement();\n const state = useToggleButtonState(element.id as string);\n const { buttonProps, open } = useToggleButton(state);\n\n return (\n \n
\n \n {open ? : }\n \n {children}\n
\n \n );\n }\n);\n", "name": "toggle-element.tsx" } ], diff --git a/apps/www/public/registry/styles/default/toolbar.json b/apps/www/public/registry/styles/default/toolbar.json index bcc8f91495..f758b2d250 100644 --- a/apps/www/public/registry/styles/default/toolbar.json +++ b/apps/www/public/registry/styles/default/toolbar.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar';\nimport { cn, withCn, withRef, withVariants } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nimport { Icons } from '@/components/icons';\n\nimport { Separator } from './separator';\nimport { withTooltip } from './tooltip';\n\nexport const Toolbar = withCn(\n ToolbarPrimitive.Root,\n 'relative flex select-none items-center gap-1 bg-background'\n);\n\nexport const ToolbarToggleGroup = withCn(\n ToolbarPrimitive.ToolbarToggleGroup,\n 'flex items-center'\n);\n\nexport const ToolbarLink = withCn(\n ToolbarPrimitive.Link,\n 'font-medium underline underline-offset-4'\n);\n\nexport const ToolbarSeparator = withCn(\n ToolbarPrimitive.Separator,\n 'my-1 w-px shrink-0 bg-border'\n);\n\nconst toolbarButtonVariants = cva(\n cn(\n 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n '[&_svg:not([data-icon])]:size-5'\n ),\n {\n defaultVariants: {\n size: 'sm',\n variant: 'default',\n },\n variants: {\n size: {\n default: 'h-10 px-3',\n lg: 'h-11 px-5',\n sm: 'h-9 px-2',\n },\n variant: {\n default:\n 'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',\n outline:\n 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n },\n },\n }\n);\n\nconst ToolbarButton = withTooltip(\n // eslint-disable-next-line react/display-name\n React.forwardRef<\n React.ElementRef,\n {\n isDropdown?: boolean;\n pressed?: boolean;\n } & Omit<\n React.ComponentPropsWithoutRef,\n 'asChild' | 'value'\n > &\n VariantProps\n >(\n (\n { children, className, isDropdown, pressed, size, variant, ...props },\n ref\n ) => {\n return typeof pressed === 'boolean' ? (\n \n \n {isDropdown ? (\n <>\n
{children}
\n
\n \n
\n \n ) : (\n children\n )}\n \n \n ) : (\n \n {children}\n \n );\n }\n )\n);\nToolbarButton.displayName = 'ToolbarButton';\n\nexport { ToolbarButton };\n\nexport const ToolbarToggleItem = withVariants(\n ToolbarPrimitive.ToggleItem,\n toolbarButtonVariants,\n ['variant', 'size']\n);\n\nexport const ToolbarGroup = withRef<\n 'div',\n {\n noSeparator?: boolean;\n }\n>(({ children, className, noSeparator }, ref) => {\n const childArr = React.Children.map(children, (c) => c);\n\n if (!childArr || childArr.length === 0) return null;\n\n return (\n
\n {!noSeparator && (\n
\n \n
\n )}\n\n
{children}
\n
\n );\n});\n", + "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar';\nimport { cn, withCn, withRef, withVariants } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nimport { Icons } from '@/components/icons';\n\nimport { Separator } from './separator';\nimport { withTooltip } from './tooltip';\n\nexport const Toolbar = withCn(\n ToolbarPrimitive.Root,\n 'relative flex select-none items-center gap-1 bg-background'\n);\n\nexport const ToolbarToggleGroup = withCn(\n ToolbarPrimitive.ToolbarToggleGroup,\n 'flex items-center'\n);\n\nexport const ToolbarLink = withCn(\n ToolbarPrimitive.Link,\n 'font-medium underline underline-offset-4'\n);\n\nexport const ToolbarSeparator = withCn(\n ToolbarPrimitive.Separator,\n 'my-1 w-px shrink-0 bg-border'\n);\n\nconst toolbarButtonVariants = cva(\n cn(\n 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n '[&_svg:not([data-icon])]:size-5'\n ),\n {\n defaultVariants: {\n size: 'sm',\n variant: 'default',\n },\n variants: {\n size: {\n default: 'h-10 px-3',\n lg: 'h-11 px-5',\n sm: 'h-9 px-2',\n },\n variant: {\n default:\n 'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',\n outline:\n 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n },\n },\n }\n);\n\nconst ToolbarButton = withTooltip(\n // eslint-disable-next-line react/display-name\n React.forwardRef<\n React.ElementRef,\n {\n isDropdown?: boolean;\n pressed?: boolean;\n } & Omit<\n React.ComponentPropsWithoutRef,\n 'asChild' | 'value'\n > &\n VariantProps\n >(\n (\n { children, className, isDropdown, pressed, size, variant, ...props },\n ref\n ) => {\n return typeof pressed === 'boolean' ? (\n \n \n {isDropdown ? (\n <>\n
{children}
\n
\n \n
\n \n ) : (\n children\n )}\n \n \n ) : (\n \n {children}\n \n );\n }\n )\n);\nToolbarButton.displayName = 'ToolbarButton';\n\nexport { ToolbarButton };\n\nexport const ToolbarToggleItem = withVariants(\n ToolbarPrimitive.ToggleItem,\n toolbarButtonVariants,\n ['variant', 'size']\n);\n\nexport const ToolbarGroup = withRef<\n 'div',\n {\n noSeparator?: boolean;\n }\n>(({ children, className, noSeparator }, ref) => {\n const childArr = React.Children.map(children, (c) => c);\n\n if (!childArr || childArr.length === 0) return null;\n\n return (\n
\n {!noSeparator && (\n
\n \n
\n )}\n\n
{children}
\n
\n );\n});\n", "name": "toolbar.tsx" } ], diff --git a/apps/www/public/registry/styles/default/tooltip.json b/apps/www/public/registry/styles/default/tooltip.json index 67929de6fb..cc8ecb72df 100644 --- a/apps/www/public/registry/styles/default/tooltip.json +++ b/apps/www/public/registry/styles/default/tooltip.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport { withCn, withProps } from '@udecode/cn';\n\nexport const TooltipProvider = TooltipPrimitive.Provider;\n\nexport const Tooltip = TooltipPrimitive.Root;\n\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\nexport const TooltipPortal = TooltipPrimitive.Portal;\n\nexport const TooltipContent = withCn(\n withProps(TooltipPrimitive.Content, {\n sideOffset: 4,\n }),\n 'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md'\n);\n\nexport function withTooltip<\n T extends React.ComponentType | keyof HTMLElementTagNameMap,\n>(Component: T) {\n return React.forwardRef<\n React.ElementRef,\n {\n tooltip?: React.ReactNode;\n tooltipContentProps?: Omit<\n React.ComponentPropsWithoutRef,\n 'children'\n >;\n tooltipProps?: Omit<\n React.ComponentPropsWithoutRef,\n 'children'\n >;\n } & React.ComponentPropsWithoutRef\n >(function ExtendComponent(\n { tooltip, tooltipContentProps, tooltipProps, ...props },\n ref\n ) {\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n setMounted(true);\n }, []);\n\n const component = ;\n\n if (tooltip && mounted) {\n return (\n \n {component}\n\n \n {tooltip}\n \n \n );\n }\n\n return component;\n });\n}\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport { withCn, withProps } from '@udecode/cn';\n\nexport const TooltipProvider = TooltipPrimitive.Provider;\n\nexport const Tooltip = TooltipPrimitive.Root;\n\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\nexport const TooltipPortal = TooltipPrimitive.Portal;\n\nexport const TooltipContent = withCn(\n withProps(TooltipPrimitive.Content, {\n sideOffset: 4,\n }),\n 'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md'\n);\n\nexport function withTooltip<\n T extends React.ComponentType | keyof HTMLElementTagNameMap,\n>(Component: T) {\n return React.forwardRef<\n React.ElementRef,\n {\n tooltipContentProps?: Omit<\n React.ComponentPropsWithoutRef,\n 'children'\n >;\n tooltipProps?: Omit<\n React.ComponentPropsWithoutRef,\n 'children'\n >;\n tooltip?: React.ReactNode;\n } & React.ComponentPropsWithoutRef\n >(function ExtendComponent(\n { tooltip, tooltipContentProps, tooltipProps, ...props },\n ref\n ) {\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n setMounted(true);\n }, []);\n\n const component = ;\n\n if (tooltip && mounted) {\n return (\n \n {component}\n\n \n {tooltip}\n \n \n );\n }\n\n return component;\n });\n}\n", "name": "tooltip.tsx" } ], diff --git a/apps/www/public/registry/styles/default/turn-into-dropdown-menu.json b/apps/www/public/registry/styles/default/turn-into-dropdown-menu.json index c948114122..173ef60180 100644 --- a/apps/www/public/registry/styles/default/turn-into-dropdown-menu.json +++ b/apps/www/public/registry/styles/default/turn-into-dropdown-menu.json @@ -5,7 +5,7 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport {\n ParagraphPlugin,\n collapseSelection,\n getNodeEntries,\n isBlock,\n} from '@udecode/plate-common';\nimport {\n focusEditor,\n useEditorRef,\n useEditorSelector,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuLabel,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n {\n description: 'Paragraph',\n icon: Icons.paragraph,\n label: 'Paragraph',\n value: ParagraphPlugin.key,\n },\n {\n description: 'Heading 1',\n icon: Icons.h1,\n label: 'Heading 1',\n value: HEADING_KEYS.h1,\n },\n {\n description: 'Heading 2',\n icon: Icons.h2,\n label: 'Heading 2',\n value: HEADING_KEYS.h2,\n },\n {\n description: 'Heading 3',\n icon: Icons.h3,\n label: 'Heading 3',\n value: HEADING_KEYS.h3,\n },\n {\n description: 'Quote (⌘+⇧+.)',\n icon: Icons.blockquote,\n label: 'Quote',\n value: BlockquotePlugin.key,\n },\n // {\n // value: 'ul',\n // label: 'Bulleted list',\n // description: 'Bulleted list',\n // icon: Icons.ul,\n // },\n // {\n // value: 'ol',\n // label: 'Numbered list',\n // description: 'Numbered list',\n // icon: Icons.ol,\n // },\n];\n\nconst defaultItem = items.find((item) => item.value === ParagraphPlugin.key)!;\n\nexport function TurnIntoDropdownMenu(props: DropdownMenuProps) {\n const value: string = useEditorSelector((editor) => {\n let initialNodeType: string = ParagraphPlugin.key;\n let allNodesMatchInitialNodeType = false;\n const codeBlockEntries = getNodeEntries(editor, {\n match: (n) => isBlock(editor, n),\n mode: 'highest',\n });\n const nodes = Array.from(codeBlockEntries);\n\n if (nodes.length > 0) {\n initialNodeType = nodes[0][0].type as string;\n allNodesMatchInitialNodeType = nodes.every(([node]) => {\n const type: string = (node?.type as string) || ParagraphPlugin.key;\n\n return type === initialNodeType;\n });\n }\n\n return allNodesMatchInitialNodeType ? initialNodeType : ParagraphPlugin.key;\n }, []);\n\n const editor = useEditorRef();\n const openState = useOpenState();\n\n const selectedItem =\n items.find((item) => item.value === value) ?? defaultItem;\n const { icon: SelectedItemIcon, label: selectedItemLabel } = selectedItem;\n\n return (\n \n \n \n \n {selectedItemLabel}\n \n \n\n \n Turn into\n\n {\n // if (type === 'ul' || type === 'ol') {\n // if (settingsStore.get.checkedId(IndentListPlugin.key)) {\n // toggleIndentList(editor, {\n // listStyleType: type === 'ul' ? 'disc' : 'decimal',\n // });\n // } else if (settingsStore.get.checkedId('list')) {\n // toggleList(editor, { type });\n // }\n // } else {\n // unwrapList(editor);\n editor.tf.toggle.block({ type });\n // }\n\n collapseSelection(editor);\n focusEditor(editor);\n }}\n value={value}\n >\n {items.map(({ icon: Icon, label, value: itemValue }) => (\n \n \n {label}\n \n ))}\n \n \n \n );\n}\n", + "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport {\n collapseSelection,\n getNodeEntries,\n isBlock,\n} from '@udecode/plate-common';\nimport {\n ParagraphPlugin,\n focusEditor,\n useEditorRef,\n useEditorSelector,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuLabel,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n {\n description: 'Paragraph',\n icon: Icons.paragraph,\n label: 'Paragraph',\n value: ParagraphPlugin.key,\n },\n {\n description: 'Heading 1',\n icon: Icons.h1,\n label: 'Heading 1',\n value: HEADING_KEYS.h1,\n },\n {\n description: 'Heading 2',\n icon: Icons.h2,\n label: 'Heading 2',\n value: HEADING_KEYS.h2,\n },\n {\n description: 'Heading 3',\n icon: Icons.h3,\n label: 'Heading 3',\n value: HEADING_KEYS.h3,\n },\n {\n description: 'Quote (⌘+⇧+.)',\n icon: Icons.blockquote,\n label: 'Quote',\n value: BlockquotePlugin.key,\n },\n // {\n // value: 'ul',\n // label: 'Bulleted list',\n // description: 'Bulleted list',\n // icon: Icons.ul,\n // },\n // {\n // value: 'ol',\n // label: 'Numbered list',\n // description: 'Numbered list',\n // icon: Icons.ol,\n // },\n];\n\nconst defaultItem = items.find((item) => item.value === ParagraphPlugin.key)!;\n\nexport function TurnIntoDropdownMenu(props: DropdownMenuProps) {\n const value: string = useEditorSelector((editor) => {\n let initialNodeType: string = ParagraphPlugin.key;\n let allNodesMatchInitialNodeType = false;\n const codeBlockEntries = getNodeEntries(editor, {\n match: (n) => isBlock(editor, n),\n mode: 'highest',\n });\n const nodes = Array.from(codeBlockEntries);\n\n if (nodes.length > 0) {\n initialNodeType = nodes[0][0].type as string;\n allNodesMatchInitialNodeType = nodes.every(([node]) => {\n const type: string = (node?.type as string) || ParagraphPlugin.key;\n\n return type === initialNodeType;\n });\n }\n\n return allNodesMatchInitialNodeType ? initialNodeType : ParagraphPlugin.key;\n }, []);\n\n const editor = useEditorRef();\n const openState = useOpenState();\n\n const selectedItem =\n items.find((item) => item.value === value) ?? defaultItem;\n const { icon: SelectedItemIcon, label: selectedItemLabel } = selectedItem;\n\n return (\n \n \n \n \n {selectedItemLabel}\n \n \n\n \n Turn into\n\n {\n // if (type === 'ul' || type === 'ol') {\n // if (settingsStore.get.checkedId(IndentListPlugin.key)) {\n // toggleIndentList(editor, {\n // listStyleType: type === 'ul' ? 'disc' : 'decimal',\n // });\n // } else if (settingsStore.get.checkedId('list')) {\n // toggleList(editor, { type });\n // }\n // } else {\n // unwrapList(editor);\n editor.tf.toggle.block({ type });\n // }\n\n collapseSelection(editor);\n focusEditor(editor);\n }}\n >\n {items.map(({ icon: Icon, label, value: itemValue }) => (\n \n \n {label}\n \n ))}\n \n \n \n );\n}\n", "name": "turn-into-dropdown-menu.tsx" } ], diff --git a/config/eslint/bases/typescript.cjs b/config/eslint/bases/typescript.cjs index 3c519ea971..c625fb92e5 100644 --- a/config/eslint/bases/typescript.cjs +++ b/config/eslint/bases/typescript.cjs @@ -73,6 +73,7 @@ module.exports = { 'warn', { argsIgnorePattern: '^_', + caughtErrors: 'none', ignoreRestSiblings: true, }, ], diff --git a/packages/alignment/src/lib/BaseAlignPlugin.ts b/packages/alignment/src/lib/BaseAlignPlugin.ts index a896df815b..cfae1894b7 100644 --- a/packages/alignment/src/lib/BaseAlignPlugin.ts +++ b/packages/alignment/src/lib/BaseAlignPlugin.ts @@ -2,6 +2,7 @@ import { BaseParagraphPlugin, createSlatePlugin } from '@udecode/plate-common'; /** Creates a plugin that adds alignment functionality to the editor. */ export const BaseAlignPlugin = createSlatePlugin({ + key: 'align', inject: { nodeProps: { defaultNodeValue: 'start', @@ -24,5 +25,4 @@ export const BaseAlignPlugin = createSlatePlugin({ }), targetPlugins: [BaseParagraphPlugin.key], }, - key: 'align', }); diff --git a/packages/alignment/src/lib/transforms/setAlign.ts b/packages/alignment/src/lib/transforms/setAlign.ts index 9e4e38238c..7644a2bc71 100644 --- a/packages/alignment/src/lib/transforms/setAlign.ts +++ b/packages/alignment/src/lib/transforms/setAlign.ts @@ -18,8 +18,8 @@ export const setAlign = ( setNodesOptions, value, }: { - setNodesOptions?: SetNodesOptions; value: Alignment; + setNodesOptions?: SetNodesOptions; } ) => { const { diff --git a/packages/alignment/src/react/useAlignDropdownMenu.ts b/packages/alignment/src/react/useAlignDropdownMenu.ts index c346854e79..13368f4e28 100644 --- a/packages/alignment/src/react/useAlignDropdownMenu.ts +++ b/packages/alignment/src/react/useAlignDropdownMenu.ts @@ -49,6 +49,7 @@ export const useAlignDropdownMenu = ({ return { radioGroupProps: { + value, onValueChange: (newValue: string) => { setAlign(editor, { value: newValue as Alignment, @@ -56,7 +57,6 @@ export const useAlignDropdownMenu = ({ focusEditor(editor); }, - value, }, }; }; diff --git a/packages/autoformat/src/lib/BaseAutoformatPlugin.ts b/packages/autoformat/src/lib/BaseAutoformatPlugin.ts index 010ab3fd76..9463b3bdc6 100644 --- a/packages/autoformat/src/lib/BaseAutoformatPlugin.ts +++ b/packages/autoformat/src/lib/BaseAutoformatPlugin.ts @@ -11,8 +11,8 @@ export type AutoformatConfig = PluginConfig< /** @see {@link withAutoformat} */ export const BaseAutoformatPlugin = createTSlatePlugin({ - extendEditor: withAutoformat, key: 'autoformat', + extendEditor: withAutoformat, options: { rules: [], }, diff --git a/packages/autoformat/src/lib/transforms/autoformatBlock.ts b/packages/autoformat/src/lib/transforms/autoformatBlock.ts index b1bccdf6c5..8603b69b57 100644 --- a/packages/autoformat/src/lib/transforms/autoformatBlock.ts +++ b/packages/autoformat/src/lib/transforms/autoformatBlock.ts @@ -1,8 +1,8 @@ import type { Range } from 'slate'; import { - BaseParagraphPlugin, type SlateEditor, + BaseParagraphPlugin, deleteText, getEditorString, getRangeBefore, @@ -36,7 +36,7 @@ export const autoformatBlock = ( type = BaseParagraphPlugin.key, }: AutoformatBlockOptions ) => { - const matches = castArray(_match as string | string[]); + const matches = castArray(_match as string[] | string); for (const match of matches) { const { end, triggers } = getMatchRange({ diff --git a/packages/autoformat/src/lib/types.ts b/packages/autoformat/src/lib/types.ts index eceb5ac047..ecfe12df47 100644 --- a/packages/autoformat/src/lib/types.ts +++ b/packages/autoformat/src/lib/types.ts @@ -22,7 +22,7 @@ export interface AutoformatCommonRule { * 'mark'`: lookup for the start and end matches. Note: `'_*'`, `['_*']` and * `{ start: '_*', end: '*_' }` are equivalent. */ - match: MatchRange | MatchRange[] | string | string[]; + match: MatchRange | MatchRange[] | string[] | string; /** * If true, insert the triggering character after autoformatting. @@ -39,11 +39,11 @@ export interface AutoformatCommonRule { * * @default the last character of `match` or `match.end` */ - trigger?: string | string[]; + trigger?: string[] | string; } export interface AutoformatBlockRule extends AutoformatCommonRule { - match: string | string[]; + match: string[] | string; /** * - Text: insert text. @@ -101,7 +101,7 @@ export interface AutoformatMarkRule extends AutoformatCommonRule { mode: 'mark'; /** Mark(s) to add. */ - type: string | string[]; + type: string[] | string; /** If false, do not format when the string can be trimmed. */ ignoreTrim?: boolean; @@ -115,10 +115,10 @@ export interface AutoformatTextRule extends AutoformatCommonRule { */ format: | ((editor: SlateEditor, options: GetMatchPointsReturnType) => void) - | string - | string[]; + | string[] + | string; - match: string | string[]; + match: string[] | string; mode: 'text'; } diff --git a/packages/autoformat/src/lib/utils/isPreviousCharacterEmpty.ts b/packages/autoformat/src/lib/utils/isPreviousCharacterEmpty.ts index b594ed5aed..a2d59a7e52 100644 --- a/packages/autoformat/src/lib/utils/isPreviousCharacterEmpty.ts +++ b/packages/autoformat/src/lib/utils/isPreviousCharacterEmpty.ts @@ -15,7 +15,7 @@ export const isPreviousCharacterEmpty = (editor: TEditor, at: Location) => { if (text) { const noWhiteSpaceRegex = new RegExp(`\\S+`); - return !text.match(noWhiteSpaceRegex); + return !noWhiteSpaceRegex.exec(text); } } diff --git a/packages/autoformat/src/lib/withAutoformat.ts b/packages/autoformat/src/lib/withAutoformat.ts index a47f22177c..ac2a5efd73 100644 --- a/packages/autoformat/src/lib/withAutoformat.ts +++ b/packages/autoformat/src/lib/withAutoformat.ts @@ -24,7 +24,7 @@ export const withAutoformat: ExtendEditor = ({ if (query && !query(editor as any, { ...rule, text })) continue; - const autoformatter: Record = { + const autoformatter: Record = { block: autoformatBlock, mark: autoformatMark, text: autoformatText, diff --git a/packages/basic-marks/src/react/BoldPlugin.tsx b/packages/basic-marks/src/react/BoldPlugin.tsx index 1408575c01..d4509625b8 100644 --- a/packages/basic-marks/src/react/BoldPlugin.tsx +++ b/packages/basic-marks/src/react/BoldPlugin.tsx @@ -5,11 +5,11 @@ import { BaseBoldPlugin } from '../lib/BaseBoldPlugin'; export const BoldPlugin = toPlatePlugin(BaseBoldPlugin, ({ editor, type }) => ({ shortcuts: { toggleBold: { + keys: [[Key.Mod, 'b']], + preventDefault: true, handler: () => { editor.tf.toggle.mark({ key: type }); }, - keys: [[Key.Mod, 'b']], - preventDefault: true, }, }, })); diff --git a/packages/basic-marks/src/react/CodePlugin.tsx b/packages/basic-marks/src/react/CodePlugin.tsx index f41ff4960c..190650663c 100644 --- a/packages/basic-marks/src/react/CodePlugin.tsx +++ b/packages/basic-marks/src/react/CodePlugin.tsx @@ -5,11 +5,11 @@ import { BaseCodePlugin } from '../lib/BaseCodePlugin'; export const CodePlugin = toPlatePlugin(BaseCodePlugin, ({ editor, type }) => ({ shortcuts: { toggleCode: { + keys: [[Key.Mod, 'e']], + preventDefault: true, handler: () => { editor.tf.toggle.mark({ key: type }); }, - keys: [[Key.Mod, 'e']], - preventDefault: true, }, }, })); diff --git a/packages/basic-marks/src/react/ItalicPlugin.tsx b/packages/basic-marks/src/react/ItalicPlugin.tsx index 8d03f1f97b..63885c82a9 100644 --- a/packages/basic-marks/src/react/ItalicPlugin.tsx +++ b/packages/basic-marks/src/react/ItalicPlugin.tsx @@ -7,11 +7,11 @@ export const ItalicPlugin = toPlatePlugin( ({ editor, type }) => ({ shortcuts: { toggleItalic: { + keys: [[Key.Mod, 'i']], + preventDefault: true, handler: () => { editor.tf.toggle.mark({ key: type }); }, - keys: [[Key.Mod, 'i']], - preventDefault: true, }, }, }) diff --git a/packages/basic-marks/src/react/StrikethroughPlugin.tsx b/packages/basic-marks/src/react/StrikethroughPlugin.tsx index 24cfade72e..e2542e4588 100644 --- a/packages/basic-marks/src/react/StrikethroughPlugin.tsx +++ b/packages/basic-marks/src/react/StrikethroughPlugin.tsx @@ -7,11 +7,11 @@ export const StrikethroughPlugin = toPlatePlugin( ({ editor, type }) => ({ shortcuts: { toggleStrikethrough: { + keys: [[Key.Mod, Key.Shift, 'x']], + preventDefault: true, handler: () => { editor.tf.toggle.mark({ key: type }); }, - keys: [[Key.Mod, Key.Shift, 'x']], - preventDefault: true, }, }, }) diff --git a/packages/basic-marks/src/react/SubscriptPlugin.tsx b/packages/basic-marks/src/react/SubscriptPlugin.tsx index 8031958228..18fd5b2e0e 100644 --- a/packages/basic-marks/src/react/SubscriptPlugin.tsx +++ b/packages/basic-marks/src/react/SubscriptPlugin.tsx @@ -8,14 +8,14 @@ export const SubscriptPlugin = toPlatePlugin( ({ editor, type }) => ({ shortcuts: { toggleSubscript: { + keys: [[Key.Mod, ',']], + preventDefault: true, handler: () => { editor.tf.toggle.mark({ - clear: editor.getType(SuperscriptPlugin), key: type, + clear: editor.getType(SuperscriptPlugin), }); }, - keys: [[Key.Mod, ',']], - preventDefault: true, }, }, }) diff --git a/packages/basic-marks/src/react/SuperscriptPlugin.tsx b/packages/basic-marks/src/react/SuperscriptPlugin.tsx index 6ba9cf5bcb..b2a8f69546 100644 --- a/packages/basic-marks/src/react/SuperscriptPlugin.tsx +++ b/packages/basic-marks/src/react/SuperscriptPlugin.tsx @@ -8,14 +8,14 @@ export const SuperscriptPlugin = toPlatePlugin( ({ editor, type }) => ({ shortcuts: { toggleSuperscript: { + keys: [[Key.Mod, '.']], + preventDefault: true, handler: () => { editor.tf.toggle.mark({ - clear: editor.getType(SubscriptPlugin), key: type, + clear: editor.getType(SubscriptPlugin), }); }, - keys: [[Key.Mod, '.']], - preventDefault: true, }, }, }) diff --git a/packages/basic-marks/src/react/UnderlinePlugin.tsx b/packages/basic-marks/src/react/UnderlinePlugin.tsx index ff7cec4521..4383b72fdc 100644 --- a/packages/basic-marks/src/react/UnderlinePlugin.tsx +++ b/packages/basic-marks/src/react/UnderlinePlugin.tsx @@ -7,11 +7,11 @@ export const UnderlinePlugin = toPlatePlugin( ({ editor, type }) => ({ shortcuts: { toggleUnderline: { + keys: [[Key.Mod, 'u']], + preventDefault: true, handler: () => { editor.tf.toggle.mark({ key: type }); }, - keys: [[Key.Mod, 'u']], - preventDefault: true, }, }, }) diff --git a/packages/block-quote/src/lib/BaseBlockquotePlugin.ts b/packages/block-quote/src/lib/BaseBlockquotePlugin.ts index 7614f82895..5a75f5511e 100644 --- a/packages/block-quote/src/lib/BaseBlockquotePlugin.ts +++ b/packages/block-quote/src/lib/BaseBlockquotePlugin.ts @@ -4,8 +4,8 @@ import { withBlockquote } from './withBlockquote'; /** Enables support for block quotes, useful for quotations and passages. */ export const BaseBlockquotePlugin = createSlatePlugin({ - extendEditor: withBlockquote, key: 'blockquote', + extendEditor: withBlockquote, node: { isElement: true }, parsers: { html: { diff --git a/packages/block-quote/src/react/BlockquotePlugin.tsx b/packages/block-quote/src/react/BlockquotePlugin.tsx index 2cec5d60cf..535645ea6c 100644 --- a/packages/block-quote/src/react/BlockquotePlugin.tsx +++ b/packages/block-quote/src/react/BlockquotePlugin.tsx @@ -7,11 +7,11 @@ export const BlockquotePlugin = toPlatePlugin( ({ editor, type }) => ({ shortcuts: { toggleBlockquote: { + keys: [[Key.Mod, Key.Shift, 'period']], + preventDefault: true, handler: () => { editor.tf.toggle.block({ type }); }, - keys: [[Key.Mod, Key.Shift, 'period']], - preventDefault: true, }, }, }) diff --git a/packages/break/src/lib/exit-break/transforms/exitBreak.ts b/packages/break/src/lib/exit-break/transforms/exitBreak.ts index 86baa271c5..94f40ffb5d 100644 --- a/packages/break/src/lib/exit-break/transforms/exitBreak.ts +++ b/packages/break/src/lib/exit-break/transforms/exitBreak.ts @@ -1,6 +1,6 @@ import { - BaseParagraphPlugin, type SlateEditor, + BaseParagraphPlugin, getPath, insertElements, } from '@udecode/plate-common'; diff --git a/packages/break/src/lib/exit-break/types.ts b/packages/break/src/lib/exit-break/types.ts index 2eef9c43bc..cbe84d421b 100644 --- a/packages/break/src/lib/exit-break/types.ts +++ b/packages/break/src/lib/exit-break/types.ts @@ -4,14 +4,6 @@ export interface ExitBreakRule { /** Hotkey to trigger exit break. */ hotkey: string; - /** Exit before the selected block if true. */ - before?: boolean; - - defaultType?: string; - - /** Path level where to exit. Default is 0. */ - level?: number; - /** @see {@link QueryNodeOptions} */ query?: { /** When the selection is at the end of the block above. */ @@ -21,6 +13,14 @@ export interface ExitBreakRule { start?: boolean; } & QueryNodeOptions; + /** Exit before the selected block if true. */ + before?: boolean; + + defaultType?: string; + + /** Path level where to exit. Default is 0. */ + level?: number; + /** * If true, exit relative to current level. Otherwise, exit at the given * level. Default is false. diff --git a/packages/break/src/lib/single-line/BaseSingleLinePlugin.ts b/packages/break/src/lib/single-line/BaseSingleLinePlugin.ts index 51811dbc43..0082222883 100644 --- a/packages/break/src/lib/single-line/BaseSingleLinePlugin.ts +++ b/packages/break/src/lib/single-line/BaseSingleLinePlugin.ts @@ -4,6 +4,6 @@ import { withSingleLine } from './withSingleLine'; /** Forces editor to only have one line. */ export const BaseSingleLinePlugin = createSlatePlugin({ - extendEditor: withSingleLine, key: 'singleLine', + extendEditor: withSingleLine, }); diff --git a/packages/callout/src/lib/transforms/insertCallout.ts b/packages/callout/src/lib/transforms/insertCallout.ts index d5024b51e1..8d1449ff1d 100644 --- a/packages/callout/src/lib/transforms/insertCallout.ts +++ b/packages/callout/src/lib/transforms/insertCallout.ts @@ -4,7 +4,7 @@ import { insertNodes, } from '@udecode/plate-common'; -import { BaseCalloutPlugin, type TCalloutElement } from '../BaseCalloutPlugin'; +import { type TCalloutElement, BaseCalloutPlugin } from '../BaseCalloutPlugin'; export const insertCallout = ( editor: E, diff --git a/packages/callout/src/react/hooks/useCallout.ts b/packages/callout/src/react/hooks/useCallout.ts index 4121a8df52..5cb57aac09 100644 --- a/packages/callout/src/react/hooks/useCallout.ts +++ b/packages/callout/src/react/hooks/useCallout.ts @@ -25,8 +25,8 @@ export const useCalloutState = () => { ); return { - icon: element.icon, id: element.id, + icon: element.icon, setCalloutState, variant: element.variant, }; @@ -56,11 +56,11 @@ export const useCalloutEmojiPick = ({ }, props: { isOpen, + setIsOpen, onSelectEmoji: (emojiValue: any) => { setCalloutState({ icon: emojiValue.skins[0].native }); setIsOpen(false); }, - setIsOpen, }, }; }; diff --git a/packages/caption/src/lib/BaseCaptionPlugin.ts b/packages/caption/src/lib/BaseCaptionPlugin.ts index b06ccbbd1c..677e4ac7be 100644 --- a/packages/caption/src/lib/BaseCaptionPlugin.ts +++ b/packages/caption/src/lib/BaseCaptionPlugin.ts @@ -18,7 +18,7 @@ export type CaptionConfig = PluginConfig< /** Plugins to enable caption. */ plugins: WithRequiredKey[]; - visibleId: null | string; + visibleId: string | null; } & CaptionSelectors >; @@ -28,8 +28,8 @@ type CaptionSelectors = { /** Enables support for caption. */ export const BaseCaptionPlugin = createTSlatePlugin({ - extendEditor: withCaption, key: 'caption', + extendEditor: withCaption, options: { focusEndPath: null, focusStartPath: null, diff --git a/packages/caption/src/lib/withCaption.ts b/packages/caption/src/lib/withCaption.ts index 976e878f27..47f9f51d9f 100644 --- a/packages/caption/src/lib/withCaption.ts +++ b/packages/caption/src/lib/withCaption.ts @@ -9,7 +9,7 @@ import { isHotkey, } from '@udecode/plate-common'; -import { BaseCaptionPlugin, type CaptionConfig } from './BaseCaptionPlugin'; +import { type CaptionConfig, BaseCaptionPlugin } from './BaseCaptionPlugin'; /** TODO: tests https://github.com/udecode/editor-protocol/issues/79 */ diff --git a/packages/caption/src/react/components/CaptionTextarea.tsx b/packages/caption/src/react/components/CaptionTextarea.tsx index f5dd518004..53087061aa 100644 --- a/packages/caption/src/react/components/CaptionTextarea.tsx +++ b/packages/caption/src/react/components/CaptionTextarea.tsx @@ -139,11 +139,11 @@ export const useCaptionTextarea = ({ return { props: { + readOnly, + value: captionValue, onBlur, onChange, onKeyDown, - readOnly, - value: captionValue, }, ref: textareaRef, }; diff --git a/packages/cli/src/utils/registry/index.ts b/packages/cli/src/utils/registry/index.ts index 79afd61691..975e88efdc 100644 --- a/packages/cli/src/utils/registry/index.ts +++ b/packages/cli/src/utils/registry/index.ts @@ -9,9 +9,9 @@ import path from 'path'; import type { Config } from '../get-config'; import { + type registryItemWithContentSchema, registryBaseColorSchema, registryIndexSchema, - type registryItemWithContentSchema, registryWithContentSchema, stylesSchema, } from './schema'; diff --git a/packages/cli/src/utils/transformers/index.ts b/packages/cli/src/utils/transformers/index.ts index 12204a4350..b61d0e789c 100644 --- a/packages/cli/src/utils/transformers/index.ts +++ b/packages/cli/src/utils/transformers/index.ts @@ -15,10 +15,10 @@ import { transformRsc } from './transform-rsc'; import { transformTwPrefixes } from './transform-tw-prefix'; export type TransformOpts = { - baseColor?: z.infer; config: Config; filename: string; raw: string; + baseColor?: z.infer; }; export type Transformer = ( diff --git a/packages/cli/src/utils/transformers/transform-css-vars.ts b/packages/cli/src/utils/transformers/transform-css-vars.ts index 118103727b..c7a9ae846e 100644 --- a/packages/cli/src/utils/transformers/transform-css-vars.ts +++ b/packages/cli/src/utils/transformers/transform-css-vars.ts @@ -106,12 +106,12 @@ export const transformCssVars: Transformer = async ({ // Splits a className into variant-name-alpha. // eg. hover:bg-primary-100 -> [hover, bg-primary, 100] -export function splitClassName(className: string): (null | string)[] { +export function splitClassName(className: string): (string | null)[] { if (!className.includes('/') && !className.includes(':')) { return [null, className, null]; } - const parts: (null | string)[] = []; + const parts: (string | null)[] = []; // First we split to find the alpha. const [rest, alpha] = className.split('/'); diff --git a/packages/cloud/src/attachment/CloudAttachmentPlugin.ts b/packages/cloud/src/attachment/CloudAttachmentPlugin.ts index 92237cabc4..1f9d1a5e36 100644 --- a/packages/cloud/src/attachment/CloudAttachmentPlugin.ts +++ b/packages/cloud/src/attachment/CloudAttachmentPlugin.ts @@ -5,11 +5,11 @@ import Defer from 'p-defer'; import type { UploadError, UploadSuccess } from '../upload'; import type { TCloudAttachmentElement } from './types'; -import { CloudPlugin, type FileEvent, type SuccessEvent } from '../cloud'; +import { type FileEvent, type SuccessEvent, CloudPlugin } from '../cloud'; export const CloudAttachmentPlugin = createPlatePlugin({ - dependencies: ['cloud'], key: 'cloud_attachment', + dependencies: ['cloud'], node: { isElement: true, isVoid: true }, }).extendApi(({ editor }) => { const { uploadStore } = editor.getOptions(CloudPlugin); diff --git a/packages/cloud/src/cloud/CloudPlugin.ts b/packages/cloud/src/cloud/CloudPlugin.ts index f379c27fe0..6f79f30ee3 100644 --- a/packages/cloud/src/cloud/CloudPlugin.ts +++ b/packages/cloud/src/cloud/CloudPlugin.ts @@ -29,12 +29,12 @@ export type CloudConfig = PluginConfig< >; export const CloudPlugin = createTPlatePlugin({ + key: 'cloud', + options: {}, handlers: { onDrop: ({ editor, event }) => onDropCloud(editor, event), onPaste: ({ editor, event }) => onPasteCloud(editor, event), }, - key: 'cloud', - options: {}, }) .extend(({ editor, getOptions }) => { let client: portiveClient.Client; diff --git a/packages/cloud/src/cloud/types.ts b/packages/cloud/src/cloud/types.ts index 1a7761bec8..587af2460f 100644 --- a/packages/cloud/src/cloud/types.ts +++ b/packages/cloud/src/cloud/types.ts @@ -27,8 +27,8 @@ export type FinishUploadsOptions = { maxTimeoutInMs?: number }; * ImageFileEvent. */ export type FileEventBase = { - file: File; id: string; + file: File; url: string; }; diff --git a/packages/cloud/src/cloud/uploadFiles.ts b/packages/cloud/src/cloud/uploadFiles.ts index 3966cbf051..a08c3bc12a 100644 --- a/packages/cloud/src/cloud/uploadFiles.ts +++ b/packages/cloud/src/cloud/uploadFiles.ts @@ -15,9 +15,9 @@ const createFileEvent = ( ): FileEvent => { if (clientFile.type === 'image') { return { + id, file: clientFile.file, height: clientFile.height, - id, type: 'image', url: clientFile.objectUrl, width: clientFile.width, @@ -25,8 +25,8 @@ const createFileEvent = ( } return { - file: clientFile.file, id, + file: clientFile.file, type: 'generic', url: clientFile.objectUrl, }; diff --git a/packages/cloud/src/image/CloudImagePlugin.ts b/packages/cloud/src/image/CloudImagePlugin.ts index 130cb9aef6..cd1778df2f 100644 --- a/packages/cloud/src/image/CloudImagePlugin.ts +++ b/packages/cloud/src/image/CloudImagePlugin.ts @@ -6,16 +6,16 @@ import type { UploadError, UploadSuccess } from '../upload'; import type { TCloudImageElement } from './types'; import { - CloudPlugin, type ErrorEvent, type ImageFileEvent, type ProgressEvent, type SuccessEvent, + CloudPlugin, } from '../cloud'; export const CloudImagePlugin = createPlatePlugin({ - dependencies: ['cloud'], key: 'cloud_image', + dependencies: ['cloud'], node: { isElement: true, isVoid: true }, options: { maxInitialHeight: 320, diff --git a/packages/cn/src/withVariants.tsx b/packages/cn/src/withVariants.tsx index dc45261e8c..5d684b208f 100644 --- a/packages/cn/src/withVariants.tsx +++ b/packages/cn/src/withVariants.tsx @@ -36,8 +36,8 @@ export function withVariants< return ( ); diff --git a/packages/code-block/src/lib/BaseCodeBlockPlugin.ts b/packages/code-block/src/lib/BaseCodeBlockPlugin.ts index 2b111ad16e..0edb8ef107 100644 --- a/packages/code-block/src/lib/BaseCodeBlockPlugin.ts +++ b/packages/code-block/src/lib/BaseCodeBlockPlugin.ts @@ -1,6 +1,6 @@ import { - HtmlPlugin, type PluginConfig, + HtmlPlugin, createSlatePlugin, createTSlatePlugin, someNode, @@ -23,8 +23,8 @@ export type CodeBlockConfig = PluginConfig< >; export const BaseCodeLinePlugin = createSlatePlugin({ - decorate: decorateCodeLine, key: 'code_line', + decorate: decorateCodeLine, node: { isElement: true }, }); @@ -34,6 +34,7 @@ export const BaseCodeSyntaxPlugin = createSlatePlugin({ }); export const BaseCodeBlockPlugin = createTSlatePlugin({ + key: 'code_block', extendEditor: withCodeBlock, inject: { plugins: { @@ -50,7 +51,6 @@ export const BaseCodeBlockPlugin = createTSlatePlugin({ }, }, }, - key: 'code_block', node: { isElement: true }, options: { syntax: true, diff --git a/packages/code-block/src/lib/transforms/insertEmptyCodeBlock.ts b/packages/code-block/src/lib/transforms/insertEmptyCodeBlock.ts index ea92d4ef65..70f1e0e75f 100644 --- a/packages/code-block/src/lib/transforms/insertEmptyCodeBlock.ts +++ b/packages/code-block/src/lib/transforms/insertEmptyCodeBlock.ts @@ -1,6 +1,6 @@ import { - BaseParagraphPlugin, type SlateEditor, + BaseParagraphPlugin, insertElements, isBlockAboveEmpty, isExpanded, diff --git a/packages/code-block/src/lib/transforms/unwrapCodeBlock.ts b/packages/code-block/src/lib/transforms/unwrapCodeBlock.ts index 224ce61e8d..27a879e3a9 100644 --- a/packages/code-block/src/lib/transforms/unwrapCodeBlock.ts +++ b/packages/code-block/src/lib/transforms/unwrapCodeBlock.ts @@ -1,8 +1,8 @@ import type { Location } from 'slate'; import { - BaseParagraphPlugin, type SlateEditor, + BaseParagraphPlugin, getChildren, getNodeEntries, setElements, diff --git a/packages/code-block/src/react/CodeBlockPlugin.tsx b/packages/code-block/src/react/CodeBlockPlugin.tsx index 67d73f5f00..c33dcce757 100644 --- a/packages/code-block/src/react/CodeBlockPlugin.tsx +++ b/packages/code-block/src/react/CodeBlockPlugin.tsx @@ -13,18 +13,18 @@ export const CodeSyntaxPlugin = toPlatePlugin(BaseCodeSyntaxPlugin); /** Enables support for pre-formatted code blocks. */ export const CodeBlockPlugin = toPlatePlugin(BaseCodeBlockPlugin, { + plugins: [CodeLinePlugin, CodeSyntaxPlugin], handlers: { onKeyDown: onKeyDownCodeBlock, }, - plugins: [CodeLinePlugin, CodeSyntaxPlugin], }).extend(({ editor, type }) => ({ shortcuts: { toggleCodeBlock: { + keys: [[Key.Mod, Key.Alt, '8']], + preventDefault: true, handler: () => { editor.tf.toggle.block({ type }); }, - keys: [[Key.Mod, Key.Alt, '8']], - preventDefault: true, }, }, })); diff --git a/packages/code-block/src/react/hooks/useCodeBlockCombobox.ts b/packages/code-block/src/react/hooks/useCodeBlockCombobox.ts index 65b6a01876..2199d5ab94 100644 --- a/packages/code-block/src/react/hooks/useCodeBlockCombobox.ts +++ b/packages/code-block/src/react/hooks/useCodeBlockCombobox.ts @@ -8,7 +8,7 @@ import { } from '@udecode/plate-common/react'; import { useReadOnly } from 'slate-react'; -import { BaseCodeBlockPlugin, type TCodeBlockElement } from '../../lib'; +import { type TCodeBlockElement, BaseCodeBlockPlugin } from '../../lib'; export const useCodeBlockComboboxState = () => { const editor = useEditorRef(); diff --git a/packages/code-block/src/react/hooks/useCodeBlockElement.ts b/packages/code-block/src/react/hooks/useCodeBlockElement.ts index fc73f74463..44dcc95b28 100644 --- a/packages/code-block/src/react/hooks/useCodeBlockElement.ts +++ b/packages/code-block/src/react/hooks/useCodeBlockElement.ts @@ -2,7 +2,7 @@ import React from 'react'; import { useEditorRef } from '@udecode/plate-common/react'; -import { BaseCodeBlockPlugin, type TCodeBlockElement } from '../../lib'; +import { type TCodeBlockElement, BaseCodeBlockPlugin } from '../../lib'; export const useCodeBlockElementState = ({ element, diff --git a/packages/code-block/src/react/onKeyDownCodeBlock.ts b/packages/code-block/src/react/onKeyDownCodeBlock.ts index 66ac33b233..c3d53ba555 100644 --- a/packages/code-block/src/react/onKeyDownCodeBlock.ts +++ b/packages/code-block/src/react/onKeyDownCodeBlock.ts @@ -8,7 +8,7 @@ import { select, withoutNormalizing, } from '@udecode/plate-common'; -import { Hotkeys, type KeyboardHandler } from '@udecode/plate-common/react'; +import { type KeyboardHandler, Hotkeys } from '@udecode/plate-common/react'; import { BaseCodeLinePlugin } from '../lib'; import { getCodeLineEntry } from '../lib/queries/getCodeLineEntry'; diff --git a/packages/combobox/src/lib/types.ts b/packages/combobox/src/lib/types.ts index 2c5cd6b5ba..68b86fdeb0 100644 --- a/packages/combobox/src/lib/types.ts +++ b/packages/combobox/src/lib/types.ts @@ -2,7 +2,7 @@ import type { SlateEditor, TElement } from '@udecode/plate-common'; export interface TriggerComboboxPluginOptions { createComboboxInput?: (trigger: string) => TElement; - trigger?: RegExp | string | string[]; + trigger?: RegExp | string[] | string; triggerPreviousCharPattern?: RegExp; triggerQuery?: (editor: SlateEditor) => boolean; } diff --git a/packages/combobox/src/lib/withTriggerCombobox.spec.tsx b/packages/combobox/src/lib/withTriggerCombobox.spec.tsx index 8366f57d11..c60c3a4714 100644 --- a/packages/combobox/src/lib/withTriggerCombobox.spec.tsx +++ b/packages/combobox/src/lib/withTriggerCombobox.spec.tsx @@ -5,16 +5,16 @@ import { withTriggerCombobox, } from '@udecode/plate-combobox'; import { createSlatePlugin } from '@udecode/plate-common'; -import { ParagraphPlugin } from '@udecode/plate-common/react'; import { createSlateEditor } from '@udecode/plate-common'; +import { ParagraphPlugin } from '@udecode/plate-common/react'; import { jsx } from '@udecode/plate-test-utils'; const ExampleComboboxPlugin = createSlatePlugin< string, TriggerComboboxPluginOptions >({ - extendEditor: withTriggerCombobox, key: 'exampleCombobox', + extendEditor: withTriggerCombobox, plugins: [ createSlatePlugin({ key: 'mention_input', diff --git a/packages/combobox/src/react/hooks/useComboboxInput.ts b/packages/combobox/src/react/hooks/useComboboxInput.ts index 10d7c141ab..9a116fb15f 100644 --- a/packages/combobox/src/react/hooks/useComboboxInput.ts +++ b/packages/combobox/src/react/hooks/useComboboxInput.ts @@ -51,8 +51,8 @@ export const useComboboxInput = ({ cancelInputOnEscape = true, cursorState, forwardUndoRedoToEditor = true, - onCancelInput, ref, + onCancelInput, }: UseComboboxInputOptions): UseComboboxInputResult => { const editor = useEditorRef(); const element = useElement(); diff --git a/packages/comments/src/lib/BaseCommentsPlugin.ts b/packages/comments/src/lib/BaseCommentsPlugin.ts index 57e475f95d..3c62f7193e 100644 --- a/packages/comments/src/lib/BaseCommentsPlugin.ts +++ b/packages/comments/src/lib/BaseCommentsPlugin.ts @@ -14,18 +14,18 @@ import { withComments } from './withComments'; export type BaseCommentsConfig = PluginConfig< 'comment', { - activeCommentId: null | string; - addingCommentId: null | string; + activeCommentId: string | null; + addingCommentId: string | null; comments: Record; focusTextarea: boolean; - myUserId: null | string; + myUserId: string | null; newValue: Value; + users: Record; onCommentAdd: ((value: WithPartial) => void) | null; onCommentDelete: ((id: string) => void) | null; onCommentUpdate: | ((value: Partial> & Pick) => void) | null; - users: Record; } & CommentsSelectors, { comment: CommentsApi; @@ -34,10 +34,10 @@ export type BaseCommentsConfig = PluginConfig< export type CommentsSelectors = { activeComment?: () => TComment | null; - commentById?: (id: null | string) => TComment | null; + commentById?: (id: string | null) => TComment | null; myUser?: () => CommentUser | null; newText?: () => string; - userById?: (id: null | string) => CommentUser | null; + userById?: (id: string | null) => CommentUser | null; }; export type CommentsApi = { @@ -45,14 +45,14 @@ export type CommentsApi = { value: WithPartial ) => WithPartial; addRawComment: (id: string) => void; - removeComment: (id: null | string) => void; + removeComment: (id: string | null) => void; resetNewCommentValue: () => void; - updateComment: (id: null | string, value: Partial) => void; + updateComment: (id: string | null, value: Partial) => void; }; export const BaseCommentsPlugin = createTSlatePlugin({ - extendEditor: withComments, key: 'comment', + extendEditor: withComments, node: { isLeaf: true }, options: { activeCommentId: null, @@ -61,10 +61,10 @@ export const BaseCommentsPlugin = createTSlatePlugin({ focusTextarea: false, myUserId: null, newValue: [{ children: [{ text: '' }], type: 'p' }], + users: {}, onCommentAdd: null, onCommentDelete: null, onCommentUpdate: null, - users: {}, }, }) .extendOptions>(({ getOptions }) => ({ @@ -101,8 +101,8 @@ export const BaseCommentsPlugin = createTSlatePlugin({ const { myUserId } = getOptions(); const id = value.id ?? nanoid(); const newComment: WithPartial = { - createdAt: Date.now(), id, + createdAt: Date.now(), userId: myUserId ?? undefined, ...value, }; diff --git a/packages/comments/src/lib/types.ts b/packages/comments/src/lib/types.ts index b23dce81b9..c30b52d6db 100644 --- a/packages/comments/src/lib/types.ts +++ b/packages/comments/src/lib/types.ts @@ -7,11 +7,11 @@ export interface CommentUser { } export interface TComment { + id: string; + /** @default Date.now() */ createdAt: number; - id: string; - /** Author id. */ userId: string; diff --git a/packages/comments/src/react/components/CommentDeleteButton.tsx b/packages/comments/src/react/components/CommentDeleteButton.tsx index 32bc9fadc7..e2ae2b753e 100644 --- a/packages/comments/src/react/components/CommentDeleteButton.tsx +++ b/packages/comments/src/react/components/CommentDeleteButton.tsx @@ -17,22 +17,22 @@ export const useCommentDeleteButtonState = () => { const id = useCommentSelectors().id(); return { + id, activeCommentId, api, editor, - id, - onCommentDelete, setOption, + onCommentDelete, }; }; export const useCommentDeleteButton = ({ + id, activeCommentId, api, editor, - id, - onCommentDelete, setOption, + onCommentDelete, }: ReturnType) => { return { props: { diff --git a/packages/comments/src/react/components/CommentEditSaveButton.tsx b/packages/comments/src/react/components/CommentEditSaveButton.tsx index 141becc0d0..1d685df203 100644 --- a/packages/comments/src/react/components/CommentEditSaveButton.tsx +++ b/packages/comments/src/react/components/CommentEditSaveButton.tsx @@ -21,10 +21,10 @@ export const useCommentEditSaveButtonState = () => { const value = useCommentText(); return { + id, api, editingValue, getOptions, - id, setEditingValue, setOption, value, @@ -32,10 +32,10 @@ export const useCommentEditSaveButtonState = () => { }; export const useCommentEditSaveButton = ({ + id, api, editingValue, getOptions, - id, setEditingValue, value, }: ReturnType) => { diff --git a/packages/comments/src/react/components/CommentEditTextarea.tsx b/packages/comments/src/react/components/CommentEditTextarea.tsx index 4fb2db29a1..9ba76440a0 100644 --- a/packages/comments/src/react/components/CommentEditTextarea.tsx +++ b/packages/comments/src/react/components/CommentEditTextarea.tsx @@ -37,15 +37,15 @@ export const useCommentEditTextarea = ({ }: ReturnType) => { return { props: { + placeholder: 'Add a comment...', + ref: textareaRef, + rows: 1, + value: value ?? undefined, onChange: (event: React.ChangeEvent) => { setEditingValue([ { children: [{ text: event.target.value }], type: 'p' }, ]); }, - placeholder: 'Add a comment...', - ref: textareaRef, - rows: 1, - value: value ?? undefined, }, }; }; diff --git a/packages/comments/src/react/components/CommentNewSubmitButton.tsx b/packages/comments/src/react/components/CommentNewSubmitButton.tsx index 6de2bd6a58..5de4dfd02e 100644 --- a/packages/comments/src/react/components/CommentNewSubmitButton.tsx +++ b/packages/comments/src/react/components/CommentNewSubmitButton.tsx @@ -42,6 +42,7 @@ export const useCommentNewSubmitButton = ({ props: { children: submitButtonText, disabled: !newText?.trim().length, + type: 'submit', onClick: () => { const { activeCommentId, newValue, onCommentAdd } = getOptions(); @@ -62,7 +63,6 @@ export const useCommentNewSubmitButton = ({ api.comment.resetNewCommentValue(); }, - type: 'submit', }, }; }; diff --git a/packages/comments/src/react/components/CommentNewTextarea.tsx b/packages/comments/src/react/components/CommentNewTextarea.tsx index 1b065282e3..40c01a9c7b 100644 --- a/packages/comments/src/react/components/CommentNewTextarea.tsx +++ b/packages/comments/src/react/components/CommentNewTextarea.tsx @@ -41,15 +41,15 @@ export const useCommentNewTextarea = ({ }: ReturnType) => { return { props: { + placeholder, + ref: textareaRef, + rows: 1, + value: value ?? undefined, onChange: (event: React.ChangeEvent) => { setOption('newValue', [ { children: [{ text: event.target.value }], type: 'p' }, ]); }, - placeholder, - ref: textareaRef, - rows: 1, - value: value ?? undefined, }, }; }; diff --git a/packages/comments/src/react/components/useCommentsShowResolvedButton.ts b/packages/comments/src/react/components/useCommentsShowResolvedButton.ts index 3d489e3fbe..851d6f1822 100644 --- a/packages/comments/src/react/components/useCommentsShowResolvedButton.ts +++ b/packages/comments/src/react/components/useCommentsShowResolvedButton.ts @@ -8,13 +8,13 @@ export const useCommentsShowResolvedButton = () => { return { props: { + pressed: isActive, onClick: (e: React.MouseEvent) => { setAnchorEl(e.currentTarget); }, onMouseDown: (e: React.MouseEvent) => { e.preventDefault(); }, - pressed: isActive, }, }; }; diff --git a/packages/comments/src/react/stores/comment/CommentProvider.tsx b/packages/comments/src/react/stores/comment/CommentProvider.tsx index 6b80dc7e8e..ed654277bc 100644 --- a/packages/comments/src/react/stores/comment/CommentProvider.tsx +++ b/packages/comments/src/react/stores/comment/CommentProvider.tsx @@ -8,16 +8,16 @@ import { CommentsPlugin } from '../../CommentsPlugin'; export const SCOPE_ACTIVE_COMMENT = 'activeComment'; export interface CommentStoreState { - editingValue: Value | null; id: string; + editingValue: Value | null; isMenuOpen: boolean; } export const { CommentProvider, commentStore, useCommentStore } = createAtomStore( { - editingValue: null, id: '', + editingValue: null, isMenuOpen: false, } as CommentStoreState, { diff --git a/packages/csv/src/lib/deserializer/utils/deserializeCsv.ts b/packages/csv/src/lib/deserializer/utils/deserializeCsv.ts index 09c333dc71..974fe6b276 100644 --- a/packages/csv/src/lib/deserializer/utils/deserializeCsv.ts +++ b/packages/csv/src/lib/deserializer/utils/deserializeCsv.ts @@ -1,9 +1,9 @@ import { - BaseParagraphPlugin, type SlateEditor, type TDescendant, type TElement, type TNode, + BaseParagraphPlugin, } from '@udecode/plate-common'; import papaparse from 'papaparse'; diff --git a/packages/cursor/src/components/CursorOverlay.tsx b/packages/cursor/src/components/CursorOverlay.tsx index f1b8782280..97b91ff10b 100644 --- a/packages/cursor/src/components/CursorOverlay.tsx +++ b/packages/cursor/src/components/CursorOverlay.tsx @@ -19,12 +19,6 @@ export interface CursorProps caret: string; selectionRect: string; }> { - /** Whether to disable the caret. */ - disableCaret?: boolean; - - /** Whether to disable the selection rects. */ - disableSelection?: boolean; - /** * Custom caret component. For example, you could display a label next to the * caret. @@ -41,6 +35,12 @@ export interface CursorProps selectionRect: SelectionRect; } & Pick, 'data'> >; + + /** Whether to disable the caret. */ + disableCaret?: boolean; + + /** Whether to disable the selection rects. */ + disableSelection?: boolean; } export interface CursorOverlayProps< diff --git a/packages/cursor/src/hooks/useRequestReRender.ts b/packages/cursor/src/hooks/useRequestReRender.ts index 68fbdf1a3b..59b290a048 100644 --- a/packages/cursor/src/hooks/useRequestReRender.ts +++ b/packages/cursor/src/hooks/useRequestReRender.ts @@ -2,7 +2,7 @@ import React from 'react'; export const useRequestReRender = () => { const [, setUpdateCounter] = React.useState(0); - const animationFrameRef = React.useRef(null); + const animationFrameRef = React.useRef(null); const requestReRender = React.useCallback((immediate = false) => { if (animationFrameRef.current && !immediate) { diff --git a/packages/cursor/src/types.ts b/packages/cursor/src/types.ts index fbd2d5fe23..8cc61c46a7 100644 --- a/packages/cursor/src/types.ts +++ b/packages/cursor/src/types.ts @@ -19,9 +19,9 @@ export type CaretPosition = { }; export type CursorState = { - data?: TCursorData; - key?: any; selection: Range | null; + key?: any; + data?: TCursorData; }; export interface CursorOverlayState> diff --git a/packages/date/src/lib/BaseDatePlugin.ts b/packages/date/src/lib/BaseDatePlugin.ts index 371f298012..57a26bf811 100644 --- a/packages/date/src/lib/BaseDatePlugin.ts +++ b/packages/date/src/lib/BaseDatePlugin.ts @@ -12,14 +12,14 @@ export interface TDateElement extends TElement { } export const BaseDatePlugin = createSlatePlugin({ - extendEditor: withDate, - handlers: {}, key: 'date', + extendEditor: withDate, node: { isElement: true, isInline: true, isVoid: true, }, + handlers: {}, }).extendEditorTransforms(({ editor }) => ({ insert: { date: bindFirst(insertDate, editor), diff --git a/packages/date/src/lib/queries/isPointNextToNode.ts b/packages/date/src/lib/queries/isPointNextToNode.ts index 693184d5f2..ee9aa24734 100644 --- a/packages/date/src/lib/queries/isPointNextToNode.ts +++ b/packages/date/src/lib/queries/isPointNextToNode.ts @@ -5,13 +5,13 @@ import { isEndPoint, isStartPoint, } from '@udecode/plate-common'; -import { Path, type Point } from 'slate'; +import { type Point, Path } from 'slate'; export const isPointNextToNode = ( editor: SlateEditor, options: { - at?: Point; nodeType: string; + at?: Point; reverse?: boolean; } ): boolean => { diff --git a/packages/date/src/lib/transforms/insertDate.ts b/packages/date/src/lib/transforms/insertDate.ts index 71da1884ee..f531074285 100644 --- a/packages/date/src/lib/transforms/insertDate.ts +++ b/packages/date/src/lib/transforms/insertDate.ts @@ -4,13 +4,13 @@ import { insertNodes, } from '@udecode/plate-common'; -import { BaseDatePlugin, type TDateElement } from '../BaseDatePlugin'; +import { type TDateElement, BaseDatePlugin } from '../BaseDatePlugin'; export const insertDate = ( editor: SlateEditor, { date, ...options }: { date?: string } & InsertNodesOptions = {} ) => { - insertNodes<{ text: string } | TDateElement>( + insertNodes( editor, [ { diff --git a/packages/diff/src/internal/transforms/transformDiffTexts.ts b/packages/diff/src/internal/transforms/transformDiffTexts.ts index b772a0b429..54e3806927 100644 --- a/packages/diff/src/internal/transforms/transformDiffTexts.ts +++ b/packages/diff/src/internal/transforms/transformDiffTexts.ts @@ -282,7 +282,7 @@ Also setting to undefined / false-ish for a *text* node property is equivalent to not having it regarding everything else. */ -function getKeysLength(obj: null | object | undefined): number { +function getKeysLength(obj: object | null | undefined): number { if (obj == null) { return 0; } diff --git a/packages/diff/src/internal/utils/copy-without.ts b/packages/diff/src/internal/utils/copy-without.ts index a8a0d4d51d..c65341f608 100644 --- a/packages/diff/src/internal/utils/copy-without.ts +++ b/packages/diff/src/internal/utils/copy-without.ts @@ -6,7 +6,7 @@ /* eslint-disable no-restricted-syntax */ // copy of map but without some keys // I.e., restrict a function to the complement of a subset of the domain. -export function copyWithout(obj: any, w: string | string[]): any { +export function copyWithout(obj: any, w: string[] | string): any { if (typeof w === 'string') { w = [w]; } diff --git a/packages/diff/src/internal/utils/diff-nodes.ts b/packages/diff/src/internal/utils/diff-nodes.ts index cd9f0e8216..8cf33560a5 100644 --- a/packages/diff/src/internal/utils/diff-nodes.ts +++ b/packages/diff/src/internal/utils/diff-nodes.ts @@ -72,11 +72,11 @@ export function diffNodes( } export type NodeRelatedItem = { + originNode: TDescendant; childrenUpdated?: boolean; delete?: boolean; insert?: boolean; nodeUpdated?: boolean; - originNode: TDescendant; relatedNode?: TDescendant; }; diff --git a/packages/diff/src/internal/utils/with-change-tracking.ts b/packages/diff/src/internal/utils/with-change-tracking.ts index c4cda5b1e8..e0ace79dfe 100644 --- a/packages/diff/src/internal/utils/with-change-tracking.ts +++ b/packages/diff/src/internal/utils/with-change-tracking.ts @@ -3,26 +3,24 @@ import isEqual from 'lodash/isEqual.js'; import uniqWith from 'lodash/uniqWith.js'; import { type BaseEditor, - Editor, type InsertTextOperation, type MergeNodeOperation, - Node, type Operation, - Path, - Point, type PointRef, - Range, type RangeRef, type RemoveTextOperation, type SetNodeOperation, type SplitNodeOperation, + Editor, + Node, + Path, + Point, + Range, } from 'slate'; import type { ComputeDiffOptions } from '../../lib/computeDiff'; export interface ChangeTrackingEditor { - commitChangesToDiffs: () => void; - insertedTexts: { node: TText; rangeRef: RangeRef; @@ -34,11 +32,13 @@ export interface ChangeTrackingEditor { rangeRef: RangeRef; }[]; - recordingOperations: boolean; removedTexts: { node: TText; pointRef: PointRef; }[]; + + commitChangesToDiffs: () => void; + recordingOperations: boolean; } export const withChangeTracking = ( diff --git a/packages/diff/src/lib/computeDiff.spec.ts b/packages/diff/src/lib/computeDiff.spec.ts index 093b3d0b3d..e681f1c267 100644 --- a/packages/diff/src/lib/computeDiff.spec.ts +++ b/packages/diff/src/lib/computeDiff.spec.ts @@ -360,37 +360,37 @@ const fixtures: Record = { changeIdBlock: { expected: [ { - children: [{ text: 'PingCode' }], id: '1', + children: [{ text: 'PingCode' }], type: 'paragraph', }, { - children: [{ text: 'Worktile' }], id: '3', + children: [{ text: 'Worktile' }], type: 'paragraph', }, ], input1: [ { - children: [{ text: 'PingCode' }], id: '1', + children: [{ text: 'PingCode' }], type: 'paragraph', }, { - children: [{ text: 'Worktile' }], id: '2', + children: [{ text: 'Worktile' }], type: 'paragraph', }, ], input2: [ { - children: [{ text: 'PingCode' }], id: '1', + children: [{ text: 'PingCode' }], type: 'paragraph', }, { - children: [{ text: 'Worktile' }], id: '3', + children: [{ text: 'Worktile' }], type: 'paragraph', }, ], @@ -401,7 +401,7 @@ const fixtures: Record = { { children: [ { id: '1', text: 'PingCode' }, - { children: [{ text: '' }], id: '4', type: type }, + { id: '4', children: [{ text: '' }], type: type }, { id: '3', text: 'Worktile' }, ], type: 'paragraph', @@ -411,7 +411,7 @@ const fixtures: Record = { { children: [ { id: '1', text: 'PingCode' }, - { children: [{ text: '' }], id: '2', type: type }, + { id: '2', children: [{ text: '' }], type: type }, { id: '3', text: 'Worktile' }, ], type: 'paragraph', @@ -421,7 +421,7 @@ const fixtures: Record = { { children: [ { id: '1', text: 'PingCode' }, - { children: [{ text: '' }], id: '4', type: type }, + { id: '4', children: [{ text: '' }], type: type }, { id: '3', text: 'Worktile' }, ], type: 'paragraph', @@ -656,20 +656,21 @@ const fixtures: Record = { insertUpdateParagraph: { expected: [ { - children: [{ text: 'This is the first paragraph.' }], key: '1', + children: [{ text: 'This is the first paragraph.' }], type: 'paragraph', }, { + key: '2', children: [{ text: 'This is the second paragraph.' }], diff: true, diffOperation: { type: 'insert', }, - key: '2', type: 'paragraph', }, { + key: '3', children: [ { text: 'This is the third paragraph' }, { @@ -683,44 +684,44 @@ const fixtures: Record = { text: '.', }, ], - key: '3', type: 'paragraph', }, { - children: [{ text: 'This is the fourth paragraph.' }], key: '4', + children: [{ text: 'This is the fourth paragraph.' }], type: 'paragraph', }, ], input1: [ { - children: [{ text: 'This is the first paragraph.' }], key: '1', + children: [{ text: 'This is the first paragraph.' }], type: 'paragraph', }, { - children: [{ text: 'This is the third paragraph.' }], key: '3', + children: [{ text: 'This is the third paragraph.' }], type: 'paragraph', }, { - children: [{ text: 'This is the fourth paragraph.' }], key: '4', + children: [{ text: 'This is the fourth paragraph.' }], type: 'paragraph', }, ], input2: [ { - children: [{ text: 'This is the first paragraph.' }], key: '1', + children: [{ text: 'This is the first paragraph.' }], type: 'paragraph', }, { - children: [{ text: 'This is the second paragraph.' }], key: '2', + children: [{ text: 'This is the second paragraph.' }], type: 'paragraph', }, { + key: '3', children: [ { text: 'This is the third paragraph' }, { @@ -730,12 +731,11 @@ const fixtures: Record = { text: '.', }, ], - key: '3', type: 'paragraph', }, { - children: [{ text: 'This is the fourth paragraph.' }], key: '4', + children: [{ text: 'This is the fourth paragraph.' }], type: 'paragraph', }, ], @@ -744,18 +744,19 @@ const fixtures: Record = { insertUpdateTwoParagraphs: { expected: [ { - children: [{ text: 'This is the first paragraph.' }], key: '1', + children: [{ text: 'This is the first paragraph.' }], type: 'paragraph', }, { + key: '2', children: [{ text: 'This is the second paragraph.' }], diff: true, diffOperation: { type: 'insert' }, - key: '2', type: 'paragraph', }, { + key: '3', children: [ { text: 'This is the third paragraph' }, { @@ -767,17 +768,17 @@ const fixtures: Record = { text: '.', }, ], - key: '3', type: 'paragraph', }, { + key: '5', children: [{ text: 'This is the fifth paragraph.' }], diff: true, diffOperation: { type: 'insert' }, - key: '5', type: 'paragraph', }, { + key: '4', children: [ { text: 'This is the fourth paragraph' }, { @@ -789,39 +790,39 @@ const fixtures: Record = { text: '.', }, ], - key: '4', type: 'paragraph', }, ], input1: [ { - children: [{ text: 'This is the first paragraph.' }], key: '1', + children: [{ text: 'This is the first paragraph.' }], type: 'paragraph', }, { - children: [{ text: 'This is the third paragraph.' }], key: '3', + children: [{ text: 'This is the third paragraph.' }], type: 'paragraph', }, { - children: [{ text: 'This is the fourth paragraph.' }], key: '4', + children: [{ text: 'This is the fourth paragraph.' }], type: 'paragraph', }, ], input2: [ { - children: [{ text: 'This is the first paragraph.' }], key: '1', + children: [{ text: 'This is the first paragraph.' }], type: 'paragraph', }, { - children: [{ text: 'This is the second paragraph.' }], key: '2', + children: [{ text: 'This is the second paragraph.' }], type: 'paragraph', }, { + key: '3', children: [ { text: 'This is the third paragraph' }, { @@ -831,15 +832,15 @@ const fixtures: Record = { text: '.', }, ], - key: '3', type: 'paragraph', }, { - children: [{ text: 'This is the fifth paragraph.' }], key: '5', + children: [{ text: 'This is the fifth paragraph.' }], type: 'paragraph', }, { + key: '4', children: [ { text: 'This is the fourth paragraph' }, { @@ -849,7 +850,6 @@ const fixtures: Record = { text: '.', }, ], - key: '4', type: 'paragraph', }, ], diff --git a/packages/diff/src/lib/computeDiff.ts b/packages/diff/src/lib/computeDiff.ts index 8b5531e17a..081bdeb933 100644 --- a/packages/diff/src/lib/computeDiff.ts +++ b/packages/diff/src/lib/computeDiff.ts @@ -12,13 +12,13 @@ import { dmp } from '../internal/utils/dmp'; import { StringCharMapping } from '../internal/utils/string-char-mapping'; export interface ComputeDiffOptions { - getDeleteProps: (node: TDescendant) => any; - getInsertProps: (node: TDescendant) => any; getUpdateProps: ( node: TDescendant, properties: any, newProperties: any ) => any; + getDeleteProps: (node: TDescendant) => any; + getInsertProps: (node: TDescendant) => any; isInline: SlateEditor['isInline']; elementsAreRelated?: ( element: TElement, diff --git a/packages/dnd/src/DndPlugin.tsx b/packages/dnd/src/DndPlugin.tsx index b0327d3149..8b4d98a952 100644 --- a/packages/dnd/src/DndPlugin.tsx +++ b/packages/dnd/src/DndPlugin.tsx @@ -4,12 +4,12 @@ import type { PluginConfig } from '@udecode/plate-common'; import { createTPlatePlugin } from '@udecode/plate-common/react'; -import { DndScroller, type ScrollerProps } from './components/Scroller'; +import { type ScrollerProps, DndScroller } from './components/Scroller'; export type DndConfig = PluginConfig< 'dnd', { - draggingId?: null | string; + draggingId?: string | null; enableScroller?: boolean; isDragging?: boolean; scrollerProps?: Partial; @@ -17,6 +17,11 @@ export type DndConfig = PluginConfig< >; export const DndPlugin = createTPlatePlugin({ + key: 'dnd', + options: { + draggingId: null, + isDragging: false, + }, handlers: { onDragEnd: ({ editor, plugin }) => { editor.setOption(plugin, 'isDragging', false); @@ -40,11 +45,6 @@ export const DndPlugin = createTPlatePlugin({ return getOptions().isDragging; }, }, - key: 'dnd', - options: { - draggingId: null, - isDragging: false, - }, }).extend(({ getOptions }) => ({ render: { afterEditable: getOptions().enableScroller diff --git a/packages/dnd/src/components/Scroller/DndScroller.tsx b/packages/dnd/src/components/Scroller/DndScroller.tsx index 280b766f89..547d173937 100644 --- a/packages/dnd/src/components/Scroller/DndScroller.tsx +++ b/packages/dnd/src/components/Scroller/DndScroller.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { useEditorRef } from '@udecode/plate-common/react'; import { DndPlugin } from '../../DndPlugin'; -import { Scroller, type ScrollerProps } from './Scroller'; +import { type ScrollerProps, Scroller } from './Scroller'; export function DndScroller(props: Partial) { const editor = useEditorRef(); diff --git a/packages/dnd/src/components/Scroller/ScrollArea.tsx b/packages/dnd/src/components/Scroller/ScrollArea.tsx index 0aa9eb2560..2c99ad179b 100644 --- a/packages/dnd/src/components/Scroller/ScrollArea.tsx +++ b/packages/dnd/src/components/Scroller/ScrollArea.tsx @@ -35,7 +35,7 @@ export function ScrollArea({ const ref = React.useRef(); const scaleYRef = React.useRef(0); - const frameRef = React.useRef(null); + const frameRef = React.useRef(null); const direction = placement === 'top' ? -1 : 1; @@ -130,14 +130,14 @@ export function ScrollArea({ // Hide the element if not enabled, so it doesn't interfere with clicking things under it. return (
); diff --git a/packages/dnd/src/components/Scroller/Scroller.tsx b/packages/dnd/src/components/Scroller/Scroller.tsx index 053dca24c9..14a2ef4c35 100644 --- a/packages/dnd/src/components/Scroller/Scroller.tsx +++ b/packages/dnd/src/components/Scroller/Scroller.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { ScrollArea, type ScrollAreaProps } from './ScrollArea'; +import { type ScrollAreaProps, ScrollArea } from './ScrollArea'; export type ScrollerProps = Omit; diff --git a/packages/dnd/src/components/useDraggable.ts b/packages/dnd/src/components/useDraggable.ts index 233bc867c9..5ac0247d92 100644 --- a/packages/dnd/src/components/useDraggable.ts +++ b/packages/dnd/src/components/useDraggable.ts @@ -21,8 +21,8 @@ export const useDraggableState = (props: { onDropHandler?: ( editor: TEditor, props: { - dragItem: DragItemNode; id: string; + dragItem: DragItemNode; monitor: DropTargetMonitor; nodeRef: any; } @@ -60,7 +60,7 @@ export const useDraggable = (state: DraggableState) => { gutterLeftProps: { contentEditable: false, }, - handleRef: state.dragRef, previewRef: state.nodeRef, + handleRef: state.dragRef, }; }; diff --git a/packages/dnd/src/components/useWithDraggable.ts b/packages/dnd/src/components/useWithDraggable.ts index 6baf79406c..5a455e5840 100644 --- a/packages/dnd/src/components/useWithDraggable.ts +++ b/packages/dnd/src/components/useWithDraggable.ts @@ -23,7 +23,7 @@ export interface WithDraggableOptions { * * @default 0 */ - level?: null | number; + level?: number | null; } export const useWithDraggable = ({ diff --git a/packages/dnd/src/hooks/useDndNode.ts b/packages/dnd/src/hooks/useDndNode.ts index e3a9dbb7fd..1c2f1937df 100644 --- a/packages/dnd/src/hooks/useDndNode.ts +++ b/packages/dnd/src/hooks/useDndNode.ts @@ -13,13 +13,11 @@ import { type UseDropNodeOptions, useDropNode } from './useDropNode'; export interface UseDndNodeOptions extends Pick, Pick { - drag?: UseDragNodeOptions; - drop?: UseDropNodeOptions; onDropHandler?: ( editor: PlateEditor, props: { - dragItem: DragItemNode; id: string; + dragItem: DragItemNode; monitor: DropTargetMonitor; nodeRef: any; } @@ -31,6 +29,8 @@ export interface UseDndNodeOptions /** The reference to the preview element. */ ref?: any; }; + drag?: UseDragNodeOptions; + drop?: UseDropNodeOptions; } /** @@ -39,13 +39,13 @@ export interface UseDndNodeOptions * can be customized or removed. Returns the drag ref and drop line direction. */ export const useDndNode = ({ + id, drag: dragOptions, drop: dropOptions, - id, nodeRef, - onDropHandler, preview: previewOptions = {}, type, + onDropHandler, }: UseDndNodeOptions) => { const editor = useEditorRef(); @@ -57,9 +57,9 @@ export const useDndNode = ({ ...dragOptions, }); const [{ isOver }, drop] = useDropNode(editor, { + id, accept: type, dropLine, - id, nodeRef, onChangeDropLine: setDropLine, onDropHandler, diff --git a/packages/dnd/src/hooks/useDragNode.ts b/packages/dnd/src/hooks/useDragNode.ts index 3be5391545..bd85c680d2 100644 --- a/packages/dnd/src/hooks/useDragNode.ts +++ b/packages/dnd/src/hooks/useDragNode.ts @@ -48,8 +48,8 @@ export const useDragNode = ( const _item = typeof item === 'function' ? item(monitor) : item; return { - editorId: editor.id, id, + editorId: editor.id, ..._item, }; }, diff --git a/packages/dnd/src/hooks/useDropNode.ts b/packages/dnd/src/hooks/useDropNode.ts index 70ac7c6630..f5eda81157 100644 --- a/packages/dnd/src/hooks/useDropNode.ts +++ b/packages/dnd/src/hooks/useDropNode.ts @@ -13,12 +13,12 @@ import { onHoverNode } from '../transforms/onHoverNode'; export interface UseDropNodeOptions extends DropTargetHookSpec { - /** Current value of dropLine. */ - dropLine: string; - /** Id of the node. */ id: string; + /** Current value of dropLine. */ + dropLine: string; + /** The reference to the node being dragged. */ nodeRef: any; @@ -32,8 +32,8 @@ export interface UseDropNodeOptions onDropHandler?: ( editor: PlateEditor, props: { - dragItem: DragItemNode; id: string; + dragItem: DragItemNode; monitor: DropTargetMonitor; nodeRef: any; } @@ -64,8 +64,8 @@ export interface UseDropNodeOptions export const useDropNode = ( editor: PlateEditor, { - dropLine, id, + dropLine, nodeRef, onChangeDropLine, onDropHandler, @@ -80,21 +80,21 @@ export const useDropNode = ( const handled = !!onDropHandler && onDropHandler(editor, { - dragItem, id, + dragItem, monitor, nodeRef, }); if (handled) return; - onDropNode(editor, { dragItem, id, monitor, nodeRef }); + onDropNode(editor, { id, dragItem, monitor, nodeRef }); }, hover(item: DragItemNode, monitor: DropTargetMonitor) { onHoverNode(editor, { + id, dragItem: item, dropLine, - id, monitor, nodeRef, onChangeDropLine, diff --git a/packages/dnd/src/transforms/onDropNode.ts b/packages/dnd/src/transforms/onDropNode.ts index afb55e8c99..f36bf10e12 100644 --- a/packages/dnd/src/transforms/onDropNode.ts +++ b/packages/dnd/src/transforms/onDropNode.ts @@ -13,8 +13,8 @@ import { getHoverDirection } from '../utils'; export const onDropNode = ( editor: TEditor, { - dragItem, id, + dragItem, monitor, nodeRef, }: { @@ -22,7 +22,7 @@ export const onDropNode = ( monitor: DropTargetMonitor; } & Pick ) => { - const direction = getHoverDirection({ dragItem, id, monitor, nodeRef }); + const direction = getHoverDirection({ id, dragItem, monitor, nodeRef }); if (!direction) return; diff --git a/packages/dnd/src/transforms/onHoverNode.ts b/packages/dnd/src/transforms/onHoverNode.ts index 491d443677..f3d0598268 100644 --- a/packages/dnd/src/transforms/onHoverNode.ts +++ b/packages/dnd/src/transforms/onHoverNode.ts @@ -16,9 +16,9 @@ import { getHoverDirection, getNewDirection } from '../utils'; export const onHoverNode = ( editor: TEditor, { + id, dragItem, dropLine, - id, monitor, nodeRef, onChangeDropLine, @@ -31,8 +31,8 @@ export const onHoverNode = ( > ) => { const direction = getHoverDirection({ - dragItem, id, + dragItem, monitor, nodeRef, }); diff --git a/packages/dnd/src/types.ts b/packages/dnd/src/types.ts index bcf967fbd7..21629a6bf8 100644 --- a/packages/dnd/src/types.ts +++ b/packages/dnd/src/types.ts @@ -1,7 +1,7 @@ export interface DragItemNode { - [key: string]: unknown; /** Required to identify the node. */ id: string; + [key: string]: unknown; } export type DropLineDirection = '' | 'bottom' | 'top'; diff --git a/packages/dnd/src/utils/getHoverDirection.ts b/packages/dnd/src/utils/getHoverDirection.ts index cdfca7beb5..0d0ea0db75 100644 --- a/packages/dnd/src/utils/getHoverDirection.ts +++ b/packages/dnd/src/utils/getHoverDirection.ts @@ -3,11 +3,11 @@ import type { DropTargetMonitor, XYCoord } from 'react-dnd'; import type { DragItemNode, DropDirection } from '../types'; export interface GetHoverDirectionOptions { - dragItem: DragItemNode; - /** Hovering node id. */ id: string; + dragItem: DragItemNode; + monitor: DropTargetMonitor; /** The node ref of the node being dragged. */ @@ -19,8 +19,8 @@ export interface GetHoverDirectionOptions { * relative to node B. */ export const getHoverDirection = ({ - dragItem, id, + dragItem, monitor, nodeRef, }: GetHoverDirectionOptions): DropDirection => { diff --git a/packages/docx/src/lib/DocxPlugin.ts b/packages/docx/src/lib/DocxPlugin.ts index e04be1fea1..0acac117c0 100644 --- a/packages/docx/src/lib/DocxPlugin.ts +++ b/packages/docx/src/lib/DocxPlugin.ts @@ -1,7 +1,7 @@ import { type HtmlDeserializer, - HtmlPlugin, type SlatePlugin, + HtmlPlugin, createSlatePlugin, } from '@udecode/plate-common'; @@ -47,6 +47,7 @@ const getParse = }; export const DocxPlugin = createSlatePlugin({ + key: 'docx', inject: { plugins: { [HtmlPlugin.key]: { @@ -60,7 +61,6 @@ export const DocxPlugin = createSlatePlugin({ }, }, }, - key: 'docx', }).extend(({ editor }) => { return { override: { diff --git a/packages/docx/src/lib/__tests__/font.spec.tsx b/packages/docx/src/lib/__tests__/font.spec.tsx index 17364fcd08..3fea88e928 100644 --- a/packages/docx/src/lib/__tests__/font.spec.tsx +++ b/packages/docx/src/lib/__tests__/font.spec.tsx @@ -40,8 +40,8 @@ describe(getDocxTestName(name), () => { background{' '} @@ -69,10 +69,10 @@ describe(getDocxTestName(name), () => { Definition Term diff --git a/packages/docx/src/lib/docx-cleaner/utils/getDocxListIndent.ts b/packages/docx/src/lib/docx-cleaner/utils/getDocxListIndent.ts index d8b5f4be9a..26e07bf7fa 100644 --- a/packages/docx/src/lib/docx-cleaner/utils/getDocxListIndent.ts +++ b/packages/docx/src/lib/docx-cleaner/utils/getDocxListIndent.ts @@ -1,6 +1,6 @@ export const getDocxListIndent = (element: Element): number => { const styleAttribute = element.getAttribute('style') || ''; - const matches = styleAttribute.match(/level(\d+)/i); + const matches = /level(\d+)/i.exec(styleAttribute); if (matches && matches.length > 0) { const [, level] = matches; diff --git a/packages/docx/src/lib/docx-cleaner/utils/getRtfImageHex.ts b/packages/docx/src/lib/docx-cleaner/utils/getRtfImageHex.ts index c6025c2ba3..4856912bc4 100644 --- a/packages/docx/src/lib/docx-cleaner/utils/getRtfImageHex.ts +++ b/packages/docx/src/lib/docx-cleaner/utils/getRtfImageHex.ts @@ -1,6 +1,6 @@ import { SPACE } from '@udecode/plate-common'; -export const getRtfImageHex = (imageData: string): null | string => { +export const getRtfImageHex = (imageData: string): string | null => { const [, bliptagData = ''] = imageData.split('bliptag'); const bracketSplit = bliptagData.split('}'); diff --git a/packages/docx/src/lib/docx-cleaner/utils/getRtfImageMimeType.ts b/packages/docx/src/lib/docx-cleaner/utils/getRtfImageMimeType.ts index 447c8daedf..b3f4f6d235 100644 --- a/packages/docx/src/lib/docx-cleaner/utils/getRtfImageMimeType.ts +++ b/packages/docx/src/lib/docx-cleaner/utils/getRtfImageMimeType.ts @@ -1,4 +1,4 @@ -export const getRtfImageMimeType = (imageData: string): null | string => { +export const getRtfImageMimeType = (imageData: string): string | null => { const [bliptagMeta] = imageData.split('bliptag'); if (bliptagMeta.includes('pngblip')) { diff --git a/packages/docx/src/lib/docx-cleaner/utils/getRtfImageSpid.ts b/packages/docx/src/lib/docx-cleaner/utils/getRtfImageSpid.ts index b0622bf902..02bc4e56b5 100644 --- a/packages/docx/src/lib/docx-cleaner/utils/getRtfImageSpid.ts +++ b/packages/docx/src/lib/docx-cleaner/utils/getRtfImageSpid.ts @@ -11,7 +11,7 @@ const END_OF_ID_SEQUENCE_CHARACTERS = [ export const getRtfImageSpid = ( imageData: string, spidPrefix: string -): null | string => { +): string | null => { const indexes = END_OF_ID_SEQUENCE_CHARACTERS.map((character) => imageData.indexOf(character) ); diff --git a/packages/docx/src/lib/docx-cleaner/utils/getRtfImagesMap.ts b/packages/docx/src/lib/docx-cleaner/utils/getRtfImagesMap.ts index db72c9eca9..8b881f3a44 100644 --- a/packages/docx/src/lib/docx-cleaner/utils/getRtfImagesMap.ts +++ b/packages/docx/src/lib/docx-cleaner/utils/getRtfImagesMap.ts @@ -5,13 +5,13 @@ import { getRtfImagesByType } from './getRtfImagesByType'; export const getRtfImagesMap = (rtf: string): RtfImagesMap => { const rtfImagesMap: RtfImagesMap = {}; - const shppictRtfImages = getRtfImagesByType(rtf, 'i', '\\shppict'); + const shppictRtfImages = getRtfImagesByType(rtf, 'i', String.raw`\shppict`); for (const shppictRtfImage of shppictRtfImages) { rtfImagesMap[shppictRtfImage.spid] = shppictRtfImage; } - const shpRtfImages = getRtfImagesByType(rtf, 's', '\\shp'); + const shpRtfImages = getRtfImagesByType(rtf, 's', String.raw`\shp`); for (const shpRtfImage of shpRtfImages) { rtfImagesMap[shpRtfImage.spid] = shpRtfImage; diff --git a/packages/docx/src/lib/docx-cleaner/utils/getTextListStyleType.ts b/packages/docx/src/lib/docx-cleaner/utils/getTextListStyleType.ts index 72b8d3be4f..f452211810 100644 --- a/packages/docx/src/lib/docx-cleaner/utils/getTextListStyleType.ts +++ b/packages/docx/src/lib/docx-cleaner/utils/getTextListStyleType.ts @@ -1,23 +1,23 @@ export const getTextListStyleType = (text: string): string | undefined => { text = text.trimStart(); - if (text.match(/^\d+[.\\]/)?.[0]) { + if (/^\d+[.\\]/.exec(text)?.[0]) { if (text.startsWith('0')) { return 'decimal-leading-zero'; } return 'decimal'; } - if (text.match(/^[cdilmvx]+\./)?.[0]) { + if (/^[cdilmvx]+\./.exec(text)?.[0]) { return 'lower-roman'; } - if (text.match(/^[a-z]+\./)?.[0]) { + if (/^[a-z]+\./.exec(text)?.[0]) { return 'lower-alpha'; } - if (text.match(/^[CDILMVX]+\./)?.[0]) { + if (/^[CDILMVX]+\./.exec(text)?.[0]) { return 'upper-roman'; } - if (text.match(/^[A-Z]+\./)?.[0]) { + if (/^[A-Z]+\./.exec(text)?.[0]) { return 'upper-alpha'; } }; diff --git a/packages/docx/src/lib/docx-cleaner/utils/getVShapeSpid.ts b/packages/docx/src/lib/docx-cleaner/utils/getVShapeSpid.ts index 90c683e102..7be66041de 100644 --- a/packages/docx/src/lib/docx-cleaner/utils/getVShapeSpid.ts +++ b/packages/docx/src/lib/docx-cleaner/utils/getVShapeSpid.ts @@ -9,7 +9,7 @@ const normalizeSpid = (spid: string): string => { export const getVShapeSpid = ( document: Document, element: Element -): null | string => { +): string | null => { if (element.tagName === 'IMG') { const vShapeId = element.getAttribute('v:shapes'); const vShapes = getVShapes(document); diff --git a/packages/emoji/src/lib/BaseEmojiPlugin.ts b/packages/emoji/src/lib/BaseEmojiPlugin.ts index f8f882b29f..96db0cde72 100644 --- a/packages/emoji/src/lib/BaseEmojiPlugin.ts +++ b/packages/emoji/src/lib/BaseEmojiPlugin.ts @@ -15,8 +15,8 @@ export const BaseEmojiInputPlugin = createSlatePlugin({ }); export const BaseEmojiPlugin = createTSlatePlugin({ - extendEditor: withTriggerCombobox, key: 'emoji', + extendEditor: withTriggerCombobox, options: { createComboboxInput: () => ({ children: [{ text: '' }], diff --git a/packages/emoji/src/lib/constants.ts b/packages/emoji/src/lib/constants.ts index feccafb7b6..2d5d2251c3 100644 --- a/packages/emoji/src/lib/constants.ts +++ b/packages/emoji/src/lib/constants.ts @@ -1,9 +1,9 @@ import { - EmojiCategory, type EmojiCategoryList, type EmojiSettingsType, type FrequentEmojis, type i18nProps, + EmojiCategory, } from './types'; export const EMOJI_MAX_SEARCH_RESULT = 60; diff --git a/packages/emoji/src/lib/types.ts b/packages/emoji/src/lib/types.ts index 4353d57830..8eeca57fde 100644 --- a/packages/emoji/src/lib/types.ts +++ b/packages/emoji/src/lib/types.ts @@ -15,10 +15,10 @@ export type EmojiSettingsType = { value: number; }; showFrequent: { + value: boolean; key?: string; limit?: number; prefix?: string; - value: boolean; }; }; @@ -53,11 +53,11 @@ export type i18nProps = { }; export type EmojiIconList = { - categories: Record; search: { delete: T; loupe: T; }; + categories: Record; }; export type FrequentEmojis = Record; diff --git a/packages/emoji/src/lib/utils/EmojiLibrary/EmojiLibrary.types.ts b/packages/emoji/src/lib/utils/EmojiLibrary/EmojiLibrary.types.ts index 975a0a98cd..009dc2e679 100644 --- a/packages/emoji/src/lib/utils/EmojiLibrary/EmojiLibrary.types.ts +++ b/packages/emoji/src/lib/utils/EmojiLibrary/EmojiLibrary.types.ts @@ -9,9 +9,9 @@ export type Emojis = Record; export type EmojiLibrary = EmojiMartData; export interface IEmojiLibrary { + keys: string[]; getEmoji: (key: string) => Emoji; getEmojiId: (key: string) => string; - keys: string[]; } export { type Emoji } from '@emoji-mart/data'; diff --git a/packages/emoji/src/lib/utils/Grid/Grid.types.ts b/packages/emoji/src/lib/utils/Grid/Grid.types.ts index 58a70310a6..98328bfe54 100644 --- a/packages/emoji/src/lib/utils/Grid/Grid.types.ts +++ b/packages/emoji/src/lib/utils/Grid/Grid.types.ts @@ -1,8 +1,8 @@ export type Unknown = unknown; export type GridRow = { - elements: string[]; id: number; + elements: string[]; }; export type GridRows = GridRow[]; @@ -12,9 +12,9 @@ export type SectionId = string; export type SectionElements = string[]; export interface IGridSection { + id: T; addElements: (elements: SectionElements) => this; getRows: () => GridRows; - id: T; root: R; rowsNum: number; setIndexRowStart: (start: number) => this; diff --git a/packages/emoji/src/lib/utils/Grid/GridSection.ts b/packages/emoji/src/lib/utils/Grid/GridSection.ts index 40e8bf8526..bd25e1672e 100644 --- a/packages/emoji/src/lib/utils/Grid/GridSection.ts +++ b/packages/emoji/src/lib/utils/Grid/GridSection.ts @@ -25,8 +25,8 @@ export abstract class AGridSection const start = lastPosition * this.perLine; const end = start + this.perLine; this.rows.push({ - elements: elements.slice(start, end), id: this._indexRowStart + lastPosition, + elements: elements.slice(start, end), }); } @@ -38,6 +38,8 @@ export abstract class AGridSection } } + protected abstract createRootRef(): void; + public addElements(elements: SectionElements) { this._rowsNum = Math.ceil(elements.length / this.perLine); this.initRows(elements); @@ -73,6 +75,4 @@ export abstract class AGridSection get rowsNum() { return this._rowsNum; } - - protected abstract createRootRef(): void; } diff --git a/packages/emoji/src/react/hooks/useEmojiDropdownMenuState.ts b/packages/emoji/src/react/hooks/useEmojiDropdownMenuState.ts index 3d3b10b7b3..6e1b8eed77 100644 --- a/packages/emoji/src/react/hooks/useEmojiDropdownMenuState.ts +++ b/packages/emoji/src/react/hooks/useEmojiDropdownMenuState.ts @@ -1,9 +1,9 @@ import { useStableMemo } from '@udecode/plate-common/react'; import { + type EmojiSettingsType, EmojiFloatingIndexSearch, EmojiSettings, - type EmojiSettingsType, } from '../../lib'; import { FrequentEmojiStorage } from '../storage'; import { EmojiFloatingLibrary } from '../utils'; diff --git a/packages/emoji/src/react/hooks/useEmojiPicker.ts b/packages/emoji/src/react/hooks/useEmojiPicker.ts index 428d48477c..747a147473 100644 --- a/packages/emoji/src/react/hooks/useEmojiPicker.ts +++ b/packages/emoji/src/react/hooks/useEmojiPicker.ts @@ -9,15 +9,15 @@ import { type EmojiCategoryList, type EmojiIconList, type EmojiSettingsType, - i18n, type i18nProps, + i18n, insertEmoji, } from '../../lib'; import { - EmojiPickerState, type IEmojiFloatingLibrary, type MapEmojiCategoryList, type SetFocusedAndVisibleSectionsType, + EmojiPickerState, observeCategories, } from '../utils'; @@ -36,25 +36,25 @@ export type UseEmojiPickerType< T extends React.ReactElement = React.ReactElement, > = { clearSearch: () => void; - emoji?: Emoji; emojiLibrary: IEmojiFloatingLibrary; - focusedCategory?: EmojiCategoryList; - handleCategoryClick: (id: EmojiCategoryList) => void; hasFound: boolean; i18n: i18nProps; icons: EmojiIconList; isOpen: boolean; isSearching: boolean; - onMouseOver: (emoji?: Emoji) => void; - onSelectEmoji: (emoji: Emoji) => void; refs: MutableRefs; searchResult: Emoji[]; searchValue: string; setIsOpen: (isOpen: boolean) => void; setSearch: (value: string) => void; + visibleCategories: MapEmojiCategoryList; + handleCategoryClick: (id: EmojiCategoryList) => void; + onMouseOver: (emoji?: Emoji) => void; + onSelectEmoji: (emoji: Emoji) => void; + emoji?: Emoji; + focusedCategory?: EmojiCategoryList; settings?: EmojiSettingsType; styles?: any; - visibleCategories: MapEmojiCategoryList; }; export const useEmojiPicker = ({ @@ -214,13 +214,13 @@ export const useEmojiPicker = ({ clearSearch, emoji: state.emoji, emojiLibrary, - handleCategoryClick, i18n, - onMouseOver, - onSelectEmoji, refs, setIsOpen, setSearch, + handleCategoryClick, + onMouseOver, + onSelectEmoji, ...state, }; }; diff --git a/packages/emoji/src/react/storage/FrequentEmojiStorage.ts b/packages/emoji/src/react/storage/FrequentEmojiStorage.ts index 6c7d745f34..3261f48fda 100644 --- a/packages/emoji/src/react/storage/FrequentEmojiStorage.ts +++ b/packages/emoji/src/react/storage/FrequentEmojiStorage.ts @@ -4,7 +4,7 @@ import type { } from '../utils'; import { DEFAULT_FREQUENTLY_USED_EMOJI } from '../../lib/constants'; -import { EmojiCategory, type FrequentEmojis } from '../../lib/types'; +import { type FrequentEmojis, EmojiCategory } from '../../lib/types'; import { LocalStorage } from './LocalStorage'; export class FrequentEmojiStorage implements IFrequentEmojiStorage { diff --git a/packages/emoji/src/react/utils/EmojiLibrary/EmojiFloatingGrid.ts b/packages/emoji/src/react/utils/EmojiLibrary/EmojiFloatingGrid.ts index f80fec3b01..9b5486cb84 100644 --- a/packages/emoji/src/react/utils/EmojiLibrary/EmojiFloatingGrid.ts +++ b/packages/emoji/src/react/utils/EmojiLibrary/EmojiFloatingGrid.ts @@ -1,10 +1,10 @@ import React from 'react'; import { - AGridSection, type EmojiCategoryList, - Grid, type IGrid, + AGridSection, + Grid, } from '../../../lib'; export type EmojiFloatingGridType = IGrid< diff --git a/packages/emoji/src/react/utils/EmojiLibrary/EmojiFloatingLibrary.ts b/packages/emoji/src/react/utils/EmojiLibrary/EmojiFloatingLibrary.ts index dc54c4159e..98fcac7a93 100644 --- a/packages/emoji/src/react/utils/EmojiLibrary/EmojiFloatingLibrary.ts +++ b/packages/emoji/src/react/utils/EmojiLibrary/EmojiFloatingLibrary.ts @@ -7,11 +7,11 @@ import type { } from './EmojiFloatingLibrary.types'; import { - EmojiCategory, type EmojiCategoryList, - EmojiInlineLibrary, type EmojiLibrary, type EmojiSettingsType, + EmojiCategory, + EmojiInlineLibrary, defaultCategories, } from '../../../lib'; import { EmojiFloatingGridBuilder } from './EmojiFloatingGridBuilder'; @@ -20,11 +20,11 @@ export class EmojiFloatingLibrary extends EmojiInlineLibrary implements IEmojiFloatingLibrary { - private categories: EmojiCategoryList[] = defaultCategories; + private static instance?: EmojiFloatingLibrary; + private categories: EmojiCategoryList[] = defaultCategories; private emojis: Partial> = {}; private grid: EmojiFloatingGridType; - private static instance?: EmojiFloatingLibrary; private constructor( protected settings: EmojiSettingsType, diff --git a/packages/emoji/src/react/utils/EmojiPickerState.ts b/packages/emoji/src/react/utils/EmojiPickerState.ts index 4e5520e3f3..5fbc1ef5d9 100644 --- a/packages/emoji/src/react/utils/EmojiPickerState.ts +++ b/packages/emoji/src/react/utils/EmojiPickerState.ts @@ -2,25 +2,25 @@ import React from 'react'; import type { Emoji } from '@emoji-mart/data'; -import { EmojiCategory, type EmojiCategoryList } from '../../lib'; +import { type EmojiCategoryList, EmojiCategory } from '../../lib'; export type MapEmojiCategoryList = Map; export type EmojiPickerStateProps = { - emoji?: Emoji; - focusedCategory?: EmojiCategoryList; - frequentEmoji?: string; hasFound: boolean; isOpen: boolean; isSearching: boolean; searchResult: Emoji[]; searchValue: string; visibleCategories: MapEmojiCategoryList; + emoji?: Emoji; + focusedCategory?: EmojiCategoryList; + frequentEmoji?: string; }; export type EmojiPickerStateDispatch = { - payload?: Partial; type: string; + payload?: Partial; }; const initialState: EmojiPickerStateProps = { diff --git a/packages/excalidraw/src/lib/transforms/insertExcalidraw.ts b/packages/excalidraw/src/lib/transforms/insertExcalidraw.ts index fab1418d46..7aa0ff6476 100644 --- a/packages/excalidraw/src/lib/transforms/insertExcalidraw.ts +++ b/packages/excalidraw/src/lib/transforms/insertExcalidraw.ts @@ -7,8 +7,8 @@ import { } from '@udecode/plate-common'; import { - BaseExcalidrawPlugin, type TExcalidrawElement, + BaseExcalidrawPlugin, } from '../BaseExcalidrawPlugin'; export const insertExcalidraw = ( diff --git a/packages/excalidraw/src/lib/types.ts b/packages/excalidraw/src/lib/types.ts index 33fe5b913c..3b999d9724 100644 --- a/packages/excalidraw/src/lib/types.ts +++ b/packages/excalidraw/src/lib/types.ts @@ -3,5 +3,5 @@ import type { ExcalidrawElement } from '@excalidraw/excalidraw/types/element/typ export interface ExcalidrawDataState extends Omit { - elements?: null | readonly Partial[]; + elements?: readonly Partial[] | null; } diff --git a/packages/find-replace/src/lib/FindReplacePlugin.ts b/packages/find-replace/src/lib/FindReplacePlugin.ts index c903e5dd16..bf2da05637 100644 --- a/packages/find-replace/src/lib/FindReplacePlugin.ts +++ b/packages/find-replace/src/lib/FindReplacePlugin.ts @@ -11,8 +11,8 @@ export type FindReplaceConfig = PluginConfig< >; export const FindReplacePlugin = createTSlatePlugin({ - decorate: decorateFindReplace, key: 'search_highlight', + decorate: decorateFindReplace, node: { isLeaf: true }, options: { search: '' }, }); diff --git a/packages/floating/src/hooks/useFloatingToolbar.ts b/packages/floating/src/hooks/useFloatingToolbar.ts index 98d5cb6fdb..1c26c79a8c 100644 --- a/packages/floating/src/hooks/useFloatingToolbar.ts +++ b/packages/floating/src/hooks/useFloatingToolbar.ts @@ -31,7 +31,7 @@ export const useFloatingToolbarState = ({ showWhenReadOnly, }: { editorId: string; - focusedEditorId: null | string; + focusedEditorId: string | null; } & FloatingToolbarState) => { const selectionExpanded = useEditorSelector(isSelectionExpanded, []); const selectionText = useEditorSelector(getSelectionText, []); @@ -48,8 +48,8 @@ export const useFloatingToolbarState = ({ mergeProps( { getBoundingClientRect: getSelectionBoundingClientRect, - onOpenChange: setOpen, open, + onOpenChange: setOpen, }, floatingOptions ) diff --git a/packages/floating/src/utils/getBoundingClientRect.ts b/packages/floating/src/utils/getBoundingClientRect.ts index b0cf07539d..d0ed7dcdfb 100644 --- a/packages/floating/src/utils/getBoundingClientRect.ts +++ b/packages/floating/src/utils/getBoundingClientRect.ts @@ -1,6 +1,6 @@ import { type TEditor, getRange } from '@udecode/plate-common'; import { toDOMRange } from '@udecode/plate-common/react'; -import { type Location, Path, type Range } from 'slate'; +import { type Location, type Range, Path } from 'slate'; import { mergeClientRects } from './mergeClientRects'; diff --git a/packages/font/src/lib/BaseFontBackgroundColorPlugin.ts b/packages/font/src/lib/BaseFontBackgroundColorPlugin.ts index 3d87c294ef..99c85f2571 100644 --- a/packages/font/src/lib/BaseFontBackgroundColorPlugin.ts +++ b/packages/font/src/lib/BaseFontBackgroundColorPlugin.ts @@ -1,12 +1,12 @@ import { createSlatePlugin } from '@udecode/plate-common'; export const BaseFontBackgroundColorPlugin = createSlatePlugin({ + key: 'backgroundColor', inject: { nodeProps: { nodeKey: 'backgroundColor', }, }, - key: 'backgroundColor', }).extend(({ type }) => ({ parsers: { html: { diff --git a/packages/font/src/lib/BaseFontColorPlugin.ts b/packages/font/src/lib/BaseFontColorPlugin.ts index bcf022e90a..60e9202530 100644 --- a/packages/font/src/lib/BaseFontColorPlugin.ts +++ b/packages/font/src/lib/BaseFontColorPlugin.ts @@ -1,13 +1,13 @@ import { createSlatePlugin } from '@udecode/plate-common'; export const BaseFontColorPlugin = createSlatePlugin({ + key: 'color', inject: { nodeProps: { defaultNodeValue: 'black', nodeKey: 'color', }, }, - key: 'color', }).extend(({ type }) => ({ parsers: { html: { diff --git a/packages/font/src/lib/BaseFontFamilyPlugin.ts b/packages/font/src/lib/BaseFontFamilyPlugin.ts index 053b3dadf8..14b0c00158 100644 --- a/packages/font/src/lib/BaseFontFamilyPlugin.ts +++ b/packages/font/src/lib/BaseFontFamilyPlugin.ts @@ -1,12 +1,12 @@ import { createSlatePlugin } from '@udecode/plate-common'; export const BaseFontFamilyPlugin = createSlatePlugin({ + key: 'fontFamily', inject: { nodeProps: { nodeKey: 'fontFamily', }, }, - key: 'fontFamily', }).extend(({ type }) => ({ parsers: { html: { diff --git a/packages/font/src/lib/BaseFontSizePlugin.ts b/packages/font/src/lib/BaseFontSizePlugin.ts index afc2ababec..b9ee69f873 100644 --- a/packages/font/src/lib/BaseFontSizePlugin.ts +++ b/packages/font/src/lib/BaseFontSizePlugin.ts @@ -1,12 +1,12 @@ import { createSlatePlugin } from '@udecode/plate-common'; export const BaseFontSizePlugin = createSlatePlugin({ + key: 'fontSize', inject: { nodeProps: { nodeKey: 'fontSize', }, }, - key: 'fontSize', }).extend(({ type }) => ({ parsers: { html: { diff --git a/packages/font/src/lib/BaseFontWeightPlugin.ts b/packages/font/src/lib/BaseFontWeightPlugin.ts index 0659f0d2d1..a5cc971ff6 100644 --- a/packages/font/src/lib/BaseFontWeightPlugin.ts +++ b/packages/font/src/lib/BaseFontWeightPlugin.ts @@ -1,12 +1,12 @@ import { createSlatePlugin } from '@udecode/plate-common'; export const BaseFontWeightPlugin = createSlatePlugin({ + key: 'fontWeight', inject: { nodeProps: { nodeKey: 'fontWeight', }, }, - key: 'fontWeight', }).extend(({ type }) => ({ parsers: { html: { diff --git a/packages/font/src/react/hooks/useColorDropdownMenu.ts b/packages/font/src/react/hooks/useColorDropdownMenu.ts index 78cbe6058f..21ed469dbf 100644 --- a/packages/font/src/react/hooks/useColorDropdownMenu.ts +++ b/packages/font/src/react/hooks/useColorDropdownMenu.ts @@ -13,10 +13,10 @@ export const useColorDropdownMenuState = ({ customColors, nodeType, }: { - closeOnSelect?: boolean; colors: { isBrightColor: boolean; name: string; value: string }[]; customColors: { isBrightColor: boolean; name: string; value: string }[]; nodeType: string; + closeOnSelect?: boolean; }) => { const editor = useEditorRef(); @@ -88,25 +88,25 @@ export const useColorDropdownMenuState = ({ color, colors, customColors, - onToggle, open, selectedColor, updateColor, updateColorAndClose, + onToggle, }; }; export const useColorDropdownMenu = ({ - onToggle, open, + onToggle, }: ReturnType) => { return { buttonProps: { pressed: open, }, menuProps: { - onOpenChange: onToggle, open, + onOpenChange: onToggle, }, }; }; diff --git a/packages/font/src/react/hooks/useColorsCustom.ts b/packages/font/src/react/hooks/useColorsCustom.ts index ca285675d8..bf24ad1519 100644 --- a/packages/font/src/react/hooks/useColorsCustom.ts +++ b/packages/font/src/react/hooks/useColorsCustom.ts @@ -8,10 +8,10 @@ export const useColorsCustomState = ({ customColors, updateCustomColor, }: { - color?: string; colors: any[]; customColors: any[]; updateCustomColor: (color: string) => void; + color?: string; }) => { const [customColor, setCustomColor] = React.useState(); @@ -65,11 +65,11 @@ export const useColorsCustom = ({ return { inputProps: { + value, onChange: (e: React.ChangeEvent) => { setValue(e.target.value); updateCustomColorDebounced(e.target.value); }, - value, }, menuItemProps: { onSelect: (e: Event) => { diff --git a/packages/heading/src/internal/getHeadingList.ts b/packages/heading/src/internal/getHeadingList.ts index 9c8d5e4f60..a65de445df 100644 --- a/packages/heading/src/internal/getHeadingList.ts +++ b/packages/heading/src/internal/getHeadingList.ts @@ -41,7 +41,7 @@ export const getHeadingList = (editor: SlateEditor) => { const title = getNodeString(node); const depth = headingDepth[type]; const id = node.id; - title && headingList.push({ depth, id, path, title, type }); + title && headingList.push({ id, depth, path, title, type }); }); return headingList; diff --git a/packages/heading/src/lib/types.ts b/packages/heading/src/lib/types.ts index 9883909b08..17ef442201 100644 --- a/packages/heading/src/lib/types.ts +++ b/packages/heading/src/lib/types.ts @@ -1,8 +1,8 @@ import type { Path } from 'slate'; export interface Heading { - depth: number; id: string; + depth: number; path: Path; title: string; type: string; diff --git a/packages/heading/src/react/HeadingPlugin.tsx b/packages/heading/src/react/HeadingPlugin.tsx index ab5c268faa..6627d39784 100644 --- a/packages/heading/src/react/HeadingPlugin.tsx +++ b/packages/heading/src/react/HeadingPlugin.tsx @@ -1,6 +1,6 @@ import { - Key, type PlatePlugin, + Key, toPlatePlugin, } from '@udecode/plate-common/react'; @@ -16,14 +16,14 @@ export const HeadingPlugin = toPlatePlugin(BaseHeadingPlugin, ({ plugin }) => ({ return { shortcuts: { ['toggleHeading' + level]: { - handler: () => { - editor.tf.toggle.block({ type }); - }, keys: [ [Key.Mod, Key.Alt, level], [Key.Mod, Key.Shift, level], ], preventDefault: true, + handler: () => { + editor.tf.toggle.block({ type }); + }, }, }, }; diff --git a/packages/heading/src/react/hooks/useContentController.ts b/packages/heading/src/react/hooks/useContentController.ts index 32624b982a..75be5833cc 100644 --- a/packages/heading/src/react/hooks/useContentController.ts +++ b/packages/heading/src/react/hooks/useContentController.ts @@ -46,13 +46,13 @@ export const useContentController = ({ const [activeContentId, setActiveContentId] = React.useState(activeId); const onContentScroll = ({ + id, behavior = 'instant', el, - id, }: { - behavior?: ScrollBehavior; - el: HTMLElement; id: string; + el: HTMLElement; + behavior?: ScrollBehavior; }) => { setActiveContentId(id); diff --git a/packages/heading/src/react/hooks/useTocElement.ts b/packages/heading/src/react/hooks/useTocElement.ts index 6f0acb7933..355af77b7f 100644 --- a/packages/heading/src/react/hooks/useTocElement.ts +++ b/packages/heading/src/react/hooks/useTocElement.ts @@ -14,8 +14,8 @@ import { heightToTop } from '../utils'; export type useTocElementStateProps = { isScroll: boolean; - scrollContainerSelector?: string; topOffset: number; + scrollContainerSelector?: string; }; export const useTocElementState = ({ diff --git a/packages/heading/src/react/hooks/useTocSideBarState.ts b/packages/heading/src/react/hooks/useTocSideBarState.ts index 72ca54eec5..ead5bffe16 100644 --- a/packages/heading/src/react/hooks/useTocSideBarState.ts +++ b/packages/heading/src/react/hooks/useTocSideBarState.ts @@ -16,12 +16,12 @@ import { checkIn } from '../utils'; export const useTocSideBarState = ({ containerRef, - onOpenChange, open = true, rootMargin = '0px 0px 0px 0px', showHeader = true, style, topOffset = 0, + onOpenChange, }: TocSideBarProps) => { const editor = useEditorRef(); const headingList = useEditorSelector(getHeadingList, []); @@ -51,25 +51,25 @@ export const useTocSideBarState = ({ editor, headingList, mouseInToc, - onContentScroll, - onOpenChange, open, setIsObserve, setMouseInToc, showHeader, style, tocRef, + onContentScroll, + onOpenChange, }; }; export const useTocSideBar = ({ editor, mouseInToc, - onContentScroll, open, setIsObserve, setMouseInToc, tocRef, + onContentScroll, }: ReturnType) => { React.useEffect(() => { if (mouseInToc) { @@ -96,7 +96,7 @@ export const useTocSideBar = ({ if (!el) return; - onContentScroll({ behavior, el, id }); + onContentScroll({ id, behavior, el }); }, // eslint-disable-next-line react-hooks/exhaustive-deps [] @@ -104,6 +104,7 @@ export const useTocSideBar = ({ return { navProps: { + ref: tocRef, onMouseEnter: () => { !mouseInToc && open && setMouseInToc(true); }, @@ -115,7 +116,6 @@ export const useTocSideBar = ({ isIn !== mouseInToc && setMouseInToc(isIn); } }, - ref: tocRef, }, onContentClick, }; diff --git a/packages/highlight/src/react/HighlightPlugin.tsx b/packages/highlight/src/react/HighlightPlugin.tsx index 63f4d318ee..7be501e91b 100644 --- a/packages/highlight/src/react/HighlightPlugin.tsx +++ b/packages/highlight/src/react/HighlightPlugin.tsx @@ -7,11 +7,11 @@ export const HighlightPlugin = toPlatePlugin( ({ editor, type }) => ({ shortcuts: { toggleHighlight: { + keys: [[Key.Mod, Key.Shift, 'h']], + preventDefault: true, handler: () => { editor.tf.toggle.mark({ key: type }); }, - keys: [[Key.Mod, Key.Shift, 'h']], - preventDefault: true, }, }, }) diff --git a/packages/html/src/react/elementToHtml.ts b/packages/html/src/react/elementToHtml.ts index 46d3c4e161..53b46de3ee 100644 --- a/packages/html/src/react/elementToHtml.ts +++ b/packages/html/src/react/elementToHtml.ts @@ -22,10 +22,10 @@ export const elementToHtml = ( preserveClassNames, props, }: { + props: TRenderElementProps; dndWrapper?: React.ComponentClass | React.FC | string; plateProps?: Partial; preserveClassNames?: string[]; - props: TRenderElementProps; } ) => { let html = `
${props.children}
`; diff --git a/packages/html/src/react/leafToHtml.ts b/packages/html/src/react/leafToHtml.ts index 143b598159..8dca35f23d 100644 --- a/packages/html/src/react/leafToHtml.ts +++ b/packages/html/src/react/leafToHtml.ts @@ -19,9 +19,9 @@ export const leafToHtml = ( preserveClassNames, props, }: { + props: TRenderLeafProps; plateProps?: Partial; preserveClassNames?: string[]; - props: TRenderLeafProps; } ) => { const { children } = props; diff --git a/packages/html/src/react/serializeHtml.ts b/packages/html/src/react/serializeHtml.ts index 2e4c55248d..0eb59135b9 100644 --- a/packages/html/src/react/serializeHtml.ts +++ b/packages/html/src/react/serializeHtml.ts @@ -23,6 +23,9 @@ export const serializeHtml = ( stripDataAttributes = true, stripWhitespace = true, }: { + /** Slate nodes to convert to HTML. */ + nodes: TDescendant[]; + /** * Optionally convert new line chars (\n) to HTML
tags * @@ -33,9 +36,6 @@ export const serializeHtml = ( /** Drag and drop component */ dndWrapper?: React.ComponentClass | React.FC | string; - /** Slate nodes to convert to HTML. */ - nodes: TDescendant[]; - /** Slate props to provide if the rendering depends on plate/slate hooks */ plateProps?: Omit, 'editor'>; diff --git a/packages/html/src/react/utils/createElementWithSlate.ts b/packages/html/src/react/utils/createElementWithSlate.ts index 64d74503df..255ca51419 100644 --- a/packages/html/src/react/utils/createElementWithSlate.ts +++ b/packages/html/src/react/utils/createElementWithSlate.ts @@ -1,9 +1,9 @@ import React from 'react'; import { + type PlateProps, Plate, PlateContent, - type PlateProps, } from '@udecode/plate-common/react'; /** Create a React element wrapped in a Plate provider. */ diff --git a/packages/indent-list/src/__tests__/indentListPluginPage.ts b/packages/indent-list/src/__tests__/indentListPluginPage.ts index 29837de67a..b9066b3801 100644 --- a/packages/indent-list/src/__tests__/indentListPluginPage.ts +++ b/packages/indent-list/src/__tests__/indentListPluginPage.ts @@ -1,7 +1,7 @@ import { type TElement, getNode, getPreviousPath } from '@udecode/plate-common'; import { Path } from 'slate'; -import { BaseIndentListPlugin, type GetSiblingIndentListOptions } from '../lib'; +import { type GetSiblingIndentListOptions, BaseIndentListPlugin } from '../lib'; export const indentListPluginPage = BaseIndentListPlugin.extend( ({ editor }) => ({ diff --git a/packages/indent-list/src/lib/BaseIndentListPlugin.ts b/packages/indent-list/src/lib/BaseIndentListPlugin.ts index 266cced620..6ef646fdd8 100644 --- a/packages/indent-list/src/lib/BaseIndentListPlugin.ts +++ b/packages/indent-list/src/lib/BaseIndentListPlugin.ts @@ -1,8 +1,8 @@ import { - BaseParagraphPlugin, - HtmlPlugin, type PluginConfig, type TElement, + BaseParagraphPlugin, + HtmlPlugin, createTSlatePlugin, isHtmlBlockElement, postCleanHtml, @@ -32,6 +32,7 @@ export type BaseIndentListConfig = PluginConfig< >; export const BaseIndentListPlugin = createTSlatePlugin({ + key: 'listStyleType', extendEditor: withIndentList, inject: { plugins: { @@ -71,7 +72,6 @@ export const BaseIndentListPlugin = createTSlatePlugin({ }, }, }, - key: 'listStyleType', options: { getListStyleType: (element) => element.style.listStyleType as ListStyleType, }, diff --git a/packages/indent-list/src/lib/normalizers/withInsertBreakIndentList.ts b/packages/indent-list/src/lib/normalizers/withInsertBreakIndentList.ts index 81528f46b9..aeacde9ac7 100644 --- a/packages/indent-list/src/lib/normalizers/withInsertBreakIndentList.ts +++ b/packages/indent-list/src/lib/normalizers/withInsertBreakIndentList.ts @@ -1,7 +1,7 @@ import { - BaseParagraphPlugin, type ExtendEditor, type TElement, + BaseParagraphPlugin, getAboveNode, insertNodes, isDefined, diff --git a/packages/indent-list/src/lib/queries/getSiblingIndentList.ts b/packages/indent-list/src/lib/queries/getSiblingIndentList.ts index 1f881a17cf..dcf0bb13c6 100644 --- a/packages/indent-list/src/lib/queries/getSiblingIndentList.ts +++ b/packages/indent-list/src/lib/queries/getSiblingIndentList.ts @@ -15,17 +15,17 @@ export interface GetSiblingIndentListOptions< N extends ElementOf, E extends TEditor = TEditor, > { - breakOnEqIndentNeqListStyleType?: boolean; - breakOnLowerIndent?: boolean; - breakQuery?: (siblingNode: TNode) => boolean | undefined; - /** Query to break lookup */ - eqIndent?: boolean; getNextEntry?: ( entry: TNodeEntry> ) => TNodeEntry | undefined; getPreviousEntry?: ( entry: TNodeEntry> ) => TNodeEntry | undefined; + breakOnEqIndentNeqListStyleType?: boolean; + breakOnLowerIndent?: boolean; + breakQuery?: (siblingNode: TNode) => boolean | undefined; + /** Query to break lookup */ + eqIndent?: boolean; /** Query to validate lookup. If false, check the next sibling. */ query?: (siblingNode: TNode) => boolean | undefined; } diff --git a/packages/indent-list/src/lib/transforms/toggleIndentListByPath.ts b/packages/indent-list/src/lib/transforms/toggleIndentListByPath.ts index f0c7ad8c06..93d6c66caa 100644 --- a/packages/indent-list/src/lib/transforms/toggleIndentListByPath.ts +++ b/packages/indent-list/src/lib/transforms/toggleIndentListByPath.ts @@ -1,7 +1,7 @@ import { - BaseParagraphPlugin, type SlateEditor, type TNodeEntry, + BaseParagraphPlugin, setNodes, unsetNodes, } from '@udecode/plate-common'; diff --git a/packages/indent-list/src/react/IndentListPlugin.tsx b/packages/indent-list/src/react/IndentListPlugin.tsx index c9beab3869..7a6eb3b115 100644 --- a/packages/indent-list/src/react/IndentListPlugin.tsx +++ b/packages/indent-list/src/react/IndentListPlugin.tsx @@ -15,10 +15,10 @@ export type IndentListConfig = ExtendConfig< listStyleTypes?: Record< string, { + type: string; isOrdered?: boolean; liComponent?: React.FC; markerComponent?: React.FC>; - type: string; } >; } @@ -28,11 +28,11 @@ export type IndentListConfig = ExtendConfig< export const IndentListPlugin = toTPlatePlugin( BaseIndentListPlugin, { - handlers: { - onKeyDown: onKeyDownIndentList, - }, render: { belowNodes: renderIndentListBelowNodes, }, + handlers: { + onKeyDown: onKeyDownIndentList, + }, } ); diff --git a/packages/indent-list/src/react/hooks/useIndentListToolbarButton.ts b/packages/indent-list/src/react/hooks/useIndentListToolbarButton.ts index c60b5a042a..ff0b116516 100644 --- a/packages/indent-list/src/react/hooks/useIndentListToolbarButton.ts +++ b/packages/indent-list/src/react/hooks/useIndentListToolbarButton.ts @@ -25,6 +25,7 @@ export const useIndentListToolbarButton = ({ return { props: { + pressed, onClick: () => { toggleIndentList(editor, { listStyleType: nodeType, @@ -33,7 +34,6 @@ export const useIndentListToolbarButton = ({ onMouseDown: (e: React.MouseEvent) => { e.preventDefault(); }, - pressed, }, }; }; diff --git a/packages/indent-list/src/react/hooks/useIndentTodoToolbarButton.ts b/packages/indent-list/src/react/hooks/useIndentTodoToolbarButton.ts index 805ac893d9..be1559e284 100644 --- a/packages/indent-list/src/react/hooks/useIndentTodoToolbarButton.ts +++ b/packages/indent-list/src/react/hooks/useIndentTodoToolbarButton.ts @@ -25,6 +25,7 @@ export const useIndentTodoToolBarButton = ({ return { props: { + pressed, onClick: () => { toggleIndentList(editor, { listStyleType: nodeType, @@ -33,7 +34,6 @@ export const useIndentTodoToolBarButton = ({ onMouseDown: (e: React.MouseEvent) => { e.preventDefault(); }, - pressed, }, }; }; diff --git a/packages/indent-list/src/react/renderIndentListBelowNodes.tsx b/packages/indent-list/src/react/renderIndentListBelowNodes.tsx index 44100423be..31690f3ed9 100644 --- a/packages/indent-list/src/react/renderIndentListBelowNodes.tsx +++ b/packages/indent-list/src/react/renderIndentListBelowNodes.tsx @@ -59,7 +59,7 @@ export const renderIndentListBelowNodes = ( } = listOptions; return ( - +
  • {children}
    • diff --git a/packages/indent/src/lib/BaseIndentPlugin.ts b/packages/indent/src/lib/BaseIndentPlugin.ts index f4a09014f1..afb63b58bf 100644 --- a/packages/indent/src/lib/BaseIndentPlugin.ts +++ b/packages/indent/src/lib/BaseIndentPlugin.ts @@ -1,7 +1,7 @@ import { - BaseParagraphPlugin, type PluginConfig, type TElement, + BaseParagraphPlugin, createTSlatePlugin, } from '@udecode/plate-common'; @@ -34,6 +34,7 @@ export type IndentConfig = PluginConfig< >; export const BaseIndentPlugin = createTSlatePlugin({ + key: 'indent', extendEditor: withIndent, inject: { nodeProps: { @@ -47,7 +48,6 @@ export const BaseIndentPlugin = createTSlatePlugin({ }, targetPlugins: [BaseParagraphPlugin.key], }, - key: 'indent', options: { offset: 24, unit: 'px', diff --git a/packages/indent/src/lib/BaseTextIndentPlugin.ts b/packages/indent/src/lib/BaseTextIndentPlugin.ts index c4c2b6388d..a7c225499a 100644 --- a/packages/indent/src/lib/BaseTextIndentPlugin.ts +++ b/packages/indent/src/lib/BaseTextIndentPlugin.ts @@ -1,6 +1,6 @@ import { - BaseParagraphPlugin, type PluginConfig, + BaseParagraphPlugin, createTSlatePlugin, } from '@udecode/plate-common'; @@ -12,6 +12,7 @@ export type TextIndentConfig = PluginConfig< >; export const BaseTextIndentPlugin = createTSlatePlugin({ + key: 'textIndent', inject: { nodeProps: { nodeKey: 'textIndent', @@ -24,7 +25,6 @@ export const BaseTextIndentPlugin = createTSlatePlugin({ }, targetPlugins: [BaseParagraphPlugin.key], }, - key: 'textIndent', options: { offset: 24, unit: 'px', diff --git a/packages/juice/src/lib/JuicePlugin.ts b/packages/juice/src/lib/JuicePlugin.ts index 55a89a5c70..4278272d4a 100644 --- a/packages/juice/src/lib/JuicePlugin.ts +++ b/packages/juice/src/lib/JuicePlugin.ts @@ -2,6 +2,7 @@ import { HtmlPlugin, createSlatePlugin } from '@udecode/plate-common'; import juice from 'juice'; export const JuicePlugin = createSlatePlugin({ + key: 'juice', inject: { plugins: { [HtmlPlugin.key]: { @@ -17,5 +18,4 @@ export const JuicePlugin = createSlatePlugin({ }, }, }, - key: 'juice', }); diff --git a/packages/layout/src/lib/BaseColumnPlugin.ts b/packages/layout/src/lib/BaseColumnPlugin.ts index 27e1ef9c42..42d91cd194 100644 --- a/packages/layout/src/lib/BaseColumnPlugin.ts +++ b/packages/layout/src/lib/BaseColumnPlugin.ts @@ -3,8 +3,8 @@ import { createSlatePlugin } from '@udecode/plate-common'; import { withColumn } from './withColumn'; export const BaseColumnItemPlugin = createSlatePlugin({ - extendEditor: withColumn, key: 'column', + extendEditor: withColumn, node: { isElement: true }, }); diff --git a/packages/layout/src/lib/transforms/insertColumnGroup.ts b/packages/layout/src/lib/transforms/insertColumnGroup.ts index 0afd1a979f..19e972cc93 100644 --- a/packages/layout/src/lib/transforms/insertColumnGroup.ts +++ b/packages/layout/src/lib/transforms/insertColumnGroup.ts @@ -1,6 +1,6 @@ import { - BaseParagraphPlugin, type SlateEditor, + BaseParagraphPlugin, insertNodes, withoutNormalizing, } from '@udecode/plate-common'; diff --git a/packages/layout/src/lib/transforms/insertEmptyColumn.ts b/packages/layout/src/lib/transforms/insertEmptyColumn.ts index c40c48635b..103d214d19 100644 --- a/packages/layout/src/lib/transforms/insertEmptyColumn.ts +++ b/packages/layout/src/lib/transforms/insertEmptyColumn.ts @@ -1,7 +1,7 @@ import { - BaseParagraphPlugin, type InsertNodesOptions, type SlateEditor, + BaseParagraphPlugin, getQueryOptions, insertNodes, } from '@udecode/plate-common'; diff --git a/packages/layout/src/react/ColumnPlugin.tsx b/packages/layout/src/react/ColumnPlugin.tsx index 6cfa0a4c60..6bf7adc228 100644 --- a/packages/layout/src/react/ColumnPlugin.tsx +++ b/packages/layout/src/react/ColumnPlugin.tsx @@ -7,8 +7,8 @@ export const ColumnItemPlugin = toPlatePlugin(BaseColumnItemPlugin); /** Enables support for columns with React-specific features. */ export const ColumnPlugin = toPlatePlugin(BaseColumnPlugin, { + plugins: [ColumnItemPlugin], handlers: { onKeyDown: onKeyDownColumn, }, - plugins: [ColumnItemPlugin], }); diff --git a/packages/line-height/src/lib/BaseLineHeightPlugin.ts b/packages/line-height/src/lib/BaseLineHeightPlugin.ts index 17f1a782ad..0b446cc6cc 100644 --- a/packages/line-height/src/lib/BaseLineHeightPlugin.ts +++ b/packages/line-height/src/lib/BaseLineHeightPlugin.ts @@ -5,6 +5,7 @@ import { BaseParagraphPlugin, createSlatePlugin } from '@udecode/plate-common'; * right and center it. */ export const BaseLineHeightPlugin = createSlatePlugin({ + key: 'lineHeight', inject: { nodeProps: { defaultNodeValue: 1.5, @@ -25,5 +26,4 @@ export const BaseLineHeightPlugin = createSlatePlugin({ }), targetPlugins: [BaseParagraphPlugin.key], }, - key: 'lineHeight', }); diff --git a/packages/line-height/src/lib/transforms/setLineHeight.ts b/packages/line-height/src/lib/transforms/setLineHeight.ts index a9e0f4eb9b..f31b0c2238 100644 --- a/packages/line-height/src/lib/transforms/setLineHeight.ts +++ b/packages/line-height/src/lib/transforms/setLineHeight.ts @@ -15,7 +15,7 @@ export const setLineHeight = ( { setNodesOptions, value, - }: { setNodesOptions?: SetNodesOptions; value: number } + }: { value: number; setNodesOptions?: SetNodesOptions } ): void => { const { inject: { targetPlugins }, diff --git a/packages/line-height/src/react/hooks/useLineHeightDropdownMenu.ts b/packages/line-height/src/react/hooks/useLineHeightDropdownMenu.ts index 204d546b98..198feb05c2 100644 --- a/packages/line-height/src/react/hooks/useLineHeightDropdownMenu.ts +++ b/packages/line-height/src/react/hooks/useLineHeightDropdownMenu.ts @@ -43,13 +43,13 @@ export const useLineHeightDropdownMenu = ({ return { radioGroupProps: { + value, onValueChange: (newValue: string) => { setLineHeight(editor, { value: Number(newValue), }); focusEditor(editor); }, - value, }, }; }; diff --git a/packages/link/src/lib/BaseLinkPlugin.ts b/packages/link/src/lib/BaseLinkPlugin.ts index 30b9f14270..0f6aac199a 100644 --- a/packages/link/src/lib/BaseLinkPlugin.ts +++ b/packages/link/src/lib/BaseLinkPlugin.ts @@ -32,7 +32,7 @@ export type BaseLinkConfig = PluginConfig< * this promise. The default behavior is to use the browser's native * `prompt`. */ - getLinkUrl?: (prevUrl: null | string) => Promise; + getLinkUrl?: (prevUrl: string | null) => Promise; /** * Callback to optionally get the href for a url @@ -85,14 +85,14 @@ export type BaseLinkConfig = PluginConfig< * * @default 'meta+k, ctrl+k' */ - triggerFloatingLinkHotkeys?: string | string[]; + triggerFloatingLinkHotkeys?: string[] | string; } >; /** Enables support for hyperlinks. */ export const BaseLinkPlugin = createTSlatePlugin({ - extendEditor: withLink, key: 'a', + extendEditor: withLink, node: { isElement: true, isInline: true }, options: { allowedSchemes: ['http', 'https', 'mailto', 'tel'], diff --git a/packages/link/src/lib/withLink.ts b/packages/link/src/lib/withLink.ts index 1bc331ae47..77c5ba8baa 100644 --- a/packages/link/src/lib/withLink.ts +++ b/packages/link/src/lib/withLink.ts @@ -20,7 +20,7 @@ import { RemoveEmptyNodesPlugin, withRemoveEmptyNodes, } from '@udecode/plate-normalizers'; -import { Path, type Point, type Range } from 'slate'; +import { type Point, type Range, Path } from 'slate'; import type { BaseLinkConfig } from './BaseLinkPlugin'; diff --git a/packages/link/src/react/LinkPlugin.tsx b/packages/link/src/react/LinkPlugin.tsx index ff688c4ef2..8626081554 100644 --- a/packages/link/src/react/LinkPlugin.tsx +++ b/packages/link/src/react/LinkPlugin.tsx @@ -5,7 +5,7 @@ import { } from '@udecode/plate-common'; import { toTPlatePlugin } from '@udecode/plate-common/react'; -import { type BaseLinkConfig, BaseLinkPlugin, type TLinkElement } from '../lib'; +import { type BaseLinkConfig, type TLinkElement, BaseLinkPlugin } from '../lib'; import { getLinkAttributes } from './utils'; export type FloatingLinkMode = '' | 'edit' | 'insert'; @@ -13,21 +13,21 @@ export type FloatingLinkMode = '' | 'edit' | 'insert'; export type LinkConfig = ExtendConfig< BaseLinkConfig, { - /** - * Default HTML attributes for link elements. - * - * @default { } - */ - defaultLinkAttributes?: React.AnchorHTMLAttributes; isEditing: boolean; mode: FloatingLinkMode; mouseDown: boolean; newTab: boolean; - openEditorId: null | string; + openEditorId: string | null; text: string; - triggerFloatingLinkHotkeys?: string; updated: boolean; url: string; + /** + * Default HTML attributes for link elements. + * + * @default { } + */ + defaultLinkAttributes?: React.AnchorHTMLAttributes; + triggerFloatingLinkHotkeys?: string; } & LinkSelectors, { floatingLink: { diff --git a/packages/link/src/react/components/FloatingLink/FloatingLinkNewTabInput.tsx b/packages/link/src/react/components/FloatingLink/FloatingLinkNewTabInput.tsx index 4d790f8a7a..036e39b713 100644 --- a/packages/link/src/react/components/FloatingLink/FloatingLinkNewTabInput.tsx +++ b/packages/link/src/react/components/FloatingLink/FloatingLinkNewTabInput.tsx @@ -47,8 +47,8 @@ export const useFloatingLinkNewTabInput = ({ return { props: { checked, - onChange, type: 'checkbox', + onChange, }, ref, }; diff --git a/packages/link/src/react/components/FloatingLink/LinkOpenButton.tsx b/packages/link/src/react/components/FloatingLink/LinkOpenButton.tsx index d3a584ff13..94816ee595 100644 --- a/packages/link/src/react/components/FloatingLink/LinkOpenButton.tsx +++ b/packages/link/src/react/components/FloatingLink/LinkOpenButton.tsx @@ -51,10 +51,10 @@ export const useLinkOpenButton = ({ element }: { element?: TLinkElement }) => { props: { ...linkAttributes, 'aria-label': 'Open link in a new tab', + target: '_blank', onMouseOver: (e: React.MouseEvent) => { e.stopPropagation(); }, - target: '_blank', }, }; }; diff --git a/packages/link/src/react/components/useLinkToolbarButton.ts b/packages/link/src/react/components/useLinkToolbarButton.ts index 918febbb7b..d5ca1be5f4 100644 --- a/packages/link/src/react/components/useLinkToolbarButton.ts +++ b/packages/link/src/react/components/useLinkToolbarButton.ts @@ -25,13 +25,13 @@ export const useLinkToolbarButton = ( return { props: { + pressed: state.pressed, onClick: () => { triggerFloatingLink(editor, { focused: true }); }, onMouseDown: (e: React.MouseEvent) => { e.preventDefault(); }, - pressed: state.pressed, }, }; }; diff --git a/packages/link/src/react/transforms/submitFloatingLink.ts b/packages/link/src/react/transforms/submitFloatingLink.ts index a1e7176c31..e104e99057 100644 --- a/packages/link/src/react/transforms/submitFloatingLink.ts +++ b/packages/link/src/react/transforms/submitFloatingLink.ts @@ -21,7 +21,7 @@ export const submitFloatingLink = (editor: SlateEditor) => { url: inputUrl, } = getOptions(); - const url = transformInput ? transformInput(inputUrl) ?? '' : inputUrl; + const url = transformInput ? (transformInput(inputUrl) ?? '') : inputUrl; if (!forceSubmit && !validateUrl(editor, url)) return; diff --git a/packages/list/src/lib/BaseListPlugin.ts b/packages/list/src/lib/BaseListPlugin.ts index 9ebf0ba2cf..7f54aaad9e 100644 --- a/packages/list/src/lib/BaseListPlugin.ts +++ b/packages/list/src/lib/BaseListPlugin.ts @@ -1,7 +1,7 @@ import { - HtmlPlugin, type OmitFirst, type PluginConfig, + HtmlPlugin, bindFirst, createSlatePlugin, createTSlatePlugin, diff --git a/packages/list/src/lib/BaseTodoListPlugin.ts b/packages/list/src/lib/BaseTodoListPlugin.ts index 9e0788d9e9..1f3d5f9e72 100644 --- a/packages/list/src/lib/BaseTodoListPlugin.ts +++ b/packages/list/src/lib/BaseTodoListPlugin.ts @@ -19,7 +19,7 @@ export type TodoListConfig = PluginConfig< >; export const BaseTodoListPlugin = createTSlatePlugin({ - extendEditor: withTodoList, key: 'action_item', + extendEditor: withTodoList, node: { isElement: true }, }); diff --git a/packages/list/src/lib/normalizers/normalizeListItem.ts b/packages/list/src/lib/normalizers/normalizeListItem.ts index 7a1be45a80..d0627cf6f9 100644 --- a/packages/list/src/lib/normalizers/normalizeListItem.ts +++ b/packages/list/src/lib/normalizers/normalizeListItem.ts @@ -14,13 +14,13 @@ import { removeNodes, setElements, } from '@udecode/plate-common'; -import { Path, type PathRef } from 'slate'; +import { type PathRef, Path } from 'slate'; import { + type ListPluginOptions, BaseBulletedListPlugin, BaseListItemContentPlugin, BaseNumberedListPlugin, - type ListPluginOptions, } from '../BaseListPlugin'; import { getListTypes } from '../queries/index'; import { moveListItemUp } from '../transforms/index'; @@ -71,8 +71,8 @@ export const normalizeListItem = ( const allValidLiChildrenTypes = new Set([ editor.getType(BaseBulletedListPlugin), - editor.getType(BaseNumberedListPlugin), editor.getType(BaseListItemContentPlugin), + editor.getType(BaseNumberedListPlugin), ...validLiChildrenTypes, ]); diff --git a/packages/list/src/lib/queries/getHighestEmptyList.ts b/packages/list/src/lib/queries/getHighestEmptyList.ts index 7ced833524..cc57a17451 100644 --- a/packages/list/src/lib/queries/getHighestEmptyList.ts +++ b/packages/list/src/lib/queries/getHighestEmptyList.ts @@ -18,8 +18,8 @@ export const getHighestEmptyList = ( diffListPath, liPath, }: { - diffListPath?: Path; liPath: Path; + diffListPath?: Path; } ): Path | undefined => { const list = getAboveNode(editor, { diff --git a/packages/list/src/lib/transforms/insertTodoListItem.ts b/packages/list/src/lib/transforms/insertTodoListItem.ts index 15326d6087..eb4facb995 100644 --- a/packages/list/src/lib/transforms/insertTodoListItem.ts +++ b/packages/list/src/lib/transforms/insertTodoListItem.ts @@ -12,7 +12,7 @@ import { } from '@udecode/plate-common'; import { Path, Range } from 'slate'; -import { BaseTodoListPlugin, type TodoListConfig } from '../BaseTodoListPlugin'; +import { type TodoListConfig, BaseTodoListPlugin } from '../BaseTodoListPlugin'; /** Insert todo list item if selection in li>p. TODO: test */ export const insertTodoListItem = ( diff --git a/packages/list/src/lib/transforms/moveListItems.ts b/packages/list/src/lib/transforms/moveListItems.ts index ab7a716b8b..314940e633 100644 --- a/packages/list/src/lib/transforms/moveListItems.ts +++ b/packages/list/src/lib/transforms/moveListItems.ts @@ -6,7 +6,7 @@ import { getParentNode, withoutNormalizing, } from '@udecode/plate-common'; -import { Path, type PathRef } from 'slate'; +import { type PathRef, Path } from 'slate'; import { BaseListItemContentPlugin } from '../BaseListPlugin'; import { isListNested } from '../queries/isListNested'; diff --git a/packages/list/src/lib/transforms/moveListItemsToList.ts b/packages/list/src/lib/transforms/moveListItemsToList.ts index fb9dd2d2d2..9c86ec0642 100644 --- a/packages/list/src/lib/transforms/moveListItemsToList.ts +++ b/packages/list/src/lib/transforms/moveListItemsToList.ts @@ -34,7 +34,7 @@ export interface MergeListItemIntoListOptions { toList?: TElementEntry; /** List position where to move the list items. */ - toListIndex?: null | number; + toListIndex?: number | null; } /** diff --git a/packages/list/src/lib/transforms/toggleList.ts b/packages/list/src/lib/transforms/toggleList.ts index 70b1e3154f..261a1df3da 100644 --- a/packages/list/src/lib/transforms/toggleList.ts +++ b/packages/list/src/lib/transforms/toggleList.ts @@ -1,7 +1,7 @@ import { - BaseParagraphPlugin, type SlateEditor, type TElement, + BaseParagraphPlugin, findNode, getBlockAbove, getCommonNode, diff --git a/packages/list/src/lib/transforms/unwrapList.ts b/packages/list/src/lib/transforms/unwrapList.ts index 3522cb77ea..814947ab83 100644 --- a/packages/list/src/lib/transforms/unwrapList.ts +++ b/packages/list/src/lib/transforms/unwrapList.ts @@ -1,8 +1,8 @@ import type { Path } from 'slate'; import { - BaseParagraphPlugin, type SlateEditor, + BaseParagraphPlugin, getAboveNode, getBlockAbove, getCommonNode, diff --git a/packages/list/src/lib/withDeleteForwardList.ts b/packages/list/src/lib/withDeleteForwardList.ts index ccb05e383b..65b298f827 100644 --- a/packages/list/src/lib/withDeleteForwardList.ts +++ b/packages/list/src/lib/withDeleteForwardList.ts @@ -15,7 +15,7 @@ import { removeNodes, withoutNormalizing, } from '@udecode/plate-common'; -import { Path, type TextUnit } from 'slate'; +import { type TextUnit, Path } from 'slate'; import type { ListConfig } from './BaseListPlugin'; diff --git a/packages/list/src/lib/withDeleteFragmentList.ts b/packages/list/src/lib/withDeleteFragmentList.ts index eb0de55e7b..a3ea547aad 100644 --- a/packages/list/src/lib/withDeleteFragmentList.ts +++ b/packages/list/src/lib/withDeleteFragmentList.ts @@ -13,7 +13,7 @@ import { withoutNormalizing, } from '@udecode/plate-common'; -import { BaseListItemPlugin, type ListConfig } from './BaseListPlugin'; +import { type ListConfig, BaseListItemPlugin } from './BaseListPlugin'; import { getHighestEmptyList } from './queries/getHighestEmptyList'; import { hasListChild } from './queries/hasListChild'; import { isAcrossListItems } from './queries/isAcrossListItems'; diff --git a/packages/list/src/lib/withInsertFragmentList.ts b/packages/list/src/lib/withInsertFragmentList.ts index 47581d5dce..fe307b5227 100644 --- a/packages/list/src/lib/withInsertFragmentList.ts +++ b/packages/list/src/lib/withInsertFragmentList.ts @@ -20,9 +20,9 @@ import { import { Path } from 'slate'; import { + type ListConfig, BaseListItemContentPlugin, BaseListItemPlugin, - type ListConfig, } from './BaseListPlugin'; import { isListRoot } from './queries'; diff --git a/packages/list/src/lib/withNormalizeList.ts b/packages/list/src/lib/withNormalizeList.ts index a42dcd04ac..5ee43bf0f4 100644 --- a/packages/list/src/lib/withNormalizeList.ts +++ b/packages/list/src/lib/withNormalizeList.ts @@ -1,7 +1,7 @@ import { - BaseParagraphPlugin, type ExtendEditor, type TElement, + BaseParagraphPlugin, getChildren, getNode, getParentNode, @@ -15,9 +15,9 @@ import { import { Path } from 'slate'; import { + type ListConfig, BaseListItemContentPlugin, BaseListItemPlugin, - type ListConfig, } from './BaseListPlugin'; import { normalizeListItem } from './normalizers/normalizeListItem'; import { normalizeNestedList } from './normalizers/normalizeNestedList'; diff --git a/packages/list/src/react/ListPlugin.tsx b/packages/list/src/react/ListPlugin.tsx index 3be4199bb4..f9e6cbf9c4 100644 --- a/packages/list/src/react/ListPlugin.tsx +++ b/packages/list/src/react/ListPlugin.tsx @@ -43,18 +43,18 @@ export const ListPlugin = toPlatePlugin(BaseListPlugin, { }).extend(({ editor }) => ({ shortcuts: { toggleBulletedList: { + keys: [[Key.Mod, Key.Alt, '5']], + preventDefault: true, handler: () => { editor.getTransforms(ListPlugin).toggle.bulletedList(); }, - keys: [[Key.Mod, Key.Alt, '5']], - preventDefault: true, }, toggleNumberedList: { + keys: [[Key.Mod, Key.Alt, '6']], + preventDefault: true, handler: () => { editor.getTransforms(ListPlugin).toggle.numberedList(); }, - keys: [[Key.Mod, Key.Alt, '6']], - preventDefault: true, }, }, })); diff --git a/packages/list/src/react/TodoListPlugin.tsx b/packages/list/src/react/TodoListPlugin.tsx index 8398e4a8c5..af5c953388 100644 --- a/packages/list/src/react/TodoListPlugin.tsx +++ b/packages/list/src/react/TodoListPlugin.tsx @@ -8,14 +8,14 @@ export const TodoListPlugin = toTPlatePlugin( ({ editor, type }) => ({ shortcuts: { toggleTodoList: { - handler: () => { - editor.tf.toggle.block({ type }); - }, keys: [ [Key.Mod, Key.Alt, '4'], [Key.Mod, Key.Shift, '4'], ], preventDefault: true, + handler: () => { + editor.tf.toggle.block({ type }); + }, }, }, }) diff --git a/packages/list/src/react/hooks/useListToolbarButton.ts b/packages/list/src/react/hooks/useListToolbarButton.ts index 011327f47a..146d7b34a3 100644 --- a/packages/list/src/react/hooks/useListToolbarButton.ts +++ b/packages/list/src/react/hooks/useListToolbarButton.ts @@ -28,13 +28,13 @@ export const useListToolbarButton = ( return { props: { + pressed: state.pressed, onClick: () => { tf.toggle.list({ type: state.nodeType }); }, onMouseDown: (e: React.MouseEvent) => { e.preventDefault(); }, - pressed: state.pressed, }, }; }; diff --git a/packages/list/src/react/onKeyDownList.ts b/packages/list/src/react/onKeyDownList.ts index fa66598126..4cfe65f2ca 100644 --- a/packages/list/src/react/onKeyDownList.ts +++ b/packages/list/src/react/onKeyDownList.ts @@ -9,7 +9,7 @@ import { import { Hotkeys } from '@udecode/plate-common/react'; import { Range } from 'slate'; -import { BaseListItemPlugin, type ListConfig } from '../lib'; +import { type ListConfig, BaseListItemPlugin } from '../lib'; import { moveListItems } from '../lib/transforms/index'; export const onKeyDownList: KeyboardHandler = ({ diff --git a/packages/list/src/react/withDeleteBackwardList.ts b/packages/list/src/react/withDeleteBackwardList.ts index dfa9396bdd..1b4deabe3f 100644 --- a/packages/list/src/react/withDeleteBackwardList.ts +++ b/packages/list/src/react/withDeleteBackwardList.ts @@ -1,7 +1,7 @@ import { - BaseParagraphPlugin, type TElement, type TNodeEntry, + BaseParagraphPlugin, deleteMerge, getNodeEntries, getNodeEntry, @@ -71,9 +71,9 @@ export const withDeleteBackwardList: ExtendEditor = ({ { defaultType: editor.getType(BaseParagraphPlugin), hotkey: 'backspace', - onReset: (e) => unwrapList(e), predicate: () => isSelectionAtBlockStart(editor), types: [editor.getType(BaseListItemPlugin)], + onReset: (e) => unwrapList(e), }, ], }, diff --git a/packages/list/src/react/withInsertBreakList.ts b/packages/list/src/react/withInsertBreakList.ts index 886e22383b..9690a84aef 100644 --- a/packages/list/src/react/withInsertBreakList.ts +++ b/packages/list/src/react/withInsertBreakList.ts @@ -14,7 +14,7 @@ import { onKeyDownResetNode, } from '@udecode/plate-reset-node/react'; -import { BaseListItemPlugin, type ListConfig } from '../lib/BaseListPlugin'; +import { type ListConfig, BaseListItemPlugin } from '../lib/BaseListPlugin'; import { getListItemEntry } from '../lib/queries/getListItemEntry'; import { insertListItem } from '../lib/transforms/insertListItem'; import { moveListItemUp } from '../lib/transforms/moveListItemUp'; @@ -53,9 +53,9 @@ export const withInsertBreakList: ExtendEditor = ({ editor }) => { rules: [ { defaultType: editor.getType(BaseParagraphPlugin), - onReset: (_editor) => unwrapList(_editor), predicate: () => !moved && isBlockAboveEmpty(editor), types: [editor.getType(BaseListItemPlugin)], + onReset: (_editor) => unwrapList(_editor), }, ], }, diff --git a/packages/markdown/src/lib/deserializer/utils/deserializeMd.ts b/packages/markdown/src/lib/deserializer/utils/deserializeMd.ts index 03434b47e0..1ac66c9eb8 100644 --- a/packages/markdown/src/lib/deserializer/utils/deserializeMd.ts +++ b/packages/markdown/src/lib/deserializer/utils/deserializeMd.ts @@ -1,7 +1,7 @@ import type { SlateEditor } from '@udecode/plate-common'; import markdown from 'remark-parse'; -import {unified} from 'unified'; +import { unified } from 'unified'; import { MarkdownPlugin } from '../../MarkdownPlugin'; import { diff --git a/packages/markdown/src/lib/remark-slate/types.ts b/packages/markdown/src/lib/remark-slate/types.ts index c3add8f659..243bfcb729 100644 --- a/packages/markdown/src/lib/remark-slate/types.ts +++ b/packages/markdown/src/lib/remark-slate/types.ts @@ -61,6 +61,6 @@ export type RemarkTextRules = { export type RemarkPluginOptions = { editor: SlateEditor; elementRules: RemarkElementRules; - indentList?: boolean; textRules: RemarkTextRules; + indentList?: boolean; }; diff --git a/packages/markdown/src/lib/serializer/serializeMdNode.ts b/packages/markdown/src/lib/serializer/serializeMdNode.ts index 131cc4f74c..5027c14804 100644 --- a/packages/markdown/src/lib/serializer/serializeMdNode.ts +++ b/packages/markdown/src/lib/serializer/serializeMdNode.ts @@ -13,10 +13,20 @@ type MarkFormats = Record< | 'italic' | 'strikethrough' | 'underline', - null | string | string[] + string[] | string | null >; export type SerializeMdNodeOptions = { + /** The type of the node. */ + type: string; + + /** Serialize node to markdown. */ + serialize?: ( + children: string, + node: MdNodeType, + opts: SerializeMdOptions + ) => string; + /** * Whether the node is enabled. If false, the node will be considered as * paragraph. @@ -31,18 +41,8 @@ export type SerializeMdNodeOptions = { */ isVoid?: boolean; - /** Serialize node to markdown. */ - serialize?: ( - children: string, - node: MdNodeType, - opts: SerializeMdOptions - ) => string; - /** Whether the node should be skipped (serialized to empty string). */ skip?: boolean; - - /** The type of the node. */ - type: string; }; export interface SerializeMdOptions { @@ -284,7 +284,7 @@ export function serializeMdNode( // bring the whitespace back. So our returned string looks like this: " **foo** " export function retainWhitespaceAndFormat( string: string, - format: string | string[] + format: string[] | string ) { const formats = Array.isArray(format) ? format : [format]; const start = formats[0]; diff --git a/packages/markdown/src/lib/serializer/serializeMdNodes.ts b/packages/markdown/src/lib/serializer/serializeMdNodes.ts index 2423faa35b..cebb6763e1 100644 --- a/packages/markdown/src/lib/serializer/serializeMdNodes.ts +++ b/packages/markdown/src/lib/serializer/serializeMdNodes.ts @@ -16,10 +16,10 @@ export const serializeMdNodes = ( nodes: TDescendant[], options: Partial< { - customNodes?: Partial>>; nodes?: Partial< Record> >; + customNodes?: Partial>>; } & Omit > = {} ) => { diff --git a/packages/markdown/src/lib/serializer/types.ts b/packages/markdown/src/lib/serializer/types.ts index f51eb35db5..66a3c71b9b 100644 --- a/packages/markdown/src/lib/serializer/types.ts +++ b/packages/markdown/src/lib/serializer/types.ts @@ -23,10 +23,10 @@ export type MdNodeTypes = { type NodeType = { parent?: { + type: string; index?: number; isList?: boolean; length?: number; - type: string; }; }; diff --git a/packages/math/src/react/equation/components/EquationInput.ts b/packages/math/src/react/equation/components/EquationInput.ts index 36fd1533bf..eb98559a42 100644 --- a/packages/math/src/react/equation/components/EquationInput.ts +++ b/packages/math/src/react/equation/components/EquationInput.ts @@ -30,6 +30,8 @@ export const useEquationInput = ({ return { props: { + ref: inputRef, + value: element.texExpression, onChange: (e: React.ChangeEvent) => { setNodes(editor, { texExpression: e.target.value, @@ -47,8 +49,6 @@ export const useEquationInput = ({ onMouseEnter: () => { inputRef.current?.focus(); }, - ref: inputRef, - value: element.texExpression, }, }; }; diff --git a/packages/math/src/react/inline-equation/components/InlineEquationInput.ts b/packages/math/src/react/inline-equation/components/InlineEquationInput.ts index 68a8cb8306..5082525062 100644 --- a/packages/math/src/react/inline-equation/components/InlineEquationInput.ts +++ b/packages/math/src/react/inline-equation/components/InlineEquationInput.ts @@ -22,7 +22,7 @@ export const useInlineEquationInputState = ({ const inputRef = React.useRef(null); // if user press escape revert - const [originExpression, setOriginExpressin] = React.useState( + const [originExpression, setOriginExpressin] = React.useState( null ); @@ -64,6 +64,8 @@ export const useInlineEquationInput = ({ return { props: { + ref: inputRef, + value: element.texExpression, onChange: (e: React.ChangeEvent) => { setNodes( editor, @@ -113,8 +115,6 @@ export const useInlineEquationInput = ({ setSelectionInlineEquation(editor, inlineEquationPath, 'right'); } }, - ref: inputRef, - value: element.texExpression, }, }; }; diff --git a/packages/media/src/lib/image/BaseImagePlugin.ts b/packages/media/src/lib/image/BaseImagePlugin.ts index ec2a8df9eb..88ee2cf691 100644 --- a/packages/media/src/lib/image/BaseImagePlugin.ts +++ b/packages/media/src/lib/image/BaseImagePlugin.ts @@ -9,12 +9,6 @@ export interface TImageElement extends TMediaElement {} export type ImageConfig = PluginConfig< 'img', { - /** Disable url embed on insert data. */ - disableEmbedInsert?: boolean; - - /** Disable file upload on insert data. */ - disableUploadInsert?: boolean; - /** * An optional method that will upload the image to a server. The method * receives the base64 dataUrl of the uploaded image, and should return the @@ -23,13 +17,19 @@ export type ImageConfig = PluginConfig< uploadImage?: ( dataUrl: ArrayBuffer | string ) => ArrayBuffer | Promise | string; + + /** Disable url embed on insert data. */ + disableEmbedInsert?: boolean; + + /** Disable file upload on insert data. */ + disableUploadInsert?: boolean; } & MediaPluginOptions >; /** Enables support for images. */ export const BaseImagePlugin = createTSlatePlugin({ - extendEditor: withImage, key: 'img', + extendEditor: withImage, node: { isElement: true, isVoid: true }, }).extend(({ plugin }) => ({ parsers: { diff --git a/packages/media/src/lib/image/transforms/insertImage.ts b/packages/media/src/lib/image/transforms/insertImage.ts index 1677a9cdbc..afd56e3d68 100644 --- a/packages/media/src/lib/image/transforms/insertImage.ts +++ b/packages/media/src/lib/image/transforms/insertImage.ts @@ -4,7 +4,7 @@ import { insertNodes, } from '@udecode/plate-common'; -import { BaseImagePlugin, type TImageElement } from '../BaseImagePlugin'; +import { type TImageElement, BaseImagePlugin } from '../BaseImagePlugin'; export const insertImage = ( editor: E, diff --git a/packages/media/src/lib/image/utils/isImageUrl.ts b/packages/media/src/lib/image/utils/isImageUrl.ts index bddfd4de62..03333e80fd 100644 --- a/packages/media/src/lib/image/utils/isImageUrl.ts +++ b/packages/media/src/lib/image/utils/isImageUrl.ts @@ -1,126 +1,126 @@ import { isUrl } from '@udecode/plate-common'; const imageExtensions = new Set([ - 'ase', + '3dv', + 'PI1', + 'PI2', + 'PI3', + 'ai', + 'amf', 'art', - 'bmp', + 'art', + 'ase', + 'awg', 'blp', + 'bmp', + 'bw', + 'bw', 'cd5', + 'cdr', + 'cgm', 'cit', + 'cmx', 'cpt', 'cr2', + 'cur', 'cut', 'dds', 'dib', 'djvu', + 'dxf', + 'e2d', + 'ecw', + 'egt', 'egt', + 'emf', + 'eps', 'exif', + 'fs', + 'gbr', 'gif', 'gpl', 'grf', + 'hdp', 'icns', 'ico', 'iff', + 'iff', + 'int', + 'int', + 'inta', + 'jfif', 'jng', + 'jp2', 'jpeg', 'jpg', - 'jfif', - 'jp2', 'jps', + 'jxr', + 'lbm', 'lbm', + 'liff', 'max', 'miff', 'mng', 'msp', 'nitf', + 'nrrd', + 'odg', 'ota', + 'pam', 'pbm', 'pc1', 'pc2', 'pc3', 'pcf', + 'pct', + 'pcx', 'pcx', + 'pdd', 'pdn', + 'pgf', 'pgm', - 'PI1', - 'PI2', - 'PI3', 'pict', - 'pct', + 'png', 'pnm', 'pns', 'ppm', 'psb', 'psd', - 'pdd', 'psp', 'px', 'pxm', 'pxr', 'qfx', + 'ras', 'raw', + 'rgb', + 'rgb', + 'rgba', 'rle', 'sct', 'sgi', - 'rgb', - 'int', - 'bw', - 'tga', - 'tiff', - 'tif', - 'vtf', - 'xbm', - 'xcf', - 'xpm', - '3dv', - 'amf', - 'ai', - 'awg', - 'cgm', - 'cdr', - 'cmx', - 'dxf', - 'e2d', - 'egt', - 'eps', - 'fs', - 'gbr', - 'odg', - 'svg', + 'sgi', + 'sid', 'stl', - 'vrml', - 'x3d', + 'sun', + 'svg', 'sxd', + 'tga', + 'tga', + 'tif', + 'tiff', 'v2d', 'vnd', + 'vrml', + 'vtf', + 'wdp', + 'webp', 'wmf', - 'emf', - 'art', + 'x3d', 'xar', - 'png', - 'webp', - 'jxr', - 'hdp', - 'wdp', - 'cur', - 'ecw', - 'iff', - 'lbm', - 'liff', - 'nrrd', - 'pam', - 'pcx', - 'pgf', - 'sgi', - 'rgb', - 'rgba', - 'bw', - 'int', - 'inta', - 'sid', - 'ras', - 'sun', - 'tga', + 'xbm', + 'xcf', + 'xpm', ]); export const isImageUrl = (url: string) => { diff --git a/packages/media/src/lib/media-embed/parseIframeUrl.ts b/packages/media/src/lib/media-embed/parseIframeUrl.ts index 66aaaf3271..cc177908ec 100644 --- a/packages/media/src/lib/media-embed/parseIframeUrl.ts +++ b/packages/media/src/lib/media-embed/parseIframeUrl.ts @@ -4,7 +4,7 @@ export const parseIframeUrl = (url: string) => { const regexMatchSrc = /src=".*?"/; const regexGroupQuotes = /"([^"]*)"/; - const src = url.match(regexMatchSrc)?.[0]; + const src = regexMatchSrc.exec(url)?.[0]; const returnString = src?.match(regexGroupQuotes)?.[1]; if (returnString) { diff --git a/packages/media/src/lib/media-embed/transforms/insertMediaEmbed.ts b/packages/media/src/lib/media-embed/transforms/insertMediaEmbed.ts index 43ab1efa9f..dcaa09b77b 100644 --- a/packages/media/src/lib/media-embed/transforms/insertMediaEmbed.ts +++ b/packages/media/src/lib/media-embed/transforms/insertMediaEmbed.ts @@ -6,8 +6,8 @@ import { } from '@udecode/plate-common'; import { - BaseMediaEmbedPlugin, type TMediaEmbedElement, + BaseMediaEmbedPlugin, } from '../BaseMediaEmbedPlugin'; export const insertMediaEmbed = ( diff --git a/packages/media/src/lib/media/parseMediaUrl.ts b/packages/media/src/lib/media/parseMediaUrl.ts index a861a92e99..74fb96ec8b 100644 --- a/packages/media/src/lib/media/parseMediaUrl.ts +++ b/packages/media/src/lib/media/parseMediaUrl.ts @@ -7,7 +7,7 @@ export type EmbedUrlData = { export type EmbedUrlParser = (url: string) => EmbedUrlData | undefined; // Unlike the link plugin, there's no legitimate reason for non-HTTP source URLs -const allowedProtocols = new Set(['https:', 'http:']); +const allowedProtocols = new Set(['http:', 'https:']); export const parseMediaUrl = ( url: string, diff --git a/packages/media/src/lib/media/types.ts b/packages/media/src/lib/media/types.ts index ba66c6fd0b..53fc5b6956 100644 --- a/packages/media/src/lib/media/types.ts +++ b/packages/media/src/lib/media/types.ts @@ -2,8 +2,8 @@ import type { TElement } from '@udecode/plate-common'; export interface TMediaElement extends TElement { url: string; - align?: 'center' | 'left' | 'right'; id?: string; + align?: 'center' | 'left' | 'right'; isUpload?: boolean; name?: string; } diff --git a/packages/media/src/lib/placeholder/transforms/setMediaNode.ts b/packages/media/src/lib/placeholder/transforms/setMediaNode.ts index 4d848b1d38..d5153681b8 100644 --- a/packages/media/src/lib/placeholder/transforms/setMediaNode.ts +++ b/packages/media/src/lib/placeholder/transforms/setMediaNode.ts @@ -5,10 +5,10 @@ import { } from '@udecode/plate-common'; type props = { - isUpload?: boolean; - name?: string; type: string; url: string; + isUpload?: boolean; + name?: string; width?: number; }; diff --git a/packages/media/src/react/image/ImagePreviewStore.ts b/packages/media/src/react/image/ImagePreviewStore.ts index 585d86855e..e36235f977 100644 --- a/packages/media/src/react/image/ImagePreviewStore.ts +++ b/packages/media/src/react/image/ImagePreviewStore.ts @@ -9,7 +9,7 @@ export const ImagePreviewStore = createZustandStore('imagePreview')({ boundingClientRect: {} as DOMRect, currentPreview: null as PreviewItem | null, isEditingScale: false, - openEditorId: null as null | string, + openEditorId: null as string | null, previewList: [] as PreviewItem[], scale: 1 as number, translate: { x: 0, y: 0 }, diff --git a/packages/media/src/react/image/components/Image.tsx b/packages/media/src/react/image/components/Image.tsx index 497493cabd..b12dfac670 100644 --- a/packages/media/src/react/image/components/Image.tsx +++ b/packages/media/src/react/image/components/Image.tsx @@ -15,10 +15,10 @@ export const useImage = () => { return { props: { draggable: true, + src: element.url, onDoubleClickCapture: () => { openImagePreview(editor, element); }, - src: element.url, }, }; }; diff --git a/packages/media/src/react/image/components/PreviewImage.tsx b/packages/media/src/react/image/components/PreviewImage.tsx index 6af0eadaaf..4bbc1c3891 100644 --- a/packages/media/src/react/image/components/PreviewImage.tsx +++ b/packages/media/src/react/image/components/PreviewImage.tsx @@ -50,16 +50,16 @@ export const usePreviewImage = ({ return { props: { draggable: false, - onClick: (e: React.MouseEvent) => { - e.stopPropagation(); - isZoomIn ? zoomIn() : zoomOut(); - }, ref: imageRef, src: currentPreview?.url, style: { cursor: isZoomIn ? 'zoom-in' : 'zoom-out', transform: `scale(${scale}) translate(${translate.x + 'px'}, ${translate.y + 'px'})`, }, + onClick: (e: React.MouseEvent) => { + e.stopPropagation(); + isZoomIn ? zoomIn() : zoomOut(); + }, }, }; }; diff --git a/packages/media/src/react/image/components/ScaleInput.tsx b/packages/media/src/react/image/components/ScaleInput.tsx index 3b67338c3d..7f0126eec9 100644 --- a/packages/media/src/react/image/components/ScaleInput.tsx +++ b/packages/media/src/react/image/components/ScaleInput.tsx @@ -47,6 +47,7 @@ export const useScaleInput = ({ return { props: { + value: value, onChange: (e: React.ChangeEvent) => { setValue(e.target.value); }, @@ -69,7 +70,6 @@ export const useScaleInput = ({ setIsEditingScale(false); } }, - value: value, }, ref: inputRef, }; diff --git a/packages/media/src/react/media/useMediaController.ts b/packages/media/src/react/media/useMediaController.ts index 8de0f34894..df4b1b3196 100644 --- a/packages/media/src/react/media/useMediaController.ts +++ b/packages/media/src/react/media/useMediaController.ts @@ -21,8 +21,8 @@ export const useMediaController = ({ export const useMediaControllerDropDownMenu = (props: { openState: { - onOpenChange: (_value?: boolean) => void; open: boolean; + onOpenChange: (_value?: boolean) => void; }; setAlignOpen: React.Dispatch>; }) => { diff --git a/packages/media/src/react/media/useMediaState.ts b/packages/media/src/react/media/useMediaState.ts index e40b26cc48..78c398c97a 100644 --- a/packages/media/src/react/media/useMediaState.ts +++ b/packages/media/src/react/media/useMediaState.ts @@ -23,7 +23,7 @@ export const useMediaState = ({ const selected = useSelected(); const readOnly = useReadOnly(); - const { align, id, isUpload, name, type, url } = element; + const { id, align, isUpload, name, type, url } = element; const embed = React.useMemo(() => { if ( @@ -42,10 +42,10 @@ export const useMediaState = ({ const isYoutube = embed?.provider === 'youtube'; return { + id, align, embed, focused, - id, isTweet, isUpload, isVideo, diff --git a/packages/media/src/react/placeholder/usePlaceholderPopover.ts b/packages/media/src/react/placeholder/usePlaceholderPopover.ts index 2652ba4861..4905045ebc 100644 --- a/packages/media/src/react/placeholder/usePlaceholderPopover.ts +++ b/packages/media/src/react/placeholder/usePlaceholderPopover.ts @@ -31,10 +31,10 @@ export const usePlaceholderPopoverState = () => { const setUpdatedFiles = usePlaceholderStore().set.updatedFiles(); return { + id, editor, element, focused, - id, mediaType, readOnly, selected, diff --git a/packages/mention/src/lib/BaseMentionPlugin.ts b/packages/mention/src/lib/BaseMentionPlugin.ts index 595db5c4e4..c89e93a662 100644 --- a/packages/mention/src/lib/BaseMentionPlugin.ts +++ b/packages/mention/src/lib/BaseMentionPlugin.ts @@ -30,8 +30,8 @@ export const BaseMentionInputPlugin = createSlatePlugin({ /** Enables support for autocompleting @mentions. */ export const BaseMentionPlugin = createSlatePlugin({ - extendEditor: withTriggerCombobox, key: 'mention', + extendEditor: withTriggerCombobox, node: { isElement: true, isInline: true, isMarkableVoid: true, isVoid: true }, options: { createComboboxInput: (trigger) => ({ diff --git a/packages/mention/src/lib/getMentionOnSelectItem.ts b/packages/mention/src/lib/getMentionOnSelectItem.ts index 450d58efee..a3de2664c8 100644 --- a/packages/mention/src/lib/getMentionOnSelectItem.ts +++ b/packages/mention/src/lib/getMentionOnSelectItem.ts @@ -9,7 +9,7 @@ import { import type { TMentionItemBase } from './types'; -import { BaseMentionPlugin, type MentionConfig } from './BaseMentionPlugin'; +import { type MentionConfig, BaseMentionPlugin } from './BaseMentionPlugin'; export type MentionOnSelectItem< TItem extends TMentionItemBase = TMentionItemBase, diff --git a/packages/node-id/src/lib/NodeIdPlugin.ts b/packages/node-id/src/lib/NodeIdPlugin.ts index ee27166faf..2882c36106 100644 --- a/packages/node-id/src/lib/NodeIdPlugin.ts +++ b/packages/node-id/src/lib/NodeIdPlugin.ts @@ -28,7 +28,7 @@ export type NodeIdConfig = PluginConfig< * * @default () => Date.now() */ - idCreator?: Function; + idCreator?: () => any; /** * Node key to store the id. @@ -49,8 +49,8 @@ export type NodeIdConfig = PluginConfig< /** @see {@link withNodeId} */ export const NodeIdPlugin = createTSlatePlugin({ - extendEditor: withNodeId, key: 'nodeId', + extendEditor: withNodeId, options: { filter: () => true, filterText: true, diff --git a/packages/normalizers/src/__tests__/withNormalizeType/invalid-path.spec.tsx b/packages/normalizers/src/__tests__/withNormalizeType/invalid-path.spec.tsx index 98a496112d..cabc366e55 100644 --- a/packages/normalizers/src/__tests__/withNormalizeType/invalid-path.spec.tsx +++ b/packages/normalizers/src/__tests__/withNormalizeType/invalid-path.spec.tsx @@ -1,7 +1,7 @@ /** @jsx jsx */ -import { ParagraphPlugin } from '@udecode/plate-common/react'; import { createSlateEditor } from '@udecode/plate-common'; +import { ParagraphPlugin } from '@udecode/plate-common/react'; import { HEADING_KEYS } from '@udecode/plate-heading'; import { jsx } from '@udecode/plate-test-utils'; diff --git a/packages/normalizers/src/__tests__/withNormalizeType/nested.spec.tsx b/packages/normalizers/src/__tests__/withNormalizeType/nested.spec.tsx index 20b251c775..1f18f232ff 100644 --- a/packages/normalizers/src/__tests__/withNormalizeType/nested.spec.tsx +++ b/packages/normalizers/src/__tests__/withNormalizeType/nested.spec.tsx @@ -1,7 +1,7 @@ /** @jsx jsx */ -import { ParagraphPlugin } from '@udecode/plate-common/react'; import { createSlateEditor } from '@udecode/plate-common'; +import { ParagraphPlugin } from '@udecode/plate-common/react'; import { HEADING_KEYS } from '@udecode/plate-heading'; import { jsx } from '@udecode/plate-test-utils'; diff --git a/packages/normalizers/src/lib/NormalizeTypesPlugin.ts b/packages/normalizers/src/lib/NormalizeTypesPlugin.ts index c98cf6539e..6b6bb91e54 100644 --- a/packages/normalizers/src/lib/NormalizeTypesPlugin.ts +++ b/packages/normalizers/src/lib/NormalizeTypesPlugin.ts @@ -33,8 +33,8 @@ export type NormalizeTypesConfig = PluginConfig< /** @see {@link withNormalizeTypes} */ export const NormalizeTypesPlugin = createTSlatePlugin({ - extendEditor: withNormalizeTypes, key: 'normalizeTypes', + extendEditor: withNormalizeTypes, options: { rules: [], }, diff --git a/packages/normalizers/src/lib/RemoveEmptyNodesPlugin.ts b/packages/normalizers/src/lib/RemoveEmptyNodesPlugin.ts index ff2ee7e4a7..fc8bba820b 100644 --- a/packages/normalizers/src/lib/RemoveEmptyNodesPlugin.ts +++ b/packages/normalizers/src/lib/RemoveEmptyNodesPlugin.ts @@ -5,13 +5,13 @@ import { withRemoveEmptyNodes } from './withRemoveEmptyNodes'; export type RemoveEmptyNodesConfig = PluginConfig< 'removeEmptyNodes', { - types?: string | string[]; + types?: string[] | string; } >; /** @see {@link withRemoveEmptyNodes} */ export const RemoveEmptyNodesPlugin = createTSlatePlugin({ - extendEditor: withRemoveEmptyNodes, key: 'removeEmptyNodes', + extendEditor: withRemoveEmptyNodes, }); diff --git a/packages/normalizers/src/lib/withNormalizeTypes.ts b/packages/normalizers/src/lib/withNormalizeTypes.ts index 8da1d4c287..97d38dc144 100644 --- a/packages/normalizers/src/lib/withNormalizeTypes.ts +++ b/packages/normalizers/src/lib/withNormalizeTypes.ts @@ -16,7 +16,7 @@ export const withNormalizeTypes: ExtendEditor = ({ const { normalizeNode } = editor; editor.normalizeNode = ([currentNode, currentPath]) => { - const { onError, rules } = getOptions(); + const { rules, onError } = getOptions(); if (currentPath.length === 0) { const endCurrentNormalizationPass = rules!.some( diff --git a/packages/plate-utils/src/lib/isType.ts b/packages/plate-utils/src/lib/isType.ts index 066c760a47..b09eb72fc9 100644 --- a/packages/plate-utils/src/lib/isType.ts +++ b/packages/plate-utils/src/lib/isType.ts @@ -6,7 +6,7 @@ import castArray from 'lodash/castArray.js'; export const isType = ( editor: SlateEditor, node: any, - key?: string | string[] + key?: string[] | string ) => { const keys = castArray(key); const types: string[] = []; diff --git a/packages/plate-utils/src/react/PlateElement.tsx b/packages/plate-utils/src/react/PlateElement.tsx index fec00d6fc8..9febad88b2 100644 --- a/packages/plate-utils/src/react/PlateElement.tsx +++ b/packages/plate-utils/src/react/PlateElement.tsx @@ -7,7 +7,7 @@ import { type PlateRenderElementProps, omitPluginContext, } from '@udecode/plate-core/react'; -import { Box, type BoxProps, useComposedRef } from '@udecode/react-utils'; +import { type BoxProps, Box, useComposedRef } from '@udecode/react-utils'; import { clsx } from 'clsx'; export type PlateElementProps< diff --git a/packages/plate-utils/src/react/PlateLeaf.tsx b/packages/plate-utils/src/react/PlateLeaf.tsx index 269e8cc032..223a67a8bf 100644 --- a/packages/plate-utils/src/react/PlateLeaf.tsx +++ b/packages/plate-utils/src/react/PlateLeaf.tsx @@ -7,7 +7,7 @@ import { type PlateRenderLeafProps, omitPluginContext, } from '@udecode/plate-core/react'; -import { Text, type TextProps, useComposedRef } from '@udecode/react-utils'; +import { type TextProps, Text, useComposedRef } from '@udecode/react-utils'; import { clsx } from 'clsx'; export type PlateLeafProps< diff --git a/packages/plate-utils/src/react/createNodesHOC.tsx b/packages/plate-utils/src/react/createNodesHOC.tsx index 146404c012..55abb98cb0 100644 --- a/packages/plate-utils/src/react/createNodesHOC.tsx +++ b/packages/plate-utils/src/react/createNodesHOC.tsx @@ -25,7 +25,7 @@ const createHOC = (withHOC: any) => { const optionsList = castArray>(options); optionsList.forEach(({ key, keys, ...opt }) => { - const _keys: string[] = key ? [key] : keys ?? Object.keys(_components); + const _keys: string[] = key ? [key] : (keys ?? Object.keys(_components)); _keys.forEach((_key) => { optionsByKey[_key] = merge(optionsByKey[_key], opt); diff --git a/packages/plate-utils/src/react/useMarkToolbarButton.ts b/packages/plate-utils/src/react/useMarkToolbarButton.ts index 9ef9358187..af345c0eed 100644 --- a/packages/plate-utils/src/react/useMarkToolbarButton.ts +++ b/packages/plate-utils/src/react/useMarkToolbarButton.ts @@ -5,8 +5,8 @@ export const useMarkToolbarButtonState = ({ clear, nodeType, }: { - clear?: string | string[]; nodeType: string; + clear?: string[] | string; }) => { const pressed = useEditorSelector( (editor) => isMarkActive(editor, nodeType), @@ -27,13 +27,13 @@ export const useMarkToolbarButton = ( return { props: { + pressed: state.pressed, onClick: () => { - editor.tf.toggle.mark({ clear: state.clear, key: state.nodeType }); + editor.tf.toggle.mark({ key: state.nodeType, clear: state.clear }); }, onMouseDown: (e: React.MouseEvent) => { e.preventDefault(); }, - pressed: state.pressed, }, }; }; diff --git a/packages/react-hotkeys/src/__tests__/useHotkeys.test.tsx b/packages/react-hotkeys/src/__tests__/useHotkeys.test.tsx index 05b603d724..f39e211afb 100644 --- a/packages/react-hotkeys/src/__tests__/useHotkeys.test.tsx +++ b/packages/react-hotkeys/src/__tests__/useHotkeys.test.tsx @@ -38,9 +38,9 @@ const wrapper = ); type HookParameters = { + keys: Keys; callback?: HotkeyCallback; dependencies?: DependencyList; - keys: Keys; options?: Options; }; @@ -609,7 +609,7 @@ it("should ignore event when ignoreEventWhen's condition matches", async () => { }) => { useHotkeys('a', cb, { ignoreEventWhen }); - return