fix: Separate solution logic from comments.js (#378)

* fix: Separate solution logic from comments.js * fix: View now looks for solution.js * fix: Optimizations, full split

Author: yammesicka

lms/static/comments.js

@@ -137,50 +137,6 @@ function pullComments(fileId, callback) {
  xhr.send('');
 }
 
-function updateOpenedSpans(currentSpans, line) {
- /* Because we have each line wrapped in it's own span, we must close
- * all the opened spans in this specific line and re-open them in the next
- * line. This function help us to manage the state of open span tags.
- */
- let isCatching = false;
- let phrase = '';
- for (let i = 0; i < line.length; i += 1) {
- const c = line[i];
- if (c === '>') {
- isCatching = false;
- phrase = `<${phrase}>`;
- if (phrase === '</span>') {
- currentSpans.pop();
- } else if (phrase.startsWith('<span')) {
- currentSpans.push(phrase);
- }
- phrase = '';
- } else if (c === '<') {
- isCatching = true;
- } else if (isCatching) {
- phrase += c;
- }
- }
-}
-
-function addLineSpansToPre(items) {
- const openSpans = [];
- Array.from(items).forEach((item) => {
- const code = item.innerHTML.trim().split('\n');
- const digits = code.length.toString().length;
- item.innerHTML = code.map(
- (line, i) => {
- let lineContent = openSpans.join('') + line;
- updateOpenedSpans(openSpans, line);
- lineContent += '</span>'.repeat(openSpans.length);
- const wrappedLine = `<div class="line-container" data-line="${i + 1}"><span class="line-number" style="width: ${digits}em">${i + 1}</span> <span data-line="${i + 1}" class="line">${lineContent}</span></div>`;
- return wrappedLine;
- },
- ).join('\n');
- });
- window.dispatchEvent(new Event('lines-numbered'));
-}
-
 class LineComment extends HTMLElement {
  static observedAttributes = [
  'data-line', 'avatar', 'name', 'date', 'editor', 'data-comment-id',
@@ -295,6 +251,5 @@ window.addEventListener('load', () => {
  sessionStorage.setItem('allowedComment', codeElementData.allowedComment);
  customElements.define('comment-line', LineComment);
  configureMarkdownParser();
- addLineSpansToPre(document.getElementsByTagName('code'));
  pullComments(window.fileId, treatComments);
 });

lms/static/solution.js

@@ -0,0 +1,37 @@
+function updateOpenedSpans(currentSpans, line) {
+ /* This function manages the state of open span tags by using regular expressions
+ * to find span tags and adjust the currentSpans array accordingly.
+ */
+ const spanRegex = /<span[^>]*>|<\/span>/g;
+ let match;
+
+ while ((match = spanRegex.exec(line)) !== null) {
+ if (match[0] === '</span>') {
+ currentSpans.pop();
+ } else {
+ currentSpans.push(match[0]);
+ }
+ }
+}
+
+function addLineSpansToPre(items) {
+ const openSpans = [];
+ Array.from(items).forEach((item) => {
+ const code = item.innerHTML.trim().split('\n');
+ const digits = code.length.toString().length;
+ item.innerHTML = code.map(
+ (line, i) => {
+ let lineContent = openSpans.join('') + line;
+ updateOpenedSpans(openSpans, line);
+ lineContent += '</span>'.repeat(openSpans.length);
+ const wrappedLine = `<div class="line-container" data-line="${i + 1}"><span class="line-number" style="width: ${digits}em">${i + 1}</span> <span data-line="${i + 1}" class="line">${lineContent}</span></div>`;
+ return wrappedLine;
+ },
+ ).join('\n');
+ });
+ window.dispatchEvent(new Event('lines-numbered'));
+}
+
+window.addEventListener('load', () => {
+ addLineSpansToPre(document.getElementsByTagName('code'));
+});

lms/templates/view.html

@@ -146,10 +146,11 @@ <h2>{{ _('Comments for this exercise') }}</h2>
  </div>
 </div>
 <script src="{{ url_for('static', filename='prism.js') }}"></script>
-<script src="{{ url_for('static', filename='purify.js') }}"></script>
-<script src="{{ url_for('static', filename='markdown.js') }}"></script>
+<script src="{{ url_for('static', filename='solution.js') }}"></script>
 {% if not shared_url %}
 {% include 'comment-template.html' %}
+<script src="{{ url_for('static', filename='purify.js') }}"></script>
+<script src="{{ url_for('static', filename='markdown.js') }}"></script>
 <script src="{{ url_for('static', filename='comments.js') }}"></script>
 {%- if is_manager or config.USERS_COMMENTS %}
 <script src="{{ url_for('static', filename='grader.js') }}"></script>