tiptap 노드 및 마크 스타일링 방식 개선

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,31 @@
+import { Extension } from '@tiptap/core';
+import clsx from 'clsx';
+import { Heading, Paragraph } from '$lib/tiptap/nodes';
+
+const types = [Heading.name, Paragraph.name];
+
+export const LegacyFontFamily = Extension.create({
+  name: 'legacy_font_family',
+
+  addGlobalAttributes() {
+    return [
+      {
+        types,
+        attributes: {
+          'font-family': {
+            default: undefined,
+            renderHTML: (attributes) => ({
+              class: clsx(
+                attributes['font-family'] === 'sans' && 'font-sans',
+                attributes['font-family'] === 'serif' && 'font-serif',
+                attributes['font-family'] === 'serif2' && 'font-serif2',
+                attributes['font-family'] === 'serif3' && 'font-serif3',
+                attributes['font-family'] === 'mono' && 'font-mono',
+              ),
+            }),
+          },
+        },
+      },
+    ];
+  },
+});

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

@@ -0,0 +1,5 @@
+export * from './font-family';
+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,26 @@
+import { Extension } from '@tiptap/core';
+import { Heading, Paragraph } from '$lib/tiptap/nodes';
+
+// value reference from classname: https://tailwindcss.com/docs/letter-spacing
+const types = [Heading.name, Paragraph.name];
+
+export const LegacyLetterSpacing = Extension.create({
+  name: 'legacy_letter_spacing',
+
+  addGlobalAttributes() {
+    return [
+      {
+        types,
+        attributes: {
+          'letter-spacing': {
+            default: undefined,
+            parseHTML: (element) => element.dataset.letterSpacing,
+            renderHTML: (attributes) => ({
+              'data-letter-spacing': attributes['letter-spacing'] as string,
+            }),
+          },
+        },
+      },
+    ];
+  },
+});

apps/penxle.com/src/lib/tiptap/legacies/line-height.ts

@@ -0,0 +1,25 @@
+import { Extension } from '@tiptap/core';
+import { Heading, Paragraph } from '$lib/tiptap/nodes';
+
+const types = [Heading.name, Paragraph.name];
+
+export const LegacyLineHeight = Extension.create({
+  name: 'legacy_line_height',
+
+  addGlobalAttributes() {
+    return [
+      {
+        types,
+        attributes: {
+          'line-height': {
+            default: undefined,
+            parseHTML: (element) => element.dataset.lineHeight,
+            renderHTML: (attributes) => ({
+              'data-line-height': attributes['line-height'] as string,
+            }),
+          },
+        },
+      },
+    ];
+  },
+});

apps/penxle.com/src/lib/tiptap/legacies/text-align.ts

@@ -0,0 +1,22 @@
+import { Extension } from '@tiptap/core';
+
+export const LegacyTextAlign = Extension.create({
+  name: 'legacy_text_align',
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: ['heading', 'paragraph'],
+        attributes: {
+          'text-align': {
+            default: undefined,
+            parseHTML: (element) => element.dataset.textAlign,
+            renderHTML: (attributes) => ({
+              'data-text-align': attributes['text-align'] as string,
+            }),
+          },
+        },
+      },
+    ];
+  },
+});

apps/penxle.com/src/lib/tiptap/legacies/text-color.ts

@@ -0,0 +1,32 @@
+import { Mark } from '@tiptap/core';
+import clsx from 'clsx';
+
+export const LegacyTextColor = Mark.create({
+  name: 'text-color',
+
+  addAttributes() {
+    return {
+      'data-text-color': {
+        parseHTML: (element) => ({ 'data-text-color': element.dataset.textColor }),
+        renderHTML: ({ 'data-text-color': color }) => ({
+          'class': clsx(
+            (color === 'text-gray-50' || color === 'text-post-gray') && 'text-post-gray',
+            (color === 'text-gray-40' || color === 'text-post-gray2' || color === 'text-post-lightgray') &&
+              'text-post-lightgray',
+            (color === 'text-red-60' || color === 'text-post-red') && 'text-post-red',
+            (color === 'text-blue-60' || color === 'text-post-blue') && 'text-post-blue',
+            (color === 'text-orange-70' || color === 'text-post-brown') && 'text-post-brown',
+            (color === 'text-green-60' || color === 'text-post-green') && 'text-post-green',
+            (color === 'text-purple-60' || color === 'text-post-purple') && 'text-post-purple',
+            (color === 'text-white' || color === 'text-post-white') && 'text-white',
+          ),
+          'data-text-color': color,
+        }),
+      },
+    };
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['span', HTMLAttributes, 0];
+  },
+});