-
-
-
- {!readOnly && hovered && (
-
- )}
+ {!isSelectingCell && (
+
+ {!readOnly && (
+ <>
+
+
+ {!hiddenLeft && (
+
+ )}
- {!readOnly && hoveredLeft && (
-
- )}
-
+ {hovered && (
+
+ )}
+ {hoveredLeft && (
+
+ )}
+
+ )}
+
+ )}
);
diff --git a/src/components/plate-ui/table-element.tsx b/src/components/plate-ui/table-element.tsx
index d8161f4..87c464b 100644
--- a/src/components/plate-ui/table-element.tsx
+++ b/src/components/plate-ui/table-element.tsx
@@ -2,8 +2,7 @@ import React, { forwardRef } from 'react';
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
import { PopoverAnchor, PopoverContentProps } from '@radix-ui/react-popover';
import {
- findNodePath,
- getBlockAbove,
+ isCollapsed,
PlateElement,
PlateElementProps,
useElement,
@@ -16,8 +15,7 @@ import {
useTableElement,
useTableElementState,
} from '@udecode/plate-table';
-import { Path } from 'slate';
-import { useReadOnly } from 'slate-react';
+import { useReadOnly, useSelected } from 'slate-react';
import { cn } from '@/lib/utils';
import { Icons, iconVariants } from '@/components/icons';
@@ -114,17 +112,12 @@ const TableFloatingToolbar = React.forwardRef<
const { props: buttonProps } = useRemoveNodeButton({ element });
const readOnly = useReadOnly();
+ const selected = useSelected();
const editor = usePlateEditorState();
- const path = findNodePath(editor, element);
- const open =
- path &&
- !readOnly &&
- !!getBlockAbove(editor, {
- match: (_n, p) => Path.equals(path, p),
- });
+ const open = !readOnly && selected && isCollapsed(editor.selection);
return (
-
+
{children}
,
- VariantProps {
- asChild?: boolean;
-}
-
-const Button = React.forwardRef(
- ({ className, variant, size, asChild = false, ...props }, ref) => {
- const Comp = asChild ? Slot : 'button';
- return (
-
- );
- }
-);
-Button.displayName = 'Button';
-
-export { Button, buttonVariants };
diff --git a/src/lib/plate/plate-plugins.ts b/src/lib/plate/plate-plugins.ts
index 28aaa66..540e3de 100644
--- a/src/lib/plate/plate-plugins.ts
+++ b/src/lib/plate/plate-plugins.ts
@@ -24,6 +24,7 @@ import {
createExitBreakPlugin,
createSoftBreakPlugin,
} from '@udecode/plate-break';
+import { createCaptionPlugin } from '@udecode/plate-caption';
import {
createCodeBlockPlugin,
ELEMENT_CODE_BLOCK,
@@ -39,6 +40,7 @@ import {
createPlugins,
isBlockAboveEmpty,
isSelectionAtBlockStart,
+ PlateElement,
PlateLeaf,
RenderAfterEditable,
someNode,
@@ -151,7 +153,7 @@ import { TableElement } from '@/components/plate-ui/table-element';
import { TableRowElement } from '@/components/plate-ui/table-row-element';
import { TodoListElement } from '@/components/plate-ui/todo-list-element';
import { withDraggables } from '@/components/plate-ui/with-draggables';
-import { TabbableElement } from '@/components/plate/tabbable-element';
+import { TabbableElement } from '@/components/tabbable-element';
const resetBlockTypesCommonRule = {
types: [ELEMENT_BLOCKQUOTE, ELEMENT_TODO_LI],
@@ -177,6 +179,9 @@ export const plugins = createPlugins(
}),
createImagePlugin(),
createMediaEmbedPlugin(),
+ createCaptionPlugin({
+ options: { pluginKeys: [ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED] },
+ }),
createMentionPlugin(),
createTablePlugin(),
createTodoListPlugin(),
@@ -218,7 +223,20 @@ export const plugins = createPlugins(
},
},
}),
- createIndentListPlugin(),
+ createIndentListPlugin({
+ inject: {
+ props: {
+ validTypes: [
+ ELEMENT_PARAGRAPH,
+ ELEMENT_H1,
+ ELEMENT_H2,
+ ELEMENT_H3,
+ ELEMENT_BLOCKQUOTE,
+ ELEMENT_CODE_BLOCK,
+ ],
+ },
+ },
+ }),
createLineHeightPlugin({
inject: {
props: {
@@ -371,6 +389,7 @@ export const plugins = createPlugins(
[ELEMENT_H5]: withProps(HeadingElement, { variant: 'h5' }),
[ELEMENT_H6]: withProps(HeadingElement, { variant: 'h6' }),
[ELEMENT_IMAGE]: ImageElement,
+ [ELEMENT_LI]: withProps(PlateElement, { as: 'li' }),
[ELEMENT_LINK]: LinkElement,
[ELEMENT_MEDIA_EMBED]: MediaEmbedElement,
[ELEMENT_MENTION]: MentionElement,
diff --git a/src/styles/globals.css b/src/styles/globals.css
index ad472c1..31bd520 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,73 +1,73 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
-
+
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
-
+
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
-
+
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
-
+
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
-
+
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
-
+
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
-
+
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
-
+
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
-
+
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
-
+
--ring: 215 20.2% 65.1%;
-
+
--radius: 0.5rem;
}
-
+
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
-
+
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
-
+
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
-
+
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
-
+
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
-
+
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
-
+
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
-
+
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
-
+
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 85.7% 97.3%;
-
+
--ring: 217.2 32.6% 17.5%;
}
}
-
+
@layer base {
* {
@apply border-border;
@@ -75,4 +75,4 @@
body {
@apply bg-background text-foreground;
}
-}
\ No newline at end of file
+}