md-editor-lite 0.1.5 → 0.1.7

package/dist/components/EditorHeader.d.ts

@@ -0,0 +1,8 @@
+import "../css/editor.css";
+interface EditorHeaderProps {
+    mode: "write" | "preview";
+    setMode: (mode: "write" | "preview") => void;
+    insertMarkdown: (before: string, after?: string) => void;
+}
+export declare function EditorHeader({ mode, setMode, insertMarkdown, }: EditorHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/EditorTab.d.ts

@@ -0,0 +1,7 @@
+import "../css/editor.css";
+interface EditorTabProps {
+    mode: string;
+    setMode: (mode: "write" | "preview") => void;
+}
+export declare function EditorTab({ mode, setMode }: EditorTabProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/EditorTextarea.d.ts

@@ -0,0 +1,9 @@
+import "../css/editor.css";
+interface EditorTextareaProps {
+    value: string;
+    placeholder?: string;
+    setValue: (value: string) => void;
+    onImageUpload?: (file: File) => Promise<string>;
+}
+export declare const EditorTextarea: import("react").ForwardRefExoticComponent<EditorTextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};

package/dist/components/IconDropdown.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+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 declare function IconDropdown({ className, disabled, options, selected, triggerIcon, onChange, }: IconDropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/MarkdownEditor.d.ts

@@ -0,0 +1,8 @@
+import "../css/editor.css";
+interface MarkdownEditorProps {
+    value: string;
+    onChange: (v: string) => void;
+    onImageUpload?: (file: File) => Promise<string>;
+}
+export declare function MarkdownEditor({ value, onChange: setValue, onImageUpload, }: MarkdownEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Preview.d.ts

@@ -0,0 +1,6 @@
+import "../css/preview.css";
+interface PreviewProps {
+    value: string;
+}
+export declare function Preview({ value }: PreviewProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Toolbar.d.ts

@@ -0,0 +1,6 @@
+import "../css/toolbar.css";
+interface ToolbarProps {
+    insertMarkdown: (before: string, after?: string) => void;
+}
+export declare function Toolbar({ insertMarkdown }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ToolbarDropdown.d.ts

@@ -0,0 +1,6 @@
+interface ToolbarDropdownProps {
+    insertMarkdown: (before: string, after?: string) => void;
+}
+export declare function ToolbarDropdownHeading({ insertMarkdown, }: ToolbarDropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToolbarDropdownList({ insertMarkdown }: ToolbarDropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/index.d.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/dist/constants/index.d.ts

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

package/dist/constants/toolbar.d.ts

@@ -0,0 +1,13 @@
+import type { DropdownOption } from "../components/IconDropdown";
+type ToolbarDropdownOption = DropdownOption & {
+    before: string;
+};
+export declare const TOOLBAR_BUTTONS: {
+    key: string;
+    before: string;
+    after: string;
+    Icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+}[];
+export declare const headingOptions: ToolbarDropdownOption[];
+export declare const listOptions: ToolbarDropdownOption[];
+export {};

package/dist/dropdown-JYZ5KVXG.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/dist/editor-AUU3A4EA.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/dist/hooks/index.d.ts

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

package/dist/hooks/useMarkdownEditor.d.ts

@@ -0,0 +1,9 @@
+interface UseMarkdownEditorProps {
+    value: string;
+    setValue: (v: string) => void;
+}
+export declare function useMarkdownEditor({ value, setValue }: UseMarkdownEditorProps): {
+    textareaRef: import("react").RefObject<HTMLTextAreaElement>;
+    insertMarkdown: (before: string, after?: string) => void;
+};
+export {};

package/dist/index.d.ts

@@ -1,81 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-import react__default from 'react';
-import * as lucide_react from 'lucide-react';
-
-interface EditorHeaderProps {
-    mode: "write" | "preview";
-    setMode: (mode: "write" | "preview") => void;
-    insertMarkdown: (before: string, after?: string) => void;
-}
-declare function EditorHeader({ mode, setMode, insertMarkdown, }: EditorHeaderProps): react_jsx_runtime.JSX.Element;
-
-interface EditorTabProps {
-    mode: string;
-    setMode: (mode: "write" | "preview") => void;
-}
-declare function EditorTab({ mode, setMode }: EditorTabProps): react_jsx_runtime.JSX.Element;
-
-interface EditorTextareaProps {
-    value: string;
-    placeholder?: string;
-    setValue: (value: string) => void;
-    onImageUpload?: (file: File) => Promise<string>;
-}
-declare const EditorTextarea: react.ForwardRefExoticComponent<EditorTextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
-
-interface MarkdownEditorProps {
-    value: string;
-    onChange: (v: string) => void;
-    onImageUpload?: (file: File) => Promise<string>;
-}
-declare function MarkdownEditor({ value, onChange: setValue, onImageUpload, }: MarkdownEditorProps): react_jsx_runtime.JSX.Element;
-
-interface PreviewProps {
-    value: string;
-}
-declare function Preview({ value }: PreviewProps): react_jsx_runtime.JSX.Element;
-
-interface ToolbarProps {
-    insertMarkdown: (before: string, after?: string) => void;
-}
-declare function Toolbar({ insertMarkdown }: ToolbarProps): react_jsx_runtime.JSX.Element;
-
-interface ToolbarDropdownProps {
-    insertMarkdown: (before: string, after?: string) => void;
-}
-declare function ToolbarDropdownHeading({ insertMarkdown, }: ToolbarDropdownProps): react_jsx_runtime.JSX.Element;
-declare function ToolbarDropdownList({ insertMarkdown }: ToolbarDropdownProps): react_jsx_runtime.JSX.Element;
-
-type DropdownOption = {
-    value: string;
-    label?: string;
-    Icon?: react__default.ComponentType<react__default.SVGProps<SVGSVGElement>>;
-};
-
-type ToolbarDropdownOption = DropdownOption & {
-    before: string;
-};
-declare const TOOLBAR_BUTTONS: {
-    key: string;
-    before: string;
-    after: string;
-    Icon: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
-}[];
-declare const headingOptions: ToolbarDropdownOption[];
-declare const listOptions: ToolbarDropdownOption[];
-
-interface UseMarkdownEditorProps {
-    value: string;
-    setValue: (v: string) => void;
-}
-declare function useMarkdownEditor({ value, setValue }: UseMarkdownEditorProps): {
-    textareaRef: react.RefObject<HTMLTextAreaElement | null>;
-    insertMarkdown: (before: string, after?: string) => void;
-};
-
-declare function cx(...classes: (string | false | undefined)[]): string;
-
-declare function markdownToHtml(markdown: string): string;
-
-export { EditorHeader, EditorTab, EditorTextarea, MarkdownEditor, Preview, TOOLBAR_BUTTONS, Toolbar, ToolbarDropdownHeading, ToolbarDropdownList, cx, headingOptions, listOptions, markdownToHtml, useMarkdownEditor };
+export * from "./components/index";
+export * from "./constants/index";
+export * from "./hooks/index";
+export * from "./utils/index";