Skip to content

Commit

Permalink
Merge pull request #2635 from udecode/fix/id
Browse files Browse the repository at this point in the history
Plate id prop string
  • Loading branch information
zbeyens committed Sep 18, 2023
1 parent a0fcc7f commit 090857a
Show file tree
Hide file tree
Showing 21 changed files with 444 additions and 374 deletions.
88 changes: 44 additions & 44 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,54 +23,54 @@
"@radix-ui/react-toggle": "^1.0.3",
"@radix-ui/react-toolbar": "^1.0.4",
"@radix-ui/react-tooltip": "^1.0.6",
"@udecode/plate-alignment": "^23.7.4",
"@udecode/plate-autoformat": "^23.7.4",
"@udecode/plate-basic-marks": "^23.7.4",
"@udecode/plate-block-quote": "^23.7.4",
"@udecode/plate-break": "^23.7.4",
"@udecode/plate-caption": "^23.7.4",
"@udecode/plate-code-block": "^23.7.4",
"@udecode/plate-combobox": "^23.7.4",
"@udecode/plate-comments": "^23.7.4",
"@udecode/plate-common": "^23.7.4",
"@udecode/plate-cursor": "^23.7.4",
"@udecode/plate-dnd": "^23.7.4",
"@udecode/plate-emoji": "^23.7.4",
"@udecode/plate-excalidraw": "^23.7.4",
"@udecode/plate-floating": "^23.7.4",
"@udecode/plate-font": "^23.7.4",
"@udecode/plate-heading": "^23.7.4",
"@udecode/plate-highlight": "^23.7.4",
"@udecode/plate-horizontal-rule": "^23.7.4",
"@udecode/plate-indent": "^23.7.4",
"@udecode/plate-indent-list": "^23.7.4",
"@udecode/plate-juice": "^23.7.4",
"@udecode/plate-kbd": "^23.7.4",
"@udecode/plate-line-height": "^23.7.4",
"@udecode/plate-link": "^23.7.4",
"@udecode/plate-list": "^23.7.4",
"@udecode/plate-media": "^23.7.4",
"@udecode/plate-mention": "^23.7.4",
"@udecode/plate-node-id": "^23.7.4",
"@udecode/plate-normalizers": "^23.7.4",
"@udecode/plate-paragraph": "^23.7.4",
"@udecode/plate-reset-node": "^23.7.4",
"@udecode/plate-resizable": "^23.7.4",
"@udecode/plate-select": "^23.7.4",
"@udecode/plate-selection": "^23.7.4",
"@udecode/plate-serializer-csv": "^23.7.4",
"@udecode/plate-serializer-docx": "^23.7.4",
"@udecode/plate-serializer-html": "^23.7.4",
"@udecode/plate-serializer-md": "^23.7.4",
"@udecode/plate-tabbable": "^23.7.4",
"@udecode/plate-table": "^23.7.4",
"@udecode/plate-trailing-block": "^23.7.4",
"@udecode/plate-alignment": "^24.0.0",
"@udecode/plate-autoformat": "^24.0.0",
"@udecode/plate-basic-marks": "^24.0.0",
"@udecode/plate-block-quote": "^24.0.0",
"@udecode/plate-break": "^24.0.0",
"@udecode/plate-caption": "^24.0.0",
"@udecode/plate-code-block": "^24.0.0",
"@udecode/plate-combobox": "^24.0.0",
"@udecode/plate-comments": "^24.0.0",
"@udecode/plate-common": "^24.0.0",
"@udecode/plate-cursor": "^24.0.0",
"@udecode/plate-dnd": "^24.0.0",
"@udecode/plate-emoji": "^24.0.0",
"@udecode/plate-excalidraw": "^24.0.0",
"@udecode/plate-floating": "^24.0.0",
"@udecode/plate-font": "^24.0.0",
"@udecode/plate-heading": "^24.0.0",
"@udecode/plate-highlight": "^24.0.0",
"@udecode/plate-horizontal-rule": "^24.0.0",
"@udecode/plate-indent": "^24.0.0",
"@udecode/plate-indent-list": "^24.0.0",
"@udecode/plate-juice": "^24.0.0",
"@udecode/plate-kbd": "^24.0.0",
"@udecode/plate-line-height": "^24.0.0",
"@udecode/plate-link": "^24.0.0",
"@udecode/plate-list": "^24.0.0",
"@udecode/plate-media": "^24.0.0",
"@udecode/plate-mention": "^24.0.0",
"@udecode/plate-node-id": "^24.0.0",
"@udecode/plate-normalizers": "^24.0.0",
"@udecode/plate-paragraph": "^24.0.0",
"@udecode/plate-reset-node": "^24.0.0",
"@udecode/plate-resizable": "^24.0.0",
"@udecode/plate-select": "^24.0.0",
"@udecode/plate-selection": "^24.0.0",
"@udecode/plate-serializer-csv": "^24.0.0",
"@udecode/plate-serializer-docx": "^24.0.0",
"@udecode/plate-serializer-html": "^24.0.0",
"@udecode/plate-serializer-md": "^24.0.0",
"@udecode/plate-tabbable": "^24.0.0",
"@udecode/plate-table": "^24.0.0",
"@udecode/plate-trailing-block": "^24.0.0",
"class-variance-authority": "0.7.0",
"clsx": "2.0.0",
"cmdk": "0.2.0",
"date-fns": "^2.30.0",
"eslint-plugin-prettier": "^5.0.0",
"lucide-react": "0.277.0",
"lucide-react": "0.279.0",
"next": "^13.4.19",
"next-themes": "^0.2.1",
"react": "^18.2.0",
Expand All @@ -87,7 +87,7 @@
},
"devDependencies": {
"@ianvs/prettier-plugin-sort-imports": "^4.1.0",
"@types/node": "^20.6.1",
"@types/node": "^20.6.2",
"@types/react": "^18.2.21",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/parser": "^6.7.0",
Expand Down
524 changes: 262 additions & 262 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

21 changes: 10 additions & 11 deletions src/components/plate-editor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import React, { useRef } from 'react';
import { CommentsProvider } from '@udecode/plate-comments';
import { Plate, PlateProvider } from '@udecode/plate-common';
import { Plate } from '@udecode/plate-common';
import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
Expand All @@ -13,6 +13,7 @@ import { plugins } from '@/lib/plate/plate-plugins';
import { cn } from '@/lib/utils';
import { CommentsPopover } from '@/components/plate-ui/comments-popover';
import { CursorOverlay } from '@/components/plate-ui/cursor-overlay';
import { Editor } from '@/components/plate-ui/editor';
import { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';
import { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';
import { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';
Expand All @@ -33,7 +34,7 @@ export default function PlateEditor() {
return (
<DndProvider backend={HTML5Backend}>
<CommentsProvider users={commentsUsers} myUserId={myUserId}>
<PlateProvider plugins={plugins} initialValue={initialValue}>
<Plate plugins={plugins} initialValue={initialValue}>
<div
ref={containerRef}
className={cn(
Expand All @@ -45,14 +46,12 @@ export default function PlateEditor() {
<FixedToolbarButtons />
</FixedToolbar>

<Plate
editableProps={{
autoFocus: true,
className: cn(
'relative overflow-x-auto outline-none [&_strong]:font-bold',
'!min-h-[600px] px-[96px] py-16'
),
}}
<Editor
className="px-[96px] py-16"
autoFocus
focusRing={false}
variant="ghost"
size="md"
/>

<FloatingToolbar>
Expand All @@ -65,7 +64,7 @@ export default function PlateEditor() {

<CursorOverlay containerRef={containerRef} />
</div>
</PlateProvider>
</Plate>
</CommentsProvider>
</DndProvider>
);
Expand Down
2 changes: 2 additions & 0 deletions src/components/plate-ui/button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const buttonVariants = cva(
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline',
inlineLink: 'text-base text-primary underline underline-offset-4',
},
size: {
default: 'h-10 px-4 py-2',
Expand All @@ -26,6 +27,7 @@ const buttonVariants = cva(
sms: 'h-9 w-9 rounded-md px-0',
lg: 'h-11 rounded-md px-8',
icon: 'h-10 w-10',
none: '',
},
isMenu: {
true: 'h-auto w-full cursor-pointer justify-start',
Expand Down
20 changes: 10 additions & 10 deletions src/components/plate-ui/code-block-element.css
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@
* --syntax-cursor-line: hsla(230, 8%, 24%, 0.05);
*/

code[class*='language-'],
pre[class*='language-'] {
.slate-code_block code[class*='language-'],
.slate-code_block pre[class*='language-'] {
background: hsl(230, 1%, 98%);
color: hsl(230, 8%, 24%);
font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono',
Expand All @@ -50,30 +50,30 @@ pre[class*='language-'] {
}

/* Selection */
code[class*='language-']::-moz-selection,
code[class*='language-'] *::-moz-selection,
pre[class*='language-'] *::-moz-selection {
.slate-code_block code[class*='language-']::-moz-selection,
.slate-code_block code[class*='language-'] *::-moz-selection,
.slate-code_block pre[class*='language-'] *::-moz-selection {
background: hsl(230, 1%, 90%);
color: inherit;
}

code[class*='language-']::selection,
code[class*='language-'] *::selection,
pre[class*='language-'] *::selection {
.slate-code_block code[class*='language-']::selection,
.slate-code_block code[class*='language-'] *::selection,
.slate-code_block pre[class*='language-'] *::selection {
background: hsl(230, 1%, 90%);
color: inherit;
}

/* Code blocks */
pre[class*='language-'] {
.slate-code_block pre[class*='language-'] {
padding: 1em;
margin: 0.5em 0;
overflow: auto;
border-radius: 0.3em;
}

/* Inline code */
:not(pre) > code[class*='language-'] {
.slate-code_block :not(pre) > code[class*='language-'] {
padding: 0.2em 0.3em;
border-radius: 0.3em;
white-space: normal;
Expand Down
9 changes: 3 additions & 6 deletions src/components/plate-ui/combobox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,7 @@ import {
useComboboxItem,
useComboboxSelectors,
} from '@udecode/plate-combobox';
import {
useEventEditorSelectors,
usePlateEditorState,
} from '@udecode/plate-common';
import { useEditorState, useEventEditorSelectors } from '@udecode/plate-common';
import { createVirtualRef } from '@udecode/plate-floating';

import { cn } from '@/lib/utils';
Expand Down Expand Up @@ -55,7 +52,7 @@ export function ComboboxContent<TData extends Data = NoData>(
onRenderItem,
} = props;

const editor = usePlateEditorState();
const editor = useEditorState();

const filteredItems =
useComboboxSelectors.filteredItems() as TComboboxItem<TData>[];
Expand Down Expand Up @@ -121,7 +118,7 @@ export function Combobox<TData extends Data = NoData>({
const focusedEditorId = useEventEditorSelectors.focus?.();
const combobox = useComboboxControls();
const activeId = useComboboxSelectors.activeId();
const editor = usePlateEditorState();
const editor = useEditorState();

useEffect(() => {
comboboxActions.setComboboxById({
Expand Down
88 changes: 88 additions & 0 deletions src/components/plate-ui/editor.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import React from 'react';
import { PlateContent } from '@udecode/plate-common';
import { cva } from 'class-variance-authority';

import { cn } from '@/lib/utils';

import type { PlateContentProps } from '@udecode/plate-common';
import type { VariantProps } from 'class-variance-authority';

const editorVariants = cva(
cn(
'relative overflow-x-auto whitespace-pre-wrap break-words',
'min-h-[80px] w-full rounded-md bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none',
'[&_[data-slate-placeholder]]:text-muted-foreground [&_[data-slate-placeholder]]:!opacity-100',
'[&_[data-slate-placeholder]]:top-[auto_!important]',
'[&_strong]:font-bold'
),
{
variants: {
variant: {
outline: 'border border-input',
ghost: '',
},
focused: {
true: 'ring-2 ring-ring ring-offset-2',
},
disabled: {
true: 'cursor-not-allowed opacity-50',
},
focusRing: {
true: 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
false: '',
},
size: {
sm: 'text-sm',
md: 'text-base',
},
},
defaultVariants: {
variant: 'outline',
focusRing: true,
size: 'sm',
},
}
);

export type EditorProps = PlateContentProps &
VariantProps<typeof editorVariants>;

const Editor = React.forwardRef<HTMLDivElement, EditorProps>(
(
{
className,
disabled,
focused,
focusRing,
readOnly,
size,
variant,
...props
},
ref
) => {
return (
<div ref={ref} className="relative w-full">
<PlateContent
className={cn(
editorVariants({
disabled,
focused,
focusRing,
size,
variant,
}),
className
)}
disableDefaultStyles
readOnly={disabled ?? readOnly}
aria-disabled={disabled}
{...props}
/>
</div>
);
}
);
Editor.displayName = 'Editor';

export { Editor };
4 changes: 1 addition & 3 deletions src/components/plate-ui/emoji-combobox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,7 @@ import {

import { Combobox } from './combobox';

export function EmojiComboboxItem({
item,
}: ComboboxItemProps<EmojiItemData>): JSX.Element {
export function EmojiComboboxItem({ item }: ComboboxItemProps<EmojiItemData>) {
const {
data: { id, emoji },
} = item;
Expand Down
2 changes: 1 addition & 1 deletion src/components/plate-ui/emoji-icons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { EmojiCategoryList } from '@udecode/plate-emoji';

export const emojiCategoryIcons: Record<
EmojiCategoryList,
{ outline: JSX.Element; solid: JSX.Element }
{ outline: React.ReactElement; solid: React.ReactElement }
> = {
activity: {
outline: (
Expand Down
4 changes: 2 additions & 2 deletions src/components/plate-ui/fixed-toolbar-buttons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
MARK_STRIKETHROUGH,
MARK_UNDERLINE,
} from '@udecode/plate-basic-marks';
import { usePlateReadOnly } from '@udecode/plate-common';
import { useEditorReadOnly } from '@udecode/plate-common';
import { MARK_BG_COLOR, MARK_COLOR } from '@udecode/plate-font';
import { ListStyleType } from '@udecode/plate-indent-list';
import { ELEMENT_IMAGE } from '@udecode/plate-media';
Expand All @@ -32,7 +32,7 @@ import { ToolbarGroup } from './toolbar';
import { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';

export function FixedToolbarButtons() {
const readOnly = usePlateReadOnly();
const readOnly = useEditorReadOnly();

return (
<div className="w-full overflow-hidden">
Expand Down
Loading

0 comments on commit 090857a

Please sign in to comment.