forked from jupyterlab/jupyterlab
-
Notifications
You must be signed in to change notification settings - Fork 0
/
metadataEditorFields.tsx
100 lines (88 loc) · 2.99 KB
/
metadataEditorFields.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import React from 'react';
import { FieldProps } from '@rjsf/core';
import { INotebookTracker, NotebookTools } from '@jupyterlab/notebook';
import { ITranslator } from '@jupyterlab/translation';
import { CodeEditor } from '@jupyterlab/codeeditor';
import { ObservableJSON } from '@jupyterlab/observables';
import { JSONObject } from '@lumino/coreutils';
namespace Private {
/**
* Custom metadata field options.
*/
export interface IOptions {
/**
* The editor factory used by the tool.
*/
editorFactory: CodeEditor.Factory;
/**
* The tracker to the notebook panel.
*/
tracker: INotebookTracker;
/**
* The label of the JSON editor.
*/
label?: string;
/**
* Language translator.
*/
translator?: ITranslator;
}
}
/**
* The cell metadata field.
*
* ## Note
* This field does not work as other metadata form fields, as it does not use RJSF to update metadata.
* It extends the MetadataEditorTool which updates itself the metadata.
* It only renders the node of MetadataEditorTool in a React element instead of displaying a RJSF field.
*/
export class CustomCellMetadata extends NotebookTools.MetadataEditorTool {
constructor(options: Private.IOptions) {
super(options);
this._tracker = options.tracker;
this.editor.editorHostNode.addEventListener('blur', this.editor, true);
this.editor.editorHostNode.addEventListener('click', this.editor, true);
this.editor.headerNode.addEventListener('click', this.editor);
}
render(props: FieldProps): JSX.Element {
const cell = this._tracker.activeCell;
this.editor.source = cell
? new ObservableJSON({ values: cell.model.metadata as JSONObject })
: null;
return (
<div className="cell-metadata-editor">
<div ref={ref => ref?.appendChild(this.node)}></div>
</div>
);
}
private _tracker: INotebookTracker;
}
/**
* The notebook metadata field.
*
* ## Note
* This field does not work as other metadata form fields, as it does not use RJSF to update metadata.
* It extends the MetadataEditorTool which updates itself the metadata.
* It only renders the node of MetadataEditorTool in a React element instead of displaying a RJSF field.
*/
export class CustomNotebookMetadata extends NotebookTools.MetadataEditorTool {
constructor(options: Private.IOptions) {
super(options);
this._tracker = options.tracker;
this.editor.editorHostNode.addEventListener('blur', this.editor, true);
this.editor.editorHostNode.addEventListener('click', this.editor, true);
this.editor.headerNode.addEventListener('click', this.editor);
}
render(props: FieldProps): JSX.Element {
const notebook = this._tracker.currentWidget;
this.editor.source = notebook
? new ObservableJSON({ values: notebook.model?.metadata as JSONObject })
: null;
return (
<div className="cell-metadata-editor">
<div ref={ref => ref?.appendChild(this.node)}></div>
</div>
);
}
private _tracker: INotebookTracker;
}