Merge pull request #3920 from udecode/feat/table-colsize

Plate Next

.changeset/ai.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-ai': major
+---
+
+AI plugins are now experimental: pin the dependency to avoid breaking changes. No breaking changes for this release.

.changeset/core-major.md

@@ -0,0 +1,107 @@
+---
+'@udecode/plate-core': major
+---
+
+- **Plugin `normalizeInitialValue`** now returns `void` instead of `Value`. When mutating nodes, keep their references (e.g., use `Object.assign` instead of spread).
+- **Editor methods have moved** to `editor.tf` and `editor.api`. They still exist at the top level for **slate backward compatibility**, but are no longer redundantly typed. If you truly need the top-level method types, extend your editor type with `LegacyEditorMethods` (e.g. `editor as Editor & LegacyEditorMethods`). Since these methods can be overridden by `extendEditor`, `with...`, or slate plugins, consider migrating to the following approaches:
+
+  ```tsx
+  // For overriding existing methods only:
+  overrideEditor(({ editor, tf: { deleteForward }, api: { isInline } }) => ({
+    transforms: {
+      deleteForward(options) {
+        // ...conditional override
+        deleteForward(options);
+      },
+    },
+    api: {
+      isInline(element) {
+        // ...conditional override
+        return isInline(element);
+      },
+    },
+  }));
+  ```
+
+This was previously done in `extendEditor` using top-level methods, which still works but now throws a type error due to the move to `editor.tf/editor.api`. A workaround is to extend your editor with `LegacyEditorMethods`.
+
+**Why?** Having all methods at the top-level (next to `children`, `marks`, etc.) would clutter the editor interface. Slate splits transforms in three places (`editor`, `Editor`, and `Transforms`), which is also confusing. We've reorganized them into `tf` and `api` for better DX, but also to support transform-only middlewares in the future. This also lets us leverage `extendEditorTransforms`, `extendEditorApi`, and `overrideEditor` to modify those methods.
+
+Migration example:
+
+```tsx
+// From:
+export const withInlineVoid: ExtendEditor = ({ editor }) => {
+  const { isInline, isSelectable, isVoid, markableVoid } = editor;
+
+  const voidTypes: string[] = [];
+  const inlineTypes: string[] = [];
+
+  editor.pluginList.forEach((plugin) => {
+    if (plugin.node.isInline) {
+      inlineTypes.push(plugin.node.type);
+    }
+    if (plugin.node.isVoid) {
+      voidTypes.push(plugin.node.type);
+    }
+  });
+
+  editor.isInline = (element) => {
+    return inlineTypes.includes(element.type as any) ? true : isInline(element);
+  };
+
+  editor.isVoid = (element) => {
+    return voidTypes.includes(element.type as any) ? true : isVoid(element);
+  };
+
+  return editor;
+};
+
+export const InlineVoidPlugin = createSlatePlugin({
+  key: 'inlineVoid',
+  extendEditor: withInlineVoid,
+});
+
+// After (using overrideEditor since we're only overriding existing methods):
+export const withInlineVoid: OverrideEditor = ({
+  api: { isInline, isSelectable, isVoid, markableVoid },
+  editor,
+}) => {
+  const voidTypes: string[] = [];
+  const inlineTypes: string[] = [];
+
+  editor.pluginList.forEach((plugin) => {
+    if (plugin.node.isInline) {
+      inlineTypes.push(plugin.node.type);
+    }
+    if (plugin.node.isVoid) {
+      voidTypes.push(plugin.node.type);
+    }
+  });
+
+  return {
+    api: {
+      isInline(element) {
+        return inlineTypes.includes(element.type as any)
+          ? true
+          : isInline(element);
+      },
+      isVoid(element) {
+        return voidTypes.includes(element.type as any) ? true : isVoid(element);
+      },
+    },
+  };
+};
+
+export const InlineVoidPlugin = createSlatePlugin({
+  key: 'inlineVoid',
+}).overrideEditor(withInlineVoid);
+```
+
+- Move `editor.redecorate` to `editor.api.redecorate`
+
+Types:
+
+- Rename `TRenderElementProps` to `RenderElementProps`
+- Rename `TRenderLeafProps` to `RenderLeafProps`
+- Rename `TEditableProps` to `EditableProps`

.changeset/core.md

@@ -0,0 +1,16 @@
+---
+'@udecode/plate-core': minor
+---
+
+- Import the following from `@udecode/plate-core/react` (or `@udecode/plate/react`) instead of `slate-react`: `RenderPlaceholderProps`, `DefaultElement`, `DefaultPlaceholder`, `Editable`, `Slate`, `useComposing`, `useFocused`, `useReadOnly`, `useSelected`, `withReact`.
+- `useNodePath` is now memoized: it will re-render only when the actual path changes (`PathApi.equals`). This includes `usePath` and `path` element prop.
+- **New hook** `useElementSelector(([node, path]) => selector(node, path), deps, { equalityFn, key })`: re-render only when the selector result changes. **We highly recommend using this hook over useElement(key)** when subscribing to an ancestor element (e.g. table element from a cell element). For example, subscribe to the row size from a cell element without affecting the re-rendering of all row cells:
+
+```tsx
+const rowSize = useElementSelector(([node]) => node.size, [], {
+  key: TableRowPlugin.key,
+});
+```
+
+- Added a new plugin attribute: `SlatePlugin.node.isSelectable`. If set to `false`, the node cannot be selected.
+- The plugin context `tf` and `api` now include `Editor` methods.

.changeset/plate-common.md

@@ -0,0 +1,8 @@
+---
+'@udecode/plate-common': major
+---
+
+This package is now deprecated and will be renamed to `@udecode/plate`. Migration:
+
+- Remove `@udecode/plate-common` and install `@udecode/plate`
+- Replace all `'@udecode/plate-common'` with `'@udecode/plate'`,

.changeset/plate-utils.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-utils': major
+---
+
+- Removed unused `moveSelectionByOffset`, `getLastBlockDOMNode`, `useLastBlock`, `useLastBlockDOMNode`

.changeset/plate.md

@@ -0,0 +1,123 @@
+---
+'@udecode/plate': major
+---
+
+**This package is now the new common package**, so all plugin packages are being removed. **Migration**:
+
+- Add the following dependencies:
+
+```json
+"@udecode/plate-alignment": "42.0.0",
+"@udecode/plate-autoformat": "42.0.0",
+"@udecode/plate-basic-elements": "42.0.0",
+"@udecode/plate-basic-marks": "42.0.0",
+"@udecode/plate-block-quote": "42.0.0",
+"@udecode/plate-break": "42.0.0",
+"@udecode/plate-code-block": "42.0.0",
+"@udecode/plate-combobox": "42.0.0",
+"@udecode/plate-comments": "42.0.0",
+"@udecode/plate-csv": "42.0.0",
+"@udecode/plate-diff": "42.0.0",
+"@udecode/plate-docx": "42.0.0",
+"@udecode/plate-find-replace": "42.0.0",
+"@udecode/plate-floating": "42.0.0",
+"@udecode/plate-font": "42.0.0",
+"@udecode/plate-heading": "42.0.0",
+"@udecode/plate-highlight": "42.0.0",
+"@udecode/plate-horizontal-rule": "42.0.0",
+"@udecode/plate-indent": "42.0.0",
+"@udecode/plate-indent-list": "42.0.0",
+"@udecode/plate-kbd": "42.0.0",
+"@udecode/plate-layout": "42.0.0",
+"@udecode/plate-line-height": "42.0.0",
+"@udecode/plate-link": "42.0.0",
+"@udecode/plate-list": "42.0.0",
+"@udecode/plate-markdown": "42.0.0",
+"@udecode/plate-media": "42.0.0",
+"@udecode/plate-mention": "42.0.0",
+"@udecode/plate-node-id": "42.0.0",
+"@udecode/plate-normalizers": "42.0.0",
+"@udecode/plate-reset-node": "42.0.0",
+"@udecode/plate-resizable": "42.0.0",
+"@udecode/plate-select": "42.0.0",
+"@udecode/plate-selection": "42.0.0",
+"@udecode/plate-slash-command": "42.0.0",
+"@udecode/plate-suggestion": "42.0.0",
+"@udecode/plate-tabbable": "42.0.0",
+"@udecode/plate-table": "42.0.0",
+"@udecode/plate-toggle": "42.0.0",
+"@udecode/plate-trailing-block": "42.0.0"
+```
+
+- Either replace all `@udecode/plate` imports with the individual package imports, or export the following in a new file (e.g. `src/plate.ts`):
+
+```ts
+export * from '@udecode/plate-alignment';
+export * from '@udecode/plate-autoformat';
+export * from '@udecode/plate-basic-elements';
+export * from '@udecode/plate-basic-marks';
+export * from '@udecode/plate-block-quote';
+export * from '@udecode/plate-break';
+export * from '@udecode/plate-code-block';
+export * from '@udecode/plate-combobox';
+export * from '@udecode/plate-comments';
+export * from '@udecode/plate-diff';
+export * from '@udecode/plate-find-replace';
+export * from '@udecode/plate-font';
+export * from '@udecode/plate-heading';
+export * from '@udecode/plate-highlight';
+export * from '@udecode/plate-horizontal-rule';
+export * from '@udecode/plate-indent';
+export * from '@udecode/plate-indent-list';
+export * from '@udecode/plate-kbd';
+export * from '@udecode/plate-layout';
+export * from '@udecode/plate-line-height';
+export * from '@udecode/plate-link';
+export * from '@udecode/plate-list';
+export * from '@udecode/plate-media';
+export * from '@udecode/plate-mention';
+export * from '@udecode/plate-node-id';
+export * from '@udecode/plate-normalizers';
+export * from '@udecode/plate-reset-node';
+export * from '@udecode/plate-select';
+export * from '@udecode/plate-csv';
+export * from '@udecode/plate-docx';
+export * from '@udecode/plate-markdown';
+export * from '@udecode/plate-slash-command';
+export * from '@udecode/plate-suggestion';
+export * from '@udecode/plate-tabbable';
+export * from '@udecode/plate-table';
+export * from '@udecode/plate-toggle';
+export * from '@udecode/plate-trailing-block';
+export * from '@udecode/plate-alignment/react';
+export * from '@udecode/plate-autoformat/react';
+export * from '@udecode/plate-basic-elements/react';
+export * from '@udecode/plate-basic-marks/react';
+export * from '@udecode/plate-block-quote/react';
+export * from '@udecode/plate-break/react';
+export * from '@udecode/plate-code-block/react';
+export * from '@udecode/plate-combobox/react';
+export * from '@udecode/plate-comments/react';
+export * from '@udecode/plate-floating';
+export * from '@udecode/plate-font/react';
+export * from '@udecode/plate-heading/react';
+export * from '@udecode/plate-highlight/react';
+export * from '@udecode/plate-layout/react';
+export * from '@udecode/plate-slash-command/react';
+export * from '@udecode/plate-indent/react';
+export * from '@udecode/plate-indent-list/react';
+export * from '@udecode/plate-kbd/react';
+export * from '@udecode/plate-line-height/react';
+export * from '@udecode/plate-link/react';
+export * from '@udecode/plate-list/react';
+export * from '@udecode/plate-media/react';
+export * from '@udecode/plate-reset-node/react';
+export * from '@udecode/plate-selection';
+export * from '@udecode/plate-suggestion/react';
+export * from '@udecode/plate-tabbable/react';
+export * from '@udecode/plate-table/react';
+export * from '@udecode/plate-toggle/react';
+export * from '@udecode/plate-resizable';
+```
+
+- Replace all `'@udecode/plate'` and `'@udecode/plate/react'` with `'@/plate'` in your codebase.

.changeset/react-utils.md

@@ -0,0 +1,5 @@
+---
+'@udecode/react-utils': patch
+---
+
+- Added a new hook, `useMemoizedSelector`, which re-renders only when the selector’s result changes.

.changeset/selection.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-selection': major
+---
+
+Remove first parameter of editor.api.blockSelection.duplicate

.changeset/slate-all-major.md

@@ -0,0 +1,6 @@
+---
+'@udecode/slate-react': major
+'@udecode/slate-utils': major
+---
+
+This package is now deprecated. Use `@udecode/slate` or `@udecode/plate` instead.