markdown-wysiwyg-editor 0.2.1 → 0.2.3
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.
- package/CHANGELOG.md +13 -0
- package/README.md +70 -2
- package/dist/components/MarkdownEditor.d.ts.map +1 -1
- package/dist/components/MarkdownSyntaxStatus.d.ts.map +1 -1
- package/dist/components/MarkdownToolbar.d.ts.map +1 -1
- package/dist/converters/MarkdownTipTapConverter.d.ts.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.js +4874 -4876
- package/dist/index.js.map +1 -1
- package/dist/types/index.d.ts +1 -6
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.2.3] - 2025-12-18
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
|
|
14
|
+
- Unified heading translation keys to a single `markdown_editor.heading` key and compose the level in the UI.
|
|
15
|
+
|
|
16
|
+
## [0.2.2] - 2025-12-18
|
|
17
|
+
|
|
18
|
+
### Changed
|
|
19
|
+
|
|
20
|
+
- Fixed the toolbar download menu background styling to avoid transparency issues.
|
|
21
|
+
- Updated the example app to wire `I18nProvider` so `I18N_KEYS` translations resolve correctly.
|
|
22
|
+
|
|
10
23
|
## [0.2.1] - 2025-12-15
|
|
11
24
|
|
|
12
25
|
### Added
|
package/README.md
CHANGED
|
@@ -57,7 +57,75 @@ import 'markdown-wysiwyg-editor/style.css';
|
|
|
57
57
|
|
|
58
58
|
You can import this in your main app file (e.g., `App.tsx` or `index.tsx`) to make it available globally.
|
|
59
59
|
|
|
60
|
-
### 2.
|
|
60
|
+
### 2. Theming (shadcn CSS Variables)
|
|
61
|
+
|
|
62
|
+
This library uses **shadcn-style CSS variables** for theming. Define these variables in your host project's global CSS:
|
|
63
|
+
|
|
64
|
+
```css
|
|
65
|
+
:root {
|
|
66
|
+
--background: 0 0% 100%;
|
|
67
|
+
--foreground: 222.2 84% 4.9%;
|
|
68
|
+
--primary: 221.2 83.2% 53.3%;
|
|
69
|
+
--primary-foreground: 210 40% 98%;
|
|
70
|
+
--secondary: 210 40% 96.1%;
|
|
71
|
+
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
72
|
+
--muted: 210 40% 96.1%;
|
|
73
|
+
--muted-foreground: 215.4 16.3% 46.9%;
|
|
74
|
+
--accent: 210 40% 96.1%;
|
|
75
|
+
--accent-foreground: 222.2 47.4% 11.2%;
|
|
76
|
+
--destructive: 0 84.2% 60.2%;
|
|
77
|
+
--destructive-foreground: 210 40% 98%;
|
|
78
|
+
--border: 214.3 31.8% 91.4%;
|
|
79
|
+
--input: 214.3 31.8% 91.4%;
|
|
80
|
+
--ring: 221.2 83.2% 53.3%;
|
|
81
|
+
--radius: 0.5rem;
|
|
82
|
+
--popover: 0 0% 100%;
|
|
83
|
+
--popover-foreground: 222.2 84% 4.9%;
|
|
84
|
+
--card: 0 0% 100%;
|
|
85
|
+
--card-foreground: 222.2 84% 4.9%;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
/* Dark mode - use .dark class or @media (prefers-color-scheme: dark) */
|
|
89
|
+
.dark {
|
|
90
|
+
--background: 222.2 84% 4.9%;
|
|
91
|
+
--foreground: 210 40% 98%;
|
|
92
|
+
--primary: 217.2 91.2% 59.8%;
|
|
93
|
+
--primary-foreground: 222.2 47.4% 11.2%;
|
|
94
|
+
--secondary: 217.2 32.6% 17.5%;
|
|
95
|
+
--secondary-foreground: 210 40% 98%;
|
|
96
|
+
--muted: 217.2 32.6% 17.5%;
|
|
97
|
+
--muted-foreground: 215 20.2% 65.1%;
|
|
98
|
+
--accent: 217.2 32.6% 17.5%;
|
|
99
|
+
--accent-foreground: 210 40% 98%;
|
|
100
|
+
--destructive: 0 62.8% 30.6%;
|
|
101
|
+
--destructive-foreground: 210 40% 98%;
|
|
102
|
+
--border: 217.2 32.6% 17.5%;
|
|
103
|
+
--input: 217.2 32.6% 17.5%;
|
|
104
|
+
--ring: 224.3 76.3% 48%;
|
|
105
|
+
--popover: 222.2 84% 4.9%;
|
|
106
|
+
--popover-foreground: 210 40% 98%;
|
|
107
|
+
--card: 222.2 84% 4.9%;
|
|
108
|
+
--card-foreground: 210 40% 98%;
|
|
109
|
+
}
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
> **Note**: If you already use shadcn/ui in your project, these variables are likely already defined. The editor will automatically use your existing theme.
|
|
113
|
+
|
|
114
|
+
#### Tailwind CSS Configuration
|
|
115
|
+
|
|
116
|
+
Make sure Tailwind scans this package's output:
|
|
117
|
+
|
|
118
|
+
```js
|
|
119
|
+
// tailwind.config.js
|
|
120
|
+
export default {
|
|
121
|
+
content: [
|
|
122
|
+
'./src/**/*.{js,ts,jsx,tsx}',
|
|
123
|
+
'./node_modules/markdown-wysiwyg-editor/dist/**/*.{js,cjs,mjs}',
|
|
124
|
+
],
|
|
125
|
+
}
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### 3. Height and Scroll Configuration
|
|
61
129
|
|
|
62
130
|
The editor needs proper height configuration to enable scrolling. Choose one approach:
|
|
63
131
|
|
|
@@ -97,7 +165,7 @@ The editor needs proper height configuration to enable scrolling. Choose one app
|
|
|
97
165
|
/>
|
|
98
166
|
```
|
|
99
167
|
|
|
100
|
-
###
|
|
168
|
+
### 4. Common Issues and Solutions
|
|
101
169
|
|
|
102
170
|
#### Issue: Lists not displaying correctly
|
|
103
171
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MarkdownEditor.d.ts","sourceRoot":"","sources":["../../src/components/MarkdownEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"MarkdownEditor.d.ts","sourceRoot":"","sources":["../../src/components/MarkdownEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AA0BhE,OAAO,EAAa,KAAK,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAetE,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAy2BzD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MarkdownSyntaxStatus.d.ts","sourceRoot":"","sources":["../../src/components/MarkdownSyntaxStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"MarkdownSyntaxStatus.d.ts","sourceRoot":"","sources":["../../src/components/MarkdownSyntaxStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D,UAAU,0BAA0B;IAClC,aAAa,EAAE,cAAc,GAAG,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CA4DrE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MarkdownToolbar.d.ts","sourceRoot":"","sources":["../../src/components/MarkdownToolbar.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAsB5C,UAAU,oBAAoB;IAC5B,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpE,qBAAqB,CAAC,EAAE,CAAC,gBAAgB,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,
|
|
1
|
+
{"version":3,"file":"MarkdownToolbar.d.ts","sourceRoot":"","sources":["../../src/components/MarkdownToolbar.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAsB5C,UAAU,oBAAoB;IAC5B,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpE,qBAAqB,CAAC,EAAE,CAAC,gBAAgB,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAwrB1D,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MarkdownTipTapConverter.d.ts","sourceRoot":"","sources":["../../src/converters/MarkdownTipTapConverter.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAY5C,UAAU,uBAAuB;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;
|
|
1
|
+
{"version":3,"file":"MarkdownTipTapConverter.d.ts","sourceRoot":"","sources":["../../src/converters/MarkdownTipTapConverter.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAY5C,UAAU,uBAAuB;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAymBD;;GAEG;AACH,qBAAa,uBAAuB;IAClC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAK;IAErC,OAAO;IAGP;;OAEG;IACH,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAM5C;;OAEG;WACU,oBAAoB,CAC/B,QAAQ,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE,uBAAuB,GAChC,OAAO,CAAC,WAAW,CAAC;IAoDvB,OAAO,CAAC,MAAM,CAAC,cAAc;IAmC7B;;OAEG;IACH,MAAM,CAAC,oBAAoB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM;IAMtD,OAAO,CAAC,MAAM,CAAC,cAAc;IAkD7B,OAAO,CAAC,MAAM,CAAC,aAAa;IA8C5B,OAAO,CAAC,MAAM,CAAC,eAAe;IA0B9B;;OAEG;WACU,sCAAsC,CACjD,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,EACd,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,EAC7D,OAAO,CAAC,EAAE,uBAAuB,GAChC,OAAO,CAAC,IAAI,CAAC;CAWjB"}
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--
|
|
1
|
+
:root{--background: var(--background, 0 0% 100%);--foreground: var(--foreground, 222.2 84% 4.9%);--card: var(--card, 0 0% 100%);--card-foreground: var(--card-foreground, 222.2 84% 4.9%);--popover: var(--popover, 0 0% 100%);--popover-foreground: var(--popover-foreground, 222.2 84% 4.9%);--primary: var(--primary, 221.2 83.2% 53.3%);--primary-foreground: var(--primary-foreground, 210 40% 98%);--secondary: var(--secondary, 210 40% 96.1%);--secondary-foreground: var(--secondary-foreground, 222.2 47.4% 11.2%);--muted: var(--muted, 210 40% 96.1%);--muted-foreground: var(--muted-foreground, 215.4 16.3% 46.9%);--accent: var(--accent, 210 40% 96.1%);--accent-foreground: var(--accent-foreground, 222.2 47.4% 11.2%);--destructive: var(--destructive, 0 84.2% 60.2%);--destructive-foreground: var(--destructive-foreground, 210 40% 98%);--border: var(--border, 214.3 31.8% 91.4%);--input: var(--input, 214.3 31.8% 91.4%);--ring: var(--ring, 221.2 83.2% 53.3%);--radius: var(--radius, .5rem);--mw-bg-canvas: hsl(var(--background));--mw-text-primary: hsl(var(--foreground));--mw-text-secondary: hsl(var(--muted-foreground));--mw-heading-color: hsl(var(--foreground));--mw-heading-secondary: hsl(var(--foreground));--mw-code-bg: #1e293b;--mw-code-text: #e2e8f0;--mw-code-border: hsl(var(--border));--mw-inline-code-bg: #fef2f2;--mw-inline-code-text: #b91c1c;--mw-inline-code-border: #fecaca;--mw-table-border: hsl(var(--border));--mw-table-header-bg: hsl(var(--muted));--mw-table-header-text: hsl(var(--foreground));--mw-table-header-border-bottom: hsl(var(--border));--mw-table-row-hover: hsl(var(--accent));--mw-table-resize-handle: hsl(var(--primary));--mw-quote-border: hsl(var(--primary));--mw-quote-text: hsl(var(--muted-foreground));--mw-quote-bg: hsl(var(--muted));--mw-tooltip-bg: hsl(var(--popover));--mw-tooltip-text: hsl(var(--popover-foreground));--mw-toolbar-bg: hsl(var(--background));--mw-toolbar-border: hsl(var(--border));--mw-toolbar-text: hsl(var(--foreground));--mw-toolbar-hover-bg: hsl(var(--accent));--mw-toolbar-active-bg: hsl(var(--accent))}.ProseMirror{background-color:var(--mw-bg-canvas);color:var(--mw-text-primary);min-height:100%}.ProseMirror h1{font-size:2.25rem;line-height:2.5rem;font-weight:700;color:var(--mw-heading-color);margin-bottom:1rem;margin-top:1.5rem}.ProseMirror h2{font-size:1.875rem;line-height:2.25rem;font-weight:700;color:var(--mw-heading-color);margin-bottom:.75rem;margin-top:1.25rem}.ProseMirror h3{font-size:1.5rem;line-height:2rem;font-weight:600;color:var(--mw-heading-color);margin-bottom:.75rem;margin-top:1rem}.ProseMirror h4{font-size:1.25rem;line-height:1.75rem;font-weight:600;color:var(--mw-heading-secondary);margin-bottom:.5rem;margin-top:.75rem}.ProseMirror h5{font-size:1.125rem;line-height:1.75rem;font-weight:500;color:var(--mw-heading-secondary);margin-bottom:.5rem;margin-top:.75rem}.ProseMirror h6{font-size:1rem;line-height:1.5rem;font-weight:500;color:var(--mw-text-secondary);margin-bottom:.5rem;margin-top:.5rem}.ProseMirror p{margin-bottom:.75rem;color:var(--mw-text-secondary)}.ProseMirror ul,.ProseMirror ol{padding-left:1.5rem;margin-bottom:.75rem;margin-top:.75rem}.ProseMirror ul{list-style-type:disc}.ProseMirror ol{list-style-type:decimal}.ProseMirror ul li,.ProseMirror ol li{margin-bottom:.25rem;padding-left:.25rem;color:var(--mw-text-primary)}.ProseMirror li>p{margin-bottom:0;margin-top:0}.ProseMirror strong,.ProseMirror b{font-weight:700;color:var(--mw-text-primary)}.ProseMirror em,.ProseMirror i{font-style:italic;color:var(--mw-text-primary)}.ProseMirror s,.ProseMirror strike,.ProseMirror del{color:var(--mw-text-secondary)}.ProseMirror blockquote{border-left:4px solid var(--mw-quote-border);padding:.75rem 1rem;font-style:italic;color:var(--mw-quote-text);background-color:var(--mw-quote-bg);border-radius:0 .375rem .375rem 0;margin-top:1rem;margin-bottom:1rem}.ProseMirror blockquote p{margin-top:.5rem;margin-bottom:.5rem}.ProseMirror blockquote p:first-child{margin-top:0}.ProseMirror blockquote p:last-child{margin-bottom:0}.ProseMirror ul>li::marker{color:var(--mw-heading-secondary);font-weight:600}.ProseMirror ol>li::marker{color:var(--mw-heading-secondary);font-weight:600}.ProseMirror code:not(pre code){background-color:var(--mw-inline-code-bg);color:var(--mw-inline-code-text);padding:2px 6px;border-radius:3px;font-size:.9em;border:1px solid var(--mw-inline-code-border);font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-weight:400}.ProseMirror table{border-collapse:collapse;width:100%;margin-top:1rem;margin-bottom:1rem;overflow:hidden;border-radius:.375rem;box-shadow:0 0 0 2px var(--mw-table-border)}.ProseMirror table th,.ProseMirror table td{border:2px solid var(--mw-table-border);padding:.75rem 1rem;text-align:left;min-width:100px}.ProseMirror table th{background-color:var(--mw-table-header-bg);font-weight:600;color:var(--mw-table-header-text);border-bottom:2px solid var(--mw-table-border)}.ProseMirror table td{background-color:var(--mw-bg-canvas);color:var(--mw-text-primary)}.ProseMirror table tr:hover td{background-color:var(--mw-table-row-hover)}.ProseMirror .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;background-color:var(--mw-table-resize-handle);cursor:col-resize;z-index:20}.ProseMirror pre{background:var(--mw-code-bg);color:var(--mw-code-text);padding:1rem;border-radius:.375rem;overflow-x:auto;margin-top:1rem;margin-bottom:1rem;font-size:.875rem;line-height:1.5}.ProseMirror pre code{display:block;white-space:pre;color:var(--mw-code-text);background:transparent;border:none;padding:0;font-family:Monaco,Menlo,Ubuntu Mono,Courier New,monospace}.ProseMirror .hljs{background:var(--mw-code-bg);color:var(--mw-code-text)}.mw-toolbar-root [data-tooltip]{position:relative}.mw-toolbar-root [data-tooltip]:before{content:attr(data-tooltip);position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);padding:6px 8px;background-color:var(--mw-tooltip-bg);color:var(--mw-tooltip-text);font-size:12px;white-space:nowrap;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .1s ease-in-out;z-index:1000}.mw-toolbar-root [data-tooltip]:after{content:"";position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);border:6px solid transparent;border-bottom-color:var(--mw-tooltip-bg);opacity:0;pointer-events:none;transition:opacity .1s ease-in-out;z-index:1000}.mw-toolbar-root [data-tooltip]:hover:before,.mw-toolbar-root [data-tooltip]:hover:after{opacity:1}
|