remons-markdown-editor 1.0.0-beta.15 → 1.0.0-beta.16

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 +15 -3
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +79 -79
  4. package/dist/index.js +15 -3
  5. package/dist/index.js.map +1 -1
  6. package/package.json +77 -77
  7. package/readme.md +309 -309
package/dist/index.css CHANGED
@@ -41,85 +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
- #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;
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;
123
123
  }@font-face {
124
124
  font-family: 'Inter';
125
125
  font-style: normal;
package/dist/index.js CHANGED
@@ -1106,6 +1106,9 @@ function EditDialog({ visible, typeName, currentProps, onSave, onClose }) {
1106
1106
  const schema = componentRegistry.get(typeName);
1107
1107
  const [formProps, setFormProps] = useState({});
1108
1108
  const [form] = Form.useForm();
1109
+ const onSaveRef = useRef(onSave);
1110
+ onSaveRef.current = onSave;
1111
+ const dirtyRef = useRef(false);
1109
1112
  const mergedProps = useMemo(() => {
1110
1113
  if (!schema) return currentProps;
1111
1114
  const defaults = {};
@@ -1143,18 +1146,28 @@ function EditDialog({ visible, typeName, currentProps, onSave, onClose }) {
1143
1146
  ...formValues
1144
1147
  };
1145
1148
  } catch {}
1146
- onSave(finalProps);
1149
+ onSaveRef.current(finalProps);
1150
+ dirtyRef.current = false;
1151
+ onClose();
1147
1152
  };
1148
1153
  const handleClose = () => {
1149
1154
  setFormProps({});
1155
+ dirtyRef.current = false;
1150
1156
  onClose();
1151
1157
  };
1152
1158
  if (!schema) return null;
1159
+ const contextSave = (props) => {
1160
+ setFormProps((prev) => ({
1161
+ ...prev,
1162
+ ...props
1163
+ }));
1164
+ dirtyRef.current = true;
1165
+ };
1153
1166
  const context = {
1154
1167
  props: mergedProps,
1155
1168
  form,
1156
1169
  onChange: handleDialogChange,
1157
- onSave
1170
+ onSave: contextSave
1158
1171
  };
1159
1172
  const renderDialogContent = () => {
1160
1173
  if (schema.renderDialog) return schema.renderDialog(context);
@@ -1346,7 +1359,6 @@ var MarkdownEditor_default = forwardRef(function MarkdownEditor({ defaultValue =
1346
1359
  setDialogVisible(true);
1347
1360
  }, []);
1348
1361
  const handleDialogSave = useCallback((newProps) => {
1349
- setDialogVisible(false);
1350
1362
  if (editorView) updateContainerProps(editorView, dialogPropsRange[0], dialogPropsRange[1], newProps);
1351
1363
  }, [editorView, dialogPropsRange]);
1352
1364
  const handleDialogClose = useCallback(() => {