knowledge_graph/script_text_editor.js at master · servomouse/knowledge_graph · GitHub

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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
let editedNode = null;

const editor = pell.init({
	element: document.getElementById('pell-editor-id'),
	onChange: () => {},
	defaultParagraphSeparator: 'div',
	styleWithCSS: true,
	actions: [
		'bold',
		'italic',
		'underline',
		'strikethrough',
		'heading1',
		'heading2',
		'paragraph',
		'quote',
		'code',
		'link',
		'image'
	],
	classes: {
		actionbar: 'pell-actionbar',
		button: 'pell-button',
		content: 'pell-content',
		selected: 'pell-button-selected'
	}
});

// Fix to remove the initial empty paragraph
document.querySelector('.pell-content').addEventListener('input', function() {
	const content = this.innerHTML;
	if (content === '<p><br></p>') {
		this.innerHTML = '';
	}
});

// Set the editor content area to fit the container
editor.content.style.height = 'calc(100% - 40px)'; // Adjust for action bar height


// Function to load a document into the editor
function loadDocument(content) {
	editor.content.innerHTML = content;
}

// Function to get the current document content from the editor
function getDocumentContent() {
	return editor.content.innerHTML;
}

function pellCancel() {
	document.getElementById('pell-container').style.display = 'none';
	document.getElementById('overlay').classList.remove('visible');
}

function createNewNoteFunc() {
	const pellContainer = document.querySelector(".pell-container");
	const pellTitle = document.querySelector("#pell-title").value;
	const pellText = document.querySelector(".pell-content").innerHTML;
	const pellTags = document.querySelector("#pell-tags").value.split(', ');
	const timestamp = Math.floor(Date.now()/1000);
	if(editedNode) {
		graph[editedNode].html = pellText;
		graph[editedNode].title = pellTitle;
		graph[editedNode].tags = pellTags;
		graph[editedNode].last_open = timestamp;
		editedNode = null;
	} else {
		addElementToGraph({
			'id': timestamp,
			'last_open': timestamp,
			'html': pellText,
			'title': pellTitle,
			'tags': pellTags.map(element => element.trim()),
			'coords': {'x': Math.floor(Math.random() * 100) + 10, 'y': Math.floor(Math.random() * 100) + 10}
		}, `${timestamp}`);
	}
	drawGraph();
	console.log(`${pellTitle}`)
	console.log(`${pellText}`)
	console.log(`${pellTags}`)
	document.getElementById('pell-container').style.display = 'none';
	document.getElementById('overlay').classList.remove('visible');
	// if (!pellContainer.classList.contains('pell-hidden')) {
	// 	pellContainer.classList.add('pell-hidden');
	// }
	console.log("New note created!");
}

function addNewNoteFunc() {
	// const pellContainer = document.querySelector(".pell-container");
	editedNode = null;

	document.getElementById('pell-container').style.display = 'block'; // or 'flex' if you prefer
	document.getElementById('overlay').classList.add('visible');
	// if (pellContainer.classList.contains('pell-hidden')) {
	// 	pellContainer.classList.remove('pell-hidden');
	// }
	console.log("New note added!");
}

function editNoteFunc(nodeId) {
	// const pellContainer = document.querySelector(".pell-container");
	const node = graph[nodeId];
	editedNode = nodeId;
	document.querySelector("#pell-title").value = node.title;
	document.querySelector(".pell-content").innerHTML = node.html;
	document.querySelector("#pell-tags").value = node.tags.join(", ");

	document.getElementById('pell-container').style.display = 'block'; // or 'flex' if you prefer
	document.getElementById('overlay').classList.add('visible');
	// if (pellContainer.classList.contains('pell-hidden')) {
	// 	pellContainer.classList.remove('pell-hidden');
	// }
	console.log("New note added!");
}