Merge branch 'main' into markdown

.pre-commit-config.yaml

@@ -39,7 +39,7 @@ repos:
             '--remove-duplicate-keys',
           ]
   - repo: https://github.com/asottile/pyupgrade
-    rev: v3.3.0
+    rev: v3.3.1
     hooks:
       - id: pyupgrade
         args:
@@ -72,7 +72,7 @@ repos:
         additional_dependencies:
           - toml
   - repo: https://github.com/psf/black
-    rev: 22.10.0
+    rev: 22.12.0
     hooks:
       - id: black
   - repo: https://github.com/pre-commit/mirrors-mypy

devserver.py

@@ -32,6 +32,7 @@
         use_debugger=debug_mode,
         use_evalex=debug_mode,
         threaded=True,
+        extra_files=['funnel/static/build/manifest.json'],
     )
 
     if background_rq:

funnel/__init__.py

@@ -207,21 +207,6 @@
         filters='uglipyjs',
     ),
 )
-app.assets.register(
-    'js_codemirrormarkdown',
-    Bundle(
-        assets.require('codemirror-markdown.js'),
-        output='js/codemirror-markdown.packed.js',
-    ),
-)
-app.assets.register(
-    'css_codemirrormarkdown',
-    Bundle(
-        assets.require('codemirror-markdown-material.css'),
-        output='css/codemirror-markdown.packed.css',
-        filters='cssmin',
-    ),
-)
 
 # --- Serve static files with Whitenoise -----------------------------------------------
 

funnel/assets/js/comments.js

@@ -1,6 +1,7 @@
 import Vue from 'vue/dist/vue.min';
 import ScrollHelper from './utils/scrollhelper';
 import Form from './utils/formhelper';
+import codemirrorHelper from './utils/codemirror';
 import getTimeago from './utils/getTimeago';
 import { userAvatarUI, faSvg, shareDropdown } from './utils/vue_util';
 
@@ -171,24 +172,20 @@ const Comments = {
         },
         activateForm(action, textareaId, parentApp = app) {
           if (textareaId) {
+            const copyTextAreaContent = function (view) {
+              if (action === parentApp.COMMENTACTIONS.REPLY) {
+                parentApp.reply = view.state.doc.toString();
+              } else {
+                parentApp.textarea = view.state.doc.toString();
+              }
+            };
             this.$nextTick(() => {
-              const editor = window.CodeMirror.fromTextArea(
-                document.getElementById(textareaId),
-                window.Hasgeek.Config.cm_markdown_config
+              const editorView = codemirrorHelper(
+                textareaId,
+                copyTextAreaContent,
+                window.Hasgeek.Config.saveEditorContentTimeout
               );
-              let delay;
-              editor.on('change', () => {
-                clearTimeout(delay);
-                delay = setTimeout(() => {
-                  editor.save();
-                  if (action === parentApp.COMMENTACTIONS.REPLY) {
-                    parentApp.reply = editor.getValue();
-                  } else {
-                    parentApp.textarea = editor.getValue();
-                  }
-                }, window.Hasgeek.Config.saveEditorContentTimeout);
-              });
-              editor.focus();
+              editorView.focus();
             });
           }
           this.pauseRefreshComments();
@@ -343,12 +340,6 @@ const Comments = {
 
 $(() => {
   window.Hasgeek.Comments = function initComments(config) {
-    $.ajax({
-      url: config.codemirrorUrl,
-      dataType: 'script',
-      cache: true,
-    }).done(() => {
-      Comments.init(config);
-    });
+    Comments.init(config);
   };
 });

funnel/assets/js/form.js

@@ -1,5 +1,6 @@
 import 'htmx.org';
 import Form from './utils/formhelper';
+import codemirrorHelper from './utils/codemirror';
 
 window.Hasgeek.form = ({ autosave, formId, msgElemId }) => {
   let lastSavedData = $(formId).find('[type!="hidden"]').serialize();
@@ -80,4 +81,9 @@ window.Hasgeek.form = ({ autosave, formId, msgElemId }) => {
       typingTimer = setTimeout(enableAutoSave, typingWaitInterval);
     });
   }
+
+  $('textarea.markdown:not([style*="display: none"]').each(function enableCodemirror() {
+    const markdownId = $(this).attr('id');
+    codemirrorHelper(markdownId);
+  });
 };

funnel/assets/js/submission_form.js

@@ -1,9 +1,4 @@
-import { EditorView, placeholder, keymap } from '@codemirror/view';
-import { markdown, markdownLanguage, markdownKeymap } from '@codemirror/lang-markdown';
-import { html } from '@codemirror/lang-html';
-import { closeBrackets } from '@codemirror/autocomplete';
-import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
-import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import codemirrorHelper from './utils/codemirror';
 import initEmbed from './utils/initembed';
 import Form from './utils/formhelper';
 import SortItem from './utils/sort';
@@ -14,9 +9,6 @@ $(() => {
     formId,
     markdownPreviewElem
   ) {
-    let textareaWaitTimer;
-    const debounceInterval = 1000;
-
     function updateCollaboratorsList(responseData, updateModal = true) {
       if (updateModal) $.modal.close();
       if (responseData.message) window.toastr.success(responseData.message);
@@ -131,31 +123,11 @@ $(() => {
       }
     });
 
-    // Move this functionality to formhelper.js during to full migration to codemirror 6
     const markdownId = $(`#${formId}`).find('textarea.markdown').attr('id');
-    const extensions = [
-      EditorView.lineWrapping,
-      placeholder('Content'),
-      closeBrackets(),
-      history(),
-      syntaxHighlighting(defaultHighlightStyle),
-      keymap.of([defaultKeymap, markdownKeymap, historyKeymap]),
-      markdown({ base: markdownLanguage }),
-      html(),
-    ];
-    const view = new EditorView({
-      doc: $(`#${markdownId}`).val(),
-      extensions,
-      dispatch: (tr) => {
-        view.update([tr]);
-        $(`#${markdownId}`).val(view.state.doc.toString());
-        if (textareaWaitTimer) clearTimeout(textareaWaitTimer);
-        textareaWaitTimer = setTimeout(() => {
-          updatePreview(view);
-        }, debounceInterval);
-      },
-    });
-    document.querySelector(`#${markdownId}`).parentNode.append(view.dom);
+    if ($(`#${markdownId}`).next().hasClass('cm-editor')) {
+      $(`#${markdownId}`).next().remove();
+    }
+    codemirrorHelper(markdownId, updatePreview);
 
     $('#title')
       .keypress((event) => {

funnel/assets/js/utils/codemirror.js

@@ -0,0 +1,61 @@
+import { EditorView, keymap } from '@codemirror/view';
+import { markdown, markdownLanguage, markdownKeymap } from '@codemirror/lang-markdown';
+import { html } from '@codemirror/lang-html';
+import { closeBrackets } from '@codemirror/autocomplete';
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+import {
+  syntaxHighlighting,
+  defaultHighlightStyle,
+  HighlightStyle,
+  foldGutter,
+} from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+
+function codemirrorHelper(markdownId, updateFnCallback = '', callbackInterval = 1000) {
+  let textareaWaitTimer;
+
+  const markdownHighlighting = HighlightStyle.define([
+    { tag: tags.heading1, fontWeight: 'bold', class: 'cm-heading1' },
+    { tag: tags.heading2, fontWeight: 'bold', class: 'cm-heading2' },
+    { tag: tags.heading3, fontWeight: 'bold', class: 'cm-heading3' },
+    { tag: tags.heading4, fontWeight: 'bold', class: 'cm-heading4' },
+    { tag: tags.heading5, fontWeight: 'bold', class: 'cm-heading5' },
+    { tag: tags.list, class: 'cm-list' },
+    { tag: tags.link, class: 'cm-link' },
+    { tag: tags.monospace, class: 'cm-code' },
+    { tag: tags.emphasis, fontWeight: 'bold', class: 'cm-emphasis' },
+    { tag: tags.strong, fontWeight: 'bold', class: 'cm-strong' },
+    { tag: tags.strikethrough, class: 'cm-strikethrough' },
+  ]);
+
+  const extensions = [
+    EditorView.lineWrapping,
+    closeBrackets(),
+    history(),
+    foldGutter(),
+    syntaxHighlighting(markdownHighlighting),
+    syntaxHighlighting(defaultHighlightStyle),
+    keymap.of([defaultKeymap, markdownKeymap, historyKeymap]),
+    markdown({ base: markdownLanguage }),
+    html(),
+  ];
+
+  const view = new EditorView({
+    doc: $(`#${markdownId}`).val(),
+    extensions,
+    dispatch: (tr) => {
+      view.update([tr]);
+      $(`#${markdownId}`).val(view.state.doc.toString());
+      if (updateFnCallback) {
+        if (textareaWaitTimer) clearTimeout(textareaWaitTimer);
+        textareaWaitTimer = setTimeout(() => {
+          updateFnCallback(view);
+        }, callbackInterval);
+      }
+    },
+  });
+  document.querySelector(`#${markdownId}`).parentNode.append(view.dom);
+  return view;
+}
+
+export default codemirrorHelper;

funnel/assets/js/utils/typeform_embed.js

@@ -16,10 +16,11 @@ const TypeformEmbed = {
     }
     return false;
   },
-  addTypeformEmbed(typeformId, parentElem, loadScript) {
-    if (!$(parentElem).find(`#typeform-${typeformId}`).length) {
+  addTypeformEmbed(typeformId, anchorTag, parentDiv, loadScript) {
+    if (!$(parentDiv).find(`#typeform-${typeformId}`).length) {
       const typeformDiv = `<div class="typeform-wrapper" id="typeform-${typeformId}" data-tf-widget="${typeformId}" data-tf-inline-on-mobile data-tf-medium="snippet" ></div>`;
-      parentElem.append(typeformDiv);
+      $(anchorTag).after(typeformDiv);
+      $(anchorTag).remove();
       if (!loadScript) window.tf.load();
     }
   },
@@ -28,7 +29,8 @@ const TypeformEmbed = {
     $(containerDiv)
       .find('a')
       .each(function isTypeformUrl() {
-        const txt = $(this).attr('href');
+        const anchorTag = this;
+        const txt = $(anchorTag).attr('href');
         let urlSplit;
         let typeformId;
         let parentDiv;
@@ -38,10 +40,9 @@ const TypeformEmbed = {
           urlSplit = txt.split('/');
           typeformId = urlSplit.pop();
           typeformId = typeformId.includes('?') ? typeformId.split('?')[0] : typeformId;
-          parentDiv = $(this).parents(containerDiv);
-          $(this).remove();
+          parentDiv = $(anchorTag).parents(containerDiv);
           if (typeformId) {
-            self.addTypeformEmbed(typeformId, parentDiv, loadScript);
+            self.addTypeformEmbed(typeformId, anchorTag, parentDiv, loadScript);
           }
         }
       });

funnel/assets/sass/app.scss

@@ -20,6 +20,7 @@
 @import 'mui/helpers', 'mui/overlay', 'mui/ripple';
 
 @import 'components/variable';
+@import 'components/typography';
 @import 'components/helper';
 @import 'components/menu';
 @import 'components/layout';

funnel/assets/sass/comments.scss

@@ -1,4 +1,6 @@
 @import 'components/variable';
+@import 'components/typography';
+@import 'components/codemirror';
 
 @media (max-width: 767px) {
   .post-form-block {
@@ -176,20 +178,23 @@
       width: calc(100% - 48px);
       margin: 0;
       padding: 0;
-      .CodeMirror {
+      textarea.field-comment_message {
+        display: none;
+      }
+      .cm-editor {
         border: 1px solid $mui-primary-color;
         border-radius: 16px 16px 0 16px;
         min-height: 56px;
         padding: $mui-grid-padding;
         height: auto;
-        .CodeMirror-sizer {
-          min-height: 29px !important;
+        .cm-scroller {
+          min-height: 29px;
         }
       }
-      .CodeMirror ~ .CodeMirror {
-        display: none;
+      .cm-editor ~ .cm-editor {
+        display: none !important;
       }
-      .CodeMirror-focused {
+      .cm-editor.cm-focused {
         border: 1px solid #4a90e2;
       }
     }
@@ -221,20 +226,23 @@
     bottom: 0;
     left: 0;
     box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
-    background-color: $mui-bg-color-accent;
+    background-color: $mui-bg-color-primary;
     z-index: 1001;
     margin: 0;
+    max-height: 100%;
+    overflow-y: scroll;
     .mui-form {
-      .mui-form__fields .CodeMirror {
+      .mui-form__fields .cm-editor {
         border: none;
         border-radius: 0;
-        background: $mui-bg-color-accent;
+        background: $mui-bg-color-primary;
       }
     }
     .mui-btn--raised.icon-btn {
       border-radius: 0;
       box-shadow: none;
       padding-bottom: 16px;
+      background: inherit;
     }
     .user {
       padding-bottom: $mui-grid-padding/2;