feat(editor): audio block (#10947)

AudioMedia entity for loading & controlling a single audio media
AudioMediaManagerService: Global audio state synchronization across tabs
AudioAttachmentService + AudioAttachmentBlock for manipulating AttachmentBlock in affine - e.g., filling transcription (using mock endpoint for now)
Added AudioBlock + AudioPlayer for rendering audio block in affine (new transcription block whose renderer is provided in affine)

fix AF-2292
fix AF-2337

packages/frontend/component/src/lit-react/create-component.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
+import type { PropertyDeclaration } from 'lit';
 import type React from 'react';
 
 const DEV_MODE = process.env.NODE_ENV !== 'production';
@@ -164,6 +165,7 @@ const setProperty = <E extends Element>(
   name: string,
   value: unknown,
   old: unknown,
+  elementProperties?: Map<string, PropertyDeclaration>,
   events?: EventNames
 ) => {
   const event = events?.[name];
@@ -175,6 +177,15 @@ const setProperty = <E extends Element>(
   // But don't dirty check properties; elements are assumed to do this.
   node[name as keyof E] = value as E[keyof E];
 
+  if (elementProperties && elementProperties.has(name)) {
+    const property = elementProperties.get(name);
+    if (property?.attribute) {
+      const attributeName =
+        property.attribute === true ? name : property.attribute;
+      node.setAttribute(attributeName, value as string);
+    }
+  }
+
   // This block is to replicate React's behavior for attributes of native
   // elements where `undefined` or `null` values result in attributes being
   // removed.
@@ -302,6 +313,12 @@ export const createComponent = <
           props[prop],
           // @ts-expect-error: prop is a key of props
           prevPropsRef.current ? prevPropsRef.current[prop] : undefined,
+          'elementProperties' in elementClass
+            ? (elementClass.elementProperties as Map<
+                string,
+                PropertyDeclaration
+              >)
+            : undefined,
           events
         );
       }