Merge branch 'main' into main

Author: Thomaash

.eslintrc

@@ -25,7 +25,7 @@
     "semi": ["error", "never"],
     "sort-imports": ["error", { "ignoreDeclarationSort": true }]
   },
-  "ignorePatterns": ["dist/**/*.js", "**/vendor/**/*.js"],
+  "ignorePatterns": ["dist/**/*.js", "**/vendor/**/*.js", "action_text-trix/**/*.js"],
   "globals": {
     "after": true,
     "getComposition": true,

.github/workflows/ci.yml

@@ -1,24 +1,58 @@
 name: CI
 
+concurrency:
+  group: "${{github.workflow}}-${{github.ref}}"
+  cancel-in-progress: true
+
 on:
   push:
-    branches:
-      - main
+    branches: [ main ]
   pull_request:
+    types: [opened, synchronize]
+    branches: [ '*' ]
 
 jobs:
   build:
     name: Browser tests
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: "yarn"
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
       - run: bin/ci
+  rails-tests:
+    name: Downstream Rails integration tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: "yarn"
+      - uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: "3.4"
+      - name: Install Dependencies
+        run: yarn install --frozen-lockfile
+      - name: Packaging
+        run: yarn build
+      - name: Clone Rails
+        run: git clone --depth=1 https://github.com/rails/rails
+      - name: Configure Rails
+        run: |
+          sudo apt install libvips-tools
+          cd rails
+          yarn install --frozen-lockfile
+          bundle add action_text-trix --path ".."
+          bundle show --paths action_text-trix
+      - name: Action Text tests
+        run: |
+          cd rails/actiontext
+          bundle exec rake test test:system
 
 env:
   SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}

.node-version

@@ -1 +1 @@
-16.14.0
+18.18.0

README.md

@@ -98,6 +98,31 @@ import Trix from "trix"
 Trix.elements.TrixEditorElement.formAssociated = false
 ```
 
+When Trix is configured to be compatible with `ElementInternals`, it is also
+capable of functioning without an `<input type="hidden">` element. To configure
+a `<trix-editor>` element to skip creating its `<input type="hidden">`, set the
+element's `willCreateInput = false`:
+
+```js
+addEventListener("before-trix-initialize", (event) => {
+  const trixEditor = event.target
+
+  trixEditor.willCreateInput = false
+})
+```
+
+> [!NOTE]
+> Trix will *always* use an associated `<input type="hidden">` element when the
+> `[input]` attribute is set. To migrate to `<input>`-free support, set
+> `willCreateInput = false`, then render the `<trix-editor>` without the
+> `[input]` attribute.
+
+> [!WARNING]
+> In the absence of an `<input type="hidden">` element, the `<trix-editor>`
+> element's value will not be included in `<form>` element submissions unless it
+> is rendered with a `[name]` attribute. Set the `[name]` attribute to the same
+> value that the `<input type="hidden">` element would have.
+
 ## Invoking Internal Trix Actions
 
 Internal actions are defined in `controllers/editor_controller.js` and consist of:
@@ -156,7 +181,18 @@ To populate a `<trix-editor>` with stored content, include that content in the a
 </form>
 ```
 
-Always use an associated input element to safely populate an editor. Trix won’t load any HTML content inside a `<trix-editor>…</trix-editor>` tag.
+Use an associated input element to initially populate an editor. When an associated input element is absent, Trix will safely sanitize then load any HTML content inside a `<trix-editor>…</trix-editor>` tag.
+
+```html
+<form …>
+  <trix-editor>Editor content goes here</trix-editor>
+</form>
+```
+
+> [!WARNING]
+> When a `<trix-editor>` element initially connects with both HTML content *and*
+> an associated input element, Trix will *always* disregard the HTML content and
+> load its initial content from the associated input element.
 
 ## Validating the Editor
 
@@ -300,6 +336,27 @@ To store attachments, listen for the `trix-attachment-add` event. Upload the att
 
 If you don’t want to accept dropped or pasted files, call `preventDefault()` on the `trix-file-accept` event, which Trix dispatches just before the `trix-attachment-add` event.
 
+## Previewing Attached Files
+
+Trix automatically previews attached image files. To determine whether or not to preview an attached file, Trix compares the file's content type against the [Trix.Attachment.previewablePattern](./src/trix/models/attachment.js#L7). By default, Trix will preview the following content types:
+
+* `image/gif`
+* `image/png`
+* `image/webp`
+* `image/jpg`
+* `image/jpeg`
+
+To customize an attachment's preview, listen for the `trix-attachment-add` event. When handling the event, set the attachment's `previewable` attribute, then change its preview URL by calling `setPreviewURL`:
+
+```js
+addEventListener("trix-attachment-add", (event) => {
+  if (event.attachment.file instanceof File) {
+    event.attachment.setAttribute("previewable", true)
+    event.attachment.setPreviewURL("...")
+  }
+})
+```
+
 # Editing Text Programmatically
 
 You can manipulate a Trix editor programmatically through the `Trix.Editor` interface, available on each `<trix-editor>` element through its `editor` property.
@@ -558,6 +615,36 @@ For example if you want to keep a custom tag, you can access do that with:
 Trix.config.dompurify.ADD_TAGS = [ "my-custom-tag" ]
 ```
 
+## HTML Rendering
+
+Trix renders changes to editor content by replacing existing nodes with new nodes.
+
+To customize how Trix renders changes, set the `<trix-editor>` element's
+`render` property to a function that accepts a `<trix-editor>` instance and a
+[DocumentFragment][]:
+
+```js
+document.addEventListener("trix-before-render", (event) => {
+  const defaultRender = event.render
+
+  event.render = function(editorElement, documentFragment) {
+    // modify the documentFragment…
+    customize(documentFragment)
+
+    // render it with the default rendering function
+    defaultRender(editorElement, documentFragment)
+  }
+})
+```
+
+> [!CAUTION]
+> By the time that `render(editorElement, documentFragment)` is
+> invoked, Trix will have finalized modifications to the HTML content (like HTML
+> sanitization, for example). If you make further modifications to the content,
+> be sure that they are safe.
+
+[DocumentFragment]: https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
+
 ## Observing Editor Changes
 
 The `<trix-editor>` element emits several events which you can use to observe and respond to changes in editor state.
@@ -568,6 +655,10 @@ The `<trix-editor>` element emits several events which you can use to observe an
 
 * `trix-change` fires whenever the editor’s contents have changed.
 
+* `trix-before-render` fires before the editor’s new contents are rendered. You can override the function used to render the content through the `render` property on the event. The `render` function expects two positional arguments: the `<trix-editor>` element that will render and a [DocumentFragment](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment) instance that contains the new content. Read [HTML Rendering](#html-rendering) to learn more.
+
+* `trix-before-paste` fires just before text is pasted into the editor. You can use this to modify the content being pasted or prevent the paste event from happening at all. The `paste` property on the event contains the pasted `string` or `html`, and the `range` of the inserted text.
+
 * `trix-paste` fires whenever text is pasted into the editor. The `paste` property on the event contains the pasted `string` or `html`, and the `range` of the inserted text.
 
 * `trix-selection-change` fires any time the selected range changes in the editor.
@@ -578,6 +669,8 @@ The `<trix-editor>` element emits several events which you can use to observe an
 
 * `trix-attachment-add` fires after an attachment is added to the document. You can access the Trix attachment object through the `attachment` property on the event. If the `attachment` object has a `file` property, you should store this file remotely and set the attachment’s URL attribute. See the [attachment example](http://trix-editor.org/js/attachments.js) for detailed information.
 
+* `trix-attachment-edit` fires after an attachment is edited in the document. You can access the Trix attachment object through the `attachment` property on the event.
+
 * `trix-attachment-remove` fires when an attachment is removed from the document. You can access the Trix attachment object through the `attachment` property on the event. You may wish to use this event to clean up remotely stored files.
 
 * `trix-action-invoke` fires when a Trix action is invoked. You can access the `<trix-editor>` element through the event's `target` property, the element responsible for invoking the action through the `invokingElement` property, and the action's name through the `actionName` property. The `trix-action-invoke` event will only fire for [custom](#invoking-external-custom-actions) actions and not for [built-in](#invoking-internal-trix-actions).

action_text-trix/.gitignore

@@ -0,0 +1,2 @@
+Gemfile.lock
+pkg

action_text-trix/Gemfile

@@ -0,0 +1,4 @@
+source "https://rubygems.org"
+
+# Specify your gem's dependencies in trix.gemspec.
+gemspec

action_text-trix/LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 37signals, LLC
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

action_text-trix/README.md

@@ -0,0 +1,6 @@
+## Building the Trix Ruby gem
+
+1. `cd action_text-trix`
+2. `bundle exec rake sync` (updates files which must be committed to git)
+3. `bundle exec rake build`
+4. `gem push pkg/*.gem`

action_text-trix/Rakefile

@@ -0,0 +1,20 @@
+require "bundler/gem_tasks"
+require "rake/clean"
+
+task :sync do
+  require "json"
+
+  FileUtils.cp File.expand_path("../LICENSE", __dir__), __dir__, verbose: true
+
+  package_json = JSON.load(File.read(File.join(__dir__, "../package.json")))
+  version = package_json["version"]
+  File.write(File.join(__dir__, "lib", "action_text", "trix", "version.rb"), <<~RUBY)
+    module Trix
+      VERSION = "#{version}"
+    end
+  RUBY
+  puts "Updated gem version to #{version}"
+end
+
+CLEAN.add "pkg"
+CLOBBER.add "app/assets/javascripts/trix.js", "app/assets/stylesheets/trix.css"

action_text-trix/action_text-trix.gemspec

@@ -0,0 +1,27 @@
+require_relative "lib/action_text/trix/version"
+
+Gem::Specification.new do |spec|
+  spec.name     = "action_text-trix"
+  spec.version  = Trix::VERSION
+  spec.authors  = "37signals, LLC"
+  spec.summary  = "A rich text editor for everyday writing"
+  spec.license  = "MIT"
+
+  spec.homepage                    = "https://github.com/basecamp/trix"
+  spec.metadata["homepage_uri"]    = spec.homepage
+  spec.metadata["source_code_uri"] = spec.homepage
+  spec.metadata["changelog_uri"]   = "#{spec.homepage}/releases"
+
+  spec.metadata["rubygems_mfa_required"] = "true"
+
+  spec.files = [
+    "LICENSE",
+    "app/assets/javascripts/trix.js",
+    "app/assets/stylesheets/trix.css",
+    "lib/action_text/trix.rb",
+    "lib/action_text/trix/engine.rb",
+    "lib/action_text/trix/version.rb"
+  ]
+
+  spec.add_dependency "railties"
+end