📝

udecode · Nov 28, 2023 · 0b5962d · 0b5962d
1 parent cbc1b49
commit 0b5962d
Show file tree

Hide file tree

Showing 10 changed files with 114 additions and 77 deletions.
diff --git a/.changeset/strong-pants-rule.md b/.changeset/strong-pants-rule.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-table': patch
+---
+
+Fix: `useTableMergeState` should return false values when `enableMerging: false`
diff --git a/apps/www/content/docs/table.mdx b/apps/www/content/docs/table.mdx
@@ -14,6 +14,8 @@ docs:
 
 <ComponentPreview name="playground-demo" id="table" />
 
+<ComponentPreview name="playground-demo" id="tableMerge" />
+
 <PackageInfo>
 
 ## Features

diff --git a/apps/www/src/components/counting-numbers.tsx b/apps/www/src/components/counting-numbers.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 'use client';
 
 import { useEffect, useMemo, useRef, useState } from 'react';
@@ -56,17 +57,23 @@ export function CountingNumbers({
   start = reverse ? 1000 : 0,
   interval = 10,
   duration = 800,
+  noAnimation,
 }) {
   const ref = useRef(null);
-  const isInView = useInView(ref);
-  const number = useCounting({
-    start,
-    end: value,
-    interval,
-    duration,
-    reverse,
-    isInView,
-  });
+
+  let number = value;
+
+  if (!noAnimation) {
+    const isInView = useInView(ref);
+    number = useCounting({
+      start,
+      end: value,
+      interval,
+      duration,
+      reverse,
+      isInView,
+    });
+  }
 
   const formattedNumber = useMemo(
     () => Intl.NumberFormat().format(number),

diff --git a/apps/www/src/components/star-on-github.tsx b/apps/www/src/components/star-on-github.tsx
@@ -45,6 +45,7 @@ export function StarOnGithub({ count }: { count: number }) {
             <CountingNumbers
               value={count}
               className="font-medium text-background dark:text-foreground"
+              noAnimation
             />
           )}
         </div>

diff --git a/apps/www/src/config/customizer-plugins.ts b/apps/www/src/config/customizer-plugins.ts
@@ -66,7 +66,7 @@ import { KEY_TABBABLE } from '@udecode/plate-tabbable';
 import { ELEMENT_TABLE } from '@udecode/plate-table';
 import { KEY_TRAILING_BLOCK } from '@udecode/plate-trailing-block';
 
-export type ValueId = keyof typeof customizerPlugins;
+export type ValueId = keyof typeof customizerPlugins | 'tableMerge';
 
 // cmdk needs lowercase
 export const customizerPlugins = {

diff --git a/apps/www/src/lib/plate/demo/values/tableValue.tsx b/apps/www/src/lib/plate/demo/values/tableValue.tsx
@@ -4,31 +4,42 @@ import { jsx } from '@udecode/plate-test-utils';
 
 jsx;
 
-export const createTable = (): any => (
+export const createTable = (spanning?: boolean): any => (
   <fragment>
-    <htable colSizes={[150, 150, 150, 150]} marginLeft={50}>
-      <htr>
-        <hth>
-          <hp>
-            <htext bold>Plugin</htext>
-          </hp>
-        </hth>
-        <hth>
-          <hp>
-            <htext bold>Element</htext>
-          </hp>
-        </hth>
-        <hth>
-          <hp>
-            <htext bold>Inline</htext>
-          </hp>
-        </hth>
-        <hth>
-          <hp>
-            <htext bold>Void</htext>
-          </hp>
-        </hth>
-      </htr>
+    <htable colSizes={[100, 100, 100, 100]} marginLeft={20}>
+      {spanning ? (
+        <htr>
+          <hth colSpan={4}>
+            <hp>
+              <htext bold>Plugin</htext>
+            </hp>
+          </hth>
+        </htr>
+      ) : (
+        <htr>
+          <hth>
+            <hp>
+              <htext bold>Plugin</htext>
+            </hp>
+          </hth>
+          <hth>
+            <hp>
+              <htext bold>Element</htext>
+            </hp>
+          </hth>
+          <hth>
+            <hp>
+              <htext bold>Inline</htext>
+            </hp>
+          </hth>
+          <hth>
+            <hp>
+              <htext bold>Void</htext>
+            </hp>
+          </hth>
+        </htr>
+      )}
+
       <htr>
         <htd>
           <hp>
@@ -81,30 +92,6 @@ export const createTable = (): any => (
   </fragment>
 );
 
-export const createSpanningTable = (): any => (
-  <fragment>
-    <htable colSizes={[300, 300]}>
-      <htr>
-        <hth colSpan={2}>
-          <hp>
-            <htext bold>Heading</htext>
-          </hp>
-        </hth>
-      </htr>
-      <htr>
-        <htd>
-          <hp>
-            <htext bold>Cell 1</htext>
-          </hp>
-        </htd>
-        <htd>
-          <hp>Cell 2</hp>
-        </htd>
-      </htr>
-    </htable>
-  </fragment>
-);
-
 export const tableValue: any = (
   <fragment>
     <hh2>🏓 Table</hh2>
@@ -113,9 +100,16 @@ export const tableValue: any = (
       to design structured layouts.
     </hp>
     {createTable()}
+  </fragment>
+);
+
+export const tableMergeValue: any = (
+  <fragment>
+    <hh3>Table Merge</hh3>
     <hp>
-      This table is an example of rendering a table spanning multiple columns:
+      You can enable merging using <htext code>enableMerging: true</htext>{' '}
+      option. Try it out:
     </hp>
-    {createSpanningTable()}
+    {createTable(true)}
   </fragment>
 );
diff --git a/apps/www/src/lib/plate/demo/values/usePlaygroundValue.ts b/apps/www/src/lib/plate/demo/values/usePlaygroundValue.ts
@@ -31,7 +31,7 @@ import { mediaValue } from './mediaValue';
 import { mentionValue } from './mentionValue';
 import { softBreakValue } from './softBreakValue';
 import { tabbableValue } from './tabbableValue';
-import { tableValue } from './tableValue';
+import { tableMergeValue, tableValue } from './tableValue';
 
 export const usePlaygroundValue = (id?: ValueId) => {
   let valueId = settingsStore.use.valueId();
@@ -48,8 +48,13 @@ export const usePlaygroundValue = (id?: ValueId) => {
 
     value.push(...basicMarksValue);
 
+    console.log(valueId);
+    if (valueId === 'tableMerge') {
+      return mapNodeId(tableMergeValue);
+    }
+
     if (valueId !== customizerPlugins.playground.id) {
-      const newValue = customizerPlugins[valueId].value ?? [];
+      const newValue = customizerPlugins[valueId]?.value ?? [];
 
       if (newValue.length === 0) {
         return mapNodeId(value);

diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx
@@ -150,7 +150,12 @@ export const usePlaygroundPlugins = ({
               triggerPreviousCharPattern: /^$|^[\s"']$/,
             },
           }),
-          createTablePlugin({ enabled: !!enabled.table }),
+          createTablePlugin({
+            enabled: !!enabled.table,
+            options: {
+              enableMerging: id === 'tableMerge',
+            },
+          }),
           createTodoListPlugin({ enabled: !!enabled.action_item }),
           createExcalidrawPlugin({ enabled: !!enabled.excalidraw }),
 

diff --git a/packages/table/src/merge/useTableMergeState.ts b/packages/table/src/merge/useTableMergeState.ts
@@ -1,12 +1,30 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import { useMemo } from 'react';
-import { isCollapsed, isExpanded, useEditorState } from '@udecode/plate-common';
+import {
+  getPluginOptions,
+  isCollapsed,
+  isExpanded,
+  useEditorRef,
+  useEditorState,
+} from '@udecode/plate-common';
 import { useReadOnly, useSelected } from 'slate-react';
 
+import { ELEMENT_TABLE } from '../createTablePlugin';
 import { getTableGridAbove } from '../queries';
 import { useTableStore } from '../stores';
+import { TablePlugin } from '../types';
 import { isTableRectangular } from './isTableRectangular';
 
 export const useTableMergeState = () => {
+  const editorRef = useEditorRef();
+
+  const { enableMerging } = getPluginOptions<TablePlugin>(
+    editorRef,
+    ELEMENT_TABLE
+  );
+
+  if (!enableMerging) return { canMerge: false, canUnmerge: false };
+
   const editor = useEditorState();
 
   const readOnly = useReadOnly();
@@ -32,7 +50,7 @@ export const useTableMergeState = () => {
       isExpanded(editor.selection) &&
       isTableRectangular(selectedTable)
     );
-  }, [editor.selection, selectedTable, readOnly, selected]);
+  }, [readOnly, selected, editor.selection, selectedTable]);
 
   const canUnmerge =
     collapsed &&

diff --git a/yarn.lock b/yarn.lock
@@ -7269,7 +7269,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-comments@npm:25.0.1, @udecode/plate-comments@workspace:^, @udecode/plate-comments@workspace:packages/comments":
+"@udecode/plate-comments@npm:26.0.0, @udecode/plate-comments@workspace:^, @udecode/plate-comments@workspace:packages/comments":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-comments@workspace:packages/comments"
   dependencies:
@@ -7747,13 +7747,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-serializer-csv@npm:25.0.1, @udecode/plate-serializer-csv@workspace:^, @udecode/plate-serializer-csv@workspace:packages/serializer-csv":
+"@udecode/plate-serializer-csv@npm:26.0.2, @udecode/plate-serializer-csv@workspace:^, @udecode/plate-serializer-csv@workspace:packages/serializer-csv":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-serializer-csv@workspace:packages/serializer-csv"
   dependencies:
     "@types/papaparse": "npm:^5.3.7"
     "@udecode/plate-common": "npm:25.0.1"
-    "@udecode/plate-table": "npm:25.0.1"
+    "@udecode/plate-table": "npm:26.0.2"
     papaparse: "npm:^5.4.1"
   peerDependencies:
     react: ">=16.8.0"
@@ -7765,7 +7765,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-serializer-docx@npm:25.0.1, @udecode/plate-serializer-docx@workspace:^, @udecode/plate-serializer-docx@workspace:packages/serializer-docx":
+"@udecode/plate-serializer-docx@npm:26.0.2, @udecode/plate-serializer-docx@workspace:^, @udecode/plate-serializer-docx@workspace:packages/serializer-docx":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-serializer-docx@workspace:packages/serializer-docx"
   dependencies:
@@ -7775,7 +7775,7 @@ __metadata:
     "@udecode/plate-indent-list": "npm:25.0.1"
     "@udecode/plate-media": "npm:25.0.1"
     "@udecode/plate-paragraph": "npm:25.0.1"
-    "@udecode/plate-table": "npm:25.0.1"
+    "@udecode/plate-table": "npm:26.0.2"
     validator: "npm:^13.9.0"
   peerDependencies:
     react: ">=16.8.0"
@@ -7787,7 +7787,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-serializer-html@npm:25.0.1, @udecode/plate-serializer-html@workspace:^, @udecode/plate-serializer-html@workspace:packages/serializer-html":
+"@udecode/plate-serializer-html@npm:26.0.0, @udecode/plate-serializer-html@workspace:^, @udecode/plate-serializer-html@workspace:packages/serializer-html":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-serializer-html@workspace:packages/serializer-html"
   dependencies:
@@ -7861,7 +7861,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-table@npm:25.0.1, @udecode/plate-table@workspace:^, @udecode/plate-table@workspace:packages/table":
+"@udecode/plate-table@npm:26.0.2, @udecode/plate-table@workspace:^, @udecode/plate-table@workspace:packages/table":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-table@workspace:packages/table"
   dependencies:
@@ -7982,7 +7982,7 @@ __metadata:
     "@udecode/plate-break": "npm:25.0.1"
     "@udecode/plate-code-block": "npm:25.0.1"
     "@udecode/plate-combobox": "npm:25.0.1"
-    "@udecode/plate-comments": "npm:25.0.1"
+    "@udecode/plate-comments": "npm:26.0.0"
     "@udecode/plate-common": "npm:25.0.1"
     "@udecode/plate-find-replace": "npm:25.0.1"
     "@udecode/plate-floating": "npm:25.0.1"
@@ -8004,13 +8004,13 @@ __metadata:
     "@udecode/plate-reset-node": "npm:25.0.1"
     "@udecode/plate-resizable": "npm:25.0.1"
     "@udecode/plate-select": "npm:25.0.1"
-    "@udecode/plate-serializer-csv": "npm:25.0.1"
-    "@udecode/plate-serializer-docx": "npm:25.0.1"
-    "@udecode/plate-serializer-html": "npm:25.0.1"
+    "@udecode/plate-serializer-csv": "npm:26.0.2"
+    "@udecode/plate-serializer-docx": "npm:26.0.2"
+    "@udecode/plate-serializer-html": "npm:26.0.0"
     "@udecode/plate-serializer-md": "npm:25.0.1"
     "@udecode/plate-suggestion": "npm:25.0.1"
     "@udecode/plate-tabbable": "npm:25.0.1"
-    "@udecode/plate-table": "npm:25.0.1"
+    "@udecode/plate-table": "npm:26.0.2"
     "@udecode/plate-trailing-block": "npm:25.0.1"
   peerDependencies:
     react: ">=16.8.0"