Allow Operation type to be extended (#4708)

* Allow Operation type to be extended

* fix lint

* add changeset

.changeset/tough-rockets-walk.md

@@ -0,0 +1,22 @@
+---
+'slate': patch
+---
+
+Allow `Operation` type to be extended
+
+For example:
+
+```
+import type { BaseOperation } from 'slate'
+
+type CustomOperation =
+ | BaseOperation
+ | YourCustomOperation
+ | AnotherCustomOperation
+
+declare module 'slate' {
+  interface CustomTypes {
+    Operation: CustomOperation;
+  }
+}
+```

packages/slate/src/interfaces/custom-types.ts

@@ -9,6 +9,7 @@ type ExtendableTypes =
   | 'Selection'
   | 'Range'
   | 'Point'
+  | 'Operation'
   | 'InsertNodeOperation'
   | 'InsertTextOperation'
   | 'MergeNodeOperation'

packages/slate/src/interfaces/operation.ts

@@ -135,7 +135,8 @@ export type TextOperation = InsertTextOperation | RemoveTextOperation
  * collaboration, and other features.
  */
 
-export type Operation = NodeOperation | SelectionOperation | TextOperation
+export type BaseOperation = NodeOperation | SelectionOperation | TextOperation
+export type Operation = ExtendedType<'Operation', BaseOperation>
 
 export interface OperationInterface {
   isNodeOperation: (value: any) => value is NodeOperation

packages/slate/test/interfaces/CustomTypes/custom-types.ts

@@ -4,6 +4,7 @@ import {
   BasePoint,
   BaseRange,
   Descendant,
+  Operation,
 } from 'slate'
 
 export type HeadingElement = {
@@ -25,6 +26,13 @@ export type CustomText = {
   text: string
 }
 
+export type CustomOperation = {
+  type: 'custom_op'
+  value: string
+}
+
+export type ExtendedOperation = Operation | CustomOperation
+
 export type CustomElement = HeadingElement | ListItemElement
 
 declare module 'slate' {
@@ -36,5 +44,6 @@ declare module 'slate' {
     Point: BasePoint
     Range: BaseRange
     Selection: BaseSelection
+    Operation: ExtendedOperation
   }
 }

packages/slate/test/interfaces/CustomTypes/customOperation-false.tsx

@@ -0,0 +1,13 @@
+import { Operation } from 'slate'
+import { isCustomOperation } from './type-guards'
+
+export const input: Operation = {
+  type: 'insert_text',
+  path: [0, 0],
+  offset: 0,
+  text: 'text',
+}
+
+export const test = isCustomOperation
+
+export const output = false

packages/slate/test/interfaces/CustomTypes/customOperation-true.tsx

@@ -0,0 +1,11 @@
+import { Operation } from 'slate'
+import { isCustomOperation } from './type-guards'
+
+export const input: Operation = {
+  type: 'custom_op',
+  value: 'some value',
+}
+
+export const test = isCustomOperation
+
+export const output = true

packages/slate/test/interfaces/CustomTypes/type-guards.ts

@@ -1,5 +1,5 @@
-import { Element, Text } from 'slate'
+import { Element, Text, Operation } from 'slate'
-import { CustomText, HeadingElement } from './custom-types'
+import { CustomText, CustomOperation, HeadingElement } from './custom-types'
 
 export const isBoldText = (text: Text): text is CustomText =>
   !!(text as CustomText).bold
@@ -7,5 +7,9 @@ export const isBoldText = (text: Text): text is CustomText =>
 export const isCustomText = (text: Text): text is CustomText =>
   !!(text as CustomText).placeholder
 
+export const isCustomOperation = (
+  op: Operation
+): Operation is CustomOperation => (op as CustomOperation).type === 'custom_op'
+
 export const isHeadingElement = (element: Element): element is HeadingElement =>
   element.type === 'heading'