tiptap-notion-editor 0.5.0

package/lib/styles/table.css

@@ -0,0 +1,243 @@
+.ProseMirror.notion-editor .tableWrapper {
+  overflow-x: auto;
+}
+
+.ProseMirror.notion-editor table {
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
+  overflow: hidden;
+}
+
+.ProseMirror.notion-editor td,
+.ProseMirror.notion-editor th {
+  vertical-align: top;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.ProseMirror.notion-editor td:not([data-colwidth]):not(.column-resize-dragging),
+.ProseMirror.notion-editor th:not([data-colwidth]):not(.column-resize-dragging) {
+  min-width: var(--default-cell-min-width);
+}
+
+.ProseMirror.notion-editor .column-resize-handle {
+  z-index: 20;
+  pointer-events: none;
+  background-color: #adf;
+  width: 4px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -2px;
+}
+
+.ProseMirror.notion-editor.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
+
+.ProseMirror.notion-editor .selectedCell:after {
+  z-index: 2;
+  content: "";
+  pointer-events: none;
+  background: #c8c8ff66;
+  position: absolute;
+  inset: 0;
+}
+
+:root {
+  --tt-table-border-color: var(--color-border);
+  --tt-table-selected-bg: #c3bdff66;
+  --tt-table-selected-stroke: var(--color-blue-600);
+  --tt-table-column-resize-handle-bg: var(--color-indigo-500);
+  --tt-table-cell-padding: 0.5rem;
+  --tt-table-margin-block: 1.25rem;
+  --tt-table-pad-block-start: 1rem;
+  --tt-table-pad-block-end: 1.5rem;
+  --tt-table-pad-inline-start: 1rem;
+  --tt-table-pad-inline-end: 1.5rem;
+}
+
+.dark,
+[data-theme="dark"],
+[data-color-scheme="dark"] {
+  --tt-table-border-color: var(--color-border);
+  --tt-table-selected-bg: #c3bdff33;
+  --tt-table-selected-stroke: var(--tt-color-blue-600);
+  --tt-table-column-resize-handle-bg: var(--color-indigo-500);
+}
+
+.tiptap.notion-editor [data-content-type="table"] {
+  margin-block: var(--tt-table-margin-block);
+}
+
+.tiptap.notion-editor [data-content-type="table"] .tableWrapper {
+  width: 100%;
+  margin-left: -1rem;
+  padding-block-start: var(--tt-table-pad-block-start);
+  padding-block-end: var(--tt-table-pad-block-end);
+  padding-inline-start: var(--tt-table-pad-inline-start);
+  padding-inline-end: var(--tt-table-pad-inline-end);
+  position: relative;
+  overflow-y: hidden;
+}
+
+.tiptap.notion-editor table {
+  word-break: break-word;
+  /* width: auto; */
+}
+
+.tiptap.notion-editor th,
+.tiptap.notion-editor td {
+  border: 1px solid var(--color-border);
+  padding: var(--tt-table-cell-padding);
+}
+.tiptap.notion-editor th p,
+.tiptap.notion-editor td p {
+  margin: 0px 0px;
+}
+
+.tiptap.notion-editor table th {
+  background-color: var(--tt-table-header-bg);
+  text-align: left;
+  font-weight: 700;
+}
+
+.ProseMirror.notion-editor .column-resize-handle {
+  margin-inline-start: -1px;
+  background: var(--tt-table-column-resize-handle-bg);
+  cursor: col-resize;
+  z-index: 1;
+  pointer-events: auto;
+  width: 3px;
+  height: calc(100% + 2px);
+  margin-top: -1px;
+  transition: background 0.15s 50ms;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.tiptap.notion-editor td[data-text-align="left"],
+.tiptap.notion-editor td[data-node-text-align="left"],
+.tiptap.notion-editor th[data-text-align="left"],
+.tiptap.notion-editor th[data-node-text-align="left"] {
+  text-align: left;
+}
+
+.tiptap.notion-editor td[data-text-align="center"],
+.tiptap.notion-editor td[data-node-text-align="center"],
+.tiptap.notion-editor th[data-text-align="center"],
+.tiptap.notion-editor th[data-node-text-align="center"] {
+  text-align: center;
+}
+
+.tiptap.notion-editor td[data-text-align="right"],
+.tiptap.notion-editor td[data-node-text-align="right"],
+.tiptap.notion-editor th[data-text-align="right"],
+.tiptap.notion-editor th[data-node-text-align="right"] {
+  text-align: right;
+}
+
+.tiptap.notion-editor td[data-text-align="justify"],
+.tiptap.notion-editor td[data-node-text-align="justify"],
+.tiptap.notion-editor th[data-text-align="justify"],
+.tiptap.notion-editor th[data-node-text-align="justify"] {
+  text-align: justify;
+}
+
+.tiptap.notion-editor td[data-vertical-align="top"],
+.tiptap.notion-editor td[data-node-vertical-align="top"],
+.tiptap.notion-editor th[data-vertical-align="top"],
+.tiptap.notion-editor th[data-node-vertical-align="top"] {
+  vertical-align: top;
+}
+
+.tiptap.notion-editor td[data-vertical-align="middle"],
+.tiptap.notion-editor td[data-node-vertical-align="middle"],
+.tiptap.notion-editor th[data-vertical-align="middle"],
+.tiptap.notion-editor th[data-node-vertical-align="middle"] {
+  vertical-align: middle;
+}
+
+.tiptap.notion-editor td[data-vertical-align="bottom"],
+.tiptap.notion-editor td[data-node-vertical-align="bottom"],
+.tiptap.notion-editor th[data-vertical-align="bottom"],
+.tiptap.notion-editor th[data-node-vertical-align="bottom"] {
+  vertical-align: bottom;
+}
+
+.tiptap.notion-editor [data-content-type="table"] td[data-text-align="left"],
+.tiptap.notion-editor [data-content-type="table"] td[data-node-text-align="left"],
+.tiptap.notion-editor [data-content-type="table"] th[data-text-align="left"],
+.tiptap.notion-editor [data-content-type="table"] th[data-node-text-align="left"] {
+  text-align: left;
+}
+
+.tiptap.notion-editor [data-content-type="table"] td[data-text-align="center"],
+.tiptap.notion-editor [data-content-type="table"] td[data-node-text-align="center"],
+.tiptap.notion-editor [data-content-type="table"] th[data-text-align="center"],
+.tiptap.notion-editor [data-content-type="table"] th[data-node-text-align="center"] {
+  text-align: center;
+}
+
+.tiptap.notion-editor [data-content-type="table"] td[data-text-align="right"],
+.tiptap.notion-editor [data-content-type="table"] td[data-node-text-align="right"],
+.tiptap.notion-editor [data-content-type="table"] th[data-text-align="right"],
+.tiptap.notion-editor [data-content-type="table"] th[data-node-text-align="right"] {
+  text-align: right;
+}
+
+.tiptap.notion-editor [data-content-type="table"] td[data-text-align="justify"],
+.tiptap.notion-editor [data-content-type="table"] td[data-node-text-align="justify"],
+.tiptap.notion-editor [data-content-type="table"] th[data-text-align="justify"],
+.tiptap.notion-editor [data-content-type="table"] th[data-node-text-align="justify"] {
+  text-align: justify;
+}
+
+.tiptap.notion-editor [data-content-type="table"] td[data-vertical-align="top"],
+.tiptap.notion-editor [data-content-type="table"] td[data-node-vertical-align="top"],
+.tiptap.notion-editor [data-content-type="table"] th[data-vertical-align="top"],
+.tiptap.notion-editor [data-content-type="table"] th[data-node-vertical-align="top"] {
+  vertical-align: top;
+}
+
+.tiptap.notion-editor [data-content-type="table"] td[data-vertical-align="middle"],
+.tiptap.notion-editor [data-content-type="table"] td[data-node-vertical-align="middle"],
+.tiptap.notion-editor [data-content-type="table"] th[data-vertical-align="middle"],
+.tiptap.notion-editor [data-content-type="table"] th[data-node-vertical-align="middle"] {
+  vertical-align: middle;
+}
+
+.tiptap.notion-editor [data-content-type="table"] td[data-vertical-align="bottom"],
+.tiptap.notion-editor [data-content-type="table"] td[data-node-vertical-align="bottom"],
+.tiptap.notion-editor [data-content-type="table"] th[data-vertical-align="bottom"],
+.tiptap.notion-editor [data-content-type="table"] th[data-node-vertical-align="bottom"] {
+  vertical-align: bottom;
+}
+
+.ProseMirror.notion-editor td,
+.ProseMirror.notion-editor th {
+  min-width: auto !important;
+}
+
+.ProseMirror.notion-editor td:not([colwidth]):not(.column-resize-dragging),
+.ProseMirror.notion-editor th:not([colwidth]):not(.column-resize-dragging) {
+  min-width: var(--default-cell-min-width) !important;
+}
+
+.tiptap-table-dropcursor {
+  z-index: 20;
+  background-color: var(--tt-table-column-resize-handle-bg);
+  pointer-events: none;
+  position: absolute;
+}
+
+.table-cell-dragging-source {
+  z-index: 2;
+  content: "";
+  background: #c8c8ff66;
+  position: absolute;
+  inset: 0;
+}

package/lib/styles/tokens.css

@@ -0,0 +1,66 @@
+/*
+ * Token nội bộ của editor.
+ *
+ * Các file style và node view trong package tham chiếu một số biến `--tt-*`
+ * theo quy ước của Tiptap UI. Chúng vốn nằm trong `_variables.scss` của
+ * template gốc — file đó chưa bao giờ được import, nên các biến này rỗng và
+ * khối image-upload hiển thị sai. Ở đây chỉ khai báo đúng những token thực sự
+ * được tham chiếu, không bê nguyên 193 biến của template.
+ *
+ * Token *bố cục* (radius, spacing, indent, table) là hằng số của editor.
+ * Token *màu* fallback về biến theme của app khi có, để editor ăn theo màu
+ * thương hiệu thay vì ép màu tím mặc định của Tiptap.
+ */
+
+:root {
+	/* Brand — dùng cho vùng drop ảnh và trạng thái active */
+	--tt-brand-color-50: var(--color-primary-50, rgba(239, 238, 255, 1));
+	--tt-brand-color-400: var(--color-primary-400, rgba(122, 82, 255, 1));
+	--tt-brand-color-500: var(--color-primary, rgba(98, 41, 255, 1));
+	--tt-brand-color-900: var(--color-primary-900, rgba(43, 25, 102, 1));
+
+	--tt-color-blue-600: rgba(41, 115, 216, 1);
+
+	/* Gray — thang alpha (a-) chồng lên nền, thang đặc dùng cho viền */
+	--tt-gray-light-a-200: rgba(37, 39, 45, 0.1);
+	--tt-gray-light-a-300: rgba(47, 50, 55, 0.2);
+	--tt-gray-light-a-400: rgba(40, 44, 51, 0.42);
+	--tt-gray-light-a-700: rgba(35, 37, 42, 0.87);
+	--tt-gray-light-300: rgba(213, 214, 215, 1);
+
+	--tt-gray-dark-a-200: rgba(238, 238, 246, 0.11);
+	--tt-gray-dark-a-300: rgba(239, 239, 245, 0.22);
+	--tt-gray-dark-a-400: rgba(244, 244, 255, 0.37);
+	--tt-gray-dark-a-700: rgba(251, 251, 254, 0.75);
+	--tt-gray-dark-300: rgba(70, 70, 73, 1);
+
+	/*
+	 * Nền header bảng. Trước đây lấy thẳng --color-accent của app chủ, nhưng
+	 * nhiều app map token đó thành màu thương hiệu bão hoà chứ không phải nền
+	 * dịu như quy ước shadcn, và bảng biến thành một khối màu chói.
+	 * App chủ muốn đổi thì ghi đè đúng biến này.
+	 */
+	--tt-table-header-bg: var(--tt-gray-light-a-200);
+
+	/*
+	 * Nền item của menu khi rê chuột hoặc đang được chọn bằng bàn phím.
+	 * Dùng token riêng thay vì --color-muted/--color-accent của app chủ: nhiều
+	 * app map hai token đó thành xám đậm hoặc màu thương hiệu bão hoà, và menu
+	 * biến thành một khối màu đặc.
+	 */
+	--tt-menu-item-hover-bg: var(--tt-gray-light-a-200);
+
+	--tt-radius-md: 0.5rem;
+	--tt-radius-lg: 0.75rem;
+
+	--white: rgba(255, 255, 255, 1);
+	--black: rgba(0, 0, 0, 1);
+}
+
+
+.dark,
+[data-theme="dark"],
+[data-color-scheme="dark"] {
+	--tt-table-header-bg: var(--tt-gray-dark-a-200);
+	--tt-menu-item-hover-bg: var(--tt-gray-dark-a-200);
+}

package/package.json

@@ -0,0 +1,114 @@
+{
+	"name": "tiptap-notion-editor",
+	"version": "0.5.0",
+	"type": "module",
+	"description": "Notion-style rich text editor built on Tiptap 3 — slash commands, drag handles, tables, image upload, math and table of contents.",
+	"license": "MIT",
+	"sideEffects": [
+		"*.css"
+	],
+	"main": "./lib/index.cjs",
+	"module": "./lib/index.js",
+	"types": "./lib/index.d.ts",
+	"exports": {
+		".": {
+			"import": {
+				"types": "./lib/index.d.ts",
+				"default": "./lib/index.js"
+			},
+			"require": {
+				"types": "./lib/index.d.ts",
+				"default": "./lib/index.cjs"
+			}
+		},
+		"./style.css": "./lib/styles/index.css",
+		"./package.json": "./package.json"
+	},
+	"files": [
+		"lib",
+		"README.md",
+		"LICENSE"
+	],
+	"engines": {
+		"node": ">=18"
+	},
+	"scripts": {
+		"build": "vite build && node scripts/copy-styles.mjs",
+		"dev": "vite build --watch",
+		"type-check": "tsc --noEmit",
+		"prepublishOnly": "npm run build"
+	},
+	"peerDependencies": {
+		"@tiptap/core": "^3.20.0",
+		"@tiptap/pm": "^3.20.0",
+		"@tiptap/react": "^3.20.0",
+		"react": ">=18",
+		"react-dom": ">=18"
+	},
+	"dependencies": {
+		"@floating-ui/dom": "^1.8.0",
+		"@floating-ui/react": "^0.27.20",
+		"@tanstack/react-virtual": "^3.14.9",
+		"@tiptap/extension-blockquote": "^3.20.0",
+		"@tiptap/extension-bold": "^3.20.0",
+		"@tiptap/extension-code": "^3.20.0",
+		"@tiptap/extension-code-block": "^3.20.0",
+		"@tiptap/extension-code-block-lowlight": "^3.20.0",
+		"@tiptap/extension-document": "^3.20.0",
+		"@tiptap/extension-drag-handle-react": "^3.20.0",
+		"@tiptap/extension-emoji": "^3.20.0",
+		"@tiptap/extension-file-handler": "^3.20.0",
+		"@tiptap/extension-hard-break": "^3.30.1",
+		"@tiptap/extension-heading": "^3.20.0",
+		"@tiptap/extension-highlight": "^3.20.0",
+		"@tiptap/extension-horizontal-rule": "^3.20.0",
+		"@tiptap/extension-image": "^3.20.0",
+		"@tiptap/extension-italic": "^3.20.0",
+		"@tiptap/extension-link": "^3.20.0",
+		"@tiptap/extension-list": "^3.20.0",
+		"@tiptap/extension-mathematics": "^3.20.0",
+		"@tiptap/extension-mention": "^3.20.0",
+		"@tiptap/extension-paragraph": "^3.20.0",
+		"@tiptap/extension-placeholder": "^3.20.0",
+		"@tiptap/extension-strike": "^3.20.0",
+		"@tiptap/extension-subscript": "^3.20.0",
+		"@tiptap/extension-superscript": "^3.20.0",
+		"@tiptap/extension-table": "^3.20.0",
+		"@tiptap/extension-table-of-contents": "^3.20.0",
+		"@tiptap/extension-text": "^3.20.0",
+		"@tiptap/extension-text-align": "^3.20.0",
+		"@tiptap/extension-text-style": "^3.20.0",
+		"@tiptap/extension-underline": "^3.20.0",
+		"@tiptap/extension-unique-id": "^3.20.0",
+		"@tiptap/extensions": "^3.20.0",
+		"@tiptap/suggestion": "^3.20.0",
+		"class-variance-authority": "^0.7.1",
+		"clsx": "^2.1.1",
+		"cmdk": "^1.1.1",
+		"katex": "^0.17.0",
+		"lowlight": "^3.3.0",
+		"lucide-react": "^0.577.0",
+		"radix-ui": "^1.6.7",
+		"tailwind-merge": "^3.4.0",
+		"uuid": "^13.0.0"
+	},
+	"devDependencies": {
+		"@types/node": "^24.10.1",
+		"@types/react": "^19.2.7",
+		"@types/react-dom": "^19.2.3",
+		"@vitejs/plugin-react": "^5.1.1",
+		"react": "^19.2.0",
+		"react-dom": "^19.2.0",
+		"typescript": "~5.9.3",
+		"vite": "^7.3.1",
+		"vite-plugin-dts": "^4.5.4"
+	},
+	"keywords": [
+		"tiptap",
+		"editor",
+		"notion",
+		"wysiwyg",
+		"rich-text",
+		"react"
+	]
+}