lexxy 0.1.4.beta → 0.1.6.beta
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.
- checksums.yaml +4 -4
- data/README.md +51 -11
- data/app/assets/javascript/lexxy.js +50 -35
- data/app/assets/javascript/lexxy.js.br +0 -0
- data/app/assets/javascript/lexxy.js.gz +0 -0
- data/app/assets/javascript/lexxy.min.js +3 -3
- data/app/assets/javascript/lexxy.min.js.br +0 -0
- data/app/assets/javascript/lexxy.min.js.gz +0 -0
- data/app/assets/stylesheets/lexxy-editor.css +25 -23
- data/lib/lexxy/engine.rb +5 -0
- data/lib/lexxy/form_builder.rb +3 -3
- data/lib/lexxy/form_helper.rb +2 -2
- data/lib/lexxy/rich_text_area_tag.rb +2 -2
- data/lib/lexxy/version.rb +1 -1
- data/lib/lexxy.rb +16 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 95dd70e9626785ed8e6000a8059604fd9167dac784f0f519df7073d956d026f9
|
|
4
|
+
data.tar.gz: e19dbed9210bdcab8b18d1f600f649203d82d1aded49d787f17a3d6ecac03cdc
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: fff87ce1ccab767b8354f348af41d1829c359ba1b6f0b6dcefe337b0f70ae9de3ab66a3a909873460ea41b60cedf0d10f92adee638cdd40f0c92385728d71a9e
|
|
7
|
+
data.tar.gz: 77cf044d28b81ec57555a1fa880d848f29fa2e8b917e80a97f91217c2a023a160cf4d0b8f46e2d10c33a05bafd33d4cef7549c92b0941e0a77196a6e5be50d95
|
data/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
A modern rich text editor for Rails.
|
|
4
4
|
|
|
5
|
-
> [!IMPORTANT]
|
|
5
|
+
> [!IMPORTANT]
|
|
6
6
|
> This is an early beta. It hasn't been battle-tested yet. Please try it out and report any issues you find.
|
|
7
7
|
|
|
8
8
|
## Features
|
|
@@ -23,7 +23,7 @@ A modern rich text editor for Rails.
|
|
|
23
23
|
Add this line to your application's Gemfile:
|
|
24
24
|
|
|
25
25
|
```ruby
|
|
26
|
-
gem 'lexxy', '~> 0.1.
|
|
26
|
+
gem 'lexxy', '~> 0.1.4.beta' # Need to specify the version since it's a pre-release
|
|
27
27
|
```
|
|
28
28
|
|
|
29
29
|
And then execute:
|
|
@@ -32,7 +32,7 @@ And then execute:
|
|
|
32
32
|
bundle install
|
|
33
33
|
```
|
|
34
34
|
|
|
35
|
-
###
|
|
35
|
+
### With import maps
|
|
36
36
|
|
|
37
37
|
If you are using [propshaft](https://github.com/rails/propshaft) and [import maps](https://github.com/rails/importmap-rails):
|
|
38
38
|
|
|
@@ -46,12 +46,12 @@ Then import it in your JavaScript entry point:
|
|
|
46
46
|
|
|
47
47
|
```javascript
|
|
48
48
|
// app/javascript/application.js
|
|
49
|
-
import "
|
|
49
|
+
import "lexxy"
|
|
50
50
|
```
|
|
51
51
|
|
|
52
|
-
###
|
|
52
|
+
### With javascript bundlers
|
|
53
53
|
|
|
54
|
-
If you're using [jsbundling-rails](https://github.com/rails/jsbundling-rails)
|
|
54
|
+
If you're using [jsbundling-rails](https://github.com/rails/jsbundling-rails), esbuild, webpack, or any other JavaScript bundler, you can install the NPM package:
|
|
55
55
|
|
|
56
56
|
```bash
|
|
57
57
|
yarn add @37signals/lexxy
|
|
@@ -65,6 +65,20 @@ Then import it in your JavaScript entry point:
|
|
|
65
65
|
import "@37signals/lexxy"
|
|
66
66
|
```
|
|
67
67
|
|
|
68
|
+
### Override Action Text defaults
|
|
69
|
+
|
|
70
|
+
By default, the gem overrides Action Text form helpers, so that if you use `form.rich_text_area`, it will render a Lexxy editor instead of the default Trix editor.
|
|
71
|
+
|
|
72
|
+
You can opt out of this behavior by disabling this option in `application.rb`:
|
|
73
|
+
|
|
74
|
+
```ruby# config/application.rb
|
|
75
|
+
config.lexxy.override_action_text_defaults = false
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
If you do this, you can invoke Lexxy explicitly using the same helpers with a `lexxy` preffix: `lexxy_rich_textarea_tag` and `form.lexxy_rich_text_area`.
|
|
79
|
+
|
|
80
|
+
This path is meant to let you incrementally move to Lexxy, or to use it in specific places while keeping Trix in others.
|
|
81
|
+
|
|
68
82
|
### CSS Setup
|
|
69
83
|
|
|
70
84
|
For the CSS, you can include it with the standard Rails helper:
|
|
@@ -73,6 +87,10 @@ For the CSS, you can include it with the standard Rails helper:
|
|
|
73
87
|
<%= stylesheet_link_tag "lexxy" %>
|
|
74
88
|
```
|
|
75
89
|
|
|
90
|
+
Of course, you can copy the CSS to your project and adapt it to your needs.
|
|
91
|
+
|
|
92
|
+
#### Rendered Action Text content
|
|
93
|
+
|
|
76
94
|
For applying the same styles to rendered Action Text content, you need to override the current default by adding this template `app/views/layouts/action_text/contents/_content.html.erb`:
|
|
77
95
|
|
|
78
96
|
```erb
|
|
@@ -81,10 +99,26 @@ For applying the same styles to rendered Action Text content, you need to overri
|
|
|
81
99
|
</div>
|
|
82
100
|
```
|
|
83
101
|
|
|
84
|
-
|
|
102
|
+
To apply syntax highlighting to rendered Action Text content, you need to call the `highlightAll` function from Lexxy. For example, create a Stimulus controller in `app/javascript/controllers/syntax_highlight_controller.js`:
|
|
85
103
|
|
|
86
|
-
|
|
87
|
-
|
|
104
|
+
```javascript
|
|
105
|
+
import { Controller } from "@hotwired/stimulus"
|
|
106
|
+
import { highlightAll } from "lexxy"
|
|
107
|
+
|
|
108
|
+
export default class extends Controller {
|
|
109
|
+
connect() {
|
|
110
|
+
highlightAll()
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
Then update the Action Text Content template to include the `data-controller` attribute:
|
|
116
|
+
|
|
117
|
+
```erb
|
|
118
|
+
<div data-controller="syntax-highlight" class="lexxy-content">
|
|
119
|
+
<%= yield -%>
|
|
120
|
+
</div>
|
|
121
|
+
```
|
|
88
122
|
|
|
89
123
|
## Configuration
|
|
90
124
|
|
|
@@ -158,12 +192,16 @@ Where:
|
|
|
158
192
|
|
|
159
193
|
Imagine you want to implement a *mentions* feature, where users can type "@" and select a person to mention. You want to save mentions as action text attachments for further server-side processing when the form is submitted.
|
|
160
194
|
|
|
161
|
-
First, you need to include the `ActionText::Attachable` concern in your model.
|
|
195
|
+
First, you need to include the `ActionText::Attachable` concern in your model, and you need to define the `#content_type` method to return a value like `application/vnd.actiontext.<prompt name>`, where `<prompt name>` is the value of the `name` attribute you will set in the `<lexxy-prompt>` element later. Let's use `mention` as the prompt name:
|
|
162
196
|
|
|
163
197
|
```ruby
|
|
164
198
|
# app/models/person.rb
|
|
165
199
|
class Person < ApplicationRecord
|
|
166
200
|
include ActionText::Attachable
|
|
201
|
+
|
|
202
|
+
def content_type
|
|
203
|
+
"application/vnd.actiontext.mention"
|
|
204
|
+
end
|
|
167
205
|
end
|
|
168
206
|
```
|
|
169
207
|
|
|
@@ -219,7 +257,7 @@ We could define the controller action to serve the prompt items like this:
|
|
|
219
257
|
class PeopleController < ApplicationController
|
|
220
258
|
def index
|
|
221
259
|
@people = Person.all
|
|
222
|
-
|
|
260
|
+
|
|
223
261
|
render layout: false
|
|
224
262
|
end
|
|
225
263
|
end
|
|
@@ -305,7 +343,9 @@ The sandbox app is available at http://localhost:3000. There is also a CRUD exam
|
|
|
305
343
|
|
|
306
344
|
## Events
|
|
307
345
|
|
|
346
|
+
* `lexxy:initialize`: Fired whenever the `<lexxy-editor>` element is attached to the DOM and is ready for use.
|
|
308
347
|
* `lexxy:change`: Fired whenever the editor content changes.
|
|
348
|
+
* `lexxy:file-accept`: Fired whenever a file is dropped or inserted into the editor. You can access the `File` object through the `file` property. Call `preventDefault` on the event to cancel upload and prevent attaching the file.
|
|
309
349
|
|
|
310
350
|
## Contributing
|
|
311
351
|
|
|
@@ -3955,17 +3955,18 @@ class LexicalToolbarElement extends HTMLElement {
|
|
|
3955
3955
|
|
|
3956
3956
|
static get defaultTemplate() {
|
|
3957
3957
|
return `
|
|
3958
|
-
<button type="button" name="bold" data-command="bold" title="Bold">
|
|
3959
|
-
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
|
|
3958
|
+
<button class="lexxy-editor__toolbar-button" type="button" name="bold" data-command="bold" title="Bold">
|
|
3959
|
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 22V2h8.183c1.764 0 3.174.435 4.228 1.304 1.055.87 1.582 2.076 1.582 3.62 0 .8-.148 1.503-.445 2.109a3.94 3.94 0 01-1.194 1.465 4.866 4.866 0 01-1.726.806v.176c.786.078 1.51.312 2.172.703a4.293 4.293 0 011.596 1.627c.403.693.604 1.543.604 2.549 0 1.192-.292 2.207-.877 3.048-.585.84-1.39 1.484-2.416 1.934-1.026.44-2.206.659-3.538.659H5zM8.854 4.974v5.348h2.56c.873 0 1.582-.107 2.129-.322.556-.215.963-.523 1.222-.923.269-.41.403-.904.403-1.48 0-.82-.254-1.46-.762-1.92-.499-.468-1.204-.703-2.115-.703H8.854zm0 8.103v5.949h2.877c1.534 0 2.636-.245 3.307-.733.671-.498 1.007-1.221 1.007-2.168 0-.635-.134-1.178-.403-1.627-.268-.459-.666-.81-1.193-1.055-.518-.244-1.156-.366-1.913-.366H8.854z"/></svg>
|
|
3960
3960
|
</button>
|
|
3961
3961
|
|
|
3962
|
-
<button type="button" name="italic" data-command="italic" title="Italic">
|
|
3963
|
-
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="
|
|
3962
|
+
<button class="lexxy-editor__toolbar-button" type="button" name="italic" data-command="italic" title="Italic">
|
|
3963
|
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.1 4h-1.5l-3.2 16h1.5l-.4 2h-7l.4-2h1.5l3.2-16h-1.5l.4-2h7l-.4 2z"/></svg>
|
|
3964
3964
|
</button>
|
|
3965
3965
|
|
|
3966
|
-
<button type="button" name="link" title="Link" data-dialog-target="link-dialog" data-hotkey="cmd+k ctrl+k">
|
|
3967
|
-
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="
|
|
3966
|
+
<button class="lexxy-editor__toolbar-button" type="button" name="link" title="Link" data-dialog-target="link-dialog" data-hotkey="cmd+k ctrl+k">
|
|
3967
|
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.111 9.546a1.5 1.5 0 012.121 0 5.5 5.5 0 010 7.778l-2.828 2.828a5.5 5.5 0 01-7.778 0 5.498 5.498 0 010-7.777l2.828-2.83a1.5 1.5 0 01.355-.262 6.52 6.52 0 00.351 3.799l-1.413 1.414a2.499 2.499 0 000 3.535 2.499 2.499 0 003.535 0l2.83-2.828a2.5 2.5 0 000-3.536 1.5 1.5 0 010-2.121z"/><path d="M12.111 3.89a5.5 5.5 0 117.778 7.777l-2.828 2.829a1.496 1.496 0 01-.355.262 6.522 6.522 0 00-.351-3.8l1.413-1.412a2.5 2.5 0 10-3.536-3.535l-2.828 2.828a2.5 2.5 0 000 3.536 1.5 1.5 0 01-2.122 2.12 5.5 5.5 0 010-7.777l2.83-2.829z"/></svg>
|
|
3968
3968
|
</button>
|
|
3969
|
+
|
|
3969
3970
|
<lexxy-link-dialog class="lexxy-link-dialog">
|
|
3970
3971
|
<dialog id="link-dialog" closedby="any">
|
|
3971
3972
|
<form method="dialog">
|
|
@@ -3978,32 +3979,32 @@ class LexicalToolbarElement extends HTMLElement {
|
|
|
3978
3979
|
</dialog>
|
|
3979
3980
|
</lexxy-link-dialog>
|
|
3980
3981
|
|
|
3981
|
-
<button type="button" name="quote" data-command="insertQuoteBlock" title="Quote">
|
|
3982
|
-
<svg viewBox="0 0 24
|
|
3982
|
+
<button class="lexxy-editor__toolbar-button" type="button" name="quote" data-command="insertQuoteBlock" title="Quote">
|
|
3983
|
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 5C8.985 5 11 7.09 11 9.667c0 2.694-.962 5.005-2.187 6.644-.613.82-1.3 1.481-1.978 1.943-.668.454-1.375.746-2.022.746a.563.563 0 01-.52-.36.602.602 0 01.067-.57l.055-.066.009-.009.041-.048a4.25 4.25 0 00.168-.21c.143-.188.336-.47.53-.84a6.743 6.743 0 00.75-2.605C3.705 13.994 2 12.038 2 9.667 2 7.089 4.015 5 6.5 5zM17.5 5C19.985 5 22 7.09 22 9.667c0 2.694-.962 5.005-2.187 6.644-.613.82-1.3 1.481-1.978 1.943-.668.454-1.375.746-2.023.746a.563.563 0 01-.52-.36.602.602 0 01.068-.57l.055-.066.009-.009.041-.048c.039-.045.097-.115.168-.21a6.16 6.16 0 00.53-.84 6.745 6.745 0 00.75-2.605C14.705 13.994 13 12.038 13 9.667 13 7.089 15.015 5 17.5 5z"/></svg>
|
|
3983
3984
|
</button>
|
|
3984
3985
|
|
|
3985
|
-
<button type="button" name="heading" data-command="rotateHeadingFormat" title="Heading">
|
|
3986
|
-
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="
|
|
3986
|
+
<button class="lexxy-editor__toolbar-button" type="button" name="heading" data-command="rotateHeadingFormat" title="Heading">
|
|
3987
|
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.322 5.315H9.64V22H5.684V5.315H0v-3.31h15.322v3.31z"/><path d="M23.957 11.79H19.92V22h-3.402V11.79H12.48V9.137h11.477v2.653z"/></svg>
|
|
3987
3988
|
</button>
|
|
3988
3989
|
|
|
3989
|
-
<button type="button" name="code" data-command="insertCodeBlock" title="Code">
|
|
3990
|
-
<svg viewBox="0 0 24
|
|
3990
|
+
<button class="lexxy-editor__toolbar-button" type="button" name="code" data-command="insertCodeBlock" title="Code">
|
|
3991
|
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10.121 6l-6 6 6 6-2.12 2.121-7.061-7.06a1.5 1.5 0 010-2.121L8 3.879 10.121 6zM23.06 10.94a1.5 1.5 0 010 2.12L16 20.121 13.88 18l6-6-6-6L16 3.879l7.06 7.06z"/></svg>
|
|
3991
3992
|
</button>
|
|
3992
3993
|
|
|
3993
|
-
<button type="button" name="unordered-list" data-command="insertUnorderedList" title="Bullet list">
|
|
3994
|
-
<svg viewBox="0 0 24
|
|
3994
|
+
<button class="lexxy-editor__toolbar-button" type="button" name="unordered-list" data-command="insertUnorderedList" title="Bullet list">
|
|
3995
|
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 5a2 2 0 11-4 0 2 2 0 014 0zM5 12a2 2 0 11-4 0 2 2 0 014 0zM5 19a2 2 0 11-4 0 2 2 0 014 0zM7 5.25C7 4.56 7.56 4 8.25 4h13.5a1.25 1.25 0 110 2.5H8.25C7.56 6.5 7 5.94 7 5.25zM7 12.25c0-.69.56-1.25 1.25-1.25h13.5a1.25 1.25 0 110 2.5H8.25c-.69 0-1.25-.56-1.25-1.25zM7 19.25c0-.69.56-1.25 1.25-1.25h13.5a1.25 1.25 0 110 2.5H8.25c-.69 0-1.25-.56-1.25-1.25z"/></svg>
|
|
3995
3996
|
</button>
|
|
3996
3997
|
|
|
3997
|
-
<button type="button" name="ordered-list" data-command="insertOrderedList" title="Numbered list">
|
|
3998
|
-
<svg viewBox="0 0 24
|
|
3998
|
+
<button class="lexxy-editor__toolbar-button" type="button" name="ordered-list" data-command="insertOrderedList" title="Numbered list">
|
|
3999
|
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 5.25C7 4.56 7.56 4 8.25 4h13.5a1.25 1.25 0 110 2.5H8.25C7.56 6.5 7 5.94 7 5.25zM7 12.25c0-.69.56-1.25 1.25-1.25h13.5a1.25 1.25 0 110 2.5H8.25c-.69 0-1.25-.56-1.25-1.25zM7 19.25c0-.69.56-1.25 1.25-1.25h13.5a1.25 1.25 0 110 2.5H8.25c-.69 0-1.25-.56-1.25-1.25zM4.438 8H3.39V3.684H3.34c-.133.093-.267.188-.402.285l-.407.289a129.5 129.5 0 00-.402.285v-.969l.633-.453c.21-.15.42-.302.629-.453h1.046V8zM2.672 11.258h-1v-.051c0-.206.036-.405.11-.598.075-.195.188-.37.34-.527.15-.156.339-.281.566-.375.229-.094.498-.14.808-.14.367 0 .688.065.961.195s.484.308.633.535c.15.224.226.478.226.762 0 .244-.046.463-.14.656-.091.19-.209.368-.352.535-.14.164-.289.332-.445.504L3.168 14.09v.05h2.238V15H1.723v-.656l1.949-2.102c.096-.101.19-.207.281-.316.091-.112.167-.232.227-.36a.953.953 0 00.09-.41.712.712 0 00-.387-.648.845.845 0 00-.41-.098.81.81 0 00-.43.11.75.75 0 00-.277.293.824.824 0 00-.094.386V11.258zM2.852 19.66v-.812h.562a.917.917 0 00.43-.098.742.742 0 00.293-.266.673.673 0 00.101-.379.654.654 0 00-.234-.523.87.87 0 00-.59-.2.987.987 0 00-.336.055.837.837 0 00-.258.149.712.712 0 00-.172.215.66.66 0 00-.066.25h-.98c.007-.209.053-.403.136-.582.084-.18.203-.336.36-.469.156-.135.346-.24.57-.316.227-.076.486-.115.777-.118a2.33 2.33 0 01.965.176c.271.12.48.285.63.496.15.209.227.448.23.719a1.11 1.11 0 01-.16.637 1.28 1.28 0 01-.825.586v.054c.162.016.33.07.504.164.177.094.328.232.453.415.125.18.189.411.192.695a1.37 1.37 0 01-.157.676c-.104.197-.25.365-.437.503-.188.136-.404.24-.649.313-.242.07-.5.105-.777.105-.401 0-.743-.067-1.027-.203a1.608 1.608 0 01-.649-.547 1.46 1.46 0 01-.238-.75h.969c.01.128.057.243.14.344a.885.885 0 00.332.238c.141.058.3.088.477.09.195 0 .366-.034.512-.101a.798.798 0 00.336-.29.744.744 0 00.117-.425.74.74 0 00-.446-.695 1.082 1.082 0 00-.496-.106h-.59z"/></svg>
|
|
3999
4000
|
</button>
|
|
4000
4001
|
|
|
4001
|
-
<button type="button" name="upload" data-command="uploadAttachments" title="Upload file">
|
|
4002
|
-
<svg viewBox="0 0 24
|
|
4002
|
+
<button class="lexxy-editor__toolbar-button" type="button" name="upload" data-command="uploadAttachments" title="Upload file">
|
|
4003
|
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 8a2 2 0 110 4 2 2 0 010-4z""/><path d="M22 2a1 1 0 011 1v18a1 1 0 01-1 1H2a1 1 0 01-1-1V3a1 1 0 011-1h20zM3 18.714L9 11l5.25 6.75L17 15l4 4V4H3v14.714z"/></svg>
|
|
4003
4004
|
</button>
|
|
4004
4005
|
|
|
4005
4006
|
<details class="lexxy-editor__toolbar-overflow">
|
|
4006
|
-
<summary aria-label="Show more toolbar buttons">•••</summary>
|
|
4007
|
+
<summary class="lexxy-editor__toolbar-button" aria-label="Show more toolbar buttons">•••</summary>
|
|
4007
4008
|
<div class="lexxy-editor__toolbar-overflow-menu" aria-label="More toolbar buttons"></div>
|
|
4008
4009
|
</details>
|
|
4009
4010
|
`
|
|
@@ -5666,7 +5667,7 @@ class ActionTextAttachmentNode extends gi {
|
|
|
5666
5667
|
}
|
|
5667
5668
|
|
|
5668
5669
|
#select(figure) {
|
|
5669
|
-
dispatchCustomEvent(figure, "lexxy:node
|
|
5670
|
+
dispatchCustomEvent(figure, "lexxy:internal:select-node", { key: this.getKey() });
|
|
5670
5671
|
}
|
|
5671
5672
|
|
|
5672
5673
|
#createEditableCaption() {
|
|
@@ -5698,13 +5699,13 @@ class ActionTextAttachmentNode extends gi {
|
|
|
5698
5699
|
}
|
|
5699
5700
|
|
|
5700
5701
|
#updateCaptionValueFromInput(input) {
|
|
5701
|
-
dispatchCustomEvent(input, "lexxy:node
|
|
5702
|
+
dispatchCustomEvent(input, "lexxy:internal:invalidate-node", { key: this.getKey(), values: { caption: input.value } });
|
|
5702
5703
|
}
|
|
5703
5704
|
|
|
5704
5705
|
#handleCaptionInputKeydown(event) {
|
|
5705
5706
|
if (event.key === "Enter") {
|
|
5706
5707
|
this.#updateCaptionValueFromInput(event.target);
|
|
5707
|
-
dispatchCustomEvent(event.target, "lexxy:move-to-next-line");
|
|
5708
|
+
dispatchCustomEvent(event.target, "lexxy:internal:move-to-next-line");
|
|
5708
5709
|
event.preventDefault();
|
|
5709
5710
|
}
|
|
5710
5711
|
event.stopPropagation();
|
|
@@ -5826,10 +5827,6 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
|
|
|
5826
5827
|
if (error) {
|
|
5827
5828
|
this.#handleUploadError(figure);
|
|
5828
5829
|
} else {
|
|
5829
|
-
this.src = this.blobUrlTemplate
|
|
5830
|
-
.replace(":signed_id", blob.signed_id)
|
|
5831
|
-
.replace(":filename", encodeURIComponent(blob.filename));
|
|
5832
|
-
|
|
5833
5830
|
this.#loadFigurePreviewFromBlob(blob, figure).then(() => {
|
|
5834
5831
|
this.#showUploadedAttachment(figure, blob);
|
|
5835
5832
|
});
|
|
@@ -5847,11 +5844,14 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
|
|
|
5847
5844
|
this.editor.update(() => {
|
|
5848
5845
|
const image = figure.querySelector("img");
|
|
5849
5846
|
|
|
5847
|
+
const src = this.blobUrlTemplate
|
|
5848
|
+
.replace(":signed_id", blob.signed_id)
|
|
5849
|
+
.replace(":filename", encodeURIComponent(blob.filename));
|
|
5850
5850
|
const latest = us(this.getKey());
|
|
5851
5851
|
if (latest) {
|
|
5852
5852
|
latest.replace(new ActionTextAttachmentNode({
|
|
5853
5853
|
sgid: blob.attachable_sgid,
|
|
5854
|
-
src: blob.previewable ? blob.url :
|
|
5854
|
+
src: blob.previewable ? blob.url : src,
|
|
5855
5855
|
altText: blob.filename,
|
|
5856
5856
|
contentType: blob.content_type,
|
|
5857
5857
|
fileName: blob.filename,
|
|
@@ -6262,7 +6262,7 @@ class Selection {
|
|
|
6262
6262
|
}
|
|
6263
6263
|
|
|
6264
6264
|
#listenForNodeSelections() {
|
|
6265
|
-
this.editor.getRootElement().addEventListener("lexxy:node
|
|
6265
|
+
this.editor.getRootElement().addEventListener("lexxy:internal:select-node", async (event) => {
|
|
6266
6266
|
await nextFrame();
|
|
6267
6267
|
|
|
6268
6268
|
const { key } = event.detail;
|
|
@@ -6277,7 +6277,7 @@ class Selection {
|
|
|
6277
6277
|
});
|
|
6278
6278
|
});
|
|
6279
6279
|
|
|
6280
|
-
this.editor.getRootElement().addEventListener("lexxy:move-to-next-line", (event) => {
|
|
6280
|
+
this.editor.getRootElement().addEventListener("lexxy:internal:move-to-next-line", (event) => {
|
|
6281
6281
|
this.#selectOrAppendNextLine();
|
|
6282
6282
|
});
|
|
6283
6283
|
}
|
|
@@ -6351,7 +6351,7 @@ class Selection {
|
|
|
6351
6351
|
if (ur(selection)) {
|
|
6352
6352
|
return this.#getTopLevelFromNodeSelection(selection)
|
|
6353
6353
|
}
|
|
6354
|
-
|
|
6354
|
+
|
|
6355
6355
|
if (cr(selection)) {
|
|
6356
6356
|
return this.#getTopLevelFromRangeSelection(selection)
|
|
6357
6357
|
}
|
|
@@ -6430,7 +6430,7 @@ class Selection {
|
|
|
6430
6430
|
|
|
6431
6431
|
#getReliableRectFromRange(range) {
|
|
6432
6432
|
let rect = range.getBoundingClientRect();
|
|
6433
|
-
|
|
6433
|
+
|
|
6434
6434
|
if (this.#isRectUnreliable(rect)) {
|
|
6435
6435
|
const marker = this.#createAndInsertMarker(range);
|
|
6436
6436
|
rect = marker.getBoundingClientRect();
|
|
@@ -6487,12 +6487,12 @@ class Selection {
|
|
|
6487
6487
|
const nativeSelection = window.getSelection();
|
|
6488
6488
|
const anchorNode = nativeSelection.anchorNode;
|
|
6489
6489
|
const parentElement = this.#getElementFromNode(anchorNode);
|
|
6490
|
-
|
|
6490
|
+
|
|
6491
6491
|
if (parentElement instanceof HTMLElement) {
|
|
6492
6492
|
const computed = window.getComputedStyle(parentElement);
|
|
6493
6493
|
return parseFloat(computed.fontSize)
|
|
6494
6494
|
}
|
|
6495
|
-
|
|
6495
|
+
|
|
6496
6496
|
return 0
|
|
6497
6497
|
}
|
|
6498
6498
|
|
|
@@ -6772,6 +6772,10 @@ class Contents {
|
|
|
6772
6772
|
return
|
|
6773
6773
|
}
|
|
6774
6774
|
|
|
6775
|
+
if (!this.#shouldUploadFile(file)) {
|
|
6776
|
+
return
|
|
6777
|
+
}
|
|
6778
|
+
|
|
6775
6779
|
const uploadUrl = this.editorElement.directUploadUrl;
|
|
6776
6780
|
const blobUrlTemplate = this.editorElement.blobUrlTemplate;
|
|
6777
6781
|
|
|
@@ -7060,6 +7064,10 @@ class Contents {
|
|
|
7060
7064
|
}
|
|
7061
7065
|
}
|
|
7062
7066
|
}
|
|
7067
|
+
|
|
7068
|
+
#shouldUploadFile(file) {
|
|
7069
|
+
return dispatch(this.editorElement, 'lexxy:file-accept', { file }, true)
|
|
7070
|
+
}
|
|
7063
7071
|
}
|
|
7064
7072
|
|
|
7065
7073
|
/**
|
|
@@ -7276,7 +7284,7 @@ class CustomActionTextAttachmentNode extends gi {
|
|
|
7276
7284
|
const figure = createElement("action-text-attachment", { "content-type": this.contentType, "data-lexxy-decorator": true });
|
|
7277
7285
|
|
|
7278
7286
|
figure.addEventListener("click", (event) => {
|
|
7279
|
-
dispatchCustomEvent(figure, "lexxy:node
|
|
7287
|
+
dispatchCustomEvent(figure, "lexxy:internal:select-node", { key: this.getKey() });
|
|
7280
7288
|
});
|
|
7281
7289
|
|
|
7282
7290
|
figure.insertAdjacentHTML("beforeend", this.innerHtml);
|
|
@@ -7339,6 +7347,8 @@ class LexicalEditorElement extends HTMLElement {
|
|
|
7339
7347
|
|
|
7340
7348
|
CommandDispatcher.configureFor(this);
|
|
7341
7349
|
this.#initialize();
|
|
7350
|
+
|
|
7351
|
+
requestAnimationFrame(() => dispatch(this, "lexxy:initialize"));
|
|
7342
7352
|
this.toggleAttribute("connected", true);
|
|
7343
7353
|
|
|
7344
7354
|
this.valueBeforeDisconnect = null;
|
|
@@ -7571,7 +7581,7 @@ class LexicalEditorElement extends HTMLElement {
|
|
|
7571
7581
|
}
|
|
7572
7582
|
|
|
7573
7583
|
#listenForInvalidatedNodes() {
|
|
7574
|
-
this.editor.getRootElement().addEventListener("lexxy:node
|
|
7584
|
+
this.editor.getRootElement().addEventListener("lexxy:internal:invalidate-node", (event) => {
|
|
7575
7585
|
const { key, values } = event.detail;
|
|
7576
7586
|
|
|
7577
7587
|
this.editor.update(() => {
|
|
@@ -8539,4 +8549,9 @@ function highlightElement(preElement) {
|
|
|
8539
8549
|
preElement.replaceWith(codeElement);
|
|
8540
8550
|
}
|
|
8541
8551
|
|
|
8552
|
+
// Manual highlighting mode to prevent invocation on every page. See https://prismjs.com/docs/prism
|
|
8553
|
+
// This must happen before importing any Prism components
|
|
8554
|
+
window.Prism = window.Prism || {};
|
|
8555
|
+
Prism.manual = true;
|
|
8556
|
+
|
|
8542
8557
|
export { highlightAll };
|
|
Binary file
|
|
Binary file
|