@oix1987/yjd 1.0.3 → 2.0.0
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/LICENSE +15 -0
- package/README.md +146 -142
- package/core.js +77 -0
- package/dist/core.esm.js +2 -0
- package/dist/core.esm.js.map +1 -0
- package/dist/rich-editor.esm.js +1 -1
- package/dist/rich-editor.esm.js.map +1 -1
- package/dist/rich-editor.min.js +1 -1
- package/dist/rich-editor.min.js.map +1 -1
- package/index.d.ts +134 -103
- package/index.js +227 -0
- package/lib/core/editor.js +1806 -0
- package/lib/core/format.js +540 -0
- package/lib/core/module.js +81 -0
- package/lib/core/registry.js +158 -0
- package/lib/formats/background.js +213 -0
- package/lib/formats/bold.js +49 -0
- package/lib/formats/capitalization.js +579 -0
- package/lib/formats/color.js +183 -0
- package/lib/formats/emoji.js +282 -0
- package/lib/formats/font-family.js +548 -0
- package/lib/formats/heading.js +502 -0
- package/lib/formats/image.js +347 -0
- package/lib/formats/import.js +385 -0
- package/lib/formats/indent.js +297 -0
- package/lib/formats/italic.js +27 -0
- package/lib/formats/line-height.js +562 -0
- package/lib/formats/link.js +251 -0
- package/lib/formats/list.js +635 -0
- package/lib/formats/strike.js +31 -0
- package/lib/formats/subscript.js +40 -0
- package/lib/formats/superscript.js +39 -0
- package/lib/formats/table.js +293 -0
- package/lib/formats/tag.js +304 -0
- package/lib/formats/text-align.js +422 -0
- package/lib/formats/text-size.js +498 -0
- package/lib/formats/underline.js +30 -0
- package/lib/formats/video.js +381 -0
- package/lib/modules/block-toolbar.js +639 -0
- package/lib/modules/code-view.js +447 -0
- package/lib/modules/find-replace.js +273 -0
- package/lib/modules/history.js +425 -0
- package/lib/modules/resize-handles.js +701 -0
- package/lib/modules/slash-menu.js +183 -0
- package/lib/modules/table-toolbar.js +635 -0
- package/lib/modules/toolbar.js +607 -0
- package/lib/styles-loader.js +142 -0
- package/{dist → lib}/styles.css +1285 -35
- package/lib/styles.css.js +2 -0
- package/lib/styles.min.css +1 -0
- package/lib/ui/color-picker.js +296 -0
- package/lib/ui/customselect.js +351 -0
- package/lib/ui/emoji-picker.js +196 -0
- package/lib/ui/icons.js +145 -0
- package/lib/ui/image-popup.js +435 -0
- package/lib/ui/import-popup.js +288 -0
- package/lib/ui/link-popup.js +139 -0
- package/lib/ui/list-picker.js +307 -0
- package/lib/ui/select-button.js +68 -0
- package/lib/ui/table-popup.js +171 -0
- package/lib/ui/tag-popup.js +249 -0
- package/lib/ui/text-align-picker.js +278 -0
- package/lib/ui/video-popup.js +413 -0
- package/lib/utils/exec-command.js +72 -0
- package/lib/utils/history-helper.js +50 -0
- package/lib/utils/popup-helper.js +219 -0
- package/lib/utils/popup-positioning.js +234 -0
- package/lib/utils/sanitize.js +164 -0
- package/package.json +51 -32
- package/umd-entry.js +18 -0
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
import cssText from './styles.css.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* CSS Loader - Load và inject CSS styles vào DOM
|
|
5
|
+
* Thay thế cho việc sử dụng inline styles
|
|
6
|
+
*
|
|
7
|
+
* CSS được import trực tiếp dưới dạng chuỗi (sinh từ styles.css), nên hoạt động
|
|
8
|
+
* cả với native ESM trong trình duyệt lẫn khi đóng gói bằng Rollup/CDN — không
|
|
9
|
+
* còn phụ thuộc vào fetch runtime (vốn làm hỏng việc dùng qua npm/CDN).
|
|
10
|
+
*/
|
|
11
|
+
class StylesLoader {
|
|
12
|
+
static loaded = false;
|
|
13
|
+
static styleElement = null;
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Load CSS (inject inlined stylesheet vào <head>)
|
|
17
|
+
* Trả về Promise để giữ tương thích với code gọi cũ (.catch/.then).
|
|
18
|
+
*/
|
|
19
|
+
static loadStyles() {
|
|
20
|
+
if (this.loaded) return Promise.resolve();
|
|
21
|
+
|
|
22
|
+
try {
|
|
23
|
+
this.styleElement = document.createElement('style');
|
|
24
|
+
this.styleElement.id = 'rich-editor-styles';
|
|
25
|
+
this.styleElement.textContent = cssText;
|
|
26
|
+
document.head.appendChild(this.styleElement);
|
|
27
|
+
this.loaded = true;
|
|
28
|
+
} catch (error) {
|
|
29
|
+
// Fallback: load minimal styles
|
|
30
|
+
this.loadFallbackStyles();
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
return Promise.resolve();
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Load minimal fallback styles nếu không thể load từ file
|
|
38
|
+
*/
|
|
39
|
+
static loadFallbackStyles() {
|
|
40
|
+
const fallbackCSS = `
|
|
41
|
+
.yjd-rich-editor {
|
|
42
|
+
position: relative;
|
|
43
|
+
background: #fff;
|
|
44
|
+
border: 1px solid #ddd;
|
|
45
|
+
border-radius: 4px;
|
|
46
|
+
display: flex;
|
|
47
|
+
flex-direction: column;
|
|
48
|
+
font-family: system-ui, sans-serif;
|
|
49
|
+
}
|
|
50
|
+
.yjd-rich-editor .rich-editor-area {
|
|
51
|
+
flex: 1;
|
|
52
|
+
padding: 20px;
|
|
53
|
+
outline: none;
|
|
54
|
+
min-height: 100px;
|
|
55
|
+
}
|
|
56
|
+
.yjd-rich-editor .rich-editor-toolbar {
|
|
57
|
+
display: flex;
|
|
58
|
+
gap: 4px;
|
|
59
|
+
padding: 8px;
|
|
60
|
+
border-bottom: 1px solid #ddd;
|
|
61
|
+
background: #f9f9f9;
|
|
62
|
+
}
|
|
63
|
+
.yjd-rich-editor .rich-editor-toolbar-btn {
|
|
64
|
+
padding: 4px 8px;
|
|
65
|
+
border: 1px solid #ccc;
|
|
66
|
+
border-radius: 3px;
|
|
67
|
+
background: #fff;
|
|
68
|
+
cursor: pointer;
|
|
69
|
+
}
|
|
70
|
+
.yjd-rich-editor .table-grid-selector {
|
|
71
|
+
position: absolute;
|
|
72
|
+
background: white;
|
|
73
|
+
border: 1px solid #ccc;
|
|
74
|
+
border-radius: 4px;
|
|
75
|
+
padding: 10px;
|
|
76
|
+
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
|
77
|
+
z-index: 1000;
|
|
78
|
+
display: none;
|
|
79
|
+
}
|
|
80
|
+
.yjd-rich-editor .table-grid-cell {
|
|
81
|
+
width: 20px;
|
|
82
|
+
height: 20px;
|
|
83
|
+
border: 1px solid #ddd;
|
|
84
|
+
cursor: pointer;
|
|
85
|
+
background: white;
|
|
86
|
+
}
|
|
87
|
+
`;
|
|
88
|
+
|
|
89
|
+
this.styleElement = document.createElement('style');
|
|
90
|
+
this.styleElement.id = 'rich-editor-styles-fallback';
|
|
91
|
+
this.styleElement.textContent = fallbackCSS;
|
|
92
|
+
document.head.appendChild(this.styleElement);
|
|
93
|
+
|
|
94
|
+
this.loaded = true;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* Unload styles
|
|
99
|
+
*/
|
|
100
|
+
static unloadStyles() {
|
|
101
|
+
if (this.styleElement && this.styleElement.parentNode) {
|
|
102
|
+
this.styleElement.parentNode.removeChild(this.styleElement);
|
|
103
|
+
this.styleElement = null;
|
|
104
|
+
this.loaded = false;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/**
|
|
109
|
+
* Check if styles are loaded
|
|
110
|
+
*/
|
|
111
|
+
static isLoaded() {
|
|
112
|
+
return this.loaded;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/**
|
|
116
|
+
* Reload styles
|
|
117
|
+
*/
|
|
118
|
+
static async reloadStyles() {
|
|
119
|
+
this.unloadStyles();
|
|
120
|
+
await this.loadStyles();
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
/**
|
|
124
|
+
* Add custom CSS
|
|
125
|
+
*/
|
|
126
|
+
static addCustomCSS(css, id = 'rich-editor-custom') {
|
|
127
|
+
// Remove existing custom styles
|
|
128
|
+
const existing = document.getElementById(id);
|
|
129
|
+
if (existing) {
|
|
130
|
+
existing.remove();
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
// Add new custom styles
|
|
134
|
+
const style = document.createElement('style');
|
|
135
|
+
style.id = id;
|
|
136
|
+
style.textContent = css;
|
|
137
|
+
document.head.appendChild(style);
|
|
138
|
+
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
export default StylesLoader;
|