feature/Use codemirror languages and mimes

Author: LewisYoul

app/controllers/folders_controller.rb

@@ -42,6 +42,7 @@ def show
     @page_title = @folder.name
     @display_popover = true
     @snippets = @folder.snippets
+    @languages = Language.all.to_json
 
     @snippets = @snippets.where('description ILIKE ?', "%#{params[:search]}%") if params[:search].present?
 

app/controllers/home_controller.rb

@@ -2,6 +2,8 @@ class HomeController < ApplicationController
   def index
     @display_popover = true
 
+    @languages = Language.order(name: :asc).to_json
+
     if user_signed_in?
       @page_title = 'Feed'
       @snippets = current_user

app/controllers/modals/snippets_controller.rb

@@ -5,7 +5,7 @@ def new
     @snippet = Snippet.new
     @folders = current_user.folders
     @languages = Language.order(name: :asc)
-    @javascript = @languages.find_by_slug('javascript')
+    @javascript = @languages.find_by_name('JavaScript')
   end
 
   def edit

app/controllers/snippets_controller.rb

@@ -6,6 +6,7 @@ def index
     @user = User.find_by(id: params[:user_id]) || current_user
     @display_popover = true
     @snippets = @user.filed_snippets.includes(:user, :folders)
+    @languages = Language.all.to_json
 
     # TODO: Extract this logic to model/service
     @snippets = @snippets.where('description ILIKE ?', "%#{params[:search]}%") if params[:search]
@@ -90,6 +91,7 @@ def current_folder
 
   def show
     @page_title = "Snippet"
+    @languages = Language.all.to_json
     @snippet = Snippet.includes(comments: :user).find_by(id: params[:id])
 
     unless @snippet && @snippet.visible_to?(current_user)
@@ -127,6 +129,7 @@ def create
 
     if snippet.save
       @display_popover = true
+      @languages = Language.all.to_json
 
       partial = if request.referer == snippet_path(snippet)
         'snippets/snippet'
@@ -162,6 +165,7 @@ def update
       end
 
       @display_popover = true
+      @languages = Language.all.to_json
       element = render_to_string partial: partial, locals: { snippet: snippet }
 
       render json: { client_id: snippet.client_id, folder_id: snippet_params[:folder_id], element: element }

app/controllers/users_controller.rb

@@ -13,6 +13,7 @@ def show
     @followers = @user.followers
     @following = @user.following
     @display_popover = true
+    @languages = Language.all.to_json
 
     # need to change current implementation to hit specific user snippets endpoint so can optionally show private ones
     if @user == current_user

app/javascript/controllers/codemirror_controller.js

@@ -1,13 +1,13 @@
 import { Controller } from 'stimulus';
 import CodeMirror from 'codemirror';
-// import 'codemirror/theme/duotone-dark.css'
+import 'codemirror/mode/meta.js'
 
 export default class extends Controller {
   static targets = ["wrapper", "mirror", "body", "description"];
   static values = {
     modes: Array,
     code: String,
-    mode: String,
+    modeId: String,
     initialized: Boolean,
     readOnly: Boolean
   }
@@ -16,7 +16,11 @@ export default class extends Controller {
     if (this.shouldInitialize()) {
       this.initializeCodeMirror()
       this.setCodeMirrorValue()
-      if (this.hasModeValue) { this.importMode(this.modeValue) }
+
+      if (this.hasModeIdValue) {
+        this.importModeFromId(this.modeIdValue)
+      }
+
       this.addEventListeners()
     }
   }
@@ -38,37 +42,48 @@ export default class extends Controller {
 
   updateMode(event) {
     const modeId = event.target.value
+    
+    this.importModeFromId(modeId)
+  }
+
+  importModeFromId(modeId) {
     const mode = this.modeFromId(modeId)
     const hasMode = Object.keys(CodeMirror.modes).includes(mode)
 
     !hasMode ? this.importMode(mode) : this.setMode(mode)
   }
 
-  shouldInitialize() {
-    return !this.initializedValue
-  }
-
-  addEventListeners() {
-    var editor = document.querySelector('.CodeMirror');
-
-    editor.addEventListener("click", (event) => {
-      event.stopPropagation()
-    })
-  }
-
   importMode(mode) {
-    import(`codemirror/mode/${mode}/${mode}.js`)
+    const path = mode.mode
+
+    import(`codemirror/mode/${path}/${path}.js`)
       .then(() => this.setMode(mode))
       .catch(console.error)
   }
 
   setMode(mode) {
-    this.codeMirror.setOption("mode", mode);
+    this.codeMirror.setOption("mode", mode.mime);
   }
 
   modeFromId(modeId) {
-    return this.modesValue.find(mode => {
+    const dbMode = this.modesValue.find(mode => {
       return Number(mode.id) === Number(modeId)
-    }).mode
+    })
+
+    return CodeMirror.modeInfo.find(mode => {
+      return mode.name === dbMode.name
+    })
+  }
+
+  shouldInitialize() {
+    return !this.initializedValue
+  }
+
+  addEventListeners() {
+    var editor = document.querySelector('.CodeMirror');
+
+    editor.addEventListener("click", (event) => {
+      event.stopPropagation()
+    })
   }
 }

app/models/language.rb

@@ -1,3 +1,3 @@
 class Language < ApplicationRecord
-  validates_uniqueness_of :slug, :name
+  validates_uniqueness_of :name
 end

app/models/snippet.rb

@@ -19,23 +19,6 @@ def folder_for_user(user)
     folders.find_by(user_id: user&.id)
   end
 
-  # TODO: Don't call serializers from model - just instantiate in controller
-  def serializable(current_user)
-    SnippetSerializer.new(self, scope: current_user)
-  end
-
-  def serialize(current_user)
-    serializable(current_user).to_h
-  end
-
-  def simple_serializable(current_user)
-    SimpleSnippetSerializer.new(self, scope: current_user)
-  end
-
-  def simple_serialize(current_user)
-    simple_serializable(current_user).to_h
-  end
-
   def comments_count
     comments.size
   end
@@ -48,8 +31,7 @@ def liked_by?(user)
     likes.find_by_user_id(user&.id).present?
   end
 
-
-  # Prevent needing to do on the fly by saving to db
+  # TODO: Prevent needing to do on the fly by saving to db
   def preview
    @preview ||=  body.split("\n").first(15).join("\n")
   end

app/views/modals/snippets/edit.html.erb

@@ -3,7 +3,14 @@
 <div data-controller="snippets">
   <div data-snippets-target="errors"></div>
 
-  <div data-controller="codemirror snippets" data-codemirror-modes-value="<%= @languages.to_json %>" data-codemirror-code-value="<%= @snippet.body %>" data-codemirror-mode-value="<%= @snippet.language.slug %>" data-codemirror-initialized-value="false" data-codemirror-read-only-value="false" class="mt-4">
+  <div data-controller="codemirror"
+    data-codemirror-modes-value="<%= @languages.to_json %>"
+    data-codemirror-code-value="<%= @snippet.body %>"
+    data-codemirror-mode-id-value="<%= @snippet.language_id %>"
+    data-codemirror-initialized-value="false"
+    data-codemirror-read-only-value="false"
+    class="mt-4"
+  >
     <%= form_for @snippet, remote: true, html: { data: { type: "html", action: "ajax:success->snippets#onUpdateSuccess ajax:error->snippets#onUpdateError" } } do |f| %>
       <div>
         <%= f.text_field :description, { class: "new-snippet--description", placeholder: "Snippet title...", class: "block w-full mb-4 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" } %>

app/views/modals/snippets/new.html.erb

@@ -1,6 +1,10 @@
 <h3 class="text-center">New Snippet</h3>
 
-<div data-controller="codemirror snippets" data-codemirror-modes-value="<%= @languages.to_json %>" class="mt-4">
+<div
+  data-controller="codemirror snippets"
+  data-codemirror-modes-value="<%= @languages.to_json %>"
+  class="mt-4"
+>
   <div data-snippets-target="errors"></div>
   <%= form_for @snippet, remote: true, html: { data: { type: "html", action: "ajax:success->snippets#onCreateSuccess ajax:error->snippets#onCreateError" } } do |f| %>
     <div>