build: switch from yarn to npm to manage js dependencies and move js contents to root

yarn v1 is being deprecated and starts to have some issues

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

src/components/Editor/Autodir.ts

@@ -0,0 +1,30 @@
+import { Extension } from "@tiptap/core";
+
+/**
+ * Allows to set dir="auto" on top nodes
+ * Taken from https://github.com/ueberdosis/tiptap/issues/1621#issuecomment-918990408
+ */
+export const AutoDir = Extension.create({
+  name: "AutoDir",
+  addGlobalAttributes() {
+    return [
+      {
+        types: [
+          "heading",
+          "paragraph",
+          "bulletList",
+          "orderedList",
+          "blockquote",
+        ],
+        attributes: {
+          autoDir: {
+            renderHTML: () => ({
+              dir: "auto",
+            }),
+            parseHTML: (element) => element.dir || "auto",
+          },
+        },
+      },
+    ];
+  },
+});

src/components/Editor/Image.ts

@@ -0,0 +1,103 @@
+import { UPLOAD_MEDIA } from "@/graphql/upload";
+import { apolloClient } from "@/vue-apollo";
+import { Plugin } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import Image from "@tiptap/extension-image";
+import { provideApolloClient, useMutation } from "@vue/apollo-composable";
+
+/* eslint-disable class-methods-use-this */
+
+const CustomImage = Image.extend({
+  name: "image",
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+      },
+      alt: {
+        default: null,
+      },
+      title: {
+        default: null,
+      },
+      "data-media-id": {
+        default: null,
+      },
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        props: {
+          handleDOMEvents: {
+            drop(view: EditorView, event: Event) {
+              const realEvent = event as DragEvent;
+              if (
+                !(
+                  realEvent.dataTransfer &&
+                  realEvent.dataTransfer.files &&
+                  realEvent.dataTransfer.files.length
+                )
+              ) {
+                return false;
+              }
+
+              const images = Array.from(realEvent.dataTransfer.files).filter(
+                (file: any) =>
+                  /image/i.test(file.type) && !/svg/i.test(file.type)
+              );
+
+              if (images.length === 0) {
+                return false;
+              }
+
+              realEvent.preventDefault();
+
+              const { schema } = view.state;
+              const coordinates = view.posAtCoords({
+                left: realEvent.clientX,
+                top: realEvent.clientY,
+              });
+              if (!coordinates) return false;
+
+              images.forEach((image) => {
+                const { onDone, onError } = provideApolloClient(apolloClient)(
+                  () =>
+                    useMutation<{ uploadMedia: { url: string; id: string } }>(
+                      UPLOAD_MEDIA,
+                      () => ({
+                        variables: {
+                          file: image,
+                          name: image.name,
+                        },
+                      })
+                    )
+                );
+
+                onDone(({ data }) => {
+                  const node = schema.nodes.image.create({
+                    src: data?.uploadMedia.url,
+                    "data-media-id": data?.uploadMedia.id,
+                  });
+                  const transaction = view.state.tr.insert(
+                    coordinates.pos,
+                    node
+                  );
+                  view.dispatch(transaction);
+                });
+
+                onError((error) => {
+                  console.error(error);
+                  return false;
+                });
+              });
+              return true;
+            },
+          },
+        },
+      }),
+    ];
+  },
+});
+
+export default CustomImage;

src/components/Editor/Mention.ts

@@ -0,0 +1,112 @@
+import { SEARCH_PERSONS } from "@/graphql/search";
+import { VueRenderer } from "@tiptap/vue-3";
+import tippy from "tippy.js";
+import MentionList from "./MentionList.vue";
+import { apolloClient } from "@/vue-apollo";
+import { IPerson } from "@/types/actor";
+import pDebounce from "p-debounce";
+import { MentionOptions } from "@tiptap/extension-mention";
+import { Editor } from "@tiptap/core";
+import { provideApolloClient, useLazyQuery } from "@vue/apollo-composable";
+import { Paginate } from "@/types/paginate";
+
+const fetchItems = async (query: string): Promise<IPerson[]> => {
+  try {
+    if (query === "") return [];
+    const res = await provideApolloClient(apolloClient)(async () => {
+      const { load: loadSearchPersonsQuery } = useLazyQuery<
+        { searchPersons: Paginate<IPerson> },
+        { searchText: string }
+      >(SEARCH_PERSONS);
+
+      return await loadSearchPersonsQuery(SEARCH_PERSONS, {
+        searchText: query,
+      });
+    });
+    if (!res) return [];
+    return res.searchPersons.elements;
+  } catch (e) {
+    console.error(e);
+    return [];
+  }
+};
+
+const debouncedFetchItems = pDebounce(fetchItems, 200);
+
+const mentionOptions: MentionOptions = {
+  HTMLAttributes: {
+    class: "mention",
+    dir: "ltr",
+  },
+  renderLabel({ options, node }) {
+    return `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`;
+  },
+  suggestion: {
+    items: async ({
+      query,
+    }: {
+      query: string;
+      editor: Editor;
+    }): Promise<IPerson[]> => {
+      if (query === "") {
+        return [];
+      }
+      return await debouncedFetchItems(query);
+    },
+    render: () => {
+      let component: VueRenderer;
+      let popup: any;
+
+      return {
+        onStart: (props: Record<string, any>) => {
+          component = new VueRenderer(MentionList, {
+            props,
+            editor: props.editor,
+          });
+
+          if (!props.clientRect) {
+            return;
+          }
+
+          popup = tippy("body", {
+            getReferenceClientRect: props.clientRect,
+            appendTo: () => document.body,
+            content: component.element,
+            showOnCreate: true,
+            interactive: true,
+            trigger: "manual",
+            placement: "bottom-start",
+          });
+        },
+        onUpdate(props: any) {
+          component.updateProps(props);
+
+          popup[0].setProps({
+            getReferenceClientRect: props.clientRect,
+          });
+        },
+        onKeyDown(props: any) {
+          if (props.event.key === "Escape") {
+            popup[0].hide();
+
+            return true;
+          }
+
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          return component.ref?.onKeyDown(props);
+        },
+        onExit() {
+          if (popup && popup[0]) {
+            popup[0].destroy();
+          }
+          if (component) {
+            component.destroy();
+          }
+        },
+      };
+    },
+  },
+};
+
+export default mentionOptions;

src/components/Editor/MentionList.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="relative border overflow-hidden dark:border-transparent">
+    <button
+      class="block w-full text-start bg-white dark:bg-violet-1 border py-1 px-2 rounded dark:border-transparent"
+      :class="{ 'border-black dark:!border-white': index === selectedIndex }"
+      v-for="(item, index) in items"
+      :key="index"
+      @click="selectItem(index)"
+    >
+      <actor-inline :actor="item" />
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { usernameWithDomain } from "@/types/actor/actor.model";
+import { IPerson } from "@/types/actor";
+import ActorInline from "../../components/Account/ActorInline.vue";
+import { ref, watch } from "vue";
+
+const props = defineProps<{
+  items: IPerson[];
+  command: ({ id }: { id: string }) => any;
+}>();
+
+// @Prop({ type: Function, required: true }) command!: any;
+
+const selectedIndex = ref(0);
+
+watch(
+  () => props.items,
+  () => {
+    selectedIndex.value = 0;
+  }
+);
+
+const onKeyDown = ({ event }: { event: KeyboardEvent }): boolean => {
+  if (event.key === "ArrowUp") {
+    upHandler();
+    return true;
+  }
+
+  if (event.key === "ArrowDown") {
+    downHandler();
+    return true;
+  }
+
+  if (event.key === "Enter") {
+    enterHandler();
+    return true;
+  }
+
+  return false;
+};
+
+const upHandler = (): void => {
+  selectedIndex.value =
+    (selectedIndex.value + props.items.length - 1) % props.items.length;
+};
+
+const downHandler = (): void => {
+  selectedIndex.value = (selectedIndex.value + 1) % props.items.length;
+};
+
+const enterHandler = (): void => {
+  selectItem(selectedIndex.value);
+};
+
+const selectItem = (index: number): void => {
+  const item = props.items[index];
+
+  if (item) {
+    props.command({ id: usernameWithDomain(item) });
+  }
+};
+
+defineExpose({
+  onKeyDown,
+});
+</script>

src/components/Editor/RichEditorKeyboardSubmit.ts

@@ -0,0 +1,22 @@
+import { Extension } from "@tiptap/vue-3";
+
+export interface RichEditorKeyboardSubmitOptions {
+  submit: () => void;
+}
+
+export default Extension.create<RichEditorKeyboardSubmitOptions>({
+  name: "RichEditorKeyboardSubmit",
+  addOptions() {
+    return {
+      submit: () => ({}),
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Ctrl-Enter": () => {
+        this.options.submit();
+        return true;
+      },
+    };
+  },
+});

src/components/Editor/style.scss

@@ -0,0 +1,71 @@
+/**
+ * From https://www.tiptap.dev/api/editor/#inject-css
+ * https://github.com/ueberdosis/tiptap/blob/main/packages/core/src/style.ts
+ */
+
+.ProseMirror {
+  position: relative;
+}
+.ProseMirror {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  white-space: break-spaces;
+  -webkit-font-variant-ligatures: none;
+  font-variant-ligatures: none;
+  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
+
+  & [contenteditable="false"] {
+    white-space: normal;
+  }
+  & [contenteditable="false"] [contenteditable="true"] {
+    white-space: pre-wrap;
+  }
+  & pre {
+    white-space: pre-wrap;
+  }
+}
+img.ProseMirror-separator {
+  display: inline !important;
+  border: none !important;
+  margin: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+}
+.ProseMirror-gapcursor {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+  margin: 0;
+
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: -2px;
+    width: 20px;
+    border-top: 1px solid black;
+    animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+  }
+}
+@keyframes ProseMirror-cursor-blink {
+  to {
+    visibility: hidden;
+  }
+}
+.ProseMirror-hideselection {
+  *::selection {
+    background: transparent;
+  }
+  *::-moz-selection {
+    background: transparent;
+  }
+  * {
+    caret-color: transparent;
+  }
+}
+.ProseMirror-focused .ProseMirror-gapcursor {
+  display: block;
+}
+.tippy-box[data-animation="fade"][data-state="hidden"] {
+  opacity: 0;
+}