@blokkli/editor 1.0.3 → 1.1.0

package/dist/runtime/components/Edit/Features/Options/Form/Item.vue

@@ -1,15 +1,21 @@
 <template>
   <div class="bk-blokkli-item-options-item" @keydown.stop>
     <div
+      v-if="showLabel"
       :class="isGrouped ? 'bk-blokkli-item-options-item-label' : 'bk-tooltip'"
     >
-      <span>{{ option.label }}</span>
+      <span>{{ label }}</span>
     </div>
-    <div class="bk-blokkli-item-options-item-content">
+    <div
+      class="bk-blokkli-item-options-item-content"
+      :class="{
+        'bk-is-grouped': isGrouped,
+      }"
+    >
       <OptionRadios
         v-if="option.type === 'radios'"
         v-model="value"
-        :label="option.label"
+        :label="label"
         :options="option.options"
         :property="property"
         :display-as="option.displayAs"
@@ -18,32 +24,33 @@
         v-else-if="option.type === 'checkbox'"
         v-model="value"
         :property="property"
-        :label="option.label"
+        :label="label"
         :value="value"
       />
       <OptionCheckboxes
         v-else-if="option.type === 'checkboxes'"
         v-model="value"
         :property="property"
-        :label="option.label"
-        :options="option.options"
+        :label="label"
+        :options="checkboxOptions"
         :value="value"
+        :is-grouped="isGrouped"
       />
       <OptionText
         v-else-if="option.type === 'text'"
         v-model="value"
-        :label="option.label"
+        :label="label"
         :type="option.inputType"
       />
       <OptionColor
         v-else-if="option.type === 'color'"
         v-model="value"
-        :label="option.label"
+        :label="label"
       />
       <OptionRange
         v-else-if="option.type === 'range'"
         v-model="value"
-        :label="option.label"
+        :label="label"
         :min="option.min"
         :max="option.max"
         :step="option.step"
@@ -51,7 +58,7 @@
       <OptionNumber
         v-else-if="option.type === 'number'"
         v-model="value"
-        :label="option.label"
+        :label="label"
         :min="option.min"
         :max="option.max"
       />
@@ -70,8 +77,9 @@ import OptionRange from './Range/index.vue'
 import OptionNumber from './Number/index.vue'
 import type { BlockOptionDefinition } from '#blokkli/types/blokkOptions'
 import { mapCheckboxTrue } from '#blokkli/helpers/runtimeHelpers'
+import { BK_VISIBLE_LANGUAGES } from '#blokkli/helpers/symbols'
 
-const { state } = useBlokkli()
+const { state, $t: $blokkliText } = useBlokkli()
 
 const emit = defineEmits<{
   (e: 'update', data: string): void
@@ -80,10 +88,53 @@ const emit = defineEmits<{
 const props = defineProps<{
   option: BlockOptionDefinition
   property: string
+  mutatedValue: any
   uuids: string[]
   isGrouped?: boolean
 }>()
 
+const showLabel = computed(() => {
+  if (props.isGrouped) {
+    if (props.option.type === 'checkbox') {
+      return false
+    }
+  }
+
+  return true
+})
+
+const label = computed(() =>
+  $blokkliText(`blockOption_${props.property}_label`, props.option.label),
+)
+
+const checkboxOptions = computed<{ value: string; label: string }[]>(() => {
+  if (props.option.type !== 'checkboxes') {
+    return []
+  }
+
+  if (props.property === BK_VISIBLE_LANGUAGES) {
+    return (state.translation.value.availableLanguages || []).map(
+      (language) => {
+        return {
+          value: language.id,
+          label: language.name,
+        }
+      },
+    )
+  }
+
+  return Object.entries(props.option.options).map(([value, label]) => {
+    return {
+      value,
+      label,
+    }
+  })
+})
+
+const validCheckboxValues = computed(() =>
+  checkboxOptions.value.map((v) => v.value),
+)
+
 const validateValue = (
   v: string | string[] | boolean | undefined | null | number,
 ): string | undefined => {
@@ -102,13 +153,12 @@ const validateValue = (
   } else if (props.option.type === 'checkbox') {
     return mapCheckboxTrue(v)
   } else if (props.option.type === 'checkboxes') {
-    const options = Object.keys(props.option.options || {})
     const items = Array.isArray(v)
       ? v
       : (typeof v === 'string' ? v : '').split(',')
     return items
       .filter((key) => {
-        return options.includes(key)
+        return validCheckboxValues.value.includes(key)
       })
       .join(',')
   } else if (props.option.type === 'range' || props.option.type === 'number') {
@@ -120,34 +170,12 @@ const validateValue = (
   }
 }
 
-const mutatedValue = computed<string | undefined>(() => {
-  for (let i = 0; i < props.uuids.length; i++) {
-    const uuid = props.uuids[i]
-    const mutatedOptions = state.mutatedOptions[uuid]
-    if (mutatedOptions) {
-      const mutatedOption = state.mutatedOptions[uuid]?.[props.property]
-      if (mutatedOption !== undefined) {
-        return validateValue(mutatedOption)
-      }
-    }
-  }
-
-  return undefined
-})
-
-const defaultValue = computed<string>(
-  () => validateValue(props.option.default) || '',
-)
-
-const value = computed<string>({
+const value = computed<string | undefined>({
   get() {
-    if (mutatedValue.value === undefined) {
-      return defaultValue.value
-    }
-    return mutatedValue.value
+    return validateValue(props.mutatedValue)
   },
-  set(value: string) {
-    emit('update', value)
+  set(value: string | undefined) {
+    emit('update', value === undefined ? '' : value)
   },
 })
 </script>

package/dist/runtime/components/Edit/Features/Options/Form/Number/index.vue

@@ -26,13 +26,14 @@ import { Icon } from '#blokkli/components'
 const props = withDefaults(
   defineProps<{
     label: string
-    modelValue: string
+    modelValue?: string
     min: number
     max: number
     type?: string
   }>(),
   {
     type: 'text',
+    modelValue: '0',
   },
 )
 
@@ -42,7 +43,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const text = computed<string>({
   get() {
-    return props.modelValue || '0'
+    return props.modelValue
   },
   set(v: string | number | undefined) {
     emit('update:modelValue', (v === undefined ? '' : v).toString())
@@ -50,6 +51,9 @@ const text = computed<string>({
 })
 
 const numeric = computed(() => {
+  if (props.modelValue === undefined) {
+    return 0
+  }
   const v = Number.parseInt(props.modelValue)
   if (Number.isNaN(v)) {
     return 0

package/dist/runtime/components/Edit/Features/Options/Form/Radios/index.vue

@@ -75,7 +75,7 @@ const props = defineProps<{
   property: string
   displayAs?: 'radios' | 'colors' | 'grid' | 'icons'
   options: Record<string, PossibleOptionType>
-  modelValue: string
+  modelValue?: string
 }>()
 
 const emit = defineEmits(['update:modelValue'])

package/dist/runtime/components/Edit/Features/Options/Form/Range/index.vue

@@ -10,7 +10,7 @@ import { computed } from '#imports'
 
 const props = defineProps<{
   label: string
-  modelValue: string
+  modelValue?: string
   min: number
   max: number
   step: number
@@ -20,7 +20,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const text = computed<string>({
   get() {
-    return props.modelValue || ''
+    return props.modelValue || '0'
   },
   set(v: string | number | undefined) {
     emit('update:modelValue', (v === undefined ? '' : v).toString())

package/dist/runtime/components/Edit/Features/Options/Form/Text/index.vue

@@ -11,11 +11,12 @@ import { computed } from '#imports'
 const props = withDefaults(
   defineProps<{
     label: string
-    modelValue: string
+    modelValue?: string
     type?: string
   }>(),
   {
     type: 'text',
+    modelValue: '',
   },
 )
 

package/dist/runtime/components/Edit/Features/Options/Form/index.vue

@@ -10,11 +10,11 @@
       :key="plugin.property"
       :option="plugin.option"
       :property="plugin.property"
+      :mutated-value="currentValues[plugin.property]"
       :uuids="uuids"
       class="bk-blokkli-item-options-item"
       :class="{
-        'bk-is-disabled':
-          !state.canEdit.value || state.editMode.value !== 'editing',
+        'bk-is-disabled': isDisabled(plugin),
       }"
       @keydown.stop
       @update="setOptionValue(plugin.property, $event)"
@@ -32,11 +32,11 @@
         :key="plugin.property"
         :option="plugin.option"
         :property="plugin.property"
+        :mutated-value="currentValues[plugin.property]"
         :uuids="uuids"
         class="bk-blokkli-item-options-item"
         :class="{
-          'bk-is-disabled':
-            !state.canEdit.value || state.editMode.value !== 'editing',
+          'bk-is-disabled': isDisabled(plugin),
         }"
         is-grouped
         @keydown.stop
@@ -49,7 +49,7 @@
 <script lang="ts" setup>
 import { ref, computed, useBlokkli, onBeforeUnmount, onMounted } from '#imports'
 import { globalOptions } from '#blokkli/definitions'
-import { falsy } from '#blokkli/helpers'
+import { falsy, onlyUnique } from '#blokkli/helpers'
 import OptionsFormItem from './Item.vue'
 import OptionsFormGroup from './Group.vue'
 import type {
@@ -60,6 +60,10 @@ import type {
 import type { BlockOptionDefinition } from '#blokkli/types/blokkOptions'
 import { optionValueToStorable } from '#blokkli/helpers/options'
 import { getRuntimeOptionValue } from '#blokkli/helpers/runtimeHelpers'
+import {
+  BK_HIDDEN_GLOBALLY,
+  BK_VISIBLE_LANGUAGES,
+} from '#blokkli/helpers/symbols'
 
 type OptionItem = {
   property: string
@@ -196,42 +200,70 @@ const availableOptions = computed<OptionItem[]>(() => {
   })
 })
 
+function getOptionValue(
+  uuid: string,
+  key: string,
+  defaultValue: string | boolean | string[] | number,
+) {
+  if (!uuid) {
+    return ''
+  }
+  const blockMutatedOptions = state.mutatedOptions[uuid]
+  if (
+    blockMutatedOptions !== undefined &&
+    blockMutatedOptions[key] !== undefined
+  ) {
+    return state.mutatedOptions[uuid][key]
+  }
+  return defaultValue
+}
+
 /**
  * The current mapped values, same as provided by defineBlokkli.
  */
 const currentValues = computed(() => {
-  const getOptionValue = (
-    key: string,
-    defaultValue: string | boolean | string[] | number,
-  ) => {
-    const uuid = props.uuids[0]
-    if (!uuid) {
-      return ''
-    }
-    const blockMutatedOptions = state.mutatedOptions[uuid]
-    if (
-      blockMutatedOptions !== undefined &&
-      blockMutatedOptions[key] !== undefined
-    ) {
-      return state.mutatedOptions[uuid][key]
-    }
-    return defaultValue
-  }
-
   return availableOptions.value.reduce<
     Record<string, string | string[] | boolean | number>
   >((acc, v) => {
-    acc[v.property] = getRuntimeOptionValue(
-      v.option,
-      getOptionValue(v.property, v.option.default),
-    )
+    // Get all current values.
+    const values = props.uuids
+      .map((uuid) => {
+        return JSON.stringify(
+          getRuntimeOptionValue(
+            v.option,
+            getOptionValue(uuid, v.property, v.option.default),
+          ),
+        )
+      })
+      .filter(onlyUnique)
+    if (values.length === 1) {
+      acc[v.property] = getRuntimeOptionValue(
+        v.option,
+        getOptionValue(props.uuids[0], v.property, v.option.default),
+      )
+    } else {
+      acc[v.property] = ''
+    }
+
     return acc
   }, {})
 })
 
+function filterInternal(item: OptionItem) {
+  if (currentValues.value[BK_HIDDEN_GLOBALLY]) {
+    return item.property !== BK_VISIBLE_LANGUAGES
+  }
+
+  return true
+}
+
+function isInternalOption(property: string) {
+  return property === BK_VISIBLE_LANGUAGES || property === BK_HIDDEN_GLOBALLY
+}
+
 const visibleOptions = computed<OptionItem[]>(() => {
   if (!props.definition.editor?.determineVisibleOptions) {
-    return availableOptions.value
+    return availableOptions.value.filter(filterInternal)
   }
 
   const uuid = props.uuids[0]
@@ -258,11 +290,28 @@ const visibleOptions = computed<OptionItem[]>(() => {
       parentType: parentType as any,
       props: ctxProps as any,
       entity: context.value,
+      fieldListType: block?.hostFieldListType || 'default',
     })
 
-  return availableOptions.value.filter((v) => visibleKeys.includes(v.property))
+  return availableOptions.value
+    .filter(
+      (v) => isInternalOption(v.property) || visibleKeys.includes(v.property),
+    )
+    .filter(filterInternal)
 })
 
+function isDisabled(plugin: OptionItem) {
+  if (!state.canEdit.value || state.editMode.value === 'readonly') {
+    return true
+  }
+
+  if (isInternalOption(plugin.property)) {
+    return false
+  }
+
+  return state.editMode.value !== 'editing'
+}
+
 const singleVisibleOptions = computed(() =>
   visibleOptions.value.filter((v) => !v.option.group),
 )
@@ -300,13 +349,15 @@ function setOptionValue(key: string, value: string) {
 onMounted(() => {
   props.uuids.forEach((uuid) => {
     availableOptions.value.forEach((option) => {
+      const currentValue = getOptionValue(
+        uuid,
+        option.property,
+        option.option.default,
+      )
       original.set(
         uuid,
         option.property,
-        optionValueToStorable(
-          option.option,
-          currentValues.value[option.property],
-        ),
+        optionValueToStorable(option.option, currentValue),
       )
     })
   })

package/dist/runtime/components/Edit/Features/ProxyView/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <PluginViewOption
+    id="proxy_view"
+    v-model="ui.isProxyMode.value"
+    :label="$t('proxyViewToggle', 'Toggle structure view')"
+    :title-on="$t('proxyViewShow', 'Show structure view')"
+    :title-off="$t('proxyViewHide', 'Show content preview')"
+    :tour-text="
+      $t(
+        'proxyViewTourText',
+        'Displays the content blocks as a structured view.',
+      )
+    "
+    key-code="P"
+    icon="tree"
+  />
+</template>
+
+<script lang="ts" setup>
+import { useBlokkli, defineBlokkliFeature } from '#imports'
+import { PluginViewOption } from '#blokkli/plugins'
+
+defineBlokkliFeature({
+  id: 'proxy_view',
+  label: 'Proxy View',
+  icon: 'tree',
+  description: 'Displays the blocks as a structure in the preview.',
+  viewports: ['desktop'],
+})
+
+const { $t, ui } = useBlokkli()
+</script>
+
+<script lang="ts">
+export default {
+  name: 'ProxyView',
+}
+</script>

package/dist/runtime/components/Edit/Features/Publish/index.vue

@@ -1,35 +1,76 @@
 <template>
   <PluginMenuButton
     id="publish"
-    :title="$t('publishLabel', 'Publish')"
-    :description="$t('publishDescription', 'Make all changes public')"
+    :title="publishLabel"
+    :description="publishDescription"
     :disabled="!mutations.length || !canEdit"
     type="success"
     :weight="0"
-    icon="publish"
+    :icon="icon"
     @click="onClick"
   />
 </template>
 
 <script lang="ts" setup>
-import { useBlokkli, defineBlokkliFeature } from '#imports'
+import { useBlokkli, defineBlokkliFeature, computed, useRoute } from '#imports'
 import { PluginMenuButton } from '#blokkli/plugins'
+import type { BlokkliIcon } from '#blokkli/icons'
 
-const { adapter } = defineBlokkliFeature({
+const { adapter, settings } = defineBlokkliFeature({
   id: 'publish',
   icon: 'publish',
   label: 'Publish',
   requiredAdapterMethods: ['publish'],
   description:
     'Provides a menu button to publish the changes of the current entity.',
+  settings: {
+    closeAfterPublish: {
+      type: 'checkbox',
+      label: 'Close editor after publishing',
+      default: true,
+      group: 'behavior',
+    },
+  },
 })
 
+const route = useRoute()
 const { state, $t, eventBus, broadcast, context } = useBlokkli()
 const { mutations, canEdit, mutateWithLoadingState } = state
 
+const isPublished = computed<boolean>(() => !!state.entity.value.status)
+
+const publishLabel = computed(() => {
+  // Entity is published. Clicking the button will make the changes go "live".
+  if (isPublished.value) {
+    return settings.value.closeAfterPublish
+      ? $t('publishAndCloseLabel', 'Publish & Close')
+      : $t('publishLabel', 'Publish')
+  }
+
+  return settings.value.closeAfterPublish
+    ? $t('publishAndCloseLabelUnpublished', 'Save & Close')
+    : $t('publishLabelUnpublished', 'Save')
+})
+
+const publishDescription = computed(() =>
+  isPublished.value
+    ? $t('publishDescription', 'Publish all changes.')
+    : $t(
+        'publishDescriptionUnpublished',
+        'Save all changes while keeping page unpublished',
+      ),
+)
+
+const icon = computed<BlokkliIcon>(() =>
+  isPublished.value ? 'publish' : 'save',
+)
+
 const onClick = async () => {
   const success = await mutateWithLoadingState(
-    adapter.publish,
+    () =>
+      adapter.publish({
+        closeAfterPublish: settings.value.closeAfterPublish,
+      }),
     $t('publishError', 'Changes could not be published.'),
     $t('publishSuccess', 'Changes published successfully.'),
   )
@@ -38,11 +79,17 @@ const onClick = async () => {
     const validations = state.violations.value
     if (validations.length) {
       eventBus.emit('publish:failed')
+      // Open the validations sidebar when there are validation errors.
+      eventBus.emit('sidebar:open', 'violations')
     }
     return
   }
 
   broadcast.emit('published', { uuid: context.value.entityUuid })
+
+  if (settings.value.closeAfterPublish) {
+    window.location.href = route.path
+  }
 }
 </script>
 

package/dist/runtime/components/Edit/Features/Search/Overlay/index.vue

@@ -1,8 +1,7 @@
 <template>
-  <div
+  <ScrollBoundary
     class="bk-search-box"
     @keydown="onKeyDown"
-    @wheel="onWheel"
     @mousedown.stop
     @click.stop
   >
@@ -63,12 +62,12 @@
         </template>
       </div>
     </div>
-  </div>
+  </ScrollBoundary>
 </template>
 
 <script lang="ts" setup>
 import { watch, ref, computed, useBlokkli, onMounted, nextTick } from '#imports'
-import { Icon } from '#blokkli/components'
+import { Icon, ScrollBoundary } from '#blokkli/components'
 import { modulo } from '#blokkli/helpers'
 import ResultsPage from './Results/Page/index.vue'
 import ResultsContent from './Results/Content/index.vue'
@@ -194,15 +193,6 @@ const onKeyDown = (e: KeyboardEvent) => {
   }
 }
 
-function onWheel(e: WheelEvent) {
-  if (props.isDragging) {
-    return
-  }
-
-  e.preventDefault()
-  e.stopImmediatePropagation()
-}
-
 watch(
   () => props.visible,
   (isVisible) => {

package/dist/runtime/components/Edit/Features/Selection/Overlay/index.vue

@@ -100,7 +100,7 @@ class SelectionRectangleBufferCollector extends RectangleBufferCollector<Selecti
 const collector = new SelectionRectangleBufferCollector(props.gl)
 
 const uniforms = {
-  u_color_default: toShaderColor(theme.accent.value[700]),
+  u_color_default: toShaderColor(theme.accent.value[600]),
   u_color_inverted: [255, 255, 255],
 }
 

package/dist/runtime/components/Edit/Features/Settings/Dialog/index.vue

@@ -56,6 +56,8 @@ const getGroupLabel = (key: SettingsGroup): string => {
     return $t('settingsAppearance', 'Appearance')
   } else if (key === 'advanced') {
     return $t('settingsAdvanced', 'Advanced')
+  } else if (key === 'artboard') {
+    return $t('settingsArtboard', 'Artboard')
   }
   return key
 }

package/dist/runtime/components/Edit/Features/Structure/List/Field/index.vue

@@ -15,7 +15,7 @@
       >
         <div
           v-if="
-            index === 0 && showTargets && !selection.uuidsMap.value[item.uuid]
+            index === 0 && showTargets && !selection.isBlockSelected(item.uuid)
           "
           :style="targetStyle"
           class="bk-structure-field-target bk-is-before"
@@ -33,10 +33,10 @@
           v-if="
             showTargets &&
             (!selection.isDraggingExisting.value ||
-              !selection.uuidsMap.value[item.uuid]) &&
+              !selection.isBlockSelected(item.uuid)) &&
             (!list[index + 1] ||
               !selection.isDraggingExisting.value ||
-              !selection.uuidsMap.value[list[index + 1].uuid])
+              !selection.isBlockSelected(list[index + 1].uuid))
           "
           :style="targetStyle"
           class="bk-structure-field-target bk-is-after"