Fix for accidental insertions of "[]()" into fields upon hitting Enter in various post fields + general cleanup

app/assets/javascripts/comments.js

@@ -380,7 +380,7 @@ $(() => {
       const id = $item.data('user-id');
       $tgt[0].selectionStart = caretPos - posInWord;
       $tgt[0].selectionEnd = caretPos - posInWord + currentWord.length;
-      QPixel.replaceSelection($tgt, `@#${id}`);
+      QPixel.MD.replaceSelection($tgt, `@#${id}`);
       popup.destroy();
       $tgt.focus();
     };

app/assets/javascripts/markdown.js

@@ -1,20 +1,4 @@
 $(() => {
-  const stringInsert = (str, idx, insert) => str.slice(0, idx) + insert + str.slice(idx);
-
-  const insertIntoField = ($field, start, end) => {
-    let value = $field.val();
-    value = stringInsert(value, $field[0].selectionStart, start);
-    if (end) {
-      value = stringInsert(value, $field[0].selectionEnd + start.length, end);
-    }
-    $field.val(value).trigger('markdown');
-  };
-
-  const replaceSelection = ($field, text) => {
-    const prev = $field.val();
-    $field.val(prev.substring(0, $field[0].selectionStart) + text + prev.substring($field[0].selectionEnd));
-  };
-
   $(document).on('click', '.js-markdown-tool', (ev) => {
     const $tgt = $(ev.target);
     const $button = $tgt.is('a') ? $tgt : $tgt.parents('a');
@@ -38,7 +22,7 @@ $(() => {
 
     if (Object.keys(actions).indexOf(action) !== -1) {
       const preSelection = [$field[0].selectionStart, $field[0].selectionEnd];
-      insertIntoField($field, actions[action][0], actions[action][1]);
+      QPixel.MD.insertIntoField($field, actions[action][0], actions[action][1]);
       $field.focus();
       $field[0].selectionStart = preSelection[0] + actions[action][0].length;
       $field[0].selectionEnd = preSelection[1] + actions[action][0].length;
@@ -99,10 +83,10 @@ $(() => {
     const $field = $('.js-post-field');
 
     if ($field[0].selectionStart != null && $field[0].selectionStart !== $field[0].selectionEnd) {
-      replaceSelection($field, markdown);
+      QPixel.MD.replaceSelection($field, markdown);
     }
     else {
-      insertIntoField($field, markdown);
+      QPixel.MD.insertIntoField($field, markdown);
     }
 
     $field.trigger('markdown');

app/assets/javascripts/posts.js

@@ -20,15 +20,6 @@ $(() => {
   /** @type {JQuery<HTMLFormElement>} */
   const $uploadForm = $('.js-upload-form');
 
-  /**
-   * Inserts text at a given {@link idx} in a given {@link str}
-   * @param {string} str text to insert into
-   * @param {number} idx position to insert at
-   * @param {string} insert text to insert
-   * @returns {string}
-   */
-  const stringInsert = (str, idx, insert) => str.slice(0, idx) + insert + str.slice(idx);
-
   const placeholder = '![Uploading, please wait...]()';
 
   $uploadForm.find('input[type="file"]').on('change', async (evt) => {
@@ -37,7 +28,7 @@ $(() => {
     const postText = postField.value;
     const cursorPos = postField.selectionStart;
 
-    postField.value = stringInsert(postText, cursorPos, placeholder);
+    postField.value = QPixel.MD.stringInsert(postText, cursorPos, placeholder);
 
     $uploadForm.trigger('submit');
   });

app/assets/javascripts/qpixel_api.js

@@ -98,11 +98,6 @@ window.QPixel = {
     }
   },
 
-  replaceSelection: ($field, text) => {
-    const prev = $field.val()?.toString();
-    $field.val(prev.substring(0, $field[0].selectionStart) + text + prev.substring($field[0].selectionEnd));
-  },
-
   /**
    * @type {QPixelFilter[]|null}
    */

app/assets/javascripts/qpixel_markdown.js

@@ -1,12 +1,33 @@
 window.QPixel = window.QPixel || {};
 
 QPixel.MD = {
+  insertIntoField: ($field, start, end) => {
+    let value = $field.val();
+
+    value = QPixel.MD.stringInsert(value, $field[0].selectionStart, start);
+
+    if (end) {
+      value = QPixel.MD.stringInsert(value, $field[0].selectionEnd + start.length, end);
+    }
+
+    $field.val(value).trigger('markdown');
+  },
+
+  replaceSelection: ($field, text) => {
+    const prev = $field.val()?.toString();
+    $field.val(prev.substring(0, $field[0].selectionStart) + text + prev.substring($field[0].selectionEnd));
+  },
+
+  stringInsert: (str, idx, insert) => {
+    return str.slice(0, idx) + insert + str.slice(idx);
+  },
+
   stripMarkdown: (content, options = {}) => {
     const stripped = content
       .replace(/(?:^#+ +|^-{3,}|^\[[^\]]+\]: ?.+$|^!\[[^\]]+\](?:\([^)]+\)|\[[^\]]+\])$|<[^>]+>)/g, '')
       .replace(/[*_~]+/g, '')
       .replace(/!?\[([^\]]+)\](?:\([^)]+\)|\[[^\]]+\])/g, '$1');
-    
+
     if (options.removeLeadingQuote ?? false) {
       return stripped.replace(/^>.+?$/g, '');
     }

app/assets/javascripts/search.js

@@ -27,7 +27,7 @@ $(() => {
       const id = $item.data('post-type-id');
       $tgt[0].selectionStart = caretPos - posInWord;
       $tgt[0].selectionEnd = (caretPos - posInWord) + currentWord.length;
-      QPixel.replaceSelection($tgt, `post_type:${id}`);
+      QPixel.MD.replaceSelection($tgt, `post_type:${id}`);
       popup.destroy();
       $tgt.focus();
     };

app/views/layouts/_sidebar.html.erb

@@ -1,10 +1,10 @@
-<div class="grid--cell is-4-lg is-12" role="complementary">
+<div class="grid--cell is-4-lg is-12 js-sidebar" role="complementary">
   <%= yield(:sidebar) %>
 
   <% notice_text = SiteSetting['SidebarNoticeText'] %>
   <% if notice_text.present? %>
     <% cache SiteSetting.find_by(name: 'SidebarNoticeText') do %>
-      <div class="widget has-margin-4 is-yellow">
+      <div class="widget has-margin-4 is-yellow js-sidebar-notice">
         <div class="widget--body">
           <%= raw(sanitize(render_markdown(notice_text), scrubber: scrubber)) %>
         </div>

app/views/shared/_markdown_tools.html.erb

@@ -16,7 +16,7 @@
         <input type="text" id="markdown-link-url" class="form-element" />
       </div>
 
-      <button type="submit" class="js-markdown-insert-link button is-filled">Insert</button>
+      <button type="button" class="js-markdown-insert-link button is-filled">Insert</button>
     </div>
   </div>
 </div>

global.d.ts

@@ -62,7 +62,7 @@ interface QPixelDOM {
    * Checks common modifier states on a given keyboard event
    * @param event 
    */
-  getModifierState: (event: KeyboardEvent | MouseEvent | JQuery.KeyboardEventBase) => boolean;
+  getModifierState?: (event: KeyboardEvent | MouseEvent | JQuery.KeyboardEventBase) => boolean;
   /**
    * Is a given event target an HTMLElement?
    * @param target event target to check
@@ -91,10 +91,30 @@ interface StripMarkdownOptions {
 }
 
 interface QPixelMD {
+  /**
+   * Inserts text around a given {@link $field}'s selection
+   * @param $field field to insert text into
+   * @param start text to insert at selection start
+   * @param end text to insert at selection end, if any
+   */
+  insertIntoField?: ($field: JQuery<HTMLInputElement | HTMLTextAreaElement>, start: string, end?: string | null) => void;
+  /**
+   * Replace the selected text in an input field with a provided replacement.
+   * @param $field the field in which to replace text
+   * @param text the text with which to replace the selection
+   */
+  replaceSelection?: ($field: JQuery<HTMLInputElement | HTMLTextAreaElement>, text: string) => void;
+   /**
+    * Inserts text at a given {@link idx} in a given {@link str}
+    * @param str text to insert into
+    * @param idx position to insert at
+    * @param insert text to insert
+    */
+  stringInsert?: (str: string, idx: number, insert: string) => string;
   /**
    * See [strip_markdown](app/helpers/application_helper.rb) application helper
    */
-  stripMarkdown(content: string, options?: StripMarkdownOptions): string;
+  stripMarkdown?: (content: string, options?: StripMarkdownOptions) => string;
 }
 
 interface QPixelStorageGetOptions {
@@ -468,12 +488,6 @@ interface QPixel {
    */
   preference?: (name: string, community?: boolean) => Promise<string>;
 
-  /**
-   * Replace the selected text in an input field with a provided replacement.
-   * @param $field the field in which to replace text
-   * @param text the text with which to replace the selection
-   */
-  replaceSelection?: ($field: JQuery<HTMLInputElement | HTMLTextAreaElement>, text: string) => void;
   setFilter?: (name: string, filter: QPixelFilter, category: string, isDefault: boolean) => Promise<void>;
 
   /**
@@ -688,6 +702,22 @@ declare var hljs: any;
 declare var MathJax: any;
 // DOMPurify lib, TODO: types
 declare var DOMPurify: any;
+// Sefaria Linker (no known types), see https://developers.sefaria.org/docs/linker-v2
+declare var sefaria: {
+  link: (options?: {
+    contentLang?: 'bilingual' | 'english' | 'hebrew',
+    dynamic?: boolean,
+    excludeFromLinking?: string,
+    excludeFromTracking?: string,
+    hidePopupsOnMobile?: boolean,
+    interfaceLang?: 'english' | 'hebrew',
+    mode?: 'link' | 'popup-click',
+    parenthesesOnly?: boolean,
+    popupStyles?: Record<string, string>,
+    selector?: string,
+    quotationOnly?: boolean
+  }) => void
+} | undefined;
 declare var QPixel: QPixel;
 
 declare var getCaretCoordinates: (