activeadmin_medium_editor 0.2.0 → 0.2.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. checksums.yaml +5 -5
  2. data/LICENSE.txt +1 -1
  3. data/README.md +29 -30
  4. data/Rakefile +15 -2
  5. data/app/assets/javascripts/activeadmin/medium_editor_input.js +18 -16
  6. data/app/assets/stylesheets/activeadmin/_medium_editor_input.scss +90 -0
  7. data/app/assets/stylesheets/activeadmin/medium_editor/_settings.scss +6 -0
  8. data/app/assets/stylesheets/activeadmin/medium_editor/animations/_image-loading.scss +8 -0
  9. data/app/assets/stylesheets/activeadmin/medium_editor/animations/_pop-upwards.scss +20 -0
  10. data/app/assets/stylesheets/activeadmin/medium_editor/components/_anchor-preview.scss +24 -0
  11. data/app/assets/stylesheets/activeadmin/medium_editor/components/_file-dragging.scss +12 -0
  12. data/app/assets/stylesheets/activeadmin/medium_editor/components/_placeholder.scss +27 -0
  13. data/app/assets/stylesheets/activeadmin/medium_editor/components/_toolbar-form.scss +44 -0
  14. data/app/assets/stylesheets/activeadmin/medium_editor/components/_toolbar.scss +98 -0
  15. data/app/assets/stylesheets/activeadmin/medium_editor/medium_editor.scss +31 -0
  16. data/app/assets/stylesheets/activeadmin/medium_editor/themes/beagle.scss +120 -0
  17. data/app/assets/stylesheets/activeadmin/medium_editor/themes/bootstrap.scss +101 -0
  18. data/app/assets/stylesheets/activeadmin/medium_editor/themes/default.scss +87 -0
  19. data/app/assets/stylesheets/activeadmin/medium_editor/themes/flat.scss +90 -0
  20. data/app/assets/stylesheets/activeadmin/medium_editor/themes/mani.scss +87 -0
  21. data/app/assets/stylesheets/activeadmin/medium_editor/themes/roman.scss +87 -0
  22. data/app/assets/stylesheets/activeadmin/medium_editor/themes/tim.scss +101 -0
  23. data/app/assets/stylesheets/activeadmin/medium_editor/util/_clearfix.scss +7 -0
  24. data/lib/activeadmin/medium_editor.rb +2 -0
  25. data/lib/activeadmin/medium_editor/engine.rb +2 -0
  26. data/lib/activeadmin/medium_editor/version.rb +3 -1
  27. data/lib/activeadmin_medium_editor.rb +2 -0
  28. data/lib/formtastic/inputs/medium_editor_input.rb +3 -1
  29. metadata +180 -30
  30. data/.gitignore +0 -3
  31. data/Gemfile +0 -4
  32. data/activeadmin_medium_editor.gemspec +0 -19
  33. data/app/assets/stylesheets/activeadmin/_medium_editor_input.sass +0 -36
  34. data/app/assets/stylesheets/activeadmin/medium_editor/medium_editor.css +0 -230
  35. data/app/assets/stylesheets/activeadmin/medium_editor/medium_editor.min.css +0 -1
  36. data/app/assets/stylesheets/activeadmin/medium_editor/themes/beagle.css +0 -81
  37. data/app/assets/stylesheets/activeadmin/medium_editor/themes/beagle.min.css +0 -1
  38. data/app/assets/stylesheets/activeadmin/medium_editor/themes/bootstrap.css +0 -67
  39. data/app/assets/stylesheets/activeadmin/medium_editor/themes/bootstrap.min.css +0 -1
  40. data/app/assets/stylesheets/activeadmin/medium_editor/themes/default.css +0 -63
  41. data/app/assets/stylesheets/activeadmin/medium_editor/themes/default.min.css +0 -1
  42. data/app/assets/stylesheets/activeadmin/medium_editor/themes/flat.css +0 -58
  43. data/app/assets/stylesheets/activeadmin/medium_editor/themes/flat.min.css +0 -1
  44. data/app/assets/stylesheets/activeadmin/medium_editor/themes/mani.css +0 -57
  45. data/app/assets/stylesheets/activeadmin/medium_editor/themes/mani.min.css +0 -1
  46. data/app/assets/stylesheets/activeadmin/medium_editor/themes/roman.css +0 -58
  47. data/app/assets/stylesheets/activeadmin/medium_editor/themes/roman.min.css +0 -1
  48. data/app/assets/stylesheets/activeadmin/medium_editor/themes/tim.css +0 -67
  49. data/app/assets/stylesheets/activeadmin/medium_editor/themes/tim.min.css +0 -1
  50. data/screenshot.jpg +0 -0
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
- SHA1:
3
- metadata.gz: 3cfa14ae07c0f0f02d4f8d61a06b23043ce42863
4
- data.tar.gz: e861e33d9b4cc01196437458ff942f02c7d61865
2
+ SHA256:
3
+ metadata.gz: be1101431f01788540141fa55d6eae555ef26001cb65fc74336d2f9f2eeda1aa
4
+ data.tar.gz: 9cf68f6e9c2288b1a228d6f61d00aa24152ab600527ac1d92d5ed225c9f33a8f
5
5
  SHA512:
6
- metadata.gz: 8d34df87dcae156aa4adb8e90c76efdc328fd4fd2d2a361e4d40d09259c85d71931d41ff7cf7e5a36991b58e3125a4c8ee1445460d17c68ad476bfb6aa75e865
7
- data.tar.gz: 596515e9b13aabe5c6284200952354d7cd18b756ccd2c672de041053298eb1781fa83121855eb48dc83110ff1915f9240db394355d703e160360ab3c8d055066
6
+ metadata.gz: d00e01a203f9abf451c3390838a0364d55c0983b9ae9004f8f8f2dacf90b660c9553b2ff2f4c9fdaa690076b9355716fbff58c3a687702e4968a6b43d8134c7d
7
+ data.tar.gz: 8bdefac2797eb8618cf0a7ae29e4fdd3dc1a80543c65f96f72ee52c38db457d7a89919c6a462bb7cca1d96de6c7a5804bbe523297f0c18c9db21a617f6863c77
data/LICENSE.txt CHANGED
@@ -1,4 +1,4 @@
1
- Copyright (c) 2017 Mattia Roccoberton
1
+ Copyright (c) 2017-2020 Mattia Roccoberton
2
2
 
3
3
  Permission is hereby granted, free of charge, to any person obtaining
4
4
  a copy of this software and associated documentation files (the
data/README.md CHANGED
@@ -1,40 +1,42 @@
1
- # ActiveAdmin Medium Editor [![Gem Version](https://badge.fury.io/rb/activeadmin_medium_editor.svg)](https://badge.fury.io/rb/activeadmin_medium_editor)
1
+ # 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)
2
2
 
3
3
  An Active Admin plugin to use [medium-editor](https://github.com/yabwe/medium-editor), a compact and clean WYSIWYG editor.
4
4
 
5
- ![screenshot](screenshot.jpg)
5
+ ![screenshot](screenshot.png)
6
6
 
7
- *Usage*: select some text in the input, a pop-up menu is shown with the available buttons
7
+ ## Usage
8
+ - After the installation, select some text in the editor
9
+ - A pop-up menu is shown with the available buttons
10
+ - Click on a button and the effect will be applied to the selected text
8
11
 
9
12
  ## Install
10
-
11
- - Add to your Gemfile:
12
- `gem 'activeadmin_medium_editor'`
13
- - Execute bundle
14
- - Add at the end of your ActiveAdmin styles (_app/assets/stylesheets/active_admin.scss_):
15
- ```css
13
+ - After installing Active Admin, add to your Gemfile: `gem 'activeadmin_medium_editor'` (and execute *bundle*)
14
+ - Add at the end of your Active Admin styles (_app/assets/stylesheets/active_admin.scss_):
15
+ ```scss
16
+ @import 'activeadmin/medium_editor/medium_editor';
16
17
  @import 'activeadmin/medium_editor_input';
17
- @import 'activeadmin/medium_editor/themes/default.css'; // or another theme
18
+ @import 'activeadmin/medium_editor/themes/default'; // or another theme
18
19
  ```
19
- - Add at the end of your ActiveAdmin javascripts (_app/assets/javascripts/active_admin.js_):
20
+ - Add at the end of your Active Admin javascripts (_app/assets/javascripts/active_admin.js_):
20
21
  ```js
21
22
  //= require activeadmin/medium_editor/medium_editor
22
23
  //= require activeadmin/medium_editor_input
23
24
  ```
24
25
  - Use the input with `as: :medium_editor` in Active Admin model conf
26
+ - **data-options**: permits to set *medium-editor* options directly - see [options list](https://github.com/yabwe/medium-editor#mediumeditor-options) (examples below)
25
27
 
26
- Why 2 separated scripts? In this way you can include a different version of *medium-editor* if you like.
27
-
28
- ## Options
28
+ > Why 2 separated scripts/styles? In this way you can include a different version of *medium-editor* if you like
29
29
 
30
- **data-options**: permits to set *medium-editor* options directly - see [options list](https://github.com/yabwe/medium-editor#mediumeditor-options)
30
+ > **UPDATE FROM VERSION < 0.2.8**: please change your _app/assets/stylesheets/active_admin.scss_ using the new import lines above
31
31
 
32
32
  ## Examples
33
33
 
34
+ ### Basic usage
35
+
34
36
  ```ruby
35
- # ActiveAdmin article form conf:
37
+ # Active Admin post form conf:
36
38
  form do |f|
37
- f.inputs 'Article' do
39
+ f.inputs 'Post' do
38
40
  f.input :title
39
41
  f.input :description, as: :medium_editor, input_html: { data: { options: '{"spellcheck":false,"toolbar":{"buttons":["bold","italic","underline","anchor"]}}' } }
40
42
  f.input :published
@@ -43,26 +45,23 @@ Why 2 separated scripts? In this way you can include a different version of *med
43
45
  end
44
46
  ```
45
47
 
46
- Some more buttons:
47
-
48
- `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"]}}' } }`
49
-
50
- ## Notes
48
+ ### Buttons configuration
51
49
 
52
- 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"
50
+ ```ruby
51
+ 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] }
52
+ f.input :description, as: :medium_editor, input_html: { data: { options: { toolbar: toolbar } } }
53
+ ```
53
54
 
54
- 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.
55
+ For details about the buttons' effect please refer to medium-editor documentation.
55
56
 
56
57
  ## Do you like it? Star it!
57
-
58
58
  If you use this component just star it. A developer is more motivated to improve a project when there is some interest.
59
59
 
60
- 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.
60
+ 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.
61
61
 
62
62
  ## Contributors
63
-
64
- - [Mattia Roccoberton](http://blocknot.es) - creator, maintainer
63
+ - [Mattia Roccoberton](http://blocknot.es): author
64
+ - The good guys that opened issues and pull requests from time to time
65
65
 
66
66
  ## License
67
-
68
- [MIT](LICENSE.txt)
67
+ The gem is available as open-source under the terms of the [MIT](LICENSE.txt).
data/Rakefile CHANGED
@@ -1,3 +1,16 @@
1
- # encoding: utf-8
1
+ # frozen_string_literal: true
2
2
 
3
- require "bundler/gem_tasks"
3
+ require 'bundler/gem_tasks'
4
+
5
+ begin
6
+ require 'rspec/core/rake_task'
7
+
8
+ RSpec::Core::RakeTask.new(:spec) do |t|
9
+ # t.ruby_opts = %w[-w]
10
+ t.rspec_opts = ['--color', '--format documentation']
11
+ end
12
+
13
+ task default: :spec
14
+ rescue LoadError
15
+ puts '! LoadError: no RSpec available'
16
+ end
@@ -1,18 +1,20 @@
1
- function initMediumEditors() {
2
- $('.medium-editor').each(function () {
3
- if (!$(this).hasClass('medium-editor--active')) {
4
- var options = {};
5
- options = $.extend({}, options, $(this).data('options'));
6
- new MediumEditor($(this), options);
7
- $(this).addClass('medium-editor--active');
8
- }
9
- });
10
- }
1
+ (function () {
2
+ 'use strict'
11
3
 
12
- $(document).on('has_many_add:after', function () {
13
- initMediumEditors();
14
- });
4
+ // --- functions -------------------------------------------------------------
5
+ function initMediumEditors() {
6
+ $('[data-aa-medium-editor]').each(function () {
7
+ if (!$(this).hasClass('medium-editor--active')) {
8
+ let options = {}
9
+ options = $.extend({}, options, $(this).data('options'))
10
+ new MediumEditor($(this), options)
11
+ $(this).addClass('medium-editor--active')
12
+ }
13
+ })
14
+ }
15
15
 
16
- $(document).ready( function() {
17
- initMediumEditors();
18
- });
16
+ // --- events ----------------------------------------------------------------
17
+ $(document).ready(initMediumEditors)
18
+ $(document).on('has_many_add:after', '.has_many_container', initMediumEditors)
19
+ $(document).on('turbolinks:load', initMediumEditors)
20
+ })()
@@ -0,0 +1,90 @@
1
+ body.active_admin form {
2
+ textarea.medium-editor-hidden{
3
+ display: none;
4
+ }
5
+
6
+ .medium-editor-element {
7
+ background-color: #fff;
8
+ border-radius: 3px;
9
+ border: 1px solid #c9d0d6;
10
+ display: inline-block;
11
+ max-height: 200px;
12
+ min-height: 100px;
13
+ overflow-y: scroll;
14
+ padding: 8px 10px 7px;
15
+ width: calc(80% - 22px);
16
+
17
+ // reset internal elements
18
+ * {
19
+ margin: initial;
20
+ padding: initial;
21
+ text-align: initial;
22
+ }
23
+
24
+ h1 {
25
+ margin-top: 0.67em;
26
+ margin-bottom: 0.67em;
27
+ }
28
+
29
+ h2 {
30
+ margin-top: 0.83em;
31
+ margin-bottom: 0.83em;
32
+ }
33
+
34
+ h3 {
35
+ margin-top: 1em;
36
+ margin-bottom: 1em;
37
+ }
38
+
39
+ h4 {
40
+ margin-top: 1.33em;
41
+ margin-bottom: 1.33em;
42
+ }
43
+
44
+ h5 {
45
+ margin-top: 1.67em;
46
+ margin-bottom: 1.67em;
47
+ }
48
+
49
+ h6 {
50
+ margin-top: 2.33em;
51
+ margin-bottom: 2.33em;
52
+ }
53
+
54
+ blockquote {
55
+ margin: 1.5em;
56
+ }
57
+
58
+ ol {
59
+ list-style-type: decimal;
60
+ }
61
+
62
+ p {
63
+ margin-top: 1em;
64
+ margin-bottom: 1em;
65
+ }
66
+
67
+ ul {
68
+ list-style-type: disc;
69
+ }
70
+
71
+ ul, ol {
72
+ margin: 1em 2em 1em 0;
73
+ padding-left: 2em;
74
+ }
75
+ }
76
+
77
+ .medium-editor-element:focus {
78
+ border-color: transparent;
79
+ }
80
+
81
+ .medium_editor > label {
82
+ display: inline-block;
83
+ float: none;
84
+ vertical-align: top;
85
+ }
86
+ }
87
+
88
+ button.medium-editor-action {
89
+ border-radius: 0;
90
+ }
@@ -0,0 +1,6 @@
1
+ // typography
2
+ $font-fixed: Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
3
+ $font-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
4
+
5
+ // ui / positioning
6
+ $z-toolbar: 2000 !default;
@@ -0,0 +1,8 @@
1
+ @keyframes medium-editor-image-loading {
2
+ 0% {
3
+ transform: scale(0)
4
+ }
5
+ 100% {
6
+ transform: scale(1);
7
+ }
8
+ }
@@ -0,0 +1,20 @@
1
+ @keyframes medium-editor-pop-upwards {
2
+ 0% {
3
+ opacity: 0;
4
+ transform: matrix(.97, 0, 0, 1, 0, 12);
5
+ }
6
+
7
+ 20% {
8
+ opacity: .7;
9
+ transform: matrix(.99, 0, 0, 1, 0, 2);
10
+ }
11
+
12
+ 40% {
13
+ opacity: 1;
14
+ transform: matrix(1, 0, 0, 1, 0, -1);
15
+ }
16
+
17
+ 100% {
18
+ transform: matrix(1, 0, 0, 1, 0, 0);
19
+ }
20
+ }
@@ -0,0 +1,24 @@
1
+ .medium-editor-anchor-preview {
2
+ font-family: $font-sans-serif;
3
+ font-size: 16px;
4
+ left: 0;
5
+ line-height: 1.4;
6
+ max-width: 280px;
7
+ position: absolute;
8
+ text-align: center;
9
+ top: 0;
10
+ word-break: break-all;
11
+ word-wrap: break-word;
12
+ visibility: hidden;
13
+ z-index: $z-toolbar;
14
+
15
+ a {
16
+ color: #fff;
17
+ display: inline-block;
18
+ margin: 5px 5px 10px;
19
+ }
20
+ }
21
+
22
+ .medium-editor-anchor-preview-active {
23
+ visibility: visible;
24
+ }
@@ -0,0 +1,12 @@
1
+ .medium-editor-dragover {
2
+ background: #ddd;
3
+ }
4
+
5
+ .medium-editor-image-loading {
6
+ animation: medium-editor-image-loading 1s infinite ease-in-out;
7
+ background-color: #333;
8
+ border-radius: 100%;
9
+ display: inline-block;
10
+ height: 40px;
11
+ width: 40px;
12
+ }
@@ -0,0 +1,27 @@
1
+ .medium-editor-placeholder {
2
+ position: relative;
3
+
4
+ &:after {
5
+ content: attr(data-placeholder) !important;
6
+ font-style: italic;
7
+ position: absolute;
8
+ left: 0;
9
+ top: 0;
10
+ white-space: pre;
11
+ padding: inherit;
12
+ margin: inherit;
13
+ }
14
+ }
15
+
16
+ .medium-editor-placeholder-relative {
17
+ position: relative;
18
+
19
+ &:after {
20
+ content: attr(data-placeholder) !important;
21
+ font-style: italic;
22
+ position: relative;
23
+ white-space: pre;
24
+ padding: inherit;
25
+ margin: inherit;
26
+ }
27
+ }
@@ -0,0 +1,44 @@
1
+ .medium-editor-toolbar-form {
2
+ display: none;
3
+
4
+ input,
5
+ a {
6
+ font-family: $font-sans-serif;
7
+ }
8
+
9
+ .medium-editor-toolbar-form-row {
10
+ line-height: 14px;
11
+ margin-left: 5px;
12
+ padding-bottom: 5px;
13
+ }
14
+
15
+ .medium-editor-toolbar-input,
16
+ label {
17
+ border: none;
18
+ box-sizing: border-box;
19
+ font-size: 14px;
20
+ margin: 0;
21
+ padding: 6px;
22
+ width: 316px;
23
+ display: inline-block;
24
+
25
+ &:focus {
26
+ appearance: none;
27
+ border: none;
28
+ box-shadow: none;
29
+ outline: 0;
30
+ }
31
+ }
32
+
33
+ a {
34
+ display: inline-block;
35
+ font-size: 24px;
36
+ font-weight: bolder;
37
+ margin: 0 10px;
38
+ text-decoration: none;
39
+ }
40
+ }
41
+
42
+ .medium-editor-toolbar-form-active {
43
+ display: block;
44
+ }
@@ -0,0 +1,98 @@
1
+ %medium-toolbar-arrow {
2
+ border-style: solid;
3
+ content: '';
4
+ display: block;
5
+ height: 0;
6
+ left: 50%;
7
+ margin-left: -8px;
8
+ position: absolute;
9
+ width: 0;
10
+ }
11
+
12
+ .medium-toolbar-arrow-under:after {
13
+ @extend %medium-toolbar-arrow;
14
+ border-width: 8px 8px 0 8px;
15
+ }
16
+
17
+ .medium-toolbar-arrow-over:before {
18
+ @extend %medium-toolbar-arrow;
19
+ border-width: 0 8px 8px 8px;
20
+ top: -8px;
21
+ }
22
+
23
+ .medium-editor-toolbar {
24
+ font-family: $font-sans-serif;
25
+ font-size: 16px;
26
+ left: 0;
27
+ position: absolute;
28
+ top: 0;
29
+ visibility: hidden;
30
+ z-index: $z-toolbar;
31
+
32
+ ul {
33
+ margin: 0;
34
+ padding: 0;
35
+ }
36
+
37
+ li {
38
+ float: left;
39
+ list-style: none;
40
+ margin: 0;
41
+ padding: 0;
42
+
43
+ button {
44
+ box-sizing: border-box;
45
+ cursor: pointer;
46
+ display: block;
47
+ font-size: 14px;
48
+ line-height: 1.33;
49
+ margin: 0;
50
+ padding: 15px;
51
+ text-decoration: none;
52
+
53
+ &:focus {
54
+ outline: none;
55
+ }
56
+ }
57
+
58
+ .medium-editor-action-underline {
59
+ text-decoration: underline;
60
+ }
61
+
62
+ .medium-editor-action-pre {
63
+ font-family: $font-fixed;
64
+ font-size: 12px;
65
+ font-weight: 100;
66
+ padding: 15px 0;
67
+ }
68
+ }
69
+ }
70
+
71
+ .medium-editor-toolbar-active {
72
+ visibility: visible;
73
+ }
74
+
75
+ .medium-editor-sticky-toolbar {
76
+ position: fixed;
77
+ top: 1px;
78
+ }
79
+
80
+ .medium-editor-relative-toolbar {
81
+ position: relative;
82
+ }
83
+
84
+ .medium-editor-toolbar-active.medium-editor-stalker-toolbar {
85
+ animation: medium-editor-pop-upwards 160ms forwards linear;
86
+ }
87
+
88
+ .medium-editor-toolbar-actions {
89
+ @extend %clearfix;
90
+ }
91
+
92
+ .medium-editor-action-bold {
93
+ font-weight: bolder;
94
+ }
95
+
96
+ .medium-editor-action-italic {
97
+ font-style: italic;
98
+ }