@hyperbook/markdown 0.6.3 → 0.7.0
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/Code.d.ts +2 -2
- package/dist/Headings.d.ts +2 -2
- package/dist/Image.d.ts +2 -2
- package/dist/Link.d.ts +2 -2
- package/dist/Table.d.ts +5 -5
- package/dist/index.cjs.js +97 -43
- package/dist/index.cjs.js.map +4 -4
- package/dist/index.esm.mjs +100 -46
- package/dist/index.esm.mjs.map +4 -4
- package/dist/useRemarkSync.d.ts +13 -0
- package/package.json +7 -5
package/dist/Code.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare const Code:
|
|
1
|
+
import { ComponentType } from "react";
|
|
2
|
+
export declare const Code: ComponentType<JSX.IntrinsicElements["code"]>;
|
package/dist/Headings.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ComponentType } from "react";
|
|
2
2
|
export declare const makeAnchor: (heading: string) => string;
|
|
3
|
-
export declare const Headings:
|
|
3
|
+
export declare const Headings: (level: number) => ComponentType<JSX.IntrinsicElements["h1"]>;
|
package/dist/Image.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare const Image:
|
|
1
|
+
import { ComponentType } from "react";
|
|
2
|
+
export declare const Image: ComponentType<JSX.IntrinsicElements["img"]>;
|
package/dist/Link.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare const Link:
|
|
1
|
+
import { ComponentType } from "react";
|
|
2
|
+
export declare const Link: ComponentType<JSX.IntrinsicElements["a"]>;
|
package/dist/Table.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare const Table:
|
|
3
|
-
export declare const Tr:
|
|
4
|
-
export declare const Td:
|
|
5
|
-
export declare const Th:
|
|
1
|
+
import { ComponentType } from "react";
|
|
2
|
+
export declare const Table: ComponentType<JSX.IntrinsicElements["table"]>;
|
|
3
|
+
export declare const Tr: ComponentType<JSX.IntrinsicElements["tr"]>;
|
|
4
|
+
export declare const Td: ComponentType<JSX.IntrinsicElements["td"]>;
|
|
5
|
+
export declare const Th: ComponentType<JSX.IntrinsicElements["th"]>;
|
package/dist/index.cjs.js
CHANGED
|
@@ -52,7 +52,6 @@ __export(src_exports, {
|
|
|
52
52
|
module.exports = __toCommonJS(src_exports);
|
|
53
53
|
|
|
54
54
|
// src/Markdown.tsx
|
|
55
|
-
var import_react_markdown = __toESM(require("react-markdown"));
|
|
56
55
|
var import_remark_directive = __toESM(require("remark-directive"));
|
|
57
56
|
var import_remark_directive_rehype = __toESM(require("remark-directive-rehype"));
|
|
58
57
|
var import_remark_gfm = __toESM(require("remark-gfm"));
|
|
@@ -61,7 +60,6 @@ var import_remark_gemoji = __toESM(require("remark-gemoji"));
|
|
|
61
60
|
var import_remark_unwrap_images = __toESM(require("remark-unwrap-images"));
|
|
62
61
|
var import_rehype_katex = __toESM(require("rehype-katex"));
|
|
63
62
|
var import_rehype_highlight = __toESM(require("rehype-highlight"));
|
|
64
|
-
var import_rehype_raw = __toESM(require("rehype-raw"));
|
|
65
63
|
var import_provider5 = require("@hyperbook/provider");
|
|
66
64
|
|
|
67
65
|
// src/Code.tsx
|
|
@@ -125,7 +123,10 @@ var copyNoNavigator = (text) => {
|
|
|
125
123
|
document.execCommand("copy");
|
|
126
124
|
document.body.removeChild(textarea);
|
|
127
125
|
};
|
|
128
|
-
var Code = ({
|
|
126
|
+
var Code = ({
|
|
127
|
+
children,
|
|
128
|
+
className
|
|
129
|
+
}) => {
|
|
129
130
|
const directives = (0, import_provider.useDirectives)();
|
|
130
131
|
if (className === "language-mermaid" && directives["mermaid"]) {
|
|
131
132
|
const Mermaid = directives["mermaid"];
|
|
@@ -152,7 +153,7 @@ var Code = ({ children, className, inline }) => {
|
|
|
152
153
|
}
|
|
153
154
|
}
|
|
154
155
|
};
|
|
155
|
-
return
|
|
156
|
+
return !className ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "inline", children: [
|
|
156
157
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { ref, className, children }),
|
|
157
158
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "copy", onClick: copyCode, "aria-label": "Copy Code", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MdDone, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MdContentCopy, {}) })
|
|
158
159
|
] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
|
|
@@ -163,6 +164,7 @@ var Code = ({ children, className, inline }) => {
|
|
|
163
164
|
|
|
164
165
|
// src/Link.tsx
|
|
165
166
|
var import_provider2 = require("@hyperbook/provider");
|
|
167
|
+
var import_react2 = require("react");
|
|
166
168
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
167
169
|
function formatUrl(url) {
|
|
168
170
|
if (typeof url !== "string") {
|
|
@@ -178,8 +180,31 @@ function formatUrl(url) {
|
|
|
178
180
|
).join("//<wbr>");
|
|
179
181
|
return formatted;
|
|
180
182
|
}
|
|
181
|
-
var Link = ({
|
|
183
|
+
var Link = ({
|
|
184
|
+
href,
|
|
185
|
+
title,
|
|
186
|
+
children
|
|
187
|
+
}) => {
|
|
182
188
|
const L = (0, import_provider2.useLink)();
|
|
189
|
+
const config = (0, import_provider2.useConfig)();
|
|
190
|
+
const [isExternal, setIsExternal] = (0, import_react2.useState)(false);
|
|
191
|
+
(0, import_react2.useEffect)(() => {
|
|
192
|
+
var _a;
|
|
193
|
+
if (href) {
|
|
194
|
+
const tmp = document.createElement("a");
|
|
195
|
+
tmp.href = href;
|
|
196
|
+
if (tmp.host !== window.location.host) {
|
|
197
|
+
setIsExternal(true);
|
|
198
|
+
} else if (config.basePath && !((_a = window.location.pathname) == null ? void 0 : _a.startsWith(config.basePath))) {
|
|
199
|
+
setIsExternal(true);
|
|
200
|
+
} else {
|
|
201
|
+
setIsExternal(false);
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
}, [href, config]);
|
|
205
|
+
if (isExternal) {
|
|
206
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(L, { href, title, target: "_blank", children: formatUrl(children) });
|
|
207
|
+
}
|
|
183
208
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(L, { href, title, children: formatUrl(children) });
|
|
184
209
|
};
|
|
185
210
|
|
|
@@ -187,18 +212,30 @@ var Link = ({ href, title, children }) => {
|
|
|
187
212
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
188
213
|
var tableHeaders = [];
|
|
189
214
|
var tdIndex = 0;
|
|
190
|
-
var Table = ({
|
|
215
|
+
var Table = ({
|
|
216
|
+
children,
|
|
217
|
+
style
|
|
218
|
+
}) => {
|
|
191
219
|
tableHeaders = [];
|
|
192
220
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("table", { style, children });
|
|
193
221
|
};
|
|
194
|
-
var Tr = ({
|
|
222
|
+
var Tr = ({
|
|
223
|
+
children,
|
|
224
|
+
style
|
|
225
|
+
}) => {
|
|
195
226
|
tdIndex = 0;
|
|
196
227
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { style, children });
|
|
197
228
|
};
|
|
198
|
-
var Td = ({
|
|
229
|
+
var Td = ({
|
|
230
|
+
children,
|
|
231
|
+
style
|
|
232
|
+
}) => {
|
|
199
233
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { "data-label": tableHeaders[tdIndex++], style, children });
|
|
200
234
|
};
|
|
201
|
-
var Th = ({
|
|
235
|
+
var Th = ({
|
|
236
|
+
children,
|
|
237
|
+
style
|
|
238
|
+
}) => {
|
|
202
239
|
tableHeaders.push(children);
|
|
203
240
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { style, children });
|
|
204
241
|
};
|
|
@@ -212,7 +249,7 @@ var makeAnchor = (heading) => {
|
|
|
212
249
|
anchor = anchor.replace(/ /g, "-");
|
|
213
250
|
return anchor;
|
|
214
251
|
};
|
|
215
|
-
var Headings = ({
|
|
252
|
+
var Headings = (level) => ({ children, id }) => {
|
|
216
253
|
var _a;
|
|
217
254
|
const config = (0, import_provider3.useConfig)();
|
|
218
255
|
const bookmarksConfig = (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.bookmarks;
|
|
@@ -250,11 +287,15 @@ var Headings = ({ level, children, id }) => {
|
|
|
250
287
|
|
|
251
288
|
// src/Image.tsx
|
|
252
289
|
var import_provider4 = require("@hyperbook/provider");
|
|
253
|
-
var
|
|
290
|
+
var import_react3 = require("react");
|
|
254
291
|
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
255
|
-
var Image = ({
|
|
292
|
+
var Image = ({
|
|
293
|
+
src,
|
|
294
|
+
title,
|
|
295
|
+
alt
|
|
296
|
+
}) => {
|
|
256
297
|
const makeUrl = (0, import_provider4.useMakeUrl)();
|
|
257
|
-
const [full, setFull] = (0,
|
|
298
|
+
const [full, setFull] = (0, import_react3.useState)(false);
|
|
258
299
|
src = makeUrl(src, "public");
|
|
259
300
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("figure", { className: full ? "lightbox" : void 0, children: [
|
|
260
301
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src, alt, onClick: () => setFull((f) => !f) }),
|
|
@@ -305,14 +346,29 @@ var remarkCustomHeadingIds = () => {
|
|
|
305
346
|
};
|
|
306
347
|
};
|
|
307
348
|
|
|
349
|
+
// src/useRemarkSync.ts
|
|
350
|
+
var import_react4 = require("react");
|
|
351
|
+
var import_unified = require("unified");
|
|
352
|
+
var import_remark_parse = __toESM(require("remark-parse"));
|
|
353
|
+
var import_remark_rehype = __toESM(require("remark-rehype"));
|
|
354
|
+
var import_rehype_react = __toESM(require("rehype-react"));
|
|
355
|
+
var useRemarkSync = (source, {
|
|
356
|
+
remarkToRehypeOptions,
|
|
357
|
+
rehypeReactOptions,
|
|
358
|
+
remarkPlugins = [],
|
|
359
|
+
rehypePlugins = []
|
|
360
|
+
} = {}) => (0, import_unified.unified)().use(import_remark_parse.default).use(remarkPlugins).use(import_remark_rehype.default, remarkToRehypeOptions).use(rehypePlugins).use(import_rehype_react.default, __spreadValues({
|
|
361
|
+
createElement: import_react4.createElement,
|
|
362
|
+
Fragment: import_react4.Fragment
|
|
363
|
+
}, rehypeReactOptions)).processSync(source).result;
|
|
364
|
+
|
|
308
365
|
// src/Markdown.tsx
|
|
309
366
|
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
310
367
|
var Markdown = ({ children }) => {
|
|
311
368
|
const directives = (0, import_provider5.useDirectives)();
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
className: "hyperbook-markdown",
|
|
369
|
+
const reactContent = useRemarkSync(children, {
|
|
370
|
+
rehypeReactOptions: {
|
|
371
|
+
passNode: true,
|
|
316
372
|
components: __spreadProps(__spreadValues({}, directives), {
|
|
317
373
|
a: Link,
|
|
318
374
|
code: Code,
|
|
@@ -320,32 +376,30 @@ var Markdown = ({ children }) => {
|
|
|
320
376
|
th: Th,
|
|
321
377
|
table: Table,
|
|
322
378
|
tr: Tr,
|
|
323
|
-
h1: Headings,
|
|
324
|
-
h2: Headings,
|
|
325
|
-
h3: Headings,
|
|
326
|
-
h4: Headings,
|
|
327
|
-
h5: Headings,
|
|
328
|
-
h6: Headings,
|
|
379
|
+
h1: Headings(1),
|
|
380
|
+
h2: Headings(2),
|
|
381
|
+
h3: Headings(3),
|
|
382
|
+
h4: Headings(4),
|
|
383
|
+
h5: Headings(5),
|
|
384
|
+
h6: Headings(6),
|
|
329
385
|
img: Image
|
|
330
|
-
})
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
}
|
|
349
|
-
);
|
|
386
|
+
})
|
|
387
|
+
},
|
|
388
|
+
remarkPlugins: [
|
|
389
|
+
remarkRemoveComments,
|
|
390
|
+
remarkCustomHeadingIds,
|
|
391
|
+
import_remark_gfm.default,
|
|
392
|
+
import_remark_directive.default,
|
|
393
|
+
import_remark_directive_rehype.default,
|
|
394
|
+
import_remark_math.default,
|
|
395
|
+
import_remark_gemoji.default,
|
|
396
|
+
import_remark_unwrap_images.default
|
|
397
|
+
],
|
|
398
|
+
rehypePlugins: [
|
|
399
|
+
import_rehype_katex.default,
|
|
400
|
+
[import_rehype_highlight.default, { ignoreMissing: true, plainText: ["mermaid"] }]
|
|
401
|
+
]
|
|
402
|
+
});
|
|
403
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hyperbook-markdown", children: reactContent });
|
|
350
404
|
};
|
|
351
405
|
//# sourceMappingURL=index.cjs.js.map
|
package/dist/index.cjs.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../src/index.ts", "../src/Markdown.tsx", "../src/Code.tsx", "../src/Link.tsx", "../src/Table.tsx", "../src/Headings.tsx", "../src/Image.tsx", "../src/remarkRemoveComments.ts", "../src/remarkCustomHeadingIds.ts"],
|
|
4
|
-
"sourcesContent": ["export * from \"./Markdown\";\n", "import ReactMarkdown from \"react-markdown\";\nimport remarkDirective from \"remark-directive\";\nimport remarkDirectiveRehype from \"remark-directive-rehype\";\nimport remarkGfm from \"remark-gfm\";\nimport remarkMath from \"remark-math\";\nimport remarkGemoji from \"remark-gemoji\";\nimport remarkUnwrapImages from \"remark-unwrap-images\";\nimport rehypeKatex from \"rehype-katex\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport rehypeRaw from \"rehype-raw\";\nimport { useDirectives } from \"@hyperbook/provider\";\nimport { Code } from \"./Code\";\nimport { Link } from \"./Link\";\nimport { Table, Td, Th, Tr } from \"./Table\";\nimport { Headings } from \"./Headings\";\nimport { Image } from \"./Image\";\n\nimport \"./index.css\";\nimport { remarkRemoveComments } from \"./remarkRemoveComments\";\nimport { remarkCustomHeadingIds } from \"./remarkCustomHeadingIds\";\n\nexport type MarkdownProps = {\n children: string;\n};\n\nexport const Markdown = ({ children }: MarkdownProps) => {\n const directives = useDirectives();\n\n return (\n <ReactMarkdown\n className=\"hyperbook-markdown\"\n components={{\n ...directives,\n a: Link,\n code: Code,\n td: Td,\n th: Th,\n table: Table,\n tr: Tr,\n h1: Headings,\n h2: Headings,\n h3: Headings,\n h4: Headings,\n h5: Headings,\n h6: Headings,\n img: Image,\n }}\n remarkPlugins={[\n remarkRemoveComments,\n remarkCustomHeadingIds,\n remarkDirective,\n remarkDirectiveRehype,\n remarkGfm,\n remarkMath,\n remarkGemoji,\n remarkUnwrapImages,\n ]}\n rehypePlugins={[\n rehypeRaw,\n rehypeKatex,\n [rehypeHighlight, { ignoreMissing: true, plainText: [\"mermaid\"] }],\n ]}\n skipHtml={false}\n >\n {children}\n </ReactMarkdown>\n );\n};\n", "import { useDirectives } from \"@hyperbook/provider\";\nimport { Fragment, useRef, useState } from \"react\";\nimport { Components } from \"react-markdown\";\n\nconst MdContentCopy = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n stroke=\"currentColor\"\n fill=\"currentColor\"\n strokeWidth=\"0\"\n height=\"1em\"\n width=\"1em\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z\" />\n </svg>\n );\n};\n\nconst MdDone = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n stroke=\"currentColor\"\n fill=\"currentColor\"\n strokeWidth=\"0\"\n height=\"1em\"\n width=\"1em\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n </svg>\n );\n};\n\nconst copyNoNavigator = (text: string) => {\n const isIos = navigator.userAgent.match(/ipad|iphone/i);\n const textarea = document.createElement(\"textarea\");\n\n // create textarea\n textarea.value = text;\n\n // ios will zoom in on the input if the font-size is < 16px\n textarea.style.fontSize = \"20px\";\n document.body.appendChild(textarea);\n\n // select text\n if (isIos) {\n const range = document.createRange();\n range.selectNodeContents(textarea);\n\n const selection = window.getSelection();\n if (selection) {\n selection.removeAllRanges();\n selection.addRange(range);\n }\n textarea.setSelectionRange(0, 999999);\n } else {\n textarea.select();\n }\n\n // copy selection\n document.execCommand(\"copy\");\n\n // cleanup\n document.body.removeChild(textarea);\n};\n\nexport const Code: Components[\"code\"] = ({ children, className, inline }) => {\n const directives = useDirectives();\n if (className === \"language-mermaid\" && directives[\"mermaid\"]) {\n const Mermaid = directives[\"mermaid\"];\n return <Mermaid children={children} />;\n }\n\n const ref = useRef<HTMLElement>(null);\n const [copied, setCopied] = useState(false);\n const copyCode = () => {\n if (ref.current) {\n const text = ref.current.innerText;\n if (navigator.clipboard) {\n navigator.clipboard\n .writeText(text)\n .then(() => {\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n })\n .catch(() => {\n copyNoNavigator(text);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n });\n } else {\n copyNoNavigator(text);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n }\n }\n };\n\n return inline ? (\n <span className=\"inline\">\n <code ref={ref} className={className}>\n {children}\n </code>\n <button className=\"copy\" onClick={copyCode} aria-label=\"Copy Code\">\n {copied ? <MdDone /> : <MdContentCopy />}\n </button>\n </span>\n ) : (\n <Fragment>\n <code ref={ref} className={className}>\n {children}\n </code>\n <button className=\"copy\" onClick={copyCode} aria-label=\"Copy Code\">\n {copied ? <MdDone /> : <MdContentCopy />}\n </button>\n </Fragment>\n );\n};\n", "import { useLink } from \"@hyperbook/provider\";\nimport { ReactNode } from \"react\";\nimport { Components } from \"react-markdown\";\n\n// see: https://css-tricks.com/better-line-breaks-for-long-urls/\nfunction formatUrl(url: ReactNode) {\n if (typeof url !== \"string\") {\n return url;\n }\n // Split the URL into an array to distinguish double slashes from single slashes\n var doubleSlash = url.split(\"//\");\n\n // Format the strings on either side of double slashes separately\n var formatted = doubleSlash\n .map(\n (str) =>\n // Insert a word break opportunity after a colon\n str\n .replace(/(?<after>:)/giu, \"$1<wbr>\")\n // Before a single slash, tilde, period, comma, hyphen, underline, question mark, number sign, or percent symbol\n .replace(/(?<before>[/~.,\\-_?#%])/giu, \"<wbr>$1\")\n // Before and after an equals sign or ampersand\n .replace(/(?<beforeAndAfter>[=&])/giu, \"<wbr>$1<wbr>\")\n // Reconnect the strings with word break opportunities after double slashes\n )\n .join(\"//<wbr>\");\n\n return formatted;\n}\n\nexport const Link: Components[\"a\"] = ({ href, title, children }) => {\n const L = useLink();\n\n return (\n <L href={href} title={title}>\n {formatUrl(children)}\n </L>\n );\n};\n", "import { ReactNode } from \"react\";\nimport { Components } from \"react-markdown\";\n\nlet tableHeaders: ReactNode[][] = [];\nlet tdIndex = 0;\n\nexport const Table: Components[\"table\"] = ({ children, style }) => {\n tableHeaders = [];\n return <table style={style}>{children}</table>;\n};\n\nexport const Tr: Components[\"tr\"] = ({ children, style }) => {\n tdIndex = 0;\n return <tr style={style}>{children}</tr>;\n};\n\nexport const Td: Components[\"td\"] = ({ children, style }) => {\n return (\n <td data-label={tableHeaders[tdIndex++]} style={style}>\n {children}\n </td>\n );\n};\n\nexport const Th: Components[\"th\"] = ({ children, style }) => {\n tableHeaders.push(children);\n return <th style={style}>{children}</th>;\n};\n", "import { useBookmark, useConfig } from \"@hyperbook/provider\";\nimport { Components } from \"react-markdown\";\n\nexport const makeAnchor = (heading: string) => {\n // If we have a heading, make it lower case\n let anchor = heading.toLowerCase();\n\n // Clean anchor (replace special characters whitespaces).\n // Alternatively, use encodeURIComponent() if you don't care about\n // pretty anchor links\n anchor = anchor.replace(/[^a-zA-Z0-9 ]/g, \"\");\n anchor = anchor.replace(/ /g, \"-\");\n\n return anchor;\n};\n\nexport const Headings: Components[\"h1\"] = ({ level, children, id }) => {\n const config = useConfig();\n const bookmarksConfig = config?.elements?.bookmarks;\n // Access actual (string) value of heading\n const heading = children?.[0] || \"\";\n\n // If we have a heading, make it lower case\n let anchor = typeof heading === \"string\" ? makeAnchor(heading) : \"\";\n\n const label = typeof heading === \"string\" ? heading : anchor;\n\n const [bookmark, toggleBookmark] = useBookmark(anchor, label);\n\n // Utility\n const container = (children: React.ReactNode): JSX.Element => (\n <>\n <a className=\"heading\" id={id ?? anchor} href={`#${id ?? anchor}`}>\n <span>{children}</span>\n </a>\n {bookmarksConfig !== false && (\n <button\n className={bookmark ? \"bookmark active\" : \"bookmark\"}\n onClick={() => toggleBookmark()}\n title=\"Bookmark\"\n >\n \uD83D\uDD16\n </button>\n )}\n </>\n );\n\n switch (level) {\n case 1:\n return <h1>{container(children)}</h1>;\n case 2:\n return <h2>{container(children)}</h2>;\n case 3:\n return <h3>{container(children)}</h3>;\n case 4:\n return <h4>{container(children)}</h4>;\n case 5:\n return <h5>{container(children)}</h5>;\n\n default:\n return <h6>{container(children)}</h6>;\n }\n};\n", "import { useMakeUrl } from \"@hyperbook/provider\";\nimport { useState } from \"react\";\nimport { Components } from \"react-markdown\";\n\nexport const Image: Components[\"img\"] = ({ src, title, alt }) => {\n const makeUrl = useMakeUrl();\n const [full, setFull] = useState(false);\n src = makeUrl(src, \"public\");\n\n return (\n <figure className={full ? \"lightbox\" : undefined}>\n <img src={src} alt={alt} onClick={() => setFull((f) => !f)} />\n {title && <figcaption>{title}</figcaption>}\n </figure>\n );\n};\n", "//@ts-nocheck\nimport { visit, SKIP } from \"unist-util-visit\";\nimport { Transformer } from \"unified\";\nimport { BuildVisitor } from \"unist-util-visit/complex-types\";\n\nexport const remarkRemoveComments: () => Transformer = () => (tree) => {\n const htmlCommentRegex = /<!--([\\s\\S]*?)-->/g;\n\n const handler: BuildVisitor = (node, index, parent) => {\n const isComment = node.value.match(htmlCommentRegex);\n\n if (isComment) {\n // remove node\n parent.children.splice(index, 1);\n // Do not traverse `node`, continue at the node *now* at `index`. http://unifiedjs.com/learn/recipe/remove-node/\n return [SKIP, index];\n }\n };\n\n visit(tree, \"html\", handler);\n\n visit(tree, \"jsx\", handler);\n};\n", "import { visit } from \"unist-util-visit\";\nimport { Transformer } from \"unified\";\n\nexport const remarkCustomHeadingIds: () => Transformer = () => {\n return function (node) {\n visit(node, \"heading\", (node) => {\n let lastChild = node.children[node.children.length - 1];\n if (lastChild && lastChild.type === \"text\") {\n let string = lastChild.value.replace(/ +$/, \"\");\n let matched = string.match(/ {#([^]+?)}$/);\n\n if (matched) {\n let id = matched[1];\n if (!!id.length) {\n if (!node.data) {\n node.data = {};\n }\n if (!node.data.hProperties) {\n node.data.hProperties = {};\n }\n node.data.id = node.data.hProperties.id = id;\n\n string = string.substring(0, matched.index);\n lastChild.value = string;\n }\n }\n }\n });\n };\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,
|
|
6
|
-
"names": ["import_provider", "import_provider", "import_jsx_runtime", "import_jsx_runtime", "import_provider", "import_jsx_runtime", "children", "import_provider", "import_react", "import_jsx_runtime", "import_unist_util_visit", "node", "
|
|
3
|
+
"sources": ["../src/index.ts", "../src/Markdown.tsx", "../src/Code.tsx", "../src/Link.tsx", "../src/Table.tsx", "../src/Headings.tsx", "../src/Image.tsx", "../src/remarkRemoveComments.ts", "../src/remarkCustomHeadingIds.ts", "../src/useRemarkSync.ts"],
|
|
4
|
+
"sourcesContent": ["export * from \"./Markdown\";\n", "import remarkDirective from \"remark-directive\";\nimport remarkDirectiveRehype from \"remark-directive-rehype\";\nimport remarkGfm from \"remark-gfm\";\nimport remarkMath from \"remark-math\";\nimport remarkGemoji from \"remark-gemoji\";\nimport remarkUnwrapImages from \"remark-unwrap-images\";\nimport rehypeKatex from \"rehype-katex\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport { useDirectives } from \"@hyperbook/provider\";\nimport { Code } from \"./Code\";\nimport { Link } from \"./Link\";\nimport { Table, Td, Th, Tr } from \"./Table\";\nimport { Headings } from \"./Headings\";\nimport { Image } from \"./Image\";\n\nimport \"./index.css\";\nimport { remarkRemoveComments } from \"./remarkRemoveComments\";\nimport { remarkCustomHeadingIds } from \"./remarkCustomHeadingIds\";\nimport { useRemarkSync } from \"./useRemarkSync\";\n\nexport type MarkdownProps = {\n children: string;\n};\n\nexport const Markdown = ({ children }: MarkdownProps) => {\n const directives = useDirectives();\n\n const reactContent = useRemarkSync(children, {\n rehypeReactOptions: {\n passNode: true,\n components: {\n ...directives,\n a: Link,\n code: Code,\n td: Td,\n th: Th,\n table: Table,\n tr: Tr,\n h1: Headings(1),\n h2: Headings(2),\n h3: Headings(3),\n h4: Headings(4),\n h5: Headings(5),\n h6: Headings(6),\n img: Image,\n },\n },\n remarkPlugins: [\n remarkRemoveComments,\n remarkCustomHeadingIds,\n remarkGfm,\n remarkDirective,\n remarkDirectiveRehype,\n remarkMath,\n remarkGemoji,\n remarkUnwrapImages,\n ],\n rehypePlugins: [\n rehypeKatex,\n [rehypeHighlight, { ignoreMissing: true, plainText: [\"mermaid\"] }],\n ],\n });\n\n return <div className=\"hyperbook-markdown\">{reactContent}</div>;\n};\n", "import { useDirectives } from \"@hyperbook/provider\";\nimport { ComponentType, Fragment, useRef, useState } from \"react\";\n\nconst MdContentCopy = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n stroke=\"currentColor\"\n fill=\"currentColor\"\n strokeWidth=\"0\"\n height=\"1em\"\n width=\"1em\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z\" />\n </svg>\n );\n};\n\nconst MdDone = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n stroke=\"currentColor\"\n fill=\"currentColor\"\n strokeWidth=\"0\"\n height=\"1em\"\n width=\"1em\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n </svg>\n );\n};\n\nconst copyNoNavigator = (text: string) => {\n const isIos = navigator.userAgent.match(/ipad|iphone/i);\n const textarea = document.createElement(\"textarea\");\n\n // create textarea\n textarea.value = text;\n\n // ios will zoom in on the input if the font-size is < 16px\n textarea.style.fontSize = \"20px\";\n document.body.appendChild(textarea);\n\n // select text\n if (isIos) {\n const range = document.createRange();\n range.selectNodeContents(textarea);\n\n const selection = window.getSelection();\n if (selection) {\n selection.removeAllRanges();\n selection.addRange(range);\n }\n textarea.setSelectionRange(0, 999999);\n } else {\n textarea.select();\n }\n\n // copy selection\n document.execCommand(\"copy\");\n\n // cleanup\n document.body.removeChild(textarea);\n};\n\nexport const Code: ComponentType<JSX.IntrinsicElements[\"code\"]> = ({\n children,\n className,\n}) => {\n const directives = useDirectives();\n if (className === \"language-mermaid\" && directives[\"mermaid\"]) {\n const Mermaid = directives[\"mermaid\"];\n return <Mermaid children={children} />;\n }\n\n const ref = useRef<HTMLElement>(null);\n const [copied, setCopied] = useState(false);\n const copyCode = () => {\n if (ref.current) {\n const text = ref.current.innerText;\n if (navigator.clipboard) {\n navigator.clipboard\n .writeText(text)\n .then(() => {\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n })\n .catch(() => {\n copyNoNavigator(text);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n });\n } else {\n copyNoNavigator(text);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n }\n }\n };\n\n return !className ? (\n <span className=\"inline\">\n <code ref={ref} className={className}>\n {children}\n </code>\n <button className=\"copy\" onClick={copyCode} aria-label=\"Copy Code\">\n {copied ? <MdDone /> : <MdContentCopy />}\n </button>\n </span>\n ) : (\n <Fragment>\n <code ref={ref} className={className}>\n {children}\n </code>\n <button className=\"copy\" onClick={copyCode} aria-label=\"Copy Code\">\n {copied ? <MdDone /> : <MdContentCopy />}\n </button>\n </Fragment>\n );\n};\n", "import { useConfig, useLink } from \"@hyperbook/provider\";\nimport { ComponentType, ReactNode, useEffect, useState } from \"react\";\n\n// see: https://css-tricks.com/better-line-breaks-for-long-urls/\nfunction formatUrl(url: ReactNode) {\n if (typeof url !== \"string\") {\n return url;\n }\n // Split the URL into an array to distinguish double slashes from single slashes\n var doubleSlash = url.split(\"//\");\n\n // Format the strings on either side of double slashes separately\n var formatted = doubleSlash\n .map(\n (str) =>\n // Insert a word break opportunity after a colon\n str\n .replace(/(?<after>:)/giu, \"$1<wbr>\")\n // Before a single slash, tilde, period, comma, hyphen, underline, question mark, number sign, or percent symbol\n .replace(/(?<before>[/~.,\\-_?#%])/giu, \"<wbr>$1\")\n // Before and after an equals sign or ampersand\n .replace(/(?<beforeAndAfter>[=&])/giu, \"<wbr>$1<wbr>\")\n // Reconnect the strings with word break opportunities after double slashes\n )\n .join(\"//<wbr>\");\n\n return formatted;\n}\n\nexport const Link: ComponentType<JSX.IntrinsicElements[\"a\"]> = ({\n href,\n title,\n children,\n}) => {\n const L = useLink();\n const config = useConfig();\n const [isExternal, setIsExternal] = useState(false);\n\n useEffect(() => {\n if (href) {\n const tmp = document.createElement(\"a\");\n tmp.href = href;\n if (tmp.host !== window.location.host) {\n setIsExternal(true);\n } else if (\n config.basePath &&\n !window.location.pathname?.startsWith(config.basePath)\n ) {\n setIsExternal(true);\n } else {\n setIsExternal(false);\n }\n }\n }, [href, config]);\n\n if (isExternal) {\n <L href={href} title={title} target=\"_blank\">\n {formatUrl(children)}\n </L>;\n }\n\n return (\n <L href={href} title={title}>\n {formatUrl(children)}\n </L>\n );\n};\n", "import { ComponentType, ReactNode } from \"react\";\n\nlet tableHeaders: ReactNode[] = [];\nlet tdIndex = 0;\n\nexport const Table: ComponentType<JSX.IntrinsicElements[\"table\"]> = ({\n children,\n style,\n}) => {\n tableHeaders = [];\n return <table style={style}>{children}</table>;\n};\n\nexport const Tr: ComponentType<JSX.IntrinsicElements[\"tr\"]> = ({\n children,\n style,\n}) => {\n tdIndex = 0;\n return <tr style={style}>{children}</tr>;\n};\n\nexport const Td: ComponentType<JSX.IntrinsicElements[\"td\"]> = ({\n children,\n style,\n}) => {\n return (\n <td data-label={tableHeaders[tdIndex++]} style={style}>\n {children}\n </td>\n );\n};\n\nexport const Th: ComponentType<JSX.IntrinsicElements[\"th\"]> = ({\n children,\n style,\n}) => {\n tableHeaders.push(children);\n return <th style={style}>{children}</th>;\n};\n", "import { useBookmark, useConfig } from \"@hyperbook/provider\";\nimport { ComponentType } from \"react\";\n\nexport const makeAnchor = (heading: string) => {\n // If we have a heading, make it lower case\n let anchor = heading.toLowerCase();\n\n // Clean anchor (replace special characters whitespaces).\n // Alternatively, use encodeURIComponent() if you don't care about\n // pretty anchor links\n anchor = anchor.replace(/[^a-zA-Z0-9 ]/g, \"\");\n anchor = anchor.replace(/ /g, \"-\");\n\n return anchor;\n};\n\nexport const Headings =\n (level: number): ComponentType<JSX.IntrinsicElements[\"h1\"]> =>\n ({ children, id }) => {\n const config = useConfig();\n const bookmarksConfig = config?.elements?.bookmarks;\n // Access actual (string) value of heading\n const heading = children?.[0] || \"\";\n\n // If we have a heading, make it lower case\n let anchor = typeof heading === \"string\" ? makeAnchor(heading) : \"\";\n\n const label = typeof heading === \"string\" ? heading : anchor;\n\n const [bookmark, toggleBookmark] = useBookmark(anchor, label);\n\n // Utility\n const container = (children: React.ReactNode): JSX.Element => (\n <>\n <a className=\"heading\" id={id ?? anchor} href={`#${id ?? anchor}`}>\n <span>{children}</span>\n </a>\n {bookmarksConfig !== false && (\n <button\n className={bookmark ? \"bookmark active\" : \"bookmark\"}\n onClick={() => toggleBookmark()}\n title=\"Bookmark\"\n >\n \uD83D\uDD16\n </button>\n )}\n </>\n );\n\n switch (level) {\n case 1:\n return <h1>{container(children)}</h1>;\n case 2:\n return <h2>{container(children)}</h2>;\n case 3:\n return <h3>{container(children)}</h3>;\n case 4:\n return <h4>{container(children)}</h4>;\n case 5:\n return <h5>{container(children)}</h5>;\n\n default:\n return <h6>{container(children)}</h6>;\n }\n };\n", "import { useMakeUrl } from \"@hyperbook/provider\";\nimport { ComponentType, useState } from \"react\";\n\nexport const Image: ComponentType<JSX.IntrinsicElements[\"img\"]> = ({\n src,\n title,\n alt,\n}) => {\n const makeUrl = useMakeUrl();\n const [full, setFull] = useState(false);\n src = makeUrl(src, \"public\");\n\n return (\n <figure className={full ? \"lightbox\" : undefined}>\n <img src={src} alt={alt} onClick={() => setFull((f) => !f)} />\n {title && <figcaption>{title}</figcaption>}\n </figure>\n );\n};\n", "//@ts-nocheck\nimport { visit, SKIP } from \"unist-util-visit\";\nimport { Transformer } from \"unified\";\nimport { BuildVisitor } from \"unist-util-visit/complex-types\";\n\nexport const remarkRemoveComments: () => Transformer = () => (tree) => {\n const htmlCommentRegex = /<!--([\\s\\S]*?)-->/g;\n\n const handler: BuildVisitor = (node, index, parent) => {\n const isComment = node.value.match(htmlCommentRegex);\n\n if (isComment) {\n // remove node\n parent.children.splice(index, 1);\n // Do not traverse `node`, continue at the node *now* at `index`. http://unifiedjs.com/learn/recipe/remove-node/\n return [SKIP, index];\n }\n };\n\n visit(tree, \"html\", handler);\n\n visit(tree, \"jsx\", handler);\n};\n", "import { visit } from \"unist-util-visit\";\nimport { Transformer } from \"unified\";\n\nexport const remarkCustomHeadingIds: () => Transformer = () => {\n return function (node) {\n visit(node, \"heading\", (node) => {\n let lastChild = node.children[node.children.length - 1];\n if (lastChild && lastChild.type === \"text\") {\n let string = lastChild.value.replace(/ +$/, \"\");\n let matched = string.match(/ {#([^]+?)}$/);\n\n if (matched) {\n let id = matched[1];\n if (!!id.length) {\n if (!node.data) {\n node.data = {};\n }\n if (!node.data.hProperties) {\n node.data.hProperties = {};\n }\n node.data.id = node.data.hProperties.id = id;\n\n string = string.substring(0, matched.index);\n lastChild.value = string;\n }\n }\n }\n });\n };\n};\n", "import { Fragment, ReactElement, createElement } from \"react\";\nimport { unified, PluggableList } from \"unified\";\nimport remarkParse from \"remark-parse\";\nimport { Options as RemarkRehypeOptions } from \"mdast-util-to-hast\";\nimport remarkToRehype from \"remark-rehype\";\nimport rehypeReact, { Options as RehypeReactOptions } from \"rehype-react\";\n\ntype PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;\n\nexport interface UseRemarkSyncOptions {\n remarkToRehypeOptions?: RemarkRehypeOptions;\n rehypeReactOptions?: PartialBy<RehypeReactOptions, \"createElement\">;\n remarkPlugins?: PluggableList;\n rehypePlugins?: PluggableList;\n}\n\nexport const useRemarkSync = (\n source: string,\n {\n remarkToRehypeOptions,\n rehypeReactOptions,\n remarkPlugins = [],\n rehypePlugins = [],\n }: UseRemarkSyncOptions = {}\n): ReactElement =>\n unified()\n .use(remarkParse)\n .use(remarkPlugins)\n .use(remarkToRehype, remarkToRehypeOptions)\n .use(rehypePlugins)\n .use(rehypeReact, {\n createElement,\n Fragment,\n ...rehypeReactOptions,\n } as RehypeReactOptions)\n .processSync(source).result as ReactElement;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["import_provider", "import_provider", "import_react", "import_jsx_runtime", "import_jsx_runtime", "import_provider", "import_jsx_runtime", "children", "import_provider", "import_react", "import_jsx_runtime", "import_unist_util_visit", "node", "import_react", "remarkParse", "remarkToRehype", "rehypeReact", "import_jsx_runtime", "remarkGfm", "remarkDirective", "remarkDirectiveRehype", "remarkMath", "remarkGemoji", "remarkUnwrapImages", "rehypeKatex", "rehypeHighlight"]
|
|
7
7
|
}
|
package/dist/index.esm.mjs
CHANGED
|
@@ -19,7 +19,6 @@ var __spreadValues = (a, b) => {
|
|
|
19
19
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
20
|
|
|
21
21
|
// src/Markdown.tsx
|
|
22
|
-
import ReactMarkdown from "react-markdown";
|
|
23
22
|
import remarkDirective from "remark-directive";
|
|
24
23
|
import remarkDirectiveRehype from "remark-directive-rehype";
|
|
25
24
|
import remarkGfm from "remark-gfm";
|
|
@@ -28,7 +27,6 @@ import remarkGemoji from "remark-gemoji";
|
|
|
28
27
|
import remarkUnwrapImages from "remark-unwrap-images";
|
|
29
28
|
import rehypeKatex from "rehype-katex";
|
|
30
29
|
import rehypeHighlight from "rehype-highlight";
|
|
31
|
-
import rehypeRaw from "rehype-raw";
|
|
32
30
|
import { useDirectives as useDirectives2 } from "@hyperbook/provider";
|
|
33
31
|
|
|
34
32
|
// src/Code.tsx
|
|
@@ -92,7 +90,10 @@ var copyNoNavigator = (text) => {
|
|
|
92
90
|
document.execCommand("copy");
|
|
93
91
|
document.body.removeChild(textarea);
|
|
94
92
|
};
|
|
95
|
-
var Code = ({
|
|
93
|
+
var Code = ({
|
|
94
|
+
children,
|
|
95
|
+
className
|
|
96
|
+
}) => {
|
|
96
97
|
const directives = useDirectives();
|
|
97
98
|
if (className === "language-mermaid" && directives["mermaid"]) {
|
|
98
99
|
const Mermaid = directives["mermaid"];
|
|
@@ -119,7 +120,7 @@ var Code = ({ children, className, inline }) => {
|
|
|
119
120
|
}
|
|
120
121
|
}
|
|
121
122
|
};
|
|
122
|
-
return
|
|
123
|
+
return !className ? /* @__PURE__ */ jsxs("span", { className: "inline", children: [
|
|
123
124
|
/* @__PURE__ */ jsx("code", { ref, className, children }),
|
|
124
125
|
/* @__PURE__ */ jsx("button", { className: "copy", onClick: copyCode, "aria-label": "Copy Code", children: copied ? /* @__PURE__ */ jsx(MdDone, {}) : /* @__PURE__ */ jsx(MdContentCopy, {}) })
|
|
125
126
|
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -129,7 +130,8 @@ var Code = ({ children, className, inline }) => {
|
|
|
129
130
|
};
|
|
130
131
|
|
|
131
132
|
// src/Link.tsx
|
|
132
|
-
import { useLink } from "@hyperbook/provider";
|
|
133
|
+
import { useConfig, useLink } from "@hyperbook/provider";
|
|
134
|
+
import { useEffect, useState as useState2 } from "react";
|
|
133
135
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
134
136
|
function formatUrl(url) {
|
|
135
137
|
if (typeof url !== "string") {
|
|
@@ -145,8 +147,31 @@ function formatUrl(url) {
|
|
|
145
147
|
).join("//<wbr>");
|
|
146
148
|
return formatted;
|
|
147
149
|
}
|
|
148
|
-
var Link = ({
|
|
150
|
+
var Link = ({
|
|
151
|
+
href,
|
|
152
|
+
title,
|
|
153
|
+
children
|
|
154
|
+
}) => {
|
|
149
155
|
const L = useLink();
|
|
156
|
+
const config = useConfig();
|
|
157
|
+
const [isExternal, setIsExternal] = useState2(false);
|
|
158
|
+
useEffect(() => {
|
|
159
|
+
var _a;
|
|
160
|
+
if (href) {
|
|
161
|
+
const tmp = document.createElement("a");
|
|
162
|
+
tmp.href = href;
|
|
163
|
+
if (tmp.host !== window.location.host) {
|
|
164
|
+
setIsExternal(true);
|
|
165
|
+
} else if (config.basePath && !((_a = window.location.pathname) == null ? void 0 : _a.startsWith(config.basePath))) {
|
|
166
|
+
setIsExternal(true);
|
|
167
|
+
} else {
|
|
168
|
+
setIsExternal(false);
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
}, [href, config]);
|
|
172
|
+
if (isExternal) {
|
|
173
|
+
/* @__PURE__ */ jsx2(L, { href, title, target: "_blank", children: formatUrl(children) });
|
|
174
|
+
}
|
|
150
175
|
return /* @__PURE__ */ jsx2(L, { href, title, children: formatUrl(children) });
|
|
151
176
|
};
|
|
152
177
|
|
|
@@ -154,24 +179,36 @@ var Link = ({ href, title, children }) => {
|
|
|
154
179
|
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
155
180
|
var tableHeaders = [];
|
|
156
181
|
var tdIndex = 0;
|
|
157
|
-
var Table = ({
|
|
182
|
+
var Table = ({
|
|
183
|
+
children,
|
|
184
|
+
style
|
|
185
|
+
}) => {
|
|
158
186
|
tableHeaders = [];
|
|
159
187
|
return /* @__PURE__ */ jsx3("table", { style, children });
|
|
160
188
|
};
|
|
161
|
-
var Tr = ({
|
|
189
|
+
var Tr = ({
|
|
190
|
+
children,
|
|
191
|
+
style
|
|
192
|
+
}) => {
|
|
162
193
|
tdIndex = 0;
|
|
163
194
|
return /* @__PURE__ */ jsx3("tr", { style, children });
|
|
164
195
|
};
|
|
165
|
-
var Td = ({
|
|
196
|
+
var Td = ({
|
|
197
|
+
children,
|
|
198
|
+
style
|
|
199
|
+
}) => {
|
|
166
200
|
return /* @__PURE__ */ jsx3("td", { "data-label": tableHeaders[tdIndex++], style, children });
|
|
167
201
|
};
|
|
168
|
-
var Th = ({
|
|
202
|
+
var Th = ({
|
|
203
|
+
children,
|
|
204
|
+
style
|
|
205
|
+
}) => {
|
|
169
206
|
tableHeaders.push(children);
|
|
170
207
|
return /* @__PURE__ */ jsx3("th", { style, children });
|
|
171
208
|
};
|
|
172
209
|
|
|
173
210
|
// src/Headings.tsx
|
|
174
|
-
import { useBookmark, useConfig } from "@hyperbook/provider";
|
|
211
|
+
import { useBookmark, useConfig as useConfig2 } from "@hyperbook/provider";
|
|
175
212
|
import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
176
213
|
var makeAnchor = (heading) => {
|
|
177
214
|
let anchor = heading.toLowerCase();
|
|
@@ -179,9 +216,9 @@ var makeAnchor = (heading) => {
|
|
|
179
216
|
anchor = anchor.replace(/ /g, "-");
|
|
180
217
|
return anchor;
|
|
181
218
|
};
|
|
182
|
-
var Headings = ({
|
|
219
|
+
var Headings = (level) => ({ children, id }) => {
|
|
183
220
|
var _a;
|
|
184
|
-
const config =
|
|
221
|
+
const config = useConfig2();
|
|
185
222
|
const bookmarksConfig = (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.bookmarks;
|
|
186
223
|
const heading = (children == null ? void 0 : children[0]) || "";
|
|
187
224
|
let anchor = typeof heading === "string" ? makeAnchor(heading) : "";
|
|
@@ -217,11 +254,15 @@ var Headings = ({ level, children, id }) => {
|
|
|
217
254
|
|
|
218
255
|
// src/Image.tsx
|
|
219
256
|
import { useMakeUrl } from "@hyperbook/provider";
|
|
220
|
-
import { useState as
|
|
257
|
+
import { useState as useState3 } from "react";
|
|
221
258
|
import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
222
|
-
var Image = ({
|
|
259
|
+
var Image = ({
|
|
260
|
+
src,
|
|
261
|
+
title,
|
|
262
|
+
alt
|
|
263
|
+
}) => {
|
|
223
264
|
const makeUrl = useMakeUrl();
|
|
224
|
-
const [full, setFull] =
|
|
265
|
+
const [full, setFull] = useState3(false);
|
|
225
266
|
src = makeUrl(src, "public");
|
|
226
267
|
return /* @__PURE__ */ jsxs3("figure", { className: full ? "lightbox" : void 0, children: [
|
|
227
268
|
/* @__PURE__ */ jsx5("img", { src, alt, onClick: () => setFull((f) => !f) }),
|
|
@@ -272,14 +313,29 @@ var remarkCustomHeadingIds = () => {
|
|
|
272
313
|
};
|
|
273
314
|
};
|
|
274
315
|
|
|
316
|
+
// src/useRemarkSync.ts
|
|
317
|
+
import { Fragment as Fragment3, createElement } from "react";
|
|
318
|
+
import { unified } from "unified";
|
|
319
|
+
import remarkParse from "remark-parse";
|
|
320
|
+
import remarkToRehype from "remark-rehype";
|
|
321
|
+
import rehypeReact from "rehype-react";
|
|
322
|
+
var useRemarkSync = (source, {
|
|
323
|
+
remarkToRehypeOptions,
|
|
324
|
+
rehypeReactOptions,
|
|
325
|
+
remarkPlugins = [],
|
|
326
|
+
rehypePlugins = []
|
|
327
|
+
} = {}) => unified().use(remarkParse).use(remarkPlugins).use(remarkToRehype, remarkToRehypeOptions).use(rehypePlugins).use(rehypeReact, __spreadValues({
|
|
328
|
+
createElement,
|
|
329
|
+
Fragment: Fragment3
|
|
330
|
+
}, rehypeReactOptions)).processSync(source).result;
|
|
331
|
+
|
|
275
332
|
// src/Markdown.tsx
|
|
276
333
|
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
277
334
|
var Markdown = ({ children }) => {
|
|
278
335
|
const directives = useDirectives2();
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
className: "hyperbook-markdown",
|
|
336
|
+
const reactContent = useRemarkSync(children, {
|
|
337
|
+
rehypeReactOptions: {
|
|
338
|
+
passNode: true,
|
|
283
339
|
components: __spreadProps(__spreadValues({}, directives), {
|
|
284
340
|
a: Link,
|
|
285
341
|
code: Code,
|
|
@@ -287,33 +343,31 @@ var Markdown = ({ children }) => {
|
|
|
287
343
|
th: Th,
|
|
288
344
|
table: Table,
|
|
289
345
|
tr: Tr,
|
|
290
|
-
h1: Headings,
|
|
291
|
-
h2: Headings,
|
|
292
|
-
h3: Headings,
|
|
293
|
-
h4: Headings,
|
|
294
|
-
h5: Headings,
|
|
295
|
-
h6: Headings,
|
|
346
|
+
h1: Headings(1),
|
|
347
|
+
h2: Headings(2),
|
|
348
|
+
h3: Headings(3),
|
|
349
|
+
h4: Headings(4),
|
|
350
|
+
h5: Headings(5),
|
|
351
|
+
h6: Headings(6),
|
|
296
352
|
img: Image
|
|
297
|
-
})
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
}
|
|
316
|
-
);
|
|
353
|
+
})
|
|
354
|
+
},
|
|
355
|
+
remarkPlugins: [
|
|
356
|
+
remarkRemoveComments,
|
|
357
|
+
remarkCustomHeadingIds,
|
|
358
|
+
remarkGfm,
|
|
359
|
+
remarkDirective,
|
|
360
|
+
remarkDirectiveRehype,
|
|
361
|
+
remarkMath,
|
|
362
|
+
remarkGemoji,
|
|
363
|
+
remarkUnwrapImages
|
|
364
|
+
],
|
|
365
|
+
rehypePlugins: [
|
|
366
|
+
rehypeKatex,
|
|
367
|
+
[rehypeHighlight, { ignoreMissing: true, plainText: ["mermaid"] }]
|
|
368
|
+
]
|
|
369
|
+
});
|
|
370
|
+
return /* @__PURE__ */ jsx6("div", { className: "hyperbook-markdown", children: reactContent });
|
|
317
371
|
};
|
|
318
372
|
export {
|
|
319
373
|
Markdown
|
package/dist/index.esm.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../src/Markdown.tsx", "../src/Code.tsx", "../src/Link.tsx", "../src/Table.tsx", "../src/Headings.tsx", "../src/Image.tsx", "../src/remarkRemoveComments.ts", "../src/remarkCustomHeadingIds.ts"],
|
|
4
|
-
"sourcesContent": ["import ReactMarkdown from \"react-markdown\";\nimport remarkDirective from \"remark-directive\";\nimport remarkDirectiveRehype from \"remark-directive-rehype\";\nimport remarkGfm from \"remark-gfm\";\nimport remarkMath from \"remark-math\";\nimport remarkGemoji from \"remark-gemoji\";\nimport remarkUnwrapImages from \"remark-unwrap-images\";\nimport rehypeKatex from \"rehype-katex\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport rehypeRaw from \"rehype-raw\";\nimport { useDirectives } from \"@hyperbook/provider\";\nimport { Code } from \"./Code\";\nimport { Link } from \"./Link\";\nimport { Table, Td, Th, Tr } from \"./Table\";\nimport { Headings } from \"./Headings\";\nimport { Image } from \"./Image\";\n\nimport \"./index.css\";\nimport { remarkRemoveComments } from \"./remarkRemoveComments\";\nimport { remarkCustomHeadingIds } from \"./remarkCustomHeadingIds\";\n\nexport type MarkdownProps = {\n children: string;\n};\n\nexport const Markdown = ({ children }: MarkdownProps) => {\n const directives = useDirectives();\n\n return (\n <ReactMarkdown\n className=\"hyperbook-markdown\"\n components={{\n ...directives,\n a: Link,\n code: Code,\n td: Td,\n th: Th,\n table: Table,\n tr: Tr,\n h1: Headings,\n h2: Headings,\n h3: Headings,\n h4: Headings,\n h5: Headings,\n h6: Headings,\n img: Image,\n }}\n remarkPlugins={[\n remarkRemoveComments,\n remarkCustomHeadingIds,\n remarkDirective,\n remarkDirectiveRehype,\n remarkGfm,\n remarkMath,\n remarkGemoji,\n remarkUnwrapImages,\n ]}\n rehypePlugins={[\n rehypeRaw,\n rehypeKatex,\n [rehypeHighlight, { ignoreMissing: true, plainText: [\"mermaid\"] }],\n ]}\n skipHtml={false}\n >\n {children}\n </ReactMarkdown>\n );\n};\n", "import { useDirectives } from \"@hyperbook/provider\";\nimport { Fragment, useRef, useState } from \"react\";\nimport { Components } from \"react-markdown\";\n\nconst MdContentCopy = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n stroke=\"currentColor\"\n fill=\"currentColor\"\n strokeWidth=\"0\"\n height=\"1em\"\n width=\"1em\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z\" />\n </svg>\n );\n};\n\nconst MdDone = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n stroke=\"currentColor\"\n fill=\"currentColor\"\n strokeWidth=\"0\"\n height=\"1em\"\n width=\"1em\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n </svg>\n );\n};\n\nconst copyNoNavigator = (text: string) => {\n const isIos = navigator.userAgent.match(/ipad|iphone/i);\n const textarea = document.createElement(\"textarea\");\n\n // create textarea\n textarea.value = text;\n\n // ios will zoom in on the input if the font-size is < 16px\n textarea.style.fontSize = \"20px\";\n document.body.appendChild(textarea);\n\n // select text\n if (isIos) {\n const range = document.createRange();\n range.selectNodeContents(textarea);\n\n const selection = window.getSelection();\n if (selection) {\n selection.removeAllRanges();\n selection.addRange(range);\n }\n textarea.setSelectionRange(0, 999999);\n } else {\n textarea.select();\n }\n\n // copy selection\n document.execCommand(\"copy\");\n\n // cleanup\n document.body.removeChild(textarea);\n};\n\nexport const Code: Components[\"code\"] = ({ children, className, inline }) => {\n const directives = useDirectives();\n if (className === \"language-mermaid\" && directives[\"mermaid\"]) {\n const Mermaid = directives[\"mermaid\"];\n return <Mermaid children={children} />;\n }\n\n const ref = useRef<HTMLElement>(null);\n const [copied, setCopied] = useState(false);\n const copyCode = () => {\n if (ref.current) {\n const text = ref.current.innerText;\n if (navigator.clipboard) {\n navigator.clipboard\n .writeText(text)\n .then(() => {\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n })\n .catch(() => {\n copyNoNavigator(text);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n });\n } else {\n copyNoNavigator(text);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n }\n }\n };\n\n return inline ? (\n <span className=\"inline\">\n <code ref={ref} className={className}>\n {children}\n </code>\n <button className=\"copy\" onClick={copyCode} aria-label=\"Copy Code\">\n {copied ? <MdDone /> : <MdContentCopy />}\n </button>\n </span>\n ) : (\n <Fragment>\n <code ref={ref} className={className}>\n {children}\n </code>\n <button className=\"copy\" onClick={copyCode} aria-label=\"Copy Code\">\n {copied ? <MdDone /> : <MdContentCopy />}\n </button>\n </Fragment>\n );\n};\n", "import { useLink } from \"@hyperbook/provider\";\nimport { ReactNode } from \"react\";\nimport { Components } from \"react-markdown\";\n\n// see: https://css-tricks.com/better-line-breaks-for-long-urls/\nfunction formatUrl(url: ReactNode) {\n if (typeof url !== \"string\") {\n return url;\n }\n // Split the URL into an array to distinguish double slashes from single slashes\n var doubleSlash = url.split(\"//\");\n\n // Format the strings on either side of double slashes separately\n var formatted = doubleSlash\n .map(\n (str) =>\n // Insert a word break opportunity after a colon\n str\n .replace(/(?<after>:)/giu, \"$1<wbr>\")\n // Before a single slash, tilde, period, comma, hyphen, underline, question mark, number sign, or percent symbol\n .replace(/(?<before>[/~.,\\-_?#%])/giu, \"<wbr>$1\")\n // Before and after an equals sign or ampersand\n .replace(/(?<beforeAndAfter>[=&])/giu, \"<wbr>$1<wbr>\")\n // Reconnect the strings with word break opportunities after double slashes\n )\n .join(\"//<wbr>\");\n\n return formatted;\n}\n\nexport const Link: Components[\"a\"] = ({ href, title, children }) => {\n const L = useLink();\n\n return (\n <L href={href} title={title}>\n {formatUrl(children)}\n </L>\n );\n};\n", "import { ReactNode } from \"react\";\nimport { Components } from \"react-markdown\";\n\nlet tableHeaders: ReactNode[][] = [];\nlet tdIndex = 0;\n\nexport const Table: Components[\"table\"] = ({ children, style }) => {\n tableHeaders = [];\n return <table style={style}>{children}</table>;\n};\n\nexport const Tr: Components[\"tr\"] = ({ children, style }) => {\n tdIndex = 0;\n return <tr style={style}>{children}</tr>;\n};\n\nexport const Td: Components[\"td\"] = ({ children, style }) => {\n return (\n <td data-label={tableHeaders[tdIndex++]} style={style}>\n {children}\n </td>\n );\n};\n\nexport const Th: Components[\"th\"] = ({ children, style }) => {\n tableHeaders.push(children);\n return <th style={style}>{children}</th>;\n};\n", "import { useBookmark, useConfig } from \"@hyperbook/provider\";\nimport { Components } from \"react-markdown\";\n\nexport const makeAnchor = (heading: string) => {\n // If we have a heading, make it lower case\n let anchor = heading.toLowerCase();\n\n // Clean anchor (replace special characters whitespaces).\n // Alternatively, use encodeURIComponent() if you don't care about\n // pretty anchor links\n anchor = anchor.replace(/[^a-zA-Z0-9 ]/g, \"\");\n anchor = anchor.replace(/ /g, \"-\");\n\n return anchor;\n};\n\nexport const Headings: Components[\"h1\"] = ({ level, children, id }) => {\n const config = useConfig();\n const bookmarksConfig = config?.elements?.bookmarks;\n // Access actual (string) value of heading\n const heading = children?.[0] || \"\";\n\n // If we have a heading, make it lower case\n let anchor = typeof heading === \"string\" ? makeAnchor(heading) : \"\";\n\n const label = typeof heading === \"string\" ? heading : anchor;\n\n const [bookmark, toggleBookmark] = useBookmark(anchor, label);\n\n // Utility\n const container = (children: React.ReactNode): JSX.Element => (\n <>\n <a className=\"heading\" id={id ?? anchor} href={`#${id ?? anchor}`}>\n <span>{children}</span>\n </a>\n {bookmarksConfig !== false && (\n <button\n className={bookmark ? \"bookmark active\" : \"bookmark\"}\n onClick={() => toggleBookmark()}\n title=\"Bookmark\"\n >\n \uD83D\uDD16\n </button>\n )}\n </>\n );\n\n switch (level) {\n case 1:\n return <h1>{container(children)}</h1>;\n case 2:\n return <h2>{container(children)}</h2>;\n case 3:\n return <h3>{container(children)}</h3>;\n case 4:\n return <h4>{container(children)}</h4>;\n case 5:\n return <h5>{container(children)}</h5>;\n\n default:\n return <h6>{container(children)}</h6>;\n }\n};\n", "import { useMakeUrl } from \"@hyperbook/provider\";\nimport { useState } from \"react\";\nimport { Components } from \"react-markdown\";\n\nexport const Image: Components[\"img\"] = ({ src, title, alt }) => {\n const makeUrl = useMakeUrl();\n const [full, setFull] = useState(false);\n src = makeUrl(src, \"public\");\n\n return (\n <figure className={full ? \"lightbox\" : undefined}>\n <img src={src} alt={alt} onClick={() => setFull((f) => !f)} />\n {title && <figcaption>{title}</figcaption>}\n </figure>\n );\n};\n", "//@ts-nocheck\nimport { visit, SKIP } from \"unist-util-visit\";\nimport { Transformer } from \"unified\";\nimport { BuildVisitor } from \"unist-util-visit/complex-types\";\n\nexport const remarkRemoveComments: () => Transformer = () => (tree) => {\n const htmlCommentRegex = /<!--([\\s\\S]*?)-->/g;\n\n const handler: BuildVisitor = (node, index, parent) => {\n const isComment = node.value.match(htmlCommentRegex);\n\n if (isComment) {\n // remove node\n parent.children.splice(index, 1);\n // Do not traverse `node`, continue at the node *now* at `index`. http://unifiedjs.com/learn/recipe/remove-node/\n return [SKIP, index];\n }\n };\n\n visit(tree, \"html\", handler);\n\n visit(tree, \"jsx\", handler);\n};\n", "import { visit } from \"unist-util-visit\";\nimport { Transformer } from \"unified\";\n\nexport const remarkCustomHeadingIds: () => Transformer = () => {\n return function (node) {\n visit(node, \"heading\", (node) => {\n let lastChild = node.children[node.children.length - 1];\n if (lastChild && lastChild.type === \"text\") {\n let string = lastChild.value.replace(/ +$/, \"\");\n let matched = string.match(/ {#([^]+?)}$/);\n\n if (matched) {\n let id = matched[1];\n if (!!id.length) {\n if (!node.data) {\n node.data = {};\n }\n if (!node.data.hProperties) {\n node.data.hProperties = {};\n }\n node.data.id = node.data.hProperties.id = id;\n\n string = string.substring(0, matched.index);\n lastChild.value = string;\n }\n }\n }\n });\n };\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,
|
|
6
|
-
"names": ["useDirectives", "jsx", "jsx", "Fragment", "jsx", "jsxs", "children", "useState", "jsx", "jsxs", "visit", "node", "jsx", "useDirectives"]
|
|
3
|
+
"sources": ["../src/Markdown.tsx", "../src/Code.tsx", "../src/Link.tsx", "../src/Table.tsx", "../src/Headings.tsx", "../src/Image.tsx", "../src/remarkRemoveComments.ts", "../src/remarkCustomHeadingIds.ts", "../src/useRemarkSync.ts"],
|
|
4
|
+
"sourcesContent": ["import remarkDirective from \"remark-directive\";\nimport remarkDirectiveRehype from \"remark-directive-rehype\";\nimport remarkGfm from \"remark-gfm\";\nimport remarkMath from \"remark-math\";\nimport remarkGemoji from \"remark-gemoji\";\nimport remarkUnwrapImages from \"remark-unwrap-images\";\nimport rehypeKatex from \"rehype-katex\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport { useDirectives } from \"@hyperbook/provider\";\nimport { Code } from \"./Code\";\nimport { Link } from \"./Link\";\nimport { Table, Td, Th, Tr } from \"./Table\";\nimport { Headings } from \"./Headings\";\nimport { Image } from \"./Image\";\n\nimport \"./index.css\";\nimport { remarkRemoveComments } from \"./remarkRemoveComments\";\nimport { remarkCustomHeadingIds } from \"./remarkCustomHeadingIds\";\nimport { useRemarkSync } from \"./useRemarkSync\";\n\nexport type MarkdownProps = {\n children: string;\n};\n\nexport const Markdown = ({ children }: MarkdownProps) => {\n const directives = useDirectives();\n\n const reactContent = useRemarkSync(children, {\n rehypeReactOptions: {\n passNode: true,\n components: {\n ...directives,\n a: Link,\n code: Code,\n td: Td,\n th: Th,\n table: Table,\n tr: Tr,\n h1: Headings(1),\n h2: Headings(2),\n h3: Headings(3),\n h4: Headings(4),\n h5: Headings(5),\n h6: Headings(6),\n img: Image,\n },\n },\n remarkPlugins: [\n remarkRemoveComments,\n remarkCustomHeadingIds,\n remarkGfm,\n remarkDirective,\n remarkDirectiveRehype,\n remarkMath,\n remarkGemoji,\n remarkUnwrapImages,\n ],\n rehypePlugins: [\n rehypeKatex,\n [rehypeHighlight, { ignoreMissing: true, plainText: [\"mermaid\"] }],\n ],\n });\n\n return <div className=\"hyperbook-markdown\">{reactContent}</div>;\n};\n", "import { useDirectives } from \"@hyperbook/provider\";\nimport { ComponentType, Fragment, useRef, useState } from \"react\";\n\nconst MdContentCopy = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n stroke=\"currentColor\"\n fill=\"currentColor\"\n strokeWidth=\"0\"\n height=\"1em\"\n width=\"1em\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z\" />\n </svg>\n );\n};\n\nconst MdDone = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n stroke=\"currentColor\"\n fill=\"currentColor\"\n strokeWidth=\"0\"\n height=\"1em\"\n width=\"1em\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n </svg>\n );\n};\n\nconst copyNoNavigator = (text: string) => {\n const isIos = navigator.userAgent.match(/ipad|iphone/i);\n const textarea = document.createElement(\"textarea\");\n\n // create textarea\n textarea.value = text;\n\n // ios will zoom in on the input if the font-size is < 16px\n textarea.style.fontSize = \"20px\";\n document.body.appendChild(textarea);\n\n // select text\n if (isIos) {\n const range = document.createRange();\n range.selectNodeContents(textarea);\n\n const selection = window.getSelection();\n if (selection) {\n selection.removeAllRanges();\n selection.addRange(range);\n }\n textarea.setSelectionRange(0, 999999);\n } else {\n textarea.select();\n }\n\n // copy selection\n document.execCommand(\"copy\");\n\n // cleanup\n document.body.removeChild(textarea);\n};\n\nexport const Code: ComponentType<JSX.IntrinsicElements[\"code\"]> = ({\n children,\n className,\n}) => {\n const directives = useDirectives();\n if (className === \"language-mermaid\" && directives[\"mermaid\"]) {\n const Mermaid = directives[\"mermaid\"];\n return <Mermaid children={children} />;\n }\n\n const ref = useRef<HTMLElement>(null);\n const [copied, setCopied] = useState(false);\n const copyCode = () => {\n if (ref.current) {\n const text = ref.current.innerText;\n if (navigator.clipboard) {\n navigator.clipboard\n .writeText(text)\n .then(() => {\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n })\n .catch(() => {\n copyNoNavigator(text);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n });\n } else {\n copyNoNavigator(text);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n }\n }\n };\n\n return !className ? (\n <span className=\"inline\">\n <code ref={ref} className={className}>\n {children}\n </code>\n <button className=\"copy\" onClick={copyCode} aria-label=\"Copy Code\">\n {copied ? <MdDone /> : <MdContentCopy />}\n </button>\n </span>\n ) : (\n <Fragment>\n <code ref={ref} className={className}>\n {children}\n </code>\n <button className=\"copy\" onClick={copyCode} aria-label=\"Copy Code\">\n {copied ? <MdDone /> : <MdContentCopy />}\n </button>\n </Fragment>\n );\n};\n", "import { useConfig, useLink } from \"@hyperbook/provider\";\nimport { ComponentType, ReactNode, useEffect, useState } from \"react\";\n\n// see: https://css-tricks.com/better-line-breaks-for-long-urls/\nfunction formatUrl(url: ReactNode) {\n if (typeof url !== \"string\") {\n return url;\n }\n // Split the URL into an array to distinguish double slashes from single slashes\n var doubleSlash = url.split(\"//\");\n\n // Format the strings on either side of double slashes separately\n var formatted = doubleSlash\n .map(\n (str) =>\n // Insert a word break opportunity after a colon\n str\n .replace(/(?<after>:)/giu, \"$1<wbr>\")\n // Before a single slash, tilde, period, comma, hyphen, underline, question mark, number sign, or percent symbol\n .replace(/(?<before>[/~.,\\-_?#%])/giu, \"<wbr>$1\")\n // Before and after an equals sign or ampersand\n .replace(/(?<beforeAndAfter>[=&])/giu, \"<wbr>$1<wbr>\")\n // Reconnect the strings with word break opportunities after double slashes\n )\n .join(\"//<wbr>\");\n\n return formatted;\n}\n\nexport const Link: ComponentType<JSX.IntrinsicElements[\"a\"]> = ({\n href,\n title,\n children,\n}) => {\n const L = useLink();\n const config = useConfig();\n const [isExternal, setIsExternal] = useState(false);\n\n useEffect(() => {\n if (href) {\n const tmp = document.createElement(\"a\");\n tmp.href = href;\n if (tmp.host !== window.location.host) {\n setIsExternal(true);\n } else if (\n config.basePath &&\n !window.location.pathname?.startsWith(config.basePath)\n ) {\n setIsExternal(true);\n } else {\n setIsExternal(false);\n }\n }\n }, [href, config]);\n\n if (isExternal) {\n <L href={href} title={title} target=\"_blank\">\n {formatUrl(children)}\n </L>;\n }\n\n return (\n <L href={href} title={title}>\n {formatUrl(children)}\n </L>\n );\n};\n", "import { ComponentType, ReactNode } from \"react\";\n\nlet tableHeaders: ReactNode[] = [];\nlet tdIndex = 0;\n\nexport const Table: ComponentType<JSX.IntrinsicElements[\"table\"]> = ({\n children,\n style,\n}) => {\n tableHeaders = [];\n return <table style={style}>{children}</table>;\n};\n\nexport const Tr: ComponentType<JSX.IntrinsicElements[\"tr\"]> = ({\n children,\n style,\n}) => {\n tdIndex = 0;\n return <tr style={style}>{children}</tr>;\n};\n\nexport const Td: ComponentType<JSX.IntrinsicElements[\"td\"]> = ({\n children,\n style,\n}) => {\n return (\n <td data-label={tableHeaders[tdIndex++]} style={style}>\n {children}\n </td>\n );\n};\n\nexport const Th: ComponentType<JSX.IntrinsicElements[\"th\"]> = ({\n children,\n style,\n}) => {\n tableHeaders.push(children);\n return <th style={style}>{children}</th>;\n};\n", "import { useBookmark, useConfig } from \"@hyperbook/provider\";\nimport { ComponentType } from \"react\";\n\nexport const makeAnchor = (heading: string) => {\n // If we have a heading, make it lower case\n let anchor = heading.toLowerCase();\n\n // Clean anchor (replace special characters whitespaces).\n // Alternatively, use encodeURIComponent() if you don't care about\n // pretty anchor links\n anchor = anchor.replace(/[^a-zA-Z0-9 ]/g, \"\");\n anchor = anchor.replace(/ /g, \"-\");\n\n return anchor;\n};\n\nexport const Headings =\n (level: number): ComponentType<JSX.IntrinsicElements[\"h1\"]> =>\n ({ children, id }) => {\n const config = useConfig();\n const bookmarksConfig = config?.elements?.bookmarks;\n // Access actual (string) value of heading\n const heading = children?.[0] || \"\";\n\n // If we have a heading, make it lower case\n let anchor = typeof heading === \"string\" ? makeAnchor(heading) : \"\";\n\n const label = typeof heading === \"string\" ? heading : anchor;\n\n const [bookmark, toggleBookmark] = useBookmark(anchor, label);\n\n // Utility\n const container = (children: React.ReactNode): JSX.Element => (\n <>\n <a className=\"heading\" id={id ?? anchor} href={`#${id ?? anchor}`}>\n <span>{children}</span>\n </a>\n {bookmarksConfig !== false && (\n <button\n className={bookmark ? \"bookmark active\" : \"bookmark\"}\n onClick={() => toggleBookmark()}\n title=\"Bookmark\"\n >\n \uD83D\uDD16\n </button>\n )}\n </>\n );\n\n switch (level) {\n case 1:\n return <h1>{container(children)}</h1>;\n case 2:\n return <h2>{container(children)}</h2>;\n case 3:\n return <h3>{container(children)}</h3>;\n case 4:\n return <h4>{container(children)}</h4>;\n case 5:\n return <h5>{container(children)}</h5>;\n\n default:\n return <h6>{container(children)}</h6>;\n }\n };\n", "import { useMakeUrl } from \"@hyperbook/provider\";\nimport { ComponentType, useState } from \"react\";\n\nexport const Image: ComponentType<JSX.IntrinsicElements[\"img\"]> = ({\n src,\n title,\n alt,\n}) => {\n const makeUrl = useMakeUrl();\n const [full, setFull] = useState(false);\n src = makeUrl(src, \"public\");\n\n return (\n <figure className={full ? \"lightbox\" : undefined}>\n <img src={src} alt={alt} onClick={() => setFull((f) => !f)} />\n {title && <figcaption>{title}</figcaption>}\n </figure>\n );\n};\n", "//@ts-nocheck\nimport { visit, SKIP } from \"unist-util-visit\";\nimport { Transformer } from \"unified\";\nimport { BuildVisitor } from \"unist-util-visit/complex-types\";\n\nexport const remarkRemoveComments: () => Transformer = () => (tree) => {\n const htmlCommentRegex = /<!--([\\s\\S]*?)-->/g;\n\n const handler: BuildVisitor = (node, index, parent) => {\n const isComment = node.value.match(htmlCommentRegex);\n\n if (isComment) {\n // remove node\n parent.children.splice(index, 1);\n // Do not traverse `node`, continue at the node *now* at `index`. http://unifiedjs.com/learn/recipe/remove-node/\n return [SKIP, index];\n }\n };\n\n visit(tree, \"html\", handler);\n\n visit(tree, \"jsx\", handler);\n};\n", "import { visit } from \"unist-util-visit\";\nimport { Transformer } from \"unified\";\n\nexport const remarkCustomHeadingIds: () => Transformer = () => {\n return function (node) {\n visit(node, \"heading\", (node) => {\n let lastChild = node.children[node.children.length - 1];\n if (lastChild && lastChild.type === \"text\") {\n let string = lastChild.value.replace(/ +$/, \"\");\n let matched = string.match(/ {#([^]+?)}$/);\n\n if (matched) {\n let id = matched[1];\n if (!!id.length) {\n if (!node.data) {\n node.data = {};\n }\n if (!node.data.hProperties) {\n node.data.hProperties = {};\n }\n node.data.id = node.data.hProperties.id = id;\n\n string = string.substring(0, matched.index);\n lastChild.value = string;\n }\n }\n }\n });\n };\n};\n", "import { Fragment, ReactElement, createElement } from \"react\";\nimport { unified, PluggableList } from \"unified\";\nimport remarkParse from \"remark-parse\";\nimport { Options as RemarkRehypeOptions } from \"mdast-util-to-hast\";\nimport remarkToRehype from \"remark-rehype\";\nimport rehypeReact, { Options as RehypeReactOptions } from \"rehype-react\";\n\ntype PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;\n\nexport interface UseRemarkSyncOptions {\n remarkToRehypeOptions?: RemarkRehypeOptions;\n rehypeReactOptions?: PartialBy<RehypeReactOptions, \"createElement\">;\n remarkPlugins?: PluggableList;\n rehypePlugins?: PluggableList;\n}\n\nexport const useRemarkSync = (\n source: string,\n {\n remarkToRehypeOptions,\n rehypeReactOptions,\n remarkPlugins = [],\n rehypePlugins = [],\n }: UseRemarkSyncOptions = {}\n): ReactElement =>\n unified()\n .use(remarkParse)\n .use(remarkPlugins)\n .use(remarkToRehype, remarkToRehypeOptions)\n .use(rehypePlugins)\n .use(rehypeReact, {\n createElement,\n Fragment,\n ...rehypeReactOptions,\n } as RehypeReactOptions)\n .processSync(source).result as ReactElement;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["useDirectives", "useState", "jsx", "jsx", "useConfig", "Fragment", "jsx", "jsxs", "children", "useState", "jsx", "jsxs", "visit", "node", "Fragment", "Fragment", "jsx", "useDirectives"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ReactElement } from "react";
|
|
2
|
+
import { PluggableList } from "unified";
|
|
3
|
+
import { Options as RemarkRehypeOptions } from "mdast-util-to-hast";
|
|
4
|
+
import { Options as RehypeReactOptions } from "rehype-react";
|
|
5
|
+
type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
|
|
6
|
+
export interface UseRemarkSyncOptions {
|
|
7
|
+
remarkToRehypeOptions?: RemarkRehypeOptions;
|
|
8
|
+
rehypeReactOptions?: PartialBy<RehypeReactOptions, "createElement">;
|
|
9
|
+
remarkPlugins?: PluggableList;
|
|
10
|
+
rehypePlugins?: PluggableList;
|
|
11
|
+
}
|
|
12
|
+
export declare const useRemarkSync: (source: string, { remarkToRehypeOptions, rehypeReactOptions, remarkPlugins, rehypePlugins, }?: UseRemarkSyncOptions) => ReactElement;
|
|
13
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hyperbook/markdown",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"author": "Mike Barkmin",
|
|
5
5
|
"homepage": "https://github.com/openpatch/hyperbook#readme",
|
|
6
6
|
"license": "MIT",
|
|
@@ -32,17 +32,19 @@
|
|
|
32
32
|
"url": "https://github.com/openpatch/hyperbook/issues"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"
|
|
35
|
+
"mdast-util-to-hast": "^12.3.0",
|
|
36
36
|
"rehype-highlight": "5.0.2",
|
|
37
37
|
"rehype-katex": "6.0.3",
|
|
38
|
+
"rehype-parse": "^8.0.4",
|
|
38
39
|
"rehype-raw": "^6.1.1",
|
|
40
|
+
"rehype-react": "^7.2.0",
|
|
39
41
|
"remark-directive": "2.0.1",
|
|
40
42
|
"remark-directive-rehype": "0.4.2",
|
|
41
43
|
"remark-gemoji": "7.0.1",
|
|
42
44
|
"remark-math": "5.1.1",
|
|
43
45
|
"remark-unwrap-images": "3.0.1",
|
|
44
46
|
"unist-util-visit": "^4.1.1",
|
|
45
|
-
"@hyperbook/provider": "0.
|
|
47
|
+
"@hyperbook/provider": "0.3.0"
|
|
46
48
|
},
|
|
47
49
|
"peerDependencies": {
|
|
48
50
|
"react": "18.x",
|
|
@@ -50,8 +52,8 @@
|
|
|
50
52
|
},
|
|
51
53
|
"devDependencies": {
|
|
52
54
|
"@types/hast": "2.3.4",
|
|
53
|
-
"@types/react": "18.2.
|
|
54
|
-
"@types/react-dom": "18.2.
|
|
55
|
+
"@types/react": "18.2.12",
|
|
56
|
+
"@types/react-dom": "18.2.5",
|
|
55
57
|
"@types/unist": "2.0.6",
|
|
56
58
|
"react": "18.2.0",
|
|
57
59
|
"react-dom": "18.2.0",
|