Clean up editor code and reorganize contents (#478)

lib/editor/config.ts

@@ -0,0 +1,47 @@
+import { textblockTypeInputRule } from 'prosemirror-inputrules';
+import { Schema } from 'prosemirror-model';
+import { schema } from 'prosemirror-schema-basic';
+import { addListNodes } from 'prosemirror-schema-list';
+import { Transaction } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { MutableRefObject } from 'react';
+
+import { buildContentFromDocument } from './functions';
+
+export const documentSchema = new Schema({
+  nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),
+  marks: schema.spec.marks,
+});
+
+export function headingRule(level: number) {
+  return textblockTypeInputRule(
+    new RegExp(`^(#{1,${level}})\\s$`),
+    documentSchema.nodes.heading,
+    () => ({ level })
+  );
+}
+
+export const handleTransaction = ({
+  transaction,
+  editorRef,
+  saveContent,
+}: {
+  transaction: Transaction;
+  editorRef: MutableRefObject<EditorView | null>;
+  saveContent: (updatedContent: string, debounce: boolean) => void;
+}) => {
+  if (!editorRef || !editorRef.current) return;
+
+  const newState = editorRef.current.state.apply(transaction);
+  editorRef.current.updateState(newState);
+
+  if (transaction.docChanged && !transaction.getMeta('no-save')) {
+    const updatedContent = buildContentFromDocument(newState.doc);
+
+    if (transaction.getMeta('no-debounce')) {
+      saveContent(updatedContent, false);
+    } else {
+      saveContent(updatedContent, true);
+    }
+  }
+};

lib/editor/functions.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { defaultMarkdownSerializer } from 'prosemirror-markdown';
+import { DOMParser, Node } from 'prosemirror-model';
+import { Decoration, DecorationSet, EditorView } from 'prosemirror-view';
+import { renderToString } from 'react-dom/server';
+
+import { Markdown } from '@/components/custom/markdown';
+
+import { documentSchema } from './config';
+import { createSuggestionWidget, UISuggestion } from './suggestions';
+
+export const buildDocumentFromContent = (content: string) => {
+  const parser = DOMParser.fromSchema(documentSchema);
+  const stringFromMarkdown = renderToString(<Markdown>{content}</Markdown>);
+  const tempContainer = document.createElement('div');
+  tempContainer.innerHTML = stringFromMarkdown;
+  return parser.parse(tempContainer);
+};
+
+export const buildContentFromDocument = (document: Node) => {
+  return defaultMarkdownSerializer.serialize(document);
+};
+
+export const createDecorations = (
+  suggestions: Array<UISuggestion>,
+  view: EditorView
+) => {
+  const decorations: Array<Decoration> = [];
+
+  suggestions.forEach((suggestion) => {
+    decorations.push(
+      Decoration.inline(
+        suggestion.selectionStart,
+        suggestion.selectionEnd,
+        {
+          class: 'suggestion-highlight',
+        },
+        {
+          suggestionId: suggestion.id,
+          type: 'highlight',
+        }
+      )
+    );
+
+    decorations.push(
+      Decoration.widget(
+        suggestion.selectionStart,
+        (view) => {
+          const { dom } = createSuggestionWidget(suggestion, view);
+          return dom;
+        },
+        {
+          suggestionId: suggestion.id,
+          type: 'widget',
+        }
+      )
+    );
+  });
+
+  return DecorationSet.create(view.state.doc, decorations);
+};

lib/editor/suggestions.tsx

@@ -1,4 +1,3 @@
-import { defaultMarkdownSerializer } from 'prosemirror-markdown';
 import { Node } from 'prosemirror-model';
 import { PluginKey, Plugin } from 'prosemirror-state';
 import { Decoration, DecorationSet, EditorView } from 'prosemirror-view';
@@ -40,7 +39,7 @@ function findPositionsInDoc(doc: Node, searchText: string): Position | null {
   return positions;
 }
 
-export function projectWithHighlights(
+export function projectWithPositions(
   doc: Node,
   suggestions: Array<Suggestion>
 ): Array<UISuggestion> {