rimecms 0.26.5 → 0.26.7

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 (57) hide show
  1. package/dist/core/collections/versions/operations.d.ts +1 -1
  2. package/dist/core/collections/versions/operations.js +1 -1
  3. package/dist/core/config/server/build-config.server.js +0 -2
  4. package/dist/core/dev/generate/routes/common.js +9 -6
  5. package/dist/core/fields/builders/select.js +0 -4
  6. package/dist/core/operations/blocks/extract.server.js +2 -1
  7. package/dist/fields/blocks/component/Block.svelte +23 -31
  8. package/dist/fields/blocks/component/Blocks.svelte +14 -7
  9. package/dist/fields/checkbox/component/Checkbox.svelte +1 -1
  10. package/dist/fields/combobox/component/ComboBox.svelte +1 -1
  11. package/dist/fields/group/component/Group.svelte +20 -12
  12. package/dist/fields/link/component/Link.svelte +14 -12
  13. package/dist/fields/link/index.d.ts +1 -1
  14. package/dist/fields/link/index.js +5 -5
  15. package/dist/fields/radio/index.d.ts +1 -0
  16. package/dist/fields/radio/index.js +8 -0
  17. package/dist/fields/relation/component/Relation.svelte +3 -3
  18. package/dist/fields/rich-text/component/Cell.svelte +1 -1
  19. package/dist/fields/rich-text/component/RichText.svelte +9 -3
  20. package/dist/fields/rich-text/component/bubble-menu/bubble-menu.svelte +1 -1
  21. package/dist/fields/rich-text/core/features/fields/fields.svelte +1 -0
  22. package/dist/fields/rich-text/core/features/link/component/link-selector.svelte +4 -2
  23. package/dist/fields/rich-text/core/features/resource/resource.svelte +16 -10
  24. package/dist/fields/rich-text/core/features/upload/upload.svelte +22 -17
  25. package/dist/fields/select/component/Select.svelte +2 -4
  26. package/dist/fields/slug/component/Slug.svelte +15 -23
  27. package/dist/fields/tabs/component/Tabs.svelte +56 -56
  28. package/dist/fields/toggle/component/Toggle.svelte +1 -1
  29. package/dist/fields/tree/component/Tree.svelte +6 -1
  30. package/dist/fields/tree/component/TreeBlock.svelte +24 -20
  31. package/dist/panel/components/Root.svelte +3 -5
  32. package/dist/panel/components/sections/collection/folder/FolderEdit.svelte +5 -5
  33. package/dist/panel/components/sections/collection/grid/create-directory-dialog/CreateDirectoryDialog.svelte +10 -28
  34. package/dist/panel/components/sections/collection/grid/grid-item/GridItem.svelte +2 -3
  35. package/dist/panel/components/sections/collection/header/ButtonCreate.svelte +2 -3
  36. package/dist/panel/components/sections/collection/header/DisplayMode.svelte +9 -5
  37. package/dist/panel/components/sections/collection/header/Header.svelte +2 -4
  38. package/dist/panel/components/sections/collection/header/SearchInput.svelte +2 -3
  39. package/dist/panel/components/sections/collection/header/SelectUI.svelte +2 -4
  40. package/dist/panel/components/sections/collection/list/header/Header.svelte +12 -8
  41. package/dist/panel/components/sections/collection/list/row/Row.svelte +15 -10
  42. package/dist/panel/components/sections/document/ButtonStatus.svelte +15 -9
  43. package/dist/panel/components/sections/document/Document.svelte +13 -12
  44. package/dist/panel/components/sections/document/Header.svelte +1 -1
  45. package/dist/panel/components/sections/document/upload-header/UploadHeader.svelte +2 -2
  46. package/dist/panel/components/sections/live/SidePanel.svelte +3 -2
  47. package/dist/panel/components/ui/nav/NavItem.svelte +3 -2
  48. package/dist/panel/context/api-proxy.svelte.d.ts +12 -11
  49. package/dist/panel/context/api-proxy.svelte.js +6 -5
  50. package/dist/panel/context/collection.svelte.d.ts +1 -2
  51. package/dist/panel/context/collection.svelte.js +2 -2
  52. package/dist/panel/context/documentForm.svelte.d.ts +2 -3
  53. package/dist/panel/context/documentForm.svelte.js +19 -20
  54. package/dist/panel/pages/auth/forgot-password/ForgotPassword.svelte +7 -3
  55. package/dist/panel/pages/auth/sign-in/SignIn.svelte +1 -0
  56. package/dist/panel/pages/collection/Collection.svelte +14 -12
  57. package/package.json +6 -6
@@ -82,7 +82,7 @@ type Args = {
82
82
  * config: documentConfig
83
83
  * });
84
84
  *
85
- * // Use with helper functions for clearer code
85
+ * // Use with helper functions for cleaner code
86
86
  * if (VersionOperations.isNewVersionCreation(versionOperation)) {
87
87
  * // Handle new version creation logic
88
88
  * }
@@ -90,7 +90,7 @@ export const VersionOperations = {
90
90
  * config: documentConfig
91
91
  * });
92
92
  *
93
- * // Use with helper functions for clearer code
93
+ * // Use with helper functions for cleaner code
94
94
  * if (VersionOperations.isNewVersionCreation(versionOperation)) {
95
95
  * // Handle new version creation logic
96
96
  * }
@@ -11,8 +11,6 @@ import { augmentPluginsServer } from './augment-plugins.server.js';
11
11
  import { augmentStaffServer } from './augment-staff.server.js';
12
12
  export const buildConfig = (config) => {
13
13
  const augmented = augmentConfig(config);
14
- // Versions collection aliases
15
- // create {slug}_versions collections
16
14
  const output = makeVersionsCollectionsAliases(augmented);
17
15
  return createRime(output);
18
16
  };
@@ -42,8 +42,9 @@ const rootLayout = () => `
42
42
  type Props = { children: Snippet; data: { translations: Dictionaries } };
43
43
 
44
44
  const { children, data }: Props = $props();
45
+
46
+ // svelte-ignore state_referenced_locally
45
47
  i18n.init(data.translations);
46
-
47
48
  </script>
48
49
 
49
50
  <div class="rz-root">
@@ -131,16 +132,18 @@ export const load = authLoads.resetPassword;
131
132
  const panelLayout = () => `
132
133
  <script>
133
134
  import { Panel } from '${PACKAGE_NAME}/panel/client';
134
-
135
135
  import config from '${DOLLAR_LIB}/${OUTPUT_DIR}/rime.config.js';
136
+
136
137
  const { children, data } = $props();
137
-
138
- const user = data.user;
139
- if (!user) throw new Error('unauthorized');
138
+
139
+ const user = $derived.by(() => {
140
+ if (!data.user) throw new Error('unauthorized');
141
+ return data.user;
142
+ });
140
143
  </script>
141
144
 
142
145
  <Panel {config} {user} routes={data.routes} locale={data.locale}>
143
- {@render children()}
146
+ {@render children()}
144
147
  </Panel>`;
145
148
  /**
146
149
  * Panel layout server template
@@ -44,10 +44,6 @@ class PickFieldBuilder extends FormFieldBuilder {
44
44
  if (!this.field.options || !this.field.options.length) {
45
45
  throw new Error(`${this.field.name} should at least have one option`);
46
46
  }
47
- if (!this.field.defaultValue) {
48
- const defaultOption = this.field.options[0].value;
49
- this.field.defaultValue = this.field.many ? [defaultOption] : defaultOption;
50
- }
51
47
  if (!this.field.isEmpty) {
52
48
  if (this.field.many) {
53
49
  this.field.isEmpty = (value) => Array.isArray(value) && value.length === 0;
@@ -1,3 +1,4 @@
1
+ import { normalizeFieldPath } from '../../../util/doc.js';
1
2
  import { getValueAtPath } from '../../../util/object.js';
2
3
  export function extractBlocks({ data, configMap }) {
3
4
  const blocks = [];
@@ -10,7 +11,7 @@ export function extractBlocks({ data, configMap }) {
10
11
  if (block.type) {
11
12
  const cleanBlock = {
12
13
  ...block,
13
- path: block.path || path,
14
+ path: normalizeFieldPath(block.path || path),
14
15
  position: block.position ?? index
15
16
  };
16
17
  // Remove children blocks
@@ -6,7 +6,6 @@
6
6
  import { useOnce } from '../../../panel/util/once.svelte.js';
7
7
  import { capitalize } from '../../../util/string.js';
8
8
  import { GripVertical, ToyBrick } from '@lucide/svelte';
9
- import { watch } from 'runed';
10
9
  import BlockActions from './BlockActions.svelte';
11
10
 
12
11
  type Props = {
@@ -20,9 +19,8 @@
20
19
 
21
20
  const { config, path, deleteBlock, duplicateBlock, form, sorting = false }: Props = $props();
22
21
 
23
- let currentPath = $state.raw(path);
24
22
  let isOpen = $state(true);
25
- const position = $derived(parseInt(currentPath.split('.').pop() || '0'));
23
+ const position = $derived(parseInt(path.split('.').pop() || '0'));
26
24
  const blockValue = $derived(form.getValue<GenericBlock>(path));
27
25
 
28
26
  const { once } = useOnce();
@@ -58,23 +56,12 @@
58
56
  };
59
57
 
60
58
  $effect(() => {
61
- if (currentPath !== path) {
62
- let pathArr = path.split('.');
63
- form.setValue(`${path}.path`, pathArr.toSpliced(pathArr.length - 1, 1).join('.'));
64
- currentPath = path;
59
+ if (blockValue) {
60
+ localStorage.setItem(`${blockValue.id}:open`, isOpen.toString());
65
61
  }
66
62
  });
67
63
 
68
- watch(
69
- () => isOpen,
70
- () => {
71
- if (blockValue) {
72
- localStorage.setItem(`${blockValue.id}:open`, isOpen.toString());
73
- }
74
- }
75
- );
76
-
77
- const BlockIcon = config.icon || ToyBrick;
64
+ const BlockIcon = $derived(config.icon || ToyBrick);
78
65
  </script>
79
66
 
80
67
  <div data-sorting={sorting} class="rz-block">
@@ -104,28 +91,33 @@
104
91
  </div>
105
92
  </div>
106
93
 
107
- <style>
108
- .rz-block {
94
+ <style>/**************************************/
95
+
96
+ /* Font */
97
+
98
+ /**************************************/
99
+
100
+ .rz-block {
109
101
  --rz-fields-padding: var(--rz-size-5);
110
102
  position: relative;
111
103
  border: var(--rz-border);
112
104
  border-radius: var(--rz-radius-sm);
113
105
  }
114
106
 
115
- .rz-block__grip {
107
+ .rz-block__grip {
116
108
  cursor: grab;
117
109
  }
118
110
 
119
- .rz-block:hover > :global(.rz-block__content > .rz-block__header > .rz-block-actions) {
111
+ .rz-block:hover > :global(.rz-block__content > .rz-block__header > .rz-block-actions) {
120
112
  opacity: 1;
121
113
  pointer-events: all;
122
114
  }
123
115
 
124
- .rz-block__content {
116
+ .rz-block__content {
125
117
  background-color: var(--rz-collapse-fields-content-bg);
126
118
  }
127
119
 
128
- .rz-block__header {
120
+ .rz-block__header {
129
121
  display: flex;
130
122
  position: relative;
131
123
  align-items: center;
@@ -137,14 +129,14 @@
137
129
  background-color: hsl(var(--rz-row-bg));
138
130
  }
139
131
 
140
- .rz-block__title-button {
132
+ .rz-block__title-button {
141
133
  flex: 1;
142
134
  justify-content: flex-start;
143
135
  flex-direction: row;
144
136
  padding: var(--rz-size-3);
145
137
  }
146
138
 
147
- .rz-block__content--closed {
139
+ .rz-block__content--closed {
148
140
  border-radius: var(--rz-radius-md);
149
141
  .rz-block__header {
150
142
  border-color: transparent;
@@ -165,7 +157,7 @@
165
157
  }
166
158
  }
167
159
 
168
- .rz-block__title {
160
+ .rz-block__title {
169
161
  display: flex;
170
162
  height: var(--rz-size-6);
171
163
  align-items: center;
@@ -175,25 +167,25 @@
175
167
  font-size: var(--rz-text-xs);
176
168
  }
177
169
 
178
- .rz-block__heading {
170
+ .rz-block__heading {
179
171
  font-variation-settings: 'wght' 500;
180
172
  font-weight: 500;
181
173
  }
182
174
 
183
- .rz-block__fields {
175
+ .rz-block__fields {
184
176
  flex: 1;
185
177
  padding: var(--rz-size-6) 0;
186
178
  }
187
179
 
188
- .rz-block__fields--hidden {
180
+ .rz-block__fields--hidden {
189
181
  display: none;
190
182
  }
191
183
 
192
- .rz-block[data-sorting='true'] .rz-block__grip {
184
+ .rz-block[data-sorting='true'] .rz-block__grip {
193
185
  display: none;
194
186
  }
195
187
 
196
- :global(.rz-block-actions) {
188
+ :global(.rz-block-actions) {
197
189
  position: absolute;
198
190
  opacity: 0;
199
191
  pointer-events: none;
@@ -29,6 +29,7 @@
29
29
 
30
30
  const locale = getLocaleContext();
31
31
 
32
+ // svelte-ignore state_referenced_locally
32
33
  const sortableOptions: Sortable.Options = {
33
34
  handle: '.rz-block__grip',
34
35
  group: path,
@@ -130,25 +131,30 @@
130
131
  </div>
131
132
  </fieldset>
132
133
 
133
- <style>
134
- .rz-blocks__title {
134
+ <style>/**************************************/
135
+
136
+ /* Font */
137
+
138
+ /**************************************/
139
+
140
+ .rz-blocks__title {
135
141
  font-variation-settings: 'wght' 500;
136
142
  font-weight: 500;
137
143
  }
138
144
 
139
- sup {
145
+ sup {
140
146
  font-size: var(--rz-text-2xs);
141
147
  text-transform: uppercase;
142
148
  }
143
149
 
144
- .rz-blocks__actions {
150
+ .rz-blocks__actions {
145
151
  /* translate: 0 calc(-1 * var(--rz-size-2)); */
146
152
  display: flex;
147
153
  align-items: end;
148
154
  gap: var(--rz-size-2);
149
155
  }
150
156
 
151
- .rz-blocks__list {
157
+ .rz-blocks__list {
152
158
  display: grid;
153
159
  gap: var(--rz-size-4);
154
160
 
@@ -157,12 +163,13 @@
157
163
  }
158
164
  }
159
165
 
160
- .rz-blocks__header {
166
+ .rz-blocks__header {
161
167
  display: flex;
162
168
  justify-content: space-between;
163
169
  margin-bottom: var(--rz-size-4);
164
170
  }
165
- .rz-blocks__actions-bottom {
171
+
172
+ .rz-blocks__actions-bottom {
166
173
  display: flex;
167
174
  gap: var(--rz-size-3);
168
175
  padding-right: var(--rz-size-3);
@@ -14,7 +14,7 @@
14
14
  };
15
15
 
16
16
  const checkboxErrorClass = $derived(field.error ? 'rz-checkbox--error' : '');
17
- const inputId = `${form.key}-${slugify(path)}`;
17
+ const inputId = $derived(`${form.key}-${slugify(path)}`);
18
18
  </script>
19
19
 
20
20
  <fieldset class="rz-checkbox-field {config.className || ''}" use:root={field}>
@@ -13,7 +13,7 @@
13
13
  const { path, config, form }: ComboBoxProps = $props();
14
14
 
15
15
  const field = $derived(form.useField(path, config));
16
- const options = config.options;
16
+ const options = $derived(config.options);
17
17
 
18
18
  let search = $state('');
19
19
  let open = $state(false);
@@ -20,11 +20,13 @@
20
20
  const { config, path, form }: Props = $props();
21
21
 
22
22
  let groupOpen = $state(true);
23
- const key = `group-${config.fields
24
- .map((f) => f.raw)
25
- .filter(isFormField)
26
- .map((f) => f.name)
27
- .join('-')}`;
23
+ const key = $derived(
24
+ `group-${config.fields
25
+ .map((f) => f.raw)
26
+ .filter(isFormField)
27
+ .map((f) => f.name)
28
+ .join('-')}`
29
+ );
28
30
 
29
31
  const field = $derived(form.useField(path));
30
32
 
@@ -88,14 +90,19 @@
88
90
  {/if}
89
91
  </div>
90
92
 
91
- <style>
92
- :root {
93
+ <style>/**************************************/
94
+
95
+ /* Font */
96
+
97
+ /**************************************/
98
+
99
+ :root {
93
100
  --rz-group-trigger-bg: hsl(var(--rz-row-bg));
94
101
  --rz-group-preview-bg: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-3)));
95
102
  --rz-group-content-bg: var(--rz-collapse-fields-content-bg);
96
103
  }
97
104
 
98
- .rz-group-field__wrapper {
105
+ .rz-group-field__wrapper {
99
106
  border: var(--rz-border);
100
107
  border-radius: var(--rz-radius-md);
101
108
  background-color: var(--rz-group-trigger-bg);
@@ -106,18 +113,18 @@
106
113
  }
107
114
  }
108
115
 
109
- .rz-group-field__wrapper--hidden {
116
+ .rz-group-field__wrapper--hidden {
110
117
  display: none;
111
118
  }
112
119
 
113
- .rz-group-field__content {
120
+ .rz-group-field__content {
114
121
  --rz-fields-padding: var(--rz-size-5);
115
122
  padding-top: var(--rz-fields-padding);
116
123
  padding-bottom: var(--rz-fields-padding);
117
124
  background-color: var(--rz-group-content-bg);
118
125
  }
119
126
 
120
- .rz-group-field__trigger {
127
+ .rz-group-field__trigger {
121
128
  display: flex;
122
129
  align-items: center;
123
130
  justify-content: space-between;
@@ -141,7 +148,8 @@
141
148
  rotate: -180deg;
142
149
  }
143
150
  }
144
- .rz-group-field__trigger--live {
151
+
152
+ .rz-group-field__trigger--live {
145
153
  font-size: var(--rz-text-md);
146
154
  }
147
155
  </style>
@@ -32,22 +32,22 @@
32
32
 
33
33
  const primitiveTypes = ['url', 'email', 'tel', 'anchor'];
34
34
  const field = $derived(form.useField<Link>(path, config));
35
- const linkTypes = config.types || ['url', 'email', 'tel', 'anchor'];
36
- const initial = path ? form.getRawValue<Link>(path) : null;
35
+ const linkTypes = $derived(config.types || ['url', 'email', 'tel', 'anchor']);
36
+ const initial = $derived(path ? form.getRawValue<Link>(path) : null);
37
37
 
38
- let initialLinkType = initial?.type || linkTypes[0];
39
- let initialLinkValue = initial?.value || '';
40
- let initialTargetBlank = (initial?.target && initial.target === '_blank') || false;
38
+ let initialLinkType = $derived(initial?.type || linkTypes[0]);
39
+ let initialLinkValue = $derived(initial?.value || '');
40
+ let initialTargetBlank = $derived((initial?.target && initial.target === '_blank') || false);
41
41
 
42
- let inputValue = $state(initialLinkValue);
43
- let linkType = $state(initialLinkType);
44
- let linkValue = $state(initialLinkValue);
45
- let targetBlank = $state(initialTargetBlank);
42
+ let inputValue = $derived(initialLinkValue);
43
+ let linkType = $derived(initialLinkType);
44
+ let linkValue = $derived(initialLinkValue);
45
+ let targetBlank = $derived(initialTargetBlank);
46
46
 
47
47
  let isPrimitiveType = $derived(primitiveTypes.includes(linkType));
48
48
  let Icon = $derived(icons[linkType] || Newspaper);
49
49
  let placeholder = $derived(placeholders[linkType] || '');
50
- let ressourceId = $state(!primitiveTypes.includes(initialLinkType) ? initialLinkValue : '');
50
+ let ressourceId = $derived(!primitiveTypes.includes(initialLinkType) ? initialLinkValue : '');
51
51
  const hasTarget = $derived(!['anchor', 'email', 'tel'].includes(linkType));
52
52
 
53
53
  let isLinkValueError = $state(false);
@@ -68,6 +68,7 @@
68
68
  }
69
69
  };
70
70
 
71
+ // For ressource links, whenever the ressourceId change, update the field value
71
72
  $effect(() => {
72
73
  if (!isPrimitiveType) {
73
74
  if ((field.value && ressourceId !== field.value.value) || (!field.value && ressourceId)) {
@@ -163,12 +164,13 @@
163
164
  <!-- Target -->
164
165
  {#if hasTarget}
165
166
  <div class="rz-link__target">
166
- <Switch checked={targetBlank} onCheckedChange={onTargetChange} id="target" />
167
- <Label for="target">{t__('fields.new_tab')}</Label>
167
+ <Switch checked={targetBlank} onCheckedChange={onTargetChange} id="{path}.target" />
168
+ <Label for="{path}.target">{t__('fields.new_tab')}</Label>
168
169
  </div>
169
170
  {/if}
170
171
  </div>
171
172
  </div>
173
+
172
174
  <Field.Hint {config} />
173
175
  <Field.Error error={field.error} />
174
176
  </fieldset>
@@ -11,7 +11,7 @@ export declare class LinkFieldBuilder extends FormFieldBuilder<LinkField> {
11
11
  layout(str: 'compact' | 'default'): this;
12
12
  defaultValue(value: Link | DefaultValueFn<Link>): this;
13
13
  types(...values: LinkType[]): this;
14
- static readonly sanitize: (link: unknown) => unknown;
14
+ static readonly sanitize: (link: unknown) => Link | undefined;
15
15
  compile(): {
16
16
  type: "link";
17
17
  live?: boolean | undefined;
@@ -44,17 +44,17 @@ export class LinkFieldBuilder extends FormFieldBuilder {
44
44
  }
45
45
  static sanitize = (link) => {
46
46
  if (!link)
47
- return link;
47
+ return undefined;
48
+ // Sanitize only the value and url properties of the link, other properties are left as is
48
49
  const isLinkValue = (v) => typeof link === 'object' && !Array.isArray(link) && 'value' in link;
49
- if (typeof link === 'string')
50
- return sanitize(link);
51
- if (isLinkValue(link) && link.value) {
50
+ if (isLinkValue(link)) {
52
51
  return {
53
52
  ...link,
54
53
  url: link.url ? sanitize(link.url) : undefined,
55
- value: sanitize(link.value)
54
+ value: link.value ? sanitize(link.value) : null
56
55
  };
57
56
  }
57
+ return undefined;
58
58
  };
59
59
  compile() {
60
60
  if (!this.field.defaultValue) {
@@ -5,6 +5,7 @@ export declare class RadioFieldBuilder extends PickOneFieldBuilder<RadioField> {
5
5
  constructor(name: string);
6
6
  get component(): import("svelte").Component<import("./component/props.js").RadioFieldProps, {}, "">;
7
7
  layout(value: 'default' | 'row'): this;
8
+ compile(): RadioField;
8
9
  }
9
10
  export declare const radio: (name: string) => RadioFieldBuilder;
10
11
  /****************************************************/
@@ -15,5 +15,13 @@ export class RadioFieldBuilder extends PickOneFieldBuilder {
15
15
  this.field.layout = value;
16
16
  return this;
17
17
  }
18
+ compile() {
19
+ super.compile();
20
+ if (!this.field.defaultValue) {
21
+ const defaultOption = this.field.options[0].value;
22
+ this.field.defaultValue = defaultOption;
23
+ }
24
+ return this.field;
25
+ }
18
26
  }
19
27
  export const radio = (name) => new RadioFieldBuilder(name);
@@ -26,6 +26,7 @@
26
26
  const locale = getLocaleContext();
27
27
  const APIProxy = getAPIProxyContext(API_PROXY.DOCUMENT);
28
28
  const field = $derived(form.useField(path, config));
29
+ // svelte-ignore state_referenced_locally
29
30
  const relationConfig = getCollection(config.relationTo);
30
31
  const relationCollectionCtx = getCollectionContext(relationConfig.slug);
31
32
 
@@ -33,7 +34,7 @@
33
34
  // the fetched items
34
35
  let initialItems: RelationFieldItem[] = $state([]);
35
36
  // value from the form
36
- let initialValue = form.getRawValue<Relation[]>(path) || [];
37
+ let initialValue = $derived(form.getRawValue<Relation[]>(path) || []);
37
38
  // timestamp to force re-render
38
39
  let stamp = $state(new Date().getTime().toString());
39
40
 
@@ -108,8 +109,7 @@
108
109
  });
109
110
  }
110
111
  }
111
-
112
- return url.pathname + url.search;
112
+ return url.href + url.search;
113
113
  }
114
114
 
115
115
  const ressourceURL = makeRessourceURL();
@@ -3,7 +3,7 @@
3
3
 
4
4
  let { value }: { value: string } = $props();
5
5
 
6
- let textValue: string = richTextJSONToText(value);
6
+ let textValue: string = $derived(richTextJSONToText(value));
7
7
  </script>
8
8
 
9
9
  {#if textValue && textValue.length > 10}
@@ -16,13 +16,15 @@
16
16
  const { path, config, form, standAlone, class: className }: RichTextFieldProps = $props();
17
17
 
18
18
  let element: HTMLElement;
19
- const key = `richtext-${path}`;
19
+ const key = $derived(`richtext-${path}`);
20
20
 
21
21
  let editor = $state<Editor>();
22
22
  let features = $state<RichTextFeature[]>([]);
23
23
  const field = $derived(form.useField<JSONContent>(path, config));
24
24
 
25
- setRichTextContext(path);
25
+ $effect(() => {
26
+ setRichTextContext(path);
27
+ });
26
28
 
27
29
  const withSuggestion = $derived(hasSuggestion(config.features || []));
28
30
 
@@ -63,7 +65,11 @@
63
65
  <Field.Error error={field.error} />
64
66
 
65
67
  <div class="rz-rich-text__editor-wrapper">
66
- <div bind:this={element} data-error={field.error ? 'true' : null} class="rz-rich-text__editor {className}"></div>
68
+ <div
69
+ bind:this={element}
70
+ data-error={field.error ? 'true' : null}
71
+ class="rz-rich-text__editor {className}"
72
+ ></div>
67
73
 
68
74
  {#if editor && editor.isEditable}
69
75
  <DragHandler {editor} />
@@ -60,7 +60,7 @@
60
60
 
61
61
  const pluginKey = $derived(path);
62
62
  const updateDelay = 250;
63
- const richTextContext = getRichTextContext(path);
63
+ const richTextContext = $derived(getRichTextContext(path));
64
64
 
65
65
  const shouldShow = ({ editor }: { editor: Editor }) => {
66
66
  return (
@@ -23,6 +23,7 @@
23
23
  let isSheetOpen = $state(false);
24
24
 
25
25
  setLocaleContext(page.data.locale || 'en');
26
+ // svelte-ignore state_referenced_locally
26
27
  const form = setFormContext(node.attrs.json || {}, 'fields');
27
28
 
28
29
  onMount(() => {
@@ -29,11 +29,13 @@
29
29
  type LinkResource = { title: string; url: string };
30
30
  let { options, editor, context, active }: Props = $props();
31
31
 
32
- let value = $state((editor && editor.getAttributes('link').href) || '');
32
+ let value = $derived((editor && editor.getAttributes('link').href) || '');
33
33
  let error = $state(false);
34
34
  let open = $state(false);
35
35
  let resourceDialogOpen = $state(false);
36
- let isTargetBlank = $state((editor && editor.getAttributes('link').target === '_blank') || false);
36
+ let isTargetBlank = $derived(
37
+ (editor && editor.getAttributes('link').target === '_blank') || false
38
+ );
37
39
 
38
40
  /**
39
41
  * Logic to get internal resources e.g., collections, areas
@@ -4,7 +4,7 @@
4
4
  import Button from '../../../../../panel/components/ui/button/button.svelte';
5
5
  import CardResource from '../../../../../panel/components/ui/card-resource/card-resource.svelte';
6
6
  import * as Command from '../../../../../panel/components/ui/command/index.js';
7
- import { API_PROXY, setAPIProxyContext } from '../../../../../panel/context/api-proxy.svelte.js';
7
+ import { API_PROXY, getAPIProxyContext } from '../../../../../panel/context/api-proxy.svelte.js';
8
8
  import type { NodeViewProps } from '@tiptap/core';
9
9
  import { onMount } from 'svelte';
10
10
  import NodeViewWrapper from '../../svelte/node-view-wrapper.svelte';
@@ -37,13 +37,13 @@
37
37
  }
38
38
  });
39
39
 
40
- // Need to set a local APIProxy because the app one is not
41
- // available from inside tiptap rendered components
42
- // TODO try to pass it as a prop somehow
43
- const APIProxy = setAPIProxyContext(API_PROXY.TIPTAP);
40
+ const APIProxy = getAPIProxyContext(API_PROXY.DOCUMENT);
41
+
42
+ // svelte-ignore state_referenced_locally
44
43
  const url = extension.options.query
45
- ? apiUrl(extension.options.slug, extension.options.query)
44
+ ? apiUrl(extension.options.slug, `?${extension.options.query}`)
46
45
  : apiUrl(extension.options.slug);
46
+
47
47
  const ressource = APIProxy.getRessource<{ docs: GenericDoc[] }>(url);
48
48
  let docs = $state<GenericDoc[]>([]);
49
49
 
@@ -111,7 +111,7 @@
111
111
  </div>
112
112
  </NodeViewWrapper>
113
113
 
114
- <Command.Dialog bind:open={isDialogOpen} onOpenChange={(val) => (isDialogOpen = val)}>
114
+ <Command.Dialog bind:open={isDialogOpen}>
115
115
  <Command.Input placeholder="Select a resource" />
116
116
 
117
117
  <Command.List>
@@ -129,8 +129,13 @@
129
129
  </Command.List>
130
130
  </Command.Dialog>
131
131
 
132
- <style>
133
- :global(.ProseMirror-focused .ProseMirror-selectednode .rz-richtext-resource) {
132
+ <style>/**************************************/
133
+
134
+ /* Font */
135
+
136
+ /**************************************/
137
+
138
+ :global(.ProseMirror-focused .ProseMirror-selectednode .rz-richtext-resource) {
134
139
  :global(.rz-card-resource),
135
140
  :global(button.rz-richtext-resource__add) {
136
141
  box-shadow:
@@ -138,7 +143,8 @@
138
143
  0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-spot) / var(--rz-ring-opacity, 1));
139
144
  }
140
145
  }
141
- .rz-richtext-resource {
146
+
147
+ .rz-richtext-resource {
142
148
  position: relative;
143
149
  --rz-border-radius: var(--rz-radius-xl);
144
150
  --rz-ressource-card-thumbnail-bg: light-dark(hsl(var(--rz-gray-15)), hsl(var(--rz-gray-3)));