@caretcms/core 0.1.1 → 0.2.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 (222) hide show
  1. package/README.md +101 -18
  2. package/dist/browser-runtime.d.ts +16 -0
  3. package/dist/browser-runtime.d.ts.map +1 -1
  4. package/dist/browser-runtime.js +8 -3
  5. package/dist/browser-runtime.js.map +1 -1
  6. package/dist/contracts.d.ts +1 -0
  7. package/dist/contracts.d.ts.map +1 -1
  8. package/dist/contracts.js +1 -0
  9. package/dist/contracts.js.map +1 -1
  10. package/dist/index.d.ts +34 -0
  11. package/dist/index.d.ts.map +1 -1
  12. package/dist/index.js +239 -13
  13. package/dist/index.js.map +1 -1
  14. package/dist/loader.d.ts +17 -6
  15. package/dist/loader.d.ts.map +1 -1
  16. package/dist/loader.js +33 -14
  17. package/dist/loader.js.map +1 -1
  18. package/dist/markdown/block-context.d.ts +21 -0
  19. package/dist/markdown/block-context.d.ts.map +1 -0
  20. package/dist/markdown/block-context.js +27 -0
  21. package/dist/markdown/block-context.js.map +1 -0
  22. package/dist/markdown/canonical-body.d.ts +30 -0
  23. package/dist/markdown/canonical-body.d.ts.map +1 -0
  24. package/dist/markdown/canonical-body.js +54 -0
  25. package/dist/markdown/canonical-body.js.map +1 -0
  26. package/dist/markdown/contracts.d.ts +66 -0
  27. package/dist/markdown/contracts.d.ts.map +1 -0
  28. package/dist/markdown/contracts.js +102 -0
  29. package/dist/markdown/contracts.js.map +1 -0
  30. package/dist/markdown/html-to-snodes.d.ts +26 -0
  31. package/dist/markdown/html-to-snodes.d.ts.map +1 -0
  32. package/dist/markdown/html-to-snodes.js +118 -0
  33. package/dist/markdown/html-to-snodes.js.map +1 -0
  34. package/dist/markdown/remark.d.ts +35 -0
  35. package/dist/markdown/remark.d.ts.map +1 -0
  36. package/dist/markdown/remark.js +66 -0
  37. package/dist/markdown/remark.js.map +1 -0
  38. package/dist/markdown/satteri.d.ts +19 -0
  39. package/dist/markdown/satteri.d.ts.map +1 -0
  40. package/dist/markdown/satteri.js +120 -0
  41. package/dist/markdown/satteri.js.map +1 -0
  42. package/dist/markdown/serialize.d.ts +60 -0
  43. package/dist/markdown/serialize.d.ts.map +1 -0
  44. package/dist/markdown/serialize.js +264 -0
  45. package/dist/markdown/serialize.js.map +1 -0
  46. package/dist/markdown/splice.d.ts +32 -0
  47. package/dist/markdown/splice.d.ts.map +1 -0
  48. package/dist/markdown/splice.js +44 -0
  49. package/dist/markdown/splice.js.map +1 -0
  50. package/dist/markdown/stamp.d.ts +68 -0
  51. package/dist/markdown/stamp.d.ts.map +1 -0
  52. package/dist/markdown/stamp.js +131 -0
  53. package/dist/markdown/stamp.js.map +1 -0
  54. package/dist/runtime/auth/rate-limiter.d.ts.map +1 -1
  55. package/dist/runtime/auth/rate-limiter.js +5 -0
  56. package/dist/runtime/auth/rate-limiter.js.map +1 -1
  57. package/dist/runtime/auth/session.d.ts +2 -3
  58. package/dist/runtime/auth/session.d.ts.map +1 -1
  59. package/dist/runtime/auth/session.js +52 -21
  60. package/dist/runtime/auth/session.js.map +1 -1
  61. package/dist/runtime/content.d.ts.map +1 -1
  62. package/dist/runtime/content.js +4 -2
  63. package/dist/runtime/content.js.map +1 -1
  64. package/dist/runtime/middleware.d.ts.map +1 -1
  65. package/dist/runtime/middleware.js +21 -4
  66. package/dist/runtime/middleware.js.map +1 -1
  67. package/dist/runtime/mutations/contracts.d.ts +25 -1
  68. package/dist/runtime/mutations/contracts.d.ts.map +1 -1
  69. package/dist/runtime/mutations/contracts.js +67 -0
  70. package/dist/runtime/mutations/contracts.js.map +1 -1
  71. package/dist/runtime/mutations/engine.d.ts +6 -1
  72. package/dist/runtime/mutations/engine.d.ts.map +1 -1
  73. package/dist/runtime/mutations/engine.js +151 -42
  74. package/dist/runtime/mutations/engine.js.map +1 -1
  75. package/dist/runtime/providers.d.ts +9 -0
  76. package/dist/runtime/providers.d.ts.map +1 -1
  77. package/dist/runtime/providers.js +6 -0
  78. package/dist/runtime/providers.js.map +1 -1
  79. package/dist/runtime/publish.d.ts +15 -1
  80. package/dist/runtime/publish.d.ts.map +1 -1
  81. package/dist/runtime/publish.js +79 -4
  82. package/dist/runtime/publish.js.map +1 -1
  83. package/dist/runtime/rebuild-webhook.d.ts +29 -0
  84. package/dist/runtime/rebuild-webhook.d.ts.map +1 -0
  85. package/dist/runtime/rebuild-webhook.js +37 -0
  86. package/dist/runtime/rebuild-webhook.js.map +1 -0
  87. package/dist/runtime/request-context.d.ts +9 -1
  88. package/dist/runtime/request-context.d.ts.map +1 -1
  89. package/dist/runtime/request-context.js.map +1 -1
  90. package/dist/runtime/rewrite.d.ts +18 -0
  91. package/dist/runtime/rewrite.d.ts.map +1 -1
  92. package/dist/runtime/rewrite.js +118 -4
  93. package/dist/runtime/rewrite.js.map +1 -1
  94. package/dist/runtime/rich-allowlist.d.ts +3 -2
  95. package/dist/runtime/rich-allowlist.d.ts.map +1 -1
  96. package/dist/runtime/rich-allowlist.js +14 -4
  97. package/dist/runtime/rich-allowlist.js.map +1 -1
  98. package/dist/runtime/routes/_helpers.d.ts +7 -0
  99. package/dist/runtime/routes/_helpers.d.ts.map +1 -1
  100. package/dist/runtime/routes/_helpers.js +34 -1
  101. package/dist/runtime/routes/_helpers.js.map +1 -1
  102. package/dist/runtime/routes/admin-entry.d.ts +1 -0
  103. package/dist/runtime/routes/admin-entry.d.ts.map +1 -1
  104. package/dist/runtime/routes/admin-entry.js +3 -2
  105. package/dist/runtime/routes/admin-entry.js.map +1 -1
  106. package/dist/runtime/routes/admin.d.ts +1 -0
  107. package/dist/runtime/routes/admin.d.ts.map +1 -1
  108. package/dist/runtime/routes/admin.js +20 -13
  109. package/dist/runtime/routes/admin.js.map +1 -1
  110. package/dist/runtime/routes/auth-login.d.ts +1 -0
  111. package/dist/runtime/routes/auth-login.d.ts.map +1 -1
  112. package/dist/runtime/routes/auth-login.js +1 -0
  113. package/dist/runtime/routes/auth-login.js.map +1 -1
  114. package/dist/runtime/routes/auth-logout.d.ts +1 -0
  115. package/dist/runtime/routes/auth-logout.d.ts.map +1 -1
  116. package/dist/runtime/routes/auth-logout.js +1 -0
  117. package/dist/runtime/routes/auth-logout.js.map +1 -1
  118. package/dist/runtime/routes/auth-session.d.ts +1 -0
  119. package/dist/runtime/routes/auth-session.d.ts.map +1 -1
  120. package/dist/runtime/routes/auth-session.js +1 -0
  121. package/dist/runtime/routes/auth-session.js.map +1 -1
  122. package/dist/runtime/routes/collection-list.d.ts +1 -0
  123. package/dist/runtime/routes/collection-list.d.ts.map +1 -1
  124. package/dist/runtime/routes/collection-list.js +3 -2
  125. package/dist/runtime/routes/collection-list.js.map +1 -1
  126. package/dist/runtime/routes/collections-metadata.d.ts +1 -0
  127. package/dist/runtime/routes/collections-metadata.d.ts.map +1 -1
  128. package/dist/runtime/routes/collections-metadata.js +3 -2
  129. package/dist/runtime/routes/collections-metadata.js.map +1 -1
  130. package/dist/runtime/routes/draft.d.ts +5 -0
  131. package/dist/runtime/routes/draft.d.ts.map +1 -1
  132. package/dist/runtime/routes/draft.js +18 -1
  133. package/dist/runtime/routes/draft.js.map +1 -1
  134. package/dist/runtime/routes/editor-assets.d.ts +1 -0
  135. package/dist/runtime/routes/editor-assets.d.ts.map +1 -1
  136. package/dist/runtime/routes/editor-assets.js +1 -0
  137. package/dist/runtime/routes/editor-assets.js.map +1 -1
  138. package/dist/runtime/routes/entries.d.ts +1 -0
  139. package/dist/runtime/routes/entries.d.ts.map +1 -1
  140. package/dist/runtime/routes/entries.js +6 -4
  141. package/dist/runtime/routes/entries.js.map +1 -1
  142. package/dist/runtime/routes/history.d.ts +1 -0
  143. package/dist/runtime/routes/history.d.ts.map +1 -1
  144. package/dist/runtime/routes/history.js +50 -24
  145. package/dist/runtime/routes/history.js.map +1 -1
  146. package/dist/runtime/routes/mutate.d.ts +1 -0
  147. package/dist/runtime/routes/mutate.d.ts.map +1 -1
  148. package/dist/runtime/routes/mutate.js +42 -7
  149. package/dist/runtime/routes/mutate.js.map +1 -1
  150. package/dist/runtime/routes/publish.d.ts +1 -0
  151. package/dist/runtime/routes/publish.d.ts.map +1 -1
  152. package/dist/runtime/routes/publish.js +15 -3
  153. package/dist/runtime/routes/publish.js.map +1 -1
  154. package/dist/runtime/routes/schema.d.ts +1 -0
  155. package/dist/runtime/routes/schema.d.ts.map +1 -1
  156. package/dist/runtime/routes/schema.js +7 -3
  157. package/dist/runtime/routes/schema.js.map +1 -1
  158. package/dist/runtime/routes/studio-home.d.ts +1 -0
  159. package/dist/runtime/routes/studio-home.d.ts.map +1 -1
  160. package/dist/runtime/routes/studio-home.js +10 -9
  161. package/dist/runtime/routes/studio-home.js.map +1 -1
  162. package/dist/runtime/routes/theme-stylesheet.d.ts +1 -0
  163. package/dist/runtime/routes/theme-stylesheet.d.ts.map +1 -1
  164. package/dist/runtime/routes/theme-stylesheet.js +12 -1
  165. package/dist/runtime/routes/theme-stylesheet.js.map +1 -1
  166. package/dist/runtime/routes/upload.d.ts +1 -0
  167. package/dist/runtime/routes/upload.d.ts.map +1 -1
  168. package/dist/runtime/routes/upload.js +1 -0
  169. package/dist/runtime/routes/upload.js.map +1 -1
  170. package/dist/runtime/static-bake.d.ts +20 -0
  171. package/dist/runtime/static-bake.d.ts.map +1 -0
  172. package/dist/runtime/static-bake.js +58 -0
  173. package/dist/runtime/static-bake.js.map +1 -0
  174. package/dist/runtime/storage/atomic-write.d.ts.map +1 -1
  175. package/dist/runtime/storage/atomic-write.js +8 -3
  176. package/dist/runtime/storage/atomic-write.js.map +1 -1
  177. package/dist/runtime/storage/frontmatter-codec.d.ts.map +1 -1
  178. package/dist/runtime/storage/frontmatter-codec.js +8 -0
  179. package/dist/runtime/storage/frontmatter-codec.js.map +1 -1
  180. package/dist/runtime/storage/markdown-adapter.d.ts +19 -0
  181. package/dist/runtime/storage/markdown-adapter.d.ts.map +1 -1
  182. package/dist/runtime/storage/markdown-adapter.js +41 -0
  183. package/dist/runtime/storage/markdown-adapter.js.map +1 -1
  184. package/dist/runtime/storage/session-overlay-adapter.d.ts +8 -0
  185. package/dist/runtime/storage/session-overlay-adapter.d.ts.map +1 -1
  186. package/dist/runtime/storage/session-overlay-adapter.js +24 -2
  187. package/dist/runtime/storage/session-overlay-adapter.js.map +1 -1
  188. package/dist/runtime/utils.d.ts +10 -0
  189. package/dist/runtime/utils.d.ts.map +1 -1
  190. package/dist/runtime/utils.js +16 -0
  191. package/dist/runtime/utils.js.map +1 -1
  192. package/dist/runtime/views/studio-layout.d.ts.map +1 -1
  193. package/dist/runtime/views/studio-layout.js +11 -10
  194. package/dist/runtime/views/studio-layout.js.map +1 -1
  195. package/dist/types.d.ts +40 -0
  196. package/dist/types.d.ts.map +1 -1
  197. package/package.json +2 -2
  198. package/static/cms/admin-entry.js +36 -2
  199. package/static/cms/dev-toolbar/app.js +3 -1
  200. package/static/cms/editor/config.js +10 -0
  201. package/static/cms/editor/guards.js +1 -1
  202. package/static/cms/editor/helpers.js +5 -1
  203. package/static/cms/editor/highlight.js +4 -6
  204. package/static/cms/editor/image-edit.js +41 -11
  205. package/static/cms/editor/image.css +7 -1
  206. package/static/cms/editor/md-block-edit.js +176 -0
  207. package/static/cms/editor/md-serialize.js +301 -0
  208. package/static/cms/editor/panel.css +69 -25
  209. package/static/cms/editor/panel.js +39 -0
  210. package/static/cms/editor/rich-toolbar.js +4 -3
  211. package/static/cms/editor/sanitize.js +10 -5
  212. package/static/cms/editor/sync.js +1 -1
  213. package/static/cms/editor/text-edit.js +68 -17
  214. package/static/cms/editor/text-link-interactions.js +4 -4
  215. package/static/cms/editor/toast.css +114 -2
  216. package/static/cms/editor/toast.js +121 -22
  217. package/static/cms/editor/tokens-and-text.css +64 -3
  218. package/static/cms/editor/toolbar.css +76 -8
  219. package/static/cms/editor/toolbar.js +173 -64
  220. package/static/cms/editor.js +16 -3
  221. package/static/cms/studio-login.css +70 -0
  222. package/static/cms/studio.css +80 -13
package/static/cms/editor/panel.css CHANGED
@@ -1,13 +1,27 @@
1
1
  /* ---------------------------------------------------------------------------
2
- Studio Panel — sliding left sidebar with iframe
2
+ Studio Panel — sliding left drawer with iframe
3
+
4
+ The panel is an OVERLAY drawer: it slides over the page and does not reflow
5
+ host layout. Earlier versions pushed `body` and shifted a hard-coded
6
+ `#main-header`, which silently broke on any site not using that selector or
7
+ using absolute/transformed layout. The only element still shifted is the CMS
8
+ toolbar, which is our own chrome (always present) — no host coupling.
9
+
10
+ Hosts that DO want content pushed aside (rather than overlaid) can opt in by
11
+ adding the `caret-push-content` class to <body>. See docs.
3
12
  --------------------------------------------------------------------------- */
4
13
 
14
+ :root {
15
+ --cms-panel-width: 380px;
16
+ }
17
+
5
18
  .cms-studio-panel {
6
19
  position: fixed;
7
20
  top: 0;
8
21
  left: 0;
9
22
  bottom: 0;
10
- width: 380px;
23
+ width: var(--cms-panel-width);
24
+ max-width: 100vw;
11
25
  z-index: 100000;
12
26
  background: #0c0e12;
13
27
  border-right: 1px solid rgba(59, 130, 246, 0.12);
@@ -31,29 +45,46 @@
31
45
  display: block;
32
46
  }
33
47
 
34
- /* Push body content when panel is open */
35
- body.cms-panel-open {
36
- padding-left: 380px;
37
- transition: padding-left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
48
+ /* Loading skeleton shown until the Studio iframe reports load. */
49
+ .cms-studio-panel-loading {
50
+ position: absolute;
51
+ inset: 0;
52
+ display: flex;
53
+ align-items: center;
54
+ justify-content: center;
55
+ background: #0c0e12;
56
+ color: rgba(255, 255, 255, 0.5);
57
+ font-family: var(--cms-font);
58
+ font-size: 12px;
59
+ z-index: 1;
60
+ transition: opacity 0.3s ease;
38
61
  }
39
62
 
40
- body.cms-panel-open.no-transition {
41
- transition: none;
63
+ .cms-studio-panel-loading[hidden] {
64
+ opacity: 0;
65
+ pointer-events: none;
42
66
  }
43
67
 
44
- /* Shift fixed header */
45
- body.cms-panel-open #main-header {
46
- left: 380px;
47
- transition: left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
68
+ .cms-studio-panel-loading-text {
69
+ margin-left: 10px;
48
70
  }
49
71
 
50
- body.cms-panel-open.no-transition #main-header {
51
- transition: none;
72
+ .cms-studio-panel-spinner {
73
+ width: 22px;
74
+ height: 22px;
75
+ border: 2px solid rgba(255, 255, 255, 0.15);
76
+ border-top-color: var(--cms-accent, #3b82f6);
77
+ border-radius: 50%;
78
+ animation: cms-panel-spin 0.7s linear infinite;
52
79
  }
53
80
 
54
- /* Shift fixed toolbar */
81
+ @keyframes cms-panel-spin {
82
+ to { transform: rotate(360deg); }
83
+ }
84
+
85
+ /* Shift the CMS toolbar (our chrome) so the drawer doesn't cover it. */
55
86
  body.cms-panel-open .cms-toolbar {
56
- left: 380px;
87
+ left: var(--cms-panel-width);
57
88
  transition: left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
58
89
  }
59
90
 
@@ -61,6 +92,16 @@ body.cms-panel-open.no-transition .cms-toolbar {
61
92
  transition: none;
62
93
  }
63
94
 
95
+ /* Opt-in: push host content aside instead of overlaying it. */
96
+ body.cms-panel-open.caret-push-content {
97
+ padding-left: var(--cms-panel-width);
98
+ transition: padding-left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
99
+ }
100
+
101
+ body.cms-panel-open.caret-push-content.no-transition {
102
+ transition: none;
103
+ }
104
+
64
105
  /* Studio button active state */
65
106
  .cms-studio-btn.active {
66
107
  background: rgba(59, 130, 246, 0.3);
@@ -69,23 +110,26 @@ body.cms-panel-open.no-transition .cms-toolbar {
69
110
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.15);
70
111
  }
71
112
 
72
-
73
- /* Mobile: full-width overlay, no content push */
113
+ /* Mobile: full-width overlay, no toolbar shift. */
74
114
  @media (max-width: 768px) {
75
115
  .cms-studio-panel {
76
116
  width: 100%;
77
117
  box-shadow: none;
78
118
  }
79
119
 
80
- body.cms-panel-open {
81
- padding-left: 0;
82
- }
83
-
84
- body.cms-panel-open #main-header {
120
+ body.cms-panel-open .cms-toolbar,
121
+ body.cms-panel-open.caret-push-content {
85
122
  left: 0;
123
+ padding-left: 0;
86
124
  }
125
+ }
87
126
 
88
- body.cms-panel-open .cms-toolbar {
89
- left: 0;
127
+ @media (prefers-reduced-motion: reduce) {
128
+ .cms-studio-panel,
129
+ body.cms-panel-open .cms-toolbar,
130
+ body.cms-panel-open.caret-push-content,
131
+ .cms-studio-panel-spinner {
132
+ transition: none;
133
+ animation: none;
90
134
  }
91
135
  }
package/static/cms/editor/panel.js CHANGED
@@ -9,22 +9,51 @@ export function mountStudioPanel({ studioButton }) {
9
9
 
10
10
  const panel = document.createElement('div');
11
11
  panel.className = 'cms-studio-panel';
12
+ // A dialog-like region so AT users understand the drawer context.
13
+ panel.setAttribute('role', 'dialog');
14
+ panel.setAttribute('aria-label', 'Content Studio');
15
+ panel.setAttribute('aria-hidden', 'true');
16
+
17
+ // Loading skeleton shown until the iframe reports load — the iframe is blank
18
+ // until then, which reads as "broken".
19
+ const loading = document.createElement('div');
20
+ loading.className = 'cms-studio-panel-loading';
21
+ loading.innerHTML =
22
+ '<span class="cms-studio-panel-spinner" aria-hidden="true"></span>' +
23
+ '<span class="cms-studio-panel-loading-text">Loading Studio…</span>';
24
+ panel.appendChild(loading);
12
25
 
13
26
  const iframe = document.createElement('iframe');
14
27
  iframe.src = STUDIO_PATH;
15
28
  iframe.title = 'Content Studio';
29
+ iframe.addEventListener('load', () => {
30
+ loading.setAttribute('hidden', 'hidden');
31
+ });
16
32
  panel.appendChild(iframe);
17
33
  document.body.appendChild(panel);
18
34
 
35
+ // Remember what had focus so we can restore it on close.
36
+ let lastFocused = null;
37
+
19
38
  function openPanel(animate = true) {
39
+ lastFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
20
40
  if (!animate) {
21
41
  panel.classList.add('no-transition');
22
42
  document.body.classList.add('no-transition');
23
43
  }
24
44
  panel.classList.add('open');
45
+ panel.setAttribute('aria-hidden', 'false');
25
46
  document.body.classList.add('cms-panel-open');
26
47
  studioButton?.classList.add('active');
48
+ studioButton?.setAttribute('aria-expanded', 'true');
27
49
  sessionStorage.setItem('cms-panel-open', '1');
50
+ // Move focus into the drawer so keyboard users aren't left behind the
51
+ // covering panel. The iframe is focusable and hands focus to its own content.
52
+ if (animate) {
53
+ try {
54
+ iframe.focus({ preventScroll: true });
55
+ } catch (e) {}
56
+ }
28
57
  if (!animate) {
29
58
  requestAnimationFrame(() => {
30
59
  requestAnimationFrame(() => {
@@ -37,9 +66,19 @@ export function mountStudioPanel({ studioButton }) {
37
66
 
38
67
  function closePanel() {
39
68
  panel.classList.remove('open');
69
+ panel.setAttribute('aria-hidden', 'true');
40
70
  document.body.classList.remove('cms-panel-open');
41
71
  studioButton?.classList.remove('active');
72
+ studioButton?.setAttribute('aria-expanded', 'false');
42
73
  sessionStorage.setItem('cms-panel-open', '0');
74
+ // Return focus to the trigger (or wherever it was) so it isn't lost.
75
+ const restore = lastFocused || studioButton;
76
+ if (restore instanceof HTMLElement) {
77
+ try {
78
+ restore.focus({ preventScroll: true });
79
+ } catch (e) {}
80
+ }
81
+ lastFocused = null;
43
82
  }
44
83
 
45
84
  function togglePanel() {
package/static/cms/editor/rich-toolbar.js CHANGED
@@ -175,11 +175,12 @@ function onSelectionChange() {
175
175
  return;
176
176
  }
177
177
 
178
- // Check if selection is inside a rich element
178
+ // Check if selection is inside a rich element (or a markdown body block,
179
+ // which shares the same inline formatting commands)
179
180
  const anchor = sel.anchorNode;
180
181
  const richEl = anchor instanceof Element
181
- ? anchor.closest('[data-caret-rich]')
182
- : anchor?.parentElement?.closest('[data-caret-rich]');
182
+ ? anchor.closest('[data-caret-rich], [data-caret-md]')
183
+ : anchor?.parentElement?.closest('[data-caret-rich], [data-caret-md]');
183
184
 
184
185
  if (!richEl) {
185
186
  hide();
package/static/cms/editor/sanitize.js CHANGED
@@ -5,15 +5,20 @@
5
5
  * Only inline formatting elements are permitted — no block-level tags.
6
6
  */
7
7
 
8
- const ALLOWED_TAGS = new Set([
9
- 'b', 'strong', 'i', 'em', 'u', 's', 'a', 'br', 'sub', 'sup',
8
+ // NOTE: these three constants + classAllowed() below are a HAND MIRROR of
9
+ // src/runtime/rich-allowlist.ts (this file ships as raw unbundled JS and can't
10
+ // import it). They are `export`ed so tests/unit/sanitizer-parity.test.ts can
11
+ // assert they never drift from the source of truth — CI fails on divergence.
12
+ export const ALLOWED_TAGS = new Set([
13
+ 'b', 'strong', 'i', 'em', 'u', 's', 'a', 'br', 'sub', 'sup', 'span',
10
14
  ]);
11
15
 
12
- const ALLOWED_ATTRS = {
16
+ export const ALLOWED_ATTRS = {
13
17
  a: new Set(['href', 'target', 'rel']),
14
18
  };
15
19
 
16
- const SAFE_HREF_RE = /^(?:https?:|mailto:|tel:|\/)/i;
20
+ // `(?!\/)` rejects protocol-relative URLs (`//evil.com`). Mirrors core exactly.
21
+ export const SAFE_HREF_RE = /^(?:https?:|mailto:|tel:|\/(?!\/))/i;
17
22
 
18
23
  /**
19
24
  * Does `cls` match any pattern? (exact, `prefix-*`, or lone `*`)
@@ -22,7 +27,7 @@ const SAFE_HREF_RE = /^(?:https?:|mailto:|tel:|\/)/i;
22
27
  * @param {readonly string[]} patterns
23
28
  * @returns {boolean}
24
29
  */
25
- function classAllowed(cls, patterns) {
30
+ export function classAllowed(cls, patterns) {
26
31
  for (const p of patterns) {
27
32
  if (p === '*') return true;
28
33
  if (p.endsWith('*')) {
package/static/cms/editor/sync.js CHANGED
@@ -25,7 +25,7 @@ export function mountStudioSync({ studioIframe, state, showToast, clientLinkify
25
25
  const els = document.querySelectorAll(`[data-caret="${selector}"]`);
26
26
  els.forEach((el) => {
27
27
  // Skip elements being actively edited to prevent overwriting unsaved work
28
- if (el === state.dirtyEl || el === document.activeElement) return;
28
+ if (state.dirtyEls.has(el) || el === document.activeElement) return;
29
29
 
30
30
  if (el instanceof HTMLImageElement) {
31
31
  // Image element
package/static/cms/editor/text-edit.js CHANGED
@@ -5,6 +5,20 @@ import { sanitizeHtml } from './sanitize.js';
5
5
  const snapshots = new WeakMap();
6
6
  let keydownBound = false;
7
7
 
8
+ // `contenteditable="plaintext-only"` isn't supported in older Firefox (pre-136);
9
+ // setting it there leaves the element non-editable. Feature-detect once and fall
10
+ // back to "true" (rich contenteditable) — the blur handler saves via textContent
11
+ // for non-rich fields, so the stored value stays plain-text regardless.
12
+ const PLAINTEXT_ONLY_SUPPORTED = (() => {
13
+ try {
14
+ const probe = document.createElement('div');
15
+ probe.setAttribute('contenteditable', 'plaintext-only');
16
+ return probe.contentEditable === 'plaintext-only';
17
+ } catch (e) {
18
+ return false;
19
+ }
20
+ })();
21
+
8
22
  export function mountTextEditors({
9
23
  state,
10
24
  parseCaretAttr,
@@ -52,7 +66,10 @@ export function mountTextEditors({
52
66
  const isRich = el.hasAttribute('data-caret-rich');
53
67
  const isLinkable = !isRich && el.hasAttribute('data-caret-raw');
54
68
 
55
- el.setAttribute('contenteditable', isRich ? 'true' : 'plaintext-only');
69
+ el.setAttribute(
70
+ 'contenteditable',
71
+ isRich || !PLAINTEXT_ONLY_SUPPORTED ? 'true' : 'plaintext-only',
72
+ );
56
73
  el.classList.add('cms-editable');
57
74
  if (isRich) el.classList.add('cms-rich');
58
75
  if (isLinkable) el.classList.add('cms-linkable');
@@ -95,9 +112,48 @@ export function mountTextEditors({
95
112
  el.addEventListener('input', () => {
96
113
  const snapshot = snapshots.get(el);
97
114
  const current = isRich ? el.innerHTML : (el.textContent || '');
98
- state.dirtyEl = current !== snapshot ? el : null;
115
+ if (current !== snapshot) state.dirtyEls.add(el);
116
+ else state.dirtyEls.delete(el);
99
117
  });
100
118
 
119
+ // Save-conflict resolution: never silently discard the user's edit. Keep
120
+ // their text in the field and offer an explicit choice. "Keep mine" re-saves
121
+ // (the save queue refreshed the cached revision on the 409, so the retry
122
+ // targets the current revision and overwrites); "Load latest" replaces the
123
+ // field with the server value. The element stays dirty until resolved.
124
+ const runConflict = (resolved, mine, latestValue) => {
125
+ state.dirtyEls.add(el);
126
+ el.classList.add('cms-conflict');
127
+ showToast.conflict({
128
+ message: 'This content changed elsewhere while you were editing.',
129
+ onKeepMine: async () => {
130
+ el.classList.remove('cms-conflict');
131
+ el.classList.add('cms-saving');
132
+ const retry = await saveField(resolved.collection, resolved.id, resolved.field, mine);
133
+ el.classList.remove('cms-saving');
134
+ flash(el, retry.ok);
135
+ if (retry.ok) {
136
+ state.dirtyEls.delete(el);
137
+ syncBoundText(attr, mine);
138
+ showToast('Your version saved', 'success');
139
+ } else if (retry.reason === 'conflict') {
140
+ runConflict(resolved, mine, retry.latestValue);
141
+ } else if (retry.reason !== 'unauthorized') {
142
+ showToast('Failed to save. Try again.', 'error');
143
+ }
144
+ },
145
+ onLoadLatest: () => {
146
+ el.classList.remove('cms-conflict');
147
+ state.dirtyEls.delete(el);
148
+ const value = typeof latestValue === 'string' ? latestValue : mine;
149
+ applyTextValue(el, value);
150
+ snapshots.set(el, isRich ? sanitizeHtml(value) : value);
151
+ syncBoundText(attr, value);
152
+ showToast('Loaded latest version', 'success');
153
+ },
154
+ });
155
+ };
156
+
101
157
  el.addEventListener('blur', async () => {
102
158
  removeLinkHint();
103
159
 
@@ -107,7 +163,7 @@ export function mountTextEditors({
107
163
  // Skip save if Escape was pressed
108
164
  if (el._caretSkipSave) {
109
165
  el._caretSkipSave = false;
110
- state.dirtyEl = null;
166
+ state.dirtyEls.delete(el);
111
167
  if (isRich) {
112
168
  el.innerHTML = snapshots.get(el) || '';
113
169
  } else if (isLinkable) {
@@ -147,24 +203,19 @@ export function mountTextEditors({
147
203
  const result = await saveField(resolved.collection, resolved.id, resolved.field, current);
148
204
  el.classList.remove('cms-saving');
149
205
  flash(el, result.ok);
150
- state.dirtyEl = null;
151
206
 
152
- // Sync all duplicated text bindings
153
207
  if (result.ok) {
208
+ state.dirtyEls.delete(el);
154
209
  syncBoundText(attr, current);
155
210
  showToast('Content saved', 'success');
156
- } else {
157
- const rollbackValue =
158
- result.reason === 'conflict' && typeof result.latestValue === 'string'
159
- ? result.latestValue
160
- : snapshot;
161
- syncBoundText(attr, rollbackValue);
162
-
163
- if (result.reason === 'conflict') {
164
- showToast('Content changed elsewhere. Loaded latest value.', 'error');
165
- } else if (result.reason !== 'unauthorized') {
166
- showToast('Failed to save. Changes reverted.', 'error');
167
- }
211
+ } else if (result.reason === 'conflict') {
212
+ // Preserve the user's edit and let them choose — don't overwrite it.
213
+ runConflict(resolved, current, result.latestValue);
214
+ } else if (result.reason !== 'unauthorized') {
215
+ // Genuine failure (not an auth redirect): revert to the pre-edit snapshot.
216
+ state.dirtyEls.delete(el);
217
+ syncBoundText(attr, snapshot);
218
+ showToast('Failed to save. Changes reverted.', 'error');
168
219
  }
169
220
  });
170
221
  });
package/static/cms/editor/text-link-interactions.js CHANGED
@@ -177,10 +177,10 @@ export function createTextLinkInteractions({
177
177
  }
178
178
  }
179
179
 
180
- state.dirtyEl = focused;
180
+ state.dirtyEls.add(focused);
181
181
  } else if (url === '' && existingLink) {
182
182
  document.execCommand('unlink', false, null);
183
- state.dirtyEl = focused;
183
+ state.dirtyEls.add(focused);
184
184
  }
185
185
 
186
186
  state.linkPopupEl = null;
@@ -208,7 +208,7 @@ export function createTextLinkInteractions({
208
208
  newSel.removeAllRanges();
209
209
  newSel.addRange(range);
210
210
  document.execCommand('insertText', false, `[${selectedText}](${url})`);
211
- state.dirtyEl = focused;
211
+ state.dirtyEls.add(focused);
212
212
  }
213
213
 
214
214
  state.linkPopupEl = null;
@@ -235,7 +235,7 @@ export function createTextLinkInteractions({
235
235
  } else {
236
236
  focused.textContent = snapshot;
237
237
  }
238
- state.dirtyEl = null;
238
+ state.dirtyEls.delete(focused);
239
239
  }
240
240
  focused._caretSkipSave = true;
241
241
  focused.blur();
package/static/cms/editor/toast.css CHANGED
@@ -2,11 +2,20 @@
2
2
  Toast notifications
3
3
  --------------------------------------------------------------------------- */
4
4
 
5
- .cms-toast {
5
+ .cms-toast-stack {
6
6
  position: fixed;
7
7
  bottom: 62px;
8
8
  right: 24px;
9
9
  z-index: 100000;
10
+ display: flex;
11
+ flex-direction: column-reverse; /* newest nearest the toolbar */
12
+ align-items: flex-end;
13
+ gap: 8px;
14
+ max-width: min(360px, calc(100vw - 48px));
15
+ pointer-events: none; /* the region is inert; interactive toasts opt back in */
16
+ }
17
+
18
+ .cms-toast {
10
19
  display: flex;
11
20
  align-items: center;
12
21
  gap: 10px;
@@ -16,7 +25,7 @@
16
25
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
17
26
  font-family: var(--cms-font);
18
27
  font-size: 12px;
19
- color: rgba(255, 255, 255, 0.8);
28
+ color: rgba(255, 255, 255, 0.86);
20
29
  border-radius: 2px;
21
30
  opacity: 0;
22
31
  transform: translateY(8px) scale(0.98);
@@ -24,22 +33,114 @@
24
33
  pointer-events: none;
25
34
  }
26
35
 
36
+ /* Sticky / actionable toasts must receive clicks (close + conflict buttons). */
37
+ .cms-toast.cms-toast-interactive {
38
+ pointer-events: auto;
39
+ }
40
+
27
41
  .cms-toast.cms-toast-out {
28
42
  animation: cms-toast-out 0.3s ease forwards;
29
43
  }
30
44
 
45
+ .cms-toast-msg {
46
+ flex: 1 1 auto;
47
+ line-height: 1.4;
48
+ }
49
+
31
50
  .cms-toast-icon {
32
51
  width: 16px;
33
52
  height: 16px;
34
53
  flex-shrink: 0;
35
54
  }
36
55
 
56
+ .cms-toast-icon-wrap {
57
+ display: inline-flex;
58
+ flex-shrink: 0;
59
+ }
60
+
37
61
  .cms-toast-success { border-left: 3px solid var(--cms-green); }
38
62
  .cms-toast-success .cms-toast-icon { color: var(--cms-green); }
39
63
 
40
64
  .cms-toast-error { border-left: 3px solid var(--cms-red); }
41
65
  .cms-toast-error .cms-toast-icon { color: var(--cms-red); }
42
66
 
67
+ .cms-toast-warning { border-left: 3px solid var(--cms-amber, #eab308); }
68
+ .cms-toast-warning .cms-toast-icon { color: var(--cms-amber, #eab308); }
69
+
70
+ /* Conflict prompt lays the action buttons below the message. */
71
+ .cms-toast-warning {
72
+ flex-wrap: wrap;
73
+ }
74
+
75
+ .cms-toast-actions {
76
+ display: flex;
77
+ gap: 8px;
78
+ width: 100%;
79
+ margin-top: 4px;
80
+ justify-content: flex-end;
81
+ }
82
+
83
+ .cms-toast-btn {
84
+ font-family: var(--cms-font);
85
+ font-size: 11px;
86
+ font-weight: 500;
87
+ padding: 5px 12px;
88
+ border-radius: 2px;
89
+ border: 1px solid rgba(255, 255, 255, 0.14);
90
+ background: transparent;
91
+ color: rgba(255, 255, 255, 0.78);
92
+ cursor: pointer;
93
+ transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
94
+ }
95
+
96
+ .cms-toast-btn:hover {
97
+ background: rgba(255, 255, 255, 0.06);
98
+ color: rgba(255, 255, 255, 0.95);
99
+ }
100
+
101
+ .cms-toast-btn-primary {
102
+ border-color: var(--cms-blue, #3b82f6);
103
+ color: #fff;
104
+ background: var(--cms-blue, #3b82f6);
105
+ }
106
+
107
+ .cms-toast-btn-primary:hover {
108
+ filter: brightness(1.1);
109
+ background: var(--cms-blue, #3b82f6);
110
+ }
111
+
112
+ .cms-toast-btn:focus-visible,
113
+ .cms-toast-close:focus-visible {
114
+ outline: 2px solid var(--cms-blue, #3b82f6);
115
+ outline-offset: 2px;
116
+ }
117
+
118
+ .cms-toast-close {
119
+ flex-shrink: 0;
120
+ width: 20px;
121
+ height: 20px;
122
+ margin-left: 2px;
123
+ padding: 0;
124
+ border: none;
125
+ background: transparent;
126
+ color: rgba(255, 255, 255, 0.5);
127
+ font-size: 18px;
128
+ line-height: 1;
129
+ cursor: pointer;
130
+ border-radius: 2px;
131
+ }
132
+
133
+ .cms-toast-close:hover {
134
+ color: rgba(255, 255, 255, 0.9);
135
+ background: rgba(255, 255, 255, 0.06);
136
+ }
137
+
138
+ /* An editable region awaiting a conflict decision. */
139
+ .cms-editable.cms-conflict {
140
+ outline: 2px solid var(--cms-amber, #eab308) !important;
141
+ outline-offset: 4px;
142
+ }
143
+
43
144
  @keyframes cms-toast-in {
44
145
  to { opacity: 1; transform: translateY(0) scale(1); }
45
146
  }
@@ -48,3 +149,14 @@
48
149
  to { opacity: 0; transform: translateY(12px) scale(0.98); }
49
150
  }
50
151
 
152
+ @media (prefers-reduced-motion: reduce) {
153
+ .cms-toast {
154
+ animation: none;
155
+ opacity: 1;
156
+ transform: none;
157
+ }
158
+ .cms-toast.cms-toast-out {
159
+ animation: none;
160
+ opacity: 0;
161
+ }
162
+ }