reactjs-tiptap-editor-pro 0.2.29 → 0.2.30

package/src/styles/editor.scss

@@ -0,0 +1,411 @@
+.reactjs-tiptap-editor.reactjs-tiptap-editor {
+  .ProseMirror.ProseMirror.ProseMirror {
+    @apply caret-black dark:caret-white outline-0 pr-8 pl-20 py-16 z-0 lg:pl-8 lg:pr-8;
+    min-height: 180px;
+    padding: 32px 80px;
+
+    .img-placeholder {
+      width: fit-content;
+      position: relative;
+      @apply backdrop-blur-sm bg-white/30;
+
+      &:before {
+        content: '';
+        box-sizing: border-box;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 24px;
+        height: 24px;
+        margin: -12px 0 0 -12px;
+        @apply animate-spin border-current border-t-transparent rounded-full border-[3px] inline-block;
+      }
+    }
+
+    .tableWrapper {
+      @apply my-12 overflow-auto p-3;
+      table {
+        @apply box-border w-full border-collapse rounded border-black/10;
+        @apply dark:border-white/20;
+        td,
+        th {
+          @apply relative border border-black/10 p-2 text-left align-top;
+          @apply dark:border-white/20;
+
+          &:first-of-type:not(a) {
+            @apply mt-0;
+          }
+
+          p {
+            @apply m-0;
+
+            & + p {
+              @apply mt-3;
+            }
+          }
+        }
+
+        .column-resize-handle {
+          @apply bottom-[-2px] absolute right-[-2px] top-0 w-1 z-10 pointer-events-none bg-primary;
+        }
+        .resize-cursor {
+          cursor: 'col-resize';
+        }
+
+        .selectedCell {
+          @apply bg-black/5 border-black/20 border-double;
+          @apply dark:bg-white/10 dark:border-white/20;
+        }
+        .grip-column,
+        .grip-row {
+          @apply absolute z-10 flex cursor-pointer items-center justify-center bg-black/5;
+          @apply dark:bg-white/10;
+        }
+
+        .grip-column {
+          @apply -top-3 left-0 -ml-[1px] h-3 w-[calc(100%+1px)] border-l border-black/20;
+          @apply dark:border-white/20;
+
+          &:hover,
+          &.selected {
+            &::before {
+              content: '';
+              @apply w-2.5;
+            }
+          }
+
+          &:hover {
+            @apply bg-black/10;
+            @apply dark:bg-white/20;
+
+            &::before {
+              @apply border-b-2 border-dotted border-black/60;
+              @apply dark:border-white/60;
+            }
+          }
+
+          &.first {
+            @apply rounded-tl-sm border-transparent;
+          }
+
+          &.last {
+            @apply rounded-tr-sm;
+          }
+
+          &.selected {
+            @apply border-black/30 bg-black/30 shadow-sm;
+            @apply dark:border-white/30 dark:bg-white/30;
+
+            &::before {
+              @apply border-b-2 border-dotted;
+            }
+          }
+        }
+
+        .grip-row {
+          @apply -left-3 top-0 -mt-[1px] h-[calc(100%+1px)] w-3 border-t border-black/20;
+          @apply dark:border-white/20;
+
+          &:hover,
+          &.selected {
+            &::before {
+              @apply h-2.5;
+              content: '';
+            }
+          }
+          &:hover {
+            @apply bg-black/10;
+            @apply dark:bg-white/20;
+
+            &::before {
+              @apply border-l-2 border-dotted border-black/60;
+              @apply dark:border-white/60;
+            }
+          }
+
+          &.first {
+            @apply rounded-tl-sm border-transparent;
+          }
+
+          &.last {
+            @apply rounded-bl-sm;
+          }
+
+          &.selected {
+            @apply border-black/30 bg-black/30 shadow-sm;
+            @apply dark:border-white/30 dark:bg-white/30;
+
+            &::before {
+              @apply border-l-2 border-dotted;
+            }
+          }
+        }
+      }
+    }
+
+    [data-type='horizontalRule'] {
+      @apply transition-all duration-100 ease-in-out cursor-pointer;
+
+      &.ProseMirror-selectednode {
+        @apply bg-black/5 dark:bg-white/10;
+
+        hr {
+          @apply border-t-black/30 dark:border-t-white/30;
+        }
+      }
+
+      &:hover:not(&.ProseMirror-selectednode) {
+        @apply bg-black/5;
+        @apply dark:bg-white/10;
+      }
+    }
+    :not(.dragging) .ProseMirror-selectednode:not(.image-view) {
+      @apply outline-none bg-black/10 dark:bg-white/20 shadow-none transition-colors;
+    }
+
+    .selection:not(.image-view),
+    *:not(.image-view)::selection {
+      @apply bg-black/10 dark:bg-white/20;
+    }
+
+    .is-empty::before {
+      content: attr(data-placeholder);
+      float: left;
+      color: #adb5bd;
+      pointer-events: none;
+      width: 100%;
+      height: 0;
+    }
+
+    .columns.is-empty::before {
+      display: none !important;
+    }
+
+    .is-editor-empty:first-child::before {
+      content: attr(data-placeholder);
+      float: left;
+      color: #adb5bd;
+      pointer-events: none;
+      width: 100%;
+      height: 0;
+    }
+    p.is-editor-empty:first-child::before {
+      float: left;
+      height: 0;
+      color: #adb5bd;
+      pointer-events: none;
+      width: 100%;
+      content: attr(data-placeholder);
+    }
+    .ProseMirror-gapcursor {
+      @apply relative w-full max-w-2xl mx-auto;
+
+      &:after {
+        @apply border-t-black/40 dark:border-t-white/40 w-full top-[-1.5em] max-w-2xl mx-auto left-0 right-0;
+      }
+    }
+
+    .image-view {
+      $root: &;
+
+      display: inline-block;
+      float: none;
+      max-width: 100%;
+      line-height: 0;
+      vertical-align: baseline;
+      user-select: none;
+
+      &__body {
+        position: relative;
+        display: inline-block;
+        max-width: 100%;
+        clear: both;
+        outline: transparent solid 2px;
+        transition: all 0.2s ease-in;
+
+        &__button-wrap {
+          display: none;
+          justify-content: center;
+          align-items: center;
+          position: absolute;
+          top: 9px;
+          right: 9px;
+          background: rgba(38, 38, 38, 0.6);
+          border-radius: 8px;
+          z-index: 4;
+        }
+
+        &:hover {
+          outline-color: #ffc83d;
+          .image-view__body__button-wrap {
+            display: block;
+          }
+        }
+
+        &--focused:hover,
+        &--resizing:hover {
+          outline-color: hsl(var(--primary));
+        }
+
+        &__placeholder {
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+        }
+
+        &__image {
+          margin: 0;
+          cursor: pointer !important;
+        }
+      }
+
+      .image-view__body--focused {
+        outline-color: hsl(var(--primary)) !important;
+      }
+
+      &.focus {
+        img {
+          @apply outline-primary outline-2 outline;
+        }
+      }
+
+      img {
+        display: inline;
+        vertical-align: baseline;
+      }
+    }
+
+    .image-resizer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+      @apply border !important;
+      @apply border-border !important;
+
+      &__handler {
+        position: absolute;
+        z-index: 2;
+        box-sizing: border-box;
+        display: block;
+        width: 12px;
+        height: 12px;
+        border: 1px solid #fff;
+        border-radius: 2px;
+        background-color: hsl(var(--primary));
+
+        &--tl {
+          top: -6px;
+          left: -6px;
+          cursor: nw-resize;
+        }
+
+        &--tr {
+          top: -6px;
+          right: -6px;
+          cursor: ne-resize;
+        }
+
+        &--bl {
+          bottom: -6px;
+          left: -6px;
+          cursor: sw-resize;
+        }
+
+        &--br {
+          right: -6px;
+          bottom: -6px;
+          cursor: se-resize;
+        }
+      }
+    }
+  }
+  /*  */
+  &.dense {
+    .ProseMirror {
+      min-height: 32px;
+      padding: 6px 12px;
+    }
+
+    p {
+      padding: 0;
+      line-height: 1.2rem;
+    }
+  }
+
+  .ProseMirror[contenteditable='true'].resize-cursor {
+    cursor: col-resize;
+  }
+}
+
+.slash-command-active.slash-command-active {
+  background-color: hsl(var(--accent)) !important;
+}
+
+[data-dui-1-3-5~='dui-tooltip-wrapper'] {
+  display: inline-block;
+  position: relative;
+}
+
+.heading-0 {
+  font-weight: 700;
+  font-size: 16px;
+}
+.heading-1 {
+  font-weight: 700;
+  font-size: 28px;
+  line-height: 1.6;
+}
+.heading-2 {
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 1.6;
+}
+.heading-3 {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.6;
+}
+.heading-4 {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.6;
+}
+.heading-5 {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.6;
+}
+.heading-6 {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.6;
+}
+
+.tableCellActive {
+  border-radius: 2px !important;
+  transition: all 100ms ease-in-out;
+}
+
+.tableCellActive > div {
+  border: unset !important;
+}
+
+.node-tableOfContents.focus {
+  border-width: 1px;
+  border-radius: 6px;
+}
+
+div[data-twitter] > div {
+  margin: 10px auto;
+}
+
+.react-renderer.node-twitter.focus {
+  border-width: 1px;
+  border-radius: 6px;
+}

package/src/styles/global.scss

@@ -0,0 +1,87 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+
+    --accent: 0 0% 88.24%;
+    --accent-foreground: 240 5.9% 10%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --ring: 240 10% 3.9%;
+
+    --radius: 0.5rem;
+
+    --red: #FF5C33;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --ring: 240 4.9% 83.9%;
+
+    --red: #FF5C33;
+  }
+}
+
+// https://github.com/radix-ui/primitives/issues/1496
+html body[data-scroll-locked] {
+  --removed-body-scroll-bar-size: 0 !important;
+  // margin-right: 0 !important;
+  position: initial !important;
+}
+
+/* Character count */
+.character-count {
+  &--warning {
+    color: var(--red) !important;
+  }
+}

package/src/styles/index.scss

@@ -0,0 +1,5 @@
+@use './global';
+@use './editor';
+@use './ProseMirror';
+@use './columns';
+@use './mention';

package/src/styles/mention.scss

@@ -0,0 +1,6 @@
+.mention {
+  padding: 2px 6px;
+  color: #fff;
+  background-color: #666e76;
+  border-radius: 6px;
+}

package/src/theme/theme.ts

@@ -0,0 +1,15 @@
+import { useStoreTheme } from '@/store/store';
+import { dispatchEvent } from '@/utils/customEvents/customEvents';
+import { EVENTS } from '@/utils/customEvents/events.constant';
+
+export function useTheme() {
+  const [v] = useStoreTheme(store => store.value);
+
+  return v;
+}
+
+export const themeActions = {
+  setTheme: (id: any, theme: string) => {
+    dispatchEvent(EVENTS.UPDATE_THEME(id), theme);
+  },
+};