@joinezco/markdown-editor 0.0.1 → 0.0.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.
Files changed (8) hide show
  1. package/.turbo/turbo-build.log +5 -0
  2. package/dist/editor/extensions/codeblock.js +12 -2
  3. package/dist/editor/styles.js +81 -0
  4. package/package.json +2 -2
  5. package/public/snapshot.bin +0 -0
  6. package/src/App.css +0 -1
  7. package/src/lib/editor/extensions/codeblock.ts +14 -4
  8. package/src/lib/editor/styles.ts +85 -0
package/.turbo/turbo-build.log ADDED
@@ -0,0 +1,5 @@
1
+
2
+
3
+ > @joinezco/markdown-editor@0.0.2 build /home/theo/dev/mono/src/typescript/markdown-editor
4
+ > tsc -p tsconfig.lib.json
5
+
package/dist/editor/extensions/codeblock.js CHANGED
@@ -75,7 +75,6 @@ export const ExtendedCodeblock = Node.create({
75
75
  },
76
76
  // Render language back to HTML structure
77
77
  renderHTML: attributes => {
78
- console.log('renderHTML attributes', { attributes });
79
78
  if (!attributes.language || attributes.language === 'plaintext') {
80
79
  return {}; // No class needed for plaintext
81
80
  }
@@ -154,7 +153,6 @@ export const ExtendedCodeblock = Node.create({
154
153
  type: this.type,
155
154
  getAttributes: match => {
156
155
  const input = match[1]?.trim();
157
- console.log('input', { input });
158
156
  if (!input)
159
157
  return { language: 'markdown' };
160
158
  // If input contains a dot, treat it as a filename
@@ -304,6 +302,8 @@ export const ExtendedCodeblock = Node.create({
304
302
  // Reassign z-indexes for all codeblocks whenever a new one is created
305
303
  // This ensures proper stacking order based on DOM position
306
304
  reassignZIndexes();
305
+ // Track whether this codeblock was created empty (e.g. via ``` input rule)
306
+ const wasCreatedEmpty = !node.textContent && !node.attrs.file;
307
307
  // Initialize filesystem worker and update extensions asynchronously
308
308
  getFileSystemWorker().then(fs => {
309
309
  fsWorker = fs;
@@ -325,6 +325,16 @@ export const ExtendedCodeblock = Node.create({
325
325
  }),
326
326
  ]
327
327
  }));
328
+ // If created via input rule (empty), focus toolbar and open dropdown
329
+ if (wasCreatedEmpty) {
330
+ requestAnimationFrame(() => {
331
+ const toolbarInput = cm.dom.querySelector('.cm-toolbar-input');
332
+ if (toolbarInput) {
333
+ toolbarInput.focus();
334
+ toolbarInput.click();
335
+ }
336
+ });
337
+ }
328
338
  });
329
339
  }).catch(error => {
330
340
  console.error('Failed to initialize filesystem worker:', error);
package/dist/editor/styles.js CHANGED
@@ -17,6 +17,26 @@ export const styleModule = new StyleModule({
17
17
  '--ezco-mde-bg-dark': '#1e1e1e',
18
18
  '--ezco-mde-link-color': '#5861ff',
19
19
  '--ezco-mde-link-color-hover': '#383ea3',
20
+ // Typography scale based on perfect fourth ratio (1.333)
21
+ '--ezco-mde-type-ratio': '1.25',
22
+ '--ezco-mde-base-font-size': '1rem',
23
+ '--ezco-mde-base-line-height': '1.5',
24
+ // Font sizes using modular scale
25
+ '--ezco-mde-text-xs': 'calc(var(--ezco-mde-base-font-size) / var(--ezco-mde-type-ratio))',
26
+ '--ezco-mde-text-sm': 'calc(var(--ezco-mde-text-xs) * var(--ezco-mde-type-ratio))',
27
+ '--ezco-mde-text-base': 'var(--ezco-mde-base-font-size)',
28
+ '--ezco-mde-text-lg': 'calc(var(--ezco-mde-text-base) * var(--ezco-mde-type-ratio))',
29
+ '--ezco-mde-text-xl': 'calc(var(--ezco-mde-text-lg) * var(--ezco-mde-type-ratio))',
30
+ '--ezco-mde-text-2xl': 'calc(var(--ezco-mde-text-xl) * var(--ezco-mde-type-ratio))',
31
+ '--ezco-mde-text-3xl': 'calc(var(--ezco-mde-text-2xl) * var(--ezco-mde-type-ratio))',
32
+ '--ezco-mde-text-4xl': 'calc(var(--ezco-mde-text-3xl) * var(--ezco-mde-type-ratio))',
33
+ // Line heights based on modular scale - inversely related to font size for better readability
34
+ '--ezco-mde-line-ratio': '1', // Smaller ratio for line height progression
35
+ '--ezco-mde-leading-loose': 'calc(var(--ezco-mde-base-line-height) * var(--ezco-mde-line-ratio))',
36
+ '--ezco-mde-leading-relaxed': 'var(--ezco-mde-base-line-height)',
37
+ '--ezco-mde-leading-normal': 'calc(var(--ezco-mde-base-line-height) / var(--ezco-mde-line-ratio))',
38
+ '--ezco-mde-leading-snug': 'calc(var(--ezco-mde-leading-normal) / var(--ezco-mde-line-ratio))',
39
+ '--ezco-mde-leading-tight': 'calc(var(--ezco-mde-leading-snug) / var(--ezco-mde-line-ratio))',
20
40
  // Default to light mode, overridden by media query
21
41
  '--ezco-mde-code-bg': 'var(--ezco-mde-code-bg-light)',
22
42
  '--ezco-mde-bg': 'var(--ezco-mde-bg-light)',
@@ -33,6 +53,59 @@ export const styleModule = new StyleModule({
33
53
  color: 'var(--ezco-mde-link-color-hover)',
34
54
  cursor: 'pointer',
35
55
  },
56
+ // Typography styles for Markdown elements using modular scale
57
+ '& h1': {
58
+ 'font-size': 'var(--ezco-mde-text-4xl)',
59
+ 'line-height': 'var(--ezco-mde-leading-tight)',
60
+ 'margin': '0.67em 0',
61
+ 'font-weight': 'bold',
62
+ },
63
+ '& h2': {
64
+ 'font-size': 'var(--ezco-mde-text-3xl)',
65
+ 'line-height': 'var(--ezco-mde-leading-tight)',
66
+ 'margin': '0.75em 0 0.5em 0',
67
+ 'font-weight': 'bold',
68
+ },
69
+ '& h3': {
70
+ 'font-size': 'var(--ezco-mde-text-2xl)',
71
+ 'line-height': 'var(--ezco-mde-leading-snug)',
72
+ 'margin': '0.83em 0 0.5em 0',
73
+ 'font-weight': 'bold',
74
+ },
75
+ '& h4': {
76
+ 'font-size': 'var(--ezco-mde-text-xl)',
77
+ 'line-height': 'var(--ezco-mde-leading-snug)',
78
+ 'margin': '1em 0 0.5em 0',
79
+ 'font-weight': 'bold',
80
+ },
81
+ '& h5': {
82
+ 'font-size': 'var(--ezco-mde-text-lg)',
83
+ 'line-height': 'var(--ezco-mde-leading-normal)',
84
+ 'margin': '1.17em 0 0.5em 0',
85
+ 'font-weight': 'bold',
86
+ },
87
+ '& h6': {
88
+ 'font-size': 'var(--ezco-mde-text-base)',
89
+ 'line-height': 'var(--ezco-mde-leading-normal)',
90
+ 'margin': '1.33em 0 0.5em 0',
91
+ 'font-weight': 'bold',
92
+ },
93
+ '& p': {
94
+ 'font-size': 'var(--ezco-mde-text-base)',
95
+ 'line-height': 'var(--ezco-mde-leading-relaxed)',
96
+ 'margin': '1em 0',
97
+ },
98
+ '& blockquote': {
99
+ 'font-size': 'var(--ezco-mde-text-base)',
100
+ 'line-height': 'var(--ezco-mde-leading-relaxed)',
101
+ 'margin': '1.5em 0',
102
+ 'padding': '0 1em',
103
+ 'border-left': '4px solid #ddd',
104
+ },
105
+ '& small': {
106
+ 'font-size': 'var(--ezco-mde-text-sm)',
107
+ 'line-height': 'var(--ezco-mde-leading-normal)',
108
+ },
36
109
  // Codeblock styles
37
110
  '& .cm-editor': {
38
111
  margin: '2rem 0',
@@ -44,6 +117,8 @@ export const styleModule = new StyleModule({
44
117
  background: 'var(--ezco-mde-code-bg)',
45
118
  padding: '0.1em 0.3em',
46
119
  'border-radius': '3px',
120
+ '-webkit-box-decoration-break': 'clone',
121
+ 'box-decoration-break': 'clone',
47
122
  },
48
123
  // Table styles
49
124
  '&.tableWrapper': {
@@ -113,6 +188,12 @@ export const styleModule = new StyleModule({
113
188
  '& li > p': {
114
189
  'margin-top': 0,
115
190
  'margin-bottom': 0,
191
+ 'font-size': 'var(--ezco-mde-text-base)',
192
+ 'line-height': 'var(--ezco-mde-leading-relaxed)',
193
+ },
194
+ '& ol > li > p, & ul > li > p': {
195
+ 'font-size': 'var(--ezco-mde-text-base)',
196
+ 'line-height': 'var(--ezco-mde-leading-relaxed)',
116
197
  },
117
198
  // Task list styles
118
199
  '& li[data-checked="true"]>div>p': {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@joinezco/markdown-editor",
3
3
  "private": false,
4
- "version": "0.0.1",
4
+ "version": "0.0.3",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",
@@ -35,7 +35,7 @@
35
35
  "tippy.js": "^6.3.7",
36
36
  "tiptap-markdown": "^0.8.10",
37
37
  "vite-plugin-node-polyfills": "^0.24.0",
38
- "@joinezco/codeblock": "0.0.8"
38
+ "@joinezco/codeblock": "0.0.9"
39
39
  },
40
40
  "devDependencies": {
41
41
  "@eslint/js": "^9.22.0",
package/public/snapshot.bin CHANGED
Binary file
package/src/App.css CHANGED
@@ -133,7 +133,6 @@
133
133
  .settings-header {
134
134
  display: flex;
135
135
  align-items: center;
136
- justify-content: space-between;
137
136
  padding: 20px 24px;
138
137
  border-bottom: 1px solid #e2e8f0;
139
138
  }
package/src/lib/editor/extensions/codeblock.ts CHANGED
@@ -91,8 +91,6 @@ export const ExtendedCodeblock = Node.create({
91
91
  // Render language back to HTML structure
92
92
  renderHTML: attributes => {
93
93
 
94
- console.log('renderHTML attributes', { attributes });
95
-
96
94
  if (!attributes.language || attributes.language === 'plaintext') {
97
95
  return {}; // No class needed for plaintext
98
96
  }
@@ -178,8 +176,6 @@ export const ExtendedCodeblock = Node.create({
178
176
  type: this.type,
179
177
  getAttributes: match => {
180
178
  const input = match[1]?.trim();
181
- console.log('input', { input });
182
-
183
179
  if (!input) return { language: 'markdown' };
184
180
 
185
181
  // If input contains a dot, treat it as a filename
@@ -346,6 +342,9 @@ export const ExtendedCodeblock = Node.create({
346
342
  // This ensures proper stacking order based on DOM position
347
343
  reassignZIndexes();
348
344
 
345
+ // Track whether this codeblock was created empty (e.g. via ``` input rule)
346
+ const wasCreatedEmpty = !node.textContent && !node.attrs.file;
347
+
349
348
  // Initialize filesystem worker and update extensions asynchronously
350
349
  getFileSystemWorker().then(fs => {
351
350
  fsWorker = fs;
@@ -367,6 +366,17 @@ export const ExtendedCodeblock = Node.create({
367
366
  }),
368
367
  ]
369
368
  }));
369
+
370
+ // If created via input rule (empty), focus toolbar and open dropdown
371
+ if (wasCreatedEmpty) {
372
+ requestAnimationFrame(() => {
373
+ const toolbarInput = cm.dom.querySelector<HTMLInputElement>('.cm-toolbar-input');
374
+ if (toolbarInput) {
375
+ toolbarInput.focus();
376
+ toolbarInput.click();
377
+ }
378
+ });
379
+ }
370
380
  })
371
381
  }).catch(error => {
372
382
  console.error('Failed to initialize filesystem worker:', error);
package/src/lib/editor/styles.ts CHANGED
@@ -19,6 +19,29 @@ export const styleModule: StyleModule = new StyleModule({
19
19
  '--ezco-mde-link-color': '#5861ff',
20
20
  '--ezco-mde-link-color-hover': '#383ea3',
21
21
 
22
+ // Typography scale based on perfect fourth ratio (1.333)
23
+ '--ezco-mde-type-ratio': '1.25',
24
+ '--ezco-mde-base-font-size': '1rem',
25
+ '--ezco-mde-base-line-height': '1.5',
26
+
27
+ // Font sizes using modular scale
28
+ '--ezco-mde-text-xs': 'calc(var(--ezco-mde-base-font-size) / var(--ezco-mde-type-ratio))',
29
+ '--ezco-mde-text-sm': 'calc(var(--ezco-mde-text-xs) * var(--ezco-mde-type-ratio))',
30
+ '--ezco-mde-text-base': 'var(--ezco-mde-base-font-size)',
31
+ '--ezco-mde-text-lg': 'calc(var(--ezco-mde-text-base) * var(--ezco-mde-type-ratio))',
32
+ '--ezco-mde-text-xl': 'calc(var(--ezco-mde-text-lg) * var(--ezco-mde-type-ratio))',
33
+ '--ezco-mde-text-2xl': 'calc(var(--ezco-mde-text-xl) * var(--ezco-mde-type-ratio))',
34
+ '--ezco-mde-text-3xl': 'calc(var(--ezco-mde-text-2xl) * var(--ezco-mde-type-ratio))',
35
+ '--ezco-mde-text-4xl': 'calc(var(--ezco-mde-text-3xl) * var(--ezco-mde-type-ratio))',
36
+
37
+ // Line heights based on modular scale - inversely related to font size for better readability
38
+ '--ezco-mde-line-ratio': '1', // Smaller ratio for line height progression
39
+ '--ezco-mde-leading-loose': 'calc(var(--ezco-mde-base-line-height) * var(--ezco-mde-line-ratio))',
40
+ '--ezco-mde-leading-relaxed': 'var(--ezco-mde-base-line-height)',
41
+ '--ezco-mde-leading-normal': 'calc(var(--ezco-mde-base-line-height) / var(--ezco-mde-line-ratio))',
42
+ '--ezco-mde-leading-snug': 'calc(var(--ezco-mde-leading-normal) / var(--ezco-mde-line-ratio))',
43
+ '--ezco-mde-leading-tight': 'calc(var(--ezco-mde-leading-snug) / var(--ezco-mde-line-ratio))',
44
+
22
45
  // Default to light mode, overridden by media query
23
46
  '--ezco-mde-code-bg': 'var(--ezco-mde-code-bg-light)',
24
47
  '--ezco-mde-bg': 'var(--ezco-mde-bg-light)',
@@ -39,6 +62,60 @@ export const styleModule: StyleModule = new StyleModule({
39
62
  cursor: 'pointer',
40
63
  },
41
64
 
65
+ // Typography styles for Markdown elements using modular scale
66
+ '& h1': {
67
+ 'font-size': 'var(--ezco-mde-text-4xl)',
68
+ 'line-height': 'var(--ezco-mde-leading-tight)',
69
+ 'margin': '0.67em 0',
70
+ 'font-weight': 'bold',
71
+ },
72
+ '& h2': {
73
+ 'font-size': 'var(--ezco-mde-text-3xl)',
74
+ 'line-height': 'var(--ezco-mde-leading-tight)',
75
+ 'margin': '0.75em 0 0.5em 0',
76
+ 'font-weight': 'bold',
77
+ },
78
+ '& h3': {
79
+ 'font-size': 'var(--ezco-mde-text-2xl)',
80
+ 'line-height': 'var(--ezco-mde-leading-snug)',
81
+ 'margin': '0.83em 0 0.5em 0',
82
+ 'font-weight': 'bold',
83
+ },
84
+ '& h4': {
85
+ 'font-size': 'var(--ezco-mde-text-xl)',
86
+ 'line-height': 'var(--ezco-mde-leading-snug)',
87
+ 'margin': '1em 0 0.5em 0',
88
+ 'font-weight': 'bold',
89
+ },
90
+ '& h5': {
91
+ 'font-size': 'var(--ezco-mde-text-lg)',
92
+ 'line-height': 'var(--ezco-mde-leading-normal)',
93
+ 'margin': '1.17em 0 0.5em 0',
94
+ 'font-weight': 'bold',
95
+ },
96
+ '& h6': {
97
+ 'font-size': 'var(--ezco-mde-text-base)',
98
+ 'line-height': 'var(--ezco-mde-leading-normal)',
99
+ 'margin': '1.33em 0 0.5em 0',
100
+ 'font-weight': 'bold',
101
+ },
102
+ '& p': {
103
+ 'font-size': 'var(--ezco-mde-text-base)',
104
+ 'line-height': 'var(--ezco-mde-leading-relaxed)',
105
+ 'margin': '1em 0',
106
+ },
107
+ '& blockquote': {
108
+ 'font-size': 'var(--ezco-mde-text-base)',
109
+ 'line-height': 'var(--ezco-mde-leading-relaxed)',
110
+ 'margin': '1.5em 0',
111
+ 'padding': '0 1em',
112
+ 'border-left': '4px solid #ddd',
113
+ },
114
+ '& small': {
115
+ 'font-size': 'var(--ezco-mde-text-sm)',
116
+ 'line-height': 'var(--ezco-mde-leading-normal)',
117
+ },
118
+
42
119
  // Codeblock styles
43
120
  '& .cm-editor': {
44
121
  margin: '2rem 0',
@@ -51,6 +128,8 @@ export const styleModule: StyleModule = new StyleModule({
51
128
  background: 'var(--ezco-mde-code-bg)',
52
129
  padding: '0.1em 0.3em',
53
130
  'border-radius': '3px',
131
+ '-webkit-box-decoration-break': 'clone',
132
+ 'box-decoration-break': 'clone',
54
133
  },
55
134
  // Table styles
56
135
  '&.tableWrapper': {
@@ -121,6 +200,12 @@ export const styleModule: StyleModule = new StyleModule({
121
200
  '& li > p': {
122
201
  'margin-top': 0,
123
202
  'margin-bottom': 0,
203
+ 'font-size': 'var(--ezco-mde-text-base)',
204
+ 'line-height': 'var(--ezco-mde-leading-relaxed)',
205
+ },
206
+ '& ol > li > p, & ul > li > p': {
207
+ 'font-size': 'var(--ezco-mde-text-base)',
208
+ 'line-height': 'var(--ezco-mde-leading-relaxed)',
124
209
  },
125
210
  // Task list styles
126
211
  '& li[data-checked="true"]>div>p': {