md-editor-lite 0.1.0 → 0.1.2

package/playground/package.json

@@ -1,14 +0,0 @@
-{
-  "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

@@ -1,31 +0,0 @@
-{
-  "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

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

package/playground/tsconfig.node.json

@@ -1,24 +0,0 @@
-{
-  "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

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

package/src/components/EditorHeader.tsx

@@ -1,21 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

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

package/src/constants/toolbar.ts

@@ -1,36 +0,0 @@
-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

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

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

@@ -1,11 +0,0 @@
-.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

@@ -1,25 +0,0 @@
-.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

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

package/src/hooks/useMarkdownEditor.ts

@@ -1,39 +0,0 @@
-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,
-  }
-}