Cursor at click for code blocks

src/editpage/components/EditWindow.vue

@@ -10,6 +10,7 @@
     <div ref="editPane"
         class="edit-pane"
         @click.self="onClick"
+        data-block-search-stop="yes"
         @paste="paste">
       <inter-block
           :key="'interblock-' + 0"
@@ -184,21 +185,30 @@ export default {
 
       return {beforeOrInExercise, inInputBlock};
     },
-    setFocusedElement: function(index, find = false) {
+    setFocusedElement: function(index, {find = false, cursorIndex = -1} = {}) {
       writeActivity('focusing-block', {
         tabIndex: this.tabIndex,
         file: this.notebookUri,
         blockIndex: index,
+        cursorIndex: cursorIndex,
         exerciseIndex: this.exerciseIndexForBlockIndex(index),
       });
       if (this.focusedElement === index) {
         // If we click again on the element that already has focus, it should
         // already have a CodeMirror open. So, we make sure to just focus on it
         if (this.$refs.codeMirrors && this.$refs.codeMirrors.length === 1) {
-          this.$refs.codeMirrors[0].codemirror.focus();
+          const cm = this.$refs.codeMirrors[0].codemirror;
+          if (!find && cursorIndex !== -1) {
+            cm.setCursor(cm.posFromIndex(cursorIndex));
+            this.cursorMove(cm);
+          }
+          cm.focus();
           return;
         }
       }
+      if (!find && cursorIndex !== -1) {
+        this.nextCursorPos = cursorIndex;
+      }
       this.selectedInterblock = -1;
       if (this.focusedElement !== -1) {
         const isAfterSource = index > this.focusedElement;

src/editpage/components/Find.vue

@@ -216,8 +216,7 @@ export default {
         }
         this.findPos = this.findList[this.findIndex].index;
       }
-      this.eventBus.$emit('set-focus', this.findPos, true);
-      // this.setFocusedElement(this.findPos, true);
+      this.eventBus.$emit('set-focus', this.findPos, {find: true});
     },
 
     replaceAll: function() {

src/editpage/components/blocks/WpBlock.vue

@@ -1,7 +1,76 @@
 <script>
-const md = require('markdown-it')();
 const mk = require('@iktakahiro/markdown-it-katex');
-md.use(mk);
+const md = require('markdown-it')()
+    .use(mk)
+    .use((md) => {
+      {
+        md.core.ruler.push('index-counter', function(state) {
+          try {
+            const content = state.src;
+
+            let currentIndex = -1;
+
+            const recurseTokens = (tokens) => {
+              if (tokens == null) {
+                return;
+              }
+
+              for (const token of tokens) {
+                let index = -1;
+                if (token == null) {
+                  continue;
+                }
+
+                const tokenContent =
+                    token.markup + token.content + token.markup;
+
+                if (tokenContent !== '') {
+                  index = content.indexOf(tokenContent, currentIndex);
+                  if (index >= 0) {
+                    token.attrSet('data-text-index', index);
+                    if (!token.children) {
+                      currentIndex = index + tokenContent.length - 1;
+                    }
+                  }
+                }
+
+                recurseTokens(token.children);
+              }
+            };
+
+            recurseTokens(state.tokens);
+          } catch (e) {
+            console.log('failed markdown with', e);
+          }
+        });
+      }
+
+      {
+        const replaceRenderer = (name, wrapped=false) => {
+          const original = md.renderer.rules[name];
+          md.renderer.rules[name] = function(tokens, idx, ...rest) {
+            const textIndex = tokens[idx].attrGet('data-text-index');
+            if (textIndex != null) {
+              if (wrapped) {
+                return `<span data-text-index="${textIndex}">` +
+                        original(tokens, idx, ...rest) +
+                        `</span>`;
+              } else {
+                return `<span data-text-index="${textIndex}"></span>`
+                    + original(tokens, idx, ...rest);
+              }
+            }
+            // eslint-disable-next-line prefer-rest-params
+            return original(tokens, idx, ...rest);
+          };
+        };
+
+        replaceRenderer('text');
+        replaceRenderer('math_inline', true);
+        replaceRenderer('math_block', true);
+      }
+    });
+
 const regExp = /<p>(.*)<\/p>/si;
 
 export default {
@@ -33,7 +102,57 @@ export default {
             this.eventBus.$emit('unfold', this.block);
           }
           if (this.block.type !== 'input') {
-            this.eventBus.$emit('set-focus', this.index);
+            let cursorIndex = -1;
+
+            const sel = window.getSelection();
+            if (!sel.isCollapsed) {
+              this.eventBus.$emit('set-focus', this.index, {cursorIndex});
+              return;
+            }
+
+            try {
+              let node = sel.focusNode;
+              const dataTextIndexAttribute = 'data-text-index';
+
+              if (node.nodeType === Node.TEXT_NODE) {
+                const parent = node.parentNode;
+                const sibling = node.previousElementSibling;
+
+                // Prefer parent element, then previous sibling
+                // and otherwise go up the tree.
+                if (parent.getAttribute(dataTextIndexAttribute) != null) {
+                  node = parent;
+                } else if (sibling != null && sibling.getAttribute(
+                    dataTextIndexAttribute) != null) {
+                  node = sibling;
+                } else {
+                  node = parent;
+                }
+              }
+
+              while (node != null
+                && node.getAttribute(dataTextIndexAttribute) == null) {
+                const parent = node.parentNode;
+                if (parent.getAttribute('data-block-search-stop') != null) {
+                  node = null;
+                  break;
+                }
+                node = parent;
+              }
+
+              if (node != null) {
+                const textIndex =
+                    node.getAttribute(dataTextIndexAttribute) || '';
+                const number = parseInt(textIndex);
+                if (textIndex !== '' && !Number.isNaN(number)) {
+                  cursorIndex = parseInt(textIndex) + sel.anchorOffset;
+                }
+              }
+            } catch (e) {
+              console.log('went wrong in text index look up', e);
+            }
+
+            this.eventBus.$emit('set-focus', this.index, {cursorIndex});
           }
         }
       }

src/editpage/components/blocks/code/CodeBlock.vue

@@ -13,6 +13,7 @@
                             @execTo="executeTo"/>
               <span v-else
                     :key="'code-' + index + '-part-' + index2"
+                    :data-text-index="part.textIndex"
                     :class="{'exec-inline-error': part.error}"
                     v-html="codeToHtml(part.text)">
               </span>
@@ -66,6 +67,7 @@ export default {
           parts.push({
             text: text.slice(index, newIndex),
             error: inError,
+            textIndex: index,
           });
         }
         index = newIndex;
@@ -91,6 +93,7 @@ export default {
           if (this.inline && index === text.length) {
             parts.push({
               text: ' ',
+              textIndex: index - 1,
             });
           }
         }
@@ -99,6 +102,7 @@ export default {
       if (index < text.length) {
         parts.push({
           text: text.slice(index),
+          textIndex: index,
         });
       }