feature/Recreate languages

Author: LewisYoul

app/controllers/modals/snippets_controller.rb

@@ -4,9 +4,12 @@ class Modals::SnippetsController < ModalsController
   def new
     @snippet = Snippet.new
     @folders = current_user.folders
+    @languages = Language.all
+    @javascript = @languages.find_by_slug('javascript')
   end
 
   def edit
+    @languages = Language.all
     @folders = current_user.folders
     @folder = current_user.snippet_folders.find_by(snippet_id: params[:id]).folder
   end

app/controllers/snippets_controller.rb

@@ -116,9 +116,8 @@ def create
       user: current_user,
       description: snippet_params[:description],
       body: snippet_params[:body],
-      highlighted_body: snippet_params[:highlighted_body],
       public: snippet_params[:public],
-      language: snippet_params[:language],
+      language_id: snippet_params[:language_id],
     )
 
     if snippet_params[:folder_id].present?
@@ -204,9 +203,8 @@ def snippet_params
     params.require(:snippet).permit(
       :description,
       :body,
-      :highlighted_body,
       :public,
-      :language,
+      :language_id,
       :folder_id
     )
   end

app/initializers/languages.rb

@@ -0,0 +1,11 @@
+LANGUAGES = {
+	'CSS' => 'css',
+	'Javascript' => 'javascript',
+	'PHP' => 'php',
+	'Python' => 'python',
+	'Ruby' => 'ruby',
+	'Rust' => 'rust',
+	'SCSS' => 'scss',
+	'SQL' => 'sql'
+	'Swift' => 'swift'
+}.freeze

app/javascript/controllers/codemirror_controller.js

@@ -1,39 +1,50 @@
 import { Controller } from 'stimulus';
 import CodeMirror from 'codemirror';
-import 'codemirror/mode/ruby/ruby.js'
 // import 'codemirror/theme/duotone-dark.css'
 
 export default class extends Controller {
   static targets = ["wrapper", "mirror", "body", "description"];
   static values = {
+    modes: Array,
     code: String,
+    mode: String,
     initialized: Boolean,
     readOnly: Boolean
   }
 
   connect() {
+    console.log('l', this.modesValue)
     if (this.shouldInitialize()) {
       this.initializeCodeMirror()
       this.setCodeMirrorValue()
+      if (this.hasModeValue) { this.importMode(this.modeValue) }
       this.addEventListeners()
     }
   }
 
   initializeCodeMirror() {
     this.codeMirror = CodeMirror.fromTextArea(this.mirrorTarget, {
       theme: 'one-light',
-      mode: 'ruby',
+      mode: 'javascript',
       readOnly: this.readOnlyValue ? 'nocursor' : false
     });
 
     this.initializedValue = true
   }
 
   setCodeMirrorValue() {
-    const value = this.hasCodeValue ? this.codeValue : ''
+    const value = this.hasCodeValue ? this.codeValue : "updateMode(event) {\n  const modeId = event.target.value\n  const mode = this.modeFromId(modeId)\n  const hasMode = Object.keys(CodeMirror.modes).includes(mode)\n\n  !hasMode ? this.importMode(mode) : this.setMode(mode)\n}\n\nsetMode(mode) {\n  this.codeMirror.setOption(\"mode\", mode);\n}"
     this.codeMirror.setValue(value)
   }
 
+  updateMode(event) {
+    const modeId = event.target.value
+    const mode = this.modeFromId(modeId)
+    const hasMode = Object.keys(CodeMirror.modes).includes(mode)
+
+    !hasMode ? this.importMode(mode) : this.setMode(mode)
+  }
+
   shouldInitialize() {
     return !this.initializedValue
   }
@@ -45,4 +56,20 @@ export default class extends Controller {
       event.stopPropagation()
     })
   }
+
+  importMode(mode) {
+    import(`codemirror/mode/${mode}/${mode}.js`)
+      .then(() => this.setMode(mode))
+      .catch(console.error)
+  }
+
+  setMode(mode) {
+    this.codeMirror.setOption("mode", mode);
+  }
+
+  modeFromId(modeId) {
+    return this.modesValue.find(mode => {
+      return Number(mode.id) === Number(modeId)
+    }).slug
+  }
 }

app/models/language.rb

@@ -1,14 +1,3 @@
 class Language < ApplicationRecord
-  def self.find_by_filename(filename)
-    # change this to an sql query
-    matched_fn = Filename.all.find do |fn|
-      File.fnmatch(fn.name, filename)
-    end
 
-    matched_fn ? matched_fn.language : Language.find_by(name: 'Text only')
-  end
-
-  def lexer_alias
-    aliases.first.name
-  end
-end
+end

app/models/snippet.rb

@@ -4,6 +4,8 @@ class Snippet < ApplicationRecord
   belongs_to :user, required: true
   has_many :comments, dependent: :destroy
   has_many :likes, dependent: :destroy
+  belongs_to :language, required: true
+
   validates_presence_of :body
   validates_presence_of :description
   validate :owner_folder_presence

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

@@ -4,7 +4,7 @@
   <%= 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 description..." } %>
-      <%= f.text_area :body, { data: { controller: "codemirror", codemirror_code_value: @snippet.body, codemirror_initialized_value: false, codemirror_read_only_value: false, codemirror_target: 'mirror' }, class: "font-mono h-80 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" } %>
+      <%= f.text_area :body, { data: { controller: 'codemirror', codemirror_target: 'mirror', codemirror_modes_value: @languages.to_json, codemirror_code_value: @snippet.body, codemirror_mode_value: @snippet.language.slug, codemirror_initialized_value: false, codemirror_read_only_value: false, }, class: "font-mono h-80 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" } %>
     </div>
 
     <div class="create-snippet--options-wrapper">
@@ -21,6 +21,7 @@
         <%= f.hidden_field :public, value: true, data: { checkbox_target: 'value' } %>
       </div>
       <div class="flex">
+        <%= f.select :language_id, options_from_collection_for_select(@languages, :id, :name, @snippet.language_id), {}, data: { action: 'change->codemirror#updateMode' } %>
         <%= f.select :folder_id, options_from_collection_for_select(@folders, :id, :name, @folder.id), prompt: 'Select folder...' %>
         <%= f.submit 'Update', class: "button--cta-primary ml-4" %>
       </div>

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

@@ -1,6 +1,6 @@
 <h3 class="text-center">New Snippet</h3>
 
-<div data-controller="codemirror snippets" 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>
@@ -22,6 +22,7 @@
         <%= f.hidden_field :public, value: true, data: { checkbox_target: 'value' } %>
       </div>
       <div class="flex">
+        <%= f.select :language_id, options_from_collection_for_select(@languages, :id, :name, @javascript.id), {}, data: { action: 'change->codemirror#updateMode' } %>
         <%= f.select :folder_id, options_from_collection_for_select(@folders, :id, :name, params[:folder_id]), prompt: 'Select folder...' %>
         <%= f.submit 'CREATE', class: "button--cta-primary ml-4" %>
       </div>

app/views/shared/_codemirror.html.erb

@@ -6,6 +6,7 @@
       data: {
         controller: 'codemirror',
         codemirror_code_value: code,
+        codemirror_mode_value: mode,
         codemirror_initialized_value: false,
         codemirror_read_only_value: read_only,
         codemirror_target: 'mirror'

app/views/snippets/_snippet.html.erb

@@ -40,6 +40,6 @@
       </div>
     </div>
 
-    <%= render partial: 'shared/codemirror', locals: { code: snippet.body, language: snippet.language, read_only: true  } %>
+    <%= render partial: 'shared/codemirror', locals: { code: snippet.body, mode: snippet.language.slug, read_only: true  } %>
   </div>
 <% end %>