Skip to content

Commit 2a7291f

Browse files
committed
BK-2526 Update CodeMirror editor library to fix Arabic problem
1 parent 50558c0 commit 2a7291f

15 files changed

Lines changed: 12248 additions & 7476 deletions

File tree

lib/booktype/apps/core/static/vendor/codemirror-5.47.0/codemirror.js

Lines changed: 9755 additions & 0 deletions
Large diffs are not rendered by default.

lib/booktype/apps/edit/static/edit/css/codemirror.css renamed to lib/booktype/apps/core/static/vendor/codemirror-5.47.0/css/codemirror.css

Lines changed: 147 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,8 @@
44
/* Set height, width, borders, and global font properties here */
55
font-family: monospace;
66
height: 300px;
7-
}
8-
.CodeMirror-scroll {
9-
/* Set scrolling behaviour here */
10-
overflow: auto;
7+
color: black;
8+
direction: ltr;
119
}
1210

1311
/* PADDING */
@@ -36,65 +34,120 @@
3634
min-width: 20px;
3735
text-align: right;
3836
color: #999;
37+
white-space: nowrap;
3938
}
4039

40+
.CodeMirror-guttermarker { color: black; }
41+
.CodeMirror-guttermarker-subtle { color: #999; }
42+
4143
/* CURSOR */
4244

43-
.CodeMirror div.CodeMirror-cursor {
45+
.CodeMirror-cursor {
4446
border-left: 1px solid black;
45-
z-index: 3;
47+
border-right: none;
48+
width: 0;
4649
}
4750
/* Shown when moving in bi-directional text */
4851
.CodeMirror div.CodeMirror-secondarycursor {
4952
border-left: 1px solid silver;
5053
}
51-
.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
54+
.cm-fat-cursor .CodeMirror-cursor {
5255
width: auto;
53-
border: 0;
56+
border: 0 !important;
5457
background: #7e7;
58+
}
59+
.cm-fat-cursor div.CodeMirror-cursors {
5560
z-index: 1;
5661
}
62+
.cm-fat-cursor-mark {
63+
background-color: rgba(20, 255, 20, 0.5);
64+
-webkit-animation: blink 1.06s steps(1) infinite;
65+
-moz-animation: blink 1.06s steps(1) infinite;
66+
animation: blink 1.06s steps(1) infinite;
67+
}
68+
.cm-animate-fat-cursor {
69+
width: auto;
70+
border: 0;
71+
-webkit-animation: blink 1.06s steps(1) infinite;
72+
-moz-animation: blink 1.06s steps(1) infinite;
73+
animation: blink 1.06s steps(1) infinite;
74+
background-color: #7e7;
75+
}
76+
@-moz-keyframes blink {
77+
0% {}
78+
50% { background-color: transparent; }
79+
100% {}
80+
}
81+
@-webkit-keyframes blink {
82+
0% {}
83+
50% { background-color: transparent; }
84+
100% {}
85+
}
86+
@keyframes blink {
87+
0% {}
88+
50% { background-color: transparent; }
89+
100% {}
90+
}
91+
5792
/* Can style cursor different in overwrite (non-insert) mode */
58-
.CodeMirror div.CodeMirror-cursor.CodeMirror-overwrite {}
93+
.CodeMirror-overwrite .CodeMirror-cursor {}
5994

60-
.cm-tab { display: inline-block; }
95+
.cm-tab { display: inline-block; text-decoration: inherit; }
96+
97+
.CodeMirror-rulers {
98+
position: absolute;
99+
left: 0; right: 0; top: -50px; bottom: -20px;
100+
overflow: hidden;
101+
}
102+
.CodeMirror-ruler {
103+
border-left: 1px solid #ccc;
104+
top: 0; bottom: 0;
105+
position: absolute;
106+
}
61107

62108
/* DEFAULT THEME */
63109

110+
.cm-s-default .cm-header {color: blue;}
111+
.cm-s-default .cm-quote {color: #090;}
112+
.cm-negative {color: #d44;}
113+
.cm-positive {color: #292;}
114+
.cm-header, .cm-strong {font-weight: bold;}
115+
.cm-em {font-style: italic;}
116+
.cm-link {text-decoration: underline;}
117+
.cm-strikethrough {text-decoration: line-through;}
118+
64119
.cm-s-default .cm-keyword {color: #708;}
65120
.cm-s-default .cm-atom {color: #219;}
66121
.cm-s-default .cm-number {color: #164;}
67122
.cm-s-default .cm-def {color: #00f;}
68-
.cm-s-default .cm-variable {color: black;}
123+
.cm-s-default .cm-variable,
124+
.cm-s-default .cm-punctuation,
125+
.cm-s-default .cm-property,
126+
.cm-s-default .cm-operator {}
69127
.cm-s-default .cm-variable-2 {color: #05a;}
70-
.cm-s-default .cm-variable-3 {color: #085;}
71-
.cm-s-default .cm-property {color: black;}
72-
.cm-s-default .cm-operator {color: black;}
128+
.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
73129
.cm-s-default .cm-comment {color: #a50;}
74130
.cm-s-default .cm-string {color: #a11;}
75131
.cm-s-default .cm-string-2 {color: #f50;}
76132
.cm-s-default .cm-meta {color: #555;}
77-
.cm-s-default .cm-error {color: #f00;}
78133
.cm-s-default .cm-qualifier {color: #555;}
79134
.cm-s-default .cm-builtin {color: #30a;}
80135
.cm-s-default .cm-bracket {color: #997;}
81136
.cm-s-default .cm-tag {color: #170;}
82137
.cm-s-default .cm-attribute {color: #00c;}
83-
.cm-s-default .cm-header {color: blue;}
84-
.cm-s-default .cm-quote {color: #090;}
85138
.cm-s-default .cm-hr {color: #999;}
86139
.cm-s-default .cm-link {color: #00c;}
87140

88-
.cm-negative {color: #d44;}
89-
.cm-positive {color: #292;}
90-
.cm-header, .cm-strong {font-weight: bold;}
91-
.cm-em {font-style: italic;}
92-
.cm-link {text-decoration: underline;}
93-
141+
.cm-s-default .cm-error {color: #f00;}
94142
.cm-invalidchar {color: #f00;}
95143

96-
div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
97-
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
144+
.CodeMirror-composing { border-bottom: 2px solid; }
145+
146+
/* Default styles for common addons */
147+
148+
div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
149+
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
150+
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
98151
.CodeMirror-activeline-background {background: #e8f2ff;}
99152

100153
/* STOP */
@@ -103,28 +156,28 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
103156
the editor. You probably shouldn't touch them. */
104157

105158
.CodeMirror {
106-
line-height: 1;
107159
position: relative;
108160
overflow: hidden;
109161
background: white;
110-
color: black;
111162
}
112163

113164
.CodeMirror-scroll {
165+
overflow: scroll !important; /* Things will break if this is overridden */
114166
/* 30px is the magic margin used to hide the element's real scrollbars */
115167
/* See overflow: hidden in .CodeMirror */
116168
margin-bottom: -30px; margin-right: -30px;
117-
padding-bottom: 30px; padding-right: 30px;
169+
padding-bottom: 30px;
118170
height: 100%;
119171
outline: none; /* Prevent dragging from highlighting the element */
120172
position: relative;
121173
}
122174
.CodeMirror-sizer {
123175
position: relative;
176+
border-right: 30px solid transparent;
124177
}
125178

126179
/* The fake, visible scrollbars. Used to force redraw during scrolling
127-
before actuall scrolling happens, thus preventing shaking and
180+
before actual scrolling happens, thus preventing shaking and
128181
flickering artifacts. */
129182
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
130183
position: absolute;
@@ -150,27 +203,38 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
150203

151204
.CodeMirror-gutters {
152205
position: absolute; left: 0; top: 0;
153-
padding-bottom: 30px;
206+
min-height: 100%;
154207
z-index: 3;
155208
}
156209
.CodeMirror-gutter {
157210
white-space: normal;
158211
height: 100%;
159-
padding-bottom: 30px;
160-
margin-bottom: -32px;
161212
display: inline-block;
162-
/* Hack to make IE7 behave */
163-
*zoom:1;
164-
*display:inline;
213+
vertical-align: top;
214+
margin-bottom: -30px;
215+
}
216+
.CodeMirror-gutter-wrapper {
217+
position: absolute;
218+
z-index: 4;
219+
background: none !important;
220+
border: none !important;
221+
}
222+
.CodeMirror-gutter-background {
223+
position: absolute;
224+
top: 0; bottom: 0;
225+
z-index: 4;
165226
}
166227
.CodeMirror-gutter-elt {
167228
position: absolute;
168229
cursor: default;
169230
z-index: 4;
170231
}
232+
.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
233+
.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
171234

172235
.CodeMirror-lines {
173236
cursor: text;
237+
min-height: 1px; /* prevents collapsing before first draw */
174238
}
175239
.CodeMirror pre {
176240
/* Reset some styles that the rest of the page might have set */
@@ -187,22 +251,16 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
187251
z-index: 2;
188252
position: relative;
189253
overflow: visible;
254+
-webkit-tap-highlight-color: transparent;
255+
-webkit-font-variant-ligatures: contextual;
256+
font-variant-ligatures: contextual;
190257
}
191258
.CodeMirror-wrap pre {
192259
word-wrap: break-word;
193260
white-space: pre-wrap;
194261
word-break: normal;
195262
}
196-
.CodeMirror-code pre {
197-
border-right: 30px solid transparent;
198-
width: -webkit-fit-content;
199-
width: -moz-fit-content;
200-
width: fit-content;
201-
}
202-
.CodeMirror-wrap .CodeMirror-code pre {
203-
border-right: none;
204-
width: auto;
205-
}
263+
206264
.CodeMirror-linebackground {
207265
position: absolute;
208266
left: 0; right: 0; top: 0; bottom: 0;
@@ -212,48 +270,77 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
212270
.CodeMirror-linewidget {
213271
position: relative;
214272
z-index: 2;
215-
overflow: auto;
273+
padding: 0.1px; /* Force widget margins to stay inside of the container */
216274
}
217275

218-
.CodeMirror-widget {
276+
.CodeMirror-widget {}
277+
278+
.CodeMirror-rtl pre { direction: rtl; }
279+
280+
.CodeMirror-code {
281+
outline: none;
219282
}
220283

221-
.CodeMirror-wrap .CodeMirror-scroll {
222-
overflow-x: hidden;
284+
/* Force content-box sizing for the elements where we expect it */
285+
.CodeMirror-scroll,
286+
.CodeMirror-sizer,
287+
.CodeMirror-gutter,
288+
.CodeMirror-gutters,
289+
.CodeMirror-linenumber {
290+
-moz-box-sizing: content-box;
291+
box-sizing: content-box;
223292
}
224293

225294
.CodeMirror-measure {
226295
position: absolute;
227-
width: 100%; height: 0px;
296+
width: 100%;
297+
height: 0;
228298
overflow: hidden;
229299
visibility: hidden;
230300
}
231-
.CodeMirror-measure pre { position: static; }
232301

233-
.CodeMirror div.CodeMirror-cursor {
302+
.CodeMirror-cursor {
234303
position: absolute;
304+
pointer-events: none;
305+
}
306+
.CodeMirror-measure pre { position: static; }
307+
308+
div.CodeMirror-cursors {
235309
visibility: hidden;
236-
border-right: none;
237-
width: 0;
310+
position: relative;
311+
z-index: 3;
238312
}
239-
.CodeMirror-focused div.CodeMirror-cursor {
313+
div.CodeMirror-dragcursors {
314+
visibility: visible;
315+
}
316+
317+
.CodeMirror-focused div.CodeMirror-cursors {
240318
visibility: visible;
241319
}
242320

243321
.CodeMirror-selected { background: #d9d9d9; }
244322
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
323+
.CodeMirror-crosshair { cursor: crosshair; }
324+
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
325+
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
245326

246327
.cm-searching {
247-
background: #ffa;
248-
background: rgba(255, 255, 0, .4);
328+
background-color: #ffa;
329+
background-color: rgba(255, 255, 0, .4);
249330
}
250331

251-
/* IE7 hack to prevent it from returning funny offsetTops on the spans */
252-
.CodeMirror span { *vertical-align: text-bottom; }
332+
/* Used to force a border model for a node */
333+
.cm-force-border { padding-right: .1px; }
253334

254335
@media print {
255336
/* Hide the cursor when printing */
256-
.CodeMirror div.CodeMirror-cursor {
337+
.CodeMirror div.CodeMirror-cursors {
257338
visibility: hidden;
258339
}
259340
}
341+
342+
/* See issue #2901 */
343+
.cm-tab-wrap-hack:after { content: ''; }
344+
345+
/* Help users use markselection to safely style text background */
346+
span.CodeMirror-selectedtext { background: none; }

0 commit comments

Comments
 (0)