activeadmin_medium_editor 0.2.4 → 0.2.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1584ab7bff1f752c1d93bf42300abfd3a64d04d3da03810408f332aca1187f44
-  data.tar.gz: 5f6d6f6f43db3f8849902a0b0106b17e7ba703ee371f4118c1f3c85ca6dc8dd4
+  metadata.gz: 198234928f35e1e71157a7207409a6bb36295c27984a55218408354b43f10cca
+  data.tar.gz: d200fd0df2e77bee9dded43d03513ca6e22f1d5e4e68b16807ee6359119cf7e9
 SHA512:
-  metadata.gz: af3a6057f90d75f30a1cf1233fc8aa7178ffab8b7bae24e14f6b96084fa2d02b363d81cad7a76ff9b12fc5762cbeb03dfc260987a4de3ea1ce303d9738d3967f
-  data.tar.gz: e12a525672fac9ba6250d560b268595dbf2c1151291cf3ef17b535567ef0464054be2dd0022f6e74095ce04d736ef897baf3b8f94c25672d22471a5fa58889af
+  metadata.gz: 0312f017322d542d0700220bf67d08d0379f86d5584e32a99b73bf4866995f25edde1740fdd16132c4cfca50abefe5f0ef34d5e4126a6c364344c94a530f9633
+  data.tar.gz: cb08235c025fb86754b585b4bb834fa61df8f864f7355e7df9b44698ea3399cacd23cd55a26e5785085a3a42d75ec4ffb77145a680d5fca55d0742e6c741c83d

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,38 +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
 
-Why 2 separated scripts? In this way you can include a different version of *medium-editor* if you like.
+Why 2 separated scripts/styles? In this way you can include a different version of *medium-editor* if you like.
 
-## Options
+> **UPDATE FROM VERSION < 2.8**: please change your _app/assets/stylesheets/active_admin.scss_ using the new import lines above
 
+## Options
 **data-options**: permits to set *medium-editor* options directly - see [options list](https://github.com/yabwe/medium-editor#mediumeditor-options)
 
 ## Examples
 
+### Basic usage
+
 ```ruby
-# ActiveAdmin article form conf:
+# Active Admin article form conf:
   form do |f|
     f.inputs 'Article' do
       f.input :title
@@ -43,26 +47,24 @@ Why 2 separated scripts? In this way you can include a different version of *med
   end
 ```
 
-Some more buttons:
+### Buttons configuration
 
-`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"]}}' } }`
+```ruby
+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
-
-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"
-
-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.
+- 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"
+- 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.
 
 ## 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/app/assets/stylesheets/activeadmin/_medium_editor_input.scss

@@ -0,0 +1,51 @@
+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;
+    }
+
+    ol {
+      list-style-type: decimal;
+    }
+
+    ul {
+      list-style-type: disc;
+    }
+
+    ul, ol {
+      margin: 0 1.5em 1.5em 0;
+      padding-left: 1.5em;
+    }
+  }
+
+  .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;
+}

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

@@ -0,0 +1,31 @@
+@import "settings";
+@import "animations/image-loading";
+@import "animations/pop-upwards";
+@import "components/anchor-preview";
+@import "components/file-dragging";
+@import "components/placeholder";
+@import "components/toolbar";
+@import "components/toolbar-form";
+@import "util/clearfix";
+
+// contenteditable rules
+.medium-editor-element {
+    word-wrap: break-word;
+    min-height: 30px;
+
+    img {
+        max-width: 100%;
+    }
+
+    sub {
+        vertical-align: sub;
+    }
+
+    sup {
+        vertical-align: super;
+    }
+}
+
+.medium-editor-hidden {
+    display: none;
+}