Skip to content

Commit 1d1a15f

Browse files
Taylor-96Taylor-96
committed
Applied Alex's patch to widget.js
1 parent 180353d commit 1d1a15f

File tree

1 file changed

+217
-19
lines changed

1 file changed

+217
-19
lines changed

‎js/widget.js‎

Lines changed: 217 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,21 @@ export default{
3434
render({model,el}) {
3535

3636
var unique_funcbody_id = generateRandomString(6)
37+
38+
var docstring_present = 0;
3739

3840

3941
model.attributes={function_body_id:unique_funcbody_id}
40-
42+
const theTextareaId = model.attributes['function_body_id'];
43+
const docstringId = theTextareaId + '-docstring';
44+
let docstringTextArea = null; // Define it at a higher scope
45+
46+
47+
48+
// print the value of docstring to the console
49+
console.log("docstring = %s",model.get('docstring'));
50+
51+
4152
// Note: I think this inadvertanly changes the code cells inside the entire notebook
4253
const cssStyles =
4354
'<style>\
@@ -50,11 +61,18 @@ export default{
5061

5162

5263

53-
const theTextareaId = model.attributes['function_body_id'];
64+
65+
5466
console.log("theTextareaId = %s",theTextareaId);
5567
let textArea = document.createElement("textArea");
5668
el.appendChild(textArea)
57-
69+
70+
71+
72+
73+
// if docstring is not empty, create outer html with docstring
74+
if (model.get('docstring') !== '') {
75+
docstring_present = 1;
5876
textArea.outerHTML = cssStyles +
5977
'<textarea id="' +
6078
theTextareaId +
@@ -64,8 +82,35 @@ export default{
6482
'-docstring" class="CodeMirror.widget-code-input-docstring"></textarea>' +
6583
'<textarea id="' +
6684
theTextareaId +
67-
'-body" class="CodeMirror.widget-code-input-body"></textarea>';
85+
'-body" class="CodeMirror.widget-code-input-body"></textarea>';
6886

87+
// const docstringId = theTextareaId + '-docstring';
88+
89+
} else {
90+
// if docstring is empty, create outer html without docstring
91+
textArea.outerHTML = cssStyles +
92+
'<textarea id="' +
93+
theTextareaId +
94+
'-signature" class="CodeMirror.widget-code-input-signature"></textarea>' +
95+
'<textarea id="' +
96+
theTextareaId +
97+
'-body" class="CodeMirror.widget-code-input-body"></textarea>';
98+
}
99+
100+
101+
102+
docstringTextArea = document.getElementById(docstringId);
103+
console.log("docstringTextArea = %s",docstringTextArea);
104+
// textArea.outerHTML = cssStyles +
105+
// '<textarea id="' +
106+
// theTextareaId +
107+
// '-signature" class="CodeMirror.widget-code-input-signature"></textarea>' +
108+
// '<textarea id="' +
109+
// theTextareaId +
110+
// '-docstring" class="CodeMirror.widget-code-input-docstring"></textarea>' +
111+
// '<textarea id="' +
112+
// theTextareaId +
113+
// '-body" class="CodeMirror.widget-code-input-body"></textarea>';
69114

70115
function editorFromTextArea(textarea, extensions) {
71116
let view = new EditorView({state: EditorState.create({doc: textarea.value, extensions})})
@@ -85,7 +130,7 @@ export default{
85130
var theme_compartment_sig = new Compartment;
86131
var theme_compartment_doc = new Compartment;
87132
var theme_compartment_body = new Compartment;
88-
133+
var myDocstringCodeMirror;
89134

90135
const mySignatureCodeMirror = editorFromTextArea(document.getElementById(theTextareaId + '-signature'), [EditorState.readOnly.of(true),lineNumbers(),indentUnit.of(" ")
91136
,
@@ -115,8 +160,11 @@ export default{
115160
);
116161

117162
mySignatureCodeMirror.dom.classList.add("widget-code-input-signature")
118-
119-
var myDocstringCodeMirror = editorFromTextArea(document.getElementById(theTextareaId + '-docstring'), [lineNumbers(), EditorState.readOnly.of(true), EditorView.editorAttributes.of({class:"widget-code-input-docstring"}), gutter({class:"forced-indent"}), guttercomp.of(lineNumbers()),
163+
164+
165+
if (model.get('docstring') !== '') {
166+
167+
myDocstringCodeMirror = editorFromTextArea(document.getElementById(theTextareaId + '-docstring'), [lineNumbers(), EditorState.readOnly.of(true), EditorView.editorAttributes.of({class:"widget-code-input-docstring"}), gutter({class:"forced-indent"}), guttercomp.of(lineNumbers()),
120168

121169
history(),
122170
drawSelection(),
@@ -137,6 +185,15 @@ export default{
137185
...completionKeymap,
138186
...lintKeymap,
139187
]), python(), indentUnit.of(" "), theme_compartment_doc.of(basicLight)]);
188+
}
189+
190+
// if (model.get('docstring') !== '') {
191+
// console.log("docstring is not empty")
192+
// document.getElementById(theTextareaId + '-docstring').style.display = "block";
193+
// } else {
194+
// console.log("docstring is empty")
195+
// document.getElementById(theTextareaId + '-docstring').style.display = "none";
196+
// }
140197

141198

142199
mySignatureCodeMirror.dom.classList.add("widget-code-input-signature"); // add css for border to docstring element
@@ -175,7 +232,7 @@ export default{
175232

176233
model.set("function_body",myBodyCodeMirror.state.doc.toString());
177234
model.save_changes();
178-
console.log("BodyChange event registered.");
235+
console.log("BodyChange event registered!");
179236
}
180237
});
181238

@@ -205,34 +262,171 @@ function signatureValueChanged() {
205262

206263
function updateLineNumbers() {
207264
const linesSignature = mySignatureCodeMirror.state.doc.toString().split('\n').length;
208-
const linesDocstring = myDocstringCodeMirror.state.doc.toString().split('\n').length;
265+
var docstring = '';
266+
var linesDocstring = 0;
267+
console.log("update line numbers. docstring_present = %s",docstring_present);
268+
console.log("myDocstringcodemirror = %s",myDocstringCodeMirror);
269+
if (model.get('docstring') !== '' && myDocstringCodeMirror) {
270+
docstring = myDocstringCodeMirror.state.doc.toString();
271+
linesDocstring = docstring.split('\n').length;
272+
209273

274+
console.log("dispatch docstring linum update.");
275+
// increment line numbers in docstring text area by the number of lines in the signature
210276

211-
// increment line numbers in docstring text area by the number of lines in the signature
212277
myDocstringCodeMirror.dispatch({
213-
effects: guttercomp.reconfigure(
214-
lineNumbers({ formatNumber: n=>linesSignature+n }))
278+
effects: guttercomp.reconfigure(
279+
lineNumbers({ formatNumber: n=> linesDocstring == 0 ? "" : linesSignature+n}))
215280
});
216-
281+
}
282+
console.log("linesSignature = %s",linesSignature);
283+
console.log("linesDocstring = %s",linesDocstring);
217284
myBodyCodeMirror.dispatch({
218-
effects: guttercomp.reconfigure(
219-
lineNumbers({ formatNumber: n=>linesSignature+linesDocstring+n}))
285+
effects: guttercomp.reconfigure(
286+
lineNumbers({ formatNumber: n=>linesSignature+linesDocstring+n}))
220287
});
221288

222289
}
290+
291+
223292
function docstringValueChanged() {
224293
console.log("updating docstring");
225294
// Set the value from python into the CodeMirror widget in the
226295
// frontend.
227296

228-
const newDocstring = '"""' + model.get('docstring') + '"""';
297+
const newDocstring = model.get('docstring');
298+
const docstringElement = document.getElementById(theTextareaId + '-docstring');
299+
300+
console.log("docstring_present = %s",docstring_present);
301+
// if user has changed the docstring from empty to non-empty, add the
302+
303+
docstringTextArea = document.getElementById(docstringId);
304+
305+
console.log("docstring is present");
306+
console.log("newDocstring = %s",newDocstring);
307+
if (newDocstring == '') {
308+
console.log("New docstring is None");
309+
docstring_present == 0;
310+
if(docstringTextArea){
311+
console.log("docstringTextareaId = %s",docstringId);
312+
313+
// docstringTextArea.remove(); // remove docstring text area
314+
myDocstringCodeMirror.destroy();
315+
console.log("destroyed docstring");
316+
if (docstringElement && docstringElement.parentNode) {
317+
console.log("removing docstring element");
318+
docstringElement.parentNode.removeChild(docstringElement);
319+
console.log("removed docstring element");
320+
}
321+
322+
// Clear the reference
323+
myDocstringCodeMirror = null;
324+
console.log("cleared docstring");
325+
docstringTextArea = null;
326+
console.log("cleared docstring textarea");
327+
328+
}
329+
330+
} else if (docstringTextArea==null) { //
331+
// add back docstring text area
332+
// Find the sibling element (body) and insert the new docstring before it
333+
334+
const signatureTextArea = document.getElementById(`${theTextareaId}-signature`);
335+
336+
if (signatureTextArea) {
337+
// Create the new docstring textarea
338+
const docstringTextArea = document.createElement('textarea');
339+
docstringTextArea.id = `${theTextareaId}-docstring`;
340+
docstringTextArea.classList.add('widget-code-input-docstring');
341+
signatureTextArea.insertAdjacentElement('beforebegin', docstringTextArea);
342+
343+
// apply old theme
344+
var theme;
345+
var theme_string = model.get("code_theme")
346+
347+
var themeMap = {
348+
"nord": nord,
349+
"solarizedLight": solarizedLight,
350+
"basicLight": basicLight
351+
};
352+
353+
if (theme_string in themeMap){
354+
theme=themeMap[theme_string];
355+
} else {
356+
throw new Error("Specified code theme is not supported.");
357+
}
358+
229359

230-
if (newDocstring !== myDocstringCodeMirror.state.doc.toString()) {
360+
// Initialize CodeMirror for the new textarea
361+
myDocstringCodeMirror = editorFromTextArea(docstringTextArea, [
362+
lineNumbers(),
363+
EditorState.readOnly.of(true),
364+
EditorView.editorAttributes.of({ class: 'widget-code-input-docstring' }),
365+
gutter({ class: 'forced-indent' }),guttercomp.of(lineNumbers()),
366+
syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
367+
python(),
368+
indentUnit.of(' '),
369+
theme_compartment_doc.of(theme),
370+
]);
371+
372+
// Set the initial value for the new editor
373+
myDocstringCodeMirror.dispatch({
374+
changes: { from: 0, to: myDocstringCodeMirror.state.doc.length, insert: newDocstring },
375+
});
376+
377+
docstring_present = 1;
378+
}
379+
380+
// docstring_present = 1;
381+
// textArea.outerHTML = cssStyles +
382+
// '<textarea id="' +
383+
// theTextareaId +
384+
// '-signature" class="CodeMirror.widget-code-input-signature"></textarea>' +
385+
// '<textarea id="' +
386+
// theTextareaId +
387+
// '-docstring" class="CodeMirror.widget-code-input-docstring"></textarea>' +
388+
// '<textarea id="' +
389+
// theTextareaId +
390+
// '-body" class="CodeMirror.widget-code-input-body"></textarea>';
391+
392+
393+
// myDocstringCodeMirror = editorFromTextArea(document.getElementById(theTextareaId + '-docstring'), [lineNumbers(), EditorState.readOnly.of(true), EditorView.editorAttributes.of({class:"widget-code-input-docstring"}), gutter({class:"forced-indent"}), guttercomp.of(lineNumbers()),
394+
395+
// history(),
396+
// drawSelection(),
397+
// dropCursor(),
398+
// EditorState.allowMultipleSelections.of(true),
399+
// syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
400+
// bracketMatching(),
401+
// closeBrackets(),
402+
// autocompletion(),
403+
// rectangularSelection(),
404+
// crosshairCursor(),
405+
// keymap.of([
406+
// ...closeBracketsKeymap,
407+
// ...defaultKeymap,
408+
// ...searchKeymap,
409+
// ...historyKeymap,
410+
// ...foldKeymap,
411+
// ...completionKeymap,
412+
// ...lintKeymap,
413+
// ]), python(), indentUnit.of(" "), theme_compartment_doc.of(basicLight)]);
414+
// }
415+
416+
417+
} else {
418+
419+
// if (newDocstring !== myDocstringCodeMirror.state.doc.toString()) {
420+
console.log("dispatch docstring update");
231421
myDocstringCodeMirror.dispatch({
232422
changes: {from: 0, to: myDocstringCodeMirror.state.doc.length, insert: newDocstring}
233423
})
234-
}
235-
updateLineNumbers();
424+
// }
425+
// Add docstring now
426+
// const docstringId = theTextareaId + '-docstring';
427+
// let docstringTextArea = document.getElementById(docstringId);
428+
}
429+
updateLineNumbers();
236430
}
237431

238432
function bodyValueChanged() {
@@ -269,9 +463,11 @@ function bodyValueChanged() {
269463
mySignatureCodeMirror.dispatch({
270464
effects: theme_compartment_sig.reconfigure(theme)
271465
})
466+
if (model.get('docstring') !== '') {
272467
myDocstringCodeMirror.dispatch({
273468
effects: theme_compartment_doc.reconfigure(theme)
274469
})
470+
}
275471
myBodyCodeMirror.dispatch({
276472
effects: theme_compartment_body.reconfigure(theme)
277473
})
@@ -282,7 +478,9 @@ function bodyValueChanged() {
282478

283479

284480
signatureValueChanged();
481+
285482
docstringValueChanged();
483+
286484
bodyValueChanged();
287485
themeChanged();
288486

0 commit comments

Comments
 (0)