md-editor-lite 0.1.4 → 0.1.6

package/dist/index.js

@@ -1,4 +1,3 @@
-"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -28,8 +27,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var index_exports = {};
-__export(index_exports, {
+var src_exports = {};
+__export(src_exports, {
   EditorHeader: () => EditorHeader,
   EditorTab: () => EditorTab,
   EditorTextarea: () => EditorTextarea,
@@ -45,47 +44,41 @@ __export(index_exports, {
   markdownToHtml: () => markdownToHtml,
   useMarkdownEditor: () => useMarkdownEditor
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(src_exports);
 
 // src/components/EditorHeader.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("./editor-AUU3A4EA.css");
 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 })
-  ] });
+  return /* @__PURE__ */ React.createElement("header", { className: "editor-header" }, /* @__PURE__ */ React.createElement(EditorTab, { mode, setMode }), mode === "write" && /* @__PURE__ */ React.createElement(Toolbar, { insertMarkdown }));
 }
 
 // src/components/EditorTab.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_editor2 = require("./editor-AUU3A4EA.css");
 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"
-      }
-    )
-  ] });
+  return /* @__PURE__ */ React.createElement("div", { className: "editor-tab-container" }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: `editor-tab ${mode === "write" ? "editor-tab--active" : ""}`,
+      onClick: () => setMode("write")
+    },
+    "Write"
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: `editor-tab ${mode === "preview" ? "editor-tab--active" : ""}`,
+      onClick: () => setMode("preview")
+    },
+    "Preview"
+  ));
 }
 
 // src/components/EditorTextarea.tsx
 var import_react = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_editor3 = require("./editor-AUU3A4EA.css");
 var EditorTextarea = (0, import_react.forwardRef)(({ value, placeholder, setValue, onImageUpload }, ref) => {
   const handleDrop = async (e) => {
     e.preventDefault();
@@ -100,7 +93,7 @@ var EditorTextarea = (0, import_react.forwardRef)(({ value, placeholder, setValu
 `);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ React.createElement(
     "textarea",
     {
       ref,
@@ -147,7 +140,7 @@ function useMarkdownEditor({ value, setValue }) {
 }
 
 // src/components/MarkdownEditor.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_editor4 = require("./editor-AUU3A4EA.css");
 function MarkdownEditor({
   value,
   onChange: setValue,
@@ -158,25 +151,22 @@ function MarkdownEditor({
     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 })
-  ] });
+  return /* @__PURE__ */ React.createElement("div", { className: "editor" }, /* @__PURE__ */ React.createElement(
+    EditorHeader,
+    {
+      mode,
+      setMode,
+      insertMarkdown
+    }
+  ), mode === "write" ? /* @__PURE__ */ React.createElement(
+    EditorTextarea,
+    {
+      ref: textareaRef,
+      value,
+      setValue,
+      onImageUpload
+    }
+  ) : /* @__PURE__ */ React.createElement(Preview, { value }));
 }
 
 // src/utils/markdown.ts
@@ -184,7 +174,7 @@ function parseBold(text) {
   return text.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
 }
 function parseItalic(text) {
-  return text.replace(/\*(.+?)\*/g, "<em>$1</em>");
+  return text.replace(/(?<!\*)\*(?!\*)(.+?)(?<!\*)\*(?!\*)/g, "<em>$1</em>");
 }
 function parseInlineCode(text) {
   return text.replace(/`(.+?)`/g, "<code>$1</code>");
@@ -192,6 +182,15 @@ function parseInlineCode(text) {
 function parseBlockquote(text) {
   return text.replace(/^> (.+)$/gm, "<blockquote>$1</blockquote>");
 }
+function parseStrikethrough(text) {
+  return text.replace(/~~(.+?)~~/g, "<del>$1</del>");
+}
+function parseUnderline(text) {
+  return text.replace(/__(.+?)__/g, "<u>$1</u>");
+}
+function parseHr(text) {
+  return text.replace(/^---$/gm, "<hr />");
+}
 function parseImages(text) {
   return text.replace(
     /!\[(.*?)\]\(([^)]*?)\)/g,
@@ -230,23 +229,26 @@ function parseLineBreaks(text) {
 }
 function markdownToHtml(markdown) {
   let html = markdown;
+  html = parseHr(html);
+  html = parseHeadings(html);
+  html = parseBlockquote(html);
+  html = parseUnorderedList(html);
+  html = parseOrderedList(html);
   html = parseBold(html);
+  html = parseUnderline(html);
+  html = parseStrikethrough(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");
+var import_preview = require("./preview-FACEHC73.css");
 function Preview({ value }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: "preview",
@@ -263,6 +265,9 @@ var TOOLBAR_BUTTONS = [
   { 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: "strikethrough", before: "~~", after: "~~", Icon: import_lucide_react.StrikethroughIcon },
+  { key: "underline", before: "__", after: "__", Icon: import_lucide_react.UnderlineIcon },
+  { key: "horizontal rule", before: "\n---\n", after: "", Icon: import_lucide_react.ListEndIcon },
   { key: "link", before: "[", after: "]()", Icon: import_lucide_react.LinkIcon }
 ];
 var headingOptions = [
@@ -276,21 +281,17 @@ var listOptions = [
 ];
 
 // src/components/Toolbar.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_toolbar2 = require("./toolbar-YQKH6EMS.css");
 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 })
-  ] });
+  return /* @__PURE__ */ React.createElement("menu", { className: "toolbar-menu" }, TOOLBAR_BUTTONS.map(({ key, before, after, Icon }) => /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      key,
+      className: "toolbar-button",
+      onClick: () => insertMarkdown(before, after)
+    },
+    /* @__PURE__ */ React.createElement(Icon, { size: 18 })
+  )), /* @__PURE__ */ React.createElement(ToolbarDropdownHeading, { insertMarkdown }), /* @__PURE__ */ React.createElement(ToolbarDropdownList, { insertMarkdown }));
 }
 
 // src/components/IconDropdown.tsx
@@ -302,7 +303,7 @@ function cx(...classes) {
 }
 
 // src/components/IconDropdown.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_dropdown = require("./dropdown-JYZ5KVXG.css");
 function IconDropdown({
   className,
   disabled,
@@ -325,52 +326,46 @@ function IconDropdown({
     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
+  return /* @__PURE__ */ import_react4.default.createElement("div", { ref: dropdownRef, className: cx("md-dropdown", className) }, /* @__PURE__ */ import_react4.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: toggle,
+      disabled,
+      className: cx(
+        "md-dropdown__trigger",
+        disabled && "md-dropdown__trigger--disabled"
+      )
+    },
+    triggerIcon
+  ), isOpen && /* @__PURE__ */ import_react4.default.createElement("ul", { className: "md-dropdown__menu" }, options.map((option) => /* @__PURE__ */ import_react4.default.createElement(
+    "li",
+    {
+      key: option.value,
+      className: cx(
+        "md-dropdown__item",
+        selected && "md-dropdown__item--selected"
+      ),
+      onClick: () => {
+        onChange(option.value);
+        setIsOpen(false);
       }
-    ),
-    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
-    )) })
-  ] });
+    },
+    option.Icon && /* @__PURE__ */ import_react4.default.createElement("span", { className: "md-dropdown__icon" }, /* @__PURE__ */ import_react4.default.createElement(option.Icon, null)),
+    option.label && /* @__PURE__ */ import_react4.default.createElement("span", { className: "md-dropdown__label" }, option.label)
+  ))));
 }
 
 // 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)(
+  return /* @__PURE__ */ React.createElement(
     IconDropdown,
     {
       options: headingOptions,
-      triggerIcon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Heading1Icon, {}),
+      triggerIcon: /* @__PURE__ */ React.createElement(import_lucide_react2.Heading1Icon, null),
       onChange: (value) => {
         const option = headingOptions.find((o) => o.value === value);
         if (option) insertMarkdown(option.before);
@@ -379,11 +374,11 @@ function ToolbarDropdownHeading({
   );
 }
 function ToolbarDropdownList({ insertMarkdown }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ React.createElement(
     IconDropdown,
     {
       options: listOptions,
-      triggerIcon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.ListIcon, {}),
+      triggerIcon: /* @__PURE__ */ React.createElement(import_lucide_react2.ListIcon, null),
       onChange: (value) => {
         const option = listOptions.find((o) => o.value === value);
         if (option) insertMarkdown(option.before);