marksmith 0.0.8 → 0.0.10
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 +89 -11
- data/app/assets/stylesheets/marksmith.css +453 -0
- data/app/frontend/entrypoints/application.css +2 -0
- data/app/models/marksmith/renderer.rb +0 -1
- data/app/views/marksmith/shared/_editor.html.erb +8 -2
- data/lib/marksmith/version.rb +1 -1
- metadata +1 -15
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 193c81e84d2038d0008789be16f079c0e71a874d40a2d92dc79ef6c31325fd4b
|
|
4
|
+
data.tar.gz: 8b0ee90a5b595712f8e61faa2f35ce50d962df9872cf36705d96315b3b29eac5
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 86342b9e8ba64a3f5a55eeac8a5a8f0148f3af00d712ee8ffaa1ed0d835743b9cc4f3d67c7f76b7dd2d12062f8681408c66d4213dce5eaa43c440680a3164af7
|
|
7
|
+
data.tar.gz: 3e634ebc04720f365256687780479b2fd3d37ff7ff306ea0bfe9dfc8be564b6e3f9b877cd9cbc9d0065ee70ac30ad035b8f1213cba8da4a0a56d7e5df571161d
|
data/README.md
CHANGED
|
@@ -1,14 +1,29 @@
|
|
|
1
1
|
# Marksmith
|
|
2
2
|
|
|
3
|
-
Marksmith
|
|
3
|
+
Marksmith is a GitHub-style markdown editor for Rails apps.
|
|
4
4
|
|
|
5
|
-
It supports Active Storage attachments and
|
|
5
|
+
It supports Active Storage attachments and comes with a built-in mardown preview renderer.
|
|
6
|
+
|
|
7
|
+
[](https://github.com/user-attachments/assets/f257db9d-6bfd-4fbc-ac10-dff1dfc99ff2)
|
|
6
8
|
|
|
7
9
|
## Usage
|
|
8
|
-
|
|
10
|
+
|
|
11
|
+
```erb
|
|
12
|
+
<%= marksmith_tag :body %>
|
|
13
|
+
```
|
|
9
14
|
|
|
10
15
|
## Installation
|
|
11
16
|
|
|
17
|
+
### 1. Add `marksmith` to your `Gemfile`
|
|
18
|
+
|
|
19
|
+
Have Bundler add it by running this command:
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
bundle add marksmith
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Or manually install it.
|
|
26
|
+
|
|
12
27
|
Add this line to your application's Gemfile:
|
|
13
28
|
|
|
14
29
|
```ruby
|
|
@@ -18,31 +33,94 @@ gem "marksmith"
|
|
|
18
33
|
And then execute:
|
|
19
34
|
|
|
20
35
|
```bash
|
|
21
|
-
|
|
36
|
+
bundle
|
|
22
37
|
```
|
|
23
38
|
|
|
24
|
-
|
|
39
|
+
|
|
40
|
+
### 2. Install the NPM package to import the StimulusJS controller.
|
|
41
|
+
|
|
42
|
+
Install the package.
|
|
43
|
+
|
|
25
44
|
```bash
|
|
26
|
-
|
|
45
|
+
yarn add @avo-hq/marksmith
|
|
46
|
+
# or
|
|
47
|
+
npm install @avo-hq/marksmith
|
|
27
48
|
```
|
|
28
49
|
|
|
29
|
-
|
|
50
|
+
Import and register it in your application.
|
|
30
51
|
|
|
31
|
-
```
|
|
32
|
-
|
|
52
|
+
```js
|
|
53
|
+
import Marksmith from '@avo-hq/marksmith'
|
|
33
54
|
|
|
34
|
-
|
|
55
|
+
application.register('marksmith', Marksmith)
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
> [!NOTE]
|
|
59
|
+
> Marksmith comes bundled with a few dependencies by default.
|
|
60
|
+
> If you want to manually import those dependencies and import only the controller from the package use the `/controller` path.
|
|
61
|
+
|
|
62
|
+
```js
|
|
63
|
+
// Import just the controller
|
|
64
|
+
import Marksmith from '@avo-hq/marksmith/controller'
|
|
65
|
+
|
|
66
|
+
application.register('marksmith', Marksmith)
|
|
35
67
|
|
|
36
|
-
|
|
68
|
+
// Manually import Marksmith's dependencies
|
|
69
|
+
import '@github/markdown-toolbar-element'
|
|
70
|
+
import { DirectUpload } from '@rails/activestorage'
|
|
71
|
+
import { post } from '@rails/request.js'
|
|
72
|
+
import { subscribe } from '@github/paste-markdown'
|
|
37
73
|
```
|
|
38
74
|
|
|
75
|
+
### 3. Add the style tag to your `application.html` layout
|
|
76
|
+
|
|
77
|
+
```erb
|
|
78
|
+
<%= stylesheet_link_tag "marksmith" %>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### 4. Use it
|
|
82
|
+
|
|
83
|
+
Use it a simple tag or attach it to your form builder.
|
|
84
|
+
|
|
85
|
+
```erb
|
|
86
|
+
<%= marksmith_tag :body, value: "### This is important" %>
|
|
87
|
+
<%= @form.marksmith @field.id%>
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Options
|
|
91
|
+
|
|
92
|
+
The field supports some of the regular options like `disabled`, `placeholder`, `autofocus`, `style`, `class`, `rows`, `data`, and `value`, but also a custom one.
|
|
93
|
+
|
|
94
|
+
`extra_preview_params` - Sends extra params to the preview renderer.
|
|
95
|
+
|
|
96
|
+
## Built-in preview renderer
|
|
97
|
+
|
|
98
|
+
The renderer is powered by [`Redcarpet`](https://github.com/vmg/redcarpet).
|
|
99
|
+
It supports basic styles for headings, `strong`, `italic` and others.
|
|
100
|
+
|
|
101
|
+
## Active Storage
|
|
102
|
+
|
|
103
|
+
The field supports Actve Storage uploads using drag and drop and pasting files into the field.
|
|
39
104
|
|
|
40
105
|
## Contributing
|
|
106
|
+
|
|
41
107
|
Contribution directions go here.
|
|
42
108
|
|
|
43
109
|
## License
|
|
44
110
|
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
|
45
111
|
|
|
112
|
+
## Other Open-Source Work
|
|
113
|
+
|
|
114
|
+
- [`active_storage-blurhash`](https://github.com/avo-hq/active_storage-blurhash) - A plug-n-play [blurhash](https://blurha.sh/) integration for images stored in ActiveStorage
|
|
115
|
+
- [`avo`](https://github.com/avo-hq/avo) - Build Internal Tools with Ruby on Rails
|
|
116
|
+
- [`class_variants`](https://github.com/avo-hq/class_variants) - Easily configure styles and apply them as classes. Very useful when you're implementing Tailwind CSS components and call them with different states.
|
|
117
|
+
- [`prop_initializer`](https://github.com/avo-hq/prop_initializer) - A flexible tool for defining properties on Ruby classes.
|
|
118
|
+
- [`stimulus-confetti`](https://github.com/avo-hq/stimulus-confetti) - The easiest way to add confetti to your StimulusJS app
|
|
119
|
+
|
|
120
|
+
## Try Avo ⭐️
|
|
121
|
+
|
|
122
|
+
If you enjoyed this gem try out [Avo](https://github.com/avo-hq/avo). It helps developers build Internal Tools, Admin Panels, CMSes, CRMs, and any other type of Business Apps 10x faster on top of Ruby on Rails.
|
|
123
|
+
|
|
46
124
|
## Troubleshooting
|
|
47
125
|
|
|
48
126
|
If you ever get a 431 error from Vite, clear your brower's cache for `localhost` (chrome://settings/content/all?searchSubpage=localhost).
|
|
@@ -373,6 +373,421 @@
|
|
|
373
373
|
.ms\:pointer-events-none {
|
|
374
374
|
pointer-events: none;
|
|
375
375
|
}
|
|
376
|
+
.ms\:prose {
|
|
377
|
+
color: var(--tw-prose-body);
|
|
378
|
+
max-width: 65ch;
|
|
379
|
+
:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
380
|
+
margin-top: 1.25em;
|
|
381
|
+
margin-bottom: 1.25em;
|
|
382
|
+
}
|
|
383
|
+
:where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
384
|
+
color: var(--tw-prose-lead);
|
|
385
|
+
font-size: 1.25em;
|
|
386
|
+
line-height: 1.6;
|
|
387
|
+
margin-top: 1.2em;
|
|
388
|
+
margin-bottom: 1.2em;
|
|
389
|
+
}
|
|
390
|
+
:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
391
|
+
color: var(--tw-prose-links);
|
|
392
|
+
text-decoration: underline;
|
|
393
|
+
font-weight: 500;
|
|
394
|
+
}
|
|
395
|
+
:where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
396
|
+
color: var(--tw-prose-bold);
|
|
397
|
+
font-weight: 600;
|
|
398
|
+
}
|
|
399
|
+
:where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
400
|
+
color: inherit;
|
|
401
|
+
}
|
|
402
|
+
:where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
403
|
+
color: inherit;
|
|
404
|
+
}
|
|
405
|
+
:where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
406
|
+
color: inherit;
|
|
407
|
+
}
|
|
408
|
+
:where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
409
|
+
list-style-type: decimal;
|
|
410
|
+
margin-top: 1.25em;
|
|
411
|
+
margin-bottom: 1.25em;
|
|
412
|
+
padding-inline-start: 1.625em;
|
|
413
|
+
}
|
|
414
|
+
:where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
415
|
+
list-style-type: upper-alpha;
|
|
416
|
+
}
|
|
417
|
+
:where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
418
|
+
list-style-type: lower-alpha;
|
|
419
|
+
}
|
|
420
|
+
:where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
421
|
+
list-style-type: upper-alpha;
|
|
422
|
+
}
|
|
423
|
+
:where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
424
|
+
list-style-type: lower-alpha;
|
|
425
|
+
}
|
|
426
|
+
:where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
427
|
+
list-style-type: upper-roman;
|
|
428
|
+
}
|
|
429
|
+
:where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
430
|
+
list-style-type: lower-roman;
|
|
431
|
+
}
|
|
432
|
+
:where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
433
|
+
list-style-type: upper-roman;
|
|
434
|
+
}
|
|
435
|
+
:where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
436
|
+
list-style-type: lower-roman;
|
|
437
|
+
}
|
|
438
|
+
:where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
439
|
+
list-style-type: decimal;
|
|
440
|
+
}
|
|
441
|
+
:where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
442
|
+
list-style-type: disc;
|
|
443
|
+
margin-top: 1.25em;
|
|
444
|
+
margin-bottom: 1.25em;
|
|
445
|
+
padding-inline-start: 1.625em;
|
|
446
|
+
}
|
|
447
|
+
:where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
|
|
448
|
+
font-weight: 400;
|
|
449
|
+
color: var(--tw-prose-counters);
|
|
450
|
+
}
|
|
451
|
+
:where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
|
|
452
|
+
color: var(--tw-prose-bullets);
|
|
453
|
+
}
|
|
454
|
+
:where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
455
|
+
color: var(--tw-prose-headings);
|
|
456
|
+
font-weight: 600;
|
|
457
|
+
margin-top: 1.25em;
|
|
458
|
+
}
|
|
459
|
+
:where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
460
|
+
border-color: var(--tw-prose-hr);
|
|
461
|
+
border-top-width: 1;
|
|
462
|
+
margin-top: 3em;
|
|
463
|
+
margin-bottom: 3em;
|
|
464
|
+
}
|
|
465
|
+
:where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
466
|
+
font-weight: 500;
|
|
467
|
+
font-style: italic;
|
|
468
|
+
color: var(--tw-prose-quotes);
|
|
469
|
+
border-inline-start-width: 0.25rem;
|
|
470
|
+
border-inline-start-color: var(--tw-prose-quote-borders);
|
|
471
|
+
quotes: "\201C""\201D""\2018""\2019";
|
|
472
|
+
margin-top: 1.6em;
|
|
473
|
+
margin-bottom: 1.6em;
|
|
474
|
+
padding-inline-start: 1em;
|
|
475
|
+
}
|
|
476
|
+
:where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
|
|
477
|
+
content: open-quote;
|
|
478
|
+
}
|
|
479
|
+
:where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
|
|
480
|
+
content: close-quote;
|
|
481
|
+
}
|
|
482
|
+
:where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
483
|
+
color: var(--tw-prose-headings);
|
|
484
|
+
font-weight: 800;
|
|
485
|
+
font-size: 2.25em;
|
|
486
|
+
margin-top: 0;
|
|
487
|
+
margin-bottom: 0.8888889em;
|
|
488
|
+
line-height: 1.1111111;
|
|
489
|
+
}
|
|
490
|
+
:where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
491
|
+
font-weight: 900;
|
|
492
|
+
color: inherit;
|
|
493
|
+
}
|
|
494
|
+
:where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
495
|
+
color: var(--tw-prose-headings);
|
|
496
|
+
font-weight: 700;
|
|
497
|
+
font-size: 1.5em;
|
|
498
|
+
margin-top: 2em;
|
|
499
|
+
margin-bottom: 1em;
|
|
500
|
+
line-height: 1.3333333;
|
|
501
|
+
}
|
|
502
|
+
:where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
503
|
+
font-weight: 800;
|
|
504
|
+
color: inherit;
|
|
505
|
+
}
|
|
506
|
+
:where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
507
|
+
color: var(--tw-prose-headings);
|
|
508
|
+
font-weight: 600;
|
|
509
|
+
font-size: 1.25em;
|
|
510
|
+
margin-top: 1.6em;
|
|
511
|
+
margin-bottom: 0.6em;
|
|
512
|
+
line-height: 1.6;
|
|
513
|
+
}
|
|
514
|
+
:where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
515
|
+
font-weight: 700;
|
|
516
|
+
color: inherit;
|
|
517
|
+
}
|
|
518
|
+
:where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
519
|
+
color: var(--tw-prose-headings);
|
|
520
|
+
font-weight: 600;
|
|
521
|
+
margin-top: 1.5em;
|
|
522
|
+
margin-bottom: 0.5em;
|
|
523
|
+
line-height: 1.5;
|
|
524
|
+
}
|
|
525
|
+
:where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
526
|
+
font-weight: 700;
|
|
527
|
+
color: inherit;
|
|
528
|
+
}
|
|
529
|
+
:where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
530
|
+
margin-top: 2em;
|
|
531
|
+
margin-bottom: 2em;
|
|
532
|
+
}
|
|
533
|
+
:where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
534
|
+
display: block;
|
|
535
|
+
margin-top: 2em;
|
|
536
|
+
margin-bottom: 2em;
|
|
537
|
+
}
|
|
538
|
+
:where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
539
|
+
margin-top: 2em;
|
|
540
|
+
margin-bottom: 2em;
|
|
541
|
+
}
|
|
542
|
+
:where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
543
|
+
font-weight: 500;
|
|
544
|
+
font-family: inherit;
|
|
545
|
+
color: var(--tw-prose-kbd);
|
|
546
|
+
box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
|
|
547
|
+
font-size: 0.875em;
|
|
548
|
+
border-radius: 0.3125rem;
|
|
549
|
+
padding-top: 0.1875em;
|
|
550
|
+
padding-inline-end: 0.375em;
|
|
551
|
+
padding-bottom: 0.1875em;
|
|
552
|
+
padding-inline-start: 0.375em;
|
|
553
|
+
}
|
|
554
|
+
:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
555
|
+
color: var(--tw-prose-code);
|
|
556
|
+
font-weight: 600;
|
|
557
|
+
font-size: 0.875em;
|
|
558
|
+
}
|
|
559
|
+
:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
|
|
560
|
+
content: "`";
|
|
561
|
+
}
|
|
562
|
+
:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
|
|
563
|
+
content: "`";
|
|
564
|
+
}
|
|
565
|
+
:where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
566
|
+
color: inherit;
|
|
567
|
+
}
|
|
568
|
+
:where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
569
|
+
color: inherit;
|
|
570
|
+
}
|
|
571
|
+
:where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
572
|
+
color: inherit;
|
|
573
|
+
font-size: 0.875em;
|
|
574
|
+
}
|
|
575
|
+
:where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
576
|
+
color: inherit;
|
|
577
|
+
font-size: 0.9em;
|
|
578
|
+
}
|
|
579
|
+
:where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
580
|
+
color: inherit;
|
|
581
|
+
}
|
|
582
|
+
:where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
583
|
+
color: inherit;
|
|
584
|
+
}
|
|
585
|
+
:where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
586
|
+
color: inherit;
|
|
587
|
+
}
|
|
588
|
+
:where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
589
|
+
color: var(--tw-prose-pre-code);
|
|
590
|
+
background-color: var(--tw-prose-pre-bg);
|
|
591
|
+
overflow-x: auto;
|
|
592
|
+
font-weight: 400;
|
|
593
|
+
font-size: 0.875em;
|
|
594
|
+
line-height: 1.7142857;
|
|
595
|
+
margin-top: 1.7142857em;
|
|
596
|
+
margin-bottom: 1.7142857em;
|
|
597
|
+
border-radius: 0.375rem;
|
|
598
|
+
padding-top: 0.8571429em;
|
|
599
|
+
padding-inline-end: 1.1428571em;
|
|
600
|
+
padding-bottom: 0.8571429em;
|
|
601
|
+
padding-inline-start: 1.1428571em;
|
|
602
|
+
}
|
|
603
|
+
:where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
604
|
+
background-color: transparent;
|
|
605
|
+
border-width: 0;
|
|
606
|
+
border-radius: 0;
|
|
607
|
+
padding: 0;
|
|
608
|
+
font-weight: inherit;
|
|
609
|
+
color: inherit;
|
|
610
|
+
font-size: inherit;
|
|
611
|
+
font-family: inherit;
|
|
612
|
+
line-height: inherit;
|
|
613
|
+
}
|
|
614
|
+
:where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
|
|
615
|
+
content: none;
|
|
616
|
+
}
|
|
617
|
+
:where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
|
|
618
|
+
content: none;
|
|
619
|
+
}
|
|
620
|
+
:where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
621
|
+
width: 100%;
|
|
622
|
+
table-layout: auto;
|
|
623
|
+
margin-top: 2em;
|
|
624
|
+
margin-bottom: 2em;
|
|
625
|
+
font-size: 0.875em;
|
|
626
|
+
line-height: 1.7142857;
|
|
627
|
+
}
|
|
628
|
+
:where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
629
|
+
border-bottom-width: 1px;
|
|
630
|
+
border-bottom-color: var(--tw-prose-th-borders);
|
|
631
|
+
}
|
|
632
|
+
:where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
633
|
+
color: var(--tw-prose-headings);
|
|
634
|
+
font-weight: 600;
|
|
635
|
+
vertical-align: bottom;
|
|
636
|
+
padding-inline-end: 0.5714286em;
|
|
637
|
+
padding-bottom: 0.5714286em;
|
|
638
|
+
padding-inline-start: 0.5714286em;
|
|
639
|
+
}
|
|
640
|
+
:where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
641
|
+
border-bottom-width: 1px;
|
|
642
|
+
border-bottom-color: var(--tw-prose-td-borders);
|
|
643
|
+
}
|
|
644
|
+
:where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
645
|
+
border-bottom-width: 0;
|
|
646
|
+
}
|
|
647
|
+
:where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
648
|
+
vertical-align: baseline;
|
|
649
|
+
}
|
|
650
|
+
:where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
651
|
+
border-top-width: 1px;
|
|
652
|
+
border-top-color: var(--tw-prose-th-borders);
|
|
653
|
+
}
|
|
654
|
+
:where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
655
|
+
vertical-align: top;
|
|
656
|
+
}
|
|
657
|
+
:where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
658
|
+
text-align: start;
|
|
659
|
+
}
|
|
660
|
+
:where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
661
|
+
margin-top: 0;
|
|
662
|
+
margin-bottom: 0;
|
|
663
|
+
}
|
|
664
|
+
:where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
665
|
+
color: var(--tw-prose-captions);
|
|
666
|
+
font-size: 0.875em;
|
|
667
|
+
line-height: 1.4285714;
|
|
668
|
+
margin-top: 0.8571429em;
|
|
669
|
+
}
|
|
670
|
+
--tw-prose-body: oklch(0.373 0.034 259.733);
|
|
671
|
+
--tw-prose-headings: oklch(0.21 0.034 264.665);
|
|
672
|
+
--tw-prose-lead: oklch(0.446 0.03 256.802);
|
|
673
|
+
--tw-prose-links: oklch(0.21 0.034 264.665);
|
|
674
|
+
--tw-prose-bold: oklch(0.21 0.034 264.665);
|
|
675
|
+
--tw-prose-counters: oklch(0.551 0.027 264.364);
|
|
676
|
+
--tw-prose-bullets: oklch(0.872 0.01 258.338);
|
|
677
|
+
--tw-prose-hr: oklch(0.928 0.006 264.531);
|
|
678
|
+
--tw-prose-quotes: oklch(0.21 0.034 264.665);
|
|
679
|
+
--tw-prose-quote-borders: oklch(0.928 0.006 264.531);
|
|
680
|
+
--tw-prose-captions: oklch(0.551 0.027 264.364);
|
|
681
|
+
--tw-prose-kbd: oklch(0.21 0.034 264.665);
|
|
682
|
+
--tw-prose-kbd-shadows: NaN NaN NaN;
|
|
683
|
+
--tw-prose-code: oklch(0.21 0.034 264.665);
|
|
684
|
+
--tw-prose-pre-code: oklch(0.928 0.006 264.531);
|
|
685
|
+
--tw-prose-pre-bg: oklch(0.278 0.033 256.848);
|
|
686
|
+
--tw-prose-th-borders: oklch(0.872 0.01 258.338);
|
|
687
|
+
--tw-prose-td-borders: oklch(0.928 0.006 264.531);
|
|
688
|
+
--tw-prose-invert-body: oklch(0.872 0.01 258.338);
|
|
689
|
+
--tw-prose-invert-headings: #fff;
|
|
690
|
+
--tw-prose-invert-lead: oklch(0.707 0.022 261.325);
|
|
691
|
+
--tw-prose-invert-links: #fff;
|
|
692
|
+
--tw-prose-invert-bold: #fff;
|
|
693
|
+
--tw-prose-invert-counters: oklch(0.707 0.022 261.325);
|
|
694
|
+
--tw-prose-invert-bullets: oklch(0.446 0.03 256.802);
|
|
695
|
+
--tw-prose-invert-hr: oklch(0.373 0.034 259.733);
|
|
696
|
+
--tw-prose-invert-quotes: oklch(0.967 0.003 264.542);
|
|
697
|
+
--tw-prose-invert-quote-borders: oklch(0.373 0.034 259.733);
|
|
698
|
+
--tw-prose-invert-captions: oklch(0.707 0.022 261.325);
|
|
699
|
+
--tw-prose-invert-kbd: #fff;
|
|
700
|
+
--tw-prose-invert-kbd-shadows: 255 255 255;
|
|
701
|
+
--tw-prose-invert-code: #fff;
|
|
702
|
+
--tw-prose-invert-pre-code: oklch(0.872 0.01 258.338);
|
|
703
|
+
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
|
|
704
|
+
--tw-prose-invert-th-borders: oklch(0.446 0.03 256.802);
|
|
705
|
+
--tw-prose-invert-td-borders: oklch(0.373 0.034 259.733);
|
|
706
|
+
font-size: 1rem;
|
|
707
|
+
line-height: 1.75;
|
|
708
|
+
:where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
709
|
+
margin-top: 0;
|
|
710
|
+
margin-bottom: 0;
|
|
711
|
+
}
|
|
712
|
+
:where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
713
|
+
margin-top: 0.5em;
|
|
714
|
+
margin-bottom: 0.5em;
|
|
715
|
+
}
|
|
716
|
+
:where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
717
|
+
padding-inline-start: 0.375em;
|
|
718
|
+
}
|
|
719
|
+
:where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
720
|
+
padding-inline-start: 0.375em;
|
|
721
|
+
}
|
|
722
|
+
:where(.ms\:prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
723
|
+
margin-top: 0.75em;
|
|
724
|
+
margin-bottom: 0.75em;
|
|
725
|
+
}
|
|
726
|
+
:where(.ms\:prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
727
|
+
margin-top: 1.25em;
|
|
728
|
+
}
|
|
729
|
+
:where(.ms\:prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
730
|
+
margin-bottom: 1.25em;
|
|
731
|
+
}
|
|
732
|
+
:where(.ms\:prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
733
|
+
margin-top: 1.25em;
|
|
734
|
+
}
|
|
735
|
+
:where(.ms\:prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
736
|
+
margin-bottom: 1.25em;
|
|
737
|
+
}
|
|
738
|
+
:where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
739
|
+
margin-top: 0.75em;
|
|
740
|
+
margin-bottom: 0.75em;
|
|
741
|
+
}
|
|
742
|
+
:where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
743
|
+
margin-top: 1.25em;
|
|
744
|
+
margin-bottom: 1.25em;
|
|
745
|
+
}
|
|
746
|
+
:where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
747
|
+
margin-top: 0.5em;
|
|
748
|
+
padding-inline-start: 1.625em;
|
|
749
|
+
}
|
|
750
|
+
:where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
751
|
+
margin-top: 0;
|
|
752
|
+
}
|
|
753
|
+
:where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
754
|
+
margin-top: 0;
|
|
755
|
+
}
|
|
756
|
+
:where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
757
|
+
margin-top: 0;
|
|
758
|
+
}
|
|
759
|
+
:where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
760
|
+
margin-top: 0;
|
|
761
|
+
}
|
|
762
|
+
:where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
763
|
+
padding-inline-start: 0;
|
|
764
|
+
}
|
|
765
|
+
:where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
766
|
+
padding-inline-end: 0;
|
|
767
|
+
}
|
|
768
|
+
:where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
769
|
+
padding-top: 0.5714286em;
|
|
770
|
+
padding-inline-end: 0.5714286em;
|
|
771
|
+
padding-bottom: 0.5714286em;
|
|
772
|
+
padding-inline-start: 0.5714286em;
|
|
773
|
+
}
|
|
774
|
+
:where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
775
|
+
padding-inline-start: 0;
|
|
776
|
+
}
|
|
777
|
+
:where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
778
|
+
padding-inline-end: 0;
|
|
779
|
+
}
|
|
780
|
+
:where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
781
|
+
margin-top: 2em;
|
|
782
|
+
margin-bottom: 2em;
|
|
783
|
+
}
|
|
784
|
+
:where(.ms\:prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
785
|
+
margin-top: 0;
|
|
786
|
+
}
|
|
787
|
+
:where(.ms\:prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
788
|
+
margin-bottom: 0;
|
|
789
|
+
}
|
|
790
|
+
}
|
|
376
791
|
.ms\:flex {
|
|
377
792
|
display: flex;
|
|
378
793
|
}
|
|
@@ -456,6 +871,44 @@
|
|
|
456
871
|
.ms\:py-2 {
|
|
457
872
|
padding-block: calc(var(--ms-spacing) * 2);
|
|
458
873
|
}
|
|
874
|
+
.ms\:prose-zinc {
|
|
875
|
+
--tw-prose-body: oklch(0.37 0.013 285.805);
|
|
876
|
+
--tw-prose-headings: oklch(0.21 0.006 285.885);
|
|
877
|
+
--tw-prose-lead: oklch(0.442 0.017 285.786);
|
|
878
|
+
--tw-prose-links: oklch(0.21 0.006 285.885);
|
|
879
|
+
--tw-prose-bold: oklch(0.21 0.006 285.885);
|
|
880
|
+
--tw-prose-counters: oklch(0.552 0.016 285.938);
|
|
881
|
+
--tw-prose-bullets: oklch(0.871 0.006 286.286);
|
|
882
|
+
--tw-prose-hr: oklch(0.92 0.004 286.32);
|
|
883
|
+
--tw-prose-quotes: oklch(0.21 0.006 285.885);
|
|
884
|
+
--tw-prose-quote-borders: oklch(0.92 0.004 286.32);
|
|
885
|
+
--tw-prose-captions: oklch(0.552 0.016 285.938);
|
|
886
|
+
--tw-prose-kbd: oklch(0.21 0.006 285.885);
|
|
887
|
+
--tw-prose-kbd-shadows: NaN NaN NaN;
|
|
888
|
+
--tw-prose-code: oklch(0.21 0.006 285.885);
|
|
889
|
+
--tw-prose-pre-code: oklch(0.92 0.004 286.32);
|
|
890
|
+
--tw-prose-pre-bg: oklch(0.274 0.006 286.033);
|
|
891
|
+
--tw-prose-th-borders: oklch(0.871 0.006 286.286);
|
|
892
|
+
--tw-prose-td-borders: oklch(0.92 0.004 286.32);
|
|
893
|
+
--tw-prose-invert-body: oklch(0.871 0.006 286.286);
|
|
894
|
+
--tw-prose-invert-headings: #fff;
|
|
895
|
+
--tw-prose-invert-lead: oklch(0.705 0.015 286.067);
|
|
896
|
+
--tw-prose-invert-links: #fff;
|
|
897
|
+
--tw-prose-invert-bold: #fff;
|
|
898
|
+
--tw-prose-invert-counters: oklch(0.705 0.015 286.067);
|
|
899
|
+
--tw-prose-invert-bullets: oklch(0.442 0.017 285.786);
|
|
900
|
+
--tw-prose-invert-hr: oklch(0.37 0.013 285.805);
|
|
901
|
+
--tw-prose-invert-quotes: oklch(0.967 0.001 286.375);
|
|
902
|
+
--tw-prose-invert-quote-borders: oklch(0.37 0.013 285.805);
|
|
903
|
+
--tw-prose-invert-captions: oklch(0.705 0.015 286.067);
|
|
904
|
+
--tw-prose-invert-kbd: #fff;
|
|
905
|
+
--tw-prose-invert-kbd-shadows: 255 255 255;
|
|
906
|
+
--tw-prose-invert-code: #fff;
|
|
907
|
+
--tw-prose-invert-pre-code: oklch(0.871 0.006 286.286);
|
|
908
|
+
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
|
|
909
|
+
--tw-prose-invert-th-borders: oklch(0.442 0.017 285.786);
|
|
910
|
+
--tw-prose-invert-td-borders: oklch(0.37 0.013 285.805);
|
|
911
|
+
}
|
|
459
912
|
.ms\:focus-within\:border-zinc-500 {
|
|
460
913
|
&:focus-within {
|
|
461
914
|
border-color: var(--ms-color-zinc-500);
|
|
@@ -4,8 +4,14 @@
|
|
|
4
4
|
placeholder = local_assigns[:placeholder] || nil
|
|
5
5
|
autofocus = local_assigns[:autofocus] || false
|
|
6
6
|
style = local_assigns[:style] || nil
|
|
7
|
-
classes = local_assigns[:
|
|
7
|
+
classes = local_assigns[:class] || nil
|
|
8
8
|
rows = local_assigns[:rows] || 15
|
|
9
|
+
value = if defined?(form)
|
|
10
|
+
form.object.send(name)
|
|
11
|
+
else
|
|
12
|
+
local_assigns[:value] || nil
|
|
13
|
+
end
|
|
14
|
+
extra_preview_params = local_assigns[:extra_preview_params] || {}
|
|
9
15
|
%>
|
|
10
16
|
<%= content_tag :div,
|
|
11
17
|
class: "ms:flex ms:flex-col ms:w-full ms:border ms:border-zinc-300 ms:rounded ms:@container ms:group ms:focus-within:border-zinc-500",
|
|
@@ -42,7 +48,7 @@
|
|
|
42
48
|
</div>
|
|
43
49
|
|
|
44
50
|
<div class="ms:border-t ms:border-zinc-300 ms:flex">
|
|
45
|
-
<%=
|
|
51
|
+
<%= text_area_tag name, value,
|
|
46
52
|
id: name,
|
|
47
53
|
class: class_names("ms:flex ms:flex-1 ms:rounded ms:border-none ms:py-2 ms:px-3 ms:focus:outline-none", classes),
|
|
48
54
|
rows: rows,
|
data/lib/marksmith/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: marksmith
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.10
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Adrian Marin
|
|
@@ -38,20 +38,6 @@ dependencies:
|
|
|
38
38
|
- - ">="
|
|
39
39
|
- !ruby/object:Gem::Version
|
|
40
40
|
version: '0'
|
|
41
|
-
- !ruby/object:Gem::Dependency
|
|
42
|
-
name: rouge
|
|
43
|
-
requirement: !ruby/object:Gem::Requirement
|
|
44
|
-
requirements:
|
|
45
|
-
- - ">="
|
|
46
|
-
- !ruby/object:Gem::Version
|
|
47
|
-
version: '0'
|
|
48
|
-
type: :runtime
|
|
49
|
-
prerelease: false
|
|
50
|
-
version_requirements: !ruby/object:Gem::Requirement
|
|
51
|
-
requirements:
|
|
52
|
-
- - ">="
|
|
53
|
-
- !ruby/object:Gem::Version
|
|
54
|
-
version: '0'
|
|
55
41
|
description: Marksmith is a GitHub-style markdown editor for Ruby on Rails applications.
|
|
56
42
|
email:
|
|
57
43
|
- adrian@adrianthedev.com
|