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

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

@@ -0,0 +1,27 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    uuid: string;
+    isReply: boolean;
+    canEdit: boolean;
+    canDelete: boolean;
+    canResolve: boolean;
+    canUnresolve: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: () => void;
+    edit: () => void;
+    resolve: () => void;
+    unresolve: () => void;
+}, string, import("vue").PublicProps, Readonly<{
+    uuid: string;
+    isReply: boolean;
+    canEdit: boolean;
+    canDelete: boolean;
+    canResolve: boolean;
+    canUnresolve: boolean;
+}> & Readonly<{
+    onDelete?: (() => any) | undefined;
+    onEdit?: (() => any) | undefined;
+    onResolve?: (() => any) | undefined;
+    onUnresolve?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/comments/Comment/Actions/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <InlineActions>
+    <InlineActionsButton
+      v-if="canEdit"
+      icon="bk_mdi_edit"
+      :label="$t('edit', 'Edit')"
+      data-test="comment-action-edit"
+      @click="$emit('edit')"
+    />
+    <InlineActionsButton
+      v-if="canDelete"
+      icon="bk_mdi_delete"
+      :label="$t('delete', 'Delete')"
+      scheme="red"
+      data-test="comment-action-delete"
+      @click="onDeleteClick"
+    />
+    <InlineActionsButton
+      v-if="canResolve"
+      icon="bk_mdi_check_circle"
+      scheme="lime"
+      :label="$t('commentsMarkAsResolved', 'Mark as resolved')"
+      data-test="comment-action-resolve"
+      @click="$emit('resolve')"
+    />
+    <InlineActionsButton
+      v-if="canUnresolve"
+      icon="bk_mdi_unpublished"
+      scheme="lime"
+      :label="$t('commentsMarkAsUnresolved', 'Mark as unresolved')"
+      data-test="comment-action-unresolve"
+      @click="$emit('unresolve')"
+    />
+
+    <Teleport :to="ui.mainLayoutElement.value">
+      <BlokkliTransition name="slide-up">
+        <DialogModal
+          v-if="showConfirm"
+          :id="dialogId"
+          :title="
+  isReply ? $t('commentDeleteReplyConfirmTitle', 'Delete reply?') : $t('commentDeleteConfirmTitle', 'Delete comment?')
+"
+          :lead="
+  isReply ? $t(
+    'commentDeleteReplyConfirmText',
+    'The reply will be permanently deleted. This action cannot be undone.'
+  ) : $t(
+    'commentDeleteConfirmText',
+    'The comment and all its replies will be permanently deleted. This action cannot be undone.'
+  )
+"
+          :submit-label="$t('delete', 'Delete')"
+          is-danger
+          @submit="onConfirmDelete"
+          @cancel="showConfirm = false"
+        />
+      </BlokkliTransition>
+    </Teleport>
+  </InlineActions>
+</template>
+
+<script setup>
+import { useBlokkli } from "#imports";
+import { BlokkliTransition, DialogModal } from "#blokkli/editor/components";
+import { useDialog } from "#blokkli/editor/composables";
+import InlineActions from "#blokkli/editor/components/InlineActions/index.vue";
+import InlineActionsButton from "#blokkli/editor/components/InlineActions/Button/index.vue";
+const { $t, ui } = useBlokkli();
+const props = defineProps({
+  uuid: { type: String, required: true },
+  isReply: { type: Boolean, required: true },
+  canEdit: { type: Boolean, required: true },
+  canDelete: { type: Boolean, required: true },
+  canResolve: { type: Boolean, required: true },
+  canUnresolve: { type: Boolean, required: true }
+});
+const emit = defineEmits(["edit", "delete", "resolve", "unresolve"]);
+const dialogId = "comment-delete-" + props.uuid;
+const showConfirm = useDialog(dialogId, "center");
+function onDeleteClick() {
+  showConfirm.value = true;
+}
+function onConfirmDelete() {
+  showConfirm.value = false;
+  emit("delete");
+}
+</script>
+
+<script>
+export default {
+  name: "CommentActions"
+};
+</script>

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

@@ -0,0 +1,27 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    uuid: string;
+    isReply: boolean;
+    canEdit: boolean;
+    canDelete: boolean;
+    canResolve: boolean;
+    canUnresolve: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: () => void;
+    edit: () => void;
+    resolve: () => void;
+    unresolve: () => void;
+}, string, import("vue").PublicProps, Readonly<{
+    uuid: string;
+    isReply: boolean;
+    canEdit: boolean;
+    canDelete: boolean;
+    canResolve: boolean;
+    canUnresolve: boolean;
+}> & Readonly<{
+    onDelete?: (() => any) | undefined;
+    onEdit?: (() => any) | undefined;
+    onResolve?: (() => any) | undefined;
+    onUnresolve?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

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

package/dist/runtime/editor/features/comments/Comment/EditForm/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <CommentInput
+    :id="`comment_edit_${uuid}`"
+    :initial-value="body"
+    cancellable
+    :submit-label="$t('save', 'Save')"
+    :can-submit="hasChange"
+    boxed
+    @change="onChange"
+    @submit="$emit('submit', $event)"
+    @cancel="$emit('cancel')"
+  />
+</template>
+
+<script setup>
+import { computed, ref, useBlokkli } from "#imports";
+import CommentInput from "../../CommentInput/index.vue";
+const { $t } = useBlokkli();
+const props = defineProps({
+  uuid: { type: String, required: true },
+  body: { type: String, required: true }
+});
+defineEmits(["submit", "cancel"]);
+const current = ref(props.body);
+function onChange(html) {
+  current.value = html;
+}
+const hasChange = computed(() => {
+  const stripped = current.value.replace(/<[^>]*>/g, "").replace(/\s+/g, "");
+  return stripped.length > 0 && current.value !== props.body;
+});
+</script>
+
+<script>
+export default {
+  name: "CommentEditForm"
+};
+</script>

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

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

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

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

package/dist/runtime/editor/features/comments/Comment/Meta/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="_bk_flex _bk_items-baseline _bk_gap-3 _bk_flex-wrap _bk_min-w-0 _bk_text-sm _bk_-mt-2">
+    <span class="_bk_font-semibold _bk_text-mono-900 _bk_truncate">
+      {{ user?.name || $t("userDeleted", "[deleted]") }}
+    </span>
+    <RelativeTime v-slot="{ formatted }" :timestamp="created">
+      <span class="_bk_text-xs _bk_text-mono-500">{{ formatted }}</span>
+    </RelativeTime>
+    <span v-if="updated" class="_bk_text-mono-500 _bk_italic _bk_text-xs">
+      ({{ $t("commentEdited", "edited") }})
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { useBlokkli } from "#imports";
+import { RelativeTime } from "#blokkli/editor/components";
+const { $t } = useBlokkli();
+defineProps({
+  user: { type: [Object, null], required: true },
+  created: { type: String, required: true },
+  updated: { type: String, required: false }
+});
+</script>
+
+<script>
+export default {
+  name: "CommentMeta"
+};
+</script>

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

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

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

@@ -2,23 +2,25 @@ import type { CommentItem } from '../types.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
-    uuid?: string | number;
-    blockUuids?: string[];
-    resolved?: boolean;
-    body?: string;
-    created?: CommentItem["created"];
-    user?: CommentItem["user"];
+    comment: CommentItem;
+    isReply: boolean;
+    hideBlocksPill?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    edit: (body: string) => void;
+    toggleTask: (taskIndex: number) => void;
+    delete: () => void;
     resolve: () => void;
-    clickComment: () => void;
+    unresolve: () => void;
+    selectBlocks: () => void;
 }, string, import("vue").PublicProps, Readonly<{
-    uuid?: string | number;
-    blockUuids?: string[];
-    resolved?: boolean;
-    body?: string;
-    created?: CommentItem["created"];
-    user?: CommentItem["user"];
+    comment: CommentItem;
+    isReply: boolean;
+    hideBlocksPill?: boolean;
 }> & Readonly<{
+    onDelete?: (() => any) | undefined;
+    onEdit?: ((body: string) => any) | undefined;
     onResolve?: (() => any) | undefined;
-    onClickComment?: (() => any) | undefined;
+    onUnresolve?: (() => any) | undefined;
+    onToggleTask?: ((taskIndex: number) => any) | undefined;
+    onSelectBlocks?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,41 +1,125 @@
 <template>
-  <div class="bk bk-comment" @click="$emit('clickComment')">
-    <h3>
-      {{ user?.label }}
-    </h3>
-    <RelativeTime v-slot="{ formatted }" :timestamp="timestamp">
-      <div class="bk-comment-date">
-        {{ formatted }}
+  <div
+    v-if="isEditing"
+    class="_bk_px-(--bk-comment-pad-x) _bk_font-sans _bk_relative _bk_z-50"
+    :class="
+  isReply ? '_bk_py-(--bk-comment-reply-pad-y)' : '_bk_py-(--bk-comment-pad-y)'
+"
+    @click.stop
+  >
+    <CommentEditForm
+      :uuid="comment.uuid"
+      :body="comment.body"
+      @submit="onSubmitEdit"
+      @cancel="isEditing = false"
+    />
+  </div>
+  <div
+    v-else
+    class="_bk_group/comment _bk_relative _bk_flex _bk_gap-(--bk-comment-avatar-gap) _bk_px-(--bk-comment-pad-x) _bk_font-sans"
+    data-test="comment"
+    :data-test-uuid="comment.uuid"
+    :class="
+  isReply ? '_bk_py-(--bk-comment-reply-pad-y)' : '_bk_py-(--bk-comment-pad-y)'
+"
+  >
+    <Avatar
+      :deleted="!comment.user"
+      :name="comment.user?.name || $t('userDeleted', '[deleted]')"
+      :seed="comment.user?.id"
+      :image-url="comment.user?.imageUrl"
+    />
+    <div class="_bk_flex-1 _bk_min-w-0">
+      <div class="_bk_flex _bk_items-center _bk_gap-5 _bk_flex-wrap">
+        <CommentMeta
+          :user="comment.user"
+          :created="comment.created"
+          :updated="comment.updated"
+        />
+        <Pill
+          v-if="comment.resolved && !isReply"
+          scheme="lime"
+          icon="bk_mdi_check"
+          :text="$t('commentResolvedLabel', 'Resolved')"
+        />
+        <Pill
+          v-if="!isReply && !hideBlocksPill && comment.blockUuids?.length"
+          tag="button"
+          type="button"
+          scheme="accent"
+          variant="light"
+          icon="bk_mdi_widgets"
+          :text="blocksLabel"
+          @click.stop="$emit('selectBlocks')"
+        />
       </div>
-    </RelativeTime>
-    <div class="bk-comment-body" v-html="body" />
-    <button
-      v-if="!resolved && resolveImplemeted"
-      @click.capture.stop="$emit('resolve')"
+      <RichTextRenderer
+        :body="comment.body"
+        :task-togglable="canToggleTasks"
+        class="_bk_mt-2"
+        @toggle-task="$emit('toggleTask', $event)"
+      />
+    </div>
+
+    <div
+      v-if="canEdit || canDelete || canResolve || canUnresolve"
+      class="_bk_absolute _bk_top-8 _bk_right-10 _bk_opacity-0 _bk_group-hover/comment:opacity-100 _bk_focus-within:opacity-100"
     >
-      <Icon name="bk_mdi_check" />
-      <span>{{ $t("commentsMarkAsResolved", "Resolve") }}</span>
-    </button>
+      <CommentActions
+        :uuid="comment.uuid"
+        :is-reply="isReply"
+        :can-edit="canEdit"
+        :can-delete="canDelete"
+        :can-resolve="canResolve"
+        :can-unresolve="canUnresolve"
+        @edit="onStartEdit"
+        @delete="$emit('delete')"
+        @resolve="$emit('resolve')"
+        @unresolve="$emit('unresolve')"
+      />
+    </div>
   </div>
 </template>
 
 <script setup>
-import { computed, useBlokkli } from "#imports";
-import { Icon, RelativeTime } from "#blokkli/editor/components";
-const { adapter, $t } = useBlokkli();
-const resolveImplemeted = computed(() => !!adapter.resolveComment);
-defineEmits(["resolve", "clickComment"]);
+import { computed, ref, useBlokkli } from "#imports";
+import { Avatar, Pill } from "#blokkli/editor/components";
+import CommentMeta from "./Meta/index.vue";
+import CommentActions from "./Actions/index.vue";
+import CommentEditForm from "./EditForm/index.vue";
+import RichTextRenderer from "#blokkli/editor/components/RichText/Renderer/index.vue";
+const { $t, adapter, user } = useBlokkli();
 const props = defineProps({
-  uuid: { type: [String, Number], required: false },
-  blockUuids: { type: Array, required: false },
-  resolved: { type: Boolean, required: false },
-  body: { type: String, required: false },
-  created: { type: [String, Number], required: false },
-  user: { type: Object, required: false }
+  comment: { type: Object, required: true },
+  isReply: { type: Boolean, required: true },
+  hideBlocksPill: { type: Boolean, required: false }
+});
+const emit = defineEmits(["edit", "toggleTask", "delete", "resolve", "unresolve", "selectBlocks"]);
+const isEditing = ref(false);
+const blocksLabel = computed(() => {
+  const count = props.comment.blockUuids?.length || 0;
+  const template = count === 1 ? $t("commentBlocksCountOne", "1 block") : $t("blocksCount", "@count blocks");
+  return template.replace("@count", count.toString());
 });
-const timestamp = computed(
-  () => props.created ? Number.parseInt(props.created.toString()) : 0
+const isOwn = computed(
+  () => props.comment.user ? user.isCurrent(props.comment.user.id) : false
+);
+const canEdit = computed(() => isOwn.value && !!adapter.editComment);
+const canDelete = computed(() => isOwn.value && !!adapter.deleteComment);
+const canResolve = computed(
+  () => !props.isReply && !props.comment.resolved && !!adapter.resolveComment
+);
+const canUnresolve = computed(
+  () => !props.isReply && props.comment.resolved && !!adapter.unresolveComment
 );
+const canToggleTasks = computed(() => !!adapter.toggleCommentTask);
+function onStartEdit() {
+  isEditing.value = true;
+}
+function onSubmitEdit(body) {
+  emit("edit", body);
+  isEditing.value = false;
+}
 </script>
 
 <script>

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

@@ -2,23 +2,25 @@ import type { CommentItem } from '../types.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
-    uuid?: string | number;
-    blockUuids?: string[];
-    resolved?: boolean;
-    body?: string;
-    created?: CommentItem["created"];
-    user?: CommentItem["user"];
+    comment: CommentItem;
+    isReply: boolean;
+    hideBlocksPill?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    edit: (body: string) => void;
+    toggleTask: (taskIndex: number) => void;
+    delete: () => void;
     resolve: () => void;
-    clickComment: () => void;
+    unresolve: () => void;
+    selectBlocks: () => void;
 }, string, import("vue").PublicProps, Readonly<{
-    uuid?: string | number;
-    blockUuids?: string[];
-    resolved?: boolean;
-    body?: string;
-    created?: CommentItem["created"];
-    user?: CommentItem["user"];
+    comment: CommentItem;
+    isReply: boolean;
+    hideBlocksPill?: boolean;
 }> & Readonly<{
+    onDelete?: (() => any) | undefined;
+    onEdit?: ((body: string) => any) | undefined;
     onResolve?: (() => any) | undefined;
-    onClickComment?: (() => any) | undefined;
+    onUnresolve?: (() => any) | undefined;
+    onToggleTask?: ((taskIndex: number) => any) | undefined;
+    onSelectBlocks?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,15 +1,30 @@
 type __VLS_Props = {
     id: string;
-    placeholder?: string;
+    initialValue?: string;
+    autofocus?: boolean;
+    submitLabel: string;
+    cancellable?: boolean;
+    /**
+     * When provided, replaces the default "non-empty" check for enabling the
+     * submit button. Used by edit-mode where submit should also require a
+     * change relative to the original body.
+     */
+    canSubmit?: boolean;
+    boxed?: boolean;
 };
-type __VLS_ModelProps = {
-    modelValue?: string;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: string) => void;
+    submit: (value: string) => void;
+    cancel: () => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
+    onSubmit?: ((value: string) => any) | undefined;
+}>, {
+    canSubmit: boolean;
+    initialValue: string;
+    autofocus: boolean;
+    cancellable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,29 +1,87 @@
 <template>
-  <div class="bk-comment-textarea">
-    <textarea
-      id="comment_body"
-      ref="textarea"
-      v-model="value"
-      type="text"
-      class="bk-form-input"
-      rows="4"
-      :placeholder
-      required
+  <form
+    data-test="comment-input"
+    :class="{
+  '_bk_border _bk_border-mono-300 _bk_rounded _bk_bg-white _bk_focus-within:border-mono-400': boxed
+}"
+    @submit.prevent="onSubmit"
+    @keydown.stop
+  >
+    <RichTextEditor
+      ref="richTextRef"
+      :initial-value="initialValue"
+      :autofocus="autofocus"
+      :get-users="canMention ? getUsers : void 0"
+      no-border
+      @change="onChange"
     />
-  </div>
+    <div
+      class="_bk_flex _bk_items-center _bk_gap-5 _bk_p-5 _bk_border-t _bk_border-t-mono-300 _bk_border-dashed"
+    >
+      <button
+        v-if="cancellable"
+        type="button"
+        class="bk-button bk-is-small bk-is-light"
+        data-test="comment-input-cancel"
+        @click="$emit('cancel')"
+      >
+        {{ $t("cancel", "Cancel") }}
+      </button>
+      <button
+        type="submit"
+        class="bk-button bk-scheme-yellow bk-is-small _bk_ml-auto"
+        data-test="comment-input-submit"
+        :disabled="!effectiveCanSubmit"
+      >
+        {{ submitLabel }}
+      </button>
+    </div>
+  </form>
 </template>
 
 <script setup>
-import { onMounted, useTemplateRef } from "#imports";
-defineProps({
+import {
+  computed,
+  defineAsyncComponent,
+  ref,
+  useBlokkli,
+  useTemplateRef
+} from "#imports";
+const RichTextEditor = defineAsyncComponent(
+  () => import("#blokkli/editor/components/RichText/Editor/index.vue")
+);
+const props = defineProps({
   id: { type: String, required: true },
-  placeholder: { type: String, required: false }
+  initialValue: { type: String, required: false, default: "" },
+  autofocus: { type: Boolean, required: false, default: true },
+  submitLabel: { type: String, required: true },
+  cancellable: { type: Boolean, required: false, default: false },
+  canSubmit: { type: Boolean, required: false, default: void 0 },
+  boxed: { type: Boolean, required: false }
 });
-const value = defineModel({ type: String });
-const el = useTemplateRef("textarea");
-onMounted(() => {
-  if (el.value) {
-    el.value.focus();
+const emit = defineEmits(["submit", "change", "cancel"]);
+const { $t, user, permissions } = useBlokkli();
+const canMention = permissions.hasPermission("list_users");
+function getUsers() {
+  return user.loadUsers().then((users) => users.map((u) => ({ id: u.id, label: u.name })));
+}
+const richTextRef = useTemplateRef("richTextRef");
+const isEmpty = ref(!props.initialValue || !props.initialValue.trim());
+const effectiveCanSubmit = computed(() => {
+  if (props.canSubmit !== void 0) {
+    return props.canSubmit;
   }
+  return !isEmpty.value;
 });
+function onChange(payload) {
+  isEmpty.value = payload.isEmpty;
+  emit("change", payload.html);
+}
+function onSubmit() {
+  if (!effectiveCanSubmit.value) {
+    return;
+  }
+  const html = richTextRef.value?.getHTML() ?? "";
+  emit("submit", html);
+}
 </script>