marksmith 0.2.2 → 0.4.0
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 +14 -4
- data/app/assets/images/marksmith/svgs/bold.svg +1 -1
- data/app/assets/images/marksmith/svgs/code.svg +1 -1
- data/app/assets/images/marksmith/svgs/color-swatch.svg +1 -1
- data/app/assets/images/marksmith/svgs/gallery.svg +1 -1
- data/app/assets/images/marksmith/svgs/header.svg +1 -1
- data/app/assets/images/marksmith/svgs/image.svg +1 -1
- data/app/assets/images/marksmith/svgs/italic.svg +1 -1
- data/app/assets/images/marksmith/svgs/link.svg +1 -1
- data/app/assets/images/marksmith/svgs/markdown.svg +1 -1
- data/app/assets/images/marksmith/svgs/ordered-list.svg +1 -1
- data/app/assets/images/marksmith/svgs/paperclip.svg +1 -1
- data/app/assets/images/marksmith/svgs/quote.svg +1 -1
- data/app/assets/images/marksmith/svgs/task-list.svg +1 -1
- data/app/assets/images/marksmith/svgs/unordered-list.svg +1 -1
- data/app/assets/javascripts/list_continuation_controller-full.esm.js +1 -1
- data/app/assets/javascripts/list_continuation_controller-no-stimulus.esm.js +1 -1
- data/app/assets/javascripts/marksmith_controller-full.esm.js +19 -12
- data/app/assets/javascripts/marksmith_controller-no-stimulus.esm.js +19 -12
- data/app/assets/stylesheets/marksmith.css +171 -29
- data/app/frontend/entrypoints/application.css +5 -0
- data/app/frontend/entrypoints/javascript/controllers/marksmith_controller.js +18 -11
- data/app/helpers/marksmith/marksmith_helper.rb +59 -0
- data/app/models/marksmith/editor.rb +104 -0
- data/app/models/marksmith/renderer.rb +8 -1
- data/app/views/marksmith/shared/_action_bar.html.erb +15 -0
- data/app/views/marksmith/shared/_editor.html.erb +10 -114
- data/app/views/marksmith/shared/_editor_pane.html.erb +35 -0
- data/app/views/marksmith/shared/_loading_indicator.html.erb +4 -0
- data/app/views/marksmith/shared/_preview_pane.html.erb +8 -0
- data/app/views/marksmith/shared/_rendered_body.html.erb +1 -1
- data/app/views/marksmith/shared/_tabs.html.erb +8 -0
- data/app/views/marksmith/shared/_toolbar.html.erb +8 -0
- data/config/locales/marksmith.de.yml +17 -0
- data/lib/marksmith/engine.rb +2 -2
- data/lib/marksmith/version.rb +1 -1
- metadata +11 -5
- data/app/assets/images/marksmith/svgs/color-swatch copy.svg +0 -3
- data/app/assets/images/marksmith/svgs/link copy.svg +0 -3
- data/lib/marksmith/helper.rb +0 -29
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: b9b7bca51b1e950acb74830923706300439557e2600e1ea147f3db026c3116e2
|
|
4
|
+
data.tar.gz: d442e841439c4873b688c1df818aada6d80087578b8564469395881652cd3e15
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 43f2b59bfc02d83bc4d02ea6249c4f6d0a27ba5438be942669e6ab129cdaf40c86c6ffbdae62514d32f19d2751f4e674fc7cc887ffd224d298ddc1d51c8ef9eb
|
|
7
|
+
data.tar.gz: 14681e16b67254a763d33175c46b0aa28064153b7f338fc72d94dff9a338c4c722e202d6fc36c3bf86e0cb0d36beb4fd2b6ad2492ea88f5c3cc7956096876bc9
|
data/README.md
CHANGED
|
@@ -104,7 +104,7 @@ Marksmith accepts a few configuration options.
|
|
|
104
104
|
|
|
105
105
|
### Field options
|
|
106
106
|
|
|
107
|
-
The field supports a few of the regular options like `disabled`, `placeholder`, `autofocus`, `style`, `class`, `
|
|
107
|
+
The field supports a few of the regular options like `disabled`, `placeholder`, `autofocus`, `style`, `class`, `data`, and `value`, but also a custom one.
|
|
108
108
|
|
|
109
109
|
`extra_preview_params` - Sends extra params to the preview renderer.
|
|
110
110
|
|
|
@@ -156,7 +156,7 @@ end
|
|
|
156
156
|
|
|
157
157
|
## Built-in preview renderer
|
|
158
158
|
|
|
159
|
-
The renderer is powered by [`Commonmarker`](https://github.com/gjtorikian/commonmarker) by default but it can be changed to [`Redcarpet`](https://github.com/vmg/redcarpet) in the configuration or add your own logic by customizing the `Marksmith::Renderer` model.
|
|
159
|
+
The renderer is powered by [`Commonmarker`](https://github.com/gjtorikian/commonmarker) by default but it can be changed to [`Redcarpet`](https://github.com/vmg/redcarpet) or ['kramdown'](https://github.com/gettalong/kramdown) in the configuration or add your own logic by customizing the `Marksmith::Renderer` model.
|
|
160
160
|
It supports basic styles like headings, `strong`, `italic` and others.
|
|
161
161
|
|
|
162
162
|
In your `show.html.erb` view or the place where you want to render the compiled markup use the `marksmithed` helper and it will run the content through the renderer.
|
|
@@ -168,7 +168,7 @@ In your `show.html.erb` view or the place where you want to render the compiled
|
|
|
168
168
|
> [!WARNING]
|
|
169
169
|
> Using the `<%==` tag will output the raw HTML, so ensure you sanitize the content to avoid XSS attacks.
|
|
170
170
|
>
|
|
171
|
-
> See how we do it [here](
|
|
171
|
+
> See how we do it [here](app/views/marksmith/shared/_rendered_body.html.erb#L2).
|
|
172
172
|
> ```ruby
|
|
173
173
|
> # sample sanitization
|
|
174
174
|
> sanitize(body, tags: %w(table th tr td span) + ActionView::Helpers::SanitizeHelper.sanitizer_vendor.safe_list_sanitizer.allowed_tags.to_a)
|
|
@@ -176,7 +176,7 @@ In your `show.html.erb` view or the place where you want to render the compiled
|
|
|
176
176
|
|
|
177
177
|
## Customize the renderer
|
|
178
178
|
|
|
179
|
-
Marksmith comes with a default renderer that uses `
|
|
179
|
+
Marksmith comes with a default renderer that uses `commonmarker` by default but it can be changed to `redcarpet` or `kramdown` in the configuration.
|
|
180
180
|
|
|
181
181
|
```ruby
|
|
182
182
|
# config/initializers/marksmith.rb
|
|
@@ -225,6 +225,16 @@ application.register('marksmith', MarksmithController)
|
|
|
225
225
|
application.register('list-continuation', ListContinuationController)
|
|
226
226
|
```
|
|
227
227
|
|
|
228
|
+
## Dark mode
|
|
229
|
+
|
|
230
|
+
Marksmith comes with dark mode built in using the `.dark` class on the `html` element strategy.
|
|
231
|
+
|
|
232
|
+
```html
|
|
233
|
+
<html class="dark">
|
|
234
|
+
...
|
|
235
|
+
</html>
|
|
236
|
+
```
|
|
237
|
+
|
|
228
238
|
## Who uses Marksmith?
|
|
229
239
|
|
|
230
240
|
- [Avo](https://avohq.io) - Ruby on Rails Code-Based App Builder Framework
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="ms:inline ms:size-4">
|
|
2
2
|
<path stroke-linejoin="round" d="M6.75 3.744h-.753v8.25h7.125a4.125 4.125 0 0 0 0-8.25H6.75Zm0 0v.38m0 16.122h6.747a4.5 4.5 0 0 0 0-9.001h-7.5v9h.753Zm0 0v-.37m0-15.751h6a3.75 3.75 0 1 1 0 7.5h-6m0-7.5v7.5m0 0v8.25m0-8.25h6.375a4.125 4.125 0 0 1 0 8.25H6.75m.747-15.38h4.875a3.375 3.375 0 0 1 0 6.75H7.497v-6.75Zm0 7.5h5.25a3.75 3.75 0 0 1 0 7.5h-5.25v-7.5Z"/>
|
|
3
3
|
</svg>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="ms:inline ms:size-4">
|
|
2
2
|
<path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
|
|
3
3
|
</svg>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="ms:inline ms:size-4">
|
|
2
2
|
<path stroke-linecap="round" stroke-linejoin="round" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
|
|
3
3
|
</svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ms:inline ms:size-4"><path d="M18 22H4a2 2 0 0 1-2-2V6"/><path d="m22 13-1.296-1.296a2.41 2.41 0 0 0-3.408 0L11 18"/><circle cx="12" cy="8" r="2"/><rect width="16" height="16" x="6" y="2" rx="2"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ms:inline ms:size-4"><path d="M6 12h12"/><path d="M6 20V4"/><path d="M18 20V4"/></svg>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="ms:inline ms:size-4">
|
|
2
2
|
<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/>
|
|
3
3
|
</svg>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="ms:inline ms:size-4">
|
|
2
2
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5.248 20.246H9.05m0 0h3.696m-3.696 0 5.893-16.502m0 0h-3.697m3.697 0h3.803"/>
|
|
3
3
|
</svg>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="ms:inline ms:size-4">
|
|
2
2
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/>
|
|
3
3
|
</svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" role="img"><script xmlns="" src="chrome-extension://hoklmmgfnpapgjgcpechhaamimifchmp/frame_ant/frame_ant.js"/><title>Markdown icon</title><path d="M22.269 19.385H1.731a1.73 1.73 0 0 1-1.73-1.73V6.345a1.73 1.73 0 0 1 1.73-1.73h20.538a1.73 1.73 0 0 1 1.73 1.73v11.308a1.73 1.73 0 0 1-1.73 1.731zm-16.5-3.462v-4.5l2.308 2.885 2.307-2.885v4.5h2.308V8.078h-2.308l-2.307 2.885-2.308-2.885H3.461v7.847zM21.231 12h-2.308V8.077h-2.307V12h-2.308l3.461 4.039z"/></svg>
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" role="img" class="ms:inline ms:size-4"><script xmlns="" src="chrome-extension://hoklmmgfnpapgjgcpechhaamimifchmp/frame_ant/frame_ant.js"/><title>Markdown icon</title><path d="M22.269 19.385H1.731a1.73 1.73 0 0 1-1.73-1.73V6.345a1.73 1.73 0 0 1 1.73-1.73h20.538a1.73 1.73 0 0 1 1.73 1.73v11.308a1.73 1.73 0 0 1-1.73 1.731zm-16.5-3.462v-4.5l2.308 2.885 2.307-2.885v4.5h2.308V8.078h-2.308l-2.307 2.885-2.308-2.885H3.461v7.847zM21.231 12h-2.308V8.077h-2.307V12h-2.308l3.461 4.039z"/></svg>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="ms:inline ms:size-4">
|
|
2
2
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.242 5.992h12m-12 6.003H20.24m-12 5.999h12M4.117 7.495v-3.75H2.99m1.125 3.75H2.99m1.125 0H5.24m-1.92 2.577a1.125 1.125 0 1 1 1.591 1.59l-1.83 1.83h2.16M2.99 15.745h1.125a1.125 1.125 0 0 1 0 2.25H3.74m0-.002h.375a1.125 1.125 0 0 1 0 2.25H2.99"/>
|
|
3
3
|
</svg>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="ms:inline ms:size-4">
|
|
2
2
|
<path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
|
|
3
3
|
</svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ms:inline ms:size-4"><path d="M17 6H3"/><path d="M21 12H8"/><path d="M21 18H8"/><path d="M3 12v6"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ms:inline ms:size-4"><rect x="3" y="5" width="6" height="6" rx="1"/><path d="m3 17 2 2 4-4"/><path d="M13 6h8"/><path d="M13 12h8"/><path d="M13 18h8"/></svg>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="ms:inline ms:size-4">
|
|
2
2
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/>
|
|
3
3
|
</svg>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
Marksmith 0.
|
|
2
|
+
Marksmith 0.4.0
|
|
3
3
|
*/
|
|
4
4
|
var MarksmithController = (function () {
|
|
5
5
|
'use strict';
|
|
@@ -2830,7 +2830,9 @@ var MarksmithController = (function () {
|
|
|
2830
2830
|
fileUploadsEnabled: { type: Boolean, default: true },
|
|
2831
2831
|
}
|
|
2832
2832
|
|
|
2833
|
-
static targets = ['fieldContainer', 'fieldElement', '
|
|
2833
|
+
static targets = ['fieldContainer', 'fieldElement', 'previewPane', 'writeTabButton', 'previewTabButton', 'toolbar']
|
|
2834
|
+
|
|
2835
|
+
activeTabClass = "active"
|
|
2834
2836
|
|
|
2835
2837
|
get #fileUploadsDisabled() {
|
|
2836
2838
|
return !this.fileUploadsEnabledValue
|
|
@@ -2844,42 +2846,47 @@ var MarksmithController = (function () {
|
|
|
2844
2846
|
event.preventDefault();
|
|
2845
2847
|
|
|
2846
2848
|
// toggle buttons
|
|
2847
|
-
this.writeTabButtonTarget.classList.add(
|
|
2848
|
-
this.previewTabButtonTarget.classList.remove(
|
|
2849
|
+
this.writeTabButtonTarget.classList.add(this.activeTabClass);
|
|
2850
|
+
this.previewTabButtonTarget.classList.remove(this.activeTabClass);
|
|
2849
2851
|
|
|
2850
2852
|
// toggle write/preview buttons
|
|
2851
2853
|
this.fieldContainerTarget.classList.remove('ms:hidden');
|
|
2852
|
-
this.
|
|
2854
|
+
this.previewPaneTarget.classList.add('ms:hidden');
|
|
2853
2855
|
|
|
2854
2856
|
// toggle the toolbar back
|
|
2855
|
-
this.toolbarTarget.classList.remove('ms:
|
|
2857
|
+
this.toolbarTarget.classList.remove('ms:opacity-0', 'ms:pointer-events-none');
|
|
2856
2858
|
}
|
|
2857
2859
|
|
|
2858
2860
|
switchToPreview(event) {
|
|
2859
2861
|
event.preventDefault();
|
|
2860
2862
|
|
|
2863
|
+
// unfocus the active element to hide the outline around the editor
|
|
2864
|
+
this.element.focus();
|
|
2865
|
+
this.element.blur();
|
|
2866
|
+
document.activeElement.blur();
|
|
2867
|
+
|
|
2861
2868
|
post(this.previewUrlValue, {
|
|
2862
2869
|
body: {
|
|
2863
2870
|
body: this.fieldElementTarget.value,
|
|
2864
|
-
element_id: this.
|
|
2871
|
+
element_id: this.previewPaneTarget.id,
|
|
2865
2872
|
extra_params: this.extraPreviewParamsValue,
|
|
2866
2873
|
},
|
|
2867
2874
|
responseKind: 'turbo-stream',
|
|
2868
2875
|
});
|
|
2869
2876
|
|
|
2870
2877
|
// set the min height to the field element height
|
|
2871
|
-
this.
|
|
2878
|
+
this.previewPaneTarget.style.minHeight = `${this.fieldElementTarget.offsetHeight}px`;
|
|
2872
2879
|
|
|
2873
2880
|
// toggle buttons
|
|
2874
|
-
this.writeTabButtonTarget.classList.remove(
|
|
2875
|
-
this.previewTabButtonTarget.classList.add(
|
|
2881
|
+
this.writeTabButtonTarget.classList.remove(this.activeTabClass);
|
|
2882
|
+
this.previewTabButtonTarget.classList.add(this.activeTabClass);
|
|
2876
2883
|
|
|
2877
2884
|
// toggle elements
|
|
2878
2885
|
this.fieldContainerTarget.classList.add('ms:hidden');
|
|
2879
|
-
this.
|
|
2886
|
+
this.previewPaneTarget.classList.remove('ms:hidden');
|
|
2880
2887
|
|
|
2881
2888
|
// toggle the toolbar
|
|
2882
|
-
this.toolbarTarget.classList.add('ms:
|
|
2889
|
+
this.toolbarTarget.classList.add('ms:opacity-0', 'ms:pointer-events-none');
|
|
2883
2890
|
}
|
|
2884
2891
|
|
|
2885
2892
|
dropUpload(event) {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
Marksmith 0.
|
|
2
|
+
Marksmith 0.4.0
|
|
3
3
|
*/
|
|
4
4
|
var MarksmithController = (function (stimulus) {
|
|
5
5
|
'use strict';
|
|
@@ -2340,7 +2340,9 @@ var MarksmithController = (function (stimulus) {
|
|
|
2340
2340
|
fileUploadsEnabled: { type: Boolean, default: true },
|
|
2341
2341
|
}
|
|
2342
2342
|
|
|
2343
|
-
static targets = ['fieldContainer', 'fieldElement', '
|
|
2343
|
+
static targets = ['fieldContainer', 'fieldElement', 'previewPane', 'writeTabButton', 'previewTabButton', 'toolbar']
|
|
2344
|
+
|
|
2345
|
+
activeTabClass = "active"
|
|
2344
2346
|
|
|
2345
2347
|
get #fileUploadsDisabled() {
|
|
2346
2348
|
return !this.fileUploadsEnabledValue
|
|
@@ -2354,42 +2356,47 @@ var MarksmithController = (function (stimulus) {
|
|
|
2354
2356
|
event.preventDefault();
|
|
2355
2357
|
|
|
2356
2358
|
// toggle buttons
|
|
2357
|
-
this.writeTabButtonTarget.classList.add(
|
|
2358
|
-
this.previewTabButtonTarget.classList.remove(
|
|
2359
|
+
this.writeTabButtonTarget.classList.add(this.activeTabClass);
|
|
2360
|
+
this.previewTabButtonTarget.classList.remove(this.activeTabClass);
|
|
2359
2361
|
|
|
2360
2362
|
// toggle write/preview buttons
|
|
2361
2363
|
this.fieldContainerTarget.classList.remove('ms:hidden');
|
|
2362
|
-
this.
|
|
2364
|
+
this.previewPaneTarget.classList.add('ms:hidden');
|
|
2363
2365
|
|
|
2364
2366
|
// toggle the toolbar back
|
|
2365
|
-
this.toolbarTarget.classList.remove('ms:
|
|
2367
|
+
this.toolbarTarget.classList.remove('ms:opacity-0', 'ms:pointer-events-none');
|
|
2366
2368
|
}
|
|
2367
2369
|
|
|
2368
2370
|
switchToPreview(event) {
|
|
2369
2371
|
event.preventDefault();
|
|
2370
2372
|
|
|
2373
|
+
// unfocus the active element to hide the outline around the editor
|
|
2374
|
+
this.element.focus();
|
|
2375
|
+
this.element.blur();
|
|
2376
|
+
document.activeElement.blur();
|
|
2377
|
+
|
|
2371
2378
|
post(this.previewUrlValue, {
|
|
2372
2379
|
body: {
|
|
2373
2380
|
body: this.fieldElementTarget.value,
|
|
2374
|
-
element_id: this.
|
|
2381
|
+
element_id: this.previewPaneTarget.id,
|
|
2375
2382
|
extra_params: this.extraPreviewParamsValue,
|
|
2376
2383
|
},
|
|
2377
2384
|
responseKind: 'turbo-stream',
|
|
2378
2385
|
});
|
|
2379
2386
|
|
|
2380
2387
|
// set the min height to the field element height
|
|
2381
|
-
this.
|
|
2388
|
+
this.previewPaneTarget.style.minHeight = `${this.fieldElementTarget.offsetHeight}px`;
|
|
2382
2389
|
|
|
2383
2390
|
// toggle buttons
|
|
2384
|
-
this.writeTabButtonTarget.classList.remove(
|
|
2385
|
-
this.previewTabButtonTarget.classList.add(
|
|
2391
|
+
this.writeTabButtonTarget.classList.remove(this.activeTabClass);
|
|
2392
|
+
this.previewTabButtonTarget.classList.add(this.activeTabClass);
|
|
2386
2393
|
|
|
2387
2394
|
// toggle elements
|
|
2388
2395
|
this.fieldContainerTarget.classList.add('ms:hidden');
|
|
2389
|
-
this.
|
|
2396
|
+
this.previewPaneTarget.classList.remove('ms:hidden');
|
|
2390
2397
|
|
|
2391
2398
|
// toggle the toolbar
|
|
2392
|
-
this.toolbarTarget.classList.add('ms:
|
|
2399
|
+
this.toolbarTarget.classList.add('ms:opacity-0', 'ms:pointer-events-none');
|
|
2393
2400
|
}
|
|
2394
2401
|
|
|
2395
2402
|
dropUpload(event) {
|
|
@@ -373,6 +373,9 @@
|
|
|
373
373
|
.ms\:pointer-events-none {
|
|
374
374
|
pointer-events: none;
|
|
375
375
|
}
|
|
376
|
+
.ms\:-my-px {
|
|
377
|
+
margin-block: -1px;
|
|
378
|
+
}
|
|
376
379
|
.ms\:prose {
|
|
377
380
|
color: var(--tw-prose-body);
|
|
378
381
|
max-width: 65ch;
|
|
@@ -788,8 +791,8 @@
|
|
|
788
791
|
margin-bottom: 0;
|
|
789
792
|
}
|
|
790
793
|
}
|
|
791
|
-
.ms
|
|
792
|
-
margin-
|
|
794
|
+
.ms\:-ml-px {
|
|
795
|
+
margin-left: -1px;
|
|
793
796
|
}
|
|
794
797
|
.ms\:block {
|
|
795
798
|
display: block;
|
|
@@ -803,6 +806,9 @@
|
|
|
803
806
|
.ms\:inline {
|
|
804
807
|
display: inline;
|
|
805
808
|
}
|
|
809
|
+
.ms\:field-sizing-content {
|
|
810
|
+
field-sizing: content;
|
|
811
|
+
}
|
|
806
812
|
.ms\:size-4 {
|
|
807
813
|
width: calc(var(--ms-spacing) * 4);
|
|
808
814
|
height: calc(var(--ms-spacing) * 4);
|
|
@@ -811,6 +817,12 @@
|
|
|
811
817
|
width: 100%;
|
|
812
818
|
height: 100%;
|
|
813
819
|
}
|
|
820
|
+
.ms\:h-\[calc\(100\%\+3px\)\] {
|
|
821
|
+
height: calc(100% + 3px);
|
|
822
|
+
}
|
|
823
|
+
.ms\:min-h-60 {
|
|
824
|
+
min-height: calc(var(--ms-spacing) * 60);
|
|
825
|
+
}
|
|
814
826
|
.ms\:w-full {
|
|
815
827
|
width: 100%;
|
|
816
828
|
}
|
|
@@ -844,6 +856,9 @@
|
|
|
844
856
|
.ms\:items-center {
|
|
845
857
|
align-items: center;
|
|
846
858
|
}
|
|
859
|
+
.ms\:gap-1 {
|
|
860
|
+
gap: calc(var(--ms-spacing) * 1);
|
|
861
|
+
}
|
|
847
862
|
.ms\:gap-y-1 {
|
|
848
863
|
row-gap: calc(var(--ms-spacing) * 1);
|
|
849
864
|
}
|
|
@@ -860,14 +875,21 @@
|
|
|
860
875
|
.ms\:rounded {
|
|
861
876
|
border-radius: 0.25rem;
|
|
862
877
|
}
|
|
878
|
+
.ms\:rounded-md {
|
|
879
|
+
border-radius: var(--ms-radius-md);
|
|
880
|
+
}
|
|
881
|
+
.ms\:rounded-t-md {
|
|
882
|
+
border-top-left-radius: var(--ms-radius-md);
|
|
883
|
+
border-top-right-radius: var(--ms-radius-md);
|
|
884
|
+
}
|
|
885
|
+
.ms\:rounded-b-md {
|
|
886
|
+
border-bottom-right-radius: var(--ms-radius-md);
|
|
887
|
+
border-bottom-left-radius: var(--ms-radius-md);
|
|
888
|
+
}
|
|
863
889
|
.ms\:border {
|
|
864
890
|
border-style: var(--tw-border-style);
|
|
865
891
|
border-width: 1px;
|
|
866
892
|
}
|
|
867
|
-
.ms\:border-0 {
|
|
868
|
-
border-style: var(--tw-border-style);
|
|
869
|
-
border-width: 0px;
|
|
870
|
-
}
|
|
871
893
|
.ms\:border-t {
|
|
872
894
|
border-top-style: var(--tw-border-style);
|
|
873
895
|
border-top-width: 1px;
|
|
@@ -876,18 +898,21 @@
|
|
|
876
898
|
--tw-border-style: none;
|
|
877
899
|
border-style: none;
|
|
878
900
|
}
|
|
879
|
-
.ms\:border-neutral-
|
|
880
|
-
border-color: var(--ms-color-neutral-
|
|
901
|
+
.ms\:border-neutral-500 {
|
|
902
|
+
border-color: var(--ms-color-neutral-500);
|
|
903
|
+
}
|
|
904
|
+
.ms\:border-transparent {
|
|
905
|
+
border-color: transparent;
|
|
881
906
|
}
|
|
882
907
|
.ms\:bg-neutral-50 {
|
|
883
908
|
background-color: var(--ms-color-neutral-50);
|
|
884
909
|
}
|
|
885
|
-
.ms\:bg-neutral-200 {
|
|
886
|
-
background-color: var(--ms-color-neutral-200);
|
|
887
|
-
}
|
|
888
910
|
.ms\:bg-transparent {
|
|
889
911
|
background-color: transparent;
|
|
890
912
|
}
|
|
913
|
+
.ms\:bg-white {
|
|
914
|
+
background-color: var(--ms-color-white);
|
|
915
|
+
}
|
|
891
916
|
.ms\:bg-none {
|
|
892
917
|
background-image: none;
|
|
893
918
|
}
|
|
@@ -903,6 +928,9 @@
|
|
|
903
928
|
.ms\:px-2 {
|
|
904
929
|
padding-inline: calc(var(--ms-spacing) * 2);
|
|
905
930
|
}
|
|
931
|
+
.ms\:px-3 {
|
|
932
|
+
padding-inline: calc(var(--ms-spacing) * 3);
|
|
933
|
+
}
|
|
906
934
|
.ms\:py-1 {
|
|
907
935
|
padding-block: calc(var(--ms-spacing) * 1);
|
|
908
936
|
}
|
|
@@ -919,17 +947,16 @@
|
|
|
919
947
|
font-size: var(--ms-text-sm);
|
|
920
948
|
line-height: var(--tw-leading, var(--ms-text-sm--line-height));
|
|
921
949
|
}
|
|
922
|
-
.ms\:text-xs {
|
|
923
|
-
font-size: var(--ms-text-xs);
|
|
924
|
-
line-height: var(--tw-leading, var(--ms-text-xs--line-height));
|
|
925
|
-
}
|
|
926
950
|
.ms\:leading-normal {
|
|
927
951
|
--tw-leading: var(--ms-leading-normal);
|
|
928
952
|
line-height: var(--ms-leading-normal);
|
|
929
953
|
}
|
|
930
|
-
.ms\:font-
|
|
931
|
-
--tw-font-weight: var(--ms-font-weight-
|
|
932
|
-
font-weight: var(--ms-font-weight-
|
|
954
|
+
.ms\:font-medium {
|
|
955
|
+
--tw-font-weight: var(--ms-font-weight-medium);
|
|
956
|
+
font-weight: var(--ms-font-weight-medium);
|
|
957
|
+
}
|
|
958
|
+
.ms\:text-neutral-500 {
|
|
959
|
+
color: var(--ms-color-neutral-500);
|
|
933
960
|
}
|
|
934
961
|
.ms\:text-neutral-600 {
|
|
935
962
|
color: var(--ms-color-neutral-600);
|
|
@@ -937,12 +964,18 @@
|
|
|
937
964
|
.ms\:text-neutral-800 {
|
|
938
965
|
color: var(--ms-color-neutral-800);
|
|
939
966
|
}
|
|
940
|
-
.ms\:uppercase {
|
|
941
|
-
text-transform: uppercase;
|
|
942
|
-
}
|
|
943
967
|
.ms\:no-underline {
|
|
944
968
|
text-decoration-line: none;
|
|
945
969
|
}
|
|
970
|
+
.ms\:opacity-0 {
|
|
971
|
+
opacity: 0%;
|
|
972
|
+
}
|
|
973
|
+
.ms\:-outline-offset-1 {
|
|
974
|
+
outline-offset: calc(1px * -1);
|
|
975
|
+
}
|
|
976
|
+
.ms\:outline-blue-500 {
|
|
977
|
+
outline-color: var(--ms-color-blue-500);
|
|
978
|
+
}
|
|
946
979
|
.ms\:prose-neutral {
|
|
947
980
|
--tw-prose-body: oklch(0.371 0 0);
|
|
948
981
|
--tw-prose-headings: oklch(0.205 0 0);
|
|
@@ -981,29 +1014,30 @@
|
|
|
981
1014
|
--tw-prose-invert-th-borders: oklch(0.439 0 0);
|
|
982
1015
|
--tw-prose-invert-td-borders: oklch(0.371 0 0);
|
|
983
1016
|
}
|
|
984
|
-
.ms\:focus-within\:
|
|
1017
|
+
.ms\:focus-within\:outline-2 {
|
|
985
1018
|
&:focus-within {
|
|
986
|
-
|
|
1019
|
+
outline-style: var(--tw-outline-style);
|
|
1020
|
+
outline-width: 2px;
|
|
987
1021
|
}
|
|
988
1022
|
}
|
|
989
|
-
.ms\:hover\:bg-neutral-
|
|
1023
|
+
.ms\:hover\:bg-neutral-200 {
|
|
990
1024
|
&:hover {
|
|
991
1025
|
@media (hover: hover) {
|
|
992
|
-
background-color: var(--ms-color-neutral-
|
|
1026
|
+
background-color: var(--ms-color-neutral-200);
|
|
993
1027
|
}
|
|
994
1028
|
}
|
|
995
1029
|
}
|
|
996
|
-
.ms\:hover\:bg-neutral-
|
|
1030
|
+
.ms\:hover\:bg-neutral-300 {
|
|
997
1031
|
&:hover {
|
|
998
1032
|
@media (hover: hover) {
|
|
999
|
-
background-color: var(--ms-color-neutral-
|
|
1033
|
+
background-color: var(--ms-color-neutral-300);
|
|
1000
1034
|
}
|
|
1001
1035
|
}
|
|
1002
1036
|
}
|
|
1003
|
-
.ms\:hover\:bg-
|
|
1037
|
+
.ms\:hover\:bg-transparent {
|
|
1004
1038
|
&:hover {
|
|
1005
1039
|
@media (hover: hover) {
|
|
1006
|
-
background-color:
|
|
1040
|
+
background-color: transparent;
|
|
1007
1041
|
}
|
|
1008
1042
|
}
|
|
1009
1043
|
}
|
|
@@ -1024,6 +1058,109 @@
|
|
|
1024
1058
|
flex-direction: row;
|
|
1025
1059
|
}
|
|
1026
1060
|
}
|
|
1061
|
+
.ms\:dark\:bg-neutral-700 {
|
|
1062
|
+
&:where(.dark, .dark *) {
|
|
1063
|
+
background-color: var(--ms-color-neutral-700);
|
|
1064
|
+
}
|
|
1065
|
+
}
|
|
1066
|
+
.ms\:dark\:bg-neutral-800 {
|
|
1067
|
+
&:where(.dark, .dark *) {
|
|
1068
|
+
background-color: var(--ms-color-neutral-800);
|
|
1069
|
+
}
|
|
1070
|
+
}
|
|
1071
|
+
.ms\:dark\:bg-neutral-900 {
|
|
1072
|
+
&:where(.dark, .dark *) {
|
|
1073
|
+
background-color: var(--ms-color-neutral-900);
|
|
1074
|
+
}
|
|
1075
|
+
}
|
|
1076
|
+
.ms\:dark\:text-neutral-50 {
|
|
1077
|
+
&:where(.dark, .dark *) {
|
|
1078
|
+
color: var(--ms-color-neutral-50);
|
|
1079
|
+
}
|
|
1080
|
+
}
|
|
1081
|
+
.ms\:dark\:text-neutral-200 {
|
|
1082
|
+
&:where(.dark, .dark *) {
|
|
1083
|
+
color: var(--ms-color-neutral-200);
|
|
1084
|
+
}
|
|
1085
|
+
}
|
|
1086
|
+
.ms\:dark\:text-neutral-300 {
|
|
1087
|
+
&:where(.dark, .dark *) {
|
|
1088
|
+
color: var(--ms-color-neutral-300);
|
|
1089
|
+
}
|
|
1090
|
+
}
|
|
1091
|
+
.ms\:dark\:prose-invert {
|
|
1092
|
+
&:where(.dark, .dark *) {
|
|
1093
|
+
--tw-prose-body: var(--tw-prose-invert-body);
|
|
1094
|
+
--tw-prose-headings: var(--tw-prose-invert-headings);
|
|
1095
|
+
--tw-prose-lead: var(--tw-prose-invert-lead);
|
|
1096
|
+
--tw-prose-links: var(--tw-prose-invert-links);
|
|
1097
|
+
--tw-prose-bold: var(--tw-prose-invert-bold);
|
|
1098
|
+
--tw-prose-counters: var(--tw-prose-invert-counters);
|
|
1099
|
+
--tw-prose-bullets: var(--tw-prose-invert-bullets);
|
|
1100
|
+
--tw-prose-hr: var(--tw-prose-invert-hr);
|
|
1101
|
+
--tw-prose-quotes: var(--tw-prose-invert-quotes);
|
|
1102
|
+
--tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
|
|
1103
|
+
--tw-prose-captions: var(--tw-prose-invert-captions);
|
|
1104
|
+
--tw-prose-kbd: var(--tw-prose-invert-kbd);
|
|
1105
|
+
--tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
|
|
1106
|
+
--tw-prose-code: var(--tw-prose-invert-code);
|
|
1107
|
+
--tw-prose-pre-code: var(--tw-prose-invert-pre-code);
|
|
1108
|
+
--tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
|
|
1109
|
+
--tw-prose-th-borders: var(--tw-prose-invert-th-borders);
|
|
1110
|
+
--tw-prose-td-borders: var(--tw-prose-invert-td-borders);
|
|
1111
|
+
}
|
|
1112
|
+
}
|
|
1113
|
+
.ms\:dark\:hover\:bg-neutral-600 {
|
|
1114
|
+
&:where(.dark, .dark *) {
|
|
1115
|
+
&:hover {
|
|
1116
|
+
@media (hover: hover) {
|
|
1117
|
+
background-color: var(--ms-color-neutral-600);
|
|
1118
|
+
}
|
|
1119
|
+
}
|
|
1120
|
+
}
|
|
1121
|
+
}
|
|
1122
|
+
.ms\:\[\.active\]\:rounded-t-md {
|
|
1123
|
+
&:is(.active) {
|
|
1124
|
+
border-top-left-radius: var(--ms-radius-md);
|
|
1125
|
+
border-top-right-radius: var(--ms-radius-md);
|
|
1126
|
+
}
|
|
1127
|
+
}
|
|
1128
|
+
.ms\:\[\.active\]\:border-neutral-500 {
|
|
1129
|
+
&:is(.active) {
|
|
1130
|
+
border-color: var(--ms-color-neutral-500);
|
|
1131
|
+
}
|
|
1132
|
+
}
|
|
1133
|
+
.ms\:\[\.active\]\:bg-neutral-50 {
|
|
1134
|
+
&:is(.active) {
|
|
1135
|
+
background-color: var(--ms-color-neutral-50);
|
|
1136
|
+
}
|
|
1137
|
+
}
|
|
1138
|
+
.ms\:\[\.active\]\:text-neutral-900 {
|
|
1139
|
+
&:is(.active) {
|
|
1140
|
+
color: var(--ms-color-neutral-900);
|
|
1141
|
+
}
|
|
1142
|
+
}
|
|
1143
|
+
.ms\:\[\.active\]\:dark\:border-neutral-500 {
|
|
1144
|
+
&:is(.active) {
|
|
1145
|
+
&:where(.dark, .dark *) {
|
|
1146
|
+
border-color: var(--ms-color-neutral-500);
|
|
1147
|
+
}
|
|
1148
|
+
}
|
|
1149
|
+
}
|
|
1150
|
+
.ms\:\[\.active\]\:dark\:bg-neutral-800 {
|
|
1151
|
+
&:is(.active) {
|
|
1152
|
+
&:where(.dark, .dark *) {
|
|
1153
|
+
background-color: var(--ms-color-neutral-800);
|
|
1154
|
+
}
|
|
1155
|
+
}
|
|
1156
|
+
}
|
|
1157
|
+
.ms\:dark\:\[\.active\]\:text-neutral-300 {
|
|
1158
|
+
&:where(.dark, .dark *) {
|
|
1159
|
+
&:is(.active) {
|
|
1160
|
+
color: var(--ms-color-neutral-300);
|
|
1161
|
+
}
|
|
1162
|
+
}
|
|
1163
|
+
}
|
|
1027
1164
|
.marksmith, .marksmith * {
|
|
1028
1165
|
box-sizing: border-box;
|
|
1029
1166
|
}
|
|
@@ -1110,6 +1247,11 @@
|
|
|
1110
1247
|
syntax: "*";
|
|
1111
1248
|
inherits: false;
|
|
1112
1249
|
}
|
|
1250
|
+
@property --tw-outline-style {
|
|
1251
|
+
syntax: "*";
|
|
1252
|
+
inherits: false;
|
|
1253
|
+
initial-value: solid;
|
|
1254
|
+
}
|
|
1113
1255
|
@property --tw-shadow {
|
|
1114
1256
|
syntax: "*";
|
|
1115
1257
|
inherits: false;
|
|
@@ -8,10 +8,15 @@
|
|
|
8
8
|
|
|
9
9
|
@plugin "@tailwindcss/typography";
|
|
10
10
|
|
|
11
|
+
@source "./../../assets/images/marksmith/svgs/";
|
|
11
12
|
@source "./../../views/";
|
|
13
|
+
@source "./javascript/controllers/";
|
|
14
|
+
@source "./../../../test/dummy/app/views/";
|
|
12
15
|
@source "./../../helpers/";
|
|
13
16
|
@source "./../../../lib/";
|
|
14
17
|
|
|
18
|
+
@custom-variant dark (&:where(.dark, .dark *));
|
|
19
|
+
|
|
15
20
|
.marksmith,
|
|
16
21
|
.marksmith * {
|
|
17
22
|
box-sizing: border-box;
|