@blokkli/editor 2.0.0-alpha.28 → 2.0.0-alpha.29

package/dist/runtime/editor/features/entity-title/index.vue

@@ -0,0 +1,136 @@
+<template>
+  <Teleport to="#bk-toolbar-title">
+    <button
+      v-if="scheduledDate"
+      class="bk-toolbar-title-scheduled"
+      @click.prevent="eventBus.emit('publish:show-dialog')"
+    >
+      <Icon name="bk_mdi_calendar_clock" />
+      <div class="bk-toolbar-title-scheduled-text">
+        <div>{{ formattedScheduledDate }}</div>
+      </div>
+      <div class="bk-tooltip">
+        <div>
+          {{
+            $t("scheduledFor", "The changes will be published on this date.")
+          }}
+        </div>
+      </div>
+    </button>
+    <button
+      ref="buttonEl"
+      class="bk-toolbar-button"
+      :disabled="!state.canEdit.value"
+      @click="eventBus.emit('editEntity')"
+    >
+      <div class="bk-toolbar-title">
+        <div>
+          <span
+            class="bk-status-indicator"
+            :class="{
+  'bk-is-success': entity.status && !mutations.length,
+  'bk-is-warning': entity.status && mutations.length
+}"
+          />
+          <strong>{{ entity.label }}</strong>
+          <span>&nbsp;{{ entity.bundleLabel }}</span>
+        </div>
+      </div>
+      <div class="bk-tooltip">
+        <span v-if="entity.status && !mutations.length">{{
+          statusPublished
+        }}</span>
+        <span v-else-if="entity.status && mutations.length">{{
+          statusPending
+        }}</span>
+        <span v-else>{{ statusUnpublished }}</span>
+      </div>
+    </button>
+  </Teleport>
+</template>
+
+<script setup>
+import {
+  useBlokkli,
+  defineBlokkliFeature,
+  computed,
+  useTemplateRef
+} from "#imports";
+import { Icon } from "#blokkli/editor/components";
+import { defineCommands, defineTourItem } from "#blokkli/editor/composables";
+defineBlokkliFeature({
+  id: "entity-title",
+  icon: "bk_mdi_title",
+  label: "Entity Title",
+  description: "Renders the title and status of the page entity."
+});
+const { state, eventBus, $t, ui } = useBlokkli();
+const { entity, mutations } = state;
+const buttonEl = useTemplateRef("buttonEl");
+const scheduledDate = computed(() => state.publishOptions.value?.publishOn);
+const formattedScheduledDate = computed(() => {
+  if (!scheduledDate.value) {
+    return "";
+  }
+  return ui.formatDate(scheduledDate.value, {
+    weekday: "short",
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+});
+const statusPublished = computed(
+  () => $t("pageIsPublished", "Page is published")
+);
+const statusPending = computed(
+  () => $t(
+    "pageIsPublishedWithPendingChanges",
+    "Page is published (changes pending)"
+  )
+);
+const statusUnpublished = computed(
+  () => $t("pageIsNotPublished", "Page is not published")
+);
+defineCommands(() => {
+  return {
+    id: "feature:entity-title:edit-entity",
+    group: "misc",
+    label: $t("editFormEntityEdit", "Edit @label").replace(
+      "@label",
+      entity.value.label || "Page"
+    ),
+    callback: () => eventBus.emit("editEntity"),
+    icon: "bk_mdi_edit"
+  };
+});
+const tourText = computed(() => {
+  const intro = $t(
+    "entityTitleTourText",
+    "<p>Shows the title and status of the current page.</p><p>Click on the title to open the page edit form.</p>"
+  );
+  return `
+${intro}
+<ul>
+<li><div class="bk-status-indicator"></div>${statusUnpublished.value}</li>
+<li><div class="bk-status-indicator bk-is-warning"></div>${statusPending.value}</li>
+<li><div class="bk-status-indicator bk-is-success"></div>${statusPublished.value}</li>
+</ul>
+`;
+});
+defineTourItem(() => {
+  return {
+    id: "entity-title",
+    title: $t("entityTitleTourTitle", "Page"),
+    text: tourText.value,
+    element: buttonEl.value
+  };
+});
+</script>
+
+<script>
+export default {
+  name: "EntityTitle"
+};
+</script>

package/dist/runtime/editor/features/entity-title/index.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/features/exit/index.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/features/exit/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <div />
+</template>
+
+<script setup>
+import { useBlokkli, useRoute, nextTick, defineBlokkliFeature } from "#imports";
+import { defineMenuButton } from "#blokkli/editor/composables";
+defineBlokkliFeature({
+  id: "exit",
+  label: "Exit",
+  icon: "bk_mdi_exit_to_app",
+  description: "Provides a menu button to exit the editor without saving."
+});
+const { $t, broadcast, context } = useBlokkli();
+const route = useRoute();
+function onClick() {
+  nextTick(() => {
+    broadcast.emit("closeEditor", { uuid: context.value.entityUuid });
+    window.location.href = route.path;
+  });
+}
+defineMenuButton(() => {
+  return {
+    id: "exit",
+    title: $t("exitTitle", "Close"),
+    description: $t("exitDescription", "Close editor without publishing"),
+    icon: "bk_mdi_exit_to_app",
+    weight: 100,
+    callback: onClick
+  };
+});
+</script>
+
+<script>
+export default {
+  name: "Exit"
+};
+</script>

package/dist/runtime/editor/features/exit/index.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/features/fragments/Dialog/Item/index.d.vue.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    name: string;
+    index: number;
+    label?: string;
+    description?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/fragments/Dialog/Item/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <div :class="backgroundClass">
+    <div class="bk bk-library-list-item-header">
+      <h3>{{ label || name }}</h3>
+      <p v-if="description">{{ description }}</p>
+    </div>
+    <div
+      v-if="renderPreview"
+      class="bk-library-list-item-inner"
+      :class="backgroundClass"
+    >
+      <ScaleToFit :width="previewWidth" :max-height="500">
+        <BlokkliItem v-bind="item" parent-type="nested" />
+      </ScaleToFit>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, provide, useBlokkli } from "#imports";
+import { ScaleToFit } from "#blokkli/editor/components";
+import {
+  INJECT_FIELD_LIST_BLOCKS,
+  INJECT_IS_EDITING,
+  INJECT_IS_IN_REUSABLE,
+  INJECT_PROVIDER_BLOCKS
+} from "#blokkli/helpers/injections";
+import { fragmentBlockBundle } from "#blokkli-build/config";
+const props = defineProps({
+  name: { type: String, required: true },
+  index: { type: Number, required: true },
+  label: { type: String, required: false },
+  description: { type: String, required: false }
+});
+const { definitions } = useBlokkli();
+const item = computed(() => {
+  return {
+    bundle: fragmentBlockBundle,
+    uuid: props.index.toString(),
+    props: {
+      name: props.name
+    }
+  };
+});
+const definition = computed(() => definitions.getFragmentDefinition(props.name));
+const previewWidth = computed(() => definition.value?.editor?.previewWidth);
+const renderPreview = computed(
+  () => definition.value?.editor?.noPreview !== true
+);
+const backgroundClass = computed(
+  () => definition.value?.editor?.previewBackgroundClass || ""
+);
+const blocks = computed(() => []);
+provide(INJECT_IS_IN_REUSABLE, true);
+provide(INJECT_IS_EDITING, false);
+provide(INJECT_FIELD_LIST_BLOCKS, blocks);
+provide(INJECT_PROVIDER_BLOCKS, blocks);
+</script>

package/dist/runtime/editor/features/fragments/Dialog/Item/index.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    name: string;
+    index: number;
+    label?: string;
+    description?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/fragments/Dialog/index.d.vue.ts

@@ -0,0 +1,13 @@
+import type { BlokkliFieldElement } from '#blokkli/editor/types/field';
+type __VLS_Props = {
+    field: BlokkliFieldElement;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    submit: (uuid: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onSubmit?: ((uuid: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/fragments/Dialog/index.vue

@@ -0,0 +1,122 @@
+<template>
+  <FormOverlay
+    id="fragments"
+    :title="$t('fragmentsPlaceDialogTitle', 'Add fragment block')"
+    icon="bk_mdi_newspaper"
+    @close="onClose"
+  >
+    <div class="bk-library-dialog">
+      <p class="bk-lead">
+        {{
+          $t(
+  "fragmentsPlaceDialogLead",
+  "Select a block fragment to add to the page."
+)
+        }}
+      </p>
+      <div class="bk">
+        <div class="bk-form-group">
+          <div>
+            <label class="bk-form-label" for="library_search">
+              {{ $t("fragmentsPlaceDialogSearchLabel", "Filter fragments") }}
+            </label>
+            <input
+              id="fragments_search"
+              v-model="searchText"
+              type="text"
+              class="bk-form-input"
+              :placeholder="
+  $t('fragmentsPlaceDialogSearchPlaceholder', 'Search fragments')
+"
+              required
+            />
+          </div>
+        </div>
+      </div>
+      <div class="bk-library-dialog-content">
+        <ul class="bk-library-dialog-list">
+          <li
+            v-for="(item, index) in fragments"
+            v-show="visible === null || visible.includes(item.name)"
+            ref="itemElements"
+            :key="item.name"
+            :class="{
+  'bk-is-selected': selectedItem === item.name
+}"
+            :data-bk-fragment-name="item.name"
+            @click="selectedItem = item.name"
+          >
+            <FragmentItem
+              :name="item.name"
+              :label="item.label"
+              :description="item.description"
+              :index="index"
+            />
+          </li>
+        </ul>
+      </div>
+    </div>
+    <template #footer>
+      <button class="bk-button bk-is-primary" @click="onSubmit">
+        {{ $t("fragmentsPlaceDialogSubmitButton", "Add selected fragment") }}
+      </button>
+    </template>
+  </FormOverlay>
+</template>
+
+<script setup>
+import { FormOverlay } from "#blokkli/editor/components";
+import { falsy } from "#blokkli/helpers";
+import { ref, useBlokkli, computed, watch, useTemplateRef } from "#imports";
+import FragmentItem from "./Item/index.vue";
+const props = defineProps({
+  field: { type: Object, required: true }
+});
+const { $t, definitions } = useBlokkli();
+const emit = defineEmits(["close", "submit"]);
+const searchText = ref("");
+const itemElements = useTemplateRef("itemElements");
+const selectedItem = ref("");
+const allowedInField = computed(() => props.field.allowedFragments || []);
+const fragments = computed(
+  () => definitions.fragmentDefinitions.value.filter(
+    (v) => allowedInField.value.includes(v.name)
+  )
+);
+const onSubmit = () => {
+  if (selectedItem.value) {
+    emit("submit", selectedItem.value);
+  }
+};
+const onClose = () => {
+  emit("close");
+};
+const elements = ref([]);
+const buildElements = () => {
+  if (!itemElements.value) {
+    return;
+  }
+  elements.value = itemElements.value.map((el) => {
+    if (el instanceof HTMLElement) {
+      const name = el.dataset.bkFragmentName;
+      if (name) {
+        return {
+          name,
+          text: el.textContent?.toLowerCase() || ""
+        };
+      }
+    }
+  }).filter(falsy);
+};
+watch(searchText, () => {
+  if (!elements.value.length) {
+    buildElements();
+  }
+});
+const visible = computed(() => {
+  if (!searchText.value || !elements.value.length) {
+    return null;
+  }
+  return elements.value.filter((v) => v.text.includes(searchText.value.toLowerCase())).map((v) => v.name);
+});
+</script>

package/dist/runtime/editor/features/fragments/Dialog/index.vue.d.ts

@@ -0,0 +1,13 @@
+import type { BlokkliFieldElement } from '#blokkli/editor/types/field';
+type __VLS_Props = {
+    field: BlokkliFieldElement;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    submit: (uuid: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onSubmit?: ((uuid: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/fragments/index.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/features/fragments/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <Teleport :to="ui.mainLayoutElement.value">
+    <BlokkliTransition name="slide-in">
+      <FragmentsDialog
+        v-if="placedAction"
+        :field="placedAction.field"
+        @close="placedAction = null"
+        @submit="onAddFragment"
+      />
+    </BlokkliTransition>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, useBlokkli, defineBlokkliFeature, computed } from "#imports";
+import FragmentsDialog from "./Dialog/index.vue";
+import { BlokkliTransition } from "#blokkli/editor/components";
+import { defineAddAction } from "#blokkli/editor/composables";
+import { fragmentBlockBundle } from "#blokkli-build/config";
+const { adapter } = defineBlokkliFeature({
+  id: "fragments",
+  icon: "bk_mdi_newspaper",
+  label: "Fragments",
+  description: "Provides way to add content fragments defined by the frontend.",
+  requiredAdapterMethods: ["fragmentsAddBlock"],
+  dependencies: ["add-list"]
+});
+const { state, $t, types, dom, ui } = useBlokkli();
+const placedAction = ref(null);
+const onAddFragment = async (name) => {
+  if (!placedAction.value || !adapter.fragmentsAddBlock) {
+    return;
+  }
+  await state.mutateWithLoadingState(
+    () => adapter.fragmentsAddBlock({
+      name,
+      host: placedAction.value.host,
+      preceedingUuid: placedAction.value.preceedingUuid
+    })
+  );
+  placedAction.value = null;
+};
+const isSupportedOnEntity = computed(
+  () => types.generallyAvailableBundles.find((v) => v.id === fragmentBlockBundle)
+);
+defineAddAction(() => {
+  if (!isSupportedOnEntity.value) {
+    return;
+  }
+  return {
+    id: "fragment",
+    icon: "bk_mdi_newspaper",
+    color: "accent",
+    itemBundle: fragmentBlockBundle,
+    title: $t("fragmentsAddFragmentAction", "Add fragment"),
+    description: $t(
+      "fragmentsAddFragmentDescription",
+      "<p>Drag the icon into the page to add a fragment block.</p><p>Fragments are reusable blocks that always render the same content.</p>"
+    ),
+    callback: (action) => {
+      placedAction.value = action;
+    },
+    enabled: (item) => {
+      const field = dom.getRegisteredField(item.host.uuid, item.host.fieldName);
+      return !!field?.allowedFragments.length;
+    }
+  };
+});
+</script>
+
+<script>
+export default {
+  name: "Fragments"
+};
+</script>

package/dist/runtime/editor/features/fragments/index.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/features/fragments/types.d.ts

@@ -0,0 +1,14 @@
+import type { BlokkliItemHost } from '#blokkli/editor/types/field';
+export type AdapterFragmentsAddBlock = {
+    name: string;
+    host: BlokkliItemHost;
+    preceedingUuid: string | null;
+};
+declare module '#blokkli/editor/adapter' {
+    interface BlokkliAdapter<T> {
+        /**
+         * Add a fragment block.
+         */
+        fragmentsAddBlock?: (e: AdapterFragmentsAddBlock) => Promise<MutationResponseLike<T>> | undefined;
+    }
+}

package/dist/runtime/editor/features/grid/index.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/features/grid/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <PluginViewOption
+    id="grid"
+    v-slot="{ isActive }"
+    :label="$t('gridToggle', 'Toggle grid')"
+    :title-on="$t('gridShow', 'Show grid')"
+    :title-off="$t('gridHide', 'Hide grid')"
+    :tour-text="
+  $t('gridTourText', 'Display a layout grid overlay on top of the page.')
+"
+    key-code="G"
+    icon="bk_mdi_grid_view"
+  >
+    <div v-if="isActive" class="bk-grid-overlay" v-html="gridMarkup" />
+  </PluginViewOption>
+</template>
+
+<script setup>
+import { useBlokkli, defineBlokkliFeature } from "#imports";
+import { PluginViewOption } from "#blokkli/editor/plugins";
+const { adapter } = defineBlokkliFeature({
+  id: "grid",
+  label: "Grid",
+  icon: "bk_mdi_grid_view",
+  requiredAdapterMethods: ["getGridMarkup"],
+  description: "Provides a view option to render a grid.",
+  viewports: ["desktop"]
+});
+const gridMarkup = await Promise.resolve(adapter.getGridMarkup());
+const { $t } = useBlokkli();
+</script>
+
+<script>
+export default {
+  name: "Grid"
+};
+</script>

package/dist/runtime/editor/features/grid/index.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/features/grid/types.d.ts

@@ -0,0 +1,8 @@
+declare module '#blokkli/editor/adapter' {
+    interface BlokkliAdapter<T> {
+        /**
+         * Return the HTML markup for displaying the grid.
+         */
+        getGridMarkup?: () => Promise<string> | string;
+    }
+}

package/dist/runtime/editor/features/help/Shortcuts/index.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/help/Shortcuts/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="bk-help-shortcuts">
+    <table>
+      <tbody>
+        <!-- eslint-disable-next-line vue/no-v-for-template-key -->
+        <template v-for="group in groups" :key="group.group">
+          <tr class="bk-is-heading">
+            <th colspan="2">{{ group.group }}</th>
+          </tr>
+          <tr v-for="(shortcut, i) in group.shortcuts" :key="group.group + i">
+            <td>
+              <ShortcutIndicator
+                view-only
+                :meta="shortcut.meta"
+                :shift="shortcut.shift"
+                :key-code="shortcut.code"
+                :label="shortcut.label"
+              />
+            </td>
+            <td>{{ shortcut.label }}</td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup>
+import { useBlokkli, computed } from "#imports";
+import { ShortcutIndicator } from "#blokkli/editor/components";
+const { keyboard, $t } = useBlokkli();
+const getGroupLabel = (key) => {
+  if (key === "general") {
+    return $t("shortcutGroupGeneral", "General");
+  } else if (key === "blocks") {
+    return $t("shortcutGroupBlocks", "Blocks");
+  } else if (key === "ui") {
+    return $t("shortcutGroupUi", "UI");
+  }
+  return key;
+};
+const groups = computed(() => {
+  return Object.values(
+    keyboard.shortcuts.value.reduce((acc, v) => {
+      const group = getGroupLabel(v.shortcut.group || "general");
+      if (!acc[group]) {
+        acc[group] = {
+          group,
+          shortcuts: []
+        };
+      }
+      acc[group].shortcuts.push(v.shortcut);
+      return acc;
+    }, {})
+  ).map((group) => {
+    group.shortcuts.sort((a, b) => a.code.localeCompare(b.code));
+    return group;
+  });
+});
+</script>

package/dist/runtime/editor/features/help/Shortcuts/index.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/help/index.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;