+ ) => (
+
+
+
+ )
+);
diff --git a/stories/components/text.tsx b/stories/components/text.tsx
new file mode 100644
index 0000000..82a13ba
--- /dev/null
+++ b/stories/components/text.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+const style: React.CSSProperties = { flex: 1, margin: 10, overflowY: "scroll" };
+const textStyle: React.CSSProperties = {
+ whiteSpace: "pre-wrap",
+};
+
+export default ({ children }: { children: React.ReactNode }) => (
+
+);
diff --git a/stories/playground.stories.tsx b/stories/playground.stories.tsx
new file mode 100644
index 0000000..cdd7740
--- /dev/null
+++ b/stories/playground.stories.tsx
@@ -0,0 +1,86 @@
+import React, { useMemo, useRef, useState } from "react";
+import { unified } from "unified";
+import markdown from "remark-parse";
+import gfm from "remark-gfm";
+import frontmatter from "remark-frontmatter";
+import docx, { Packer } from "../src";
+import TextEditor from "./components/text-editor";
+// @ts-expect-error no type definition
+import text from "../fixtures/article.md";
+import { saveAs } from "file-saver";
+
+const fetchImage = async (
+ url: string
+): Promise<{ image: ArrayBuffer; width: number; height: number }> => {
+ const image = new Image();
+ const res = await fetch(url);
+ const buf = await res.arrayBuffer();
+ return new Promise((resolve, reject) => {
+ image.onload = () => {
+ resolve({
+ image: buf,
+ width: image.naturalWidth,
+ height: image.naturalHeight,
+ });
+ };
+ image.onerror = reject;
+ image.src = URL.createObjectURL(new Blob([buf], { type: "image/png" }));
+ });
+};
+
+const toDocxProcessor = unified()
+ .use(markdown)
+ .use(gfm)
+ .use(frontmatter)
+ .use(docx, {
+ imageResolver: fetchImage,
+ });
+
+const toDocx = async (s: string) => {
+ const doc = await toDocxProcessor.process(s);
+ return Packer.toBlob(doc.result as any);
+};
+
+export default {
+ title: "Playground",
+};
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+ ({
+ width: "100vw",
+ height: "100vh",
+ display: "flex",
+ flexDirection: "row",
+ fontSize: "10.5pt",
+ }),
+ []
+ )}
+ >
+ {children}
+
+);
+
+export const MarkdownToDocx = () => {
+ const ref = useRef(null);
+ return (
+ <>
+
+
+
+
+
+
+
+ );
+};
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..e5465ae
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,18 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "module": "esnext",
+ "moduleResolution": "node",
+ "lib": ["esnext"],
+ "strict": true,
+ "allowJs": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "allowSyntheticDefaultImports": true,
+ "forceConsistentCasingInFileNames": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ },
+ "include": ["src"],
+ "exclude": ["node_modules", "src/**/*.spec.*"]
+}