<template>
  <UTextarea
    v-if="madeRaw"
    v-bind="forwardedTextarea"
    :ui="{
  root: 'w-full px-5',
  base: 'text-md text-default min-h-screen leading-7 py-0 px-3'
}"
    variant="none"
    placeholder="Введите текст..."
    autoresize
  />
  <UEditor
    v-else
    v-slot="{ editor, handlers }"
    v-bind="forwardedEditor"
    class="min-h-screen"
    content-type="markdown"
    autofocus
    :placeholder="{ placeholder: '\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442...', includeChildren: true }"
    :extensions="extensions"
    :handlers="customHandlers"
  >
    <UEditorDragHandle
      v-slot="{ ui, onClick }"
      :editor="editor"
      @node-change="onNodeChange"
    >
      <UButton
        :icon="appConfig.ui.icons.plus"
        color="neutral"
        variant="ghost"
        size="sm"
        :class="ui.handle()"
        @click="(e) => {
  e.stopPropagation();
  const node = onClick();
  handlers.suggestion?.execute(editor, { pos: node?.pos }).run();
}"
      />

      <UDropdownMenu
        v-slot="{ open }"
        :modal="false"
        :items="getDragHandleItems(editor)"
        :content="{ side: 'left' }"
        :ui="{ content: 'w-48', label: 'text-xs' }"
        @update:open="editor.chain().setMeta('lockDragHandle', $event).run()"
      >
        <UButton
          color="neutral"
          variant="ghost"
          active-variant="soft"
          size="sm"
          :icon="appConfig.ui.icons.drag"
          :active="open"
          :class="ui.handle()"
        />
      </UDropdownMenu>
    </UEditorDragHandle>

    <UEditorToolbar
      layout="bubble"
      :editor="editor"
      :items="bubbleToolbarItems"
      :should-show="({ view, state }) => {
  if (editor.isActive('uplora-image') || editor.isActive('uplora-image-gallery')) {
    return false;
  }
  const { selection } = state;
  return view.hasFocus() && !selection.empty;
}"
    >
      <template #link>
        <CEditorLinkPopover :editor="editor" />
      </template>
    </UEditorToolbar>

    <UEditorSuggestionMenu
      :editor="editor"
      :items="suggestionItems"
      :append-to-body="appendToBody"
    />
  </UEditor>
</template>

<script>
import { useAppConfig } from "#imports";
import { reactiveOmit, reactivePick } from "@vueuse/core";
import { useForwardPropsEmits } from "reka-ui";
import { computed } from "vue";
import { useEditorDragHandle } from "../composables/useEditorDragHandle";
import { useEditorSuggestions } from "../composables/useEditorSuggestions";
import { useEditorToolbar } from "../composables/useEditorToolbar";
import { Caution as CautionExtension, CautionHandlers } from "../editor/caution/EditorCaution";
import { Note as NoteExtension, NoteHandlers } from "../editor/note/EditorNote";
import { Tip as TipExtension, TipHandlers } from "../editor/tip/EditorTip";
import { UploraImageGallery as UploraImageGalleryExtension, UploraImageGalleryHandlers } from "../editor/uplora-image-gallery/EditorUploraImageGallery";
import { UploraImage as UploraImageExtension, UploraImageHandlers } from "../editor/uplora-image/EditorUploraImage";
import { Warning as WarningExtension, WarningHandlers } from "../editor/warning/EditorWarning";
import CEditorLinkPopover from "./EditorLinkPopover.vue";
</script>

<script setup>
const props = defineProps({
  customHandlers: { type: Object, required: false },
  madeRaw: { type: Boolean, required: false },
  as: { type: null, required: false },
  modelValue: { type: String, required: false },
  starterKit: { type: Object, required: false },
  markdown: { type: Object, required: false },
  image: { type: Object, required: false },
  mention: { type: Object, required: false },
  handlers: { type: null, required: false },
  class: { type: null, required: false },
  ui: { type: null, required: false },
  extensions: { type: Array, required: false },
  injectCSS: { type: Boolean, required: false },
  injectNonce: { type: null, required: false },
  editable: { type: Boolean, required: false },
  textDirection: { type: String, required: false },
  editorProps: { type: Object, required: false },
  parseOptions: { type: Object, required: false },
  coreExtensionOptions: { type: Object, required: false },
  enableInputRules: { type: [Array, Boolean], required: false },
  enablePasteRules: { type: [Array, Boolean], required: false },
  enableCoreExtensions: { type: [Boolean, Object], required: false },
  enableContentCheck: { type: Boolean, required: false },
  emitContentError: { type: Boolean, required: false },
  onBeforeCreate: { type: Function, required: false },
  onCreate: { type: Function, required: false },
  onMount: { type: Function, required: false },
  onUnmount: { type: Function, required: false },
  onContentError: { type: Function, required: false },
  onUpdate: { type: Function, required: false },
  onSelectionUpdate: { type: Function, required: false },
  onTransaction: { type: Function, required: false },
  onFocus: { type: Function, required: false },
  onBlur: { type: Function, required: false },
  onDestroy: { type: Function, required: false },
  onPaste: { type: Function, required: false },
  onDrop: { type: Function, required: false },
  onDelete: { type: Function, required: false }
});
const emit = defineEmits(["update:modelValue"]);
const forwardedEditor = useForwardPropsEmits(reactiveOmit(props, "extensions", "customHandlers", "handlers", "madeRaw"), emit);
const forwardedTextarea = useForwardPropsEmits(reactivePick(props, "modelValue"), emit);
const appConfig = useAppConfig();
const extensions = computed(() => [
  UploraImageExtension,
  UploraImageGalleryExtension,
  NoteExtension,
  TipExtension,
  WarningExtension,
  CautionExtension,
  ...props.extensions || []
]);
const customHandlers = computed(() => ({
  ...props.customHandlers || {},
  ...UploraImageHandlers,
  ...UploraImageGalleryHandlers,
  ...NoteHandlers,
  ...TipHandlers,
  ...WarningHandlers,
  ...CautionHandlers
}));
const appendToBody = false ? () => document.body : void 0;
const { items: suggestionItems } = useEditorSuggestions(customHandlers);
const { getItems: getDragHandleItems, onNodeChange } = useEditorDragHandle(props.customHandlers);
const { bubbleToolbarItems } = useEditorToolbar(props.customHandlers);
</script>
