md-editor-lite 0.1.7 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import "../css/editor.css";
1
+ import "../style.css";
2
2
  interface EditorHeaderProps {
3
3
  mode: "write" | "preview";
4
4
  setMode: (mode: "write" | "preview") => void;
@@ -1,4 +1,4 @@
1
- import "../css/editor.css";
1
+ import "../style.css";
2
2
  interface EditorTabProps {
3
3
  mode: string;
4
4
  setMode: (mode: "write" | "preview") => void;
@@ -1,4 +1,4 @@
1
- import "../css/editor.css";
1
+ import "../style.css";
2
2
  interface EditorTextareaProps {
3
3
  value: string;
4
4
  placeholder?: string;
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import "../css/dropdown.css";
2
+ import "../style.css";
3
3
  export type DropdownOption = {
4
4
  value: string;
5
5
  label?: string;
@@ -1,4 +1,4 @@
1
- import "../css/editor.css";
1
+ import "../style.css";
2
2
  interface MarkdownEditorProps {
3
3
  value: string;
4
4
  onChange: (v: string) => void;
@@ -1,4 +1,4 @@
1
- import "../css/preview.css";
1
+ import "../style.css";
2
2
  interface PreviewProps {
3
3
  value: string;
4
4
  }
@@ -1,4 +1,4 @@
1
- import "../css/toolbar.css";
1
+ import "../style.css";
2
2
  interface ToolbarProps {
3
3
  insertMarkdown: (before: string, after?: string) => void;
4
4
  }
package/dist/index.js CHANGED
@@ -47,7 +47,7 @@ __export(index_exports, {
47
47
  module.exports = __toCommonJS(index_exports);
48
48
 
49
49
  // src/components/EditorHeader.tsx
50
- var import_editor = require("./editor-AUU3A4EA.css");
50
+ var import_style = require("./style.css");
51
51
  function EditorHeader({
52
52
  mode,
53
53
  setMode,
@@ -57,7 +57,7 @@ function EditorHeader({
57
57
  }
58
58
 
59
59
  // src/components/EditorTab.tsx
60
- var import_editor2 = require("./editor-AUU3A4EA.css");
60
+ var import_style2 = require("./style.css");
61
61
  function EditorTab({ mode, setMode }) {
62
62
  return /* @__PURE__ */ React.createElement("div", { className: "editor-tab-container" }, /* @__PURE__ */ React.createElement(
63
63
  "div",
@@ -78,7 +78,7 @@ function EditorTab({ mode, setMode }) {
78
78
 
79
79
  // src/components/EditorTextarea.tsx
80
80
  var import_react = require("react");
81
- var import_editor3 = require("./editor-AUU3A4EA.css");
81
+ var import_style3 = require("./style.css");
82
82
  var EditorTextarea = (0, import_react.forwardRef)(({ value, placeholder, setValue, onImageUpload }, ref) => {
83
83
  const handleDrop = async (e) => {
84
84
  e.preventDefault();
@@ -140,7 +140,7 @@ function useMarkdownEditor({ value, setValue }) {
140
140
  }
141
141
 
142
142
  // src/components/MarkdownEditor.tsx
143
- var import_editor4 = require("./editor-AUU3A4EA.css");
143
+ var import_style4 = require("./style.css");
144
144
  function MarkdownEditor({
145
145
  value,
146
146
  onChange: setValue,
@@ -246,7 +246,7 @@ function markdownToHtml(markdown) {
246
246
  }
247
247
 
248
248
  // src/components/Preview.tsx
249
- var import_preview = require("./preview-FACEHC73.css");
249
+ var import_style5 = require("./style.css");
250
250
  function Preview({ value }) {
251
251
  return /* @__PURE__ */ React.createElement(
252
252
  "div",
@@ -281,7 +281,7 @@ var listOptions = [
281
281
  ];
282
282
 
283
283
  // src/components/Toolbar.tsx
284
- var import_toolbar2 = require("./toolbar-YQKH6EMS.css");
284
+ var import_style6 = require("./style.css");
285
285
  function Toolbar({ insertMarkdown }) {
286
286
  return /* @__PURE__ */ React.createElement("menu", { className: "toolbar-menu" }, TOOLBAR_BUTTONS.map(({ key, before, after, Icon }) => /* @__PURE__ */ React.createElement(
287
287
  "button",
@@ -303,7 +303,7 @@ function cx(...classes) {
303
303
  }
304
304
 
305
305
  // src/components/IconDropdown.tsx
306
- var import_dropdown = require("./dropdown-JYZ5KVXG.css");
306
+ var import_style7 = require("./style.css");
307
307
  function IconDropdown({
308
308
  className,
309
309
  disabled,
package/dist/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  // src/components/EditorHeader.tsx
2
- import "./editor-AUU3A4EA.css";
2
+ import "./style.css";
3
3
  function EditorHeader({
4
4
  mode,
5
5
  setMode,
@@ -9,7 +9,7 @@ function EditorHeader({
9
9
  }
10
10
 
11
11
  // src/components/EditorTab.tsx
12
- import "./editor-AUU3A4EA.css";
12
+ import "./style.css";
13
13
  function EditorTab({ mode, setMode }) {
14
14
  return /* @__PURE__ */ React.createElement("div", { className: "editor-tab-container" }, /* @__PURE__ */ React.createElement(
15
15
  "div",
@@ -30,7 +30,7 @@ function EditorTab({ mode, setMode }) {
30
30
 
31
31
  // src/components/EditorTextarea.tsx
32
32
  import { forwardRef } from "react";
33
- import "./editor-AUU3A4EA.css";
33
+ import "./style.css";
34
34
  var EditorTextarea = forwardRef(({ value, placeholder, setValue, onImageUpload }, ref) => {
35
35
  const handleDrop = async (e) => {
36
36
  e.preventDefault();
@@ -92,7 +92,7 @@ function useMarkdownEditor({ value, setValue }) {
92
92
  }
93
93
 
94
94
  // src/components/MarkdownEditor.tsx
95
- import "./editor-AUU3A4EA.css";
95
+ import "./style.css";
96
96
  function MarkdownEditor({
97
97
  value,
98
98
  onChange: setValue,
@@ -198,7 +198,7 @@ function markdownToHtml(markdown) {
198
198
  }
199
199
 
200
200
  // src/components/Preview.tsx
201
- import "./preview-FACEHC73.css";
201
+ import "./style.css";
202
202
  function Preview({ value }) {
203
203
  return /* @__PURE__ */ React.createElement(
204
204
  "div",
@@ -247,7 +247,7 @@ var listOptions = [
247
247
  ];
248
248
 
249
249
  // src/components/Toolbar.tsx
250
- import "./toolbar-YQKH6EMS.css";
250
+ import "./style.css";
251
251
  function Toolbar({ insertMarkdown }) {
252
252
  return /* @__PURE__ */ React.createElement("menu", { className: "toolbar-menu" }, TOOLBAR_BUTTONS.map(({ key, before, after, Icon }) => /* @__PURE__ */ React.createElement(
253
253
  "button",
@@ -269,7 +269,7 @@ function cx(...classes) {
269
269
  }
270
270
 
271
271
  // src/components/IconDropdown.tsx
272
- import "./dropdown-JYZ5KVXG.css";
272
+ import "./style.css";
273
273
  function IconDropdown({
274
274
  className,
275
275
  disabled,
package/dist/style.css CHANGED
@@ -1,4 +1,207 @@
1
- @import "./css/dropdown.css";
2
- @import "./css/editor.css";
3
- @import "./css/preview.css";
4
- @import "./css/toolbar.css";
1
+ .editor {
2
+ display: flex;
3
+ flex-direction: column;
4
+ width: 100%;
5
+ border: 1px solid #e5e7eb;
6
+ border-radius: 8px;
7
+ box-sizing: border-box;
8
+ overflow: hidden;
9
+ }
10
+
11
+ .editor-header {
12
+ display: flex;
13
+ flex-direction: column;
14
+ justify-content: space-evenly;
15
+
16
+ height: 88px;
17
+ padding: 0 16px;
18
+
19
+ background-color: #f9fafb;
20
+ border-bottom: 1px solid #e5e7eb;
21
+ border-top-left-radius: 8px;
22
+ border-top-right-radius: 8px;
23
+ }
24
+
25
+ @media (min-width: 768px) {
26
+ .editor-header {
27
+ flex-direction: row;
28
+ align-items: center;
29
+ justify-content: space-between;
30
+ height: 48px;
31
+ }
32
+ }
33
+
34
+ .editor-tab-container {
35
+ display: flex;
36
+ gap: 1rem;
37
+ font-weight: 500;
38
+ }
39
+
40
+ .editor-tab {
41
+ cursor: pointer;
42
+ padding: 0.25rem 0.5rem;
43
+ font-size: small;
44
+ font-weight: 500;
45
+ transition: color 0.2s;
46
+ color: #4b5563;
47
+
48
+ &:hover {
49
+ color: #1f2937;
50
+ }
51
+ }
52
+
53
+ .editor-tab--active {
54
+ color: #111827;
55
+ border-bottom: 2px solid #111827;
56
+ }
57
+
58
+ .toolbar-menu {
59
+ display: flex;
60
+ align-items: center;
61
+ margin: 0;
62
+ padding: 0;
63
+ gap: 16px;
64
+ box-sizing: border-box;
65
+ }
66
+
67
+ .toolbar-button {
68
+ background: none;
69
+ width: 28px;
70
+ height: 28px;
71
+ border: none;
72
+ cursor: pointer;
73
+ transition: background-color 0.2s;
74
+
75
+ &:hover {
76
+ background-color: #f3f4f6;
77
+ }
78
+
79
+ &:active {
80
+ background-color: #e5e7eb;
81
+ }
82
+ }
83
+
84
+ .md-dropdown {
85
+ position: relative;
86
+ display: inline-flex;
87
+ align-items: center;
88
+ }
89
+
90
+ .md-dropdown__trigger {
91
+ display: flex;
92
+ align-items: center;
93
+ justify-content: center;
94
+
95
+ width: 28px;
96
+ height: 28px;
97
+
98
+ background: transparent;
99
+ border: none;
100
+ cursor: pointer;
101
+ transition: background-color 0.15s ease;
102
+ }
103
+
104
+ .md-dropdown__trigger:hover {
105
+ background-color: #f3f4f6;
106
+ }
107
+
108
+ .md-dropdown__trigger--disabled {
109
+ cursor: not-allowed;
110
+ opacity: 0.5;
111
+ }
112
+
113
+ .md-dropdown__menu {
114
+ position: absolute;
115
+ top: 0;
116
+ left: -35%;
117
+ z-index: 50;
118
+ margin-top: 4px;
119
+
120
+ min-width: 40px;
121
+ max-height: 240px;
122
+ overflow-y: auto;
123
+
124
+ background: #ffffff;
125
+ border: 1px solid #e5e7eb;
126
+ border-radius: 8px;
127
+ padding: 4px 0;
128
+
129
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
130
+ }
131
+
132
+ .md-dropdown__item {
133
+ display: flex;
134
+ align-items: center;
135
+ gap: 8px;
136
+
137
+ padding: 10px 12px;
138
+ font-size: 14px;
139
+
140
+ cursor: pointer;
141
+ user-select: none;
142
+ transition: background-color 0.15s ease;
143
+ }
144
+
145
+ .md-dropdown__item:hover {
146
+ background-color: #f3f4f6;
147
+ }
148
+
149
+ .md-dropdown__item--selected {
150
+ background-color: #fefce8;
151
+ color: #a16207;
152
+ font-weight: 500;
153
+ }
154
+
155
+ .md-dropdown__icon {
156
+ display: flex;
157
+ color: #9ca3af;
158
+ }
159
+
160
+ .md-dropdown__label {
161
+ white-space: nowrap;
162
+ }
163
+
164
+ .dropdown-item {
165
+ color: #374151;
166
+ background-color: #f3f4f6;
167
+ position: relative;
168
+ display: flex;
169
+ cursor: pointer;
170
+ align-items: center;
171
+ gap: 0.5rem;
172
+ padding-left: 0.75rem;
173
+ padding-right: 0.75rem;
174
+ padding-top: 0.625rem;
175
+ padding-bottom: 0.625rem;
176
+ font-size: 0.875rem;
177
+ transition: all ease-in-out;
178
+ }
179
+
180
+ .dropdown-item--selected {
181
+ background-color: #fefce8;
182
+ color: #a16207;
183
+ font-weight: 500;
184
+ }
185
+
186
+ .editor-textarea {
187
+ width: 100%;
188
+ min-height: 200px;
189
+ margin: 0;
190
+ padding: 16px;
191
+ border: none;
192
+ resize: none;
193
+ outline: none;
194
+ box-sizing: border-box;
195
+ }
196
+
197
+ .preview {
198
+ color: #111827;
199
+ width: 100%;
200
+ min-height: 200px;
201
+ padding: 16px;
202
+ border: none;
203
+ resize: none;
204
+ outline: none;
205
+ box-sizing: border-box;
206
+ list-style: decimal inside;
207
+ }
package/package.json CHANGED
@@ -10,7 +10,7 @@
10
10
  "lightweight",
11
11
  "textarea"
12
12
  ],
13
- "version": "0.1.7",
13
+ "version": "0.1.9",
14
14
  "exports": {
15
15
  ".": {
16
16
  "types": "./dist/index.d.ts",
@@ -1,101 +0,0 @@
1
- .md-dropdown {
2
- position: relative;
3
- display: inline-flex;
4
- align-items: center;
5
- }
6
-
7
- .md-dropdown__trigger {
8
- display: flex;
9
- align-items: center;
10
- justify-content: center;
11
-
12
- width: 28px;
13
- height: 28px;
14
-
15
- background: transparent;
16
- border: none;
17
- cursor: pointer;
18
- transition: background-color 0.15s ease;
19
- }
20
-
21
- .md-dropdown__trigger:hover {
22
- background-color: #f3f4f6;
23
- }
24
-
25
- .md-dropdown__trigger--disabled {
26
- cursor: not-allowed;
27
- opacity: 0.5;
28
- }
29
-
30
- .md-dropdown__menu {
31
- position: absolute;
32
- top: 0;
33
- left: -35%;
34
- z-index: 50;
35
- margin-top: 4px;
36
-
37
- min-width: 40px;
38
- max-height: 240px;
39
- overflow-y: auto;
40
-
41
- background: #ffffff;
42
- border: 1px solid #e5e7eb;
43
- border-radius: 8px;
44
- padding: 4px 0;
45
-
46
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
47
- }
48
-
49
- .md-dropdown__item {
50
- display: flex;
51
- align-items: center;
52
- gap: 8px;
53
-
54
- padding: 10px 12px;
55
- font-size: 14px;
56
-
57
- cursor: pointer;
58
- user-select: none;
59
- transition: background-color 0.15s ease;
60
- }
61
-
62
- .md-dropdown__item:hover {
63
- background-color: #f3f4f6;
64
- }
65
-
66
- .md-dropdown__item--selected {
67
- background-color: #fefce8;
68
- color: #a16207;
69
- font-weight: 500;
70
- }
71
-
72
- .md-dropdown__icon {
73
- display: flex;
74
- color: #9ca3af;
75
- }
76
-
77
- .md-dropdown__label {
78
- white-space: nowrap;
79
- }
80
-
81
- .dropdown-item {
82
- color: #374151;
83
- background-color: #f3f4f6;
84
- position: relative;
85
- display: flex;
86
- cursor: pointer;
87
- align-items: center;
88
- gap: 0.5rem;
89
- padding-left: 0.75rem;
90
- padding-right: 0.75rem;
91
- padding-top: 0.625rem;
92
- padding-bottom: 0.625rem;
93
- font-size: 0.875rem;
94
- transition: all ease-in-out;
95
- }
96
-
97
- .dropdown-item--selected {
98
- background-color: #fefce8;
99
- color: #a16207;
100
- font-weight: 500;
101
- }
@@ -1,67 +0,0 @@
1
- .editor {
2
- display: flex;
3
- flex-direction: column;
4
- width: 100%;
5
- border: 1px solid #e5e7eb;
6
- border-radius: 8px;
7
- box-sizing: border-box;
8
- overflow: hidden;
9
- }
10
-
11
- .editor-header {
12
- display: flex;
13
- flex-direction: column;
14
- justify-content: space-evenly;
15
-
16
- height: 88px;
17
- padding: 0 16px;
18
-
19
- background-color: #f9fafb;
20
- border-bottom: 1px solid #e5e7eb;
21
- border-top-left-radius: 8px;
22
- border-top-right-radius: 8px;
23
- }
24
-
25
- @media (min-width: 768px) {
26
- .editor-header {
27
- flex-direction: row;
28
- align-items: center;
29
- justify-content: space-between;
30
- height: 48px;
31
- }
32
- }
33
-
34
- .editor-tab-container {
35
- display: flex;
36
- gap: 1rem;
37
- font-weight: 500;
38
- }
39
-
40
- .editor-tab {
41
- cursor: pointer;
42
- padding: 0.25rem 0.5rem;
43
- font-size: small;
44
- font-weight: 500;
45
- transition: color 0.2s;
46
- color: #4b5563;
47
-
48
- &:hover {
49
- color: #1f2937;
50
- }
51
- }
52
-
53
- .editor-tab--active {
54
- color: #111827;
55
- border-bottom: 2px solid #111827;
56
- }
57
-
58
- .editor-textarea {
59
- width: 100%;
60
- min-height: 200px;
61
- margin: 0;
62
- padding: 16px;
63
- border: none;
64
- resize: none;
65
- outline: none;
66
- box-sizing: border-box;
67
- }
@@ -1,11 +0,0 @@
1
- .preview {
2
- color: #111827;
3
- width: 100%;
4
- min-height: 200px;
5
- padding: 16px;
6
- border: none;
7
- resize: none;
8
- outline: none;
9
- box-sizing: border-box;
10
- list-style: decimal inside;
11
- }
@@ -1,25 +0,0 @@
1
- .toolbar-menu {
2
- display: flex;
3
- align-items: center;
4
- margin: 0;
5
- padding: 0;
6
- gap: 16px;
7
- box-sizing: border-box;
8
- }
9
-
10
- .toolbar-button {
11
- background: none;
12
- width: 28px;
13
- height: 28px;
14
- border: none;
15
- cursor: pointer;
16
- transition: background-color 0.2s;
17
-
18
- &:hover {
19
- background-color: #f3f4f6;
20
- }
21
-
22
- &:active {
23
- background-color: #e5e7eb;
24
- }
25
- }