refactor: plugin keys

Author: zbeyens

.github/workflows/lint-typecheck.yml

@@ -73,7 +73,7 @@ jobs:
         run: yarn lint
 
       - name: 🕵️ Typecheck
-        run: yarn typecheck && yarn g:typecheck:apps
+        run: yarn typecheck:all
 
   notify-lint-typecheck-failure:
     name: Discord Notification

BREAKING_CHANGES.md

@@ -1,6 +1,7 @@
 # 34.0.0
 
 ## @udecode/plate-selection@34.0.0
+
 - Breaking Change: The `selectedColor` option for `BlockSelectable` has been deprecated. Please use `useBlockSelected` to customize the style of each node component.
 
 - [#3241](https://github.com/udecode/plate/pull/3241) by [@felixfeng33](https://github.com/felixfeng33) – Add logic for the `block-context-menu` and improved the user experience for `block-selection`, such as interactions related to keyboard shortcuts, bug fixes.
@@ -193,10 +194,10 @@ None (CI release issue)
   - Caption is now a separate plugin. Install `@udecode/plate-caption` and add it to your plugins:
 
   ```ts
-  import { ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED } from '@udecode/plate-media';
+  import { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media';
 
   createCaptionPlugin({
-    options: { pluginKeys: [ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED] },
+    options: { pluginKeys: [ImagePlugin.key, ELEMENT_MEDIA_EMBED] },
   });
   ```
 
@@ -623,7 +624,7 @@ Migration:
 ### Major Changes
 
 - [#1871](https://github.com/udecode/plate/pull/1871) by [@zbeyens](https://github.com/zbeyens) –
-  - Removed `[ELEMENT_CODE_BLOCK]: CodeBlockElement` from Plate UI. You can define it in your app.
+  - Removed `[CodeBlockPlugin.key]: CodeBlockElement` from Plate UI. You can define it in your app.
 
 # 16.0.0
 
@@ -658,7 +659,7 @@ Migration:
 
 - [#1721](https://github.com/udecode/plate/pull/1721) by [@zbeyens](https://github.com/zbeyens) –
 - `TableElementBase` props:
-  - replace `onRenderContainer` by `floatingOptions` or by replacing `ELEMENT_TABLE` in the `createPlateUI` function.
+  - replace `onRenderContainer` by `floatingOptions` or by replacing `TablePlugin.key` in the `createPlateUI` function.
 - `TablePopover` is now a floating instead of tippy
 - deps:
   - replaced `plate-ui-popover` by `plate-floating`
@@ -1025,7 +1026,7 @@ getEmptyTableNode(editor, { rowCount: 2, colCount: 2 });
   // option 2: use createPlugins
   plugins = createPlugins(plugins, {
     components: {
-      [ELEMENT_PARAGRAPH]: ParagraphElement,
+      [ParagraphPlugin.key]: ParagraphElement,
     },
   });
 
@@ -1049,7 +1050,7 @@ getEmptyTableNode(editor, { rowCount: 2, colCount: 2 });
   // option 2: use createPlugins
   plugins = createPlugins(plugins, {
     overrideByKey: {
-      [ELEMENT_PARAGRAPH]: {
+      [ParagraphPlugin.key]: {
         type: 'paragraph',
       },
     },
@@ -1401,11 +1402,11 @@ getEmptyTableNode(editor, { rowCount: 2, colCount: 2 });
 ## `@udecode/plate-alignment`
 
 - `setAlign`: option `align` renamed to `value`
-- removed `getAlignOverrideProps()` in favor of `getOverrideProps(KEY_ALIGN)`
+- removed `getAlignOverrideProps()` in favor of `getOverrideProps(AlignPlugin.key)`
 
 ## `@udecode/plate-indent`
 
-- removed `getIndentOverrideProps()` in favor of `getOverrideProps(KEY_INDENT)`
+- removed `getIndentOverrideProps()` in favor of `getOverrideProps(IndentPlugin.key)`
 - rename `onKeyDownHandler` to `getIndentOnKeyDown()`
 - `IndentPluginOptions`
   - rename `types` to `validTypes`
@@ -1415,7 +1416,7 @@ getEmptyTableNode(editor, { rowCount: 2, colCount: 2 });
 ## `@udecode/plate-line-height`
 
 - `setLineHeight`: option `lineHeight` renamed to `value`
-- removed `getLineHeightOverrideProps` in favor of `getOverrideProps(KEY_LINE_HEIGHT)`
+- removed `getLineHeightOverrideProps` in favor of `getOverrideProps(LineHeightPlugin.key)`
 
 ## `@udecode/plate-mention`
 
@@ -1457,7 +1458,7 @@ The align plugin is no longer wrapping a block, but instead setting an `align` p
   - `ELEMENT_ALIGN_CENTER`
   - `ELEMENT_ALIGN_RIGHT`
   - `ELEMENT_ALIGN_JUSTIFY`
-  - `KEYS_ALIGN` in favor of `KEY_ALIGN`
+  - `KEYS_ALIGN` in favor of `AlignPlugin.key`
   - `getAlignDeserialize`
   - `upsertAlign` in favor of `setAlign`
 

apps/www/content/docs/accessing-editor.mdx

@@ -15,7 +15,7 @@ Use the first argument of the handler function.
 
 ```ts showLineNumbers {4,7}
 const createMyPlugin = createPlugin({
-  key: KEY_MY_PLUGIN,
+  key: 'my',
   handlers: {
     onKeyDown: (editor) => (event) => {
       // Do something with editor
@@ -35,7 +35,7 @@ For example, suppose you had this code and wanted to access the **`editor`** ins
 
 ```ts showLineNumbers
 const MyPlugin = createPlugin({
-  key: KEY_MY_PLUGIN,
+  key: 'my',
   deserializeHtml: {
     // Need editor here
   },
@@ -46,7 +46,7 @@ You would wrap the **`deserializeHtml`** option inside **`then`**.
 
 ```ts showLineNumbers {3,7}
 const MyPlugin = createPlugin({
-  key: KEY_MY_PLUGIN,
+  key: 'my',
   then: (editor) => ({
     deserializeHtml: {
       // Do something with editor
@@ -77,7 +77,7 @@ You can call these hooks from any React component that is rendered as a descenda
 
 ```tsx showLineNumbers {2}
 const Toolbar = () => {
-  const boldActive = useEditorSelector((editor) => isMarkActive(editor, MARK_BOLD), []);
+  const boldActive = useEditorSelector((editor) => isMarkActive(editor, BoldPlugin.key), []);
   // ...
 };
 

apps/www/content/docs/alignment.mdx

@@ -34,7 +34,7 @@ const plugins = [
     inject: {
       props: {
         validPlugins: [
-          ELEMENT_PARAGRAPH,
+          ParagraphPlugin.key,
           ELEMENT_H1,
           ELEMENT_H2,
           ELEMENT_H3,
@@ -65,7 +65,7 @@ The editor instance.
 <APISubListItem parent="options" name="key" type="string" optional>
 The plugin key.
 
-- **Default:** `KEY_ALIGN`
+- **Default:** `AlignPlugin.key`
 
 </APISubListItem>
 <APISubListItem parent="options" name="value" type="Alignment" optional>

apps/www/content/docs/api/core/plate-controller.mdx

@@ -119,7 +119,7 @@ const App = withHoc(PlateController, () => {
 
   const toggleBold = () => {
     if (activeEditor.isFallback) return;
-    toggleMark(activeEditor, { key: MARK_BOLD });
+    toggleMark(activeEditor, { key: BoldPlugin.key });
   };
 
   return (
@@ -146,7 +146,7 @@ const App = withHoc(PlateController, () => {
   const isFallback = !useEditorMounted();
 
   const toggleBold = () => {
-    toggleMark(activeEditor, { key: MARK_BOLD });
+    toggleMark(activeEditor, { key: BoldPlugin.key });
   };
 
   return (

apps/www/content/docs/api/core/plate-editor.mdx

@@ -11,7 +11,7 @@ A custom editor interface that extends the base **`TEditor`**, **`THistoryEditor
     type="(node?: Partial<TElement>, path?: Path) => EElement"
   >
     A factory function that generates a default block, which by default is a
-    block of type `ELEMENT_DEFAULT` with a single empty text child.
+    block of type `ParagraphPlugin.key` with a single empty text child.
   </APIItem>
   <APIItem name="childrenFactory" type="() => V">
     A factory function that generates the children of the editor, which by

apps/www/content/docs/api/core/plate-plugin.mdx

@@ -326,8 +326,8 @@ Property used by Plate to inject a component below other plugins `component`, i.
 Property that can be used by a plugin to allow other plugins to inject code.
 - Differs from `overrideByKey` as this is not overriding any plugin.
 - For example, if multiple plugins have defined
-`inject.editor.insertData.transformData` for `key=KEY_DESERIALIZE_HTML`,
-`insertData` plugin will call all of these `transformData` for `KEY_DESERIALIZE_HTML` plugin.
+`inject.editor.insertData.transformData` for `key=DeserializeHtmlPlugin.key`,
+`insertData` plugin will call all of these `transformData` for `DeserializeHtmlPlugin.key` plugin.
 - The value of this property is an object with keys being the plugin keys and values being the injected code.
 ```ts
 Record<PluginKey, Partial<AnyPlatePlugin>>
@@ -391,7 +391,7 @@ List of supported node values.
 
 Plugin keys required to inject the props.
 
-- Default: `[ELEMENT_DEFAULT]`
+- Default: `[ParagraphPlugin.key]`
 
 </APISubListItem>
 </APISubList>

apps/www/content/docs/autoformat.mdx

@@ -89,7 +89,7 @@ If using the [List plugin](/docs/list), you can use the following rules:
 
 ### createAutoformatPlugin
 
-[//]: # '- **`key: KEY_AUTOFORMAT`**'
+[//]: # '- **`key: AutoformatPlugin.key`**'
 
 <APIOptions>
 

apps/www/content/docs/basic-elements.mdx

@@ -38,7 +38,7 @@ docs:
 ```bash
 npm install @udecode/plate-basic-elements
 # or
-npm install @udecode/plate-block-quote @udecode/plate-code-block @udecode/plate-heading @udecode/plate-paragraph
+npm install @udecode/plate-block-quote @udecode/plate-code-block @udecode/plate-heading
 ```
 
 ## Usage

apps/www/content/docs/caption.mdx

@@ -30,7 +30,7 @@ import { createCaptionPlugin } from '@udecode/plate-caption';
 const plugins = [
   // ...otherPlugins,
   createCaptionPlugin({
-    options: { pluginKeys: [ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED] },
+    options: { pluginKeys: [ImagePlugin.key, MediaEmbedPlugin.key] },
   }),
 ];
 ```

apps/www/content/docs/combobox.mdx

@@ -7,7 +7,7 @@ description: Utilities for adding comboboxes to your editor.
 
 The TriggerComboboxPluginOptions mixin configures your plugin to insert a combobox input element when the user types a specified trigger character is typed.
 
-For example, the [Mention](/docs/mention) plugin uses TriggerComboboxPluginOptions to insert an `ELEMENT_MENTION_INPUT` whenever the user types `@`.
+For example, the [Mention](/docs/mention) plugin uses TriggerComboboxPluginOptions to insert an `MentionInputPlugin.key` whenever the user types `@`.
 
 ### Usage
 

apps/www/content/docs/excalidraw.mdx

@@ -27,7 +27,7 @@ npm install @udecode/plate-excalidraw
 ```tsx
 import {
   createExcalidrawPlugin,
-  ELEMENT_EXCALIDRAW,
+  ExcalidrawPlugin,
   ExcalidrawElement,
 } from '@udecode/plate-excalidraw';
 import { createSelectOnBackspacePlugin } from '@udecode/plate-select';
@@ -36,7 +36,7 @@ const plugins = [
   // ...otherPlugins
   createExcalidrawPlugin(),
   createSelectOnBackspacePlugin({
-    options: { query: { allow: [ELEMENT_EXCALIDRAW] } },
+    options: { query: { allow: [ExcalidrawPlugin.key] } },
   }),
 ];
 ```
@@ -63,7 +63,7 @@ The props and key for the Excalidraw element.
 <APISubListItem parent="props" name="key" type="string">
 The key for the Excalidraw element.
 
-- **Default:** `ELEMENT_EXCALIDRAW`
+- **Default:** `ExcalidrawPlugin.key`
 
 </APISubListItem>
 

apps/www/content/docs/exit-break.mdx

@@ -141,7 +141,7 @@ If true, exit relative to the selection.
 <APISubListItem parent="options" name="defaultType" type="function" optional>
 The default type of the node to be inserted upon exit.
 
-- **Default:** `getPluginType(editor, ELEMENT_DEFAULT)`
+- **Default:** `getPluginType(editor, ParagraphPlugin.key)`
 
 </APISubListItem>
 <APISubListItem parent="options" name="query" type="object" optional>

apps/www/content/docs/forced-layout.mdx

@@ -27,7 +27,7 @@ import { createTrailingBlockPlugin } from '@udecode/plate-trailing-block';
 
 const plugins = [
   // ...otherPlugins
-  createTrailingBlockPlugin({ options: { type: ELEMENT_PARAGRAPH } }),
+  createTrailingBlockPlugin({ options: { type: ParagraphPlugin.key } }),
   createNormalizeTypesPlugin({
     options: {
       rules: [{ path: [0], strictType: ELEMENT_H1 }],

apps/www/content/docs/getting-started.mdx

@@ -177,7 +177,7 @@ import {
 import { createBlockquotePlugin } from '@udecode/plate-block-quote';
 import { createPlugins, Plate } from '@udecode/plate-common';
 import { createHeadingPlugin } from '@udecode/plate-heading';
-import { createParagraphPlugin } from '@udecode/plate-paragraph';
+import { createParagraphPlugin } from '@udecode/plate-common';
 
 import { createPlateUI } from '@/lib/create-plate-ui';
 

apps/www/content/docs/horizontal-rule.mdx

@@ -27,9 +27,9 @@ npm install @udecode/plate-horizontal-rule
 
 ```tsx
 import { createAutoformatPlugin } from '@udecode/plate-autoformat';
-import { ELEMENT_DEFAULT, insertNodes, setNodes } from '@udecode/plate-common';
+import { ParagraphPlugin, insertNodes, setNodes } from '@udecode/plate-common';
 import {
-  ELEMENT_HR,
+  HorizontalRulePlugin,
   createHorizontalRulePlugin,
 } from '@udecode/plate-horizontal-rule';
 import { createSelectOnBackspacePlugin } from '@udecode/plate-select';
@@ -38,19 +38,19 @@ const plugins = [
   // ...otherPlugins,
   createHorizontalRulePlugin(),
   createSelectOnBackspacePlugin({
-    options: { query: { allow: [ELEMENT_HR] } },
+    options: { query: { allow: [HorizontalRulePlugin.key] } },
   }),
   createAutoformatPlugin({
     options: {
       rules: [
         {
           mode: 'block',
-          type: ELEMENT_HR,
+          type: HorizontalRulePlugin.key,
           match: ['---', '—-', '___ '],
           format: (editor) => {
-            setNodes(editor, { type: ELEMENT_HR });
+            setNodes(editor, { type: HorizontalRulePlugin.key });
             insertNodes(editor, {
-              type: ELEMENT_DEFAULT,
+              type: ParagraphPlugin.key,
               children: [{ text: '' }],
             });
           },

apps/www/content/docs/indent-list.mdx

@@ -41,14 +41,14 @@ const plugins = [
   createIndentPlugin({
     inject: {
       props: {
-        validPlugins: [ELEMENT_PARAGRAPH, ELEMENT_H1],
+        validPlugins: [ParagraphPlugin.key, ELEMENT_H1],
       },
     },
   }),
   createIndentListPlugin({
     inject: {
       props: {
-        validPlugins: [ELEMENT_PARAGRAPH, ELEMENT_H1],
+        validPlugins: [ParagraphPlugin.key, ELEMENT_H1],
       },
     },
   }),

apps/www/content/docs/indent.mdx

@@ -37,7 +37,7 @@ const plugins = [
   createIndentPlugin({
     inject: {
       props: {
-        validPlugins: [ELEMENT_PARAGRAPH, ELEMENT_H1],
+        validPlugins: [ParagraphPlugin.key, ELEMENT_H1],
       },
     },
   }),

apps/www/content/docs/list.mdx

@@ -73,10 +73,10 @@ const plugins = [
 
 - `key: 'list'`
 - Contains the following element plugins:
-  - `ELEMENT_UL`: plugin options below.
-  - `ELEMENT_OL`: plugin options below.
-  - `ELEMENT_LI`
-  - `ELEMENT_LIC`
+  - `ListUnorderedPlugin.key`: plugin options below.
+  - `ListOrderedPlugin.key`: plugin options below.
+  - `ListItemPlugin.key`
+  - `ListItemContentPlugin.key`
 
 <APIOptions>
   <APIItem name="validLiChildrenTypes" type="string[]" optional>
@@ -730,7 +730,7 @@ The pressed state of the button.
 <APIItem name="nodeType" type="string">
 The node type of the list.
 
-- **Default:** `ELEMENT_UL`
+- **Default:** `ListUnorderedPlugin.key`
 
 </APIItem>
 </APIState>