@create-markdown/react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,520 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
+// src/index.ts
+var exports_src = {};
+__export(exports_src, {
+  useMarkdown: () => useMarkdown,
+  useDocument: () => useDocument,
+  useBlockEditor: () => useBlockEditor,
+  text: () => import_core2.text,
+  paragraph: () => import_core2.paragraph,
+  numberedList: () => import_core2.numberedList,
+  link: () => import_core2.link,
+  italic: () => import_core2.italic,
+  image: () => import_core2.image,
+  heading: () => import_core2.heading,
+  h6: () => import_core2.h6,
+  h5: () => import_core2.h5,
+  h4: () => import_core2.h4,
+  h3: () => import_core2.h3,
+  h2: () => import_core2.h2,
+  h1: () => import_core2.h1,
+  divider: () => import_core2.divider,
+  codeBlock: () => import_core2.codeBlock,
+  code: () => import_core2.code,
+  checkListItem: () => import_core2.checkListItem,
+  checkList: () => import_core2.checkList,
+  callout: () => import_core2.callout,
+  bulletList: () => import_core2.bulletList,
+  bold: () => import_core2.bold,
+  blockquote: () => import_core2.blockquote,
+  VERSION: () => VERSION,
+  InlineContent: () => InlineContent,
+  BlockRenderer: () => BlockRenderer,
+  BlockElement: () => BlockElement
+});
+module.exports = __toCommonJS(exports_src);
+
+// src/block-renderer.tsx
+var jsx_dev_runtime = require("react/jsx-dev-runtime");
+function BlockRenderer({
+  blocks,
+  className,
+  customRenderers
+}) {
+  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+    className,
+    children: blocks.map((block) => /* @__PURE__ */ jsx_dev_runtime.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__ */ jsx_dev_runtime.jsxDEV(CustomRenderer, {
+      block
+    }, undefined, false, undefined, this);
+  }
+  switch (block.type) {
+    case "paragraph":
+      return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(ParagraphRenderer, {
+        block
+      }, undefined, false, undefined, this);
+    case "heading":
+      return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(HeadingRenderer, {
+        block
+      }, undefined, false, undefined, this);
+    case "bulletList":
+      return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(BulletListRenderer, {
+        block,
+        customRenderers
+      }, undefined, false, undefined, this);
+    case "numberedList":
+      return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(NumberedListRenderer, {
+        block,
+        customRenderers
+      }, undefined, false, undefined, this);
+    case "checkList":
+      return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(CheckListRenderer, {
+        block
+      }, undefined, false, undefined, this);
+    case "codeBlock":
+      return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(CodeBlockRenderer, {
+        block
+      }, undefined, false, undefined, this);
+    case "blockquote":
+      return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(BlockquoteRenderer, {
+        block
+      }, undefined, false, undefined, this);
+    case "table":
+      return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(TableRenderer, {
+        block
+      }, undefined, false, undefined, this);
+    case "image":
+      return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(ImageRenderer, {
+        block
+      }, undefined, false, undefined, this);
+    case "divider":
+      return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(DividerRenderer, {}, undefined, false, undefined, this);
+    case "callout":
+      return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(CalloutRenderer, {
+        block
+      }, undefined, false, undefined, this);
+    default:
+      return null;
+  }
+}
+function InlineContent({ spans }) {
+  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(jsx_dev_runtime.Fragment, {
+    children: spans.map((span, index) => /* @__PURE__ */ jsx_dev_runtime.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__ */ jsx_dev_runtime.jsxDEV("code", {
+      children: content
+    }, undefined, false, undefined, this);
+  }
+  if (styles.highlight) {
+    content = /* @__PURE__ */ jsx_dev_runtime.jsxDEV("mark", {
+      children: content
+    }, undefined, false, undefined, this);
+  }
+  if (styles.strikethrough) {
+    content = /* @__PURE__ */ jsx_dev_runtime.jsxDEV("del", {
+      children: content
+    }, undefined, false, undefined, this);
+  }
+  if (styles.underline) {
+    content = /* @__PURE__ */ jsx_dev_runtime.jsxDEV("u", {
+      children: content
+    }, undefined, false, undefined, this);
+  }
+  if (styles.italic) {
+    content = /* @__PURE__ */ jsx_dev_runtime.jsxDEV("em", {
+      children: content
+    }, undefined, false, undefined, this);
+  }
+  if (styles.bold) {
+    content = /* @__PURE__ */ jsx_dev_runtime.jsxDEV("strong", {
+      children: content
+    }, undefined, false, undefined, this);
+  }
+  if (styles.link) {
+    content = /* @__PURE__ */ jsx_dev_runtime.jsxDEV("a", {
+      href: styles.link.url,
+      title: styles.link.title,
+      children: content
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(jsx_dev_runtime.Fragment, {
+    children: content
+  }, undefined, false, undefined, this);
+}
+function ParagraphRenderer({ block }) {
+  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("p", {
+    children: /* @__PURE__ */ jsx_dev_runtime.jsxDEV(InlineContent, {
+      spans: block.content
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function HeadingRenderer({ block }) {
+  const Tag = `h${block.props.level}`;
+  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Tag, {
+    children: /* @__PURE__ */ jsx_dev_runtime.jsxDEV(InlineContent, {
+      spans: block.content
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function BulletListRenderer({
+  block,
+  customRenderers
+}) {
+  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("ul", {
+    children: block.children.map((child) => /* @__PURE__ */ jsx_dev_runtime.jsxDEV("li", {
+      children: [
+        /* @__PURE__ */ jsx_dev_runtime.jsxDEV(InlineContent, {
+          spans: child.content
+        }, undefined, false, undefined, this),
+        child.children.length > 0 && /* @__PURE__ */ jsx_dev_runtime.jsxDEV(BlockElement, {
+          block: child,
+          customRenderers
+        }, undefined, false, undefined, this)
+      ]
+    }, child.id, true, undefined, this))
+  }, undefined, false, undefined, this);
+}
+function NumberedListRenderer({
+  block,
+  customRenderers
+}) {
+  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("ol", {
+    children: block.children.map((child) => /* @__PURE__ */ jsx_dev_runtime.jsxDEV("li", {
+      children: [
+        /* @__PURE__ */ jsx_dev_runtime.jsxDEV(InlineContent, {
+          spans: child.content
+        }, undefined, false, undefined, this),
+        child.children.length > 0 && /* @__PURE__ */ jsx_dev_runtime.jsxDEV(BlockElement, {
+          block: child,
+          customRenderers
+        }, undefined, false, undefined, this)
+      ]
+    }, child.id, true, undefined, this))
+  }, undefined, false, undefined, this);
+}
+function CheckListRenderer({ block }) {
+  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+    style: { display: "flex", alignItems: "flex-start", gap: "0.5rem" },
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime.jsxDEV("input", {
+        type: "checkbox",
+        checked: block.props.checked,
+        readOnly: true,
+        style: { marginTop: "0.25rem" }
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime.jsxDEV("span", {
+        style: { textDecoration: block.props.checked ? "line-through" : "none" },
+        children: /* @__PURE__ */ jsx_dev_runtime.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__ */ jsx_dev_runtime.jsxDEV("pre", {
+    children: /* @__PURE__ */ jsx_dev_runtime.jsxDEV("code", {
+      className: language ? `language-${language}` : undefined,
+      children: code
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function BlockquoteRenderer({ block }) {
+  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("blockquote", {
+    children: /* @__PURE__ */ jsx_dev_runtime.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__ */ jsx_dev_runtime.jsxDEV("table", {
+    children: [
+      headers.length > 0 && /* @__PURE__ */ jsx_dev_runtime.jsxDEV("thead", {
+        children: /* @__PURE__ */ jsx_dev_runtime.jsxDEV("tr", {
+          children: headers.map((header, i) => /* @__PURE__ */ jsx_dev_runtime.jsxDEV("th", {
+            style: { textAlign: getAlignment(i) },
+            children: header
+          }, i, false, undefined, this))
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime.jsxDEV("tbody", {
+        children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx_dev_runtime.jsxDEV("tr", {
+          children: row.map((cell, cellIndex) => /* @__PURE__ */ jsx_dev_runtime.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__ */ jsx_dev_runtime.jsxDEV("figure", {
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime.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__ */ jsx_dev_runtime.jsxDEV("figcaption", {
+        children: block.props.alt
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function DividerRenderer() {
+  return /* @__PURE__ */ jsx_dev_runtime.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__ */ jsx_dev_runtime.jsxDEV("div", {
+    style: {
+      ...styles,
+      borderLeftColor: colorStyle.borderColor,
+      backgroundColor: colorStyle.backgroundColor
+    },
+    role: "alert",
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime.jsxDEV("strong", {
+        style: { textTransform: "capitalize", display: "block", marginBottom: "0.5rem" },
+        children: calloutType
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime.jsxDEV(InlineContent, {
+        spans: block.content
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+// src/hooks.ts
+var import_react = require("react");
+var import_core = require("@create-markdown/core");
+function useDocument(initialBlocks = [], options) {
+  const [document, setDocument] = import_react.useState(() => import_core.createDocument(initialBlocks, options));
+  const insert = import_react.useCallback((block, index) => {
+    setDocument((doc) => import_core.insertBlock(doc, block, index));
+  }, []);
+  const append = import_react.useCallback((block) => {
+    setDocument((doc) => import_core.appendBlock(doc, block));
+  }, []);
+  const remove = import_react.useCallback((blockId) => {
+    setDocument((doc) => import_core.removeBlock(doc, blockId));
+  }, []);
+  const update = import_react.useCallback((blockId, updates) => {
+    setDocument((doc) => import_core.updateBlock(doc, blockId, updates));
+  }, []);
+  const move = import_react.useCallback((blockId, newIndex) => {
+    setDocument((doc) => import_core.moveBlock(doc, blockId, newIndex));
+  }, []);
+  const find = import_react.useCallback((blockId) => import_core.findBlock(document, blockId), [document]);
+  const getIndex = import_react.useCallback((blockId) => import_core.getBlockIndex(document, blockId), [document]);
+  const clear = import_react.useCallback(() => {
+    setDocument((doc) => import_core.clearBlocks(doc));
+  }, []);
+  const set = import_react.useCallback((blocks) => {
+    setDocument((doc) => import_core.setBlocks(doc, blocks));
+  }, []);
+  const toMd = import_react.useCallback(() => import_core.blocksToMarkdown(document.blocks), [document]);
+  const fromMd = import_react.useCallback((markdown) => {
+    const blocks = import_core.markdownToBlocks(markdown);
+    setDocument((doc) => import_core.setBlocks(doc, blocks));
+  }, []);
+  const meta = import_react.useCallback((newMeta) => {
+    setDocument((doc) => import_core.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] = import_react.useState(initialMarkdown);
+  const blocks = import_react.useMemo(() => import_core.markdownToBlocks(markdown), [markdown]);
+  const setMarkdown = import_react.useCallback((newMarkdown) => {
+    setMarkdownState(newMarkdown);
+  }, []);
+  const setBlocksFromBlocks = import_react.useCallback((newBlocks) => {
+    const newMarkdown = import_core.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] = import_react.useState(null);
+  const selectedBlock = import_react.useMemo(() => selectedBlockId ? import_core.findBlock(document, selectedBlockId) : undefined, [document, selectedBlockId]);
+  const selectBlock = import_react.useCallback((blockId) => {
+    setSelectedBlockId(blockId);
+  }, []);
+  const selectNext = import_react.useCallback(() => {
+    if (!selectedBlockId) {
+      if (blocks.length > 0) {
+        setSelectedBlockId(blocks[0].id);
+      }
+      return;
+    }
+    const currentIndex = import_core.getBlockIndex(document, selectedBlockId);
+    if (currentIndex < blocks.length - 1) {
+      setSelectedBlockId(blocks[currentIndex + 1].id);
+    }
+  }, [document, blocks, selectedBlockId]);
+  const selectPrevious = import_react.useCallback(() => {
+    if (!selectedBlockId) {
+      if (blocks.length > 0) {
+        setSelectedBlockId(blocks[blocks.length - 1].id);
+      }
+      return;
+    }
+    const currentIndex = import_core.getBlockIndex(document, selectedBlockId);
+    if (currentIndex > 0) {
+      setSelectedBlockId(blocks[currentIndex - 1].id);
+    }
+  }, [document, blocks, selectedBlockId]);
+  const deleteSelected = import_react.useCallback(() => {
+    if (!selectedBlockId)
+      return;
+    const currentIndex = import_core.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 = import_react.useCallback((content) => {
+    if (!selectedBlockId)
+      return;
+    updateBlock2(selectedBlockId, { content });
+  }, [selectedBlockId, updateBlock2]);
+  const duplicateSelected = import_react.useCallback(() => {
+    if (!selectedBlockId || !selectedBlock)
+      return;
+    const currentIndex = import_core.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 = import_react.useCallback(() => {
+    if (!selectedBlockId)
+      return;
+    const currentIndex = import_core.getBlockIndex(document, selectedBlockId);
+    if (currentIndex > 0) {
+      moveBlock2(selectedBlockId, currentIndex - 1);
+    }
+  }, [document, selectedBlockId, moveBlock2]);
+  const moveSelectedDown = import_react.useCallback(() => {
+    if (!selectedBlockId)
+      return;
+    const currentIndex = import_core.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
+var import_core2 = require("@create-markdown/core");
+var VERSION = "0.1.0";

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @create-markdown/react
+ * React components and hooks for @create-markdown
+ */
+export { BlockRenderer, BlockElement, InlineContent, } from './block-renderer';
+export type { BlockRendererProps, BlockRenderers, SingleBlockProps, } from './block-renderer';
+export { useDocument, useMarkdown, useBlockEditor, } from './hooks';
+export type { UseDocumentReturn, UseMarkdownReturn, UseBlockEditorReturn, } from './hooks';
+export type { Block, BlockType, Document, TextSpan, InlineStyle, } from '@create-markdown/core';
+export { 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';
+/**
+ * Package version
+ */
+export declare const VERSION = "0.1.0";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EACL,aAAa,EACb,YAAY,EACZ,aAAa,GACd,MAAM,kBAAkB,CAAC;AAE1B,YAAY,EACV,kBAAkB,EAClB,cAAc,EACd,gBAAgB,GACjB,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EACL,WAAW,EACX,WAAW,EACX,cAAc,GACf,MAAM,SAAS,CAAC;AAEjB,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,GACrB,MAAM,SAAS,CAAC;AAGjB,YAAY,EACV,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,WAAW,GACZ,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EACL,SAAS,EACT,OAAO,EACP,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,UAAU,EACV,YAAY,EACZ,aAAa,EACb,SAAS,EACT,SAAS,EACT,UAAU,EACV,OAAO,EACP,KAAK,EACL,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,IAAI,GACL,MAAM,uBAAuB,CAAC;AAM/B;;GAEG;AACH,eAAO,MAAM,OAAO,UAAU,CAAC"}