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

package/dist/runtime/editor/features/comments/Sidebar/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <div
+    ref="rootEl"
+    class="bk bk-control _bk_h-full _bk_overflow-auto bk-scrollbar-light _bk_flex _bk_flex-col _bk_bg-mono-100"
+  >
+    <div
+      class="_bk_flex _bk_items-center _bk_px-15 _bk_py-10 _bk_border-b _bk_border-b-mono-300 _bk_bg-white"
+    >
+      <FormToggle
+        v-model="showResolved"
+        :label="$t('commentsShowResolved', 'Show resolved')"
+        data-test="comments-show-resolved"
+      />
+    </div>
+
+    <div
+      v-if="visibleRoots.length"
+      class="_bk_select-text _bk_flex-1 _bk_p-10 _bk_flex _bk_flex-col _bk_gap-10"
+    >
+      <CommentThread
+        v-for="root in visibleRoots"
+        :key="root.uuid"
+        :root="root"
+        :replies="repliesByRoot.get(root.uuid) || []"
+        boxed
+        @reply="$emit('reply', $event)"
+        @edit="$emit('edit', $event)"
+        @delete="$emit('delete', $event)"
+        @resolve="$emit('resolve', root.uuid)"
+        @unresolve="$emit('unresolve', root.uuid)"
+        @toggle-task="$emit('toggleTask', $event)"
+      />
+    </div>
+    <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"
+    >
+      {{
+        roots.length ? $t(
+  "commentsAllResolved",
+  'All comments are resolved. Toggle "Show resolved" to view them.'
+) : $t("commentsEmpty", "No comments yet.")
+      }}
+    </div>
+
+    <SidebarAddForm @submit="$emit('add', $event)" @start="onStartNewComment" />
+  </div>
+</template>
+
+<script setup>
+import { computed, useBlokkli, useTemplateRef } from "#imports";
+import { FormToggle } from "#blokkli/editor/components";
+import CommentThread from "../Thread/index.vue";
+import SidebarAddForm from "./AddForm/index.vue";
+const { $t } = useBlokkli();
+const props = defineProps({
+  comments: { type: Array, required: true },
+  recentlyResolved: { type: Array, required: true }
+});
+defineEmits(["reply", "edit", "toggleTask", "add", "delete", "resolve", "unresolve"]);
+const rootEl = useTemplateRef("rootEl");
+const showResolved = defineModel("showResolved", { type: Boolean, ...{
+  default: false
+} });
+const byCreated = (a, b) => Date.parse(a.created) - Date.parse(b.created);
+const roots = computed(
+  () => [...props.comments].filter((c) => !c.parentUuid).sort(byCreated)
+);
+const repliesByRoot = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  for (const comment of props.comments) {
+    if (!comment.parentUuid) {
+      continue;
+    }
+    const list = map.get(comment.parentUuid) || [];
+    list.push(comment);
+    map.set(comment.parentUuid, list);
+  }
+  for (const list of map.values()) {
+    list.sort(byCreated);
+  }
+  return map;
+});
+const visibleRoots = computed(() => {
+  if (showResolved.value) {
+    return roots.value;
+  }
+  return roots.value.filter(
+    (r) => !r.resolved || props.recentlyResolved.includes(r.uuid)
+  );
+});
+let scrollTimeout = null;
+function onStartNewComment() {
+  if (scrollTimeout) {
+    window.clearTimeout(scrollTimeout);
+    scrollTimeout = null;
+  }
+  scrollTimeout = window.setTimeout(() => {
+    if (!rootEl.value) {
+      return;
+    }
+    rootEl.value.scrollTop = rootEl.value.scrollHeight;
+  }, 10);
+}
+</script>
+
+<script>
+export default {
+  name: "CommentSidebar"
+};
+</script>

package/dist/runtime/editor/features/comments/Sidebar/index.vue.d.ts

@@ -0,0 +1,50 @@
+import type { CommentItem } from '../types.js';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    comments: CommentItem[];
+    recentlyResolved: string[];
+} & {
+    showResolved?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    reply: (value: {
+        parentUuid: string;
+        body: string;
+    }) => void;
+    edit: (value: {
+        uuid: string;
+        body: string;
+    }) => void;
+    toggleTask: (value: {
+        uuid: string;
+        taskIndex: number;
+    }) => void;
+    add: (value: string) => void;
+    delete: (value: string) => void;
+    resolve: (value: string) => void;
+    unresolve: (value: string) => void;
+    "update:showResolved": (value: boolean) => void;
+}, string, import("vue").PublicProps, Readonly<{
+    comments: CommentItem[];
+    recentlyResolved: string[];
+} & {
+    showResolved?: boolean;
+}> & Readonly<{
+    onAdd?: ((value: string) => any) | undefined;
+    onDelete?: ((value: string) => any) | undefined;
+    onEdit?: ((value: {
+        uuid: string;
+        body: string;
+    }) => any) | undefined;
+    onResolve?: ((value: string) => any) | undefined;
+    onUnresolve?: ((value: string) => any) | undefined;
+    onToggleTask?: ((value: {
+        uuid: string;
+        taskIndex: number;
+    }) => any) | undefined;
+    onReply?: ((value: {
+        parentUuid: string;
+        body: string;
+    }) => any) | undefined;
+    "onUpdate:showResolved"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/comments/Thread/ReplyForm/index.d.vue.ts

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

package/dist/runtime/editor/features/comments/Thread/ReplyForm/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="_bk_grid _bk_grid-cols-1 _bk_grid-rows-1">
+    <div class="_bk_col-start-1 _bk_row-start-1">
+      <button
+        type="button"
+        class="_bk_flex _bk_items-center _bk_text-xs _bk_font-medium _bk_gap-5 _bk_py-8 _bk_px-8 _bk_w-full _bk_hover:bg-mono-100 _bk_text-mono-500 _bk_border _bk_border-mono-200 _bk_rounded _bk_hover:border-mono-400 _bk_cursor-text!"
+        data-test="comment-reply-button"
+        @click="open"
+      >
+        <Icon name="bk_mdi_reply" class="_bk_size-15" />
+        {{ $t("reply", "Reply") }}
+      </button>
+    </div>
+    <div v-if="isOpen" class="_bk_col-start-1 _bk_row-start-1 _bk_relative _bk_z-50">
+      <CommentInput
+        :id="`comment_reply_${rootUuid}`"
+        :initial-value="draft"
+        cancellable
+        :submit-label="$t('reply', 'Reply')"
+        boxed
+        @change="draft = $event"
+        @submit="onSubmit"
+        @cancel="onCancel"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, useBlokkli } from "#imports";
+import { Icon } from "#blokkli/editor/components";
+import CommentInput from "../../CommentInput/index.vue";
+const { $t, storage } = useBlokkli();
+const props = defineProps({
+  rootUuid: { type: String, required: true }
+});
+const emit = defineEmits(["submit"]);
+const draft = storage.useWithContextPrefix("commentReply_" + props.rootUuid, "");
+const isOpen = ref(draft.value.trim().length > 0);
+function open() {
+  isOpen.value = true;
+}
+function onCancel() {
+  draft.value = "";
+  isOpen.value = false;
+}
+function onSubmit(value) {
+  emit("submit", value);
+  draft.value = "";
+  isOpen.value = false;
+}
+</script>
+
+<script>
+export default {
+  name: "CommentReplyForm"
+};
+</script>

package/dist/runtime/editor/features/comments/Thread/ReplyForm/index.vue.d.ts

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

package/dist/runtime/editor/features/comments/Thread/index.d.vue.ts

@@ -0,0 +1,44 @@
+import type { CommentItem } from '../types.js';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    root: CommentItem;
+    replies: CommentItem[];
+    boxed?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    reply: (value: {
+        parentUuid: string;
+        body: string;
+    }) => void;
+    edit: (value: {
+        uuid: string;
+        body: string;
+    }) => void;
+    toggleTask: (value: {
+        uuid: string;
+        taskIndex: number;
+    }) => void;
+    delete: (uuid: string) => void;
+    resolve: () => void;
+    unresolve: () => void;
+}, string, import("vue").PublicProps, Readonly<{
+    root: CommentItem;
+    replies: CommentItem[];
+    boxed?: boolean;
+}> & Readonly<{
+    onDelete?: ((uuid: string) => any) | undefined;
+    onEdit?: ((value: {
+        uuid: string;
+        body: string;
+    }) => any) | undefined;
+    onResolve?: (() => any) | undefined;
+    onUnresolve?: (() => any) | undefined;
+    onToggleTask?: ((value: {
+        uuid: string;
+        taskIndex: number;
+    }) => any) | undefined;
+    onReply?: ((value: {
+        parentUuid: string;
+        body: string;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/comments/Thread/index.vue

@@ -0,0 +1,142 @@
+<template>
+  <article
+    class="bk-comment-thread _bk_relative _bk_font-sans"
+    data-test="comment-thread"
+    :data-test-uuid="root.uuid"
+    :data-test-resolved="root.resolved"
+    :class="{
+  '_bk_rounded _bk_border _bk_hover:border-mono-400': boxed,
+  '_bk_bg-white': !boxed,
+  '_bk_shadow-sm _bk_hover:shadow _bk_bg-white _bk_border-mono-300': boxed && !root.resolved,
+  '_bk_bg-mono-100 _bk_border-mono-200': boxed && root.resolved
+}"
+  >
+    <div
+      :class="{
+  '_bk_opacity-60 _bk_hover:opacity-100': root.resolved
+}"
+    >
+      <Comment
+        :comment="root"
+        :is-reply="false"
+        class="_bk_pb-10!"
+        @select-blocks="onSelectBlocks"
+        @edit="$emit('edit', { uuid: root.uuid, body: $event })"
+        @delete="$emit('delete', root.uuid)"
+        @resolve="$emit('resolve')"
+        @unresolve="$emit('unresolve')"
+        @toggle-task="
+  $emit('toggleTask', { uuid: root.uuid, taskIndex: $event })
+"
+      />
+      <div
+        v-if="replies.length"
+        class="_bk_absolute _bk_top-(--bk-comment-line-top) _bk_left-(--bk-comment-line-x) _bk_bottom-(--bk-comment-line-bottom) _bk_w-(--bk-comment-line-width) _bk_rounded-full _bk_bg-mono-200 _bk_pointer-events-none"
+      />
+      <div
+        v-if="replies.length || canReply"
+        class="_bk_ml-(--bk-comment-avatar-center) _bk_pl-(--bk-comment-reply-pl)"
+      >
+        <Comment
+          v-for="reply in replies"
+          :key="reply.uuid"
+          :comment="reply"
+          is-reply
+          @edit="$emit('edit', { uuid: reply.uuid, body: $event })"
+          @delete="$emit('delete', reply.uuid)"
+          @toggle-task="
+  $emit('toggleTask', { uuid: reply.uuid, taskIndex: $event })
+"
+        />
+        <div
+          v-if="canReply"
+          class="_bk_px-(--bk-comment-pad-x) _bk_pb-(--bk-comment-pad-y)"
+        >
+          <CommentReplyForm
+            :root-uuid="root.uuid"
+            @submit="$emit('reply', { parentUuid: root.uuid, body: $event })"
+          />
+        </div>
+      </div>
+    </div>
+  </article>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import Comment from "../Comment/index.vue";
+import CommentReplyForm from "./ReplyForm/index.vue";
+const { adapter, eventBus } = useBlokkli();
+const props = defineProps({
+  root: { type: Object, required: true },
+  replies: { type: Array, required: true },
+  boxed: { type: Boolean, required: false }
+});
+defineEmits(["reply", "edit", "toggleTask", "delete", "resolve", "unresolve"]);
+const canReply = computed(() => !!adapter.replyToComment);
+function onSelectBlocks() {
+  if (props.root.blockUuids?.length) {
+    const uuid = props.root.blockUuids[0];
+    eventBus.emit("scrollIntoView", { uuid });
+    eventBus.emit("select", props.root.blockUuids);
+  }
+}
+</script>
+
+<script>
+export default {
+  name: "CommentThread"
+};
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk-comment-thread {
+  --bk-comment-pad-x: 8px;
+  --bk-comment-pad-y: 10px;
+  --bk-comment-reply-pad-y: 5px;
+  --bk-avatar-size: 15px;
+  --bk-comment-avatar-gap: 5px;
+  --bk-comment-line-width: 2px;
+  --bk-comment-line-gap: 4px;
+  --bk-comment-line-bottom: var(--bk-comment-pad-y);
+  --bk-comment-avatar-center: calc(
+    var(--bk-comment-pad-x) + var(--bk-avatar-size) / 2
+  );
+  --bk-comment-content-x: calc(
+    var(--bk-comment-pad-x) + var(--bk-avatar-size) +
+      var(--bk-comment-avatar-gap)
+  );
+  --bk-comment-reply-pl: calc(
+    var(--bk-comment-content-x) - var(--bk-comment-avatar-center) -
+      var(--bk-comment-pad-x)
+  );
+  --bk-comment-line-top: calc(
+    var(--bk-comment-pad-y) + var(--bk-avatar-size) + var(--bk-comment-line-gap)
+  );
+  --bk-comment-line-x: calc(
+    var(--bk-comment-avatar-center) - var(--bk-comment-line-width) / 2
+  );
+}
+@media (width >= 96rem) {
+  .bk-comment-thread {
+    --bk-avatar-size: 25px;
+    --bk-comment-avatar-gap: 8px;
+    --bk-comment-pad-x: 10px;
+  }
+}
+@media (width >= 1920px) {
+  .bk-comment-thread {
+    --bk-avatar-size: 30px;
+    --bk-comment-avatar-gap: 10px;
+    --bk-comment-reply-pad-y: 10px;
+    --bk-comment-pad-y: 10px;
+  }
+}
+@media (width >= 2440px) {
+  .bk-comment-thread {
+    --bk-avatar-size: 35px;
+    --bk-comment-pad-y: 15px;
+    --bk-comment-pad-x: 15px;
+  }
+}
+</style>

package/dist/runtime/editor/features/comments/Thread/index.vue.d.ts

@@ -0,0 +1,44 @@
+import type { CommentItem } from '../types.js';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    root: CommentItem;
+    replies: CommentItem[];
+    boxed?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    reply: (value: {
+        parentUuid: string;
+        body: string;
+    }) => void;
+    edit: (value: {
+        uuid: string;
+        body: string;
+    }) => void;
+    toggleTask: (value: {
+        uuid: string;
+        taskIndex: number;
+    }) => void;
+    delete: (uuid: string) => void;
+    resolve: () => void;
+    unresolve: () => void;
+}, string, import("vue").PublicProps, Readonly<{
+    root: CommentItem;
+    replies: CommentItem[];
+    boxed?: boolean;
+}> & Readonly<{
+    onDelete?: ((uuid: string) => any) | undefined;
+    onEdit?: ((value: {
+        uuid: string;
+        body: string;
+    }) => any) | undefined;
+    onResolve?: (() => any) | undefined;
+    onUnresolve?: (() => any) | undefined;
+    onToggleTask?: ((value: {
+        uuid: string;
+        taskIndex: number;
+    }) => any) | undefined;
+    onReply?: ((value: {
+        parentUuid: string;
+        body: string;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;