@halo-dev/richtext-editor 0.0.0-alpha.30 → 0.0.0-alpha.32

package/dist/style.css

@@ -1,4 +1,17 @@
-.tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}.halo-rich-text-editor {
+
+.v-popper__popper.v-popper__popper--show-from .v-popper__wrapper {
+  transform: scale(0.9);
+}
+.v-popper__popper.v-popper__popper--show-to .v-popper__wrapper {
+  transform: none;
+  transition: transform 0.1s;
+}
+
+.bubble-menu[data-v-205ae298] {
+  max-width: calc(100vw - 30px);
+  overflow-x: auto;
+}
+.halo-rich-text-editor {
   box-sizing: border-box;
   height: calc(100% - 48px);
   width: 100%;
@@ -7,14 +20,16 @@
   height: 48px;
 }
 .halo-rich-text-editor .editor-content {
-  height: 100%;
   width: 100%;
+  position: relative;
 }
 .halo-rich-text-editor .editor-content .ProseMirror {
-  height: 100%;
-  overflow: auto;
   outline: none !important;
-  padding: 15px;
+  padding: 15px 20px;
+}
+.halo-rich-text-editor .editor-content .ProseMirror p {
+  margin-top: 0.75em;
+  margin-bottom: 0;
 }
 .halo-rich-text-editor .editor-content .ProseMirror p.is-empty::before {
   content: attr(data-placeholder);
@@ -60,59 +75,293 @@
 .halo-rich-text-editor .editor-content .ProseMirror code br {
   display: block;
 }
-.halo-rich-text-editor .editor-content .ProseMirror table {
+@media screen and (min-width: 640px) {
+  .halo-rich-text-editor .ProseMirror {
+    padding: 15px 10% !important;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .halo-rich-text-editor .ProseMirror {
+    padding: 15px 20% !important;
+  }
+}
+.v-popper--theme-editor-block-dropdown .v-popper__inner {
+  border-radius: 0.375rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+.v-popper--theme-editor-block-dropdown .v-popper__arrow-container {
+  display: none;
+}
+.halo-rich-text-editor .ProseMirror .tableWrapper {
+  position: relative;
+  margin: 0.5em 0px;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.halo-rich-text-editor .ProseMirror .tableWrapper.has-focus .scrollWrapper {
+  margin-top: -20px;
+}
+.halo-rich-text-editor .ProseMirror .scrollWrapper {
+  width: -moz-max-content;
+  width: max-content;
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+  transition: border 250ms ease-in-out 0s;
+}
+.halo-rich-text-editor .ProseMirror table {
+  width: 100%;
   border-collapse: collapse;
-  table-layout: fixed;
+  border-radius: 4px;
+  overflow: initial;
+  padding-left: 26px;
+  padding-top: 26px;
+  box-sizing: border-box;
+}
+.halo-rich-text-editor .ProseMirror table * {
+  box-sizing: border-box;
+}
+.halo-rich-text-editor .ProseMirror table tr {
+  position: relative;
+  border-bottom: 1px solid #d8d8d8;
+}
+.halo-rich-text-editor .ProseMirror table th {
+  background: #f6f8fa;
+}
+.halo-rich-text-editor .ProseMirror table td {
+  background: #fff;
+}
+.halo-rich-text-editor .ProseMirror table td,
+.halo-rich-text-editor .ProseMirror table th {
+  vertical-align: top;
+  border: 1px solid #d8d8d8;
+  position: relative;
+  padding: 12px 8px;
+  text-align: left;
+  min-width: 100px;
+  z-index: 1;
+}
+.halo-rich-text-editor .ProseMirror table td > *,
+.halo-rich-text-editor .ProseMirror table th > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.halo-rich-text-editor .ProseMirror table .selectedCell {
+  position: relative;
+  border: 1px solid rgb(0, 101, 255);
+}
+.halo-rich-text-editor .ProseMirror table .selectedCell::after {
+  box-sizing: content-box;
+  height: 100%;
+  width: 100%;
+  border: 1px solid rgb(0, 101, 255);
+  content: "";
+  position: absolute;
+  left: -1px;
+  top: -1px;
+  bottom: 0px;
+  z-index: 12;
+  display: inline-block;
+  pointer-events: none;
+}
+.halo-rich-text-editor .ProseMirror .grip-column {
+  position: absolute;
+  top: -12px;
+  left: -1px;
   width: 100%;
-  margin: 0;
-  overflow: hidden;
 }
-.halo-rich-text-editor .editor-content .ProseMirror table .selectedCell:after {
-  z-index: 2;
+.halo-rich-text-editor .ProseMirror .grip-column > div {
   position: absolute;
+  top: -18px;
+  left: 100%;
+  transform: translateX(-8px);
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  font-size: 0;
+  cursor: pointer;
+}
+.halo-rich-text-editor .ProseMirror .grip-column > div .plus-icon {
+  font-size: inherit;
+}
+.halo-rich-text-editor .ProseMirror .grip-column::before {
+  content: "";
+  position: absolute;
+  left: 100%;
+  bottom: 4px;
+  transform: translateX(-1px);
+  width: 4px;
+  height: 4px;
+  background-color: #d8d8d8;
+  border-radius: 50%;
+  display: block;
+}
+.halo-rich-text-editor .ProseMirror .grip-column::after {
+  box-sizing: content-box;
   content: "";
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 10px;
+  background: #f6f8fa;
+  border: 1px solid #d8d8d8;
+  display: block;
+}
+.halo-rich-text-editor .ProseMirror .grip-column:hover {
+  color: rgb(0, 101, 255);
+}
+.halo-rich-text-editor .ProseMirror .grip-column:hover > div {
+  font-size: 14px;
+}
+.halo-rich-text-editor .ProseMirror .grip-column:hover::before {
+  display: none;
+}
+.halo-rich-text-editor .ProseMirror .grip-column:hover::after {
+  background: #2584ff;
+  border-color: #2584ff;
+}
+.halo-rich-text-editor .ProseMirror .grip-column.last::after {
+  border-top-right-radius: 3px;
+}
+.halo-rich-text-editor .ProseMirror .grip-column.selected::after {
+  background: #2584ff;
+  border-color: #2584ff;
+}
+.halo-rich-text-editor .ProseMirror .grip-row {
+  position: absolute;
+  left: -12px;
+  top: -1px;
+  height: 100%;
+}
+.halo-rich-text-editor .ProseMirror .grip-row > div {
+  transform: translateY(8px);
+  position: absolute;
+  left: -16px;
+  bottom: 4px;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  font-size: 0;
+  cursor: pointer;
+}
+.halo-rich-text-editor .ProseMirror .grip-row > div .plus-icon {
+  font-size: inherit;
+}
+.halo-rich-text-editor .ProseMirror .grip-row::before {
+  content: "";
+  position: absolute;
+  left: -10px;
+  bottom: -2px;
+  width: 4px;
+  height: 4px;
+  background-color: #d8d8d8;
+  border-radius: 50%;
+  display: block;
+}
+.halo-rich-text-editor .ProseMirror .grip-row::after {
+  box-sizing: content-box;
+  content: "";
+  cursor: pointer;
+  position: absolute;
   left: 0;
-  right: 0;
   top: 0;
-  bottom: 0;
-  background: rgba(200, 200, 255, 0.4);
-  pointer-events: none;
+  height: 100%;
+  width: 10px;
+  background: #f6f8fa;
+  border: 1px solid #d8d8d8;
+  display: block;
 }
-.halo-rich-text-editor .editor-content .ProseMirror table th,
-.halo-rich-text-editor .editor-content .ProseMirror table td {
-  min-width: 1em;
-  border: 2px solid #ced4da;
-  padding: 3px 5px;
-  vertical-align: top;
-  box-sizing: border-box;
-  position: relative;
-  border-width: 1px;
+.halo-rich-text-editor .ProseMirror .grip-row:hover {
+  color: rgb(0, 101, 255);
 }
-.halo-rich-text-editor .editor-content .ProseMirror table th > *,
-.halo-rich-text-editor .editor-content .ProseMirror table td > * {
-  margin-top: 0;
-  margin-bottom: 0;
+.halo-rich-text-editor .ProseMirror .grip-row:hover > div {
+  font-size: 14px;
+}
+.halo-rich-text-editor .ProseMirror .grip-row:hover::before {
+  display: none;
 }
-.halo-rich-text-editor .editor-content .ProseMirror table .column-resize-handle {
+.halo-rich-text-editor .ProseMirror .grip-row:hover::after {
+  background: #2584ff;
+  border-color: rgb(0, 101, 255);
+}
+.halo-rich-text-editor .ProseMirror .grip-row.last::after {
+  border-bottom-left-radius: 3px;
+}
+.halo-rich-text-editor .ProseMirror .grip-row.selected::after {
+  background: #2584ff;
+  border-color: rgb(0, 101, 255);
+}
+.halo-rich-text-editor .ProseMirror .grip-table::after {
+  box-sizing: content-box;
+  content: "";
+  cursor: pointer;
+  position: absolute;
+  top: -12px;
+  left: -12px;
+  display: block;
+  background: #f6f8fa;
+  width: 10px;
+  height: 10px;
+  border: 1px solid #d8d8d8;
+  border-top-left-radius: 3px;
+}
+.halo-rich-text-editor .ProseMirror .grip-table:hover::after {
+  background: #2584ff;
+  border-color: rgb(0, 101, 255);
+}
+.halo-rich-text-editor .ProseMirror .grip-table.selected::after {
+  background: #2584ff;
+  border-color: rgb(0, 101, 255);
+}
+.halo-rich-text-editor .ProseMirror .column-resize-handle {
   position: absolute;
-  right: -2px;
   top: 0;
+  right: -2px;
   bottom: -2px;
   width: 4px;
-  background-color: #adf;
   pointer-events: none;
-  cursor: col-resize !important;
+  background-color: #adf;
+  z-index: 1;
 }
-
-.v-popper--theme-editor-block-dropdown .v-popper__inner {
-  border-radius: 0.375rem;
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+.halo-rich-text-editor .ProseMirror.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
 }
-.v-popper--theme-editor-block-dropdown .v-popper__arrow-container {
-  display: none;
+[data-drag-handle] {
+  position: absolute;
+  z-index: 100;
+  display: inline;
+  width: 16px;
+  height: 16px;
+  cursor: move;
+  background-color: #fff;
+  opacity: 0;
+  transition: opacity 0.3s ease-out;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='1' width='3' height='3' rx='1.5' fill='%23111'/%3E%3Crect x='10' y='1' width='3' height='3' rx='1.5' fill='%23111'/%3E%3Crect x='3' y='6' width='3' height='3' rx='1.5' fill='%23111'/%3E%3Crect x='10' y='6' width='3' height='3' rx='1.5' fill='%23111'/%3E%3Crect x='3' y='11' width='3' height='3' rx='1.5' fill='%23111'/%3E%3Crect x='10' y='11' width='3' height='3' rx='1.5' fill='%23111'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-position: center 0;
+  background-repeat: no-repeat;
+}
+[data-drag-handle].show {
+  opacity: 0.3;
+}
+[data-drag-handle].show:hover {
+  opacity: 1;
+}
+[data-drag-handle].hide {
+  opacity: 0;
+}
+.halo-rich-text-editor .ProseMirror .columns {
+  margin-top: 0.75em;
+}
+.halo-rich-text-editor .ProseMirror .columns .column {
+  border: 1px solid #e7e9e8;
+  border-radius: 6px;
+  position: relative;
 }/*
 ! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
 *//*
@@ -710,8 +959,13 @@ video {
 .w-full {
   width: 100%;
 }
-.-rotate-90 {
-  --tw-rotate: -90deg;
+.flex-1 {
+  flex: 1 1 0%;
+}
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+.transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 .cursor-not-allowed {
@@ -797,6 +1051,9 @@ video {
 .overflow-y-auto {
   overflow-y: auto;
 }
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
 .rounded {
   border-radius: 0.25rem;
 }
@@ -854,12 +1111,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
-.p-0 {
-  padding: 0px;
-}
-.p-0\.5 {
-  padding: 0.125rem;
-}
 .p-1 {
   padding: 0.25rem;
 }
@@ -967,6 +1218,13 @@ video {
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1013,10 +1271,6 @@ video {
     display: block !important;
   }
 
-  .sm\:\!w-\[calc\(100\%-18rem\)\] {
-    width: calc(100% - 18rem) !important;
-  }
-
   .sm\:\!justify-center {
     justify-content: center !important;
   }
@@ -2184,4 +2438,31 @@ pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5p
     line-height: 1rem;
     --tw-text-opacity: 1;
     color: rgb(75 85 99 / var(--tw-text-opacity))
+}.editor-block__actions-input {
+    display: block;
+    width: 8rem;
+    border-radius: 0.375rem;
+    border-width: 1px;
+    --tw-border-opacity: 1;
+    border-color: rgb(209 213 219 / var(--tw-border-opacity));
+    --tw-bg-opacity: 1;
+    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    --tw-text-opacity: 1;
+    color: rgb(17 24 39 / var(--tw-text-opacity))
+}
+.editor-block__actions-input:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(243 244 246 / var(--tw-bg-opacity))
+}
+.editor-block__actions-input:focus {
+    --tw-border-opacity: 1;
+    border-color: rgb(59 130 246 / var(--tw-border-opacity));
+    --tw-ring-opacity: 1;
+    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity))
 }

package/dist/types/index.d.ts

@@ -0,0 +1,117 @@
+import type { Editor, Range } from "@tiptap/core";
+import type { Node, ResolvedPos, Slice } from "@tiptap/pm/model";
+import type { EditorState } from "@tiptap/pm/state";
+import type { EditorView } from "@tiptap/pm/view";
+import type { Component } from "vue";
+export interface ToolbarItem {
+    priority: number;
+    component: Component;
+    props: {
+        editor: Editor;
+        isActive: boolean;
+        disabled?: boolean;
+        icon?: Component;
+        title?: string;
+        action?: () => void;
+    };
+    children?: ToolbarItem[];
+}
+interface BubbleMenuProps {
+    pluginKey?: string;
+    editor?: Editor;
+    shouldShow: (props: {
+        editor: Editor;
+        state: EditorState;
+        node?: HTMLElement;
+        view?: EditorView;
+        oldState?: EditorState;
+        from?: number;
+        to?: number;
+    }) => boolean;
+    tippyOptions?: Record<string, unknown>;
+    getRenderContainer?: (node: HTMLElement) => HTMLElement;
+    defaultAnimation?: boolean;
+}
+export interface NodeBubbleMenu extends BubbleMenuProps {
+    component?: Component;
+    items?: BubbleItem[];
+}
+export interface BubbleItem {
+    priority: number;
+    component?: Component;
+    props?: {
+        isActive?: ({ editor }: {
+            editor: Editor;
+        }) => boolean;
+        visible?: ({ editor }: {
+            editor: Editor;
+        }) => boolean;
+        icon?: Component;
+        iconStyle?: string;
+        title?: string;
+        action?: ({ editor }: {
+            editor: Editor;
+        }) => Component | void;
+    };
+}
+export interface ToolboxItem {
+    priority: number;
+    component: Component;
+    props: {
+        editor: Editor;
+        icon?: Component;
+        title?: string;
+        description?: string;
+        action?: () => void;
+    };
+}
+export interface ExtensionOptions {
+    getToolbarItems?: ({ editor, }: {
+        editor: Editor;
+    }) => ToolbarItem | ToolbarItem[];
+    getCommandMenuItems?: () => CommandMenuItem | CommandMenuItem[];
+    getBubbleMenu?: ({ editor }: {
+        editor: Editor;
+    }) => NodeBubbleMenu;
+    getToolboxItems?: ({ editor, }: {
+        editor: Editor;
+    }) => ToolboxItem | ToolboxItem[];
+    getDraggable?: ({ editor }: {
+        editor: Editor;
+    }) => DraggableItem | boolean;
+}
+export interface CommandMenuItem {
+    priority: number;
+    icon: Component;
+    title: string;
+    keywords: string[];
+    command: ({ editor, range }: {
+        editor: Editor;
+        range: Range;
+    }) => void;
+}
+export interface DragSelectionNode {
+    $pos?: ResolvedPos;
+    node?: Node;
+    el: HTMLElement;
+    nodeOffset?: number;
+    dragDomOffset?: {
+        x?: number;
+        y?: number;
+    };
+}
+export interface DraggableItem {
+    getRenderContainer?: ({ dom, view, }: {
+        dom: HTMLElement;
+        view: EditorView;
+    }) => DragSelectionNode;
+    handleDrop?: ({ view, event, slice, insertPos, node, }: {
+        view: EditorView;
+        event: DragEvent;
+        slice: Slice;
+        insertPos: number;
+        node: Node;
+    }) => boolean | void;
+    allowPropagationDownward?: boolean;
+}
+export {};

package/dist/utils/delete-node.d.ts

@@ -0,0 +1,2 @@
+import type { Editor } from "@tiptap/core";
+export declare const deleteNode: (nodeType: string, editor: Editor) => boolean;

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export * from "./delete-node";