@incremark/react 0.2.4 → 0.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +31 -5
- package/dist/index.js +126 -97
- package/package.json +5 -5
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ParserOptions, AnimationEffect, TransformerPlugin, ParsedBlock, Root, IncrementalUpdate, IncremarkParser, SourceBlock, TransformerOptions, DisplayBlock, BlockTransformer
|
|
1
|
+
import { ParserOptions, AnimationEffect, TransformerPlugin, ParsedBlock, Root, IncrementalUpdate, IncremarkParser, SourceBlock, TransformerOptions, DisplayBlock, BlockTransformer } from '@incremark/core';
|
|
2
2
|
export { AnimationEffect, BlockTransformer, DisplayBlock, IncrementalUpdate, ParsedBlock, ParserOptions, Root, RootContent, SourceBlock, TransformerOptions, TransformerPlugin, TransformerState, allPlugins, cloneNode, codeBlockPlugin, countChars, createBlockTransformer, createPlugin, defaultPlugins, imagePlugin, mathPlugin, mermaidPlugin, sliceAst, thematicBreakPlugin } from '@incremark/core';
|
|
3
3
|
import React, { ReactNode } from 'react';
|
|
4
4
|
import { Definition, FootnoteDefinition, RootContent, PhrasingContent } from 'mdast';
|
|
@@ -180,6 +180,13 @@ declare function useIncremark(options?: UseIncremarkOptions): {
|
|
|
180
180
|
isLoading: boolean;
|
|
181
181
|
/** 是否已完成(finalize) */
|
|
182
182
|
isFinalized: boolean;
|
|
183
|
+
/**
|
|
184
|
+
* 内容是否完全显示完成
|
|
185
|
+
* - 无打字机:等于 isFinalized
|
|
186
|
+
* - 有打字机:isFinalized + 动画播放完成
|
|
187
|
+
* 适用于控制 footnote 等需要在内容完全显示后才出现的元素
|
|
188
|
+
*/
|
|
189
|
+
isDisplayComplete: boolean;
|
|
183
190
|
/** 追加内容 */
|
|
184
191
|
append: (chunk: string) => IncrementalUpdate;
|
|
185
192
|
/** 完成解析 */
|
|
@@ -291,9 +298,19 @@ interface BlockWithStableId extends ParsedBlock {
|
|
|
291
298
|
stableId: string;
|
|
292
299
|
isLastPending?: boolean;
|
|
293
300
|
}
|
|
301
|
+
/**
|
|
302
|
+
* 代码块配置
|
|
303
|
+
*/
|
|
304
|
+
interface CodeBlockConfig {
|
|
305
|
+
/** 是否从一开始就接管渲染,而不是等到 completed 状态 */
|
|
306
|
+
takeOver?: boolean;
|
|
307
|
+
}
|
|
294
308
|
interface IncremarkProps {
|
|
295
309
|
/** 要渲染的块列表 */
|
|
296
310
|
blocks?: BlockWithStableId[];
|
|
311
|
+
/** 内容是否完全显示完成(用于控制脚注等需要在内容完全显示后才出现的元素)
|
|
312
|
+
* 如果传入了 incremark,则会自动使用 incremark.isDisplayComplete,此 prop 被忽略 */
|
|
313
|
+
isDisplayComplete?: boolean;
|
|
297
314
|
/** 自定义组件映射 */
|
|
298
315
|
components?: Partial<Record<string, React.ComponentType<{
|
|
299
316
|
node: any;
|
|
@@ -307,8 +324,12 @@ interface IncremarkProps {
|
|
|
307
324
|
/** 自定义代码块组件映射,key 为代码语言名称(如 'echart', 'mermaid') */
|
|
308
325
|
customCodeBlocks?: Record<string, React.ComponentType<{
|
|
309
326
|
codeStr: string;
|
|
310
|
-
lang?: string;
|
|
327
|
+
lang?: string | undefined;
|
|
328
|
+
completed?: boolean | undefined;
|
|
329
|
+
takeOver?: boolean | undefined;
|
|
311
330
|
}>>;
|
|
331
|
+
/** 代码块配置映射,key 为代码语言名称 */
|
|
332
|
+
codeBlockConfigs?: Record<string, CodeBlockConfig>;
|
|
312
333
|
/** 是否显示块状态(待处理块边框) */
|
|
313
334
|
showBlockStatus?: boolean;
|
|
314
335
|
/** 自定义类名 */
|
|
@@ -344,19 +365,24 @@ interface ContainerNode {
|
|
|
344
365
|
}
|
|
345
366
|
|
|
346
367
|
interface IncremarkRendererProps {
|
|
347
|
-
node: RootContent
|
|
368
|
+
node: RootContent | ContainerNode;
|
|
348
369
|
components?: Partial<Record<string, React.ComponentType<{
|
|
349
|
-
node:
|
|
370
|
+
node: any;
|
|
350
371
|
}>>>;
|
|
351
372
|
customContainers?: Record<string, React.ComponentType<{
|
|
352
373
|
name: string;
|
|
353
374
|
options?: Record<string, any>;
|
|
354
|
-
children?:
|
|
375
|
+
children?: ReactNode;
|
|
355
376
|
}>>;
|
|
356
377
|
customCodeBlocks?: Record<string, React.ComponentType<{
|
|
357
378
|
codeStr: string;
|
|
358
379
|
lang?: string;
|
|
380
|
+
completed?: boolean;
|
|
381
|
+
takeOver?: boolean;
|
|
359
382
|
}>>;
|
|
383
|
+
codeBlockConfigs?: Record<string, {
|
|
384
|
+
takeOver?: boolean;
|
|
385
|
+
}>;
|
|
360
386
|
blockStatus?: 'pending' | 'stable' | 'completed';
|
|
361
387
|
}
|
|
362
388
|
/**
|
package/dist/index.js
CHANGED
|
@@ -146,6 +146,7 @@ function useTypewriter(options) {
|
|
|
146
146
|
typewriterConfig?.effect ?? "none"
|
|
147
147
|
);
|
|
148
148
|
const [displayBlocks, setDisplayBlocks] = useState2([]);
|
|
149
|
+
const [isAnimationComplete, setIsAnimationComplete] = useState2(true);
|
|
149
150
|
if (hasTypewriterConfig && !transformerRef.current) {
|
|
150
151
|
const twOptions = typewriterConfig;
|
|
151
152
|
transformerRef.current = createBlockTransformer({
|
|
@@ -158,6 +159,12 @@ function useTypewriter(options) {
|
|
|
158
159
|
setDisplayBlocks(blocks2);
|
|
159
160
|
setIsTypewriterProcessing(transformerRef.current?.isProcessing() ?? false);
|
|
160
161
|
setIsTypewriterPaused(transformerRef.current?.isPausedState() ?? false);
|
|
162
|
+
if (transformerRef.current?.isProcessing()) {
|
|
163
|
+
setIsAnimationComplete(false);
|
|
164
|
+
}
|
|
165
|
+
},
|
|
166
|
+
onAllComplete: () => {
|
|
167
|
+
setIsAnimationComplete(true);
|
|
161
168
|
}
|
|
162
169
|
});
|
|
163
170
|
}
|
|
@@ -283,7 +290,8 @@ function useTypewriter(options) {
|
|
|
283
290
|
return {
|
|
284
291
|
blocks,
|
|
285
292
|
typewriter: typewriterControls,
|
|
286
|
-
transformer
|
|
293
|
+
transformer,
|
|
294
|
+
isAnimationComplete
|
|
287
295
|
};
|
|
288
296
|
}
|
|
289
297
|
|
|
@@ -318,11 +326,34 @@ function useIncremark(options = {}) {
|
|
|
318
326
|
const [pendingBlocks, setPendingBlocks] = useState3([]);
|
|
319
327
|
const [isLoading, setIsLoading] = useState3(false);
|
|
320
328
|
const [isFinalized, setIsFinalized] = useState3(false);
|
|
321
|
-
const
|
|
329
|
+
const handleUpdate = useCallback3(
|
|
330
|
+
(update, isFinalize) => {
|
|
331
|
+
setMarkdown(parser.getBuffer());
|
|
332
|
+
if (update.completed.length > 0) {
|
|
333
|
+
setCompletedBlocks((prev) => [...prev, ...update.completed]);
|
|
334
|
+
}
|
|
335
|
+
setPendingBlocks(update.pending);
|
|
336
|
+
if (isFinalize) {
|
|
337
|
+
setIsLoading(false);
|
|
338
|
+
setIsFinalized(true);
|
|
339
|
+
} else {
|
|
340
|
+
setIsLoading(true);
|
|
341
|
+
}
|
|
342
|
+
setFootnoteReferenceOrder(update.footnoteReferenceOrder);
|
|
343
|
+
},
|
|
344
|
+
[parser, setFootnoteReferenceOrder]
|
|
345
|
+
);
|
|
346
|
+
const { blocks, typewriter, transformer, isAnimationComplete } = useTypewriter({
|
|
322
347
|
typewriter: options.typewriter,
|
|
323
348
|
completedBlocks,
|
|
324
349
|
pendingBlocks
|
|
325
350
|
});
|
|
351
|
+
const isDisplayComplete = useMemo2(() => {
|
|
352
|
+
if (!options.typewriter || !typewriter.enabled) {
|
|
353
|
+
return isFinalized;
|
|
354
|
+
}
|
|
355
|
+
return isFinalized && isAnimationComplete;
|
|
356
|
+
}, [options.typewriter, typewriter.enabled, isFinalized, isAnimationComplete]);
|
|
326
357
|
const ast = useMemo2(
|
|
327
358
|
() => ({
|
|
328
359
|
type: "root",
|
|
@@ -332,30 +363,17 @@ function useIncremark(options = {}) {
|
|
|
332
363
|
);
|
|
333
364
|
const append = useCallback3(
|
|
334
365
|
(chunk) => {
|
|
335
|
-
setIsLoading(true);
|
|
336
366
|
const update = parser.append(chunk);
|
|
337
|
-
|
|
338
|
-
if (update.completed.length > 0) {
|
|
339
|
-
setCompletedBlocks((prev) => [...prev, ...update.completed]);
|
|
340
|
-
}
|
|
341
|
-
setPendingBlocks(update.pending);
|
|
342
|
-
setFootnoteReferenceOrder(update.footnoteReferenceOrder);
|
|
367
|
+
handleUpdate(update, false);
|
|
343
368
|
return update;
|
|
344
369
|
},
|
|
345
|
-
[parser,
|
|
370
|
+
[parser, handleUpdate]
|
|
346
371
|
);
|
|
347
372
|
const finalize = useCallback3(() => {
|
|
348
373
|
const update = parser.finalize();
|
|
349
|
-
|
|
350
|
-
if (update.completed.length > 0) {
|
|
351
|
-
setCompletedBlocks((prev) => [...prev, ...update.completed]);
|
|
352
|
-
}
|
|
353
|
-
setPendingBlocks([]);
|
|
354
|
-
setIsLoading(false);
|
|
355
|
-
setIsFinalized(true);
|
|
356
|
-
setFootnoteReferenceOrder(update.footnoteReferenceOrder);
|
|
374
|
+
handleUpdate(update, true);
|
|
357
375
|
return update;
|
|
358
|
-
}, [parser,
|
|
376
|
+
}, [parser, handleUpdate]);
|
|
359
377
|
const abort = useCallback3(() => {
|
|
360
378
|
return finalize();
|
|
361
379
|
}, [finalize]);
|
|
@@ -397,6 +415,13 @@ function useIncremark(options = {}) {
|
|
|
397
415
|
isLoading,
|
|
398
416
|
/** 是否已完成(finalize) */
|
|
399
417
|
isFinalized,
|
|
418
|
+
/**
|
|
419
|
+
* 内容是否完全显示完成
|
|
420
|
+
* - 无打字机:等于 isFinalized
|
|
421
|
+
* - 有打字机:isFinalized + 动画播放完成
|
|
422
|
+
* 适用于控制 footnote 等需要在内容完全显示后才出现的元素
|
|
423
|
+
*/
|
|
424
|
+
isDisplayComplete,
|
|
400
425
|
/** 追加内容 */
|
|
401
426
|
append,
|
|
402
427
|
/** 完成解析 */
|
|
@@ -522,9 +547,6 @@ function useBlockTransformer(sourceBlocks, options = {}) {
|
|
|
522
547
|
};
|
|
523
548
|
}
|
|
524
549
|
|
|
525
|
-
// src/components/IncremarkRenderer.tsx
|
|
526
|
-
import React6 from "react";
|
|
527
|
-
|
|
528
550
|
// src/components/IncremarkInline.tsx
|
|
529
551
|
import React3 from "react";
|
|
530
552
|
import {
|
|
@@ -827,10 +849,12 @@ import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
|
827
849
|
var IncremarkCode = ({
|
|
828
850
|
node,
|
|
829
851
|
theme = "github-dark",
|
|
852
|
+
fallbackTheme = "github-dark",
|
|
830
853
|
disableHighlight = false,
|
|
831
854
|
mermaidDelay = 500,
|
|
832
855
|
customCodeBlocks,
|
|
833
|
-
blockStatus = "completed"
|
|
856
|
+
blockStatus = "completed",
|
|
857
|
+
codeBlockConfigs
|
|
834
858
|
}) => {
|
|
835
859
|
const [copied, setCopied] = useState5(false);
|
|
836
860
|
const [highlightedHtml, setHighlightedHtml] = useState5("");
|
|
@@ -847,12 +871,17 @@ var IncremarkCode = ({
|
|
|
847
871
|
const code = node.value;
|
|
848
872
|
const isMermaid = language === "mermaid";
|
|
849
873
|
const CustomCodeBlock = React4.useMemo(() => {
|
|
850
|
-
|
|
874
|
+
const component = customCodeBlocks?.[language];
|
|
875
|
+
if (!component) return null;
|
|
876
|
+
const config = codeBlockConfigs?.[language];
|
|
877
|
+
if (config?.takeOver) {
|
|
878
|
+
return component;
|
|
879
|
+
}
|
|
880
|
+
if (blockStatus !== "completed") {
|
|
851
881
|
return null;
|
|
852
882
|
}
|
|
853
|
-
return
|
|
854
|
-
}, [customCodeBlocks, language, blockStatus]);
|
|
855
|
-
const useCustomComponent = !!CustomCodeBlock;
|
|
883
|
+
return component;
|
|
884
|
+
}, [customCodeBlocks, language, blockStatus, codeBlockConfigs]);
|
|
856
885
|
const toggleMermaidView = useCallback5(() => {
|
|
857
886
|
setMermaidViewMode((prev) => prev === "preview" ? "source" : "preview");
|
|
858
887
|
}, []);
|
|
@@ -933,7 +962,7 @@ var IncremarkCode = ({
|
|
|
933
962
|
}
|
|
934
963
|
const html = highlighter.codeToHtml(code, {
|
|
935
964
|
lang: loadedLanguagesRef.current.has(lang) ? lang : "text",
|
|
936
|
-
theme: loadedThemesRef.current.has(theme) ? theme :
|
|
965
|
+
theme: loadedThemesRef.current.has(theme) ? theme : fallbackTheme
|
|
937
966
|
});
|
|
938
967
|
setHighlightedHtml(html);
|
|
939
968
|
} catch {
|
|
@@ -941,7 +970,7 @@ var IncremarkCode = ({
|
|
|
941
970
|
} finally {
|
|
942
971
|
setIsHighlighting(false);
|
|
943
972
|
}
|
|
944
|
-
}, [code, language, theme, disableHighlight, isMermaid, scheduleRenderMermaid]);
|
|
973
|
+
}, [code, language, theme, fallbackTheme, disableHighlight, isMermaid, scheduleRenderMermaid]);
|
|
945
974
|
useEffect4(() => {
|
|
946
975
|
highlight();
|
|
947
976
|
}, [highlight]);
|
|
@@ -952,8 +981,17 @@ var IncremarkCode = ({
|
|
|
952
981
|
}
|
|
953
982
|
};
|
|
954
983
|
}, []);
|
|
955
|
-
if (
|
|
956
|
-
|
|
984
|
+
if (CustomCodeBlock) {
|
|
985
|
+
const config = codeBlockConfigs?.[language];
|
|
986
|
+
return /* @__PURE__ */ jsx6(
|
|
987
|
+
CustomCodeBlock,
|
|
988
|
+
{
|
|
989
|
+
codeStr: code,
|
|
990
|
+
lang: language,
|
|
991
|
+
completed: blockStatus === "completed",
|
|
992
|
+
takeOver: config?.takeOver
|
|
993
|
+
}
|
|
994
|
+
);
|
|
957
995
|
}
|
|
958
996
|
if (isMermaid) {
|
|
959
997
|
return /* @__PURE__ */ jsxs2("div", { className: "incremark-mermaid", children: [
|
|
@@ -986,6 +1024,7 @@ var IncremarkCode = ({
|
|
|
986
1024
|
};
|
|
987
1025
|
|
|
988
1026
|
// src/components/IncremarkList.tsx
|
|
1027
|
+
import React5 from "react";
|
|
989
1028
|
import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
990
1029
|
function getItemInlineContent(item) {
|
|
991
1030
|
const firstChild = item.children[0];
|
|
@@ -1025,25 +1064,16 @@ var IncremarkList = ({ node }) => {
|
|
|
1025
1064
|
}
|
|
1026
1065
|
return /* @__PURE__ */ jsxs3("li", { className: "incremark-list-item", children: [
|
|
1027
1066
|
/* @__PURE__ */ jsx7(IncremarkInline, { nodes: inlineContent }),
|
|
1028
|
-
blockChildren.map((child, childIndex) => {
|
|
1029
|
-
if (child.type === "list") {
|
|
1030
|
-
return /* @__PURE__ */ jsx7(IncremarkList, { node: child }, childIndex);
|
|
1031
|
-
}
|
|
1032
|
-
return null;
|
|
1033
|
-
})
|
|
1067
|
+
blockChildren.map((child, childIndex) => /* @__PURE__ */ jsx7(React5.Fragment, { children: /* @__PURE__ */ jsx7(IncremarkRenderer, { node: child }) }, childIndex))
|
|
1034
1068
|
] }, index);
|
|
1035
1069
|
}) });
|
|
1036
1070
|
};
|
|
1037
1071
|
|
|
1038
1072
|
// src/components/IncremarkBlockquote.tsx
|
|
1073
|
+
import React6 from "react";
|
|
1039
1074
|
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
1040
1075
|
var IncremarkBlockquote = ({ node }) => {
|
|
1041
|
-
return /* @__PURE__ */ jsx8("blockquote", { className: "incremark-blockquote", children: node.children.map((child, index) => {
|
|
1042
|
-
if (child.type === "paragraph") {
|
|
1043
|
-
return /* @__PURE__ */ jsx8(IncremarkParagraph, { node: child }, index);
|
|
1044
|
-
}
|
|
1045
|
-
return /* @__PURE__ */ jsx8("div", { className: "unknown-child", children: child.type }, index);
|
|
1046
|
-
}) });
|
|
1076
|
+
return /* @__PURE__ */ jsx8("blockquote", { className: "incremark-blockquote", children: node.children.map((child, index) => /* @__PURE__ */ jsx8(React6.Fragment, { children: /* @__PURE__ */ jsx8(IncremarkRenderer, { node: child }) }, index)) });
|
|
1047
1077
|
};
|
|
1048
1078
|
|
|
1049
1079
|
// src/components/IncremarkTable.tsx
|
|
@@ -1140,17 +1170,8 @@ var IncremarkMath = ({
|
|
|
1140
1170
|
return /* @__PURE__ */ jsx11("div", { className: "incremark-math-block", children: renderedHtml && !isLoading ? /* @__PURE__ */ jsx11("div", { className: "math-rendered", dangerouslySetInnerHTML: { __html: renderedHtml } }) : /* @__PURE__ */ jsx11("pre", { className: "math-source-block", children: /* @__PURE__ */ jsx11("code", { children: formula }) }) });
|
|
1141
1171
|
};
|
|
1142
1172
|
|
|
1143
|
-
// src/components/IncremarkDefault.tsx
|
|
1144
|
-
import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
1145
|
-
var IncremarkDefault = ({ node }) => {
|
|
1146
|
-
return /* @__PURE__ */ jsxs5("div", { className: "incremark-default", children: [
|
|
1147
|
-
/* @__PURE__ */ jsx12("span", { className: "type-badge", children: node.type }),
|
|
1148
|
-
/* @__PURE__ */ jsx12("pre", { children: JSON.stringify(node, null, 2) })
|
|
1149
|
-
] });
|
|
1150
|
-
};
|
|
1151
|
-
|
|
1152
1173
|
// src/components/IncremarkContainer.tsx
|
|
1153
|
-
import { jsx as
|
|
1174
|
+
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
1154
1175
|
function parseOptions(attributes) {
|
|
1155
1176
|
if (!attributes) return {};
|
|
1156
1177
|
const options = {};
|
|
@@ -1168,52 +1189,57 @@ var IncremarkContainer = ({ node, customContainers }) => {
|
|
|
1168
1189
|
const options = parseOptions(node.attributes);
|
|
1169
1190
|
const CustomContainer = customContainers?.[containerName];
|
|
1170
1191
|
if (CustomContainer) {
|
|
1171
|
-
return /* @__PURE__ */
|
|
1192
|
+
return /* @__PURE__ */ jsx12(CustomContainer, { name: containerName, options, children: node.children?.map((child, index) => /* @__PURE__ */ jsx12(IncremarkRenderer, { node: child }, index)) });
|
|
1172
1193
|
}
|
|
1173
|
-
return /* @__PURE__ */
|
|
1194
|
+
return /* @__PURE__ */ jsx12("div", { className: `incremark-container incremark-container-${containerName}`, children: node.children && node.children.length > 0 && /* @__PURE__ */ jsx12("div", { className: "incremark-container-content", children: node.children.map((child, index) => /* @__PURE__ */ jsx12(IncremarkRenderer, { node: child }, index)) }) });
|
|
1174
1195
|
};
|
|
1175
1196
|
|
|
1176
|
-
// src/components/
|
|
1177
|
-
import {
|
|
1178
|
-
var
|
|
1179
|
-
return /* @__PURE__ */
|
|
1197
|
+
// src/components/IncremarkDefault.tsx
|
|
1198
|
+
import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
1199
|
+
var IncremarkDefault = ({ node }) => {
|
|
1200
|
+
return /* @__PURE__ */ jsxs5("div", { className: "incremark-default", children: [
|
|
1201
|
+
/* @__PURE__ */ jsx13("span", { className: "type-badge", children: node.type }),
|
|
1202
|
+
/* @__PURE__ */ jsx13("pre", { children: JSON.stringify(node, null, 2) })
|
|
1203
|
+
] });
|
|
1180
1204
|
};
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
var DefaultBlockquote = ({ node }) => /* @__PURE__ */ jsx14(IncremarkBlockquote, { node });
|
|
1185
|
-
var DefaultTable = ({ node }) => /* @__PURE__ */ jsx14(IncremarkTable, { node });
|
|
1186
|
-
var DefaultThematicBreak = () => /* @__PURE__ */ jsx14(IncremarkThematicBreak, {});
|
|
1187
|
-
var DefaultMath = ({ node }) => /* @__PURE__ */ jsx14(IncremarkMath, { node });
|
|
1188
|
-
var DefaultHtmlElement = ({ node }) => /* @__PURE__ */ jsx14(IncremarkHtmlElement, { node });
|
|
1189
|
-
var DefaultDefault = ({ node }) => /* @__PURE__ */ jsx14(IncremarkDefault, { node });
|
|
1205
|
+
|
|
1206
|
+
// src/components/IncremarkRenderer.tsx
|
|
1207
|
+
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
1190
1208
|
var defaultComponents = {
|
|
1191
|
-
heading:
|
|
1192
|
-
paragraph:
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1209
|
+
heading: IncremarkHeading,
|
|
1210
|
+
paragraph: IncremarkParagraph,
|
|
1211
|
+
list: IncremarkList,
|
|
1212
|
+
blockquote: IncremarkBlockquote,
|
|
1213
|
+
table: IncremarkTable,
|
|
1214
|
+
thematicBreak: IncremarkThematicBreak,
|
|
1215
|
+
math: IncremarkMath,
|
|
1216
|
+
inlineMath: IncremarkMath,
|
|
1217
|
+
htmlElement: IncremarkHtmlElement,
|
|
1218
|
+
containerDirective: IncremarkContainer,
|
|
1219
|
+
leafDirective: IncremarkContainer,
|
|
1220
|
+
textDirective: IncremarkContainer
|
|
1202
1221
|
};
|
|
1203
1222
|
function isContainerNode(node) {
|
|
1204
1223
|
return node.type === "containerDirective" || node.type === "leafDirective" || node.type === "textDirective";
|
|
1205
1224
|
}
|
|
1225
|
+
function isHtmlNode2(node) {
|
|
1226
|
+
return node.type === "html";
|
|
1227
|
+
}
|
|
1228
|
+
function getComponent(type, userComponents) {
|
|
1229
|
+
return userComponents[type] || defaultComponents[type] || IncremarkDefault;
|
|
1230
|
+
}
|
|
1206
1231
|
var IncremarkRenderer = ({
|
|
1207
1232
|
node,
|
|
1208
1233
|
components = {},
|
|
1209
1234
|
customContainers,
|
|
1210
1235
|
customCodeBlocks,
|
|
1236
|
+
codeBlockConfigs,
|
|
1211
1237
|
blockStatus
|
|
1212
1238
|
}) => {
|
|
1213
1239
|
if (node.type === "footnoteDefinition") {
|
|
1214
1240
|
return null;
|
|
1215
1241
|
}
|
|
1216
|
-
if (node
|
|
1242
|
+
if (isHtmlNode2(node)) {
|
|
1217
1243
|
return /* @__PURE__ */ jsx14("pre", { className: "incremark-html-code", children: /* @__PURE__ */ jsx14("code", { children: node.value }) });
|
|
1218
1244
|
}
|
|
1219
1245
|
if (isContainerNode(node)) {
|
|
@@ -1231,21 +1257,21 @@ var IncremarkRenderer = ({
|
|
|
1231
1257
|
{
|
|
1232
1258
|
node,
|
|
1233
1259
|
customCodeBlocks,
|
|
1260
|
+
codeBlockConfigs,
|
|
1234
1261
|
blockStatus
|
|
1235
1262
|
}
|
|
1236
1263
|
);
|
|
1237
1264
|
}
|
|
1238
|
-
const
|
|
1239
|
-
const Component = mergedComponents[node.type] || DefaultDefault;
|
|
1265
|
+
const Component = getComponent(node.type, components);
|
|
1240
1266
|
return /* @__PURE__ */ jsx14(Component, { node });
|
|
1241
1267
|
};
|
|
1242
1268
|
|
|
1243
1269
|
// src/components/IncremarkFootnotes.tsx
|
|
1244
|
-
import
|
|
1245
|
-
import { jsx as jsx15, jsxs as
|
|
1270
|
+
import React8 from "react";
|
|
1271
|
+
import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
1246
1272
|
var IncremarkFootnotes = () => {
|
|
1247
1273
|
const { footnoteDefinitions, footnoteReferenceOrder } = useDefinitions();
|
|
1248
|
-
const orderedFootnotes =
|
|
1274
|
+
const orderedFootnotes = React8.useMemo(() => {
|
|
1249
1275
|
return footnoteReferenceOrder.map((identifier) => ({
|
|
1250
1276
|
identifier,
|
|
1251
1277
|
definition: footnoteDefinitions[identifier]
|
|
@@ -1254,16 +1280,16 @@ var IncremarkFootnotes = () => {
|
|
|
1254
1280
|
if (orderedFootnotes.length === 0) {
|
|
1255
1281
|
return null;
|
|
1256
1282
|
}
|
|
1257
|
-
return /* @__PURE__ */
|
|
1283
|
+
return /* @__PURE__ */ jsxs6("section", { className: "incremark-footnotes", children: [
|
|
1258
1284
|
/* @__PURE__ */ jsx15("hr", { className: "incremark-footnotes-divider" }),
|
|
1259
|
-
/* @__PURE__ */ jsx15("ol", { className: "incremark-footnotes-list", children: orderedFootnotes.map((item, index) => /* @__PURE__ */
|
|
1285
|
+
/* @__PURE__ */ jsx15("ol", { className: "incremark-footnotes-list", children: orderedFootnotes.map((item, index) => /* @__PURE__ */ jsxs6(
|
|
1260
1286
|
"li",
|
|
1261
1287
|
{
|
|
1262
1288
|
id: `fn-${item.identifier}`,
|
|
1263
1289
|
className: "incremark-footnote-item",
|
|
1264
1290
|
children: [
|
|
1265
|
-
/* @__PURE__ */
|
|
1266
|
-
/* @__PURE__ */
|
|
1291
|
+
/* @__PURE__ */ jsxs6("div", { className: "incremark-footnote-content", children: [
|
|
1292
|
+
/* @__PURE__ */ jsxs6("span", { className: "incremark-footnote-number", children: [
|
|
1267
1293
|
index + 1,
|
|
1268
1294
|
"."
|
|
1269
1295
|
] }),
|
|
@@ -1292,10 +1318,11 @@ var IncremarkContainerProvider = ({ children, definitions }) => {
|
|
|
1292
1318
|
};
|
|
1293
1319
|
|
|
1294
1320
|
// src/components/Incremark.tsx
|
|
1295
|
-
import { jsx as jsx17, jsxs as
|
|
1321
|
+
import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1296
1322
|
var Incremark = (props) => {
|
|
1297
1323
|
const {
|
|
1298
1324
|
blocks: propsBlocks,
|
|
1325
|
+
isDisplayComplete: propsIsDisplayComplete = false,
|
|
1299
1326
|
components,
|
|
1300
1327
|
customContainers,
|
|
1301
1328
|
customCodeBlocks,
|
|
@@ -1304,7 +1331,7 @@ var Incremark = (props) => {
|
|
|
1304
1331
|
incremark
|
|
1305
1332
|
} = props;
|
|
1306
1333
|
if (incremark) {
|
|
1307
|
-
const { blocks: blocks2,
|
|
1334
|
+
const { blocks: blocks2, isDisplayComplete: isDisplayComplete2, _definitionsContextValue } = incremark;
|
|
1308
1335
|
return /* @__PURE__ */ jsx17(IncremarkContainerProvider, { definitions: _definitionsContextValue, children: /* @__PURE__ */ jsx17(
|
|
1309
1336
|
IncremarkInternal,
|
|
1310
1337
|
{
|
|
@@ -1314,12 +1341,12 @@ var Incremark = (props) => {
|
|
|
1314
1341
|
customCodeBlocks,
|
|
1315
1342
|
showBlockStatus,
|
|
1316
1343
|
className,
|
|
1317
|
-
|
|
1344
|
+
isDisplayComplete: isDisplayComplete2
|
|
1318
1345
|
}
|
|
1319
1346
|
) });
|
|
1320
1347
|
}
|
|
1321
1348
|
const blocks = propsBlocks || [];
|
|
1322
|
-
const
|
|
1349
|
+
const isDisplayComplete = propsIsDisplayComplete;
|
|
1323
1350
|
return /* @__PURE__ */ jsx17(
|
|
1324
1351
|
IncremarkInternal,
|
|
1325
1352
|
{
|
|
@@ -1329,7 +1356,7 @@ var Incremark = (props) => {
|
|
|
1329
1356
|
customCodeBlocks,
|
|
1330
1357
|
showBlockStatus,
|
|
1331
1358
|
className,
|
|
1332
|
-
|
|
1359
|
+
isDisplayComplete
|
|
1333
1360
|
}
|
|
1334
1361
|
);
|
|
1335
1362
|
};
|
|
@@ -1338,11 +1365,12 @@ var IncremarkInternal = ({
|
|
|
1338
1365
|
components,
|
|
1339
1366
|
customContainers,
|
|
1340
1367
|
customCodeBlocks,
|
|
1368
|
+
codeBlockConfigs,
|
|
1341
1369
|
showBlockStatus,
|
|
1342
1370
|
className,
|
|
1343
|
-
|
|
1371
|
+
isDisplayComplete
|
|
1344
1372
|
}) => {
|
|
1345
|
-
return /* @__PURE__ */
|
|
1373
|
+
return /* @__PURE__ */ jsxs7("div", { className: `incremark ${className}`, children: [
|
|
1346
1374
|
blocks.map((block) => {
|
|
1347
1375
|
if (block.node.type === "definition" || block.node.type === "footnoteDefinition") {
|
|
1348
1376
|
return null;
|
|
@@ -1361,11 +1389,12 @@ var IncremarkInternal = ({
|
|
|
1361
1389
|
components,
|
|
1362
1390
|
customContainers,
|
|
1363
1391
|
customCodeBlocks,
|
|
1392
|
+
codeBlockConfigs,
|
|
1364
1393
|
blockStatus: block.status
|
|
1365
1394
|
}
|
|
1366
1395
|
) }, block.stableId);
|
|
1367
1396
|
}),
|
|
1368
|
-
|
|
1397
|
+
isDisplayComplete && /* @__PURE__ */ jsx17(IncremarkFootnotes, {})
|
|
1369
1398
|
] });
|
|
1370
1399
|
};
|
|
1371
1400
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@incremark/react",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Incremark React integration - Incremental Markdown parser for AI streaming",
|
|
6
6
|
"type": "module",
|
|
@@ -21,13 +21,13 @@
|
|
|
21
21
|
"mermaid": "^10.0.0 || ^11.0.0",
|
|
22
22
|
"katex": "^0.16.0",
|
|
23
23
|
"react": ">=18.0.0",
|
|
24
|
-
"@incremark/core": "0.2.
|
|
24
|
+
"@incremark/core": "0.2.6"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"shiki": "^3.20.0",
|
|
28
|
-
"@incremark/
|
|
29
|
-
"@incremark/
|
|
30
|
-
"@incremark/devtools": "0.2.
|
|
28
|
+
"@incremark/shared": "0.2.6",
|
|
29
|
+
"@incremark/theme": "0.2.6",
|
|
30
|
+
"@incremark/devtools": "0.2.6"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@types/mdast": "^4.0.0",
|