clientsflow/frontend/components/ContactCollaborativeEditor.client.vue

<script setup lang="ts">
import { computed, onBeforeUnmount, ref, watch } from "vue";
import { EditorContent, useEditor } from "@tiptap/vue-3";
import StarterKit from "@tiptap/starter-kit";
import Collaboration from "@tiptap/extension-collaboration";
import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
import Placeholder from "@tiptap/extension-placeholder";
import * as Y from "yjs";
import { WebrtcProvider } from "y-webrtc";

const props = defineProps<{
  modelValue: string;
  room: string;
  placeholder?: string;
  plain?: boolean;
}>();

const emit = defineEmits<{
  (event: "update:modelValue", value: string): void;
}>();

const ydoc = new Y.Doc();
const provider = new WebrtcProvider(props.room, ydoc);
const isBootstrapped = ref(false);
const awarenessVersion = ref(0);

const userPalette = ["#2563eb", "#0ea5e9", "#14b8a6", "#16a34a", "#eab308", "#f97316", "#ef4444"];
const currentUser = {
  name: `You ${Math.floor(Math.random() * 900 + 100)}`,
  color: userPalette[Math.floor(Math.random() * userPalette.length)],
};

function escapeHtml(value: string) {
  return value
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#39;");
}

function normalizeInitialContent(value: string) {
  const input = value.trim();
  if (!input) return "<p></p>";
  if (input.includes("<") && input.includes(">")) return value;

  const blocks = value
    .replaceAll("\r\n", "\n")
    .split(/\n\n+/)
    .map((block) => `<p>${escapeHtml(block).replaceAll("\n", "<br />")}</p>`);

  return blocks.join("");
}

const editor = useEditor({
  extensions: [
    StarterKit.configure({
      history: false,
    }),
    Placeholder.configure({
      placeholder: props.placeholder ?? "Type here...",
      includeChildren: true,
    }),
    Collaboration.configure({
      document: ydoc,
      field: "contact",
    }),
    CollaborationCursor.configure({
      provider,
      user: currentUser,
    }),
  ],
  autofocus: true,
  editorProps: {
    attributes: {
      class: "contact-editor-content",
      spellcheck: "true",
    },
  },
  onCreate: ({ editor: instance }) => {
    if (instance.isEmpty) {
      instance.commands.setContent(normalizeInitialContent(props.modelValue), false);
    }
    isBootstrapped.value = true;
  },
  onUpdate: ({ editor: instance }) => {
    emit("update:modelValue", instance.getHTML());
  },
});

watch(
  () => props.modelValue,
  (incoming) => {
    const instance = editor.value;
    if (!instance || !isBootstrapped.value) return;

    const current = instance.getHTML();
    if (incoming === current || !incoming.trim()) return;

    if (instance.isEmpty) {
      instance.commands.setContent(normalizeInitialContent(incoming), false);
    }
  },
);

const peerCount = computed(() => {
  awarenessVersion.value;
  const states = Array.from(provider.awareness.getStates().values());
  return states.length;
});

const onAwarenessChange = () => {
  awarenessVersion.value += 1;
};

provider.awareness.on("change", onAwarenessChange);

function runCommand(action: () => void) {
  const instance = editor.value;
  if (!instance) return;
  action();
  instance.commands.focus();
}

onBeforeUnmount(() => {
  provider.awareness.off("change", onAwarenessChange);
  editor.value?.destroy();
  provider.destroy();
  ydoc.destroy();
});
</script>

<template>
  <div :class="props.plain ? 'space-y-2' : 'space-y-3'">
    <div :class="props.plain ? 'flex flex-wrap items-center justify-between gap-2 bg-transparent p-0' : 'flex flex-wrap items-center justify-between gap-2 rounded-xl border border-base-300 bg-base-100 p-2'">
      <div class="flex flex-wrap items-center gap-1">
        <button
          class="btn btn-xs"
          :class="editor?.isActive('bold') ? 'btn-primary' : 'btn-ghost'"
          @click="runCommand(() => editor?.chain().focus().toggleBold().run())"
        >
          B
        </button>
        <button
          class="btn btn-xs"
          :class="editor?.isActive('italic') ? 'btn-primary' : 'btn-ghost'"
          @click="runCommand(() => editor?.chain().focus().toggleItalic().run())"
        >
          I
        </button>
        <button
          class="btn btn-xs"
          :class="editor?.isActive('bulletList') ? 'btn-primary' : 'btn-ghost'"
          @click="runCommand(() => editor?.chain().focus().toggleBulletList().run())"
        >
          List
        </button>
        <button
          class="btn btn-xs"
          :class="editor?.isActive('heading', { level: 2 }) ? 'btn-primary' : 'btn-ghost'"
          @click="runCommand(() => editor?.chain().focus().toggleHeading({ level: 2 }).run())"
        >
          H2
        </button>
        <button
          class="btn btn-xs"
          :class="editor?.isActive('blockquote') ? 'btn-primary' : 'btn-ghost'"
          @click="runCommand(() => editor?.chain().focus().toggleBlockquote().run())"
        >
          Quote
        </button>
      </div>

      <p class="px-1 text-xs text-base-content/60">Live: {{ peerCount }}</p>
    </div>

    <div :class="props.plain ? 'bg-transparent p-0' : 'rounded-xl border border-base-300 bg-base-100 p-2'">
      <EditorContent :editor="editor" class="contact-editor min-h-[420px]" />
    </div>
  </div>
</template>

<style scoped>
.contact-editor :deep(.ProseMirror) {
  min-height: 390px;
  padding: 0.75rem;
  outline: none;
  line-height: 1.65;
  color: rgba(17, 24, 39, 0.95);
}

.contact-editor :deep(.ProseMirror p) {
  margin: 0.45rem 0;
}

.contact-editor :deep(.ProseMirror h1),
.contact-editor :deep(.ProseMirror h2),
.contact-editor :deep(.ProseMirror h3) {
  margin: 0.75rem 0 0.45rem;
  font-weight: 700;
  line-height: 1.3;
}

.contact-editor :deep(.ProseMirror ul),
.contact-editor :deep(.ProseMirror ol) {
  margin: 0.45rem 0;
  padding-left: 1.25rem;
}

.contact-editor :deep(.ProseMirror blockquote) {
  margin: 0.6rem 0;
  border-left: 3px solid rgba(30, 107, 255, 0.5);
  padding-left: 0.75rem;
  color: rgba(55, 65, 81, 0.95);
}

.contact-editor :deep(.ProseMirror .collaboration-cursor__caret) {
  margin-left: -1px;
  margin-right: -1px;
  border-left: 1px solid currentColor;
  border-right: 1px solid currentColor;
  pointer-events: none;
  position: relative;
}

.contact-editor :deep(.ProseMirror .collaboration-cursor__label) {
  position: absolute;
  top: -1.35em;
  left: -1px;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.2;
}
</style>