reactjs-tiptap-editor-pro 0.2.31 → 0.2.33

package/src/styles/editor.scss

@@ -1,411 +0,0 @@
-.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

@@ -1,87 +0,0 @@
-@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

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

package/src/styles/mention.scss

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

package/src/theme/theme.ts

@@ -1,15 +0,0 @@
-import { useStoreTheme } from 'reactjs-tiptap-editor-pro/store/store';
-import { dispatchEvent } from 'reactjs-tiptap-editor-pro/utils/customEvents/customEvents';
-import { EVENTS } from 'reactjs-tiptap-editor-pro/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);
-  },
-};