@blokkli/editor 2.0.0-alpha.59 → 2.0.0-alpha.60

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

@@ -0,0 +1,57 @@
+<template>
+  <DialogModal
+    id="help"
+    :title="$t('featureHelpTitle', 'Help')"
+    hide-buttons
+    icon="bk_mdi_help"
+    mono
+    @cancel="$emit('cancel')"
+  >
+    <div class="bk bk-help">
+      <div v-if="isTourEnabled" class="bk-help-section">
+        <button
+          class="bk-button bk-scheme-yellow bk-is-fullwidth"
+          :disabled="tour.isTouring.value"
+          @click="onStartTour"
+        >
+          {{ $t("tourLabel", "Take a tour") }}
+        </button>
+      </div>
+      <div class="bk-help-section">
+        <h3>{{ $t("featureHelpShortcuts", "Shortcuts") }}</h3>
+        <Shortcuts />
+      </div>
+    </div>
+  </DialogModal>
+</template>
+
+<script setup>
+import { useBlokkli, computed, defineAsyncComponent } from "#imports";
+import { DialogModal } from "#blokkli/editor/components";
+const Shortcuts = defineAsyncComponent(() => import("../Shortcuts/index.vue"));
+const { $t, features, tour } = useBlokkli();
+const emit = defineEmits(["cancel"]);
+const isTourEnabled = computed(
+  () => features.mountedFeatures.value.find((v) => v.id === "tour")
+);
+function onStartTour() {
+  tour.isTouring.value = true;
+  emit("cancel");
+}
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk.bk-help {
+  padding: 20px;
+  container-type: inline-size;
+}
+:is(.bk.bk-help .bk-help-section):not(:last-child) {
+  margin-bottom: 20px;
+}
+:is(.bk.bk-help .bk-help-section)  > h3 {
+  font-size: var(--text-lg, 18px);
+  line-height: var(--bk-tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+}
+</style>

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

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

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

@@ -1,28 +1,9 @@
 <template>
-  <PluginSidebar
-    id="help"
-    :title="$t('featureHelpTitle', 'Help')"
-    :tour-text="$t('helpTourText', 'Shows a list of available shortcuts.')"
-    icon="bk_mdi_help"
-    weight="100"
-    key-code="F1"
-  >
-    <div class="bk bk-help">
-      <div v-if="isTourEnabled" class="bk-help-section">
-        <button
-          class="bk-button bk-scheme-yellow bk-is-fullwidth"
-          :disabled="tour.isTouring.value"
-          @click="tour.isTouring.value = true"
-        >
-          {{ $t("tourLabel", "Take a tour") }}
-        </button>
-      </div>
-      <div class="bk-help-section">
-        <h3>{{ $t("featureHelpShortcuts", "Shortcuts") }}</h3>
-        <Shortcuts />
-      </div>
-    </div>
-  </PluginSidebar>
+  <Teleport :to="ui.mainLayoutElement.value">
+    <BlokkliTransition name="slide-up">
+      <HelpDialog v-if="showDialog" @cancel="onClose" />
+    </BlokkliTransition>
+  </Teleport>
 </template>
 
 <script setup>
@@ -32,19 +13,59 @@ import {
   computed,
   defineAsyncComponent
 } from "#imports";
-import { PluginSidebar } from "#blokkli/editor/plugins";
-const Shortcuts = defineAsyncComponent(() => import("./Shortcuts/index.vue"));
+import { BlokkliTransition } from "#blokkli/editor/components";
+import {
+  defineMenuButton,
+  defineShortcut,
+  onBlokkliEvent
+} from "#blokkli/editor/composables";
+const HelpDialog = defineAsyncComponent(() => import("./Dialog/index.vue"));
 defineBlokkliFeature({
   id: "help",
   icon: "bk_mdi_help",
   label: "Help",
-  description: "Provides a sidebar pane with helpful information on how to use blokkli.",
+  description: "Provides a menu button to display a dialog with shortcuts and a link to the editor tour.",
   viewports: ["desktop"]
 });
-const { $t, features, tour } = useBlokkli();
-const isTourEnabled = computed(
-  () => features.mountedFeatures.value.find((v) => v.id === "tour")
-);
+const { $t, ui } = useBlokkli();
+const showDialog = computed(() => ui.currentDialog.value?.id === "help");
+function onOpen() {
+  ui.openDialog({ id: "help", alignment: "center" });
+}
+function onClose() {
+  ui.closeDialog("help");
+}
+defineMenuButton(() => {
+  return {
+    id: "help",
+    title: $t("featureHelpTitle", "Help"),
+    description: $t("helpMenuDescription", "View available keyboard shortcuts"),
+    icon: "bk_mdi_help",
+    secondary: true,
+    callback: onOpen
+  };
+});
+defineShortcut({
+  code: "F1",
+  label: $t("featureHelpTitle", "Help")
+});
+onBlokkliEvent("keyPressed", (e) => {
+  if (e.code !== "F1") {
+    return;
+  }
+  if (ui.hasNestedEditorOpen.value) {
+    return;
+  }
+  if (ui.hasDialogOpen.value && !showDialog.value) {
+    return;
+  }
+  e.originalEvent.preventDefault();
+  if (showDialog.value) {
+    onClose();
+  } else {
+    onOpen();
+  }
+});
 </script>
 
 <script>
@@ -52,19 +73,3 @@ export default {
   name: "Help"
 };
 </script>
-
-<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
-.bk.bk-help {
-  padding: 20px;
-  container-type: inline-size;
-}
-:is(.bk.bk-help .bk-help-section):not(:last-child) {
-  margin-bottom: 20px;
-}
-:is(.bk.bk-help .bk-help-section)  > h3 {
-  font-size: var(--text-lg, 18px);
-  line-height: var(--bk-tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
-  --bk-tw-font-weight: var(--font-weight-bold, 700);
-  font-weight: var(--font-weight-bold, 700);
-}
-</style>

package/dist/runtime/editor/features/history/List/index.vue

@@ -1,12 +1,9 @@
 <template>
-  <div class="bk bk-history bk-control" data-test="history-list">
+  <div class="bk bk-history bk-control">
     <ul v-if="mapped.length">
       <li
         v-for="item in mapped"
         :key="item.index"
-        data-test="history-item"
-        :data-test-history-index="item.index"
-        :data-test-history-active="item.index === currentMutationIndex"
         :class="{
   'bk-is-not-active': item.index > currentMutationIndex,
   'bk-is-active': item.index === currentMutationIndex,
@@ -17,7 +14,6 @@
         <button
           :disabled="!canEdit"
           class="bk-history-item-button"
-          data-test="history-item-button"
           @click="setHistoryIndex(item.index)"
         >
           <div>
@@ -55,8 +51,6 @@
       </li>
       <li
         class="bk-is-last"
-        data-test="history-current-revision"
-        :data-test-history-active="currentMutationIndex === -1"
         :class="[
   currentMutationIndex === -1 ? 'bk-is-active' : 'bk-is-applied',
   { 'bk-has-shadow': !scrolledToEnd }
@@ -64,7 +58,6 @@
       >
         <button
           class="bk-history-item-button"
-          data-test="history-item-button"
           @click="setHistoryIndex(-1)"
         >
           <div>
@@ -83,7 +76,7 @@
         </button>
       </li>
     </ul>
-    <div v-else class="bk-history-empty-message" data-test="history-empty">
+    <div v-else class="bk-history-empty-message">
       {{ $t("historyEmpty", "There are now changes yet.") }}
     </div>
   </div>

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

@@ -10,3 +10,4 @@ declare module '#blokkli/editor/adapter' {
         setMutationItemStatus?: (index: number, status: boolean) => Promise<MutationResponseLike<T>>;
     }
 }
+export {};

package/dist/runtime/editor/features/history/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+import type { BlokkliNotification } from '../types.js';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<BlokkliNotification, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlokkliNotification> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/notifications/Item/index.vue

@@ -0,0 +1,96 @@
+<template>
+  <li class="_bk_border-b _bk_border-b-mono-300">
+    <component
+      :is="href ? 'a' : 'div'"
+      :href="href || void 0"
+      :target="href ? '_blank' : void 0"
+      :rel="href ? 'noopener' : void 0"
+      class="bk-notification-item _bk_px-10 _bk_py-15 _bk_hover:border-mono-300 _bk_flex _bk_gap-8 _bk_group"
+      :class="{
+  '_bk_hover:bg-mono-100': href
+}"
+    >
+      <div
+        class="_bk_shrink-0 _bk_size-25 _bk_rounded-full _bk_flex _bk_items-center _bk_justify-center"
+        :class="{
+  '_bk_bg-mono-200 _bk_text-mono-500': read,
+  '_bk_text-yellow-dark! _bk_bg-yellow-normal': !read
+}"
+      >
+        <Icon :name="icon" class="_bk_size-15" />
+      </div>
+
+      <div class="_bk_min-w-0 _bk_flex-1">
+        <div class="_bk_text-sm _bk_text-mono-900 _bk_font-semibold _bk_leading-tight">
+          {{ title }}
+        </div>
+        <div class="_bk_text-xs _bk_text-mono-600 _bk_flex _bk_items-center _bk_gap-5 _bk_min-w-0 _bk_mt-3">
+          <div class="_bk_shrink-0 _bk_font-semibold">
+            <RelativeTime :timestamp="created" />
+          </div>
+          <template v-if="host">
+            <span class="_bk_truncate">{{ host.label }}</span>
+          </template>
+        </div>
+        <div v-if="message" class="_bk_text-sm _bk_mt-10">
+          {{ message }}
+        </div>
+      </div>
+    </component>
+  </li>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import { Icon, RelativeTime } from "#blokkli/editor/components";
+const props = defineProps({
+  uuid: { type: String, required: true },
+  read: { type: Boolean, required: true },
+  created: { type: String, required: true },
+  type: { type: null, required: true },
+  title: { type: String, required: true },
+  message: { type: String, required: false },
+  user: { type: [Object, null], required: false },
+  relatedEntityUuid: { type: String, required: false },
+  host: { type: [Object, null], required: true }
+});
+const ICONS = {
+  "comment:mention": "bk_mdi_alternate_email",
+  "comment:resolved": "bk_mdi_check_circle",
+  "comment:reply": "bk_mdi_chat",
+  "comment:thread": "bk_mdi_chat",
+  "edit-state:approved": "bk_mdi_verified",
+  generic: "bk_mdi_notifications"
+};
+const icon = computed(() => ICONS[props.type]);
+function extraQuery() {
+  if (!props.relatedEntityUuid) {
+    return {};
+  }
+  switch (props.type) {
+    case "comment:mention":
+    case "comment:reply":
+    case "comment:resolved":
+    case "comment:thread":
+      return { blokkliComment: props.relatedEntityUuid };
+  }
+  return {};
+}
+const href = computed(() => {
+  if (!props.host) {
+    return null;
+  }
+  const url = new URL(props.host.url, window.location.origin);
+  url.searchParams.set("blokkliEditing", props.host.uuid);
+  for (const [key, value] of Object.entries(extraQuery())) {
+    url.searchParams.set(key, value);
+  }
+  return url.origin === window.location.origin ? url.pathname + url.search + url.hash : url.toString();
+});
+</script>
+
+<script>
+export default {
+  name: "NotificationItem"
+};
+</script>

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

@@ -0,0 +1,4 @@
+import type { BlokkliNotification } from '../types.js';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<BlokkliNotification, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlokkliNotification> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/notifications/List/index.d.vue.ts

@@ -0,0 +1,11 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    unreadCount: number | null;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:unreadCount": (value: number | null) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    unreadCount: number | null;
+}> & Readonly<{
+    "onUpdate:unreadCount"?: ((value: number | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/notifications/List/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <ScrollBoundary
+    class="_bk_w-[400px] _bk_overflow-auto bk-scrollbar-light _bk_max-h-[600px]"
+  >
+    <TransitionHeight>
+      <div
+        v-if="unreadCount"
+        class="_bk_flex _bk_items-center _bk_justify-end _bk_px-15 _bk_py-10 _bk_border-b _bk_border-b-mono-300"
+      >
+        <button
+          class="bk-notifications-mark-all _bk_flex _bk_items-center _bk_gap-5 _bk_text-sm _bk_text-mono-700 _bk_hover:text-accent-700"
+          @click.stop="onMarkAllRead"
+        >
+          <Icon name="bk_mdi_done_all" class="_bk_size-15" />
+          <span>{{ $t("notificationsMarkAllRead", "Mark all as read") }}</span>
+        </button>
+      </div>
+    </TransitionHeight>
+
+    <ul v-if="notifications.length" class="_bk_select-text">
+      <NotificationItem
+        v-for="notification in notifications"
+        :key="notification.uuid"
+        v-bind="notification"
+      />
+    </ul>
+    <div
+      v-else
+      class="_bk_flex-1 _bk_flex _bk_items-center _bk_justify-center _bk_p-30 _bk_text-center _bk_text-sm _bk_text-mono-500"
+    >
+      {{ $t("notificationsEmpty", "No notifications.") }}
+    </div>
+
+    <div
+      v-if="hasMore"
+      class="_bk_sticky _bk_bottom-0 _bk_z-50 _bk_bg-linear-0 _bk_from-white _bk_to-white/0 _bk_via-65% _bk_via-white"
+    >
+      <button
+        class="_bk_w-full _bk_py-15 _bk_text-sm _bk_text-mono-700 _bk_hover:text-accent-700 _bk_disabled:opacity-40 _bk_disabled:cursor-default _bk_text-center _bk_font-semibold"
+        :disabled="isLoadingMore"
+        @click.stop="onLoadMore"
+      >
+        {{ $t("notificationsLoadMore", "Load more") }}
+      </button>
+    </div>
+  </ScrollBoundary>
+</template>
+
+<script setup>
+import { computed, ref, useBlokkli } from "#imports";
+import {
+  Icon,
+  ScrollBoundary,
+  TransitionHeight
+} from "#blokkli/editor/components";
+import { emitMessage } from "#blokkli/editor/events";
+import NotificationItem from "../Item/index.vue";
+const { $t, adapter } = useBlokkli();
+const unreadCount = defineModel("unreadCount", { type: [Number, null], ...{
+  required: true
+} });
+const notifications = ref([]);
+const nextCursor = ref(null);
+const isLoadingMore = ref(false);
+const hasMore = computed(() => nextCursor.value !== null);
+const reportError = (additional) => emitMessage(
+  $t("notificationsLoadError", "Failed to load notifications."),
+  "error",
+  additional
+);
+try {
+  const initial = await adapter.loadNotifications({ markAsRead: true });
+  notifications.value = initial.items;
+  nextCursor.value = initial.nextCursor;
+  unreadCount.value = initial.unreadCount;
+} catch (err) {
+  reportError(err);
+}
+const onLoadMore = async () => {
+  if (isLoadingMore.value || !hasMore.value) {
+    return;
+  }
+  isLoadingMore.value = true;
+  try {
+    const next = await adapter.loadNotifications({
+      after: nextCursor.value ?? void 0,
+      markAsRead: true
+    });
+    const seen = new Set(notifications.value.map((n) => n.uuid));
+    notifications.value = [
+      ...notifications.value,
+      ...next.items.filter((n) => !seen.has(n.uuid))
+    ];
+    nextCursor.value = next.nextCursor;
+    unreadCount.value = next.unreadCount;
+  } catch (err) {
+    reportError(err);
+  } finally {
+    isLoadingMore.value = false;
+  }
+};
+const onMarkAllRead = async () => {
+  try {
+    unreadCount.value = await adapter.markAllNotificationsAsRead();
+    notifications.value = notifications.value.map((n) => ({
+      ...n,
+      read: true
+    }));
+  } catch (err) {
+    emitMessage(
+      $t(
+        "notificationsMarkAllReadError",
+        "Failed to mark notifications as read."
+      ),
+      "error",
+      err
+    );
+  }
+};
+</script>
+
+<script>
+export default {
+  name: "NotificationsList"
+};
+</script>

package/dist/runtime/editor/features/notifications/List/index.vue.d.ts

@@ -0,0 +1,11 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    unreadCount: number | null;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:unreadCount": (value: number | null) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    unreadCount: number | null;
+}> & Readonly<{
+    "onUpdate:unreadCount"?: ((value: number | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/notifications/docs.md

@@ -0,0 +1,12 @@
+## Sidebar
+
+The sidebar pane lists the current user's notifications (mentions, resolved
+comments, edit state events). The toolbar tab shows a badge with the number of
+unread notifications.
+
+## Deep linking
+
+Each notification links to its host entity in edit mode. The feature builds the
+URL from the host entity URL plus `?blokkliEditing=<uuid>` and any type-specific
+query parameter (e.g. `blokkliComment=<uuid>` for comment notifications). Links
+open in a new tab.

package/dist/runtime/editor/features/notifications/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/notifications/index.vue

@@ -0,0 +1,123 @@
+<template>
+  <PluginToolbarButton
+    id="notifications"
+    ref="toolbarButton"
+    :title="$t('notifications', 'Notifications')"
+    :tour-text="
+  $t(
+    'notificationsTourText',
+    'Shows notifications about mentions, resolved comments and other events.'
+  )
+"
+    :active="isVisible"
+    :disabled="unreadCount === null"
+    :weight="-100"
+    region="before-sidebar"
+    icon="bk_mdi_notifications"
+    class="_bk_border-r _bk_border-r-mono-600 bk-has-dropdown-bottom"
+    @click="isVisible = !isVisible"
+  >
+    <template #after>
+      <BlokkliTransition name="context-menu">
+        <ToolbarDropdown
+          v-if="isVisible"
+          :toggle-element
+          class="_bk_origin-top-right"
+          :title="$t('notifications', 'Notifications')"
+          @close="isVisible = false"
+        >
+          <NotificationsList v-model:unread-count="unreadCount" />
+        </ToolbarDropdown>
+      </BlokkliTransition>
+    </template>
+    <template #icon-addon>
+      <div
+        v-if="unreadCount"
+        class="bk-sidebar-badge bk-is-yellow"
+      >
+        {{ unreadCount }}
+      </div>
+    </template>
+  </PluginToolbarButton>
+</template>
+
+<script setup>
+import {
+  ref,
+  computed,
+  useBlokkli,
+  defineBlokkliFeature,
+  useTemplateRef,
+  onMounted,
+  onUnmounted
+} from "#imports";
+import { PluginToolbarButton } from "#blokkli/editor/plugins";
+import { ToolbarDropdown, BlokkliTransition } from "#blokkli/editor/components";
+import NotificationsList from "./List/index.vue";
+const { adapter } = defineBlokkliFeature({
+  id: "notifications",
+  icon: "bk_mdi_notifications",
+  label: "Notifications",
+  requiredAdapterMethods: [
+    "loadNotifications",
+    "loadUnreadNotificationsCount",
+    "markAllNotificationsAsRead"
+  ],
+  description: "Shows notifications for the current user (mentions, resolved comments, edit state events)."
+});
+const { $t, ui } = useBlokkli();
+const ID = "notifications";
+const isVisible = computed({
+  get() {
+    return ui.openContextMenu.value === ID;
+  },
+  set(isOpen) {
+    if (isOpen) {
+      ui.openContextMenu.value = ID;
+    } else {
+      ui.openContextMenu.value = "";
+    }
+  }
+});
+const toolbarButton = useTemplateRef("toolbarButton");
+const toggleElement = computed(
+  () => toolbarButton.value?.el ?? null
+);
+const unreadCount = ref(null);
+const POLL_INTERVAL_MS = 6e4;
+let lastFetchAt = 0;
+const fetchUnreadCount = async () => {
+  try {
+    unreadCount.value = await adapter.loadUnreadNotificationsCount();
+    lastFetchAt = Date.now();
+  } catch {
+  }
+};
+const maybeRefresh = () => {
+  if (isVisible.value || document.hidden) {
+    return;
+  }
+  if (Date.now() - lastFetchAt < POLL_INTERVAL_MS) {
+    return;
+  }
+  fetchUnreadCount();
+};
+let pollInterval = null;
+onMounted(async () => {
+  await fetchUnreadCount();
+  pollInterval = setInterval(maybeRefresh, POLL_INTERVAL_MS);
+  document.addEventListener("visibilitychange", maybeRefresh);
+});
+onUnmounted(() => {
+  if (pollInterval) {
+    clearInterval(pollInterval);
+  }
+  document.removeEventListener("visibilitychange", maybeRefresh);
+});
+</script>
+
+<script>
+export default {
+  name: "Notifications"
+};
+</script>

package/dist/runtime/editor/features/notifications/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>;