⬆️ upgrade templates

.github/workflows/ci-templates.yml

@@ -0,0 +1,67 @@
+name: Build Templates
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'templates/**'
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - reopened
+    paths:
+      - 'templates/**'
+
+jobs:
+  build:
+    name: build
+    runs-on: ubuntu-20.04
+    strategy:
+      fail-fast: false
+      matrix:
+        template:
+          - plate-template
+          - plate-playground-template
+    defaults:
+      run:
+        working-directory: templates/${{ matrix.template }}
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+        with:
+          # Fetch all git history so that yarn workspaces --since can compare with the correct commits
+          # @link https://github.com/actions/checkout#fetch-all-history-for-all-tags-and-branches
+          fetch-depth: 0
+
+      - uses: pnpm/[email protected]
+        name: Install pnpm
+        with:
+          version: 8.6.1
+          run_install: false
+
+      - name: Use Node.js 16
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: "pnpm"
+          cache-dependency-path: '**/pnpm-lock.yaml' # THIS PATTERN did the trick for me.
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm build

apps/www/.gitignore

@@ -1,2 +1,3 @@
 .next
 .contentlayer
+tsconfig.tsbuildinfo

apps/www/content/docs/api/core.mdx

@@ -71,7 +71,7 @@ Generates a new instance of a `PlateEditor`, initialized with a set of plugins a
   <APIItem name="editor" type="TEditor<V>" optional>
     Initial editor without `withPlate`.
   </APIItem>
-  <APIItem name="plugins" type="PlatePlugin<PluginOptions, V>[]" optional>
+  <APIItem name="plugins" type="PlatePlugin[]" optional>
     An array of editor plugins.
   </APIItem>
   <APIItem

apps/www/src/app/_components/installation-tab.tsx

@@ -199,7 +199,13 @@ export default function InstallationTab() {
       '',
       ...componentImportsGroup,
     ].join('\n');
-  }, [componentImports, customImports, groupedImportsByPackage, plateImports]);
+  }, [
+    componentImports,
+    customImports,
+    groupedImportsByPackage,
+    hasEditor,
+    plateImports,
+  ]);
 
   const pluginsCode: string[] = [];
 

apps/www/src/lib/plate/demo/plugins/TabbableElement.tsx

@@ -2,8 +2,6 @@ import React, { CSSProperties } from 'react';
 import { PlateElementProps } from '@udecode/plate-common';
 import { useFocused, useSelected } from 'slate-react';
 
-import { MyValue } from '@/types/plate-types';
-
 const boxStyle: CSSProperties = {
   padding: '8px',
   marginBottom: '8px',
@@ -19,10 +17,7 @@ const selectedBoxStyle: CSSProperties = {
   border: '2px solid blue',
 };
 
-export function TabbableElement({
-  attributes,
-  children,
-}: PlateElementProps<MyValue>) {
+export function TabbableElement({ attributes, children }: PlateElementProps) {
   const selected = useSelected();
   const focused = useFocused();
 

apps/www/src/lib/plate/demo/plugins/alignPlugin.ts

@@ -1,3 +1,4 @@
+import { PlatePlugin } from '@udecode/plate-common';
 import {
   ELEMENT_H1,
   ELEMENT_H2,
@@ -8,9 +9,7 @@ import {
 } from '@udecode/plate-heading';
 import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
 
-import { MyPlatePlugin } from '@/types/plate-types';
-
-export const alignPlugin: Partial<MyPlatePlugin> = {
+export const alignPlugin: Partial<PlatePlugin> = {
   inject: {
     props: {
       validTypes: [

apps/www/src/lib/plate/demo/plugins/autoformatPlugin.ts

@@ -1,13 +1,10 @@
 import { AutoformatPlugin } from '@udecode/plate-autoformat';
-
-import { MyEditor, MyPlatePlugin, MyValue } from '@/types/plate-types';
+import { PlatePlugin } from '@udecode/plate-common';
 
 import { autoformatLists } from './autoformatLists';
 import { autoformatRules } from './autoformatRules';
 
-export const autoformatPlugin: Partial<
-  MyPlatePlugin<AutoformatPlugin<MyValue, MyEditor>>
-> = {
+export const autoformatPlugin: Partial<PlatePlugin<AutoformatPlugin>> = {
   options: {
     rules: [...autoformatRules, ...autoformatLists] as any,
     enableUndoOnDelete: true,

apps/www/src/lib/plate/demo/plugins/basicElementsPlugins.ts

@@ -1,12 +1,11 @@
 import { plateUI } from '@/plate/demo/plateUI';
 import { createBlockquotePlugin } from '@udecode/plate-block-quote';
 import { createCodeBlockPlugin } from '@udecode/plate-code-block';
+import { createPlugins } from '@udecode/plate-common';
 import { createHeadingPlugin } from '@udecode/plate-heading';
 import { createParagraphPlugin } from '@udecode/plate-paragraph';
 
-import { createMyPlugins } from '@/types/plate-types';
-
-export const basicElementsPlugins = createMyPlugins(
+export const basicElementsPlugins = createPlugins(
   [
     createBlockquotePlugin(),
     createCodeBlockPlugin(),

apps/www/src/lib/plate/demo/plugins/basicMarksPlugins.ts

@@ -8,10 +8,9 @@ import {
   createSuperscriptPlugin,
   createUnderlinePlugin,
 } from '@udecode/plate-basic-marks';
+import { createPlugins } from '@udecode/plate-common';
 
-import { createMyPlugins } from '@/types/plate-types';
-
-export const basicMarksPlugins = createMyPlugins(
+export const basicMarksPlugins = createPlugins(
   [
     createBoldPlugin(),
     createCodePlugin(),

apps/www/src/lib/plate/demo/plugins/basicNodesPlugins.ts

@@ -1,11 +1,10 @@
 import { plateUI } from '@/plate/demo/plateUI';
-
-import { createMyPlugins } from '@/types/plate-types';
+import { createPlugins } from '@udecode/plate-common';
 
 import { basicElementsPlugins } from './basicElementsPlugins';
 import { basicMarksPlugins } from './basicMarksPlugins';
 
-export const basicNodesPlugins = createMyPlugins(
+export const basicNodesPlugins = createPlugins(
   [...basicElementsPlugins, ...basicMarksPlugins],
   {
     components: plateUI,

apps/www/src/lib/plate/demo/plugins/captionPlugin.ts

@@ -1,9 +1,8 @@
 import { CaptionPlugin } from '@udecode/plate-caption';
+import { PlatePlugin } from '@udecode/plate-common';
 import { ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED } from '@udecode/plate-media';
 
-import { MyPlatePlugin } from '@/types/plate-types';
-
-export const captionPlugin: Partial<MyPlatePlugin<CaptionPlugin>> = {
+export const captionPlugin: Partial<PlatePlugin<CaptionPlugin>> = {
   options: {
     pluginKeys: [ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED],
   },

apps/www/src/lib/plate/demo/plugins/dragOverCursorPlugin.ts

@@ -1,11 +1,10 @@
-import { findEventRange } from '@udecode/plate-common';
+import { findEventRange, PlatePlugin } from '@udecode/plate-common';
 
-import { MyPlatePlugin } from '@/types/plate-types';
 import { cursorStore } from '@/registry/default/plate-ui/cursor-overlay';
 
 export const KEY_DRAG_OVER_CURSOR = 'dragOverCursor';
 
-export const dragOverCursorPlugin: MyPlatePlugin = {
+export const dragOverCursorPlugin: PlatePlugin = {
   key: KEY_DRAG_OVER_CURSOR,
   handlers: {
     onDragOver: (editor) => (event) => {

apps/www/src/lib/plate/demo/plugins/emojiPlugin.ts

@@ -1,8 +1,8 @@
+import { PlatePlugin } from '@udecode/plate-common';
 import { EmojiPlugin } from '@udecode/plate-emoji';
 
-import { MyPlatePlugin } from '@/types/plate-types';
 import { EmojiCombobox } from '@/registry/default/plate-ui/emoji-combobox';
 
-export const emojiPlugin: Partial<MyPlatePlugin<EmojiPlugin>> = {
+export const emojiPlugin: Partial<PlatePlugin<EmojiPlugin>> = {
   renderAfterEditable: EmojiCombobox,
 };

apps/www/src/lib/plate/demo/plugins/exitBreakPlugin.ts

@@ -1,9 +1,8 @@
 import { ExitBreakPlugin } from '@udecode/plate-break';
+import { PlatePlugin } from '@udecode/plate-common';
 import { KEYS_HEADING } from '@udecode/plate-heading';
 
-import { MyPlatePlugin } from '@/types/plate-types';
-
-export const exitBreakPlugin: Partial<MyPlatePlugin<ExitBreakPlugin>> = {
+export const exitBreakPlugin: Partial<PlatePlugin<ExitBreakPlugin>> = {
   options: {
     rules: [
       {

apps/www/src/lib/plate/demo/plugins/forcedLayoutPlugin.ts

@@ -1,11 +1,9 @@
+import { PlatePlugin } from '@udecode/plate-common';
 import { ELEMENT_H1 } from '@udecode/plate-heading';
 import { NormalizeTypesPlugin } from '@udecode/plate-normalizers';
 
-import { MyPlatePlugin } from '@/types/plate-types';
-
-export const forcedLayoutPlugin: Partial<MyPlatePlugin<NormalizeTypesPlugin>> =
-  {
-    options: {
-      rules: [{ path: [0], strictType: ELEMENT_H1 }],
-    },
-  };
+export const forcedLayoutPlugin: Partial<PlatePlugin<NormalizeTypesPlugin>> = {
+  options: {
+    rules: [{ path: [0], strictType: ELEMENT_H1 }],
+  },
+};

apps/www/src/lib/plate/demo/plugins/imagePlugins.ts

@@ -1,15 +1,14 @@
 import { plateUI } from '@/plate/demo/plateUI';
 import { createBasicElementsPlugin } from '@udecode/plate-basic-elements';
 import { createComboboxPlugin } from '@udecode/plate-combobox';
+import { createPlugins } from '@udecode/plate-core';
 import { createImagePlugin } from '@udecode/plate-media';
 import { createSelectOnBackspacePlugin } from '@udecode/plate-select';
 
-import { createMyPlugins } from '@/types/plate-types';
-
 import { basicMarksPlugins } from './basicMarksPlugins';
 import { selectOnBackspacePlugin } from './selectOnBackspacePlugin';
 
-export const imagePlugins = createMyPlugins(
+export const imagePlugins = createPlugins(
   [
     createBasicElementsPlugin(),
     ...basicMarksPlugins,

apps/www/src/lib/plate/demo/plugins/indentListPlugin.ts

@@ -1,5 +1,6 @@
 import { ELEMENT_BLOCKQUOTE } from '@udecode/plate-block-quote';
 import { ELEMENT_CODE_BLOCK } from '@udecode/plate-code-block';
+import { PlatePlugin } from '@udecode/plate-common';
 import {
   ELEMENT_H1,
   ELEMENT_H2,
@@ -11,9 +12,7 @@ import {
 import { IndentListPlugin } from '@udecode/plate-indent-list';
 import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
 
-import { MyPlatePlugin } from '@/types/plate-types';
-
-export const indentListPlugin: Partial<MyPlatePlugin<IndentListPlugin>> = {
+export const indentListPlugin: Partial<PlatePlugin<IndentListPlugin>> = {
   inject: {
     props: {
       validTypes: [

apps/www/src/lib/plate/demo/plugins/lineHeightPlugin.ts

@@ -1,3 +1,4 @@
+import { PlatePlugin } from '@udecode/plate-common';
 import {
   ELEMENT_H1,
   ELEMENT_H2,
@@ -8,9 +9,7 @@ import {
 } from '@udecode/plate-heading';
 import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
 
-import { MyPlatePlugin } from '@/types/plate-types';
-
-export const lineHeightPlugin: Partial<MyPlatePlugin> = {
+export const lineHeightPlugin: Partial<PlatePlugin> = {
   inject: {
     props: {
       defaultNodeValue: 1.5,