Support ins and del tags

Author: ivarnakken

src/Editor.css

@@ -129,3 +129,18 @@
   box-shadow: 0 0 0 1.5px var(--color-gray-7);
   transition: box-shadow var(--easing-fast);
 }
+
+._legoEditor_inserted,
+._legoEditor_deleted {
+  text-decoration: none;
+}
+
+._legoEditor_inserted * {
+  background-color: var(--color-green-1);
+  color: var(--color-green-6);
+}
+
+._legoEditor_deleted * {
+  background-color: var(--color-red-1);
+  color: var(--danger-color);
+}

src/custom-types.ts

@@ -29,7 +29,9 @@ export type Elements =
   | 'figure'
   | 'image'
   | 'image_caption'
-  | 'quote';
+  | 'quote'
+  | 'ins'
+  | 'del';
 
 export type CustomText = { text: string } & {
   [key in Mark]?: boolean;
@@ -75,6 +77,14 @@ export type ListElement = {
   type: 'ol_list' | 'ul_list';
   children: (ListElement | ListItemElement)[];
 };
+export type InsertedElement = {
+  type: 'ins';
+  children: CustomText[];
+};
+export type DeletedElement = {
+  type: 'del';
+  children: CustomText[];
+};
 
 type CustomElement =
   | ListElement
@@ -85,7 +95,9 @@ type CustomElement =
   | FigureElement
   | QuoteElement
   | CodeBlockElement
-  | LinkElement;
+  | LinkElement
+  | InsertedElement
+  | DeletedElement;
 
 export interface ExtendedEditor extends BaseEditor {
   savedSelection?: BaseRange;

src/index.tsx

@@ -186,6 +186,10 @@ const renderElement = (props: RenderElementProps): JSX.Element => {
           {children}
         </a>
       );
+    case 'ins':
+      return <ins className="_legoEditor_inserted">{children}</ins>;
+    case 'del':
+      return <del className="_legoEditor_deleted">{children}</del>;
     default:
       return <p {...attributes}>{children}</p>;
   }

src/plugins/index.ts

@@ -99,6 +99,8 @@ const TEXT_BLOCKS: Elements[] = [
   'paragraph',
   'code_block',
   'quote',
+  'ins',
+  'del',
 ];
 
 /**

src/serializer.tsx

@@ -24,6 +24,8 @@ const ELEMENT_TAGS: TAGS = {
   figcaption: 'image_caption',
   a: 'link',
   blockquote: 'quote',
+  ins: 'ins',
+  del: 'del',
 };
 
 const MARK_TAGS = {
@@ -118,6 +120,10 @@ export const serialize = (node: SlateNode): string => {
       return `<a ${isInternalLink(node.url) ? '' : 'target="_blank" '}href="${node.url}">${children}</a>`;
     case 'quote':
       return `<blockquote>${children}</blockquote>`;
+    case 'ins':
+      return `<ins>${children}</ins>`;
+    case 'del':
+      return `<del>${children}</del>`;
     default:
       return children;
   }