@riducms/plugin-richtext 0.2.3 → 0.3.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.
Files changed (43) hide show
  1. package/README.md +7 -1
  2. package/package.json +7 -5
  3. package/src/block/rich-text-block-card.scss +139 -0
  4. package/src/block/rich-text-block-card.svelte +42 -21
  5. package/src/block/rich-text-block-clipboard.ts +1 -1
  6. package/src/block/rich-text-block-node.ts +1 -1
  7. package/src/block/rich-text-blocks-plugin.svelte +5 -2
  8. package/src/document-validation.ts +7 -5
  9. package/src/field/reference-node-placement.ts +49 -0
  10. package/src/field/rich-text-blocks.ts +1 -5
  11. package/src/field/rich-text-config.ts +1 -4
  12. package/src/field/rich-text-document.ts +1 -4
  13. package/src/field/rich-text-editor.svelte +105 -57
  14. package/src/field/rich-text-footer.svelte +7 -12
  15. package/src/field/rich-text-markdown.ts +62 -0
  16. package/src/link/link-url.ts +30 -0
  17. package/src/link/rich-text-link-plugin.svelte +528 -0
  18. package/src/link/rich-text-link.scss +144 -0
  19. package/src/link/safe-link-transform.ts +20 -0
  20. package/src/link-url-policy.ts +14 -0
  21. package/src/menu/rich-text-block-toolbar.svelte +403 -70
  22. package/src/menu/rich-text-commands.ts +10 -1
  23. package/src/menu/rich-text-menu.scss +92 -0
  24. package/src/menu/rich-text-menu.svelte +62 -69
  25. package/src/menu/rich-text-option-filter.ts +30 -0
  26. package/src/menu/rich-text-options.ts +81 -84
  27. package/src/menu/rich-text-slash-menu.svelte +15 -11
  28. package/src/messages.ts +72 -27
  29. package/src/relationship/rich-text-relationship-node.scss +98 -0
  30. package/src/relationship/rich-text-relationship-node.svelte +38 -32
  31. package/src/relationship/rich-text-relationship-plugin.svelte +24 -40
  32. package/src/render/rich-text.svelte +10 -5
  33. package/src/render.ts +3 -8
  34. package/src/styles/integration.scss +384 -0
  35. package/src/toolbar/PAYLOAD-LICENSE.md +22 -0
  36. package/src/toolbar/rich-text-floating-toolbar.svelte +331 -169
  37. package/src/toolbar/rich-text-toolbar.scss +80 -0
  38. package/src/toolbar/toolbar-icon.svelte +200 -30
  39. package/src/upload/rich-text-upload-node.scss +308 -0
  40. package/src/upload/rich-text-upload-node.svelte +96 -125
  41. package/src/upload/rich-text-upload-node.ts +1 -0
  42. package/src/upload/rich-text-upload-plugin.svelte +10 -33
  43. package/src/styles/integration.css +0 -83
package/src/toolbar/rich-text-toolbar.scss ADDED
@@ -0,0 +1,80 @@
1
+ @use "@riducms/ui/styles.scss" as ui;
2
+
3
+ @layer ridu.components {
4
+ .ridu-richtext-floating-toolbar {
5
+ position: fixed;
6
+ z-index: 80;
7
+ box-sizing: border-box;
8
+ max-inline-size: calc(100vw - 24px);
9
+ flex-wrap: wrap;
10
+ gap: 2px;
11
+ padding: 4px;
12
+ border: 0;
13
+ border-radius: 3px;
14
+ background: var(--control-surface);
15
+ box-shadow: var(--richtext-popup-shadow);
16
+ color: var(--foreground-muted);
17
+ }
18
+
19
+ .ridu-richtext-toolbar-button {
20
+ flex-shrink: 0;
21
+ inline-size: 30px;
22
+ block-size: 30px;
23
+ padding: 0;
24
+ border-radius: 3px;
25
+ color: inherit;
26
+ &:hover {
27
+ background: var(--control-surface-hover);
28
+ }
29
+ &[data-active] {
30
+ background: var(--background-layer);
31
+ color: var(--foreground);
32
+ }
33
+ &:disabled {
34
+ opacity: 0.2;
35
+ }
36
+ }
37
+
38
+ .ridu-richtext-toolbar-menu {
39
+ display: flex;
40
+ align-items: center;
41
+ justify-content: center;
42
+ gap: 4px;
43
+ inline-size: 47px;
44
+ }
45
+
46
+ .ridu-richtext-toolbar-separator {
47
+ flex-shrink: 0;
48
+ inline-size: 1px;
49
+ block-size: 15px;
50
+ margin-inline: 4.25px;
51
+ background: var(--control-border);
52
+ }
53
+
54
+ .ridu-richtext-format-menu.ridu-menu {
55
+ min-inline-size: 132.5px;
56
+ max-inline-size: 200px;
57
+ padding: 0;
58
+ border: 0;
59
+ border-radius: 3px;
60
+ background: var(--background);
61
+ box-shadow: var(--richtext-popup-shadow);
62
+ }
63
+
64
+ .ridu-richtext-format-menu .ridu-richtext-format-option {
65
+ min-block-size: 30px;
66
+ padding: 0 6.25px;
67
+ gap: 6.25px;
68
+ color: var(--foreground);
69
+ font-size: 13px;
70
+ line-height: 20px;
71
+ white-space: nowrap;
72
+ &[data-active] {
73
+ background: var(--control-surface-hover);
74
+ }
75
+ svg {
76
+ flex-shrink: 0;
77
+ color: var(--foreground-muted);
78
+ }
79
+ }
80
+ }
package/src/toolbar/toolbar-icon.svelte CHANGED
@@ -1,47 +1,217 @@
1
- <script lang="ts">
2
- type IconName =
3
- "bold" | "code" | "italic" | "link" | "strike" | "subscript" | "superscript" | "underline";
1
+ <script module lang="ts">
2
+ export type RichTextIconName =
3
+ | "bold"
4
+ | "italic"
5
+ | "underline"
6
+ | "strike"
7
+ | "subscript"
8
+ | "superscript"
9
+ | "code"
10
+ | "link"
11
+ | "paragraph"
12
+ | "left"
13
+ | "center"
14
+ | "right"
15
+ | "justify"
16
+ | "indent"
17
+ | "outdent"
18
+ | "h1"
19
+ | "h2"
20
+ | "h3"
21
+ | "h4"
22
+ | "h5"
23
+ | "h6"
24
+ | "unordered"
25
+ | "ordered"
26
+ | "check"
27
+ | "quote"
28
+ | "divider"
29
+ | "upload"
30
+ | "relationship"
31
+ | "code-block"
32
+ | "block";
33
+ </script>
4
34
 
5
- let { name, size = 15 }: { name: IconName; size?: number } = $props();
35
+ <script lang="ts">
36
+ let { name, size = 20 }: { name: RichTextIconName; size?: number } = $props();
6
37
  </script>
7
38
 
39
+ <!-- Icons adapted from Payload CMS (MIT); see PAYLOAD-LICENSE.md. -->
8
40
  <svg
9
41
  width={size}
10
42
  height={size}
11
- viewBox="0 0 24 24"
43
+ viewBox="0 0 20 20"
12
44
  fill="none"
13
- stroke="currentColor"
14
- stroke-width="1.8"
15
- stroke-linecap="round"
16
- stroke-linejoin="round"
17
45
  aria-hidden="true"
46
+ focusable="false"
18
47
  >
19
48
  {#if name === "bold"}
20
- <path d="M7 5h6a4 4 0 0 1 0 8H7z" />
21
- <path d="M7 13h7a3.5 3.5 0 0 1 0 7H7z" />
49
+ <path
50
+ d="M10.6772 15H6.27017V5.718H10.4172C12.6792 5.718 13.8492 6.602 13.8492 8.292C13.8492 9.098 13.1992 9.982 12.4712 10.216C13.3812 10.476 14.1742 11.256 14.1742 12.322C14.1742 14.09 12.9002 15 10.6772 15ZM8.46717 9.501H10.3262C11.3012 9.501 11.7042 9.046 11.7042 8.409C11.7042 7.72 11.2362 7.317 10.3392 7.317H8.46717V9.501ZM8.46717 11.061V13.401H10.4822C11.4702 13.401 11.9642 12.959 11.9642 12.218C11.9642 11.49 11.4702 11.061 10.4822 11.061H8.46717Z"
51
+ fill="currentColor"
52
+ />
22
53
  {:else if name === "italic"}
23
- <path d="M10 5h7" />
24
- <path d="M7 19h7" />
25
- <path d="m14 5-4 14" />
26
- {:else if name === "link"}
27
- <path d="M10 13a5 5 0 0 0 7.1.1l2-2a5 5 0 0 0-7.1-7.1l-1.1 1.1" />
28
- <path d="M14 11a5 5 0 0 0-7.1-.1l-2 2A5 5 0 0 0 12 20l1.1-1.1" />
29
- {:else if name === "strike"}
30
- <path d="M16 5.5A5.5 5.5 0 0 0 12 4c-2.2 0-4 1.2-4 3s1.6 2.5 4 3" />
31
- <path d="M8 18.5a6 6 0 0 0 4 1.5c2.2 0 4-1.2 4-3 0-1.4-1-2.2-2.6-2.6" />
32
- <path d="M4 12h16" />
54
+ <path
55
+ d="M11.311 14.2969L11.0327 15H6.18408L6.4624 14.2969C7.54639 14.2969 7.70752 14.209 7.83936 13.8721L10.8423 6.45996C10.8716 6.38672 10.8862 6.32812 10.8862 6.26953C10.8862 6.09375 10.6519 6.03516 9.80225 6.03516L10.0952 5.33203H14.9438L14.6509 6.03516C13.5669 6.03516 13.4204 6.12305 13.2886 6.45996L10.2856 13.8721C10.2563 13.9453 10.2271 14.0039 10.2271 14.0625C10.2271 14.2383 10.4614 14.2969 11.311 14.2969Z"
56
+ fill="currentColor"
57
+ />
33
58
  {:else if name === "underline"}
34
- <path d="M7 4v6a5 5 0 0 0 10 0V4" />
35
- <path d="M5 21h14" />
59
+ <path
60
+ d="M13.9656 11.256C13.9656 13.791 12.5096 15.156 10.0006 15.156C7.50461 15.156 6.03561 13.791 6.03561 11.23V5.718H7.76461V11.243C7.76461 12.868 8.50561 13.778 10.0006 13.778C11.4956 13.778 12.2496 12.868 12.2496 11.243V5.718H13.9656V11.256Z"
61
+ fill="currentColor"
62
+ />
63
+ <path d="M5.09961 16.3H14.9016V16.95H5.09961V16.3Z" fill="currentColor" />
64
+ {:else if name === "strike"}
65
+ <path
66
+ d="M5.50756 12.76H7.42756C7.56256 14.215 8.82256 14.71 10.1576 14.71C11.4326 14.71 12.4226 14.14 12.4226 13.06C12.4226 12.28 11.9576 11.845 10.6676 11.605L8.70256 11.245C7.12756 10.96 5.85256 10.21 5.85256 8.335C5.85256 6.43 7.53256 5.11 9.87256 5.11C12.4226 5.11 13.9526 6.22 14.1626 8.23H12.2876C12.1526 7.18 11.2226 6.595 9.88756 6.595C8.59756 6.595 7.78756 7.27 7.78756 8.215C7.78756 9.1 8.34256 9.385 9.49756 9.61L11.5676 10.015C13.3226 10.345 14.3726 11.215 14.3726 12.94C14.3726 14.89 12.5876 16.18 10.2176 16.18C7.66756 16.18 5.70256 15.115 5.50756 12.76Z"
67
+ fill="currentColor"
68
+ />
69
+ <path d="M4.99756 11.44H15.0026V12.19H4.99756V11.44Z" fill="currentColor" />
36
70
  {:else if name === "subscript"}
37
- <path d="m5 6 8 10M13 6 5 16" />
38
- <path d="M16 17c.5-1 3-1 3 .5 0 1-3 2-3 3h3" />
71
+ <path
72
+ d="M10.167 15L7.45002 11.36L4.73302 15H2.91302L6.55302 10.177L3.23802 5.718H5.20102L7.54102 8.89L9.89402 5.718H11.714L8.43802 10.06L12.13 15H10.167ZM16.7768 13.258C16.7768 14.155 16.1398 14.532 15.2038 15C14.5538 15.325 14.2808 15.546 14.2418 15.78H16.7898V16.82H12.7208V16.339C12.7208 15.286 13.5918 14.675 14.3588 14.233C15.0868 13.83 15.4378 13.635 15.4378 13.232C15.4378 12.894 15.2038 12.686 14.8268 12.686C14.3848 12.686 14.1248 13.024 14.1118 13.427H12.7468C12.8248 12.426 13.5528 11.633 14.8398 11.633C15.9448 11.633 16.7768 12.257 16.7768 13.258Z"
73
+ fill="currentColor"
74
+ />
39
75
  {:else if name === "superscript"}
40
- <path d="m5 8 8 10M13 8 5 18" />
41
- <path d="M16 4c.5-1 3-1 3 .5 0 1-3 2-3 3h3" />
76
+ <path
77
+ d="M10.167 15L7.45002 11.36L4.73302 15H2.91302L6.55302 10.177L3.23802 5.718H5.20102L7.54102 8.89L9.89402 5.718H11.714L8.43802 10.06L12.13 15H10.167ZM16.7768 7.252C16.7768 8.149 16.1398 8.526 15.2038 8.994C14.5538 9.319 14.2808 9.54 14.2418 9.774H16.7898V10.814H12.7208V10.333C12.7208 9.28 13.5918 8.669 14.3588 8.227C15.0868 7.824 15.4378 7.629 15.4378 7.226C15.4378 6.888 15.2038 6.68 14.8268 6.68C14.3848 6.68 14.1248 7.018 14.1118 7.421H12.7468C12.8248 6.42 13.5528 5.627 14.8398 5.627C15.9448 5.627 16.7768 6.251 16.7768 7.252Z"
78
+ fill="currentColor"
79
+ />
42
80
  {:else if name === "code"}
43
- <path d="m8 9-3 3 3 3" />
44
- <path d="m16 9 3 3-3 3" />
45
- <path d="m14 5-4 14" />
81
+ <path d="M7.76465 6L3.76465 10L7.76465 14" stroke="currentColor" />
82
+ <path d="M12.2354 6L16.2354 10L12.2354 14" stroke="currentColor" />
83
+ {:else if name === "link"}
84
+ <path
85
+ d="M8.5 11.5L11.5 8.5M8.5 7L9.625 5.875C10.868 4.633 12.882 4.633 14.125 5.875C15.368 7.118 15.368 9.133 14.125 10.375L13 11.5M7 8.5L5.746 9.754C4.56 10.94 4.519 12.85 5.652 14.087C6.814 15.354 8.78 15.449 10.058 14.298L11.5 13"
86
+ stroke="currentColor"
87
+ stroke-linecap="round"
88
+ stroke-linejoin="round"
89
+ />
90
+ {:else if name === "paragraph"}
91
+ <path
92
+ d="M11.708 14.5H7.79785V13.9414H8.01367C9.00391 13.9414 9.15625 13.9033 9.15625 13.6113V6.70508H8.07715C6.82031 6.70508 6.73145 7.08594 6.28711 8.67285H5.80469L5.91895 6.12109H13.5869L13.7012 8.67285H13.2188C12.7744 7.08594 12.6855 6.70508 11.4287 6.70508H10.3496V13.6113C10.3496 13.9033 10.502 13.9414 11.4922 13.9414H11.708V14.5Z"
93
+ fill="currentColor"
94
+ />
95
+ {:else if name === "left"}
96
+ <path d="M2.5 5H17.5" stroke="currentColor" stroke-width="1.5" />
97
+ <path d="M2.5 10H17.5" stroke="currentColor" stroke-width="1.5" />
98
+ <path d="M2.5 15H12.5" stroke="currentColor" stroke-width="1.5" />
99
+ {:else if name === "center"}
100
+ <path d="M2.5 5H17.5" stroke="currentColor" stroke-width="1.5" />
101
+ <path d="M2.5 10H17.5" stroke="currentColor" stroke-width="1.5" />
102
+ <path d="M5 15H15" stroke="currentColor" stroke-width="1.5" />
103
+ {:else if name === "right"}
104
+ <path d="M2.5 5H17.5" stroke="currentColor" stroke-width="1.5" />
105
+ <path d="M2.5 10H17.5" stroke="currentColor" stroke-width="1.5" />
106
+ <path d="M7.5 15H17.5" stroke="currentColor" stroke-width="1.5" />
107
+ {:else if name === "justify"}
108
+ <path d="M2.5 5H17.5" stroke="currentColor" stroke-width="1.5" />
109
+ <path d="M2.5 10H17.5" stroke="currentColor" stroke-width="1.5" />
110
+ <path d="M2.5 15H17.5" stroke="currentColor" stroke-width="1.5" />
111
+ {:else if name === "indent"}
112
+ <path d="M17.5 5H9.5" stroke="currentColor" stroke-width="1.5" />
113
+ <path d="M17.5 10H9.5" stroke="currentColor" stroke-width="1.5" />
114
+ <path d="M17.5 15H2.5" stroke="currentColor" stroke-width="1.5" />
115
+ <path d="M7.75 7.25L2.75 3.75V10.75L7.75 7.25Z" fill="currentColor" />
116
+ {:else if name === "outdent"}
117
+ <path d="M2.5 5H10.5" stroke="currentColor" stroke-width="1.5" />
118
+ <path d="M2.5 10H10.5" stroke="currentColor" stroke-width="1.5" />
119
+ <path d="M2.5 15H17.5" stroke="currentColor" stroke-width="1.5" />
120
+ <path d="M12.25 7.25L17.25 3.75V10.75L12.25 7.25Z" fill="currentColor" />
121
+ {:else if name === "h1"}
122
+ <path
123
+ d="M4.639 13.5V7.074H6.196V9.648H9.076V7.074H10.642V13.5H9.076V10.836H6.196V13.5H4.639ZM11.5656 9.045V8.019C12.6636 8.019 13.1316 7.731 13.2846 7.065H14.4006V13.5H12.8436V9.045H11.5656Z"
124
+ fill="currentColor"
125
+ />
126
+ {:else if name === "h2"}
127
+ <path
128
+ d="M4.139 13.5V7.074H5.696V9.648H8.576V7.074H10.142V13.5H8.576V10.836H5.696V13.5H4.139ZM15.9796 8.973C15.9796 10.116 15.1696 10.656 14.0356 11.232C13.2256 11.646 12.8206 11.943 12.7846 12.294H15.9886V13.5H11.0566V12.951C11.0566 11.601 12.1636 10.845 13.1176 10.287C14.0356 9.756 14.5126 9.486 14.5126 8.946C14.5126 8.46 14.2156 8.145 13.6306 8.145C13.0186 8.145 12.6586 8.613 12.6226 9.198H11.1196C11.2186 7.947 12.1006 6.966 13.6396 6.966C15.0346 6.966 15.9796 7.785 15.9796 8.973Z"
129
+ fill="currentColor"
130
+ />
131
+ {:else if name === "h3"}
132
+ <path
133
+ d="M4.139 13.5V7.074H5.696V9.648H8.576V7.074H10.142V13.5H8.576V10.836H5.696V13.5H4.139ZM16.1146 11.745C16.1146 12.744 15.2236 13.608 13.6126 13.608C12.0736 13.608 11.0926 12.762 10.9846 11.547H12.4696C12.5146 12.114 13.0006 12.456 13.6126 12.456C14.2876 12.456 14.6746 12.132 14.6746 11.619C14.6746 11.061 14.2426 10.836 13.6216 10.836H12.9826V9.738H13.6036C14.1526 9.738 14.5486 9.486 14.5486 8.937C14.5486 8.46 14.2156 8.127 13.6486 8.127C13.0366 8.127 12.6586 8.514 12.6226 9.045H11.1916C11.2726 7.929 12.1276 6.966 13.6666 6.966C15.1876 6.966 15.9706 7.848 15.9706 8.865C15.9706 9.603 15.5026 10.143 14.8186 10.269C15.6196 10.404 16.1146 10.971 16.1146 11.745Z"
134
+ fill="currentColor"
135
+ />
136
+ {:else if name === "h4"}
137
+ <path
138
+ d="M3.639 13.5V7.074H5.196V9.648H8.076V7.074H9.642V13.5H8.076V10.836H5.196V13.5H3.639ZM15.1736 7.074V10.854H16.3706V12.033H15.1736V13.5H13.6796V12.033H10.5116V10.845L13.4996 7.074H15.1736ZM13.6796 8.46L11.8256 10.854H13.6796V8.46Z"
139
+ fill="currentColor"
140
+ />
141
+ {:else if name === "h5"}
142
+ <path
143
+ d="M3.639 13.5V7.074H5.196V9.648H8.076V7.074H9.642V13.5H8.076V10.836H5.196V13.5H3.639ZM13.1576 10.269C12.6896 10.269 12.3746 10.494 12.2216 10.737H10.8176L11.1956 7.074H15.2546V8.28H12.3206L12.1856 9.549C12.4016 9.351 12.8516 9.126 13.4636 9.126C14.7866 9.126 15.6596 10.053 15.6596 11.358C15.6596 12.609 14.7326 13.608 13.1756 13.608C11.5826 13.608 10.6556 12.753 10.5566 11.511H12.1136C12.1586 12.06 12.5456 12.465 13.1576 12.465C13.8236 12.465 14.1746 11.97 14.1746 11.376C14.1746 10.764 13.8416 10.269 13.1576 10.269Z"
144
+ fill="currentColor"
145
+ />
146
+ {:else if name === "h6"}
147
+ <path
148
+ d="M3.639 13.5V7.074H5.196V9.648H8.076V7.074H9.642V13.5H8.076V10.836H5.196V13.5H3.639ZM13.3646 8.127C12.5456 8.127 12.0416 8.937 12.0416 9.999C12.3296 9.54 12.8246 9.207 13.5536 9.207C14.8586 9.207 15.8036 10.134 15.8036 11.376C15.8036 12.645 14.8226 13.608 13.3196 13.608C11.7266 13.608 10.6196 12.393 10.6196 10.395C10.6196 8.316 11.7716 6.966 13.4186 6.966C14.7056 6.966 15.5786 7.749 15.7316 8.829H14.3186C14.2016 8.415 13.9226 8.127 13.3646 8.127ZM13.3106 12.51C13.9586 12.51 14.3816 12.042 14.3816 11.385C14.3816 10.737 13.9586 10.278 13.3106 10.278C12.6536 10.278 12.2126 10.737 12.2126 11.385C12.2126 12.042 12.6536 12.51 13.3106 12.51Z"
149
+ fill="currentColor"
150
+ />
151
+ {:else if name === "unordered"}
152
+ <circle cx="4" cy="5" fill="currentColor" r="1.15" stroke="currentColor" stroke-width="0.3" />
153
+ <circle cx="4" cy="10" fill="currentColor" r="1.15" stroke="currentColor" stroke-width="0.3" />
154
+ <circle cx="4" cy="15" fill="currentColor" r="1.15" stroke="currentColor" stroke-width="0.3" />
155
+ <path d="M17 5H7" stroke="currentColor" stroke-width="1.5" />
156
+ <path d="M17 10H7" stroke="currentColor" stroke-width="1.5" />
157
+ <path d="M17 15H7" stroke="currentColor" stroke-width="1.5" />
158
+ {:else if name === "ordered"}
159
+ <path
160
+ d="M5.89284 12.479C5.89284 13.368 5.26284 13.788 4.38084 14.236C3.75084 14.558 3.43584 14.789 3.40784 15.062H5.89984V16H2.06384V15.573C2.06384 14.523 2.92484 13.935 3.66684 13.501C4.38084 13.088 4.75184 12.878 4.75184 12.458C4.75184 12.08 4.52084 11.835 4.06584 11.835C3.58984 11.835 3.30984 12.199 3.28184 12.654H2.11284C2.18984 11.681 2.87584 10.918 4.07284 10.918C5.15784 10.918 5.89284 11.555 5.89284 12.479Z"
161
+ fill="currentColor"
162
+ />
163
+ <path
164
+ d="M2.68608 4.535V3.737C3.54008 3.737 3.90408 3.513 4.02308 2.995H4.89108V8H3.68008L3.68008 4.535H2.68608Z"
165
+ fill="currentColor"
166
+ />
167
+ <path d="M8 15L17 15" stroke="currentColor" stroke-width="1.5" />
168
+ <path d="M8 10L17 10" stroke="currentColor" stroke-width="1.5" />
169
+ <path d="M8 5L17 5" stroke="currentColor" stroke-width="1.5" />
170
+ {:else if name === "check"}
171
+ <rect height="13" rx="1.5" stroke="currentColor" width="13" x="3.5" y="3.5" />
172
+ <path d="M7 10L9 12.5L13 7.5" stroke="currentColor" stroke-width="1.5" />
173
+ {:else if name === "quote"}
174
+ <path
175
+ d="M13.5353 10.5725C13.5353 9.47709 11.0456 9.99991 11.0456 7.85883C11.0456 6.46464 12.1162 5.61816 13.361 5.61816C14.805 5.61816 16 6.86298 16 8.92937C16 11.2945 14.4564 13.7841 11.1203 14.3816L10.8216 13.1368C12.888 12.4895 13.5353 11.4937 13.5353 10.5725ZM6.71369 10.5725C6.71369 9.47709 4.22407 9.99991 4.22407 7.85883C4.22407 6.46464 5.29461 5.61816 6.53942 5.61816C7.9834 5.61816 9.17842 6.86298 9.17842 8.92937C9.17842 11.2945 7.63485 13.7841 4.29876 14.3816L4 13.1368C6.06639 12.4895 6.71369 11.4937 6.71369 10.5725Z"
176
+ fill="currentColor"
177
+ />
178
+ {:else if name === "divider"}
179
+ <rect fill="currentColor" height="1" width="12" x="4" y="9.5" />
180
+ {:else if name === "upload"}
181
+ <path
182
+ d="M14.6667 4H5.33333C4.59695 4 4 4.59695 4 5.33333V14.6667C4 15.403 4.59695 16 5.33333 16H14.6667C15.403 16 16 15.403 16 14.6667V5.33333C16 4.59695 15.403 4 14.6667 4Z"
183
+ stroke="currentColor"
184
+ stroke-linecap="round"
185
+ stroke-linejoin="round"
186
+ />
187
+ <path
188
+ d="M7.99984 9.33366C8.73622 9.33366 9.33317 8.73671 9.33317 8.00033C9.33317 7.26395 8.73622 6.66699 7.99984 6.66699C7.26346 6.66699 6.6665 7.26395 6.6665 8.00033C6.6665 8.73671 7.26346 9.33366 7.99984 9.33366Z"
189
+ stroke="currentColor"
190
+ stroke-linecap="round"
191
+ stroke-linejoin="round"
192
+ />
193
+ <path
194
+ d="M16 11.9995L13.9427 9.94214C13.6926 9.69218 13.3536 9.55176 13 9.55176C12.6464 9.55176 12.3074 9.69218 12.0573 9.94214L6 15.9995"
195
+ stroke="currentColor"
196
+ stroke-linecap="round"
197
+ stroke-linejoin="round"
198
+ />
199
+ {:else if name === "relationship"}
200
+ <path
201
+ d="M7.75 12.25L15.25 4.75M15.25 4.75H11.5M15.25 4.75V8.5M13 11.5V13.75C13 14.5784 12.3284 15.25 11.5 15.25H6.25C5.42157 15.25 4.75 14.5784 4.75 13.75V8.5C4.75 7.67157 5.42157 7 6.25 7H8.5"
202
+ stroke="currentColor"
203
+ stroke-linecap="round"
204
+ stroke-linejoin="round"
205
+ />
206
+ {:else if name === "code-block"}
207
+ <path
208
+ d="M11.3738 8.62598L14.0404 5.95931L11.3738 3.29264M3.37376 3.29264L0.707092 5.95931L3.37376 8.62598M9.04043 0.625977L5.70709 11.2926"
209
+ stroke="currentColor"
210
+ stroke-linecap="square"
211
+ />
212
+ {:else if name === "block"}
213
+ <rect height="4" rx="0.5" stroke="currentColor" width="4" x="8" y="5" />
214
+ <rect height="4" rx="0.5" stroke="currentColor" width="4" x="5" y="11" />
215
+ <rect height="4" rx="0.5" stroke="currentColor" width="4" x="11" y="11" />
46
216
  {/if}
47
217
  </svg>
package/src/upload/rich-text-upload-node.scss ADDED
@@ -0,0 +1,308 @@
1
+ @use "@riducms/ui/styles.scss" as ui;
2
+
3
+ @layer ridu.components {
4
+ .ridu-richtext-upload-card {
5
+ position: relative;
6
+ inline-size: min(100%, var(--ridu-richtext-upload-width));
7
+ max-inline-size: 100%;
8
+ margin-block: 12px;
9
+ overflow: hidden;
10
+ border: 1px solid var(--control-border);
11
+ border-radius: var(--control-radius);
12
+ background: var(--control-surface);
13
+ box-shadow: var(--control-shadow);
14
+ color: var(--foreground);
15
+ font-family: var(--font-sans);
16
+ line-height: var(--line-height-body);
17
+ transition:
18
+ border-color 100ms,
19
+ box-shadow 100ms;
20
+
21
+ &[data-align="center"] {
22
+ margin-inline: auto;
23
+ }
24
+
25
+ &[data-align="right"],
26
+ &[data-align="end"] {
27
+ margin-inline-start: auto;
28
+ margin-inline-end: 0;
29
+ }
30
+
31
+ &[data-align="left"],
32
+ &[data-align="start"] {
33
+ margin-inline-start: 0;
34
+ margin-inline-end: auto;
35
+ }
36
+
37
+ &:hover,
38
+ &:focus-within {
39
+ border-color: var(--control-border-hover);
40
+ }
41
+
42
+ &.is-selected {
43
+ border-color: var(--foreground-muted);
44
+ box-shadow:
45
+ var(--control-shadow),
46
+ 0 0 0 1px var(--foreground-muted);
47
+ }
48
+ }
49
+
50
+ .ridu-richtext-upload-card__media {
51
+ position: relative;
52
+ inline-size: 100%;
53
+ background: var(--background);
54
+ }
55
+
56
+ .ridu-richtext-upload-card__preview {
57
+ position: relative;
58
+ display: grid;
59
+ place-items: center;
60
+ inline-size: 100%;
61
+ aspect-ratio: var(--ridu-richtext-upload-aspect);
62
+ max-block-size: 450px;
63
+ overflow: hidden;
64
+ background: var(--background);
65
+ }
66
+
67
+ .ridu-richtext-upload-card__preview.is-loading::after {
68
+ position: absolute;
69
+ inset: 0;
70
+ background: linear-gradient(
71
+ 100deg,
72
+ transparent 25%,
73
+ color-mix(in srgb, var(--foreground) 6%, transparent) 50%,
74
+ transparent 75%
75
+ );
76
+ background-size: 200% 100%;
77
+ content: "";
78
+ animation: ridu-richtext-upload-loading 1.4s linear infinite;
79
+ }
80
+
81
+ .ridu-richtext-upload-card__image {
82
+ position: absolute;
83
+ inset: 0;
84
+ display: block;
85
+ inline-size: 100%;
86
+ block-size: 100%;
87
+ object-fit: contain;
88
+ }
89
+
90
+ .ridu-richtext-upload-card__file-preview {
91
+ display: grid;
92
+ place-items: center;
93
+ gap: 7px;
94
+ max-inline-size: 80%;
95
+ color: var(--foreground-muted);
96
+ font-family: var(--font-mono);
97
+ font-size: 11px;
98
+ line-height: 16px;
99
+ letter-spacing: 0.12em;
100
+ text-transform: uppercase;
101
+ }
102
+
103
+ .ridu-richtext-upload-card__extension {
104
+ font-size: 13px;
105
+ font-weight: 500;
106
+ }
107
+
108
+ .ridu-richtext-upload-card__preview-name {
109
+ max-inline-size: 100%;
110
+ overflow: hidden;
111
+ color: var(--foreground-soft);
112
+ text-overflow: ellipsis;
113
+ white-space: nowrap;
114
+ }
115
+
116
+ .ridu-richtext-upload-card__actions {
117
+ position: absolute;
118
+ inset-block-start: 10px;
119
+ inset-inline-end: 10px;
120
+ z-index: 2;
121
+ display: flex;
122
+ align-items: center;
123
+ gap: 3px;
124
+ padding: 3px;
125
+ border: 1px solid var(--control-border);
126
+ border-radius: var(--control-radius);
127
+ background: var(--control-surface);
128
+ box-shadow: var(--shadow-popover);
129
+ color: var(--foreground);
130
+ opacity: 0;
131
+ transform: translateY(-6px);
132
+ pointer-events: none;
133
+ transition:
134
+ opacity 150ms,
135
+ transform 150ms;
136
+
137
+ &.is-visible,
138
+ .ridu-richtext-upload-card:hover &,
139
+ .ridu-richtext-upload-card:focus-within & {
140
+ opacity: 1;
141
+ transform: translateY(0);
142
+ pointer-events: auto;
143
+ }
144
+ }
145
+
146
+ .ridu-richtext-upload-card__action {
147
+ --button-color: var(--foreground-muted);
148
+ --button-hover-color: var(--foreground);
149
+ --button-hover-background: var(--control-surface-hover);
150
+ }
151
+
152
+ .ridu-richtext-upload-card__metadata {
153
+ position: absolute;
154
+ inset-inline: 0;
155
+ inset-block-end: 0;
156
+ z-index: 2;
157
+ display: flex;
158
+ align-items: baseline;
159
+ flex-wrap: wrap;
160
+ gap: 10px;
161
+ min-width: 0;
162
+ padding: 10px 14px;
163
+ background: var(--media-overlay);
164
+ box-shadow: var(--shadow-popover);
165
+ color: var(--media-foreground);
166
+ opacity: 0;
167
+ pointer-events: none;
168
+ backdrop-filter: saturate(1.2) blur(8px);
169
+ transition: opacity 150ms;
170
+
171
+ .ridu-richtext-upload-card:hover &,
172
+ .ridu-richtext-upload-card:focus-within &,
173
+ .ridu-richtext-upload-card.is-read-only & {
174
+ opacity: 1;
175
+ pointer-events: auto;
176
+ }
177
+ }
178
+
179
+ .ridu-richtext-upload-card__filename {
180
+ min-width: 0;
181
+ flex: 1;
182
+ overflow: hidden;
183
+ border: 0;
184
+ padding: 0;
185
+ background: transparent;
186
+ color: var(--media-foreground);
187
+ font: inherit;
188
+ font-weight: 600;
189
+ line-height: 18px;
190
+ text-align: start;
191
+ text-overflow: ellipsis;
192
+ white-space: nowrap;
193
+
194
+ &:is(button) {
195
+ text-decoration: underline;
196
+ text-decoration-thickness: 1px;
197
+ text-underline-offset: 2px;
198
+ cursor: pointer;
199
+ }
200
+
201
+ &:focus-visible {
202
+ @include ui.focus-outline;
203
+ }
204
+ }
205
+
206
+ .ridu-richtext-upload-card__collection {
207
+ flex-shrink: 0;
208
+ max-inline-size: 45%;
209
+ overflow: hidden;
210
+ color: color-mix(in srgb, var(--media-foreground) 70%, transparent);
211
+ font-size: 12px;
212
+ line-height: 16px;
213
+ text-overflow: ellipsis;
214
+ white-space: nowrap;
215
+ }
216
+
217
+ .ridu-richtext-upload-card__caption {
218
+ border-block-start: 1px solid var(--control-border);
219
+ padding: 9px 13px;
220
+ background: color-mix(in srgb, var(--background) 45%, transparent);
221
+ }
222
+
223
+ .ridu-richtext-upload-card__caption-editor {
224
+ display: flex;
225
+ align-items: flex-start;
226
+ gap: 8px;
227
+ }
228
+
229
+ .ridu-richtext-upload-card__caption-icon {
230
+ inline-size: 12px;
231
+ block-size: 12px;
232
+ margin-block-start: 5px;
233
+ flex-shrink: 0;
234
+ color: var(--foreground-soft);
235
+ }
236
+
237
+ .ridu-richtext-upload-card__caption-input {
238
+ min-block-size: 20px;
239
+ inline-size: 100%;
240
+ resize: none;
241
+ overflow: hidden;
242
+ border: 0;
243
+ padding: 0;
244
+ background: transparent;
245
+ box-shadow: none;
246
+ color: var(--foreground-muted);
247
+ font-size: 13px;
248
+ line-height: 19px;
249
+ text-align: start;
250
+ field-sizing: content;
251
+
252
+ &:hover,
253
+ &:focus {
254
+ border: 0;
255
+ box-shadow: none;
256
+ }
257
+
258
+ &:focus {
259
+ color: var(--foreground);
260
+ }
261
+ }
262
+
263
+ .ridu-richtext-upload-card__caption-text {
264
+ margin: 0;
265
+ color: var(--foreground-muted);
266
+ font-size: 13px;
267
+ line-height: 19px;
268
+ text-align: start;
269
+ }
270
+
271
+ @keyframes ridu-richtext-upload-loading {
272
+ to {
273
+ background-position: -200% 0;
274
+ }
275
+ }
276
+
277
+ @media (max-width: 30rem) {
278
+ .ridu-richtext-upload-card__metadata {
279
+ align-items: flex-start;
280
+ flex-direction: column;
281
+ gap: 2px;
282
+ }
283
+
284
+ .ridu-richtext-upload-card__collection {
285
+ max-inline-size: 100%;
286
+ }
287
+ }
288
+
289
+ @media (hover: none) {
290
+ .ridu-richtext-upload-card__actions,
291
+ .ridu-richtext-upload-card__metadata {
292
+ opacity: 1;
293
+ transform: none;
294
+ pointer-events: auto;
295
+ }
296
+ }
297
+
298
+ @media (prefers-reduced-motion: reduce) {
299
+ .ridu-richtext-upload-card__actions,
300
+ .ridu-richtext-upload-card__metadata {
301
+ transition-duration: 1ms;
302
+ }
303
+
304
+ .ridu-richtext-upload-card__preview.is-loading::after {
305
+ animation: none;
306
+ }
307
+ }
308
+ }