@blokkli/editor 1.1.0 → 1.1.1
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.
- package/dist/module.json +1 -1
- package/dist/module.mjs +12 -8
- package/dist/runtime/components/Edit/DraggableList.vue +3 -3
- package/dist/runtime/components/Edit/Features/BlockAddList/index.vue +29 -4
- package/dist/runtime/helpers/domProvider.d.ts +9 -3
- package/dist/runtime/helpers/domProvider.js +33 -12
- package/package.json +1 -1
package/dist/module.json
CHANGED
package/dist/module.mjs
CHANGED
|
@@ -7,16 +7,20 @@ import MagicString from 'magic-string';
|
|
|
7
7
|
import { walk } from 'estree-walker-ts';
|
|
8
8
|
import { BK_VISIBLE_LANGUAGES, BK_HIDDEN_GLOBALLY } from '../dist/runtime/helpers/symbols.js';
|
|
9
9
|
|
|
10
|
-
const version = "1.1.
|
|
10
|
+
const version = "1.1.1";
|
|
11
11
|
|
|
12
12
|
function sortObjectKeys(obj) {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
13
|
+
if (Array.isArray(obj)) {
|
|
14
|
+
return obj.map(sortObjectKeys);
|
|
15
|
+
} else if (obj && typeof obj === "object") {
|
|
16
|
+
const sortedObj = {};
|
|
17
|
+
const keys = Object.keys(obj).sort();
|
|
18
|
+
for (const key of keys) {
|
|
19
|
+
sortedObj[key] = sortObjectKeys(obj[key]);
|
|
20
|
+
}
|
|
21
|
+
return sortedObj;
|
|
22
|
+
}
|
|
23
|
+
return obj;
|
|
20
24
|
}
|
|
21
25
|
|
|
22
26
|
function falsy(value) {
|
|
@@ -200,18 +200,18 @@ function isMuted(item?: FieldListItem) {
|
|
|
200
200
|
|
|
201
201
|
watch(root, function (newRoot) {
|
|
202
202
|
if (newRoot) {
|
|
203
|
-
dom.updateFieldElement(props.entity
|
|
203
|
+
dom.updateFieldElement(props.entity, props.name, newRoot)
|
|
204
204
|
}
|
|
205
205
|
})
|
|
206
206
|
|
|
207
207
|
onMounted(() => {
|
|
208
208
|
if (root.value) {
|
|
209
|
-
dom.registerField(props.entity
|
|
209
|
+
dom.registerField(props.entity, props.name, root.value)
|
|
210
210
|
}
|
|
211
211
|
})
|
|
212
212
|
|
|
213
213
|
onBeforeUnmount(() => {
|
|
214
|
-
dom.unregisterField(props.entity
|
|
214
|
+
dom.unregisterField(props.entity, props.name)
|
|
215
215
|
})
|
|
216
216
|
|
|
217
217
|
defineOptions({
|
|
@@ -69,7 +69,7 @@ import { getDefaultDefinition } from '#blokkli/definitions'
|
|
|
69
69
|
import defineCommands from '#blokkli/helpers/composables/defineCommands'
|
|
70
70
|
import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
|
|
71
71
|
import { PluginTourItem } from '#blokkli/plugins'
|
|
72
|
-
import { getFieldKey } from '#blokkli/helpers'
|
|
72
|
+
import { getFieldKey, onlyUnique } from '#blokkli/helpers'
|
|
73
73
|
|
|
74
74
|
const { settings } = defineBlokkliFeature({
|
|
75
75
|
id: 'block-add-list',
|
|
@@ -157,6 +157,31 @@ const getAllowedTypesForSelected = (p: DraggableExistingBlock): string[] => {
|
|
|
157
157
|
}
|
|
158
158
|
}
|
|
159
159
|
|
|
160
|
+
// All allowed bundles for which a field is being rendered currently.
|
|
161
|
+
// Some blocks may have nested blocks, however they may not render them via
|
|
162
|
+
// a <BlokkliField>. This would make it so that these nested block bundles
|
|
163
|
+
// show up in the add list, but there is no place where these could be added.
|
|
164
|
+
const bundlesForRenderedFields = computed(() =>
|
|
165
|
+
dom.registeredFieldTypes.value
|
|
166
|
+
.flatMap((field) => {
|
|
167
|
+
return (
|
|
168
|
+
types.getFieldConfig(
|
|
169
|
+
field.entityType,
|
|
170
|
+
field.entityBundle,
|
|
171
|
+
field.fieldName,
|
|
172
|
+
)?.allowedBundles || []
|
|
173
|
+
)
|
|
174
|
+
})
|
|
175
|
+
.filter(onlyUnique),
|
|
176
|
+
)
|
|
177
|
+
|
|
178
|
+
const generallyAvailableBundles = computed(() =>
|
|
179
|
+
types.generallyAvailableBundles.filter((v) =>
|
|
180
|
+
// Exclude bundles for which no field is currently being rendered.
|
|
181
|
+
bundlesForRenderedFields.value.includes(v.id),
|
|
182
|
+
),
|
|
183
|
+
)
|
|
184
|
+
|
|
160
185
|
const selectableBundles = computed(() => {
|
|
161
186
|
if (selection.blocks.value.length) {
|
|
162
187
|
return selection.blocks.value.flatMap((v) => getAllowedTypesForSelected(v))
|
|
@@ -174,10 +199,10 @@ const selectableBundles = computed(() => {
|
|
|
174
199
|
)
|
|
175
200
|
}
|
|
176
201
|
|
|
177
|
-
return
|
|
202
|
+
return generallyAvailableBundles.value.map((v) => v.id || '')
|
|
178
203
|
})
|
|
179
204
|
|
|
180
|
-
|
|
205
|
+
function determineVisibility(bundle: string, label: string): boolean {
|
|
181
206
|
if (ui.isMobile.value && !selectableBundles.value.includes(bundle)) {
|
|
182
207
|
return false
|
|
183
208
|
}
|
|
@@ -200,7 +225,7 @@ const determineVisibility = (bundle: string, label: string): boolean => {
|
|
|
200
225
|
}
|
|
201
226
|
|
|
202
227
|
const sortedList = computed(() => {
|
|
203
|
-
return [...
|
|
228
|
+
return [...generallyAvailableBundles.value]
|
|
204
229
|
.filter((v) => !reservedBundles.includes(v.id))
|
|
205
230
|
.map((v) => {
|
|
206
231
|
const isVisible = determineVisibility(v.id, v.label)
|
|
@@ -4,6 +4,11 @@ import type { DraggableExistingBlock, BlokkliFieldElement, DraggableItem, Droppa
|
|
|
4
4
|
import type { UiProvider } from './uiProvider.js';
|
|
5
5
|
import type { BlockBundleWithNested, ValidFieldListTypes } from '#blokkli/generated-types';
|
|
6
6
|
import type { DebugProvider } from './debugProvider.js';
|
|
7
|
+
type RegisteredFieldType = {
|
|
8
|
+
entityType: string;
|
|
9
|
+
entityBundle: string;
|
|
10
|
+
fieldName: string;
|
|
11
|
+
};
|
|
7
12
|
type MeasuredBlockRect = Rectangle & {
|
|
8
13
|
time: number;
|
|
9
14
|
};
|
|
@@ -19,9 +24,10 @@ export type DomProvider = {
|
|
|
19
24
|
findField(entityUuid: string, fieldName: string): BlokkliFieldElement | undefined;
|
|
20
25
|
registerBlock: (uuid: string, instance: ComponentInternalInstance | null | HTMLElement, bundle: string, fieldListType: ValidFieldListTypes, parentBlockBundle?: BlockBundleWithNested) => void;
|
|
21
26
|
unregisterBlock: (uuid: string) => void;
|
|
22
|
-
registerField: (
|
|
23
|
-
updateFieldElement: (
|
|
24
|
-
unregisterField: (
|
|
27
|
+
registerField: (entity: EntityContext, fieldName: string, instance: HTMLElement) => void;
|
|
28
|
+
updateFieldElement: (entity: EntityContext, fieldName: string, element: HTMLElement) => void;
|
|
29
|
+
unregisterField: (entity: EntityContext, fieldName: string) => void;
|
|
30
|
+
registeredFieldTypes: ComputedRef<RegisteredFieldType[]>;
|
|
25
31
|
/**
|
|
26
32
|
* Get all droppable entity fields.
|
|
27
33
|
*/
|
|
@@ -141,23 +141,43 @@ export default function(ui, debug) {
|
|
|
141
141
|
const observer = useDelayedIntersectionObserver(intersectionCallback);
|
|
142
142
|
const registeredBlocks = reactive({});
|
|
143
143
|
const registeredFields = reactive({});
|
|
144
|
-
const
|
|
145
|
-
const
|
|
146
|
-
|
|
144
|
+
const registeredFieldTypes = computed(() => {
|
|
145
|
+
const fields = Object.values(registeredFields);
|
|
146
|
+
const found = /* @__PURE__ */ new Set();
|
|
147
|
+
const uniqueFieldTypes = [];
|
|
148
|
+
for (let i = 0; i < fields.length; i++) {
|
|
149
|
+
const field = fields[i];
|
|
150
|
+
if (field) {
|
|
151
|
+
const key = `${field.entity.type}:${field.entity.bundle}:${field.fieldName}`;
|
|
152
|
+
if (!found.has(key)) {
|
|
153
|
+
uniqueFieldTypes.push({
|
|
154
|
+
entityType: field.entity.type,
|
|
155
|
+
entityBundle: field.entity.bundle,
|
|
156
|
+
fieldName: field.fieldName
|
|
157
|
+
});
|
|
158
|
+
found.add(key);
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
return uniqueFieldTypes;
|
|
163
|
+
});
|
|
164
|
+
const registerField = (entity, fieldName, element) => {
|
|
165
|
+
const key = `${entity.uuid}:${fieldName}`;
|
|
166
|
+
registeredFields[key] = { element, entity, fieldName };
|
|
147
167
|
observer.observe(element);
|
|
148
168
|
};
|
|
149
|
-
const updateFieldElement = (
|
|
150
|
-
const key = `${uuid}:${fieldName}`;
|
|
151
|
-
const existingElement = registeredFields[key];
|
|
169
|
+
const updateFieldElement = (entity, fieldName, element) => {
|
|
170
|
+
const key = `${entity.uuid}:${fieldName}`;
|
|
171
|
+
const existingElement = registeredFields[key]?.element;
|
|
152
172
|
if (existingElement) {
|
|
153
173
|
observer.unobserve(existingElement);
|
|
154
174
|
}
|
|
155
|
-
registeredFields[key] = element;
|
|
175
|
+
registeredFields[key] = { entity, fieldName, element };
|
|
156
176
|
observer.observe(element);
|
|
157
177
|
};
|
|
158
|
-
const unregisterField = (
|
|
159
|
-
const key = `${uuid}:${fieldName}`;
|
|
160
|
-
const el = registeredFields[key];
|
|
178
|
+
const unregisterField = (entity, fieldName) => {
|
|
179
|
+
const key = `${entity.uuid}:${fieldName}`;
|
|
180
|
+
const el = registeredFields[key]?.element;
|
|
161
181
|
if (el) {
|
|
162
182
|
observer.unobserve(el);
|
|
163
183
|
}
|
|
@@ -380,7 +400,7 @@ export default function(ui, debug) {
|
|
|
380
400
|
continue;
|
|
381
401
|
}
|
|
382
402
|
fieldRects[key] = ui.getAbsoluteElementRect(
|
|
383
|
-
field.getBoundingClientRect(),
|
|
403
|
+
field.element.getBoundingClientRect(),
|
|
384
404
|
scale,
|
|
385
405
|
offset
|
|
386
406
|
);
|
|
@@ -464,6 +484,7 @@ export default function(ui, debug) {
|
|
|
464
484
|
isReady: computed(() => mutationsReady.value && intersectionReady.value),
|
|
465
485
|
init,
|
|
466
486
|
getDragElement,
|
|
467
|
-
updateVisibleRects
|
|
487
|
+
updateVisibleRects,
|
|
488
|
+
registeredFieldTypes
|
|
468
489
|
};
|
|
469
490
|
}
|