@create-markdown/react 0.1.0

package/dist/index.js

@@ -0,0 +1,525 @@
+// src/block-renderer.tsx
+import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+function BlockRenderer({
+  blocks,
+  className,
+  customRenderers
+}) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    className,
+    children: blocks.map((block) => /* @__PURE__ */ jsxDEV(BlockElement, {
+      block,
+      customRenderers
+    }, block.id, false, undefined, this))
+  }, undefined, false, undefined, this);
+}
+function BlockElement({
+  block,
+  customRenderers
+}) {
+  const CustomRenderer = customRenderers?.[block.type];
+  if (CustomRenderer) {
+    return /* @__PURE__ */ jsxDEV(CustomRenderer, {
+      block
+    }, undefined, false, undefined, this);
+  }
+  switch (block.type) {
+    case "paragraph":
+      return /* @__PURE__ */ jsxDEV(ParagraphRenderer, {
+        block
+      }, undefined, false, undefined, this);
+    case "heading":
+      return /* @__PURE__ */ jsxDEV(HeadingRenderer, {
+        block
+      }, undefined, false, undefined, this);
+    case "bulletList":
+      return /* @__PURE__ */ jsxDEV(BulletListRenderer, {
+        block,
+        customRenderers
+      }, undefined, false, undefined, this);
+    case "numberedList":
+      return /* @__PURE__ */ jsxDEV(NumberedListRenderer, {
+        block,
+        customRenderers
+      }, undefined, false, undefined, this);
+    case "checkList":
+      return /* @__PURE__ */ jsxDEV(CheckListRenderer, {
+        block
+      }, undefined, false, undefined, this);
+    case "codeBlock":
+      return /* @__PURE__ */ jsxDEV(CodeBlockRenderer, {
+        block
+      }, undefined, false, undefined, this);
+    case "blockquote":
+      return /* @__PURE__ */ jsxDEV(BlockquoteRenderer, {
+        block
+      }, undefined, false, undefined, this);
+    case "table":
+      return /* @__PURE__ */ jsxDEV(TableRenderer, {
+        block
+      }, undefined, false, undefined, this);
+    case "image":
+      return /* @__PURE__ */ jsxDEV(ImageRenderer, {
+        block
+      }, undefined, false, undefined, this);
+    case "divider":
+      return /* @__PURE__ */ jsxDEV(DividerRenderer, {}, undefined, false, undefined, this);
+    case "callout":
+      return /* @__PURE__ */ jsxDEV(CalloutRenderer, {
+        block
+      }, undefined, false, undefined, this);
+    default:
+      return null;
+  }
+}
+function InlineContent({ spans }) {
+  return /* @__PURE__ */ jsxDEV(Fragment, {
+    children: spans.map((span, index) => /* @__PURE__ */ jsxDEV(SpanElement, {
+      span
+    }, index, false, undefined, this))
+  }, undefined, false, undefined, this);
+}
+function SpanElement({ span }) {
+  let content = span.text;
+  const styles = span.styles;
+  if (styles.code) {
+    content = /* @__PURE__ */ jsxDEV("code", {
+      children: content
+    }, undefined, false, undefined, this);
+  }
+  if (styles.highlight) {
+    content = /* @__PURE__ */ jsxDEV("mark", {
+      children: content
+    }, undefined, false, undefined, this);
+  }
+  if (styles.strikethrough) {
+    content = /* @__PURE__ */ jsxDEV("del", {
+      children: content
+    }, undefined, false, undefined, this);
+  }
+  if (styles.underline) {
+    content = /* @__PURE__ */ jsxDEV("u", {
+      children: content
+    }, undefined, false, undefined, this);
+  }
+  if (styles.italic) {
+    content = /* @__PURE__ */ jsxDEV("em", {
+      children: content
+    }, undefined, false, undefined, this);
+  }
+  if (styles.bold) {
+    content = /* @__PURE__ */ jsxDEV("strong", {
+      children: content
+    }, undefined, false, undefined, this);
+  }
+  if (styles.link) {
+    content = /* @__PURE__ */ jsxDEV("a", {
+      href: styles.link.url,
+      title: styles.link.title,
+      children: content
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV(Fragment, {
+    children: content
+  }, undefined, false, undefined, this);
+}
+function ParagraphRenderer({ block }) {
+  return /* @__PURE__ */ jsxDEV("p", {
+    children: /* @__PURE__ */ jsxDEV(InlineContent, {
+      spans: block.content
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function HeadingRenderer({ block }) {
+  const Tag = `h${block.props.level}`;
+  return /* @__PURE__ */ jsxDEV(Tag, {
+    children: /* @__PURE__ */ jsxDEV(InlineContent, {
+      spans: block.content
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function BulletListRenderer({
+  block,
+  customRenderers
+}) {
+  return /* @__PURE__ */ jsxDEV("ul", {
+    children: block.children.map((child) => /* @__PURE__ */ jsxDEV("li", {
+      children: [
+        /* @__PURE__ */ jsxDEV(InlineContent, {
+          spans: child.content
+        }, undefined, false, undefined, this),
+        child.children.length > 0 && /* @__PURE__ */ jsxDEV(BlockElement, {
+          block: child,
+          customRenderers
+        }, undefined, false, undefined, this)
+      ]
+    }, child.id, true, undefined, this))
+  }, undefined, false, undefined, this);
+}
+function NumberedListRenderer({
+  block,
+  customRenderers
+}) {
+  return /* @__PURE__ */ jsxDEV("ol", {
+    children: block.children.map((child) => /* @__PURE__ */ jsxDEV("li", {
+      children: [
+        /* @__PURE__ */ jsxDEV(InlineContent, {
+          spans: child.content
+        }, undefined, false, undefined, this),
+        child.children.length > 0 && /* @__PURE__ */ jsxDEV(BlockElement, {
+          block: child,
+          customRenderers
+        }, undefined, false, undefined, this)
+      ]
+    }, child.id, true, undefined, this))
+  }, undefined, false, undefined, this);
+}
+function CheckListRenderer({ block }) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    style: { display: "flex", alignItems: "flex-start", gap: "0.5rem" },
+    children: [
+      /* @__PURE__ */ jsxDEV("input", {
+        type: "checkbox",
+        checked: block.props.checked,
+        readOnly: true,
+        style: { marginTop: "0.25rem" }
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("span", {
+        style: { textDecoration: block.props.checked ? "line-through" : "none" },
+        children: /* @__PURE__ */ jsxDEV(InlineContent, {
+          spans: block.content
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function CodeBlockRenderer({ block }) {
+  const code = block.content.map((span) => span.text).join("");
+  const language = block.props.language;
+  return /* @__PURE__ */ jsxDEV("pre", {
+    children: /* @__PURE__ */ jsxDEV("code", {
+      className: language ? `language-${language}` : undefined,
+      children: code
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function BlockquoteRenderer({ block }) {
+  return /* @__PURE__ */ jsxDEV("blockquote", {
+    children: /* @__PURE__ */ jsxDEV(InlineContent, {
+      spans: block.content
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function TableRenderer({ block }) {
+  const { headers, rows, alignments } = block.props;
+  const getAlignment = (index) => {
+    return alignments?.[index] ?? undefined;
+  };
+  return /* @__PURE__ */ jsxDEV("table", {
+    children: [
+      headers.length > 0 && /* @__PURE__ */ jsxDEV("thead", {
+        children: /* @__PURE__ */ jsxDEV("tr", {
+          children: headers.map((header, i) => /* @__PURE__ */ jsxDEV("th", {
+            style: { textAlign: getAlignment(i) },
+            children: header
+          }, i, false, undefined, this))
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("tbody", {
+        children: rows.map((row, rowIndex) => /* @__PURE__ */ jsxDEV("tr", {
+          children: row.map((cell, cellIndex) => /* @__PURE__ */ jsxDEV("td", {
+            style: { textAlign: getAlignment(cellIndex) },
+            children: cell
+          }, cellIndex, false, undefined, this))
+        }, rowIndex, false, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function ImageRenderer({ block }) {
+  return /* @__PURE__ */ jsxDEV("figure", {
+    children: [
+      /* @__PURE__ */ jsxDEV("img", {
+        src: block.props.url,
+        alt: block.props.alt ?? "",
+        title: block.props.title,
+        width: block.props.width,
+        height: block.props.height
+      }, undefined, false, undefined, this),
+      block.props.alt && /* @__PURE__ */ jsxDEV("figcaption", {
+        children: block.props.alt
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function DividerRenderer() {
+  return /* @__PURE__ */ jsxDEV("hr", {}, undefined, false, undefined, this);
+}
+function CalloutRenderer({ block }) {
+  const calloutType = block.props.type;
+  const styles = {
+    padding: "1rem",
+    borderRadius: "0.25rem",
+    borderLeft: "4px solid",
+    marginBottom: "1rem"
+  };
+  const colors = {
+    info: { borderColor: "#3b82f6", backgroundColor: "#eff6ff" },
+    warning: { borderColor: "#f59e0b", backgroundColor: "#fffbeb" },
+    tip: { borderColor: "#10b981", backgroundColor: "#ecfdf5" },
+    danger: { borderColor: "#ef4444", backgroundColor: "#fef2f2" },
+    note: { borderColor: "#6b7280", backgroundColor: "#f9fafb" }
+  };
+  const colorStyle = colors[calloutType] ?? colors.note;
+  return /* @__PURE__ */ jsxDEV("div", {
+    style: {
+      ...styles,
+      borderLeftColor: colorStyle.borderColor,
+      backgroundColor: colorStyle.backgroundColor
+    },
+    role: "alert",
+    children: [
+      /* @__PURE__ */ jsxDEV("strong", {
+        style: { textTransform: "capitalize", display: "block", marginBottom: "0.5rem" },
+        children: calloutType
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(InlineContent, {
+        spans: block.content
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+// src/hooks.ts
+import { useState, useCallback, useMemo } from "react";
+import {
+  createDocument,
+  insertBlock,
+  appendBlock,
+  removeBlock,
+  updateBlock,
+  moveBlock,
+  findBlock,
+  getBlockIndex,
+  clearBlocks,
+  setBlocks,
+  updateMeta,
+  markdownToBlocks,
+  blocksToMarkdown
+} from "@create-markdown/core";
+function useDocument(initialBlocks = [], options) {
+  const [document, setDocument] = useState(() => createDocument(initialBlocks, options));
+  const insert = useCallback((block, index) => {
+    setDocument((doc) => insertBlock(doc, block, index));
+  }, []);
+  const append = useCallback((block) => {
+    setDocument((doc) => appendBlock(doc, block));
+  }, []);
+  const remove = useCallback((blockId) => {
+    setDocument((doc) => removeBlock(doc, blockId));
+  }, []);
+  const update = useCallback((blockId, updates) => {
+    setDocument((doc) => updateBlock(doc, blockId, updates));
+  }, []);
+  const move = useCallback((blockId, newIndex) => {
+    setDocument((doc) => moveBlock(doc, blockId, newIndex));
+  }, []);
+  const find = useCallback((blockId) => findBlock(document, blockId), [document]);
+  const getIndex = useCallback((blockId) => getBlockIndex(document, blockId), [document]);
+  const clear = useCallback(() => {
+    setDocument((doc) => clearBlocks(doc));
+  }, []);
+  const set = useCallback((blocks) => {
+    setDocument((doc) => setBlocks(doc, blocks));
+  }, []);
+  const toMd = useCallback(() => blocksToMarkdown(document.blocks), [document]);
+  const fromMd = useCallback((markdown) => {
+    const blocks = markdownToBlocks(markdown);
+    setDocument((doc) => setBlocks(doc, blocks));
+  }, []);
+  const meta = useCallback((newMeta) => {
+    setDocument((doc) => updateMeta(doc, newMeta));
+  }, []);
+  return {
+    document,
+    blocks: document.blocks,
+    insertBlock: insert,
+    appendBlock: append,
+    removeBlock: remove,
+    updateBlock: update,
+    moveBlock: move,
+    findBlock: find,
+    getBlockIndex: getIndex,
+    clearBlocks: clear,
+    setBlocks: set,
+    setDocument,
+    toMarkdown: toMd,
+    fromMarkdown: fromMd,
+    updateMeta: meta
+  };
+}
+function useMarkdown(initialMarkdown = "") {
+  const [markdown, setMarkdownState] = useState(initialMarkdown);
+  const blocks = useMemo(() => markdownToBlocks(markdown), [markdown]);
+  const setMarkdown = useCallback((newMarkdown) => {
+    setMarkdownState(newMarkdown);
+  }, []);
+  const setBlocksFromBlocks = useCallback((newBlocks) => {
+    const newMarkdown = blocksToMarkdown(newBlocks);
+    setMarkdownState(newMarkdown);
+  }, []);
+  return {
+    markdown,
+    blocks,
+    setMarkdown,
+    setBlocks: setBlocksFromBlocks
+  };
+}
+function useBlockEditor(documentHook) {
+  const { document, blocks, removeBlock: removeBlock2, updateBlock: updateBlock2, moveBlock: moveBlock2, insertBlock: insertBlock2 } = documentHook;
+  const [selectedBlockId, setSelectedBlockId] = useState(null);
+  const selectedBlock = useMemo(() => selectedBlockId ? findBlock(document, selectedBlockId) : undefined, [document, selectedBlockId]);
+  const selectBlock = useCallback((blockId) => {
+    setSelectedBlockId(blockId);
+  }, []);
+  const selectNext = useCallback(() => {
+    if (!selectedBlockId) {
+      if (blocks.length > 0) {
+        setSelectedBlockId(blocks[0].id);
+      }
+      return;
+    }
+    const currentIndex = getBlockIndex(document, selectedBlockId);
+    if (currentIndex < blocks.length - 1) {
+      setSelectedBlockId(blocks[currentIndex + 1].id);
+    }
+  }, [document, blocks, selectedBlockId]);
+  const selectPrevious = useCallback(() => {
+    if (!selectedBlockId) {
+      if (blocks.length > 0) {
+        setSelectedBlockId(blocks[blocks.length - 1].id);
+      }
+      return;
+    }
+    const currentIndex = getBlockIndex(document, selectedBlockId);
+    if (currentIndex > 0) {
+      setSelectedBlockId(blocks[currentIndex - 1].id);
+    }
+  }, [document, blocks, selectedBlockId]);
+  const deleteSelected = useCallback(() => {
+    if (!selectedBlockId)
+      return;
+    const currentIndex = getBlockIndex(document, selectedBlockId);
+    removeBlock2(selectedBlockId);
+    if (blocks.length > 1) {
+      if (currentIndex < blocks.length - 1) {
+        setSelectedBlockId(blocks[currentIndex + 1].id);
+      } else if (currentIndex > 0) {
+        setSelectedBlockId(blocks[currentIndex - 1].id);
+      }
+    } else {
+      setSelectedBlockId(null);
+    }
+  }, [document, blocks, selectedBlockId, removeBlock2]);
+  const updateSelectedContent = useCallback((content) => {
+    if (!selectedBlockId)
+      return;
+    updateBlock2(selectedBlockId, { content });
+  }, [selectedBlockId, updateBlock2]);
+  const duplicateSelected = useCallback(() => {
+    if (!selectedBlockId || !selectedBlock)
+      return;
+    const currentIndex = getBlockIndex(document, selectedBlockId);
+    const clonedBlock = {
+      ...selectedBlock,
+      id: Math.random().toString(36).substring(2, 9)
+    };
+    insertBlock2(clonedBlock, currentIndex + 1);
+    setSelectedBlockId(clonedBlock.id);
+  }, [document, selectedBlockId, selectedBlock, insertBlock2]);
+  const moveSelectedUp = useCallback(() => {
+    if (!selectedBlockId)
+      return;
+    const currentIndex = getBlockIndex(document, selectedBlockId);
+    if (currentIndex > 0) {
+      moveBlock2(selectedBlockId, currentIndex - 1);
+    }
+  }, [document, selectedBlockId, moveBlock2]);
+  const moveSelectedDown = useCallback(() => {
+    if (!selectedBlockId)
+      return;
+    const currentIndex = getBlockIndex(document, selectedBlockId);
+    if (currentIndex < blocks.length - 1) {
+      moveBlock2(selectedBlockId, currentIndex + 1);
+    }
+  }, [document, blocks, selectedBlockId, moveBlock2]);
+  return {
+    selectedBlockId,
+    selectedBlock,
+    selectBlock,
+    selectNext,
+    selectPrevious,
+    deleteSelected,
+    updateSelectedContent,
+    duplicateSelected,
+    moveSelectedUp,
+    moveSelectedDown
+  };
+}
+
+// src/index.ts
+import {
+  paragraph,
+  heading,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  bulletList,
+  numberedList,
+  checkListItem,
+  checkList,
+  codeBlock,
+  blockquote,
+  divider,
+  image,
+  callout,
+  text,
+  bold,
+  italic,
+  code,
+  link
+} from "@create-markdown/core";
+var VERSION = "0.1.0";
+export {
+  useMarkdown,
+  useDocument,
+  useBlockEditor,
+  text,
+  paragraph,
+  numberedList,
+  link,
+  italic,
+  image,
+  heading,
+  h6,
+  h5,
+  h4,
+  h3,
+  h2,
+  h1,
+  divider,
+  codeBlock,
+  code,
+  checkListItem,
+  checkList,
+  callout,
+  bulletList,
+  bold,
+  blockquote,
+  VERSION,
+  InlineContent,
+  BlockRenderer,
+  BlockElement
+};

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@create-markdown/react",
+  "version": "0.1.0",
+  "description": "React components and hooks for @create-markdown",
+  "author": "Val Alexander <val@viewdue.ai>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/BunsDev/create-markdown",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/BunsDev/create-markdown/tree/main/packages/react",
+  "bugs": {
+    "url": "https://github.com/BunsDev/create-markdown/issues"
+  },
+  "keywords": [
+    "markdown",
+    "react",
+    "blocks",
+    "editor",
+    "typescript"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "bun run build:esm && bun run build:cjs && bun run build:types",
+    "build:esm": "bun build ./src/index.ts --outfile ./dist/index.js --format esm --external react --external @create-markdown/core",
+    "build:cjs": "bun build ./src/index.ts --outfile ./dist/index.cjs --format cjs --external react --external @create-markdown/core",
+    "build:types": "tsc --emitDeclarationOnly --declaration --outDir dist",
+    "dev": "bun run --watch src/index.ts",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@create-markdown/core": "workspace:*"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^18.2.0",
+    "jsdom": "^25.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.3.0",
+    "vitest": "^2.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}