abc0990cba · March 13, 2024 15:23 · Sep 27, 2023 · Mar 29, 2023 · Mar 29, 2023
diff --git a/ReactToolFactory.tsx → 00-ReactToolFactory.tsx b/ReactToolFactory.tsx → 00-ReactToolFactory.tsx
diff --git a/ExampleUsageTool.tsx → 01-ExampleUsageTool.tsx b/ExampleUsageTool.tsx → 01-ExampleUsageTool.tsx
diff --git a/ExampleUsageTool.tsx b/ExampleUsageTool.tsx
@@ -0,0 +1,24 @@
+import makeReactTool from './ReactToolFactory'
+import type { ReactEditorToolProps } from './ReactToolFactory'
+
+interface ToolData {
+  clickCount: number
+}
+interface ToolConfig {}
+
+function Component({ onDataChange, data, readOnly }: ReactEditorToolProps<ToolData>) {
+  return (
+    <button onClick={() => onDataChange({ clickCount: data.clickCount + 1 })}>
+      Clicked {props.data.clickCount} Time(s)
+    </button>
+  )
+}
+
+export default makeReactTool<ToolData, ToolConfig>(
+  Component,
+  {
+    toolbox: { title: 'Tool!', icon: '<svg>...</svg>' },
+    isReadOnlySupported: true,
+    defaultData: { clickCount: 0 },
+  }
+)
diff --git a/ReactToolFactory.tsx b/ReactToolFactory.tsx
@@ -0,0 +1,86 @@
+// Based on https://walkthrough.so/pblc/QCawSCKwOQLn/creating-a-custom-editorjs-block-tool-with-react
+
+import type {
+  API,
+  BlockAPI,
+  BlockTool,
+  BlockToolConstructorOptions,
+} from '@editorjs/editorjs'
+import ReactDOM from 'react-dom'
+
+export interface ReactEditorToolProps<TData> {
+  onDataChange: (data: TData) => unknown
+  readOnly: boolean
+  data: TData
+}
+
+interface ReactToolConfig<TData, TConfig> {
+  toolbox: {
+    icon: string
+    title: string
+  }
+  isReadOnlySupported: boolean
+  defaultData: TData
+}
+
+export default function makeReactTool<
+  TData extends object,
+  TConfig extends object
+>(
+  Component: React.FC<ReactEditorToolProps<TData>>,
+  configuration: ReactToolConfig<TData, TConfig>
+) {
+  class ReactTool implements BlockTool {
+    static toolbox = configuration.toolbox
+    static isReadOnlySupported = configuration.isReadOnlySupported
+
+    private readOnly: boolean = false
+    private data: TData
+    private editorAPI: API
+    private blockAPI: BlockAPI | undefined
+    private config: TConfig | undefined
+    private wrapperEl: HTMLDivElement | null = null
+
+    constructor({
+      data,
+      config,
+      api,
+      block,
+      readOnly,
+    }: BlockToolConstructorOptions<TData, TConfig>) {
+      this.config = config
+      this.readOnly = readOnly
+      this.editorAPI = api
+      this.blockAPI = block
+      this.data = data ?? configuration.defaultData
+    }
+
+    render() {
+      const rootNode = document.createElement('div')
+      this.wrapperEl = rootNode
+
+      const onDataChange = (newData: TData) => {
+        this.data = {
+          ...newData,
+        }
+      }
+
+      ReactDOM.render(
+        <Component
+          onDataChange={onDataChange}
+          readOnly={this.readOnly}
+          data={this.data}
+        />,
+        rootNode
+      )
+
+      return this.wrapperEl
+    }
+
+    save() {
+      return this.data
+    }
+  }
+
+  return ReactTool
+}