Allow access to the seven block id from an editor handler

Author: reebalazs

packages/cmsui/routes/edit.tsx

@@ -100,6 +100,12 @@ export default function Edit() {
   ]);
   const initialValue = blocksToPlateNew(content);
 
+  const editorCallbacks = {
+    openSideBar: (id: string) => {
+      console.log('editorCallbacks.openSideBar called with id:', id);
+    },
+  };
+
   return (
     <InitAtoms atomValues={[[formAtom, content]]}>
       <main className="mx-4 mt-8 flex h-screen flex-1 flex-col">
@@ -209,6 +215,7 @@ export default function Edit() {
                             field.handleChange(newValue);
                           }}
                           emblaApi={emblaApi2}
+                          editorCallbacks={editorCallbacks}
                         />
                       </div>
                       <div className="mt-4 w-[900px]">

packages/editor/components/editor/get-seven-block-id-from-handler.ts

@@ -0,0 +1,10 @@
+export const getSevenBlockIdFromHandler = (api: any): string =>
+  // Find the first node above the current node which has an id which is an uuid.
+  // Unfortunately, the sub-nodes in the tree can also have ids, which are not
+  // Seven ids, so we need to filter them out.k
+  api.above({
+    match: (node: any) =>
+      node.id?.match(
+        /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/,
+      ),
+  })[0]?.id;

packages/editor/components/editor/plate-editor.tsx

@@ -13,10 +13,14 @@ import { useSetAtom } from 'jotai';
 export function PlateEditor(props: {
   value?: Value;
   onChange?: (value: Value) => void;
+  editorCallbacks?: Record<string, any>;
 }) {
-  const editor = useCreateEditor({ value: props.value });
+  const editor = useCreateEditor({
+    value: props.value,
+  });
   const setEditorState = useSetAtom(editorAtom);
   editor.emblaApi = props.emblaApi;
+  editor.editorCallbacks = props.editorCallbacks;
 
   return (
     <>

packages/editor/components/editor/use-create-editor.ts

@@ -99,19 +99,22 @@ import { TableRowElement } from '@/components/plate-ui/table-row-element';
 import { TocElement } from '@/components/plate-ui/toc-element';
 import { ToggleElement } from '@/components/plate-ui/toggle-element';
 import UnknownElement from '@/components/plate-ui/unknown-element';
+import { getSevenBlockIdFromHandler } from '@/components/editor/get-seven-block-id-from-handler';
 
 const TitlePlugin = createPlatePlugin({
   key: 'title',
   node: {
     isElement: true,
     type: 'title',
   },
-  // handlers: {
-  //   onKeyDown: ({ editor }) => {
-  //     // Prevent default behavior for title
-  //     console.log('TitlePlugin: onKeyDown');
-  //   },
-  // },
+  handlers: {
+    onClick: ({ editor, api }) => {
+      editor.editorCallbacks?.openSideBar?.(getSevenBlockIdFromHandler(api));
+    },
+    onKeyDown: ({ editor, api }) => {
+      editor.editorCallbacks?.openSideBar?.(getSevenBlockIdFromHandler(api));
+    },
+  },
 });
 
 const UnknownElementPlugin = createPlatePlugin({