richer_text 0.1.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b63576861e360399b080b94d0bc593c516688af16f6dbfd0ea70ee922deddf34
-  data.tar.gz: a488d3031c92e1d0e34662bf942e48209030e2393a9227737e905ffb7041e60d
+  metadata.gz: 4015b9a354c480f94ac845846dc9fdee7d4f9402f42175ebe8080ce2b0e66d87
+  data.tar.gz: 4ee8d41ce6076773f86d2703cac148fb41f8a98cdf0feedfc0da0e584575245d
 SHA512:
-  metadata.gz: 7dbebb9524973cf7a949ee78b45fa80c73c97286e17d83a901281f500fde88d9bc8b03f103552545fd0fc5c066181a0a729dc4ba2e86575306c8be423b6b65d7
-  data.tar.gz: 45832c613c64aced07c6260163d4a1af2afe815a1af1a83beb799db24731b22e0787a262c5b0f109d0c1563510c594c1664294f5df1efe6c54a7d62b53ccd04d
+  metadata.gz: 8cfe5f6dc39db89cc2327a40aa0d4198b1785850cd2dd1d1f11a2fa941dea3a68cd771a8f40295c6f8ba8f6c6a0752ab9aa43382dc19fbd3a2261693bd5a27e9
+  data.tar.gz: 5beab5c3cd4e36867b8d302f2cc3a08221dc739d2ab9f3812adf59f06ff1541faacd99be07947b0315f648e1bf0cfb469c3dfd1c4df5c9ac8af3551c58b6c75c

data/README.md

@@ -1,10 +1,11 @@
 # RicherText
-Short description and motivation.
 
-## Usage
-How to use my plugin.
+RicherText aims to provide a richer text editing experience than what comes out of the box with ActionText in Rails. **It is however a seperate thing from ActionText** and is **not** backwards compatible.
+
+RicherText uses React and TipTap under the hood to create an editor, this does mean that you'll have react and react-dom in your project, but you absolutely don't need to use it outside of the RicherText editor. Additionally there's currently a hard requirement for ActiveStorage as well.
 
 ## Installation
+
 Add this line to your application's Gemfile:
 
 ```ruby
@@ -12,17 +13,73 @@ gem "richer_text"
 ```
 
 And then execute:
+
 ```bash
 $ bundle
 ```
 
-Or install it yourself as:
+Once you've installed the gem the next step is to run the Generator and install all required libraries.
+
 ```bash
-$ gem install richer_text
+$ rails richer_text:install
+```
+
+> [!IMPORTANT]  
+> If you wish to use highlight.js outside of RicherText you'll need to add some code to your javascript entry point.
+
+```js
+const hljs = require("highlight.js");
+
+document.addEventListener("turbo:load", (event) => {
+  document.querySelectorAll("pre").forEach((block) => {
+    hljs.highlightElement(block);
+  });
+});
+```
+
+## Usage
+
+> [!WARNING]  
+> You probably shouldn't use this gem / npm package (yet!) for anything serious. It's still undergoing development. But please do try it on a non-production app!
+
+To use RicherText, once you've completed the installation process is a matter of doing the following:
+
+**Add has_richer_text to a model**
+
+Take a Post model where you'd like to add RicherText to write, and edit the body attribute:
+
+```ruby
+class Post < ApplicationRecord
+  has_richer_text :body
+end
+```
+
+**Add the form helper to the form**
+
+Inside of your form partial:
+
+```erb
+  <%= form.label :body %>
+  <%= form.richer_text_area :body %>
+```
+
+Optionally you can pass arguments to the RicherText editor...
+
+```erb
+  <%= form.label :body %>
+  <%= form.richer_text_area :body, callouts: true, placeholder: "Write something..." %>
+```
+
+**Render the richer text content**
+
+```erb
+  <%= @post.body %>
 ```
 
 ## Contributing
+
 Contribution directions go here.
 
 ## License
+
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/assets/stylesheets/richer_text/richer-text.css

@@ -0,0 +1,32 @@
+.richer-text table {
+  border-collapse: collapse;
+  margin: 0;
+  overflow: hidden;
+  table-layout: fixed;
+  width: 100%;
+}
+
+.richer-text table td,
+.richer-text table th {
+  border: 2px solid #ced4da;
+  box-sizing: border-box;
+  min-width: 1em;
+  padding: 3px 5px;
+  position: relative;
+  vertical-align: top;
+}
+
+.richer-text table td>*,
+.richer-text table th>* {
+  margin-bottom: 0;
+}
+
+.richer-text table th {
+  background-color: #f1f3f5;
+  font-weight: bold;
+  text-align: left;
+}
+
+.richer-text p {
+  margin: 0;
+}

data/app/models/richer_text/rich_text.rb

@@ -1,17 +1,18 @@
 module RicherText
   class RichText < ApplicationRecord
-    belongs_to :record, polymorphic: true
+    belongs_to :record, polymorphic: true, touch: true
 
     serialize :body, RicherText::Content
 
     delegate :to_s, :nil?, to: :body
+    delegate :blank?, :empty?, :present?, to: :to_html
 
     has_many_attached :images
 
     before_save :update_images
 
     def to_html
-      body&.to_html
+      body&.to_html&.to_s
     end
 
     private

data/app/views/richer_text/contents/_content.html.erb

@@ -0,0 +1,3 @@
+<div class="richer-text">
+  <%= sanitize(content.to_html, tags: %w(div h1 h2 blockquote s del strong i em br pre code ol ul li table tbody th td tr p), attributes: %w(id class style data-color colspan rowspan)) %>
+</div>

data/lib/generators/richer_text/install/install_generator.rb

@@ -9,6 +9,18 @@ module RicherText
         rails_command "railties:install:migrations FROM=active_storage,richer_text", inline: true
       end
 
+      def copy_files
+        copy_file(
+          "app/views/richer_text/contents/_content.html.erb",
+          "app/views/richer_text/contents/_content.html.erb"
+        )
+
+        copy_file(
+          "app/assets/stylesheets/richer_text/richer-text.css",
+          "app/assets/stylesheets/richer-text.css"
+        )
+      end
+
       def install_javascript_dependencies
         destination = Pathname(destination_root)
 
@@ -26,7 +38,10 @@ module RicherText
 
         if destination.join("app/assets/stylesheets/application.tailwind.css").exist?
           say "Adding import to application.tailwind.css", :green
-          prepend_to_file "app/assets/stylesheets/application.tailwind.css", %(@import "@afomera/richer-text/dist/css/richer-text.css";\n@import "highlight.js/styles/github-dark.css";\n)
+          prepend_to_file "app/assets/stylesheets/application.tailwind.css", %(@import "@afomera/richer-text/dist/css/richer-text.css";\n@import "highlight.js/styles/github-dark.css";\n@import "richer-text.css";\n)
+        elsif (stylesheets = Dir.glob "#{destination_root}/app/assets/stylesheets/application.*.{scss}").length > 0
+          say "Adding import to #{stylesheets.first}", :green
+          prepend_to_file stylesheets.first, %(@import "@afomera/richer-text/dist/css/richer-text";\n@import "highlight.js/styles/github-dark";\n@import "richer-text";\n)
         end
       end
 

data/lib/richer_text/content.rb

@@ -1,6 +1,6 @@
 module RicherText
   class Content
-    include Serialization
+    include ActiveModel::Conversion, Serialization, Rendering
 
     delegate :blank?, :empty?, :html_safe, :present?, to: :to_html
 
@@ -15,7 +15,7 @@ module RicherText
     end
 
     def to_s
-      to_html.html_safe # TODO: add some kind of sanitization
+      render partial: to_partial_path, layout: false, locals: { content: self }
     end
 
     def to_html
@@ -41,6 +41,7 @@ module RicherText
       end
     end
 
-    attr_reader :body, :fragment
+    attr_reader :fragment
+    attr_accessor :body
   end
 end

data/lib/richer_text/rendering.rb

@@ -0,0 +1,13 @@
+module RicherText
+  module Rendering
+    private
+
+    def render(*args, &block)
+      action_controller_renderer.render(*args, &block)
+    end
+
+    def action_controller_renderer
+      ActionController::Base.renderer
+    end
+  end
+end

data/lib/richer_text/version.rb

@@ -1,3 +1,3 @@
 module RicherText
-  VERSION = "0.1.0"
+  VERSION = "0.3.0"
 end

data/lib/richer_text.rb

@@ -9,6 +9,7 @@ module RicherText
 
   autoload :Attribute
   autoload :Content
+  autoload :Rendering
   autoload :Fragment
   autoload :Serialization
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: richer_text
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Andrea Fomera
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-07-29 00:00:00.000000000 Z
+date: 2023-08-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -36,6 +36,7 @@ files:
 - Rakefile
 - app/assets/config/richer_text_manifest.js
 - app/assets/stylesheets/richer_text/application.css
+- app/assets/stylesheets/richer_text/richer-text.css
 - app/controllers/richer_text/application_controller.rb
 - app/helpers/richer_text/application_helper.rb
 - app/helpers/richer_text/tag_helper.rb
@@ -45,6 +46,7 @@ files:
 - app/models/richer_text/application_record.rb
 - app/models/richer_text/rich_text.rb
 - app/views/layouts/richer_text/application.html.erb
+- app/views/richer_text/contents/_content.html.erb
 - config/routes.rb
 - db/migrate/20230107020316_create_richer_text_rich_texts.rb
 - lib/generators/richer_text/install/install_generator.rb
@@ -53,6 +55,7 @@ files:
 - lib/richer_text/content.rb
 - lib/richer_text/engine.rb
 - lib/richer_text/fragment.rb
+- lib/richer_text/rendering.rb
 - lib/richer_text/serialization.rb
 - lib/richer_text/version.rb
 - lib/tasks/richer_text_tasks.rake