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",
     "dayjs": "^1.11.10",
     "emoji-mart": "^5.5.2",
     "felte": "^1.2.12",
@@ -101,6 +102,7 @@
     "@pulumi/pulumi": "^3.101.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.5",
     "@types/numeral": "^2.0.5",

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,25 @@
+import { Extension } from '@tiptap/core';
+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,
+            parseHTML: (element) => element.dataset.fontFamily,
+            renderHTML: ({ 'font-family': fontFamily }) => ({
+              'data-font-family': fontFamily,
+            }),
+          },
+        },
+      },
+    ];
+  },
+});

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: ({ 'letter-spacing': letterSpacing }) => ({
+              'data-letter-spacing': letterSpacing,
+            }),
+          },
+        },
+      },
+    ];
+  },
+});

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: ({ 'line-height': lineHeight }) => ({
+              'data-line-height': lineHeight,
+            }),
+          },
+        },
+      },
+    ];
+  },
+});

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: ({ 'text-align': textAlign }) => ({
+              'data-text-align': textAlign,
+            }),
+          },
+        },
+      },
+    ];
+  },
+});

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

@@ -0,0 +1,20 @@
+import { Mark } from '@tiptap/core';
+
+export const LegacyTextColor = Mark.create({
+  name: 'text-color',
+
+  addAttributes() {
+    return {
+      'data-text-color': {
+        parseHTML: (element) => element.dataset.textColor,
+        renderHTML: ({ 'data-text-color': textColor }) => ({
+          'data-text-color': textColor,
+        }),
+      },
+    };
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['span', HTMLAttributes, 0];
+  },
+});