tiptap 노드 및 마크 전체 리팩토링

apps/penxle.com/package.json

@@ -58,6 +58,7 @@
     "argon2": "^0.31.2",
     "body-scroll-lock": "4.0.0-beta.0",
     "clsx": "^2.1.0",
+    "color": "^4.2.3",
     "dataloader": "^2.2.2",
     "dayjs": "^1.11.10",
     "emoji-mart": "^5.5.2",
@@ -102,6 +103,7 @@
     "@pulumi/pulumi": "^3.103.1",
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@types/body-scroll-lock": "^3.1.2",
+    "@types/color": "^3.0.6",
     "@types/mixpanel-browser": "^2.48.1",
     "@types/node": "^20.11.7",
     "@types/numeral": "^2.0.5",

apps/penxle.com/src/lib/server/utils/tiptap.ts

@@ -24,7 +24,7 @@ export const revisionContentToText = async (revisionContent: RevisionContent): P
 };
 
 export const sanitizeContent = async (content: JSONContent[]): Promise<JSONContent[]> => {
-  traverse(content, async ({ key, value, parent }) => {
+  traverse(content, ({ key, value, parent }) => {
     if (parent && key === 'attrs' && typeof value === 'object') {
       parent.attrs = Object.fromEntries(Object.entries(value).filter(([key]) => !key.startsWith('__')));
     }

apps/penxle.com/src/lib/tiptap/extensions/index.ts

@@ -1,9 +1,4 @@
 export * from './drop-cursor';
-export * from './font-family';
 export * from './gap-cursor';
 export * from './history';
-export * from './letter-spacing';
-export * from './line-height';
-export * from './node-id';
 export * from './placeholder';
-export * from './text-align';

apps/penxle.com/src/lib/tiptap/legacies/font-family.ts

@@ -0,0 +1,32 @@
+import { Extension } from '@tiptap/core';
+import clsx from 'clsx';
+import { Paragraph } from '$lib/tiptap/nodes';
+import { LegacyHeading } from './heading';
+
+const types = [LegacyHeading.name, Paragraph.name];
+
+export const LegacyFontFamily = Extension.create({
+  name: 'legacy_font_family',
+
+  addGlobalAttributes() {
+    return [
+      {
+        types,
+        attributes: {
+          'font-family': {
+            default: undefined,
+            renderHTML: ({ 'font-family': fontFamily }) => ({
+              class: clsx(
+                fontFamily === 'sans' && 'font-sans',
+                fontFamily === 'serif' && 'font-serif',
+                fontFamily === 'serif2' && 'font-serif2',
+                fontFamily === 'serif3' && 'font-serif3',
+                fontFamily === 'mono' && 'font-mono',
+              ),
+            }),
+          },
+        },
+      },
+    ];
+  },
+});

apps/penxle.com/src/lib/tiptap/legacies/heading.ts

@@ -0,0 +1,23 @@
+import { mergeAttributes, Node } from '@tiptap/core';
+import clsx from 'clsx';
+
+export const LegacyHeading = Node.create({
+  name: 'heading',
+  group: 'block',
+  content: 'text*',
+  defining: true,
+
+  addAttributes() {
+    return {
+      level: {
+        renderHTML: ({ level }) => ({
+          class: clsx(level === 1 && 'title-24-b', level === 2 && 'title-20-b', level === 3 && 'subtitle-18-b'),
+        }),
+      },
+    };
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    return [`h${node.attrs.level}`, mergeAttributes(HTMLAttributes, { class: 'my-4' }), 0];
+  },
+});

apps/penxle.com/src/lib/tiptap/legacies/horizontal-rule.ts

@@ -0,0 +1,35 @@
+import { mergeAttributes, Node } from '@tiptap/core';
+import clsx from 'clsx';
+
+export const LegacyHorizontalRule = Node.create({
+  name: 'horizontalRule',
+  group: 'block',
+
+  addAttributes() {
+    return {
+      kind: {
+        default: 1,
+        renderHTML: ({ kind }) => ({
+          class: clsx(
+            'bg-no-repeat border-none bg-center m-y-xs m-x-auto',
+            kind === 1 && 'h-0.0625rem bg-repeat!',
+            kind === 2 && 'border-1 border-solid border-current',
+            kind === 3 && 'border-1 border-solid border-current w-7.5rem',
+            kind === 4 && 'h-1.8rem bg-[url(/horizontal-rules/4.svg)]',
+            kind === 5 && 'h-0.875rem bg-[url(/horizontal-rules/5.svg)]',
+            kind === 6 && 'h-0.91027rem bg-[url(/horizontal-rules/6.svg)]',
+            kind === 7 && 'h-1.25rem bg-[url(/horizontal-rules/7.svg)]',
+          ),
+          style:
+            kind === 1
+              ? 'background-size: 16px 1px; background-image: linear-gradient(to right, currentColor 50%, rgb(255 255 255 / 0) 50%);'
+              : undefined,
+        }),
+      },
+    };
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['hr', mergeAttributes(HTMLAttributes, { class: 'bg-no-repeat border-none bg-center m-y-xs m-x-auto' })];
+  },
+});

apps/penxle.com/src/lib/tiptap/legacies/index.ts

@@ -0,0 +1,7 @@
+export * from './font-family';
+export * from './heading';
+export * from './horizontal-rule';
+export * from './letter-spacing';
+export * from './line-height';
+export * from './text-align';
+export * from './text-color';

apps/penxle.com/src/lib/tiptap/legacies/letter-spacing.ts

@@ -0,0 +1,34 @@
+import { Extension } from '@tiptap/core';
+import clsx from 'clsx';
+import { Paragraph } from '$lib/tiptap/nodes';
+import { LegacyHeading } from './heading';
+
+// value reference from classname: https://tailwindcss.com/docs/letter-spacing
+const types = [LegacyHeading.name, Paragraph.name];
+
+export const LegacyLetterSpacing = Extension.create({
+  name: 'legacy_letter_spacing',
+
+  addGlobalAttributes() {
+    return [
+      {
+        types,
+        attributes: {
+          'letter-spacing': {
+            default: undefined,
+            renderHTML: ({ 'letter-spacing': letterSpacing }) => ({
+              class: clsx(
+                letterSpacing === 'tighter' && 'tracking-tighter',
+                letterSpacing === 'tight' && 'tracking-tight',
+                letterSpacing === 'normal' && 'tracking-normal',
+                letterSpacing === 'wide' && 'tracking-wide',
+                letterSpacing === 'wider' && 'tracking-wider',
+                letterSpacing === 'widest' && 'tracking-widest',
+              ),
+            }),
+          },
+        },
+      },
+    ];
+  },
+});