richer_text 0.0.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e3e144daed92cf04465df7c11e55a30bec134bd6abd083b2ce76b078eb579323
-  data.tar.gz: 348c16817e8d8faad41627f985bb6d4dbf7392cd67d04b9faed369cd2ade73a5
+  metadata.gz: 8ab9e5f516632d096522a7aa18daaad74e8c6b2eb5736bce0aff526e49a6f5a0
+  data.tar.gz: 532ff98188ba2b2425188cfcbec7cf80d5563d65339c7a247fdebb41d418247a
 SHA512:
-  metadata.gz: 4e73645fe681761bc2941cc3814f4ecc2e84c6ad55060e4a62e84351393a6e6fe089a511c4e1a92072c52c6bc9a971d754706df22b57604789d3efc0dd44359e
-  data.tar.gz: 78bfe77159991d5449f5bfb57dd9727bc5aafa87d648f06913089e791ca69165eab938f8095c82f408a78727c1620f1011fff99803db8dcb7ff53ca22c97f8ee
+  metadata.gz: 39981e09d8ce208402c1c66a1541a706af868ad1563d4497b5d919a452256da00308448a6c08a5751f5cebc4b1613c165a2c0ec4d9302a8356a0f33f27f653db
+  data.tar.gz: 5ea9229f6bfd06ab525ab96b543dc63eed8dcbd34b3419f2dda0fe1058dba8168d881e29871917916ba1b03be7b7d7372da1b233f7c37018528f7c867383d4a6

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/helpers/richer_text/tag_helper.rb

@@ -0,0 +1,49 @@
+require "action_view/helpers/tags/placeholderable"
+
+module ActionView::Helpers
+  class Tags::Editor < Tags::Base
+    include Tags::Placeholderable
+
+    def render
+      options = @options.stringify_keys
+      options["value"] = options.fetch("value") { value&.to_html }
+      add_default_name_and_id(options)
+
+      @template_object.richer_text_area_tag(options["name"], options["value"], options.except("value"))
+    end
+  end
+
+  module FormHelper
+    def richer_text_area(object_name, method, options = {})
+      Tags::Editor.new(object_name, method, self, options).render
+    end
+  end
+
+  class FormBuilder
+    def richer_text_area(method, options = {})
+      @template.richer_text_area(@object_name, method, objectify_options(options))
+    end
+  end
+end
+
+
+module RicherText
+  module TagHelper
+    cattr_accessor(:id, instance_accessor: false) { 0 }
+
+    def richer_text_area_tag(name, value = nil, options = {})
+      options = options.symbolize_keys
+      options[:id] ||= "editor_input_#{TagHelper.id += 1}"
+      options[:class] ||= "editor-input"
+
+      # So that we can access the content in the tiptap editor
+      options[:content] ||= value
+
+      # editor_toolbar(id: options[:id]) + content_tag("textarea", value, options)
+      content_tag("div", data: { controller: "richer-text-editor", action: "editor:update->richer-text-editor#update" }) do
+        hidden_field_tag(name, value, { class: "w-full", data: { richer_text_editor_target: "input" } }) +
+        tag("richer-text-editor", options)
+      end
+    end
+  end
+end

data/app/javascript/controllers/richer_text_editor_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="richer-text-editor"
+export default class extends Controller {
+  static targets = ["input"];
+
+  update(event) {
+    this.inputTarget.value = event.detail.html;
+  }
+}

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, attributes: %w(id class style data-color)) %>
+</div>

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

@@ -0,0 +1,49 @@
+require "pathname"
+
+module RicherText
+  module Generators
+    class InstallGenerator < ::Rails::Generators::Base
+      source_root RicherText::Engine.root
+
+      def create_migrations
+        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"
+        )
+      end
+
+      def install_javascript_dependencies
+        destination = Pathname(destination_root)
+
+        if destination.join("package.json").exist?
+          say "Adding dependencies to package.json", :green
+          run "yarn add react react-dom highlight.js @afomera/richer-text"
+        end
+
+        say "Adding import to application.js", :green
+        append_to_file "app/javascript/application.js", %(import "@afomera/richer-text"\n)
+      end
+
+      def install_stylesheet_dependencies
+        destination = Pathname(destination_root)
+
+        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)
+        end
+      end
+
+      def generate_stimulus_controller
+        say "Copying Stimulus controller", :green
+        copy_file "app/javascript/controllers/richer_text_editor_controller.js", "app/javascript/controllers/richer_text_editor_controller.js"
+
+        say "Updating Stimulus manifest", :green
+        rails_command "stimulus:manifest:update"
+      end
+    end
+  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
+      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/engine.rb

@@ -10,5 +10,11 @@ module RicherText
         include RicherText::Attribute
       end
     end
+
+    initializer "richer_text.helper" do
+      ActiveSupport.on_load(:action_controller_base) do
+        helper RicherText::Engine.helpers
+      end
+    end
   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.0.1"
+  VERSION = "0.2.0"
 end

data/lib/richer_text.rb

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

data/lib/tasks/richer_text_tasks.rake

@@ -1,4 +1,4 @@
-# desc "Explaining what the task does"
-# task :richer_text do
-#   # Task goes here
-# end
+desc "Installs RicherText into your application"
+task "richer_text:install" do
+  Rails::Command.invoke :generate, ["richer_text:install"]
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: richer_text
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.2.0
 platform: ruby
 authors:
 - Andrea Fomera
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-07-28 00:00:00.000000000 Z
+date: 2023-07-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -38,18 +38,23 @@ files:
 - app/assets/stylesheets/richer_text/application.css
 - app/controllers/richer_text/application_controller.rb
 - app/helpers/richer_text/application_helper.rb
+- app/helpers/richer_text/tag_helper.rb
+- app/javascript/controllers/richer_text_editor_controller.js
 - app/jobs/richer_text/application_job.rb
 - app/mailers/richer_text/application_mailer.rb
 - 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
 - lib/richer_text.rb
 - lib/richer_text/attribute.rb
 - 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