md-editor-lite 0.1.4 → 0.1.6

package/dist/index.mjs

@@ -1,42 +1,36 @@
 // src/components/EditorHeader.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import "./editor-AUU3A4EA.css";
 function EditorHeader({
   mode,
   setMode,
   insertMarkdown
 }) {
-  return /* @__PURE__ */ jsxs("header", { className: "editor-header", children: [
-    /* @__PURE__ */ jsx(EditorTab, { mode, setMode }),
-    mode === "write" && /* @__PURE__ */ 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
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import "./editor-AUU3A4EA.css";
 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"
-      }
-    )
-  ] });
+  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
 import { forwardRef } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import "./editor-AUU3A4EA.css";
 var EditorTextarea = forwardRef(({ value, placeholder, setValue, onImageUpload }, ref) => {
   const handleDrop = async (e) => {
     e.preventDefault();
@@ -51,7 +45,7 @@ var EditorTextarea = forwardRef(({ value, placeholder, setValue, onImageUpload }
 `);
     }
   };
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ React.createElement(
     "textarea",
     {
       ref,
@@ -98,7 +92,7 @@ function useMarkdownEditor({ value, setValue }) {
 }
 
 // src/components/MarkdownEditor.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import "./editor-AUU3A4EA.css";
 function MarkdownEditor({
   value,
   onChange: setValue,
@@ -109,25 +103,22 @@ function MarkdownEditor({
     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 })
-  ] });
+  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
@@ -135,7 +126,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>");
@@ -143,6 +134,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,
@@ -181,23 +181,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
-import { jsx as jsx5 } from "react/jsx-runtime";
+import "./preview-FACEHC73.css";
 function Preview({ value }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: "preview",
@@ -218,13 +221,19 @@ import {
   Heading3Icon,
   ListOrderedIcon,
   ListIcon,
-  QuoteIcon
+  QuoteIcon,
+  StrikethroughIcon,
+  UnderlineIcon,
+  ListEndIcon
 } 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: "strikethrough", before: "~~", after: "~~", Icon: StrikethroughIcon },
+  { key: "underline", before: "__", after: "__", Icon: UnderlineIcon },
+  { key: "horizontal rule", before: "\n---\n", after: "", Icon: ListEndIcon },
   { key: "link", before: "[", after: "]()", Icon: LinkIcon }
 ];
 var headingOptions = [
@@ -238,25 +247,21 @@ var listOptions = [
 ];
 
 // src/components/Toolbar.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import "./toolbar-YQKH6EMS.css";
 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 })
-  ] });
+  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
-import React from "react";
+import React2 from "react";
 
 // src/utils/cx.ts
 function cx(...classes) {
@@ -264,7 +269,7 @@ function cx(...classes) {
 }
 
 // src/components/IconDropdown.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import "./dropdown-JYZ5KVXG.css";
 function IconDropdown({
   className,
   disabled,
@@ -273,12 +278,12 @@ function IconDropdown({
   triggerIcon,
   onChange
 }) {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const dropdownRef = React.useRef(null);
+  const [isOpen, setIsOpen] = React2.useState(false);
+  const dropdownRef = React2.useRef(null);
   const toggle = () => {
     if (!disabled) setIsOpen((prev) => !prev);
   };
-  React.useEffect(() => {
+  React2.useEffect(() => {
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -287,52 +292,46 @@ function IconDropdown({
     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
+  return /* @__PURE__ */ React2.createElement("div", { ref: dropdownRef, className: cx("md-dropdown", className) }, /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: toggle,
+      disabled,
+      className: cx(
+        "md-dropdown__trigger",
+        disabled && "md-dropdown__trigger--disabled"
+      )
+    },
+    triggerIcon
+  ), isOpen && /* @__PURE__ */ React2.createElement("ul", { className: "md-dropdown__menu" }, options.map((option) => /* @__PURE__ */ React2.createElement(
+    "li",
+    {
+      key: option.value,
+      className: cx(
+        "md-dropdown__item",
+        selected && "md-dropdown__item--selected"
+      ),
+      onClick: () => {
+        onChange(option.value);
+        setIsOpen(false);
       }
-    ),
-    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
-    )) })
-  ] });
+    },
+    option.Icon && /* @__PURE__ */ React2.createElement("span", { className: "md-dropdown__icon" }, /* @__PURE__ */ React2.createElement(option.Icon, null)),
+    option.label && /* @__PURE__ */ React2.createElement("span", { className: "md-dropdown__label" }, option.label)
+  ))));
 }
 
 // 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(
+  return /* @__PURE__ */ React.createElement(
     IconDropdown,
     {
       options: headingOptions,
-      triggerIcon: /* @__PURE__ */ jsx8(Heading1Icon2, {}),
+      triggerIcon: /* @__PURE__ */ React.createElement(Heading1Icon2, null),
       onChange: (value) => {
         const option = headingOptions.find((o) => o.value === value);
         if (option) insertMarkdown(option.before);
@@ -341,11 +340,11 @@ function ToolbarDropdownHeading({
   );
 }
 function ToolbarDropdownList({ insertMarkdown }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ React.createElement(
     IconDropdown,
     {
       options: listOptions,
-      triggerIcon: /* @__PURE__ */ jsx8(ListIcon2, {}),
+      triggerIcon: /* @__PURE__ */ React.createElement(ListIcon2, null),
       onChange: (value) => {
         const option = listOptions.find((o) => o.value === value);
         if (option) insertMarkdown(option.before);

package/dist/preview-FACEHC73.css

@@ -0,0 +1,11 @@
+.preview {
+  color: #111827;
+  width: 100%;
+  min-height: 200px;
+  padding: 16px;
+  border: none;
+  resize: none;
+  outline: none;
+  box-sizing: border-box;
+  list-style: decimal inside;
+}

package/dist/toolbar-YQKH6EMS.css

@@ -0,0 +1,25 @@
+.toolbar-menu {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  gap: 16px;
+  box-sizing: border-box;
+}
+
+.toolbar-button {
+  background: none;
+  width: 28px;
+  height: 28px;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #f3f4f6;
+  }
+
+  &:active {
+    background-color: #e5e7eb;
+  }
+}

package/dist/utils/cx.d.ts

@@ -0,0 +1 @@
+export declare function cx(...classes: (string | false | undefined)[]): string;

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./cx";
+export * from "./markdown";

package/dist/utils/markdown.d.ts

@@ -0,0 +1 @@
+export declare function markdownToHtml(markdown: string): string;

package/package.json

@@ -10,17 +10,17 @@
     "lightweight",
     "textarea"
   ],
-  "version": "0.1.4",
+  "version": "0.1.6",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     },
     "./style.css": "./dist/style.css"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts --clean --tsconfig tsconfig.build.json"
+    "build": "tsup && tsc -p tsconfig.build.json"
   },
   "peerDependencies": {
     "react": ">=18"
@@ -40,5 +40,6 @@
   ],
   "sideEffects": [
     "*.css"
-  ]
+  ],
+  "style": "dist/style.css"
 }

package/dist/index.css

@@ -1,181 +0,0 @@
-/* src/css/editor.css */
-.editor {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-.editor-header {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-  height: 88px;
-  padding: 0 16px;
-  background-color: #f9fafb;
-  border-bottom: 1px solid #e5e7eb;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-}
-@media (min-width: 768px) {
-  .editor-header {
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    height: 48px;
-  }
-}
-.editor-tab-container {
-  display: flex;
-  gap: 1rem;
-  font-weight: 500;
-}
-.editor-tab {
-  cursor: pointer;
-  padding: 0.25rem 0.5rem;
-  font-size: small;
-  font-weight: 500;
-  transition: color 0.2s;
-  color: #4b5563;
-  &:hover {
-    color: #1f2937;
-  }
-}
-.editor-tab--active {
-  color: #111827;
-  border-bottom: 2px solid #111827;
-}
-.editor-textarea {
-  width: 100%;
-  min-height: 200px;
-  margin: 0;
-  padding: 16px;
-  border: none;
-  resize: none;
-  outline: none;
-  box-sizing: border-box;
-}
-
-/* src/css/preview.css */
-.preview {
-  color: #111827;
-  width: 100%;
-  min-height: 200px;
-  padding: 16px;
-  border: none;
-  resize: none;
-  outline: none;
-  box-sizing: border-box;
-  list-style: decimal inside;
-}
-
-/* src/css/toolbar.css */
-.toolbar-menu {
-  display: flex;
-  align-items: center;
-  margin: 0;
-  padding: 0;
-  gap: 16px;
-  box-sizing: border-box;
-}
-.toolbar-button {
-  background: none;
-  width: 28px;
-  height: 28px;
-  border: none;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  &:hover {
-    background-color: #f3f4f6;
-  }
-  &:active {
-    background-color: #e5e7eb;
-  }
-}
-
-/* src/css/dropdown.css */
-.md-dropdown {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-}
-.md-dropdown__trigger {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-}
-.md-dropdown__trigger:hover {
-  background-color: #f3f4f6;
-}
-.md-dropdown__trigger--disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-.md-dropdown__menu {
-  position: absolute;
-  top: 0;
-  left: -35%;
-  z-index: 50;
-  margin-top: 4px;
-  min-width: 40px;
-  max-height: 240px;
-  overflow-y: auto;
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  padding: 4px 0;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-}
-.md-dropdown__item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 12px;
-  font-size: 14px;
-  cursor: pointer;
-  user-select: none;
-  transition: background-color 0.15s ease;
-}
-.md-dropdown__item:hover {
-  background-color: #f3f4f6;
-}
-.md-dropdown__item--selected {
-  background-color: #fefce8;
-  color: #a16207;
-  font-weight: 500;
-}
-.md-dropdown__icon {
-  display: flex;
-  color: #9ca3af;
-}
-.md-dropdown__label {
-  white-space: nowrap;
-}
-.dropdown-item {
-  color: #374151;
-  background-color: #f3f4f6;
-  position: relative;
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  gap: 0.5rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  padding-top: 0.625rem;
-  padding-bottom: 0.625rem;
-  font-size: 0.875rem;
-  transition: all ease-in-out;
-}
-.dropdown-item--selected {
-  background-color: #fefce8;
-  color: #a16207;
-  font-weight: 500;
-}