md-editor-lite 0.1.0

package/dist/index.js

@@ -0,0 +1,410 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  EditorHeader: () => EditorHeader,
+  EditorTab: () => EditorTab,
+  EditorTextarea: () => EditorTextarea,
+  MarkdownEditor: () => MarkdownEditor,
+  Preview: () => Preview,
+  TOOLBAR_BUTTONS: () => TOOLBAR_BUTTONS,
+  Toolbar: () => Toolbar,
+  ToolbarDropdownHeading: () => ToolbarDropdownHeading,
+  ToolbarDropdownList: () => ToolbarDropdownList,
+  cx: () => cx,
+  headingOptions: () => headingOptions,
+  listOptions: () => listOptions,
+  markdownToHtml: () => markdownToHtml,
+  useMarkdownEditor: () => useMarkdownEditor
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/EditorHeader.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function EditorHeader({
+  mode,
+  setMode,
+  insertMarkdown
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: "editor-header", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditorTab, { mode, setMode }),
+    mode === "write" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toolbar, { insertMarkdown })
+  ] });
+}
+
+// src/components/EditorTab.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function EditorTab({ mode, setMode }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "editor-tab-container", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: `editor-tab ${mode === "write" ? "editor-tab--active" : ""}`,
+        onClick: () => setMode("write"),
+        children: "Write"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: `editor-tab ${mode === "preview" ? "editor-tab--active" : ""}`,
+        onClick: () => setMode("preview"),
+        children: "Preview"
+      }
+    )
+  ] });
+}
+
+// src/components/EditorTextarea.tsx
+var import_react = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var EditorTextarea = (0, import_react.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__ */ (0, import_jsx_runtime3.jsx)(
+    "textarea",
+    {
+      ref,
+      value,
+      onChange: (e) => setValue(e.target.value),
+      onDragOver: (e) => e.preventDefault(),
+      onDrop: handleDrop,
+      placeholder,
+      className: "editor-textarea"
+    }
+  );
+});
+
+// src/components/MarkdownEditor.tsx
+var import_react3 = require("react");
+
+// src/hooks/useMarkdownEditor.ts
+var import_react2 = require("react");
+function useMarkdownEditor({ value, setValue }) {
+  const textareaRef = (0, import_react2.useRef)(null);
+  const insertMarkdown = (0, import_react2.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
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function MarkdownEditor({
+  value,
+  onChange: setValue,
+  onImageUpload
+}) {
+  const { textareaRef, insertMarkdown } = useMarkdownEditor({
+    value,
+    setValue
+  });
+  const [mode, setMode] = (0, import_react3.useState)("write");
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "editor", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      EditorHeader,
+      {
+        mode,
+        setMode,
+        insertMarkdown
+      }
+    ),
+    mode === "write" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      EditorTextarea,
+      {
+        ref: textareaRef,
+        value,
+        setValue,
+        onImageUpload
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(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
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Preview({ value }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      className: "preview",
+      dangerouslySetInnerHTML: { __html: markdownToHtml(value) },
+      style: { listStyle: "decimal" }
+    }
+  );
+}
+
+// src/constants/toolbar.ts
+var import_lucide_react = require("lucide-react");
+var TOOLBAR_BUTTONS = [
+  { key: "bold", before: "**", after: "**", Icon: import_lucide_react.BoldIcon },
+  { key: "italic", before: "*", after: "*", Icon: import_lucide_react.ItalicIcon },
+  { key: "code", before: "`", after: "`", Icon: import_lucide_react.CodeIcon },
+  { key: "blockquote", before: "> ", after: "", Icon: import_lucide_react.QuoteIcon },
+  { key: "link", before: "[", after: "]()", Icon: import_lucide_react.LinkIcon }
+];
+var headingOptions = [
+  { value: "h1", Icon: import_lucide_react.Heading1Icon, before: "# " },
+  { value: "h2", Icon: import_lucide_react.Heading2Icon, before: "## " },
+  { value: "h3", Icon: import_lucide_react.Heading3Icon, before: "### " }
+];
+var listOptions = [
+  { value: "unordered list", Icon: import_lucide_react.ListIcon, before: "- " },
+  { value: "ordered list", Icon: import_lucide_react.ListOrderedIcon, before: "1. " }
+];
+
+// src/components/Toolbar.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Toolbar({ insertMarkdown }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("menu", { className: "toolbar-menu", children: [
+    TOOLBAR_BUTTONS.map(({ key, before, after, Icon }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "button",
+      {
+        className: "toolbar-button",
+        onClick: () => insertMarkdown(before, after),
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { size: 18 })
+      },
+      key
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ToolbarDropdownHeading, { insertMarkdown }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ToolbarDropdownList, { insertMarkdown })
+  ] });
+}
+
+// src/components/IconDropdown.tsx
+var import_react4 = __toESM(require("react"));
+
+// src/utils/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/components/IconDropdown.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function IconDropdown({
+  className,
+  disabled,
+  options,
+  selected,
+  triggerIcon,
+  onChange
+}) {
+  const [isOpen, setIsOpen] = import_react4.default.useState(false);
+  const dropdownRef = import_react4.default.useRef(null);
+  const toggle = () => {
+    if (!disabled) setIsOpen((prev) => !prev);
+  };
+  import_react4.default.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__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: dropdownRef, className: cx("md-dropdown", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: toggle,
+        disabled,
+        className: cx(
+          "md-dropdown__trigger",
+          disabled && "md-dropdown__trigger--disabled"
+        ),
+        children: triggerIcon
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { className: "md-dropdown__menu", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "li",
+      {
+        className: cx(
+          "md-dropdown__item",
+          selected && "md-dropdown__item--selected"
+        ),
+        onClick: () => {
+          onChange(option.value);
+          setIsOpen(false);
+        },
+        children: [
+          option.Icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "md-dropdown__icon", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(option.Icon, {}) }),
+          option.label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "md-dropdown__label", children: option.label })
+        ]
+      },
+      option.value
+    )) })
+  ] });
+}
+
+// src/components/ToolbarDropdown.tsx
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function ToolbarDropdownHeading({
+  insertMarkdown
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    IconDropdown,
+    {
+      options: headingOptions,
+      triggerIcon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Heading1Icon, {}),
+      onChange: (value) => {
+        const option = headingOptions.find((o) => o.value === value);
+        if (option) insertMarkdown(option.before);
+      }
+    }
+  );
+}
+function ToolbarDropdownList({ insertMarkdown }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    IconDropdown,
+    {
+      options: listOptions,
+      triggerIcon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.ListIcon, {}),
+      onChange: (value) => {
+        const option = listOptions.find((o) => o.value === value);
+        if (option) insertMarkdown(option.before);
+      }
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EditorHeader,
+  EditorTab,
+  EditorTextarea,
+  MarkdownEditor,
+  Preview,
+  TOOLBAR_BUTTONS,
+  Toolbar,
+  ToolbarDropdownHeading,
+  ToolbarDropdownList,
+  cx,
+  headingOptions,
+  listOptions,
+  markdownToHtml,
+  useMarkdownEditor
+});