remons-markdown-editor 1.0.0-beta.11 → 1.0.0-beta.13

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 (7) hide show
  1. package/dist/index.cjs +25 -14
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +86 -87
  4. package/dist/index.js +25 -14
  5. package/dist/index.js.map +1 -1
  6. package/package.json +79 -79
  7. package/readme.md +309 -309
package/dist/index.css CHANGED
@@ -41,93 +41,85 @@
41
41
  min-height: 20px;
42
42
  text-align: center;
43
43
  }
44
- html,
45
- body {
46
- margin: 0;
47
- padding: 0;
48
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
49
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
50
- sans-serif;
51
- -webkit-font-smoothing: antialiased;
52
- -moz-osx-font-smoothing: grayscale;
53
- }
54
-
55
- :where(.css-dev-only-do-not-override-19u5a7b).ant-btn:not(:disabled):not(.ant-btn-disabled):hover {
56
- border: none !important;
57
- background-color: var(--remons-md-editor-bg-hover) !important;
58
- color: var(--remons-md-editor-color-text-hover) !important;
59
- }
60
-
61
- #markdown-editor {
62
- height: 100vh;
63
- width: 100vw;
64
- overflow: hidden;
65
- border-radius: 12px;
66
- background: var(--remons-md-editor-bg-primary);
67
- }
68
-
69
- /* ===== CSS 自定义属性（主题变量） ===== */
70
- /* 浅色主题（默认） */
71
- :root,
72
- [data-theme="light"] {
73
- /* 背景色 */
74
- --remons-md-editor-bg-primary: #f3f3f3;
75
- --remons-md-editor-bg-white: rgba(255, 255, 255, 0.6);
76
- --remons-md-editor-bg-hover: #e1e4e8;
77
- --remons-md-editor-bg-active: #d0d7de;
78
- --remons-md-editor-bg-fullscreen: #fff;
79
-
80
- /* 文字颜色 */
81
- --remons-md-editor-color-text: #24292f;
82
- --remons-md-editor-color-text-hover: #0969da;
83
-
84
- /* 边框 */
85
- --remons-md-editor-color-border: rgba(255, 255, 255, 0.8);
86
- --remons-md-editor-color-border-light: #d0d7de;
87
-
88
- /* 焦点 */
89
- --remons-md-editor-color-focus: #0969da;
90
- --remons-md-editor-color-focus-shadow: rgba(9, 105, 218, 0.1);
91
-
92
- /* 工具选择器 */
93
- --remons-md-editor-bg-picker: #fff;
94
- --remons-md-editor-bg-cell-active: #ddf4ff;
95
- --remons-md-editor-color-cell-active: #91caff;
96
- --remons-md-editor-color-hint: #999;
97
- --remons-md-editor-color-label: #666;
98
- }
99
-
100
- /* ===== 深色主题 ===== */
101
- [data-theme="dark"] {
102
- /* 背景色 */
103
- --remons-md-editor-bg-primary: #1a1d23;
104
- --remons-md-editor-bg-white: rgba(46, 51, 80, 0.8);
105
- --remons-md-editor-bg-hover: #4a5163;
106
- --remons-md-editor-bg-active: #5a6278;
107
- --remons-md-editor-bg-fullscreen: #1a1d23;
108
-
109
- /* 文字颜色 */
110
- --remons-md-editor-color-text: #c9d1d9;
111
- --remons-md-editor-color-text-hover: #58a6ff;
112
-
113
- /* 边框 */
114
- --remons-md-editor-color-border: rgba(255, 255, 255, 0.1);
115
- --remons-md-editor-color-border-light: #3a3f4b;
116
-
117
- /* 焦点 */
118
- --remons-md-editor-color-focus: #58a6ff;
119
- --remons-md-editor-color-focus-shadow: rgba(88, 166, 255, 0.15);
120
-
121
- /* 工具选择器 */
122
- --remons-md-editor-bg-picker: #2e3350;
123
- --remons-md-editor-bg-cell-active: #1a3a5c;
124
- --remons-md-editor-color-cell-active: #58a6ff;
125
- --remons-md-editor-color-hint: #8b949e;
126
- --remons-md-editor-color-label: #8b949e;
127
- }
128
-
129
- .ant-anchor-link-title {
130
- white-space: inherit !important;
44
+ html,
45
+ body {
46
+ margin: 0;
47
+ padding: 0;
48
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
49
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
50
+ sans-serif;
51
+ -webkit-font-smoothing: antialiased;
52
+ -moz-osx-font-smoothing: grayscale;
53
+ }
54
+
55
+ #markdown-editor {
56
+ height: 100vh;
57
+ width: 100vw;
58
+ overflow: hidden;
59
+ }
60
+
61
+ /* ===== CSS 自定义属性（主题变量） ===== */
62
+ /* 浅色主题（默认） */
63
+ :root,
64
+ [data-theme="light"] {
65
+ /* 背景色 */
66
+ --remons-md-editor-bg-primary: #f3f3f3;
67
+ --remons-md-editor-bg-white: rgba(255, 255, 255, 0.6);
68
+ --remons-md-editor-bg-hover: #e1e4e8;
69
+ --remons-md-editor-bg-active: #d0d7de;
70
+ --remons-md-editor-bg-fullscreen: #fff;
71
+
72
+ /* 文字颜色 */
73
+ --remons-md-editor-color-text: #24292f;
74
+ --remons-md-editor-color-text-hover: #0969da;
75
+
76
+ /* 边框 */
77
+ --remons-md-editor-color-border: rgba(255, 255, 255, 0.8);
78
+ --remons-md-editor-color-border-light: #d0d7de;
79
+
80
+ /* 焦点 */
81
+ --remons-md-editor-color-focus: #0969da;
82
+ --remons-md-editor-color-focus-shadow: rgba(9, 105, 218, 0.1);
83
+
84
+ /* 工具选择器 */
85
+ --remons-md-editor-bg-picker: #fff;
86
+ --remons-md-editor-bg-cell-active: #ddf4ff;
87
+ --remons-md-editor-color-cell-active: #91caff;
88
+ --remons-md-editor-color-hint: #999;
89
+ --remons-md-editor-color-label: #666;
90
+ }
91
+
92
+ /* ===== 深色主题 ===== */
93
+ [data-theme="dark"] {
94
+ /* 背景色 */
95
+ --remons-md-editor-bg-primary: #1a1d23;
96
+ --remons-md-editor-bg-white: rgba(46, 51, 80, 0.8);
97
+ --remons-md-editor-bg-hover: #4a5163;
98
+ --remons-md-editor-bg-active: #5a6278;
99
+ --remons-md-editor-bg-fullscreen: #1a1d23;
100
+
101
+ /* 文字颜色 */
102
+ --remons-md-editor-color-text: #c9d1d9;
103
+ --remons-md-editor-color-text-hover: #58a6ff;
104
+
105
+ /* 边框 */
106
+ --remons-md-editor-color-border: rgba(255, 255, 255, 0.1);
107
+ --remons-md-editor-color-border-light: #3a3f4b;
108
+
109
+ /* 焦点 */
110
+ --remons-md-editor-color-focus: #58a6ff;
111
+ --remons-md-editor-color-focus-shadow: rgba(88, 166, 255, 0.15);
112
+
113
+ /* 工具选择器 */
114
+ --remons-md-editor-bg-picker: #2e3350;
115
+ --remons-md-editor-bg-cell-active: #1a3a5c;
116
+ --remons-md-editor-color-cell-active: #58a6ff;
117
+ --remons-md-editor-color-hint: #8b949e;
118
+ --remons-md-editor-color-label: #8b949e;
119
+ }
120
+
121
+ .ant-anchor-link-title {
122
+ white-space: inherit !important;
131
123
  }@font-face {
132
124
  font-family: 'Inter';
133
125
  font-style: normal;
@@ -189,6 +181,13 @@ body {
189
181
  display: flex;
190
182
  flex-direction: column;
191
183
  border: 1px solid var(--markdown-editor-color-border);
184
+ border-radius: 12px;
185
+ background: var(--remons-md-editor-bg-primary);
186
+ }
187
+ .markdown-editor-app .ant-btn:hover {
188
+ border: none !important;
189
+ background-color: var(--remons-md-editor-bg-hover) !important;
190
+ color: var(--remons-md-editor-color-text-hover) !important;
192
191
  }
193
192
  .markdown-editor-app.fullscreen {
194
193
  position: fixed;
package/dist/index.js CHANGED
@@ -247,25 +247,36 @@ var containerWidgetPlugin = ViewPlugin.fromClass(class {
247
247
  }
248
248
  }, {
249
249
  decorations: (value) => value.decorations,
250
- eventHandlers: { click: (event, view) => {
251
- const target = event.target;
252
- if (target.classList.contains("container-edit-btn")) {
253
- if (target.__typeName) {
254
- const containers = findContainers(view.state.doc.toString());
255
- const buttonPos = view.posAtDOM(target);
256
- for (const container of containers) {
257
- const headerLine = view.state.doc.lineAt(container.startPos);
258
- if (buttonPos >= headerLine.from - 5 && buttonPos <= headerLine.to + 5) {
259
- const callback = view.state.facet(containerEditCallback);
260
- if (callback) callback(view, container.typeName, container.propsLineFrom, container.propsLineTo, { ...container.props });
261
- return true;
250
+ eventHandlers: {
251
+ mousedown: (event, view) => {
252
+ if (event.target.classList.contains("container-edit-btn")) {
253
+ event.preventDefault();
254
+ return true;
255
+ }
256
+ return false;
257
+ },
258
+ click: (event, view) => {
259
+ const target = event.target;
260
+ if (target.classList.contains("container-edit-btn")) {
261
+ event.preventDefault();
262
+ event.stopPropagation();
263
+ if (target.__typeName) {
264
+ const containers = findContainers(view.state.doc.toString());
265
+ const buttonPos = view.posAtDOM(target);
266
+ for (const container of containers) {
267
+ const headerLine = view.state.doc.lineAt(container.startPos);
268
+ if (buttonPos >= headerLine.from - 5 && buttonPos <= headerLine.to + 5) {
269
+ const callback = view.state.facet(containerEditCallback);
270
+ if (callback) callback(view, container.typeName, container.propsLineFrom, container.propsLineTo, { ...container.props });
271
+ return true;
272
+ }
262
273
  }
263
274
  }
275
+ return false;
264
276
  }
265
277
  return false;
266
278
  }
267
- return false;
268
- } }
279
+ }
269
280
  });
270
281
  //#endregion
271
282
  //#region src/components/Toolbar/buttons.tsx