quill-table-up 3.1.2 → 3.2.0

package/src/utils/components/tooltip.ts

@@ -1,189 +1,179 @@
-import {
-  autoUpdate,
-  computePosition,
-  flip,
-  limitShift,
-  offset,
-  shift,
-} from '@floating-ui/dom';
-import { createBEM } from '../bem';
-import { handleIfTransitionend } from '../transition-event-helper';
-
-export interface ToolTipOptions {
-  direction?:
-    | 'top'
-    | 'top-start'
-    | 'top-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'right'
-    | 'right-start'
-    | 'right-end'
-    | 'left'
-    | 'left-start'
-    | 'left-end';
-  msg?: string;
-  delay?: number;
-  content?: HTMLElement;
-  container?: HTMLElement;
-  type?: 'hover' | 'click';
-  onOpen?: (force?: boolean) => boolean;
-  onClose?: (force?: boolean) => boolean;
-  closed?: () => void;
-  onDestroy?: () => void;
-}
-const DISTANCE = 4;
-let tooltipContainer: HTMLElement;
-export interface TooltipInstance {
-  destroy: () => void;
-  show: (force?: boolean) => void;
-  hide: (force?: boolean) => void;
-}
-export function createTooltip(target: HTMLElement, options: ToolTipOptions = {}): TooltipInstance | null {
-  const { msg = '', delay = 150, content, direction = 'bottom', type = 'hover', container, onOpen, onClose, closed, onDestroy } = options;
-  const bem = createBEM('tooltip');
-  if (msg || content) {
-    if (!tooltipContainer) {
-      tooltipContainer = document.createElement('div');
-    }
-    const appendTo = container || tooltipContainer;
-    const tooltip = document.createElement('div');
-    tooltip.classList.add(bem.b(), 'hidden', 'transparent');
-    if (content) {
-      tooltip.appendChild(content);
-    }
-    else if (msg) {
-      tooltip.textContent = msg;
-    }
-    let showTimer: ReturnType<typeof setTimeout> | undefined;
-    let closeTimer: ReturnType<typeof setTimeout> | undefined;
-    let cleanup: () => void;
-    const update = () => {
-      if (cleanup) cleanup();
-      computePosition(target, tooltip, {
-        placement: direction,
-        middleware: [flip(), shift({ limiter: limitShift() }), offset(DISTANCE)],
-      }).then(({ x, y }) => {
-        Object.assign(tooltip.style, {
-          left: `${x}px`,
-          top: `${y}px`,
-        });
-      });
-    };
-    const transitionendHandler = () => {
-      tooltip.classList.add('hidden');
-      if (appendTo.contains(tooltip)) {
-        appendTo.removeChild(tooltip);
-        if (appendTo === tooltipContainer && !tooltipContainer.hasChildNodes()) {
-          document.body.removeChild(tooltipContainer);
-        }
-      }
-      if (cleanup) cleanup();
-      if (closed) closed();
-    };
-
-    const openTooltip = (force: boolean = false) => {
-      if (closeTimer) clearTimeout(closeTimer);
-
-      showTimer = setTimeout(() => {
-        if (onOpen) {
-          const allow = onOpen(force);
-          if (!force && allow) return;
-        }
-        if (appendTo === tooltipContainer && !tooltipContainer.parentElement) {
-          document.body.appendChild(tooltipContainer);
-        }
-        appendTo.appendChild(tooltip);
-        tooltip.removeEventListener('transitionend', transitionendHandler);
-        tooltip.classList.remove('hidden');
-
-        cleanup = autoUpdate(target, tooltip, update);
-
-        tooltip.classList.remove('transparent');
-      }, delay);
-    };
-    const closeTooltip = (force: boolean = false) => {
-      if (showTimer) clearTimeout(showTimer);
-      closeTimer = setTimeout(() => {
-        if (onClose) {
-          const allow = onClose(force);
-          if (!force && allow) return;
-        }
-        handleIfTransitionend(tooltip, 150, transitionendHandler, { once: true });
-        tooltip.classList.add('transparent');
-      }, delay);
-    };
-
-    const hoverDisplay = () => {
-      const eventListeners = [target, tooltip];
-      const close = closeTooltip.bind(undefined, false);
-      const open = openTooltip.bind(undefined, false);
-      const prepare = () => {
-        for (const listener of eventListeners) {
-          listener.addEventListener('mouseenter', open);
-          listener.addEventListener('mouseleave', close);
-        }
-      };
-      return {
-        prepare,
-        show: openTooltip,
-        hide: closeTooltip,
-        destroy: () => {
-          for (const listener of eventListeners) {
-            listener.removeEventListener('mouseenter', open);
-            listener.removeEventListener('mouseleave', close);
-          }
-        },
-      };
-    };
-    const clickDisplay = () => {
-      const close = (e: MouseEvent) => {
-        e.stopPropagation();
-        closeTooltip(false);
-      };
-      const show = (e: MouseEvent) => {
-        e.stopPropagation();
-        openTooltip();
-        document.removeEventListener('click', close);
-        document.addEventListener('click', close, { once: true });
-      };
-      return {
-        prepare: () => {
-          tooltip.addEventListener('click', (e: Event) => e.stopPropagation());
-          target.addEventListener('click', show);
-        },
-        show: openTooltip,
-        hide: (force: boolean = false) => {
-          closeTooltip(force);
-          document.removeEventListener('click', close);
-        },
-        destroy: () => {
-          target.removeEventListener('click', show);
-          document.removeEventListener('click', close);
-        },
-      };
-    };
-    const displayMethods = {
-      hover: hoverDisplay,
-      click: clickDisplay,
-    };
-
-    const { prepare, show, hide, destroy: destroyDisplay } = displayMethods[type]();
-    prepare();
-
-    const destroy = () => {
-      hide(true);
-      if (onDestroy) onDestroy();
-      destroyDisplay();
-      if (cleanup) cleanup();
-      tooltip.remove();
-    };
-    return {
-      show,
-      hide,
-      destroy,
-    };
-  }
-  return null;
-}
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  limitShift,
+  offset,
+  shift,
+} from '@floating-ui/dom';
+import { createBEM } from '../bem';
+import { handleIfTransitionend } from '../transition-event-helper';
+
+export interface ToolTipOptions {
+  direction?:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end';
+  msg?: string;
+  delay?: number;
+  content?: HTMLElement;
+  container?: HTMLElement;
+  type?: 'hover' | 'click';
+  onOpen?: (force?: boolean) => boolean;
+  onClose?: (force?: boolean) => boolean;
+  closed?: () => void;
+  onDestroy?: () => void;
+}
+const DISTANCE = 4;
+export interface TooltipInstance {
+  destroy: () => void;
+  show: (force?: boolean) => void;
+  hide: (force?: boolean) => void;
+}
+export function createTooltip(target: HTMLElement, options: ToolTipOptions = {}): TooltipInstance | null {
+  const { msg = '', delay = 150, content, direction = 'bottom', type = 'hover', container, onOpen, onClose, closed, onDestroy } = options;
+  const bem = createBEM('tooltip');
+  if (msg || content) {
+    const appendTo = container || document.body;
+    const tooltip = document.createElement('div');
+    tooltip.classList.add(bem.b(), 'hidden', 'transparent');
+    if (content) {
+      tooltip.appendChild(content);
+    }
+    else if (msg) {
+      tooltip.textContent = msg;
+    }
+    let showTimer: ReturnType<typeof setTimeout> | undefined;
+    let closeTimer: ReturnType<typeof setTimeout> | undefined;
+    let cleanup: () => void;
+    const update = () => {
+      if (cleanup) cleanup();
+      computePosition(target, tooltip, {
+        placement: direction,
+        middleware: [flip(), shift({ limiter: limitShift() }), offset(DISTANCE)],
+      }).then(({ x, y }) => {
+        Object.assign(tooltip.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      });
+    };
+    const transitionendHandler = () => {
+      tooltip.classList.add('hidden');
+      if (appendTo.contains(tooltip)) {
+        appendTo.removeChild(tooltip);
+      }
+      if (cleanup) cleanup();
+      if (closed) closed();
+    };
+
+    const openTooltip = (force: boolean = false) => {
+      if (closeTimer) clearTimeout(closeTimer);
+
+      showTimer = setTimeout(() => {
+        if (onOpen) {
+          const allow = onOpen(force);
+          if (!force && allow) return;
+        }
+        appendTo.appendChild(tooltip);
+        tooltip.removeEventListener('transitionend', transitionendHandler);
+        tooltip.classList.remove('hidden');
+
+        cleanup = autoUpdate(target, tooltip, update);
+
+        tooltip.classList.remove('transparent');
+      }, delay);
+    };
+    const closeTooltip = (force: boolean = false) => {
+      if (showTimer) clearTimeout(showTimer);
+      closeTimer = setTimeout(() => {
+        if (onClose) {
+          const allow = onClose(force);
+          if (!force && allow) return;
+        }
+        handleIfTransitionend(tooltip, 150, transitionendHandler, { once: true });
+        tooltip.classList.add('transparent');
+      }, delay);
+    };
+
+    const hoverDisplay = () => {
+      const eventListeners = [target, tooltip];
+      const close = closeTooltip.bind(undefined, false);
+      const open = openTooltip.bind(undefined, false);
+      const prepare = () => {
+        for (const listener of eventListeners) {
+          listener.addEventListener('mouseenter', open);
+          listener.addEventListener('mouseleave', close);
+        }
+      };
+      return {
+        prepare,
+        show: openTooltip,
+        hide: closeTooltip,
+        destroy: () => {
+          for (const listener of eventListeners) {
+            listener.removeEventListener('mouseenter', open);
+            listener.removeEventListener('mouseleave', close);
+          }
+        },
+      };
+    };
+    const clickDisplay = () => {
+      const close = (e: MouseEvent) => {
+        e.stopPropagation();
+        closeTooltip(false);
+      };
+      const show = (e: MouseEvent) => {
+        e.stopPropagation();
+        openTooltip();
+        document.removeEventListener('click', close);
+        document.addEventListener('click', close, { once: true });
+      };
+      return {
+        prepare: () => {
+          tooltip.addEventListener('click', (e: Event) => e.stopPropagation());
+          target.addEventListener('click', show);
+        },
+        show: openTooltip,
+        hide: (force: boolean = false) => {
+          closeTooltip(force);
+          document.removeEventListener('click', close);
+        },
+        destroy: () => {
+          target.removeEventListener('click', show);
+          document.removeEventListener('click', close);
+        },
+      };
+    };
+    const displayMethods = {
+      hover: hoverDisplay,
+      click: clickDisplay,
+    };
+
+    const { prepare, show, hide, destroy: destroyDisplay } = displayMethods[type]();
+    prepare();
+
+    const destroy = () => {
+      hide(true);
+      if (onDestroy) onDestroy();
+      destroyDisplay();
+      if (cleanup) cleanup();
+      tooltip.remove();
+    };
+    return {
+      show,
+      hide,
+      destroy,
+    };
+  }
+  return null;
+}

package/src/utils/constants.ts

@@ -1,124 +1,125 @@
-import type { Parchment as TypeParchment } from 'quill';
-
-export const blotName = {
-  container: 'table-up-container',
-  tableCaption: 'table-up-caption',
-  tableWrapper: 'table-up',
-  tableMain: 'table-up-main',
-  tableColgroup: 'table-up-colgroup',
-  tableCol: 'table-up-col',
-  tableHead: 'table-up-head',
-  tableBody: 'table-up-body',
-  tableFoot: 'table-up-foot',
-  tableRow: 'table-up-row',
-  tableCell: 'table-up-cell',
-  tableCellInner: 'table-up-cell-inner',
-} as const;
-
-export const tableUpSize = {
-  colMinWidthPre: 5,
-  colMinWidthPx: 40,
-  colDefaultWidth: 100,
-  rowMinHeightPx: 36,
-};
-
-export const tableUpEvent = {
-  AFTER_TABLE_RESIZE: 'after-table-resize',
-  TABLE_SELECTION_DRAG_START: 'table-selection-drag-start',
-  TABLE_SELECTION_DRAG_END: 'table-selection-drag-end',
-  TABLE_SELECTION_CHANGE: 'table-selection-change',
-  TABLE_SELECTION_DISPLAY_CHANGE: 'table-selection-display-change',
-};
-
-export const tableUpInternal = {
-  moduleName: 'table-up',
-};
-
-export const defaultColorMap = [
-  [
-    'rgb(255, 255, 255)',
-    'rgb(0, 0, 0)',
-    'rgb(72, 83, 104)',
-    'rgb(41, 114, 244)',
-    'rgb(0, 163, 245)',
-    'rgb(49, 155, 98)',
-    'rgb(222, 60, 54)',
-    'rgb(248, 136, 37)',
-    'rgb(245, 196, 0)',
-    'rgb(153, 56, 215)',
-  ],
-  [
-    'rgb(242, 242, 242)',
-    'rgb(127, 127, 127)',
-    'rgb(243, 245, 247)',
-    'rgb(229, 239, 255)',
-    'rgb(229, 246, 255)',
-    'rgb(234, 250, 241)',
-    'rgb(254, 233, 232)',
-    'rgb(254, 243, 235)',
-    'rgb(254, 249, 227)',
-    'rgb(253, 235, 255)',
-  ],
-  [
-    'rgb(216, 216, 216)',
-    'rgb(89, 89, 89)',
-    'rgb(197, 202, 211)',
-    'rgb(199, 220, 255)',
-    'rgb(199, 236, 255)',
-    'rgb(195, 234, 213)',
-    'rgb(255, 201, 199)',
-    'rgb(255, 220, 196)',
-    'rgb(255, 238, 173)',
-    'rgb(242, 199, 255)',
-  ],
-  [
-    'rgb(191, 191, 191)',
-    'rgb(63, 63, 63)',
-    'rgb(128, 139, 158)',
-    'rgb(153, 190, 255)',
-    'rgb(153, 221, 255)',
-    'rgb(152, 215, 182)',
-    'rgb(255, 156, 153)',
-    'rgb(255, 186, 132)',
-    'rgb(255, 226, 112)',
-    'rgb(213, 142, 255)',
-  ],
-  [
-    'rgb(165, 165, 165)',
-    'rgb(38, 38, 38)',
-    'rgb(53, 59, 69)',
-    'rgb(20, 80, 184)',
-    'rgb(18, 116, 165)',
-    'rgb(39, 124, 79)',
-    'rgb(158, 30, 26)',
-    'rgb(184, 96, 20)',
-    'rgb(163, 130, 0)',
-    'rgb(94, 34, 129)',
-  ],
-  [
-    'rgb(147, 147, 147)',
-    'rgb(13, 13, 13)',
-    'rgb(36, 39, 46)',
-    'rgb(12, 48, 110)',
-    'rgb(10, 65, 92)',
-    'rgb(24, 78, 50)',
-    'rgb(88, 17, 14)',
-    'rgb(92, 48, 10)',
-    'rgb(102, 82, 0)',
-    'rgb(59, 21, 81)',
-  ],
-];
-
-export const cssNamespace = 'table-up';
-
-// Blots that cannot be inserted into a table
-export const tableCantInsert: Set<string> = new Set([blotName.tableCellInner]);
-
-export const isForbidInTableBlot = (blot: TypeParchment.Blot) => tableCantInsert.has(blot.statics.blotName);
-export function isForbidInTable(current: TypeParchment.Blot): boolean {
-  return current && current.parent
-    ? isForbidInTableBlot(current.parent)
-      ? true
-      : isForbidInTable(current.parent)
-    : false;
-}
+import type { Parchment as TypeParchment } from 'quill';
+
+export const blotName = {
+  container: 'table-up-container',
+  tableCaption: 'table-up-caption',
+  tableWrapper: 'table-up',
+  tableMain: 'table-up-main',
+  tableColgroup: 'table-up-colgroup',
+  tableCol: 'table-up-col',
+  tableHead: 'table-up-head',
+  tableBody: 'table-up-body',
+  tableFoot: 'table-up-foot',
+  tableRow: 'table-up-row',
+  tableCell: 'table-up-cell',
+  tableCellInner: 'table-up-cell-inner',
+} as const;
+
+export const tableUpSize = {
+  colMinWidthPre: 5,
+  colMinWidthPx: 40,
+  colDefaultWidth: 100,
+  rowMinHeightPx: 36,
+};
+
+export const tableUpEvent = {
+  AFTER_TABLE_RESIZE: 'after-table-resize',
+  TABLE_SELECTION_DRAG_START: 'table-selection-drag-start',
+  TABLE_SELECTION_DRAG_END: 'table-selection-drag-end',
+  TABLE_SELECTION_CHANGE: 'table-selection-change',
+  TABLE_SELECTION_DISPLAY_CHANGE: 'table-selection-display-change',
+};
+
+export const tableUpInternal = {
+  moduleName: 'table-up',
+  tableSelectionName: 'table-selection',
+};
+
+export const defaultColorMap = [
+  [
+    'rgb(255, 255, 255)',
+    'rgb(0, 0, 0)',
+    'rgb(72, 83, 104)',
+    'rgb(41, 114, 244)',
+    'rgb(0, 163, 245)',
+    'rgb(49, 155, 98)',
+    'rgb(222, 60, 54)',
+    'rgb(248, 136, 37)',
+    'rgb(245, 196, 0)',
+    'rgb(153, 56, 215)',
+  ],
+  [
+    'rgb(242, 242, 242)',
+    'rgb(127, 127, 127)',
+    'rgb(243, 245, 247)',
+    'rgb(229, 239, 255)',
+    'rgb(229, 246, 255)',
+    'rgb(234, 250, 241)',
+    'rgb(254, 233, 232)',
+    'rgb(254, 243, 235)',
+    'rgb(254, 249, 227)',
+    'rgb(253, 235, 255)',
+  ],
+  [
+    'rgb(216, 216, 216)',
+    'rgb(89, 89, 89)',
+    'rgb(197, 202, 211)',
+    'rgb(199, 220, 255)',
+    'rgb(199, 236, 255)',
+    'rgb(195, 234, 213)',
+    'rgb(255, 201, 199)',
+    'rgb(255, 220, 196)',
+    'rgb(255, 238, 173)',
+    'rgb(242, 199, 255)',
+  ],
+  [
+    'rgb(191, 191, 191)',
+    'rgb(63, 63, 63)',
+    'rgb(128, 139, 158)',
+    'rgb(153, 190, 255)',
+    'rgb(153, 221, 255)',
+    'rgb(152, 215, 182)',
+    'rgb(255, 156, 153)',
+    'rgb(255, 186, 132)',
+    'rgb(255, 226, 112)',
+    'rgb(213, 142, 255)',
+  ],
+  [
+    'rgb(165, 165, 165)',
+    'rgb(38, 38, 38)',
+    'rgb(53, 59, 69)',
+    'rgb(20, 80, 184)',
+    'rgb(18, 116, 165)',
+    'rgb(39, 124, 79)',
+    'rgb(158, 30, 26)',
+    'rgb(184, 96, 20)',
+    'rgb(163, 130, 0)',
+    'rgb(94, 34, 129)',
+  ],
+  [
+    'rgb(147, 147, 147)',
+    'rgb(13, 13, 13)',
+    'rgb(36, 39, 46)',
+    'rgb(12, 48, 110)',
+    'rgb(10, 65, 92)',
+    'rgb(24, 78, 50)',
+    'rgb(88, 17, 14)',
+    'rgb(92, 48, 10)',
+    'rgb(102, 82, 0)',
+    'rgb(59, 21, 81)',
+  ],
+];
+
+export const cssNamespace = 'table-up';
+
+// Blots that cannot be inserted into a table
+export const tableCantInsert: Set<string> = new Set([blotName.tableCellInner]);
+
+export const isForbidInTableBlot = (blot: TypeParchment.Blot) => tableCantInsert.has(blot.statics.blotName);
+export function isForbidInTable(current: TypeParchment.Blot): boolean {
+  return current?.parent
+    ? isForbidInTableBlot(current.parent)
+      ? true
+      : isForbidInTable(current.parent)
+    : false;
+}