activeadmin_medium_editor 0.2.0 → 0.2.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 3cfa14ae07c0f0f02d4f8d61a06b23043ce42863
-  data.tar.gz: e861e33d9b4cc01196437458ff942f02c7d61865
+SHA256:
+  metadata.gz: be1101431f01788540141fa55d6eae555ef26001cb65fc74336d2f9f2eeda1aa
+  data.tar.gz: 9cf68f6e9c2288b1a228d6f61d00aa24152ab600527ac1d92d5ed225c9f33a8f
 SHA512:
-  metadata.gz: 8d34df87dcae156aa4adb8e90c76efdc328fd4fd2d2a361e4d40d09259c85d71931d41ff7cf7e5a36991b58e3125a4c8ee1445460d17c68ad476bfb6aa75e865
-  data.tar.gz: 596515e9b13aabe5c6284200952354d7cd18b756ccd2c672de041053298eb1781fa83121855eb48dc83110ff1915f9240db394355d703e160360ab3c8d055066
+  metadata.gz: d00e01a203f9abf451c3390838a0364d55c0983b9ae9004f8f8f2dacf90b660c9553b2ff2f4c9fdaa690076b9355716fbff58c3a687702e4968a6b43d8134c7d
+  data.tar.gz: 8bdefac2797eb8618cf0a7ae29e4fdd3dc1a80543c65f96f72ee52c38db457d7a89919c6a462bb7cca1d96de6c7a5804bbe523297f0c18c9db21a617f6863c77

data/LICENSE.txt

@@ -1,4 +1,4 @@
-Copyright (c) 2017 Mattia Roccoberton
+Copyright (c) 2017-2020 Mattia Roccoberton
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

data/README.md

@@ -1,40 +1,42 @@
-# ActiveAdmin Medium Editor [![Gem Version](https://badge.fury.io/rb/activeadmin_medium_editor.svg)](https://badge.fury.io/rb/activeadmin_medium_editor)
+# Active Admin Medium Editor [![Gem Version](https://badge.fury.io/rb/activeadmin_medium_editor.svg)](https://badge.fury.io/rb/activeadmin_medium_editor) [![CircleCI](https://circleci.com/gh/blocknotes/activeadmin_medium_editor.svg?style=svg)](https://circleci.com/gh/blocknotes/activeadmin_medium_editor)
 
 An Active Admin plugin to use [medium-editor](https://github.com/yabwe/medium-editor), a compact and clean WYSIWYG editor.
 
-![screenshot](screenshot.jpg)
+![screenshot](screenshot.png)
 
-*Usage*: select some text in the input, a pop-up menu is shown with the available buttons
+## Usage
+- After the installation, select some text in the editor
+- A pop-up menu is shown with the available buttons
+- Click on a button and the effect will be applied to the selected text
 
 ## Install
-
-- Add to your Gemfile:
-`gem 'activeadmin_medium_editor'`
-- Execute bundle
-- Add at the end of your ActiveAdmin styles (_app/assets/stylesheets/active_admin.scss_):
-```css
+- After installing Active Admin, add to your Gemfile: `gem 'activeadmin_medium_editor'` (and execute *bundle*)
+- Add at the end of your Active Admin styles (_app/assets/stylesheets/active_admin.scss_):
+```scss
+@import 'activeadmin/medium_editor/medium_editor';
 @import 'activeadmin/medium_editor_input';
-@import 'activeadmin/medium_editor/themes/default.css'; // or another theme
+@import 'activeadmin/medium_editor/themes/default'; // or another theme
 ```
-- Add at the end of your ActiveAdmin javascripts (_app/assets/javascripts/active_admin.js_):
+- Add at the end of your Active Admin javascripts (_app/assets/javascripts/active_admin.js_):
 ```js
 //= require activeadmin/medium_editor/medium_editor
 //= require activeadmin/medium_editor_input
 ```
 - Use the input with `as: :medium_editor` in Active Admin model conf
+- **data-options**: permits to set *medium-editor* options directly - see [options list](https://github.com/yabwe/medium-editor#mediumeditor-options) (examples below)
 
-Why 2 separated scripts? In this way you can include a different version of *medium-editor* if you like.
-
-## Options
+> Why 2 separated scripts/styles? In this way you can include a different version of *medium-editor* if you like
 
-**data-options**: permits to set *medium-editor* options directly - see [options list](https://github.com/yabwe/medium-editor#mediumeditor-options)
+> **UPDATE FROM VERSION < 0.2.8**: please change your _app/assets/stylesheets/active_admin.scss_ using the new import lines above
 
 ## Examples
 
+### Basic usage
+
 ```ruby
-# ActiveAdmin article form conf:
+# Active Admin post form conf:
   form do |f|
-    f.inputs 'Article' do
+    f.inputs 'Post' do
       f.input :title
       f.input :description, as: :medium_editor, input_html: { data: { options: '{"spellcheck":false,"toolbar":{"buttons":["bold","italic","underline","anchor"]}}' } }
       f.input :published
@@ -43,26 +45,23 @@ Why 2 separated scripts? In this way you can include a different version of *med
   end
 ```
 
-Some more buttons:
-
-`f.input :description, as: :medium_editor, input_html: { data: { options: '{"spellcheck":false,"toolbar":{"buttons":["bold","italic","underline","anchor","orderedlist","unorderedlist","strikethrough","subscript","superscript","pre","h1","h2","h3","h4","h5","h6","html"]}}' } }`
-
-## Notes
+### Buttons configuration
 
-With the current version of Medium Editor some default buttons seem to not work properly, from my test they are: "indent", "outdent", "quote", "justifyLeft", "justifyCenter", "justifyRight", "justifyFull"
+```ruby
+toolbar = { buttons: %w[bold italic underline strikethrough subscript superscript anchor image quote pre orderedlist unorderedlist indent outdent justifyLeft justifyCenter justifyRight justifyFull h1 h2 h3 h4 h5 h6 removeFormat html] }
+f.input :description, as: :medium_editor, input_html: { data: { options: { toolbar: toolbar } } }
+```
 
-If some of this feature are needed I could suggest to override the button behavior or to use custom style classes. See the Medium Editor documentation for details.
+For details about the buttons' effect please refer to medium-editor documentation.
 
 ## Do you like it? Star it!
-
 If you use this component just star it. A developer is more motivated to improve a project when there is some interest.
 
-Take a look at [other ActiveAdmin components](https://github.com/blocknotes?utf8=✓&tab=repositories&q=activeadmin&type=source) that I made if you are curious.
+Take a look at [other Active Admin components](https://github.com/blocknotes?utf8=✓&tab=repositories&q=activeadmin&type=source) that I made if you are curious.
 
 ## Contributors
-
-- [Mattia Roccoberton](http://blocknot.es) - creator, maintainer
+- [Mattia Roccoberton](http://blocknot.es): author
+- The good guys that opened issues and pull requests from time to time
 
 ## License
-
-[MIT](LICENSE.txt)
+The gem is available as open-source under the terms of the [MIT](LICENSE.txt).

data/Rakefile

@@ -1,3 +1,16 @@
-# encoding: utf-8
+# frozen_string_literal: true
 
-require "bundler/gem_tasks"
+require 'bundler/gem_tasks'
+
+begin
+  require 'rspec/core/rake_task'
+
+  RSpec::Core::RakeTask.new(:spec) do |t|
+    # t.ruby_opts = %w[-w]
+    t.rspec_opts = ['--color', '--format documentation']
+  end
+
+  task default: :spec
+rescue LoadError
+  puts '! LoadError: no RSpec available'
+end

data/app/assets/javascripts/activeadmin/medium_editor_input.js

@@ -1,18 +1,20 @@
-function initMediumEditors() {
-  $('.medium-editor').each(function () {
-    if (!$(this).hasClass('medium-editor--active')) {
-      var options = {};
-      options = $.extend({}, options, $(this).data('options'));
-      new MediumEditor($(this), options);
-      $(this).addClass('medium-editor--active');
-    }
-  });
-}
+(function () {
+  'use strict'
 
-$(document).on('has_many_add:after', function () {
-  initMediumEditors();
-});
+  // --- functions -------------------------------------------------------------
+  function initMediumEditors() {
+    $('[data-aa-medium-editor]').each(function () {
+      if (!$(this).hasClass('medium-editor--active')) {
+        let options = {}
+        options = $.extend({}, options, $(this).data('options'))
+        new MediumEditor($(this), options)
+        $(this).addClass('medium-editor--active')
+      }
+    })
+  }
 
-$(document).ready( function() {
-  initMediumEditors();
-});
+  // --- events ----------------------------------------------------------------
+  $(document).ready(initMediumEditors)
+  $(document).on('has_many_add:after', '.has_many_container', initMediumEditors)
+  $(document).on('turbolinks:load', initMediumEditors)
+})()

data/app/assets/stylesheets/activeadmin/_medium_editor_input.scss

@@ -0,0 +1,90 @@
+body.active_admin form {
+  textarea.medium-editor-hidden{
+    display: none;
+  }
+
+  .medium-editor-element {
+    background-color: #fff;
+    border-radius: 3px;
+    border: 1px solid #c9d0d6;
+    display: inline-block;
+    max-height: 200px;
+    min-height: 100px;
+    overflow-y: scroll;
+    padding: 8px 10px 7px;
+    width: calc(80% - 22px);
+
+    // reset internal elements
+    * {
+      margin: initial;
+      padding: initial;
+      text-align: initial;
+    }
+
+    h1 {
+      margin-top: 0.67em;
+      margin-bottom: 0.67em;
+    }
+
+    h2 {
+      margin-top: 0.83em;
+      margin-bottom: 0.83em;
+    }
+
+    h3 {
+      margin-top: 1em;
+      margin-bottom: 1em;
+    }
+
+    h4 {
+      margin-top: 1.33em;
+      margin-bottom: 1.33em;
+    }
+
+    h5 {
+      margin-top: 1.67em;
+      margin-bottom: 1.67em;
+    }
+
+    h6 {
+      margin-top: 2.33em;
+      margin-bottom: 2.33em;
+    }
+
+    blockquote {
+      margin: 1.5em;
+    }
+
+    ol {
+      list-style-type: decimal;
+    }
+
+    p {
+      margin-top: 1em;
+      margin-bottom: 1em;
+    }
+
+    ul {
+      list-style-type: disc;
+    }
+
+    ul, ol {
+      margin: 1em 2em 1em 0;
+      padding-left: 2em;
+    }
+  }
+
+  .medium-editor-element:focus {
+    border-color: transparent;
+  }
+
+  .medium_editor > label {
+    display: inline-block;
+    float: none;
+    vertical-align: top;
+  }
+}
+
+button.medium-editor-action {
+  border-radius: 0;
+}

data/app/assets/stylesheets/activeadmin/medium_editor/_settings.scss

@@ -0,0 +1,6 @@
+// typography
+$font-fixed: Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
+$font-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+
+// ui / positioning
+$z-toolbar: 2000 !default;

data/app/assets/stylesheets/activeadmin/medium_editor/animations/_image-loading.scss

@@ -0,0 +1,8 @@
+@keyframes medium-editor-image-loading {
+    0% {
+        transform: scale(0)
+    }
+    100% {
+        transform: scale(1);
+    }
+}

data/app/assets/stylesheets/activeadmin/medium_editor/animations/_pop-upwards.scss

@@ -0,0 +1,20 @@
+@keyframes medium-editor-pop-upwards {
+    0% {
+        opacity: 0;
+        transform: matrix(.97, 0, 0, 1, 0, 12);
+    }
+
+    20% {
+        opacity: .7;
+        transform: matrix(.99, 0, 0, 1, 0, 2);
+    }
+
+    40% {
+        opacity: 1;
+        transform: matrix(1, 0, 0, 1, 0, -1);
+    }
+
+    100% {
+        transform: matrix(1, 0, 0, 1, 0, 0);
+    }
+}

data/app/assets/stylesheets/activeadmin/medium_editor/components/_anchor-preview.scss

@@ -0,0 +1,24 @@
+.medium-editor-anchor-preview {
+    font-family: $font-sans-serif;
+    font-size: 16px;
+    left: 0;
+    line-height: 1.4;
+    max-width: 280px;
+    position: absolute;
+    text-align: center;
+    top: 0;
+    word-break: break-all;
+    word-wrap: break-word;
+    visibility: hidden;
+    z-index: $z-toolbar;
+
+    a {
+        color: #fff;
+        display: inline-block;
+        margin: 5px 5px 10px;
+    }
+}
+
+.medium-editor-anchor-preview-active {
+    visibility: visible;
+}

data/app/assets/stylesheets/activeadmin/medium_editor/components/_file-dragging.scss

@@ -0,0 +1,12 @@
+.medium-editor-dragover {
+    background: #ddd;
+}
+
+.medium-editor-image-loading {
+    animation: medium-editor-image-loading 1s infinite ease-in-out;
+    background-color: #333;
+    border-radius: 100%;
+    display: inline-block;
+    height: 40px;
+    width: 40px;
+}

data/app/assets/stylesheets/activeadmin/medium_editor/components/_placeholder.scss

@@ -0,0 +1,27 @@
+.medium-editor-placeholder {
+    position: relative;
+
+    &:after {
+        content: attr(data-placeholder) !important;
+        font-style: italic;
+        position: absolute;
+        left: 0;
+        top: 0;
+        white-space: pre;
+        padding: inherit;
+        margin: inherit;
+    }
+}
+
+.medium-editor-placeholder-relative {
+    position: relative;
+
+    &:after {
+        content: attr(data-placeholder) !important;
+        font-style: italic;
+        position: relative;
+        white-space: pre;
+        padding: inherit;
+        margin: inherit;
+    }
+}

data/app/assets/stylesheets/activeadmin/medium_editor/components/_toolbar-form.scss

@@ -0,0 +1,44 @@
+.medium-editor-toolbar-form {
+    display: none;
+
+    input,
+    a {
+        font-family: $font-sans-serif;
+    }
+
+    .medium-editor-toolbar-form-row {
+        line-height: 14px;
+        margin-left: 5px;
+        padding-bottom: 5px;
+    }
+
+    .medium-editor-toolbar-input,
+    label {
+        border: none;
+        box-sizing: border-box;
+        font-size: 14px;
+        margin: 0;
+        padding: 6px;
+        width: 316px;
+        display: inline-block;
+
+        &:focus {
+            appearance: none;
+            border: none;
+            box-shadow: none;
+            outline: 0;
+        }
+    }
+
+    a {
+        display: inline-block;
+        font-size: 24px;
+        font-weight: bolder;
+        margin: 0 10px;
+        text-decoration: none;
+    }
+}
+
+.medium-editor-toolbar-form-active {
+    display: block;
+}

data/app/assets/stylesheets/activeadmin/medium_editor/components/_toolbar.scss

@@ -0,0 +1,98 @@
+%medium-toolbar-arrow {
+    border-style: solid;
+    content: '';
+    display: block;
+    height: 0;
+    left: 50%;
+    margin-left: -8px;
+    position: absolute;
+    width: 0;
+}
+
+.medium-toolbar-arrow-under:after {
+    @extend %medium-toolbar-arrow;
+    border-width: 8px 8px 0 8px;
+}
+
+.medium-toolbar-arrow-over:before {
+    @extend %medium-toolbar-arrow;
+    border-width: 0 8px 8px 8px;
+    top: -8px;
+}
+
+.medium-editor-toolbar {
+    font-family: $font-sans-serif;
+    font-size: 16px;
+    left: 0;
+    position: absolute;
+    top: 0;
+    visibility: hidden;
+    z-index: $z-toolbar;
+
+    ul {
+        margin: 0;
+        padding: 0;
+    }
+
+    li {
+        float: left;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        button {
+            box-sizing: border-box;
+            cursor: pointer;
+            display: block;
+            font-size: 14px;
+            line-height: 1.33;
+            margin: 0;
+            padding: 15px;
+            text-decoration: none;
+
+            &:focus {
+                outline: none;
+            }
+        }
+
+        .medium-editor-action-underline {
+            text-decoration: underline;
+        }
+
+        .medium-editor-action-pre {
+            font-family: $font-fixed;
+            font-size: 12px;
+            font-weight: 100;
+            padding: 15px 0;
+        }
+    }
+}
+
+.medium-editor-toolbar-active {
+    visibility: visible;
+}
+
+.medium-editor-sticky-toolbar {
+    position: fixed;
+    top: 1px;
+}
+
+.medium-editor-relative-toolbar {
+  position: relative;
+}
+
+.medium-editor-toolbar-active.medium-editor-stalker-toolbar {
+    animation: medium-editor-pop-upwards 160ms forwards linear;
+}
+
+.medium-editor-toolbar-actions {
+    @extend %clearfix;
+}
+
+.medium-editor-action-bold {
+    font-weight: bolder;
+}
+
+.medium-editor-action-italic {
+    font-style: italic;
+}