1 files changed, 91 insertions, 0 deletions
diff --git a/frontend/src/components/document/nodes/StepsDiagramNode.tsx b/frontend/src/components/document/nodes/StepsDiagramNode.tsx
new file mode 100644
index 0000000..8b37f52
--- /dev/null
+++ b/frontend/src/components/document/nodes/StepsDiagramNode.tsx
@@ -0,0 +1,91 @@
+import {
+  DecoratorNode,
+  DOMExportOutput,
+  LexicalNode,
+  NodeKey,
+  SerializedLexicalNode,
+  Spread,
+} from 'lexical';
+import React from 'react';
+import { StepsDiagramComponent } from './StepsDiagramComponent';
+
+export type SerializedStepsDiagramNode = Spread<
+  {
+    directiveId: string;
+  },
+  SerializedLexicalNode
+>;
+
+export class StepsDiagramNode extends DecoratorNode<JSX.Element> {
+  __directiveId: string;
+
+  static getType(): string {
+    return 'steps-diagram';
+  }
+
+  static clone(node: StepsDiagramNode): StepsDiagramNode {
+    return new StepsDiagramNode(node.__directiveId, node.__key);
+  }
+
+  constructor(directiveId: string, key?: NodeKey) {
+    super(key);
+    this.__directiveId = directiveId;
+  }
+
+  createDOM(): HTMLElement {
+    const div = document.createElement('div');
+    div.className = 'steps-diagram-block';
+    return div;
+  }
+
+  updateDOM(): boolean {
+    return false;
+  }
+
+  decorate(): JSX.Element {
+    return <StepsDiagramComponent directiveId={this.__directiveId} />;
+  }
+
+  exportJSON(): SerializedStepsDiagramNode {
+    return {
+      ...super.exportJSON(),
+      type: 'steps-diagram',
+      directiveId: this.__directiveId,
+      version: 1,
+    };
+  }
+
+  static importJSON(serializedNode: SerializedStepsDiagramNode): StepsDiagramNode {
+    return $createStepsDiagramNode(serializedNode.directiveId);
+  }
+
+  isInline(): boolean {
+    return false;
+  }
+
+  canInsertTextBefore(): boolean {
+    return false;
+  }
+
+  canInsertTextAfter(): boolean {
+    return false;
+  }
+
+  exportDOM(): DOMExportOutput {
+    const element = document.createElement('div');
+    element.className = 'steps-diagram-block';
+    element.setAttribute('data-directive-id', this.__directiveId);
+    element.textContent = '[Steps Diagram]';
+    return { element };
+  }
+}
+
+export function $createStepsDiagramNode(directiveId: string): StepsDiagramNode {
+  return new StepsDiagramNode(directiveId);
+}
+
+export function $isStepsDiagramNode(
+  node: LexicalNode | null | undefined,
+): node is StepsDiagramNode {
+  return node instanceof StepsDiagramNode;
+}