@blokkli/editor 1.0.0

package/dist/runtime/blokkliPlugins/Sidebar/index.vue

@@ -0,0 +1,286 @@
+<template>
+  <Teleport v-if="!isRenderedDetached" :to="'#bk-sidebar-tabs-' + region">
+    <button
+      :id="'bk-sidebar-button-' + id"
+      ref="tourElement"
+      class="bk-toolbar-button"
+      :class="[{ 'is-active': activeSidebar === id }, 'bk-is-' + region]"
+      :disabled="isDisabled"
+      :style="{ order: weight }"
+      @click.prevent.stop="toggleSidebar"
+    >
+      <slot name="icon">
+        <Icon v-if="icon" :name="icon" />
+      </slot>
+      <slot name="badge" />
+      <div class="bk-tooltip">
+        <span>{{ title }}</span>
+        <ShortcutIndicator
+          v-if="keyCode"
+          :meta="meta"
+          :shift="shift"
+          :key-code="keyCode"
+          :label="title"
+          @pressed="toggleSidebar"
+        />
+      </div>
+    </button>
+  </Teleport>
+
+  <Teleport
+    v-if="
+      (activeSidebar === id || isRenderedDetached || renderAlways) &&
+      !isDisabled
+    "
+    :to="isRenderedDetached ? 'body' : '#bk-sidebar-content-' + region"
+  >
+    <SidebarDetached
+      v-if="isRenderedDetached"
+      :id="id"
+      ref="tourElement"
+      :title="title"
+      :icon="icon"
+      :min-width="minWidth"
+      :min-height="minHeight"
+      :size="size"
+      :is-left="region === 'left'"
+      class="bk-sidebar-inner"
+      @wheel="onWheel"
+      @close="onAttach"
+    >
+      <template #icon>
+        <slot name="icon" />
+      </template>
+      <template #default="{ width, height }">
+        <div class="bk-sidebar-content-wrapper">
+          <div ref="sidebarContent" class="bk-sidebar-content">
+            <slot
+              :key="isRenderedDetached ? 'detached' : 'attached'"
+              :scrolled-to-end="scrolledToEnd"
+              :is-detached="isRenderedDetached"
+              :width="width"
+              :height="height"
+              :toggle-sidebar="toggleSidebar"
+            />
+          </div>
+        </div>
+      </template>
+    </SidebarDetached>
+    <div
+      v-else
+      v-show="activeSidebar === id"
+      class="bk-sidebar-inner"
+      @wheel="onWheel"
+    >
+      <div class="bk">
+        <div class="bk-sidebar-title">
+          <span>{{ title }}</span>
+          <button v-if="!ui.isMobile.value" @click.prevent.stop="onDetach">
+            <Icon name="expand" />
+          </button>
+          <button @click.prevent.stop="toggleSidebar">
+            <Icon name="close" />
+          </button>
+        </div>
+      </div>
+      <div class="bk-sidebar-content-wrapper">
+        <div ref="sidebarContent" class="bk-sidebar-content">
+          <slot
+            :key="isRenderedDetached ? 'detached' : 'attached'"
+            :scrolled-to-end="scrolledToEnd"
+            :is-detached="isRenderedDetached"
+            :width="undefined"
+            :height="undefined"
+            :toggle-sidebar="toggleSidebar"
+          />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, watch, ref, useBlokkli } from '#imports'
+import type { BlokkliIcon } from '#blokkli/icons'
+import { Icon, ShortcutIndicator } from '#blokkli/components'
+import SidebarDetached from './Detached/index.vue'
+import defineCommands from '#blokkli/helpers/composables/defineCommands'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+import useAnimationFrame from '#blokkli/helpers/composables/useAnimationFrame'
+import defineTourItem from '#blokkli/helpers/composables/defineTourItem'
+
+const props = withDefaults(
+  defineProps<{
+    id: string
+    title: string
+    tourText?: string
+    editOnly?: boolean
+    icon: BlokkliIcon
+    weight?: string | number
+    renderAlways?: boolean
+    region?: 'left' | 'right'
+    minWidth?: number
+    minHeight?: number
+    size?: { width: number; height: number }
+    meta?: boolean
+    shift?: boolean
+    keyCode?: string
+  }>(),
+  {
+    region: 'right',
+    tourText: undefined,
+    weight: 0,
+    minWidth: undefined,
+    minHeight: undefined,
+    size: undefined,
+    keyCode: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'updated'): void
+}>()
+
+const { storage, state, ui, $t, keyboard } = useBlokkli()
+
+const tourElement = ref<HTMLElement | null>(null)
+
+const detachedKey = computed(() => 'sidebar:detached:' + props.id)
+const storageKey = computed(() => 'sidebar:active:' + props.region)
+const isDetached = storage.use(detachedKey, false)
+const isDisabled = computed(
+  () => props.editOnly && state.editMode.value !== 'editing',
+)
+const activeSidebar = storage.use(storageKey, '')
+
+const isRenderedDetached = computed(
+  () => isDetached.value && !ui.isMobile.value,
+)
+
+watch(isDisabled, (v) => {
+  if (v && activeSidebar.value === props.id) {
+    activeSidebar.value = ''
+  }
+})
+
+const onWheel = (e: WheelEvent) => {
+  e.stopPropagation()
+  if (e.ctrlKey || e.metaKey || keyboard.isPressingControl.value) {
+    e.preventDefault()
+  }
+  if (isOverflowing.value) {
+    e.stopPropagation()
+  }
+}
+
+const onDetach = () => {
+  isDetached.value = true
+  activeSidebar.value = ''
+  emit('updated')
+}
+
+const onAttach = () => {
+  isDetached.value = false
+  emit('updated')
+}
+
+const toggleSidebar = () => {
+  if (isDetached.value) {
+    isDetached.value = false
+    return
+  }
+  activeSidebar.value = activeSidebar.value === props.id ? '' : props.id
+  emit('updated')
+}
+
+const showSidebar = () => {
+  if (isDetached.value) {
+    return
+  }
+  activeSidebar.value = props.id
+}
+
+watch(activeSidebar, (active) => {
+  if (active) {
+    document.documentElement.classList.add('bk-has-sidebar-' + props.region)
+  } else {
+    document.documentElement.classList.remove('bk-has-sidebar-' + props.region)
+  }
+})
+
+const sidebarContent = ref<HTMLDivElement | null>(null)
+const scrolledToEnd = ref(false)
+const isOverflowing = ref(false)
+
+useAnimationFrame(() => {
+  if (sidebarContent.value) {
+    scrolledToEnd.value =
+      sidebarContent.value.scrollHeight -
+        (sidebarContent.value.scrollTop + sidebarContent.value.offsetHeight) <
+      3
+
+    isOverflowing.value =
+      sidebarContent.value.scrollHeight > sidebarContent.value.offsetHeight
+  }
+})
+
+const commandTitle = computed(() => {
+  if (activeSidebar.value === props.id) {
+    return $t('sidebar.hide', 'Hide @title').replace('@title', props.title)
+  }
+  return $t('sidebar.show', 'Show @title').replace('@title', props.title)
+})
+
+const commandCallback = () => {
+  if (activeSidebar.value === props.id) {
+    activeSidebar.value = ''
+  } else {
+    activeSidebar.value = props.id
+  }
+}
+
+defineCommands(() => {
+  if (isDisabled.value) {
+    return
+  }
+  return {
+    id: 'plugin:sidebar:' + props.id,
+    label: commandTitle.value,
+    group: 'ui',
+    icon: props.icon,
+    disabled: isRenderedDetached.value,
+    callback: commandCallback,
+  }
+})
+
+onBlokkliEvent('item:dropped', () => {
+  // On mobile we want to close the active sidebar.
+  // Some sidebar panes like the media library or clipboard allow drag and drop.
+  // During dragging the sidebar is hidden. If dragging ends, the sidebar would
+  // be visible again, which is annoying.
+  // This is why we hide any sidebar in this case.
+  if (ui.isMobile.value && activeSidebar.value) {
+    activeSidebar.value = ''
+  }
+})
+
+defineExpose({ showSidebar })
+
+defineTourItem(() => {
+  if (!props.tourText) {
+    return
+  }
+  return {
+    id: 'plugin:sidebar:' + props.id,
+    title: props.title,
+    text: props.tourText,
+    element: () => tourElement.value,
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'PluginSidebar',
+}
+</script>

package/dist/runtime/blokkliPlugins/ToolbarButton/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <Teleport :to="'#bk-toolbar-' + region">
+    <button
+      ref="el"
+      class="bk-toolbar-button"
+      :disabled="disabled"
+      :class="[{ 'is-active': active }, id ? 'bk-is-' + id : undefined]"
+      :style="{ order: weight || 0 }"
+      @click.prevent.stop="onClick"
+    >
+      <slot>
+        <Icon v-if="icon" :name="icon" />
+      </slot>
+      <div class="bk-tooltip">
+        <span>{{ title }}</span>
+        <ShortcutIndicator
+          v-if="keyCode"
+          :meta="meta"
+          :shift="shift"
+          :key-code="keyCode"
+          :label="title"
+          :group="shortcutGroup"
+          @pressed="onClick"
+        />
+      </div>
+    </button>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ShortcutIndicator, Icon } from '#blokkli/components'
+import type { BlokkliIcon } from '#blokkli/icons'
+import { ref } from '#imports'
+import defineCommands from '#blokkli/helpers/composables/defineCommands'
+import defineTourItem from '#blokkli/helpers/composables/defineTourItem'
+
+const props = defineProps<{
+  id: string
+  title: string
+  region:
+    | 'after-title'
+    | 'before-title'
+    | 'before-sidebar'
+    | 'after-menu'
+    | 'before-sidebar-right'
+    | 'view-options'
+  editOnly?: boolean
+  disabled?: boolean
+  active?: boolean
+  meta?: boolean
+  shift?: boolean
+  keyCode?: string
+  icon?: BlokkliIcon
+  shortcutGroup?: string
+  tourText?: string
+
+  /**
+   * The weight, used for positioning the button.
+   */
+  weight?: number | string
+}>()
+
+const emit = defineEmits(['click'])
+
+const el = ref<HTMLButtonElement | null>(null)
+
+function onClick() {
+  if (props.disabled) {
+    return
+  }
+
+  emit('click')
+}
+
+defineCommands(() => {
+  return {
+    id: 'plugin:toolbar_button:' + props.id,
+    label: props.title,
+    group: 'ui',
+    icon: props.icon,
+    disabled: props.disabled,
+    callback: () => emit('click'),
+  }
+})
+
+defineTourItem(() => {
+  if (!props.tourText) {
+    return
+  }
+
+  return {
+    id: 'plugin:toolbar-button:' + props.id,
+    title: props.title,
+    text: props.tourText,
+    element: () => el.value,
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'PluginToolbarButton',
+}
+</script>

package/dist/runtime/blokkliPlugins/TourItem/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <slot />
+</template>
+
+<script lang="ts" setup>
+import defineTourItem from '#blokkli/helpers/composables/defineTourItem'
+import { getCurrentInstance } from '#imports'
+
+import type { RendererNode } from 'vue'
+
+const props = defineProps<{
+  id: string
+  title: string
+  text: string
+  selector?: string
+}>()
+
+const findElement = (
+  el: RendererNode | null | undefined,
+): HTMLElement | undefined => {
+  if (el instanceof Text) {
+    return findElement(el.nextElementSibling)
+  } else if (el instanceof HTMLElement) {
+    return el
+  }
+}
+
+const instance = getCurrentInstance()
+defineTourItem(() => {
+  return {
+    id: props.id,
+    title: props.title,
+    text: props.text,
+    element: () => {
+      const provided = props.selector
+        ? document.querySelector(props.selector)
+        : undefined
+      const element = provided || findElement(instance?.vnode.el)
+      if (element instanceof HTMLElement) {
+        return element
+      }
+    },
+  }
+})
+</script>

package/dist/runtime/blokkliPlugins/ViewOption/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <Teleport to="#bk-toolbar-view-options">
+    <button
+      v-if="!ui.isMobile.value"
+      ref="button"
+      class="bk-toolbar-button"
+      :class="{ 'bk-is-inactive': !isActive }"
+      @click.prevent.stop="onClick"
+    >
+      <slot name="icon">
+        <Icon v-if="icon" :name="icon" />
+      </slot>
+      <div class="bk-tooltip">
+        <span>{{ title }}</span>
+
+        <ShortcutIndicator
+          v-if="keyCode"
+          meta
+          :key-code="keyCode"
+          :label="label"
+          group="ui"
+          @pressed="onClick"
+        />
+      </div>
+    </button>
+  </Teleport>
+
+  <slot :is-active="isActive && !ui.isMobile.value" />
+</template>
+
+<script setup lang="ts">
+import { useBlokkli, computed, ref } from '#imports'
+import { ShortcutIndicator, Icon } from '#blokkli/components'
+import type { BlokkliIcon } from '#blokkli/icons'
+import defineCommands from '#blokkli/helpers/composables/defineCommands'
+import defineTourItem from '#blokkli/helpers/composables/defineTourItem'
+
+const { storage, ui } = useBlokkli()
+
+const props = defineProps<{
+  id: string
+  label: string
+  titleOn: string
+  titleOff: string
+  editOnly?: boolean
+  keyCode?: string
+  icon?: BlokkliIcon
+  tourText?: string
+  modelValue?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', data: boolean): void
+}>()
+
+const storageKey = 'view_option_' + props.id
+const button = ref<HTMLElement | null>(null)
+
+const isActiveStorage = storage.use(storageKey, false)
+
+const isActive = computed({
+  get() {
+    return isActiveStorage.value
+  },
+  set(v: boolean) {
+    isActiveStorage.value = v
+    emit('update:modelValue', v)
+  },
+})
+
+emit('update:modelValue', isActiveStorage.value)
+
+const title = computed(() => (isActive.value ? props.titleOff : props.titleOn))
+
+const onClick = () => {
+  isActive.value = !isActive.value
+}
+
+defineCommands(() => {
+  return {
+    id: 'plugin:view_option:' + props.id,
+    label: title.value,
+    icon: props.icon,
+    group: 'ui',
+    callback: () => (isActive.value = !isActive.value),
+  }
+})
+
+defineTourItem(() => {
+  if (!props.tourText) {
+    return
+  }
+  return {
+    id: 'plugin:view_option:' + props.id,
+    title: props.label,
+    text: props.tourText,
+    element: () => button.value,
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'PluginViewOption',
+}
+</script>

package/dist/runtime/blokkliPlugins/index.d.ts

@@ -0,0 +1,12 @@
+import PluginMenuButton from './MenuButton/index.vue.js';
+import PluginItemAction from './ItemAction/index.vue.js';
+import PluginItemDropdown from './ItemDropdown/index.vue.js';
+import PluginSidebar from './Sidebar/index.vue.js';
+import PluginToolbarButton from './ToolbarButton/index.vue.js';
+import PluginViewOption from './ViewOption/index.vue.js';
+import PluginAddAction from './AddAction/index.vue.js';
+import PluginContextMenu from './ContextMenu/index.vue.js';
+import PluginTourItem from './TourItem/index.vue.js';
+import PluginDroppableEdit from './DroppableEdit/index.vue.js';
+import PluginDebugOverlay from './DebugOverlay/index.vue.js';
+export { PluginMenuButton, PluginItemAction, PluginSidebar, PluginToolbarButton, PluginViewOption, PluginItemDropdown, PluginAddAction, PluginContextMenu, PluginTourItem, PluginDroppableEdit, PluginDebugOverlay, };

package/dist/runtime/blokkliPlugins/index.js

@@ -0,0 +1,24 @@
+import PluginMenuButton from "./MenuButton/index.vue";
+import PluginItemAction from "./ItemAction/index.vue";
+import PluginItemDropdown from "./ItemDropdown/index.vue";
+import PluginSidebar from "./Sidebar/index.vue";
+import PluginToolbarButton from "./ToolbarButton/index.vue";
+import PluginViewOption from "./ViewOption/index.vue";
+import PluginAddAction from "./AddAction/index.vue";
+import PluginContextMenu from "./ContextMenu/index.vue";
+import PluginTourItem from "./TourItem/index.vue";
+import PluginDroppableEdit from "./DroppableEdit/index.vue";
+import PluginDebugOverlay from "./DebugOverlay/index.vue";
+export {
+  PluginMenuButton,
+  PluginItemAction,
+  PluginSidebar,
+  PluginToolbarButton,
+  PluginViewOption,
+  PluginItemDropdown,
+  PluginAddAction,
+  PluginContextMenu,
+  PluginTourItem,
+  PluginDroppableEdit,
+  PluginDebugOverlay
+};

package/dist/runtime/components/Blocks/Fragment/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>newspaper</title><path d="M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z" /></svg>

package/dist/runtime/components/Blocks/Fragment/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <component :is="component" v-if="component" />
+</template>
+
+<script lang="ts" setup>
+import { getBlokkliFragmentComponent } from '#blokkli/imports'
+import { provide, defineBlokkli } from '#imports'
+import { INJECT_FRAGMENT_CONTEXT } from '#blokkli/helpers/symbols'
+
+const componentProps = defineProps<{
+  name: string
+}>()
+
+const ctx = defineBlokkli({
+  bundle: 'blokkli_fragment',
+  editor: {
+    disableEdit: true,
+  },
+})
+
+const component = getBlokkliFragmentComponent(componentProps.name)
+
+provide(INJECT_FRAGMENT_CONTEXT, ctx)
+</script>

package/dist/runtime/components/Blocks/FromLibrary/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <BlokkliItem
+    v-if="item"
+    :key="item.uuid"
+    v-bind="item"
+    :index="index"
+    :data-reusable-bundle="item.bundle"
+    :data-reusable-uuid="item.uuid"
+    :data-bk-library-label="libraryItem?.label"
+    data-blokkli-is-reusable="true"
+    :parent-type="parentType"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, provide, defineBlokkli } from '#imports'
+import {
+  INJECT_IS_IN_REUSABLE,
+  INJECT_REUSABLE_OPTIONS,
+} from '#blokkli/helpers/symbols'
+import type { FieldListItem } from '#blokkli/types'
+
+interface LibraryItem {
+  block?: FieldListItem
+  label?: string
+}
+
+const props = defineProps<{
+  libraryItem?: LibraryItem
+}>()
+
+const { index, options, parentType } = defineBlokkli({
+  bundle: 'from_library',
+  editor: {
+    disableEdit: true,
+  },
+})
+
+// Reusable items inherit the options from this wrapper paragraph.
+// They are injected in the defineBlokkli() composable.
+provide(INJECT_REUSABLE_OPTIONS, options)
+provide(INJECT_IS_IN_REUSABLE, true)
+
+const item = computed(() => {
+  const v = props.libraryItem?.block
+  if (v && 'uuid' in v) {
+    return v
+  }
+
+  return undefined
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'BlokkliFromLibrary',
+}
+</script>