leaflet.pub
a tool for shared writing and social publishing
use special comparison for block props (#180)
authored by
GitHub
3afc1485
5d05e93a
+104
-1
+104
-1
components/Blocks/Block.tsx
+104
-1
components/Blocks/Block.tsx
···
29
29
import { MathBlock } from "./MathBlock";
30
30
import { CodeBlock } from "./CodeBlock";
31
31
import { HorizontalRule } from "./HorizontalRule";
32
+
import { deepEquals } from "src/utils/deepEquals";
32
33
33
34
export type Block = {
34
35
factID: string;
···
121
122
/>
122
123
</div>
123
124
);
124
-
});
125
+
}, deepEqualsBlockProps);
126
+
127
+
function deepEqualsBlockProps(
128
+
prevProps: BlockProps & { preview?: boolean },
129
+
nextProps: BlockProps & { preview?: boolean },
130
+
): boolean {
131
+
// Compare primitive fields
132
+
if (
133
+
prevProps.pageType !== nextProps.pageType ||
134
+
prevProps.entityID !== nextProps.entityID ||
135
+
prevProps.parent !== nextProps.parent ||
136
+
prevProps.position !== nextProps.position ||
137
+
prevProps.factID !== nextProps.factID ||
138
+
prevProps.value !== nextProps.value ||
139
+
prevProps.type !== nextProps.type ||
140
+
prevProps.nextPosition !== nextProps.nextPosition ||
141
+
prevProps.preview !== nextProps.preview
142
+
) {
143
+
return false;
144
+
}
145
+
146
+
// Compare listData if present
147
+
if (prevProps.listData !== nextProps.listData) {
148
+
if (!prevProps.listData || !nextProps.listData) {
149
+
return false; // One is undefined, the other isn't
150
+
}
151
+
152
+
if (
153
+
prevProps.listData.checklist !== nextProps.listData.checklist ||
154
+
prevProps.listData.parent !== nextProps.listData.parent ||
155
+
prevProps.listData.depth !== nextProps.listData.depth
156
+
) {
157
+
return false;
158
+
}
159
+
160
+
// Compare path array
161
+
if (prevProps.listData.path.length !== nextProps.listData.path.length) {
162
+
return false;
163
+
}
164
+
165
+
for (let i = 0; i < prevProps.listData.path.length; i++) {
166
+
if (
167
+
prevProps.listData.path[i].depth !== nextProps.listData.path[i].depth ||
168
+
prevProps.listData.path[i].entity !== nextProps.listData.path[i].entity
169
+
) {
170
+
return false;
171
+
}
172
+
}
173
+
}
174
+
175
+
// Compare nextBlock
176
+
if (prevProps.nextBlock !== nextProps.nextBlock) {
177
+
if (!prevProps.nextBlock || !nextProps.nextBlock) {
178
+
return false; // One is null, the other isn't
179
+
}
180
+
181
+
if (
182
+
prevProps.nextBlock.factID !== nextProps.nextBlock.factID ||
183
+
prevProps.nextBlock.parent !== nextProps.nextBlock.parent ||
184
+
prevProps.nextBlock.position !== nextProps.nextBlock.position ||
185
+
prevProps.nextBlock.value !== nextProps.nextBlock.value ||
186
+
prevProps.nextBlock.type !== nextProps.nextBlock.type
187
+
) {
188
+
return false;
189
+
}
190
+
191
+
// Compare nextBlock's listData (using deepEquals for simplicity)
192
+
if (
193
+
!deepEquals(prevProps.nextBlock.listData, nextProps.nextBlock.listData)
194
+
) {
195
+
return false;
196
+
}
197
+
}
198
+
199
+
// Compare previousBlock
200
+
if (prevProps.previousBlock !== nextProps.previousBlock) {
201
+
if (!prevProps.previousBlock || !nextProps.previousBlock) {
202
+
return false; // One is null, the other isn't
203
+
}
204
+
205
+
if (
206
+
prevProps.previousBlock.factID !== nextProps.previousBlock.factID ||
207
+
prevProps.previousBlock.parent !== nextProps.previousBlock.parent ||
208
+
prevProps.previousBlock.position !== nextProps.previousBlock.position ||
209
+
prevProps.previousBlock.value !== nextProps.previousBlock.value ||
210
+
prevProps.previousBlock.type !== nextProps.previousBlock.type
211
+
) {
212
+
return false;
213
+
}
214
+
215
+
// Compare previousBlock's listData (using deepEquals for simplicity)
216
+
if (
217
+
!deepEquals(
218
+
prevProps.previousBlock.listData,
219
+
nextProps.previousBlock.listData,
220
+
)
221
+
) {
222
+
return false;
223
+
}
224
+
}
225
+
226
+
return true;
227
+
}
125
228
126
229
export const BaseBlock = (
127
230
props: BlockProps & {