@kerebron/editor 0.1.3 → 0.2.1
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/assets/base.css +100 -0
- package/assets/content.css +35 -0
- package/assets/gapcursor.css +32 -0
- package/assets/index.css +7 -0
- package/assets/mobile.css +33 -0
- package/assets/prosemirror.css +20 -0
- package/assets/vars.css +86 -0
- package/esm/CoreEditor.d.ts.map +1 -1
- package/esm/CoreEditor.js +3 -0
- package/package.json +1 -1
package/assets/base.css
ADDED
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
/* Base editor container */
|
|
2
|
+
.kb-component {
|
|
3
|
+
background: var(--kb-color-surface);
|
|
4
|
+
color: var(--kb-color-text);
|
|
5
|
+
background-clip: padding-box;
|
|
6
|
+
border-radius: var(--kb-radius-md);
|
|
7
|
+
border: 2px solid var(--kb-color-border);
|
|
8
|
+
padding: var(--kb-space-sm) 0;
|
|
9
|
+
margin-bottom: var(--kb-space-lg);
|
|
10
|
+
font-family:
|
|
11
|
+
-apple-system,
|
|
12
|
+
BlinkMacSystemFont,
|
|
13
|
+
'Segoe UI',
|
|
14
|
+
Roboto,
|
|
15
|
+
'Helvetica Neue',
|
|
16
|
+
Arial,
|
|
17
|
+
sans-serif;
|
|
18
|
+
line-height: 1.5;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* ProseMirror core styles */
|
|
22
|
+
.kb-editor {
|
|
23
|
+
position: relative;
|
|
24
|
+
word-wrap: break-word;
|
|
25
|
+
white-space: pre-wrap;
|
|
26
|
+
-webkit-font-variant-ligatures: none;
|
|
27
|
+
font-variant-ligatures: none;
|
|
28
|
+
padding: var(--kb-space-sm) var(--kb-space-md) var(--kb-space-sm)
|
|
29
|
+
var(--kb-space-lg);
|
|
30
|
+
outline: none;
|
|
31
|
+
font-size: var(--kb-text-base);
|
|
32
|
+
line-height: 1.6;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* Mobile optimization */
|
|
36
|
+
@media (max-width: 767px) {
|
|
37
|
+
.kb-editor {
|
|
38
|
+
padding: var(--kb-space-md);
|
|
39
|
+
font-size: var(--kb-text-base);
|
|
40
|
+
line-height: 1.7;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* Selection styles */
|
|
45
|
+
.kb-editor-hideselection *::selection {
|
|
46
|
+
background: transparent;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.kb-editor-hideselection *::-moz-selection {
|
|
50
|
+
background: transparent;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.kb-editor-hideselection {
|
|
54
|
+
caret-color: transparent;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
@keyframes kb-cursor-blink {
|
|
58
|
+
to {
|
|
59
|
+
visibility: hidden;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* Horizontal rule styling */
|
|
64
|
+
.kb-editor hr {
|
|
65
|
+
padding: var(--kb-space-sm) var(--kb-space-md);
|
|
66
|
+
border: none;
|
|
67
|
+
margin: 1em 0;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.kb-editor hr:after {
|
|
71
|
+
content: '';
|
|
72
|
+
display: block;
|
|
73
|
+
height: 1px;
|
|
74
|
+
background-color: var(--kb-color-border);
|
|
75
|
+
line-height: 2px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* Image styles */
|
|
79
|
+
.kb-editor img {
|
|
80
|
+
cursor: default;
|
|
81
|
+
max-width: 100%;
|
|
82
|
+
height: auto;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Focus states */
|
|
86
|
+
.kb-component:focus-within {
|
|
87
|
+
border-color: var(--kb-color-primary);
|
|
88
|
+
box-shadow: 0 0 0 3px var(--kb-color-focus);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* High contrast mode support */
|
|
92
|
+
@media (prefers-contrast: high) {
|
|
93
|
+
.kb-component {
|
|
94
|
+
border-width: 3px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.ProseMirror-selectednode {
|
|
98
|
+
outline-width: 3px;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/* Typography */
|
|
2
|
+
.kb-editor p {
|
|
3
|
+
margin-bottom: 1em;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.kb-editor p:first-child,
|
|
7
|
+
.kb-editor h1:first-child,
|
|
8
|
+
.kb-editor h2:first-child,
|
|
9
|
+
.kb-editor h3:first-child,
|
|
10
|
+
.kb-editor h4:first-child,
|
|
11
|
+
.kb-editor h5:first-child,
|
|
12
|
+
.kb-editor h6:first-child {
|
|
13
|
+
margin-top: var(--kb-space-md);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.kb-editor pre {
|
|
17
|
+
white-space: pre-wrap;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.kb-editor li {
|
|
21
|
+
position: relative;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.kb-editor ul,
|
|
25
|
+
.kb-editor ol {
|
|
26
|
+
padding-left: 30px;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.kb-editor blockquote {
|
|
30
|
+
padding-left: 1em;
|
|
31
|
+
border-left: 3px solid var(--kb-color-border);
|
|
32
|
+
margin-left: 0;
|
|
33
|
+
margin-right: 0;
|
|
34
|
+
color: var(--kb-color-text-muted);
|
|
35
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
.ProseMirror-gapcursor {
|
|
2
|
+
display: none;
|
|
3
|
+
pointer-events: none;
|
|
4
|
+
position: absolute;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.ProseMirror-gapcursor:after {
|
|
8
|
+
content: '';
|
|
9
|
+
display: block;
|
|
10
|
+
position: absolute;
|
|
11
|
+
top: -2px;
|
|
12
|
+
width: 20px;
|
|
13
|
+
border-top: 1px solid black;
|
|
14
|
+
animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@keyframes ProseMirror-cursor-blink {
|
|
18
|
+
to {
|
|
19
|
+
visibility: hidden;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.ProseMirror-focused .ProseMirror-gapcursor {
|
|
24
|
+
display: block;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* Accessibility: Reduced motion support */
|
|
28
|
+
@media (prefers-reduced-motion: reduce) {
|
|
29
|
+
.ProseMirror-gapcursor:after {
|
|
30
|
+
animation: none;
|
|
31
|
+
}
|
|
32
|
+
}
|
package/assets/index.css
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/* Mobile viewport handling */
|
|
2
|
+
@supports (-webkit-touch-callout: none) {
|
|
3
|
+
/* iOS Safari specific fixes */
|
|
4
|
+
.kb-component {
|
|
5
|
+
-webkit-text-size-adjust: 100%;
|
|
6
|
+
-webkit-font-smoothing: antialiased;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
/* Selection handles for mobile text selection */
|
|
11
|
+
@media (max-width: 767px) {
|
|
12
|
+
.kb-editor::selection {
|
|
13
|
+
background: rgba(var(--kb-color-primary-rgb), 0.3);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.kb-editor::-moz-selection {
|
|
17
|
+
background: rgba(var(--kb-color-primary-rgb), 0.3);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* Print styles */
|
|
22
|
+
@media print {
|
|
23
|
+
.kb-component {
|
|
24
|
+
border: none;
|
|
25
|
+
box-shadow: none;
|
|
26
|
+
margin: 0;
|
|
27
|
+
padding: 0;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.kb-editor {
|
|
31
|
+
padding: 0;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
.ProseMirror-selectednode {
|
|
2
|
+
outline: 2px solid var(--kb-color-primary);
|
|
3
|
+
outline-offset: 2px;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
/* List item selection styling */
|
|
7
|
+
li.ProseMirror-selectednode {
|
|
8
|
+
outline: none;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
li.ProseMirror-selectednode:after {
|
|
12
|
+
content: '';
|
|
13
|
+
position: absolute;
|
|
14
|
+
left: -32px;
|
|
15
|
+
right: -2px;
|
|
16
|
+
top: -2px;
|
|
17
|
+
bottom: -2px;
|
|
18
|
+
border: 2px solid var(--kb-color-primary);
|
|
19
|
+
pointer-events: none;
|
|
20
|
+
}
|
package/assets/vars.css
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* Spacing System */
|
|
3
|
+
--kb-space-xs: 0.25rem; /* 4px */
|
|
4
|
+
--kb-space-sm: 0.5rem; /* 8px */
|
|
5
|
+
--kb-space-md: 1rem; /* 16px */
|
|
6
|
+
--kb-space-lg: 1.5rem; /* 24px */
|
|
7
|
+
--kb-space-xl: 2rem; /* 32px */
|
|
8
|
+
|
|
9
|
+
/* Typography Scale */
|
|
10
|
+
--kb-text-xs: 0.75rem; /* 12px */
|
|
11
|
+
--kb-text-sm: 0.875rem; /* 14px */
|
|
12
|
+
--kb-text-base: 1rem; /* 16px */
|
|
13
|
+
--kb-text-lg: 1.125rem; /* 18px */
|
|
14
|
+
|
|
15
|
+
/* Touch Targets */
|
|
16
|
+
--kb-touch-target-min: 44px;
|
|
17
|
+
--kb-touch-target-comfortable: 48px;
|
|
18
|
+
|
|
19
|
+
/* Interactive States */
|
|
20
|
+
--kb-color-hover: rgba(59, 130, 246, 0.05);
|
|
21
|
+
--kb-color-active: rgba(59, 130, 246, 0.1);
|
|
22
|
+
--kb-color-focus: rgba(59, 130, 246, 0.2);
|
|
23
|
+
|
|
24
|
+
/* Layout & Borders */
|
|
25
|
+
--kb-radius-sm: 4px;
|
|
26
|
+
--kb-radius-md: 6px;
|
|
27
|
+
--kb-radius-lg: 8px;
|
|
28
|
+
--kb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
29
|
+
--kb-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
30
|
+
--kb-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
|
|
31
|
+
|
|
32
|
+
/* Z-index Scale */
|
|
33
|
+
--kb-z-dropdown: 100;
|
|
34
|
+
--kb-z-tooltip: 200;
|
|
35
|
+
--kb-z-modal: 300;
|
|
36
|
+
--kb-z-notification: 400;
|
|
37
|
+
|
|
38
|
+
/* Brand Colors (Customizable) */
|
|
39
|
+
--kb-color-primary: #3b82f6;
|
|
40
|
+
--kb-color-primary-hover: #2563eb;
|
|
41
|
+
--kb-color-primary-rgb: 59, 130, 246;
|
|
42
|
+
--kb-color-text: #1f2937;
|
|
43
|
+
--kb-color-text-muted: #6b7280;
|
|
44
|
+
--kb-color-surface: #ffffff;
|
|
45
|
+
--kb-color-surface-elevated: #f9fafb;
|
|
46
|
+
--kb-color-border: #e5e7eb;
|
|
47
|
+
--kb-color-border-strong: #d1d5db;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Dark mode support */
|
|
51
|
+
@media (prefers-color-scheme: dark) {
|
|
52
|
+
:root {
|
|
53
|
+
--kb-color-text: #f9fafb;
|
|
54
|
+
--kb-color-text-muted: #9ca3af;
|
|
55
|
+
--kb-color-surface: #1f2937;
|
|
56
|
+
--kb-color-surface-elevated: #374151;
|
|
57
|
+
--kb-color-border: #374151;
|
|
58
|
+
--kb-color-border-strong: #4b5563;
|
|
59
|
+
--kb-color-hover: rgba(59, 130, 246, 0.1);
|
|
60
|
+
--kb-color-active: rgba(59, 130, 246, 0.2);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* Theme variants */
|
|
65
|
+
.kb-component--brand-corporate {
|
|
66
|
+
--kb-color-primary: #1e40af;
|
|
67
|
+
--kb-color-primary-hover: #1e3a8a;
|
|
68
|
+
--kb-color-primary-rgb: 30, 64, 175;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.kb-component--brand-creative {
|
|
72
|
+
--kb-color-primary: #7c3aed;
|
|
73
|
+
--kb-color-primary-hover: #6d28d9;
|
|
74
|
+
--kb-color-primary-rgb: 124, 58, 237;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.kb-component--dark {
|
|
78
|
+
--kb-color-text: #f9fafb;
|
|
79
|
+
--kb-color-text-muted: #9ca3af;
|
|
80
|
+
--kb-color-surface: #1f2937;
|
|
81
|
+
--kb-color-surface-elevated: #374151;
|
|
82
|
+
--kb-color-border: #374151;
|
|
83
|
+
--kb-color-border-strong: #4b5563;
|
|
84
|
+
--kb-color-hover: rgba(59, 130, 246, 0.1);
|
|
85
|
+
--kb-color-active: rgba(59, 130, 246, 0.2);
|
|
86
|
+
}
|
package/esm/CoreEditor.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CoreEditor.d.ts","sourceRoot":"","sources":["../src/CoreEditor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,IAAI,IAAI,eAAe,EAAE,KAAK,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAGzE,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAkB,MAAM,8BAA8B,CAAC;AAgC/E,qBAAa,UAAW,SAAQ,WAAW;IACzC,SAAgB,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,CAG7C;IACF,OAAO,CAAC,gBAAgB,CAAmB;IAC3C,OAAO,CAAC,cAAc,CAAiB;IAChC,IAAI,EAAG,UAAU,CAAC;IAClB,KAAK,EAAG,WAAW,CAAC;gBAEf,OAAO,GAAE,OAAO,CAAC,aAAa,CAAM;IAyBhD,IAAW,MAAM,qBAEhB;IAEM,KAAK,IAAI,eAAe;IAIxB,GAAG,IAAI,eAAe;IAI7B,OAAO,CAAC,UAAU;
|
|
1
|
+
{"version":3,"file":"CoreEditor.d.ts","sourceRoot":"","sources":["../src/CoreEditor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,IAAI,IAAI,eAAe,EAAE,KAAK,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAGzE,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAkB,MAAM,8BAA8B,CAAC;AAgC/E,qBAAa,UAAW,SAAQ,WAAW;IACzC,SAAgB,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,CAG7C;IACF,OAAO,CAAC,gBAAgB,CAAmB;IAC3C,OAAO,CAAC,cAAc,CAAiB;IAChC,IAAI,EAAG,UAAU,CAAC;IAClB,KAAK,EAAG,WAAW,CAAC;gBAEf,OAAO,GAAE,OAAO,CAAC,aAAa,CAAM;IAyBhD,IAAW,MAAM,qBAEhB;IAEM,KAAK,IAAI,eAAe;IAIxB,GAAG,IAAI,eAAe;IAI7B,OAAO,CAAC,UAAU;IAgBX,mBAAmB,CAAC,WAAW,EAAE,WAAW;IAcnD,OAAO,CAAC,YAAY;IAcb,WAAW,CAAC,OAAO,CAAC,EAAE,GAAG,EAAE,SAAS,CAAC,EAAE,MAAM;IAwC7C,WAAW,CAAC,SAAS,CAAC,EAAE,MAAM;IAkB9B,OAAO,IAAI,WAAW;IAItB,KAAK,CAAC,OAAO,GAAE,OAAO,CAAC,aAAa,CAAM,GAAG,UAAU;IAOvD,KAAK,CAAC,GAAG,CAAC,EAAE,eAAe;CAMnC"}
|
package/esm/CoreEditor.js
CHANGED
|
@@ -99,6 +99,9 @@ export class CoreEditor extends EventTarget {
|
|
|
99
99
|
if (this.options.element) {
|
|
100
100
|
this.view = new EditorView(this.options.element, {
|
|
101
101
|
state: this.state,
|
|
102
|
+
attributes: {
|
|
103
|
+
class: 'kb-editor',
|
|
104
|
+
},
|
|
102
105
|
dispatchTransaction: (tx) => this.dispatchTransaction(tx),
|
|
103
106
|
});
|
|
104
107
|
}
|