md-editor-lite 0.1.0

package/playground/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "md-editor-lite-playground",
+  "private": true,
+  "scripts": {
+    "dev": "vite"
+  },
+  "dependencies": {
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^5.1.2"
+  }
+}

package/playground/tsconfig.app.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/playground/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/playground/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/playground/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+});

package/src/components/EditorHeader.tsx

@@ -0,0 +1,21 @@
+import { EditorTab, Toolbar } from "../components";
+import "../css/editor.css";
+
+interface EditorHeaderProps {
+  mode: "write" | "preview";
+  setMode: (mode: "write" | "preview") => void;
+  insertMarkdown: (before: string, after?: string) => void;
+}
+
+export function EditorHeader({
+  mode,
+  setMode,
+  insertMarkdown,
+}: EditorHeaderProps) {
+  return (
+    <header className="editor-header">
+      <EditorTab mode={mode} setMode={setMode} />
+      {mode === "write" && <Toolbar insertMarkdown={insertMarkdown} />}
+    </header>
+  );
+}

package/src/components/EditorTab.tsx

@@ -0,0 +1,27 @@
+import "../css/editor.css";
+
+interface EditorTabProps {
+  mode: string;
+  setMode: (mode: "write" | "preview") => void;
+}
+
+export function EditorTab({ mode, setMode }: EditorTabProps) {
+  return (
+    <div className="editor-tab-container">
+      <div
+        className={`editor-tab ${mode === "write" ? "editor-tab--active" : ""}`}
+        onClick={() => setMode("write")}
+      >
+        Write
+      </div>
+      <div
+        className={`editor-tab ${
+          mode === "preview" ? "editor-tab--active" : ""
+        }`}
+        onClick={() => setMode("preview")}
+      >
+        Preview
+      </div>
+    </div>
+  );
+}

package/src/components/EditorTextarea.tsx

@@ -0,0 +1,39 @@
+import { forwardRef } from "react";
+import "../css/editor.css";
+
+interface EditorTextareaProps {
+  value: string;
+  placeholder?: string;
+  setValue: (value: string) => void;
+  onImageUpload?: (file: File) => Promise<string>;
+}
+
+export const EditorTextarea = forwardRef<
+  HTMLTextAreaElement,
+  EditorTextareaProps
+>(({ value, placeholder, setValue, onImageUpload }, ref) => {
+  const handleDrop = async (e: React.DragEvent) => {
+    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 + `\n![${file.name}](${url})\n`);
+    }
+  };
+  return (
+    <textarea
+      ref={ref}
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      onDragOver={(e) => e.preventDefault()}
+      onDrop={handleDrop}
+      placeholder={placeholder}
+      className="editor-textarea"
+    ></textarea>
+  );
+});

package/src/components/IconDropdown.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import { cx } from "../utils/cx";
+import "../css/dropdown.css";
+
+export type DropdownOption = {
+  value: string;
+  label?: string;
+  Icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+};
+
+interface IconDropdownProps {
+  className?: string;
+  disabled?: boolean;
+  options: DropdownOption[];
+  selected?: boolean;
+  triggerIcon: React.ReactNode;
+  onChange: (value: string) => void;
+}
+
+export function IconDropdown({
+  className,
+  disabled,
+  options,
+  selected,
+  triggerIcon,
+  onChange,
+}: IconDropdownProps) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const dropdownRef = React.useRef<HTMLDivElement>(null);
+
+  const toggle = () => {
+    if (!disabled) setIsOpen((prev) => !prev);
+  };
+
+  React.useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(e.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  return (
+    <div ref={dropdownRef} className={cx("md-dropdown", className)}>
+      <button
+        type="button"
+        onClick={toggle}
+        disabled={disabled}
+        className={cx(
+          "md-dropdown__trigger",
+          disabled && "md-dropdown__trigger--disabled"
+        )}
+      >
+        {triggerIcon}
+      </button>
+
+      {isOpen && (
+        <ul className="md-dropdown__menu">
+          {options.map((option) => (
+            <li
+              key={option.value}
+              className={cx(
+                "md-dropdown__item",
+                selected && "md-dropdown__item--selected"
+              )}
+              onClick={() => {
+                onChange(option.value);
+                setIsOpen(false);
+              }}
+            >
+              {option.Icon && (
+                <span className="md-dropdown__icon">
+                  <option.Icon />
+                </span>
+              )}
+              {option.label && (
+                <span className="md-dropdown__label">{option.label}</span>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

package/src/components/MarkdownEditor.tsx

@@ -0,0 +1,42 @@
+import { useState } from "react";
+import { EditorHeader, EditorTextarea, Preview } from "../components";
+import { useMarkdownEditor } from "../hooks/useMarkdownEditor";
+import "../css/editor.css";
+
+interface MarkdownEditorProps {
+  value: string;
+  onChange: (v: string) => void;
+  onImageUpload?: (file: File) => Promise<string>;
+}
+
+export function MarkdownEditor({
+  value,
+  onChange: setValue,
+  onImageUpload,
+}: MarkdownEditorProps) {
+  const { textareaRef, insertMarkdown } = useMarkdownEditor({
+    value,
+    setValue,
+  });
+  const [mode, setMode] = useState<"write" | "preview">("write");
+
+  return (
+    <div className="editor">
+      <EditorHeader
+        mode={mode}
+        setMode={setMode}
+        insertMarkdown={insertMarkdown}
+      />
+      {mode === "write" ? (
+        <EditorTextarea
+          ref={textareaRef}
+          value={value}
+          setValue={setValue}
+          onImageUpload={onImageUpload}
+        />
+      ) : (
+        <Preview value={value} />
+      )}
+    </div>
+  );
+}

package/src/components/Preview.tsx

@@ -0,0 +1,16 @@
+import { markdownToHtml } from "../utils/markdown";
+import "../css/preview.css";
+
+interface PreviewProps {
+  value: string;
+}
+
+export function Preview({ value }: PreviewProps) {
+  return (
+    <div
+      className="preview"
+      dangerouslySetInnerHTML={{ __html: markdownToHtml(value) }}
+      style={{ listStyle: "decimal" }}
+    />
+  );
+}

package/src/components/Toolbar.tsx

@@ -0,0 +1,25 @@
+import { TOOLBAR_BUTTONS } from "../constants/toolbar";
+import { ToolbarDropdownHeading, ToolbarDropdownList } from "../components";
+import "../css/toolbar.css";
+
+interface ToolbarProps {
+  insertMarkdown: (before: string, after?: string) => void;
+}
+
+export function Toolbar({ insertMarkdown }: ToolbarProps) {
+  return (
+    <menu className="toolbar-menu">
+      {TOOLBAR_BUTTONS.map(({ key, before, after, Icon }) => (
+        <button
+          key={key}
+          className="toolbar-button"
+          onClick={() => insertMarkdown(before, after)}
+        >
+          <Icon size={18} />
+        </button>
+      ))}
+      <ToolbarDropdownHeading insertMarkdown={insertMarkdown} />
+      <ToolbarDropdownList insertMarkdown={insertMarkdown} />
+    </menu>
+  );
+}

package/src/components/ToolbarDropdown.tsx

@@ -0,0 +1,35 @@
+import { IconDropdown } from "../components/IconDropdown";
+import { headingOptions, listOptions } from "../constants/toolbar";
+import { Heading1Icon, ListIcon } from "lucide-react";
+
+interface ToolbarDropdownProps {
+  insertMarkdown: (before: string, after?: string) => void;
+}
+
+export function ToolbarDropdownHeading({
+  insertMarkdown,
+}: ToolbarDropdownProps) {
+  return (
+    <IconDropdown
+      options={headingOptions}
+      triggerIcon={<Heading1Icon />}
+      onChange={(value) => {
+        const option = headingOptions.find((o) => o.value === value);
+        if (option) insertMarkdown(option.before);
+      }}
+    />
+  );
+}
+
+export function ToolbarDropdownList({ insertMarkdown }: ToolbarDropdownProps) {
+  return (
+    <IconDropdown
+      options={listOptions}
+      triggerIcon={<ListIcon />}
+      onChange={(value) => {
+        const option = listOptions.find((o) => o.value === value);
+        if (option) insertMarkdown(option.before);
+      }}
+    />
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,7 @@
+export * from "./EditorHeader";
+export * from "./EditorTab";
+export * from "./EditorTextarea";
+export * from "./MarkdownEditor";
+export * from "./Preview";
+export * from "./Toolbar";
+export * from "./ToolbarDropdown";

package/src/constants/index.ts

@@ -0,0 +1 @@
+export * from "./toolbar";

package/src/constants/toolbar.ts

@@ -0,0 +1,36 @@
+import type { DropdownOption } from "../components/IconDropdown";
+import {
+  BoldIcon,
+  ItalicIcon,
+  CodeIcon,
+  LinkIcon,
+  Heading1Icon,
+  Heading2Icon,
+  Heading3Icon,
+  ListOrderedIcon,
+  ListIcon,
+  QuoteIcon,
+} from "lucide-react";
+
+type ToolbarDropdownOption = DropdownOption & {
+  before: string;
+};
+
+export const 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 },
+];
+
+export const headingOptions: ToolbarDropdownOption[] = [
+  { value: "h1", Icon: Heading1Icon, before: "# " },
+  { value: "h2", Icon: Heading2Icon, before: "## " },
+  { value: "h3", Icon: Heading3Icon, before: "### " },
+];
+
+export const listOptions: ToolbarDropdownOption[] = [
+  { value: "unordered list", Icon: ListIcon, before: "- " },
+  { value: "ordered list", Icon: ListOrderedIcon, before: "1. " },
+];

package/src/css/dropdown.css

@@ -0,0 +1,101 @@
+.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;
+}

package/src/css/editor.css

@@ -0,0 +1,67 @@
+.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;
+}

package/src/css/preview.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/src/css/toolbar.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/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useMarkdownEditor";

package/src/hooks/useMarkdownEditor.ts

@@ -0,0 +1,39 @@
+import { useCallback, useRef } from 'react'
+
+interface UseMarkdownEditorProps {
+  value: string
+  setValue: (v: string) => void
+}
+
+export function useMarkdownEditor({ value, setValue }: UseMarkdownEditorProps) {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null)
+
+  const insertMarkdown = useCallback(
+    (before: string, after: string = '') => {
+      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,
+  }
+}