{newChildren};
+ }
+
+ if (leaf.italic) {
+ newChildren = {newChildren};
+ }
+
+ if (leaf.underlined) {
+ newChildren = {newChildren};
+ }
+
+ return (
+
+ {newChildren}
+
+ );
+};
+
+export default Leaf;
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/TextBlock.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/TextBlock.hooks.ts
new file mode 100644
index 0000000000..6d896c2182
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/TextBlock.hooks.ts
@@ -0,0 +1,75 @@
+import { triggerHotkey } from "@/appflowy_app/utils/slate/hotkey";
+import { useCallback, useContext, useState } from "react";
+import { Descendant, Range } from "slate";
+import { useBindYjs } from "./BindYjs.hooks";
+import { YDocControllerContext } from '../../../stores/effects/document/document_controller';
+import { Delta } from "@slate-yjs/core/dist/model/types";
+import { TextDelta } from '../../../interfaces/document';
+
+function useController(textId: string) {
+ const docController = useContext(YDocControllerContext);
+
+ const update = useCallback(
+ (delta: Delta) => {
+ docController?.yTextApply(textId, delta)
+ },
+ [textId],
+ )
+
+ return {
+ update
+ }
+}
+
+export function useTextBlock(text: string, delta: TextDelta[]) {
+ const { update } = useController(text);
+ const { editor } = useBindYjs(delta, update);
+ const [value, setValue] = useStateSomething went wrong:
+{error.message}
+
+