Skip to content

Commit

Permalink
docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@felixfeng33
felixfeng33 committed Sep 29, 2024
1 parent 08dd0c6 commit 582152d
Show file tree
Hide file tree
Showing 3 changed files with 6 additions and 3 deletions.
5 changes: 4 additions & 1 deletion apps/www/content/docs/copilot.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,10 @@ const copilotState = editor.getOptions(CopilotPlugin).copilotState;



## Conflict with Tabbable Plugin
## Conflict with Other Plugins


### Conflict with Tabbable Plugin

When using both the [Tabbable Plugin](https://platejs.org/docs/tabbable) and the Copilot feature in your editor, you may encounter conflicts with the `Tab` key functionality. This is because both features utilize the same key binding.

Expand Down
2 changes: 1 addition & 1 deletion apps/www/public/r/styles/default/cursor-overlay.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 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<CursorData>) {\n const { style, selectionStyle = style } = data ?? ({} as CursorData);\n\n return (\n <>\n {!disableSelection &&\n selectionRects.map((position, i) => (\n <div\n key={i}\n className={cn(\n 'pointer-events-none absolute z-10 opacity-30',\n classNames?.selectionRect\n )}\n style={{\n ...selectionStyle,\n ...position,\n }}\n />\n ))}\n {!disableCaret && caretPosition && (\n <div\n className={cn(\n 'pointer-events-none absolute z-10 w-0.5',\n classNames?.caret\n )}\n style={{ ...caretPosition, ...style }}\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 <CursorOverlayPrimitive\n {...props}\n onRenderCursor={Cursor}\n cursors={allCursors}\n />\n );\n}\n\nconst DragOverCursorPlugin = createPlatePlugin({\n key: 'dragOverCursor',\n options: { cursors: {} as Record<string, CursorState<CursorData>> },\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",
"content": "import React, { useEffect } from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n createPlatePlugin,\n findEventRange,\n useEditorPlugin,\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';\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\n\nexport function Cursor({\n caretPosition,\n classNames,\n data,\n disableCaret,\n disableSelection,\n selectionRects,\n}: CursorProps<CursorData>) {\n const { style, selectionStyle = style } = data ?? ({} as CursorData);\n\n return (\n <>\n {!disableSelection &&\n selectionRects.map((position, i) => (\n <div\n key={i}\n className={cn(\n 'pointer-events-none absolute z-10 opacity-30',\n classNames?.selectionRect\n )}\n style={{\n ...selectionStyle,\n ...position,\n }}\n />\n ))}\n {!disableCaret && caretPosition && (\n <div\n className={cn(\n 'pointer-events-none absolute z-10 w-0.5',\n classNames?.caret\n )}\n style={{ ...caretPosition, ...style }}\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 <CursorOverlayPrimitive\n {...props}\n onRenderCursor={Cursor}\n cursors={allCursors}\n />\n );\n}\n\nconst DragOverCursorPlugin = createPlatePlugin({\n key: 'dragOverCursor',\n options: { cursors: {} as Record<string, CursorState<CursorData>> },\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\nexport const SelectionOverlayPlugin = createPlatePlugin({\n key: 'selection_over_lay',\n useHooks: () => {\n const { editor } = useEditorPlugin(BlockSelectionPlugin);\n const isSelecting = editor.useOptions(BlockSelectionPlugin).isSelecting;\n\n useEffect(() => {\n if (isSelecting) {\n setTimeout(() => {\n editor.setOption(DragOverCursorPlugin, 'cursors', {});\n }, 0);\n }\n }, [editor, isSelecting]);\n },\n handlers: {\n onBlur: ({ editor, event }) => {\n const isPrevented =\n (event.relatedTarget as HTMLElement)?.dataset?.platePreventOverlay ===\n 'true';\n\n if (isPrevented) return;\n if (editor.selection) {\n editor.setOption(DragOverCursorPlugin, 'cursors', {\n drag: {\n key: 'blur',\n data: {\n selectionStyle: {\n backgroundColor: 'rgba(47, 121, 216, 0.35)',\n },\n },\n selection: editor.selection,\n },\n });\n }\n },\n onFocus: ({ editor }) => {\n editor.setOption(DragOverCursorPlugin, 'cursors', {});\n },\n },\n});\n",
"path": "plate-ui/cursor-overlay.tsx",
"target": "",
"type": "registry:ui"
Expand Down
2 changes: 1 addition & 1 deletion apps/www/public/r/styles/default/floating-toolbar.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<HTMLDivElement>(componentRef, floatingRef);\n\n if (hidden) return null;\n\n return (\n <PortalBody>\n <Toolbar\n ref={ref}\n className={cn(\n 'absolute z-50 whitespace-nowrap rounded-md border bg-popover px-1 opacity-100 shadow-md print:hidden'\n )}\n {...rootProps}\n {...props}\n >\n {children}\n </Toolbar>\n </PortalBody>\n );\n});\n",
"content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/react';\nimport {\n PortalBody,\n useComposedRef,\n useEditorId,\n useEditorPlugin,\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 // FIXME: can not using isOpen\n const { editor, useOption } = useEditorPlugin(AIPlugin);\n const aiOpen = useOption('openEditorId') === editor.id;\n\n const floatingToolbarState = useFloatingToolbarState({\n editorId,\n focusedEditorId,\n hideToolbar: aiOpen,\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<HTMLDivElement>(componentRef, floatingRef);\n\n if (hidden) return null;\n\n return (\n <PortalBody>\n <Toolbar\n ref={ref}\n className={cn(\n 'absolute z-50 whitespace-nowrap rounded-md border bg-popover px-1 opacity-100 shadow-md print:hidden'\n )}\n {...rootProps}\n {...props}\n >\n {children}\n </Toolbar>\n </PortalBody>\n );\n});\n",
"path": "plate-ui/floating-toolbar.tsx",
"target": "",
"type": "registry:ui"
Expand Down

0 comments on commit 582152d

Please sign in to comment.