md-editor-lite 0.1.0

package/dist/index.mjs

@@ -0,0 +1,371 @@
+// src/components/EditorHeader.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function EditorHeader({
+  mode,
+  setMode,
+  insertMarkdown
+}) {
+  return /* @__PURE__ */ jsxs("header", { className: "editor-header", children: [
+    /* @__PURE__ */ jsx(EditorTab, { mode, setMode }),
+    mode === "write" && /* @__PURE__ */ jsx(Toolbar, { insertMarkdown })
+  ] });
+}
+
+// src/components/EditorTab.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function EditorTab({ mode, setMode }) {
+  return /* @__PURE__ */ jsxs2("div", { className: "editor-tab-container", children: [
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: `editor-tab ${mode === "write" ? "editor-tab--active" : ""}`,
+        onClick: () => setMode("write"),
+        children: "Write"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: `editor-tab ${mode === "preview" ? "editor-tab--active" : ""}`,
+        onClick: () => setMode("preview"),
+        children: "Preview"
+      }
+    )
+  ] });
+}
+
+// src/components/EditorTextarea.tsx
+import { forwardRef } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var EditorTextarea = forwardRef(({ value, placeholder, setValue, onImageUpload }, ref) => {
+  const handleDrop = async (e) => {
+    e.preventDefault();
+    if (!onImageUpload) return;
+    const files = Array.from(e.dataTransfer.files).filter(
+      (file) => file.type.startsWith("image/")
+    );
+    for (const file of files) {
+      const url = await onImageUpload(file);
+      setValue(value + `
+![${file.name}](${url})
+`);
+    }
+  };
+  return /* @__PURE__ */ jsx3(
+    "textarea",
+    {
+      ref,
+      value,
+      onChange: (e) => setValue(e.target.value),
+      onDragOver: (e) => e.preventDefault(),
+      onDrop: handleDrop,
+      placeholder,
+      className: "editor-textarea"
+    }
+  );
+});
+
+// src/components/MarkdownEditor.tsx
+import { useState } from "react";
+
+// src/hooks/useMarkdownEditor.ts
+import { useCallback, useRef } from "react";
+function useMarkdownEditor({ value, setValue }) {
+  const textareaRef = useRef(null);
+  const insertMarkdown = useCallback(
+    (before, after = "") => {
+      const textarea = textareaRef.current;
+      if (!textarea) return;
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+      const selected = value.slice(start, end);
+      const replaced = before + (selected || "") + after;
+      setValue(value.slice(0, start) + replaced + value.slice(end));
+      requestAnimationFrame(() => {
+        if (!textareaRef.current) return;
+        const next = start + replaced.length;
+        textareaRef.current.focus();
+        textareaRef.current.selectionStart = next;
+        textareaRef.current.selectionEnd = next;
+      });
+    },
+    [value, setValue]
+  );
+  return {
+    textareaRef,
+    insertMarkdown
+  };
+}
+
+// src/components/MarkdownEditor.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function MarkdownEditor({
+  value,
+  onChange: setValue,
+  onImageUpload
+}) {
+  const { textareaRef, insertMarkdown } = useMarkdownEditor({
+    value,
+    setValue
+  });
+  const [mode, setMode] = useState("write");
+  return /* @__PURE__ */ jsxs3("div", { className: "editor", children: [
+    /* @__PURE__ */ jsx4(
+      EditorHeader,
+      {
+        mode,
+        setMode,
+        insertMarkdown
+      }
+    ),
+    mode === "write" ? /* @__PURE__ */ jsx4(
+      EditorTextarea,
+      {
+        ref: textareaRef,
+        value,
+        setValue,
+        onImageUpload
+      }
+    ) : /* @__PURE__ */ jsx4(Preview, { value })
+  ] });
+}
+
+// src/utils/markdown.ts
+function parseBold(text) {
+  return text.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+}
+function parseItalic(text) {
+  return text.replace(/\*(.+?)\*/g, "<em>$1</em>");
+}
+function parseInlineCode(text) {
+  return text.replace(/`(.+?)`/g, "<code>$1</code>");
+}
+function parseBlockquote(text) {
+  return text.replace(/^> (.+)$/gm, "<blockquote>$1</blockquote>");
+}
+function parseImages(text) {
+  return text.replace(
+    /!\[(.*?)\]\(([^)]*?)\)/g,
+    (_, alt, url) => `<img src="${url}" alt="${alt || ""}" />`
+  );
+}
+function parseLinks(text) {
+  return text.replace(/\[(.+?)\]\((.+?)\)/g, '<a href="$2">$1</a>');
+}
+function parseHeadings(text) {
+  return text.replace(/^# (.+)$/gm, "<h1>$1</h1>").replace(/^## (.+)$/gm, "<h2>$1</h2>").replace(/^### (.+)$/gm, "<h3>$1</h3>");
+}
+function parseUnorderedList(text) {
+  return text.replace(
+    /(^|\r?\n)((?:\s*- .+(?:\r?\n|$))+)/g,
+    (_, prefix, block) => {
+      const items = block.trim().split(/\r?\n/).map((line) => line.replace(/^\s*- /, "").trim()).filter(Boolean).map((item) => `<li>${item}</li>`).join("");
+      return `${prefix}<ul>${items}</ul>`;
+    }
+  );
+}
+function parseOrderedList(text) {
+  return text.replace(
+    /(^|\r?\n)((?:\d+\. .+(?:\r?\n|$))+)/g,
+    (_, prefix, block) => {
+      const items = block.trim().split(/\r?\n/).map((line) => line.replace(/^\d+\. /, "").trim()).filter(Boolean).map((item) => `<li>${item}</li>`).join("");
+      return `${prefix}<ol>${items}</ol>`;
+    }
+  );
+}
+function parseLineBreaks(text) {
+  return text.replace(
+    /(?<!<\/ul>|<\/ol>|<\/li>|<\/h1>|<\/h2>|<\/h3>)\n/g,
+    "<br/>"
+  );
+}
+function markdownToHtml(markdown) {
+  let html = markdown;
+  html = parseBold(html);
+  html = parseItalic(html);
+  html = parseInlineCode(html);
+  html = parseBlockquote(html);
+  html = parseImages(html);
+  html = parseLinks(html);
+  html = parseHeadings(html);
+  html = parseUnorderedList(html);
+  html = parseOrderedList(html);
+  html = parseLineBreaks(html);
+  return html;
+}
+
+// src/components/Preview.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Preview({ value }) {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: "preview",
+      dangerouslySetInnerHTML: { __html: markdownToHtml(value) },
+      style: { listStyle: "decimal" }
+    }
+  );
+}
+
+// src/constants/toolbar.ts
+import {
+  BoldIcon,
+  ItalicIcon,
+  CodeIcon,
+  LinkIcon,
+  Heading1Icon,
+  Heading2Icon,
+  Heading3Icon,
+  ListOrderedIcon,
+  ListIcon,
+  QuoteIcon
+} from "lucide-react";
+var TOOLBAR_BUTTONS = [
+  { key: "bold", before: "**", after: "**", Icon: BoldIcon },
+  { key: "italic", before: "*", after: "*", Icon: ItalicIcon },
+  { key: "code", before: "`", after: "`", Icon: CodeIcon },
+  { key: "blockquote", before: "> ", after: "", Icon: QuoteIcon },
+  { key: "link", before: "[", after: "]()", Icon: LinkIcon }
+];
+var headingOptions = [
+  { value: "h1", Icon: Heading1Icon, before: "# " },
+  { value: "h2", Icon: Heading2Icon, before: "## " },
+  { value: "h3", Icon: Heading3Icon, before: "### " }
+];
+var listOptions = [
+  { value: "unordered list", Icon: ListIcon, before: "- " },
+  { value: "ordered list", Icon: ListOrderedIcon, before: "1. " }
+];
+
+// src/components/Toolbar.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function Toolbar({ insertMarkdown }) {
+  return /* @__PURE__ */ jsxs4("menu", { className: "toolbar-menu", children: [
+    TOOLBAR_BUTTONS.map(({ key, before, after, Icon }) => /* @__PURE__ */ jsx6(
+      "button",
+      {
+        className: "toolbar-button",
+        onClick: () => insertMarkdown(before, after),
+        children: /* @__PURE__ */ jsx6(Icon, { size: 18 })
+      },
+      key
+    )),
+    /* @__PURE__ */ jsx6(ToolbarDropdownHeading, { insertMarkdown }),
+    /* @__PURE__ */ jsx6(ToolbarDropdownList, { insertMarkdown })
+  ] });
+}
+
+// src/components/IconDropdown.tsx
+import React from "react";
+
+// src/utils/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/components/IconDropdown.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function IconDropdown({
+  className,
+  disabled,
+  options,
+  selected,
+  triggerIcon,
+  onChange
+}) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const dropdownRef = React.useRef(null);
+  const toggle = () => {
+    if (!disabled) setIsOpen((prev) => !prev);
+  };
+  React.useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  return /* @__PURE__ */ jsxs5("div", { ref: dropdownRef, className: cx("md-dropdown", className), children: [
+    /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        onClick: toggle,
+        disabled,
+        className: cx(
+          "md-dropdown__trigger",
+          disabled && "md-dropdown__trigger--disabled"
+        ),
+        children: triggerIcon
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx7("ul", { className: "md-dropdown__menu", children: options.map((option) => /* @__PURE__ */ jsxs5(
+      "li",
+      {
+        className: cx(
+          "md-dropdown__item",
+          selected && "md-dropdown__item--selected"
+        ),
+        onClick: () => {
+          onChange(option.value);
+          setIsOpen(false);
+        },
+        children: [
+          option.Icon && /* @__PURE__ */ jsx7("span", { className: "md-dropdown__icon", children: /* @__PURE__ */ jsx7(option.Icon, {}) }),
+          option.label && /* @__PURE__ */ jsx7("span", { className: "md-dropdown__label", children: option.label })
+        ]
+      },
+      option.value
+    )) })
+  ] });
+}
+
+// src/components/ToolbarDropdown.tsx
+import { Heading1Icon as Heading1Icon2, ListIcon as ListIcon2 } from "lucide-react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function ToolbarDropdownHeading({
+  insertMarkdown
+}) {
+  return /* @__PURE__ */ jsx8(
+    IconDropdown,
+    {
+      options: headingOptions,
+      triggerIcon: /* @__PURE__ */ jsx8(Heading1Icon2, {}),
+      onChange: (value) => {
+        const option = headingOptions.find((o) => o.value === value);
+        if (option) insertMarkdown(option.before);
+      }
+    }
+  );
+}
+function ToolbarDropdownList({ insertMarkdown }) {
+  return /* @__PURE__ */ jsx8(
+    IconDropdown,
+    {
+      options: listOptions,
+      triggerIcon: /* @__PURE__ */ jsx8(ListIcon2, {}),
+      onChange: (value) => {
+        const option = listOptions.find((o) => o.value === value);
+        if (option) insertMarkdown(option.before);
+      }
+    }
+  );
+}
+export {
+  EditorHeader,
+  EditorTab,
+  EditorTextarea,
+  MarkdownEditor,
+  Preview,
+  TOOLBAR_BUTTONS,
+  Toolbar,
+  ToolbarDropdownHeading,
+  ToolbarDropdownList,
+  cx,
+  headingOptions,
+  listOptions,
+  markdownToHtml,
+  useMarkdownEditor
+};

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "md-editor-lite",
+  "description": "A lightweight, dependency-minimal React markdown editor",
+  "keywords": [
+    "markdown",
+    "editor",
+    "react",
+    "lightweight",
+    "textarea"
+  ],
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean --tsconfig tsconfig.build.json"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "lucide-react": "^0.562.0"
+  }
+}

package/playground/App.tsx

@@ -0,0 +1,19 @@
+import { useState } from "react";
+import { MarkdownEditor } from "../src";
+
+export default function App() {
+  const [value, setValue] = useState("");
+
+  return (
+    <div
+      style={{
+        padding: 40,
+        height: "100vh",
+        width: "100vw",
+        boxSizing: "border-box",
+      }}
+    >
+      <MarkdownEditor value={value} onChange={setValue} />
+    </div>
+  );
+}

package/playground/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>md-editor-lite playground</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/main.tsx"></script>
+  </body>
+</html>

package/playground/main.tsx

@@ -0,0 +1,9 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);