tiptap-notion-editor 0.5.0

package/lib/styles/image-upload.css

@@ -0,0 +1,256 @@
+:root {
+  --tiptap-image-upload-active: var(--tt-brand-color-500);
+  --tiptap-image-upload-progress-bg: var(--tt-brand-color-50);
+  --tiptap-image-upload-icon-bg: var(--tt-brand-color-500);
+
+  --tiptap-image-upload-text-color: var(--tt-gray-light-a-700);
+  --tiptap-image-upload-subtext-color: var(--tt-gray-light-a-400);
+  --tiptap-image-upload-border: var(--tt-gray-light-a-300);
+  --tiptap-image-upload-border-hover: var(--tt-gray-light-a-400);
+  --tiptap-image-upload-border-active: var(--tt-brand-color-500);
+
+  --tiptap-image-upload-icon-doc-bg: var(--tt-gray-light-a-200);
+  --tiptap-image-upload-icon-doc-border: var(--tt-gray-light-300);
+  --tiptap-image-upload-icon-color: var(--white);
+}
+
+.dark,
+[data-theme="dark"],
+[data-color-scheme="dark"] {
+  --tiptap-image-upload-active: var(--tt-brand-color-400);
+  --tiptap-image-upload-progress-bg: var(--tt-brand-color-900);
+  --tiptap-image-upload-icon-bg: var(--tt-brand-color-400);
+
+  --tiptap-image-upload-text-color: var(--tt-gray-dark-a-700);
+  --tiptap-image-upload-subtext-color: var(--tt-gray-dark-a-400);
+  --tiptap-image-upload-border: var(--tt-gray-dark-a-300);
+  --tiptap-image-upload-border-hover: var(--tt-gray-dark-a-400);
+  --tiptap-image-upload-border-active: var(--tt-brand-color-400);
+
+  --tiptap-image-upload-icon-doc-bg: var(--tt-gray-dark-a-200);
+  --tiptap-image-upload-icon-doc-border: var(--tt-gray-dark-300);
+  --tiptap-image-upload-icon-color: var(--black);
+}
+
+.tiptap-image-upload {
+  margin: 2rem 0;
+
+  input[type="file"] {
+
+
+
+
+    display: none;
+  }
+                               
+  .tiptap-image-upload-dropzone {
+    position: relative;
+    width: 3.125rem;
+    height: 3.75rem;
+    display: inline-flex;
+    align-items: flex-start;
+    justify-content: center;
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none;
+  }
+
+  .tiptap-image-upload-icon-container {
+    position: absolute;
+    width: 1.75rem;
+    height: 1.75rem;
+    bottom: 0;
+    right: 0;
+    background-color: var(--color-background);
+    border-radius: var(--radius-lg, 0.75rem);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--color-border)
+  }
+
+  .tiptap-image-upload-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+    color: var(--color-foreground);
+  }
+
+  .tiptap-image-upload-dropzone-rect-primary {
+    color: var(--color-card);
+    position: absolute;
+  }
+
+  .tiptap-image-upload-dropzone-rect-secondary {
+    position: absolute;
+    top: 0;
+    right: 0.25rem;
+    bottom: 0;
+    color: var(--border);
+  }
+
+  .tiptap-image-upload-text {
+    color: var(--color-foreground);
+    font-weight: 500;
+    font-size: 0.875rem;
+    line-height: normal;
+
+    em {
+      font-style: normal;
+      text-decoration: underline;
+    }
+  }
+
+  .tiptap-image-upload-subtext {
+    color: var(--color-gray-400);
+    font-weight: 600;
+    line-height: normal;
+    font-size: 0.75rem;
+  }
+
+  .tiptap-image-upload-drag-area {
+    padding: 2rem 1.5rem;
+    border: 1.5px dashed var(--border);
+    border-radius: var(--radius-md);
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.2s ease;
+
+    &:hover {
+      border-color: var(--border-border);
+    }
+
+    &.drag-active {
+      border-color: var(--tiptap-image-upload-border-active);
+      background-color: rgba(
+        var(--color-card, 0, 123, 255),
+        0.05
+      );
+    }
+
+    &.drag-over {
+      border-color: var(--tiptap-image-upload-border-active);
+      background-color: rgba(
+        var(--tiptap-image-upload-active-rgb, 0, 123, 255),
+        0.1
+      );
+    }
+  }
+
+  .tiptap-image-upload-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 0.25rem;
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none;
+  }
+
+  .tiptap-image-upload-previews {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .tiptap-image-upload-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid var(--tiptap-image-upload-border);
+    margin-bottom: 0.5rem;
+
+    span {
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: var(--tiptap-image-upload-text-color);
+    }
+  }
+
+  // === Individual File Preview Styles ===
+  .tiptap-image-upload-preview {
+    position: relative;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+
+    .tiptap-image-upload-progress {
+      position: absolute;
+      inset: 0;
+      background-color: var(--color-indigo-500);
+      transition: all 300ms ease-out;
+    }
+
+    .tiptap-image-upload-preview-content {
+      position: relative;
+      border: 1px solid var(--color-border);
+      border-radius: var(--tt-radius-md, 0.5rem);
+      padding: 1rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .tiptap-image-upload-file-info {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      height: 2rem;
+
+      .tiptap-image-upload-file-icon {
+        padding: 0.5rem;
+        background-color: var(--tiptap-image-upload-icon-bg);
+        border-radius: var(--tt-radius-lg, 0.75rem);
+
+        svg {
+          width: 0.875rem;
+          height: 0.875rem;
+          color: var(--tiptap-image-upload-icon-color);
+        }
+      }
+    }
+
+    .tiptap-image-upload-details {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .tiptap-image-upload-actions {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+
+      .tiptap-image-upload-progress-text {
+        font-size: 0.75rem;
+        color: var(--tiptap-image-upload-border-active);
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+.tiptap.notion-editor.ProseMirror.ProseMirror-focused {
+  .ProseMirror-selectednode .tiptap-image-upload-drag-area {
+    border-color: var(--tiptap-image-upload-active);
+  }
+}
+
+@media (max-width: 480px) {
+  .tiptap-image-upload {
+    .tiptap-image-upload-drag-area {
+      padding: 1.5rem 1rem;
+    }
+
+    .tiptap-image-upload-header {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.5rem;
+    }
+
+    .tiptap-image-upload-preview-content {
+      padding: 0.75rem;
+    }
+  }
+}

package/lib/styles/image.css

@@ -0,0 +1,113 @@
+:root {
+  --tiptap-image-handle-bg: var(--color-indigo-700);
+}
+
+.dark,
+[data-theme="dark"],
+[data-color-scheme="dark"] {
+  --tiptap-image-handle-bg: var(--color-indigo-600);
+}
+
+.tiptap.notion-editor.ProseMirror
+  .ProseMirror-selectednode
+  .tiptap-image
+  .tiptap-image-container {
+  outline: 0.125rem solid #0000;
+  outline-color: var(--color-indigo-600);
+  border-radius: var(--radius, 0.25rem);
+  overflow: hidden;
+}
+
+.tiptap.notion-editor.ProseMirror .tiptap-image {
+  width: 100%;
+  margin: 1.5rem 0 !important;
+  display: flex;
+}
+
+.tiptap.notion-editor.ProseMirror .tiptap-image[data-align="right"] {
+  text-align: right;
+  justify-content: flex-end;
+}
+
+.tiptap.notion-editor.ProseMirror .tiptap-image[data-align="center"] {
+  text-align: center;
+  justify-content: center;
+}
+
+.tiptap.notion-editor.ProseMirror .tiptap-image-container {
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  flex-direction: column;
+  display: flex;
+  border-radius: var(--radius, 0.25rem);
+  overflow: hidden;
+}
+
+.tiptap.notion-editor.ProseMirror .tiptap-image-content {
+  align-items: center;
+  max-width: 100%;
+  display: flex;
+  position: relative;
+  border-radius: var(--radius, 0.25rem);
+}
+
+.tiptap.notion-editor.ProseMirror .tiptap-image-img {
+  border-radius: var(--radius-sm, 0.25rem);
+  width: 100%;
+}
+
+.tiptap.notion-editor.ProseMirror .tiptap-image-handle {
+  background-color: var(--tiptap-image-handle-bg);
+  cursor: ew-resize;
+  z-index: 10;
+  border-radius: 1.875rem;
+  width: 0.375rem;
+  height: 3rem;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.tiptap.notion-editor.ProseMirror .tiptap-image-handle.tiptap-image-handle-left {
+  left: 4px;
+}
+
+.tiptap.notion-editor.ProseMirror .tiptap-image-handle.tiptap-image-handle-right {
+  right: 4px;
+}
+
+.tiptap.notion-editor.ProseMirror .tiptap-image-caption {
+  cursor: text;
+  text-align: center;
+  white-space: break-spaces;
+  word-break: break-word;
+  outline: none;
+  width: 100%;
+  max-width: 100%;
+  margin-top: 1rem;
+  font-size: 15px;
+  position: relative;
+}
+
+.tiptap.notion-editor.ProseMirror
+  .tiptap-image-caption:has(
+    > [data-node-view-content-react] > .ProseMirror-trailingBreak:only-child
+  ):before {
+  content: attr(data-placeholder);
+  color: #9ca3af;
+  pointer-events: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+
+.tiptap.notion-editor.ProseMirror
+  .tiptap-image-caption:has(> [data-node-view-content-react]:empty):before {
+  content: attr(data-placeholder);
+  color: #9ca3af;
+  pointer-events: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+}

package/lib/styles/index.css

@@ -0,0 +1,18 @@
+/*
+ * Entry style duy nhất của tiptap-notion-editor.
+ *
+ * Thứ tự import có ý nghĩa: token phải đứng trước mọi file tiêu thụ chúng,
+ * và `editor.css` đứng cuối để ghi đè được phần khung do prosemirror/table đặt.
+ *
+ * File này KHÔNG chứa `@import "tailwindcss"`. Các class tiện ích mà component
+ * dùng do app chủ biên dịch — xem hướng dẫn `@source` trong README.
+ */
+@import "katex/dist/katex.min.css";
+
+@import "./tokens.css";
+@import "./colors.css";
+@import "./prosemirror.css";
+@import "./table.css";
+@import "./image.css";
+@import "./image-upload.css";
+@import "./editor.css";

package/lib/styles/prosemirror.css

@@ -0,0 +1,271 @@
+.ProseMirror.notion-editor .is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--muted-foreground);
+  pointer-events: none;
+  height: 0;
+}
+.ProseMirror.notion-editor .is-empty::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--muted-foreground);
+  pointer-events: none;
+  height: 0;
+}
+
+/* Custom image styles */
+
+.ProseMirror.notion-editor img {
+  transition: filter 0.1s ease-in-out;
+
+  &:hover {
+    cursor: pointer;
+    filter: brightness(90%);
+  }
+
+  &.ProseMirror-selectednode {
+    outline: 3px solid #5abbf7;
+    filter: brightness(90%);
+  }
+}
+
+.img-placeholder {
+  position: relative;
+
+  &:before {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: 3px solid var(--novel-stone-200);
+    border-top-color: var(--novel-stone-800);
+    animation: spinning 0.6s linear infinite;
+  }
+}
+
+@keyframes spinning {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.ProseMirror.notion-editor:not(.dragging) .ProseMirror-selectednode {
+  outline: none !important;
+  background-color: var(--accent);
+  transition: background-color 0.2s;
+  box-shadow: none;
+}
+
+/* .drag-handle {
+  position: fixed;
+  opacity: 1;
+  transition: opacity ease-in 0.2s;
+  border-radius: 0.25rem;
+
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill: rgba(0, 0, 0, 0.5)'%3E%3Cpath d='M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 Z'%3E%3C/path%3E%3C/svg%3E");
+  background-size: calc(0.5em + 0.375rem) calc(0.5em + 0.375rem);
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 1.2rem;
+  height: 1.5rem;
+  z-index: 50;
+  cursor: grab;
+
+  &:hover {
+    background-color: var(--novel-stone-100);
+    transition: background-color 0.2s;
+  }
+
+  &:active {
+    background-color: var(--novel-stone-200);
+    transition: background-color 0.2s;
+    cursor: grabbing;
+  }
+
+  &.hide {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  @media screen and (max-width: 600px) {
+    display: none;
+    pointer-events: none;
+  }
+}
+
+.dark .drag-handle,
+[data-theme="dark"] .drag-handle,
+[data-color-scheme="dark"] .drag-handle {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill: rgba(255, 255, 255, 0.5)'%3E%3Cpath d='M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 Z'%3E%3C/path%3E%3C/svg%3E");
+} */
+
+/* Custom Youtube Video CSS */
+iframe {
+  border: 8px solid #ffd00027;
+  border-radius: 4px;
+  min-width: 200px;
+  min-height: 200px;
+  display: block;
+  outline: 0px solid transparent;
+}
+
+div[data-youtube-video] > iframe {
+  cursor: move;
+  aspect-ratio: 16 / 9;
+  width: 100%;
+}
+
+.ProseMirror-selectednode iframe {
+  transition: outline 0.15s;
+  outline: 6px solid #fbbf24;
+}
+
+@media only screen and (max-width: 480px) {
+  div[data-youtube-video] > iframe {
+    max-height: 50px;
+  }
+}
+
+@media only screen and (max-width: 720px) {
+  div[data-youtube-video] > iframe {
+    max-height: 100px;
+  }
+}
+
+/* CSS for bold coloring and highlighting issue*/
+span[style] > strong {
+  color: inherit;
+}
+
+mark[style] > strong {
+  color: inherit;
+}
+
+.tiptap.notion-editor.ProseMirror ul[data-type="taskList"] {
+  padding-left: 0.25em;
+}
+
+.tiptap.notion-editor.ProseMirror ul[data-type="taskList"] li {
+  flex-direction: row;
+  align-items: flex-start;
+  display: flex;
+}
+
+.tiptap.notion-editor.ProseMirror ul[data-type="taskList"] li:not(:has(> p:first-child)) {
+  list-style-type: none;
+}
+
+.tiptap.notion-editor.ProseMirror ul[data-type="taskList"] li[data-checked="true"] > div > p {
+  opacity: 0.5;
+  text-decoration: line-through;
+}
+
+.tiptap.notion-editor.ProseMirror
+  ul[data-type="taskList"]
+  li[data-checked="true"]
+  > div
+  > p
+  span {
+  text-decoration: line-through;
+}
+
+.tiptap.notion-editor.ProseMirror ul[data-type="taskList"] li label {
+  padding-top: 0.375rem;
+  padding-right: 0.5rem;
+  position: relative;
+}
+
+.tiptap.notion-editor.ProseMirror ul[data-type="taskList"] li label input[type="checkbox"] {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+
+.tiptap.notion-editor.ProseMirror ul[data-type="taskList"] li label span {
+  border: 1px solid var(--color-border);
+  border-radius: 0.25rem;
+  cursor: pointer;
+  background-color: var(--color-input);
+  width: 1em;
+  height: 1em;
+  transition:
+    background-color 80ms ease-out,
+    border-color 80ms ease-out;
+  display: block;
+  position: relative;
+}
+
+.tiptap.notion-editor.ProseMirror ul[data-type="taskList"] li label span:before {
+  content: "";
+  background-color: var(--color-background);
+  opacity: 0;
+  width: 0.75em;
+  height: 0.75em;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-mask: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fillRule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.4142%204.58579C22.1953%205.36683%2022.1953%206.63317%2021.4142%207.41421L10.4142%2018.4142C9.63317%2019.1953%208.36684%2019.1953%207.58579%2018.4142L2.58579%2013.4142C1.80474%2012.6332%201.80474%2011.3668%202.58579%2010.5858C3.36683%209.80474%204.63317%209.80474%205.41421%2010.5858L9%2014.1716L18.5858%204.58579C19.3668%203.80474%2020.6332%203.80474%2021.4142%204.58579Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E)
+    50% / contain no-repeat;
+  mask: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fillRule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.4142%204.58579C22.1953%205.36683%2022.1953%206.63317%2021.4142%207.41421L10.4142%2018.4142C9.63317%2019.1953%208.36684%2019.1953%207.58579%2018.4142L2.58579%2013.4142C1.80474%2012.6332%201.80474%2011.3668%202.58579%2010.5858C3.36683%209.80474%204.63317%209.80474%205.41421%2010.5858L9%2014.1716L18.5858%204.58579C19.3668%203.80474%2020.6332%203.80474%2021.4142%204.58579Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E)
+    50% / contain no-repeat;
+}
+
+.tiptap.notion-editor.ProseMirror
+  ul[data-type="taskList"]
+  li
+  label
+  input[type="checkbox"]:checked
+  + span {
+  background: var(--color-primary);
+  border-color: var(--color-border);
+}
+
+.tiptap.notion-editor.ProseMirror
+  ul[data-type="taskList"]
+  li
+  label
+  input[type="checkbox"]:checked
+  + span:before {
+  opacity: 1;
+}
+
+.tiptap.notion-editor.ProseMirror ul[data-type="taskList"] li div {
+  flex: 1;
+  min-width: 0;
+}
+
+.tiptap.notion-editor.ProseMirror {
+  --tt-indent-unit: 24px;
+}
+
+.tiptap.notion-editor.ProseMirror [data-indent] {
+  margin-left: calc(var(--tt-indent-unit) * var(--tt-indent-level, 0));
+  transition: margin-left 0.2s ease-in-out;
+}
+/* 
+.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;
+} */