Create trix-editor in project

Gemfile

@@ -28,6 +28,7 @@ gem "simple_form", "4.0.1"
 gem "administrate", "0.10.0"
 gem "will_paginate", "3.1.6"
 gem "administrate-field-carrierwave", "0.3.2"
+gem "trix", "0.10.1"
 gem "gdpr_rails", "0.3.3"
 gem "omniauth-facebook", "5.0.0"
 gem "friendly_id", "5.2.0"
@@ -55,6 +56,7 @@ group :test do
   gem "rspec-rails", "3.7.2"
   gem "factory_bot_rails", "4.10.0"
 end
+
 group :production do
   gem "fog-aws", "3.0.0"
 end

Gemfile.lock

@@ -396,6 +396,8 @@ GEM
     thor (0.20.0)
     thread_safe (0.3.6)
     tilt (2.0.8)
+    trix (0.10.1)
+      rails
     tzinfo (1.2.5)
       thread_safe (~> 0.1)
     uglifier (4.1.18)
@@ -464,6 +466,7 @@ DEPENDENCIES
   slim-rails (= 3.1.3)
   spring (= 2.0.2)
   spring-watcher-listen (= 2.0.1)
+  trix (= 0.10.1)
   tzinfo-data
   uglifier (= 4.1.18)
   web-console (= 3.6.2)

app/assets/javascripts/administrate/application.js

@@ -0,0 +1,7 @@
+//= require jquery
+//= require jquery_ujs
+//= require selectize
+//= require moment
+//= require datetime_picker
+//= require_tree .
+//= require trix

app/assets/javascripts/administrate/components/date_time_picker.js

@@ -0,0 +1,10 @@
+$(function () {
+  $('[data-type="time"]').datetimepicker({
+    debug: false,
+    format: "HH:mm:ss",
+  });
+  $('[data-type="datetime"]').datetimepicker({
+    debug: false,
+    format: "YYYY-MM-DD HH:mm:ss",
+  });
+});

app/assets/javascripts/administrate/components/has_many_form.js

@@ -0,0 +1,3 @@
+$(function() {
+  $(".field-unit--has-many select").selectize({});
+});

app/assets/javascripts/administrate/components/table.js

@@ -0,0 +1,23 @@
+$(function() {
+  var keycodes = { space: 32, enter: 13 };
+
+  var visitDataUrl = function(event) {
+    if (event.type == "click" ||
+        event.keyCode == keycodes.space ||
+        event.keyCode == keycodes.enter) {
+
+      if (event.target.href) {
+        return;
+      }
+
+      var dataUrl = $(event.target).closest("tr").data("url");
+      var selection = window.getSelection().toString();
+      if (selection.length === 0 && dataUrl) {
+        window.location = dataUrl;
+      }
+    }
+  };
+
+  $("table").on("click", ".js-table-row", visitDataUrl);
+  $("table").on("keydown", ".js-table-row", visitDataUrl);
+});

app/assets/javascripts/application.js

@@ -14,4 +14,7 @@
 //= require popper
 //= require bootstrap-sprockets
 //= require activestorage
-//= require_tree .
+//= require cable
+//= require static_page
+//= require cable
+//= require trix

app/assets/stylesheets/administrate/application.scss

@@ -0,0 +1,33 @@
+// = require trix
+
+@charset "utf-8";
+
+@import "reset/normalize";
+
+@import "selectize";
+@import "datetime_picker";
+
+@import "library/clearfix";
+@import "library/data-label";
+@import "library/variables";
+
+@import "base/forms";
+@import "base/layout";
+@import "base/lists";
+@import "base/tables";
+@import "base/typography";
+
+@import "components/app-container";
+@import "components/attributes";
+@import "components/buttons";
+@import "components/cells";
+@import "components/field-unit";
+@import "components/flashes";
+@import "components/form-actions";
+@import "components/main-content";
+@import "components/navigation";
+@import "components/pagination";
+@import "components/search";
+
+@import "utilities/text-color";
+

app/assets/stylesheets/administrate/base/_forms.scss

@@ -0,0 +1,107 @@
+fieldset {
+  background-color: transparent;
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  font-weight: $bold-font-weight;
+  margin: 0;
+  padding: 0;
+}
+
+label {
+  display: block;
+  font-weight: $bold-font-weight;
+  margin: 0;
+}
+
+input,
+select {
+  display: block;
+  font-family: $base-font-family;
+  font-size: $base-font-size;
+}
+
+input,
+select,
+textarea {
+  display: block;
+  font-family: $base-font-family;
+  font-size: 16px;
+}
+
+[type="color"],
+[type="date"],
+[type="datetime-local"],
+[type="email"],
+[type="month"],
+[type="number"],
+[type="password"],
+[type="search"],
+[type="tel"],
+[type="text"],
+[type="time"],
+[type="url"],
+[type="week"],
+input:not([type]),
+textarea {
+  appearance: none;
+  background-color: $white;
+  border: $base-border;
+  border-radius: $base-border-radius;
+  padding: 0.5em;
+  transition: border-color $base-duration $base-timing;
+  width: 100%;
+
+  &:hover {
+    border-color: mix($black, $base-border-color, 20%);
+  }
+
+  &:focus {
+    border-color: $action-color;
+    outline: none;
+  }
+
+  &:disabled {
+    background-color: mix($black, $white, 5%);
+    cursor: not-allowed;
+
+    &:hover {
+      border: $base-border;
+    }
+  }
+
+  &::placeholder {
+    font-style: italic;
+  }
+}
+
+textarea {
+  resize: vertical;
+}
+
+[type="checkbox"],
+[type="radio"] {
+  display: inline;
+  margin-right: $small-spacing / 2;
+}
+
+[type="file"] {
+  width: 100%;
+}
+
+select {
+  width: 100%;
+}
+
+[type="checkbox"],
+[type="radio"],
+[type="file"],
+select {
+  &:focus {
+    outline: $focus-outline;
+    outline-offset: $focus-outline-offset;
+  }
+}

app/assets/stylesheets/administrate/base/_layout.scss

@@ -0,0 +1,20 @@
+html {
+  background-color: $base-background-color;
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+figure {
+  margin: 0;
+}
+
+img,
+picture {
+  margin: 0;
+  max-width: 100%;
+}

app/assets/stylesheets/administrate/base/_lists.scss

@@ -0,0 +1,19 @@
+ul,
+ol {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+dl {
+  margin-bottom: $small-spacing;
+
+  dt {
+    font-weight: $bold-font-weight;
+    margin-top: $small-spacing;
+  }
+
+  dd {
+    margin: 0;
+  }
+}

app/assets/stylesheets/administrate/base/_tables.scss

@@ -0,0 +1,55 @@
+table {
+  border-collapse: collapse;
+  font-size: 0.9em;
+  text-align: left;
+  width: 100%;
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+thead {
+  font-weight: $bold-font-weight;
+}
+
+tr {
+  border-bottom: $base-border;
+}
+
+tbody tr {
+  &:hover {
+    background-color: $base-background-color;
+    cursor: pointer;
+  }
+
+  &:focus {
+    outline: $focus-outline;
+    outline-offset: -($focus-outline-width);
+  }
+}
+
+td,
+th {
+  font-feature-settings: "kern", "liga", "clig", "calt", "lnum", "tnum";
+  font-kerning: normal;
+  font-variant-ligatures: common-ligatures, contextual;
+  font-variant-numeric: lining-nums, tabular-nums;
+  padding: 0.75rem;
+  vertical-align: middle;
+}
+
+td:first-child,
+th:first-child {
+  padding-left: 2rem;
+}
+
+td:last-child,
+th:last-child {
+  padding-right: 2rem;
+}
+
+td img {
+  max-height: 2rem;
+}

app/assets/stylesheets/administrate/base/_typography.scss

@@ -0,0 +1,45 @@
+body {
+  color: $base-font-color;
+  font-family: $base-font-family;
+  font-size: $base-font-size;
+  line-height: $base-line-height;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $heading-font-family;
+  font-size: $base-font-size;
+  line-height: $heading-line-height;
+  margin: 0;
+}
+
+p {
+  margin: 0 0 $small-spacing;
+}
+
+a {
+  color: $action-color;
+  text-decoration-skip: ink;
+  transition: color $base-duration $base-timing;
+
+  &:hover {
+    color: mix($black, $action-color, 25%);
+  }
+
+  &:focus {
+    outline: $focus-outline;
+    outline-offset: $focus-outline-offset;
+  }
+}
+
+hr {
+  border-bottom: $base-border;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+  margin: $base-spacing 0;
+}

app/assets/stylesheets/administrate/components/_app-container.scss

@@ -0,0 +1,9 @@
+.app-container {
+  align-items: stretch;
+  display: flex;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100rem;
+  min-height: 100vh;
+  padding: $base-spacing;
+}