reactjs-tiptap-editor-pro 0.2.30 → 0.2.32

package/src/extensions/Highlight/components/HighlightActionButton.tsx

@@ -1,108 +0,0 @@
-import React, { useCallback, useState } from 'react';
-
-import type { TooltipContentProps } from '@radix-ui/react-tooltip';
-import { debounce } from 'lodash-es';
-
-import { ActionButton, Button, ColorPicker } from '@/components';
-import { IconComponent } from '@/components/icons';
-import type { ButtonViewReturnComponentProps } from '@/types';
-
-interface IPropsHighlightActionButton {
-  editor: any
-  tooltip?: string
-  disabled?: boolean
-  action?: ButtonViewReturnComponentProps['action']
-  isActive?: ButtonViewReturnComponentProps['isActive']
-  tooltipOptions?: TooltipContentProps
-  shortcutKeys?: string[]
-}
-
-function IconC({ fill }: any) {
-  return (
-    <svg
-      width="18px"
-      height="18px"
-      viewBox="0 0 256 256"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g id="icon/填充色" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
-        <g id="icon/背景颜色">
-          <g id="编组" fill="currentColor">
-            <g
-              transform="translate(119.502295, 137.878331) rotate(-135.000000) translate(-119.502295, -137.878331) translate(48.002295, 31.757731)"
-              id="矩形"
-            >
-              <path
-                d="M100.946943,60.8084699 L43.7469427,60.8084699 C37.2852111,60.8084699 32.0469427,66.0467383 32.0469427,72.5084699 L32.0469427,118.70847 C32.0469427,125.170201 37.2852111,130.40847 43.7469427,130.40847 L100.946943,130.40847 C107.408674,130.40847 112.646943,125.170201 112.646943,118.70847 L112.646943,72.5084699 C112.646943,66.0467383 107.408674,60.8084699 100.946943,60.8084699 Z M93.646,79.808 L93.646,111.408 L51.046,111.408 L51.046,79.808 L93.646,79.808 Z"
-                fillRule="nonzero"
-              />
-              <path
-                d="M87.9366521,16.90916 L87.9194966,68.2000001 C87.9183543,69.4147389 86.9334998,70.399264 85.7187607,70.4 L56.9423078,70.4 C55.7272813,70.4 54.7423078,69.4150264 54.7423078,68.2 L54.7423078,39.4621057 C54.7423078,37.2523513 55.5736632,35.1234748 57.0711706,33.4985176 L76.4832996,12.4342613 C78.9534987,9.75382857 83.1289108,9.5834005 85.8093436,12.0535996 C87.1658473,13.303709 87.9372691,15.0644715 87.9366521,16.90916 Z"
-                fillRule="evenodd"
-              />
-              <path
-                d="M131.3,111.241199 L11.7,111.241199 C5.23826843,111.241199 0,116.479467 0,122.941199 L0,200.541199 C0,207.002931 5.23826843,212.241199 11.7,212.241199 L131.3,212.241199 C137.761732,212.241199 143,207.002931 143,200.541199 L143,122.941199 C143,116.479467 137.761732,111.241199 131.3,111.241199 Z M124,130.241 L124,193.241 L19,193.241 L19,130.241 L124,130.241 Z"
-                fillRule="nonzero"
-              />
-            </g>
-          </g>
-          <path
-            d="M51,218 L205,218 C211.075132,218 216,222.924868 216,229 C216,235.075132 211.075132,240 205,240 L51,240 C44.9248678,240 40,235.075132 40,229 C40,222.924868 44.9248678,218 51,218 Z"
-            id="矩形"
-            fill={fill || '#FBDE28'}
-          />
-        </g>
-      </g>
-    </svg>
-  );
-}
-
-function HighlightActionButton(props: IPropsHighlightActionButton) {
-  // const { action, isActive, disabled, icon, tooltip } = props as any;
-  const [selectedColor, setSelectedColor] = useState<any>(undefined);
-
-  function onChange(color: string | undefined) {
-    props.action?.(color);
-  }
-
-  function toggleColor() {
-    props.action?.(selectedColor);
-  }
-
-  const setSelectedColorDebounce = useCallback(
-    debounce((color: any) => {
-      setSelectedColor(color);
-    }, 350),
-    [],
-  );
-
-  return (
-    <div className="flex items-center h-[32px]">
-      <ActionButton
-        tooltip={props?.tooltip}
-        disabled={props?.disabled}
-        action={toggleColor}
-        tooltipOptions={props?.tooltipOptions}
-        shortcutKeys={props?.shortcutKeys}
-      >
-        <span className="flex items-center justify-center text-sm">
-          <IconC fill={selectedColor} />
-        </span>
-      </ActionButton>
-      <ColorPicker
-        selectedColor={selectedColor}
-        setSelectedColor={setSelectedColorDebounce}
-        onChange={onChange}
-        highlight
-        disabled={props?.disabled}
-      >
-        <Button variant="ghost" size="icon" className="!w-3 !h-[32px]" disabled={props?.disabled}>
-          <IconComponent className="!w-3 !h-3 text-zinc-500" name="MenuDown" />
-        </Button>
-      </ColorPicker>
-    </div>
-  );
-}
-
-export default HighlightActionButton;

package/src/extensions/Highlight/index.ts

@@ -1 +0,0 @@
-export * from './Highlight';

package/src/extensions/History/History.ts

@@ -1,39 +0,0 @@
-import type { HistoryOptions as TiptapHistoryOptions } from '@tiptap/extension-history';
-import { History as TiptapHistory } from '@tiptap/extension-history';
-
-import HistoryActionButton from '@/extensions/History/components/HistoryActionButton';
-import type { GeneralOptions } from '@/types';
-
-export interface HistoryOptions extends TiptapHistoryOptions, GeneralOptions<HistoryOptions> {}
-
-const historys: ['undo', 'redo'] = ['undo', 'redo'];
-
-export const History = TiptapHistory.extend<HistoryOptions>({
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      depth: 100,
-      newGroupDelay: 500,
-      button: ({ editor, t }: any) => {
-        return historys.map(item => ({
-          component: HistoryActionButton,
-          componentProps: {
-            action: () => {
-              if (item === 'undo') {
-                editor.chain().focus().undo().run();
-              }
-              if (item === 'redo') {
-                editor.chain().focus().redo().run();
-              }
-            },
-            shortcutKeys: item === 'undo' ? ['mod', 'Z'] : ['shift', 'mod', 'Z'],
-            disabled: item === 'undo' ? !editor.can().undo() : !editor.can().redo(),
-            isActive: () => (item === 'undo' ? !editor.can().undo() : !editor.can().redo()),
-            icon: item === 'undo' ? 'Undo2' : 'Redo2',
-            tooltip: t(`editor.${item}.tooltip`),
-          },
-        }));
-      },
-    };
-  },
-});

package/src/extensions/History/components/HistoryActionButton.tsx

@@ -1,74 +0,0 @@
-import React from 'react';
-
-import type { TooltipContentProps } from '@radix-ui/react-tooltip';
-
-import { Toggle, Tooltip, TooltipContent, TooltipTrigger, icons } from '@/components';
-import type { ButtonViewReturnComponentProps } from '@/types';
-import { getShortcutKeys } from '@/utils/plateform';
-
-interface IPropsHistoryActionButton {
-  icon?: string
-  title?: string
-  tooltip?: string
-  disabled?: boolean
-  shortcutKeys?: string[]
-  customClass?: string
-  loading?: boolean
-  tooltipOptions?: TooltipContentProps
-  color?: string
-  action?: ButtonViewReturnComponentProps['action']
-  isActive?: ButtonViewReturnComponentProps['isActive']
-  children?: React.ReactNode
-}
-
-function HistoryActionButton(props?: Partial<IPropsHistoryActionButton>) {
-  const {
-    icon = undefined,
-    // title = undefined,
-    tooltip = undefined,
-    // disabled = false,
-    customClass = '',
-    // color = undefined,
-    // loading = false,
-    // shortcutKeys = undefined,
-    tooltipOptions = {},
-    action = undefined,
-    isActive = undefined,
-    children,
-  } = props as any;
-
-  const Icon = icons[icon as string];
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Toggle
-          size="sm"
-          className={`w-[32px] h-[32px] ${customClass}`}
-          disabled={isActive?.()}
-          onClick={action}
-          // data-state={isActive?.() ? 'on' : 'off'}
-        >
-          {Icon && <Icon className="w-4 h-4" />}
-          {children && <>
-            {children}
-          </>}
-        </Toggle>
-      </TooltipTrigger>
-      {tooltip && (
-        <TooltipContent {...tooltipOptions}>
-          <div className="flex flex-col items-center text-center max-w-24">
-            <div>
-              {tooltip}
-            </div>
-            {!!props?.shortcutKeys?.length && <span>
-              {getShortcutKeys(props?.shortcutKeys)}
-            </span>}
-          </div>
-        </TooltipContent>
-      )}
-    </Tooltip>
-  );
-}
-
-export default HistoryActionButton;

package/src/extensions/History/index.ts

@@ -1 +0,0 @@
-export * from './History';

package/src/extensions/HorizontalRule/HorizontalRule.ts

@@ -1,42 +0,0 @@
-import { mergeAttributes } from '@tiptap/core';
-import type { HorizontalRuleOptions as TiptapHorizontalRuleOptions } from '@tiptap/extension-horizontal-rule';
-import { HorizontalRule as TiptapHorizontalRule } from '@tiptap/extension-horizontal-rule';
-
-import { ActionButton } from '@/components';
-import type { GeneralOptions } from '@/types';
-
-export interface HorizontalRuleOptions
-  extends TiptapHorizontalRuleOptions,
-  GeneralOptions<HorizontalRuleOptions> {}
-
-export const HorizontalRule = TiptapHorizontalRule.extend<HorizontalRuleOptions>({
-  renderHTML() {
-    return [
-      'div',
-      mergeAttributes(this.options.HTMLAttributes, {
-        'data-type': this.name,
-      }),
-      ['hr'],
-    ];
-  },
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      button: ({ editor, t }) => ({
-        component: ActionButton,
-        componentProps: {
-          action: () => editor.commands.setHorizontalRule(),
-          disabled: !editor.can().setHorizontalRule(),
-          icon: 'Minus',
-          shortcutKeys: ['mod', 'alt', 'S'],
-          tooltip: t('editor.horizontalrule.tooltip'),
-        },
-      }),
-    };
-  },
-  addKeyboardShortcuts() {
-    return {
-      'Mod-Alt-s': () => this.editor.commands.setHorizontalRule(),
-    };
-  },
-});

package/src/extensions/HorizontalRule/index.ts

@@ -1 +0,0 @@
-export * from './HorizontalRule';

package/src/extensions/Iframe/Iframe.ts

@@ -1,140 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import { Node, mergeAttributes, nodeInputRule } from '@tiptap/core';
-import { ReactNodeViewRenderer } from '@tiptap/react';
-
-import { ActionButton } from '@/components';
-import IframeNodeView from '@/extensions/Iframe/components/IframeNodeView';
-import { getDatasetAttribute } from '@/utils/dom-dataset';
-
-export interface IIframeAttrs {
-  width?: number | string
-  height?: number
-  url?: string
-  defaultShowPicker?: boolean
-}
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    iframe: {
-      /**
-       * Add an iframe
-       */
-      setIframe: (options: { src: string, service: string }) => ReturnType
-    }
-  }
-}
-
-export const Iframe = Node.create({
-  name: 'iframe',
-  content: '',
-  marks: '',
-  group: 'block',
-  selectable: true,
-  atom: true,
-  draggable: true,
-
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      HTMLAttributes: {
-        class: 'iframe',
-      },
-      button: ({
-        editor,
-        extension,
-        t,
-      }: {
-        editor: any
-        extension: any
-        t: (key: string) => string
-      }) => ({
-        component: ActionButton,
-        componentProps: {
-          action: (options: { src: string, service: string }) => editor.commands.setIframe(options),
-          upload: extension.options.upload,
-          disabled: !editor.can().setIframe({}),
-          icon: 'Iframe',
-          tooltip: t('editor.iframe.tooltip'),
-        },
-      }),
-    };
-  },
-
-  addAttributes() {
-    return {
-      width: {
-        default: 600,
-        parseHTML: getDatasetAttribute('width'),
-      },
-      height: {
-        default: 300,
-        parseHTML: getDatasetAttribute('height'),
-      },
-      url: {
-        default: null,
-        parseHTML: getDatasetAttribute('url'),
-      },
-      defaultShowPicker: {
-        default: false,
-      },
-      frameborder: {
-        default: 0,
-      },
-      allowfullscreen: {
-        default: this.options.allowFullscreen,
-        parseHTML: () => this.options.allowFullscreen,
-      },
-    };
-  },
-
-  parseHTML() {
-    return [
-      {
-        tag: 'iframe',
-      },
-    ];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return ['iframe', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
-  },
-
-  addCommands() {
-    return {
-      setIframe:
-        options =>
-          ({ tr, commands, chain }) => {
-          // @ts-ignore
-            if (tr.selection?.node?.type?.name == this.name) {
-              return commands.updateAttributes(this.name, options);
-            }
-
-            const attrs = options || { url: '' };
-            // const { selection } = editor.state
-
-            return chain()
-              .insertContent({
-                type: this.name,
-                attrs,
-              })
-              .run();
-          },
-    };
-  },
-
-  addInputRules() {
-    return [
-      nodeInputRule({
-        find: /^\$iframe\$$/,
-        type: this.type,
-        getAttributes: () => {
-          return { width: '100%' };
-        },
-      }),
-    ];
-  },
-
-  addNodeView() {
-    return ReactNodeViewRenderer(IframeNodeView);
-  },
-});

package/src/extensions/Iframe/components/IframeNodeView.tsx

@@ -1,92 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { NodeViewWrapper } from '@tiptap/react';
-import clsx from 'clsx';
-import { Resizable } from 're-resizable';
-
-// import { getEditorContainerDOMSize } from '@/utils'
-import { Button, Input } from '@/components/ui';
-import { Iframe } from '@/extensions/Iframe/Iframe';
-import { useEditableEditor } from '@/store/editableEditor';
-
-import styles from './index.module.scss';
-
-function IframeNodeView({ editor, node, updateAttributes }: any) {
-  const isEditable = useEditableEditor();
-
-  const { url, width, height } = node.attrs;
-  // const { width: maxWidth } = getEditorContainerDOMSize(editor)
-
-  const [originalLink, setOriginalLink] = useState<string>('');
-
-  function handleConfirm() {
-    if (!originalLink) {
-      return;
-    }
-
-    editor
-      .chain()
-      .updateAttributes(Iframe.name, {
-        url: originalLink,
-      })
-      .setNodeSelection(editor.state.selection.from)
-      .focus()
-      .run();
-  }
-
-  const onResize = useCallback(
-    (size: any) => {
-      updateAttributes({ width: size.width, height: size.height });
-    },
-    [updateAttributes],
-  );
-
-  return (
-    <NodeViewWrapper>
-      {!url && (
-        <div className="mx-auto my-[12px] flex max-w-[600px] items-center justify-center gap-[10px] rounded-[12px] border border-solid border-[#ccc] p-[10px]">
-          <Input
-            autoFocus
-            className="flex-1"
-            onInput={(e: any) => setOriginalLink(e.target.value)}
-            placeholder="Enter link"
-            type="url"
-            value={originalLink}
-          />
-
-          <Button className="w-[60px]"
-            onClick={handleConfirm}
-          >
-            OK
-          </Button>
-        </div>
-      )}
-
-      {url && (
-        <Resizable
-          size={{ width: Number.parseInt(width), height: Number.parseInt(height) }}
-          onResizeStop={(e, direction, ref, d) => {
-            onResize({
-              width: Number.parseInt(width) + d.width,
-              height: Number.parseInt(height) + d.height,
-            });
-          }}
-        >
-          <div className={clsx(styles.wrap, 'render-wrapper')}>
-            <div className={styles.innerWrap}
-              style={{ pointerEvents: !isEditable ? 'auto' : 'none' }}
-            >
-              <iframe
-                className="my-[12px] "
-                src={url}
-              >
-              </iframe>
-            </div>
-          </div>
-        </Resizable>
-      )}
-    </NodeViewWrapper>
-  );
-}
-
-export default IframeNodeView;

package/src/extensions/Iframe/components/index.module.scss

@@ -1,40 +0,0 @@
-.wrap {
-  display: flex;
-  height: 100%;
-  max-width: 100%;
-  overflow: hidden;
-  line-height: 0;
-  flex-direction: column;
-  border: 1px dashed hsl(var(--border)) !important;
-  border-radius: 6px;
-
-  .handlerWrap {
-    display: flex;
-    padding: 10px;
-  }
-
-  .innerWrap {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    border-radius: var(--border-radius);
-    flex: 1;
-  }
-
-  .emptyWrap {
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    align-items: center;
-  }
-
-  :global {
-    iframe {
-      width: 100%;
-      height: 100%;
-      border: 0;
-      border: none !important;
-    }
-  }
-}