reactjs-tiptap-editor-pro 0.2.29 → 0.2.31

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

@@ -0,0 +1,108 @@
+import React, { useCallback, useState } from 'react';
+
+import type { TooltipContentProps } from '@radix-ui/react-tooltip';
+import { debounce } from 'lodash-es';
+
+import { ActionButton, Button, ColorPicker } from 'reactjs-tiptap-editor-pro/components';
+import { IconComponent } from 'reactjs-tiptap-editor-pro/components/icons';
+import type { ButtonViewReturnComponentProps } from 'reactjs-tiptap-editor-pro/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

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

package/src/extensions/History/History.ts

@@ -0,0 +1,39 @@
+import type { HistoryOptions as TiptapHistoryOptions } from '@tiptap/extension-history';
+import { History as TiptapHistory } from '@tiptap/extension-history';
+
+import HistoryActionButton from 'reactjs-tiptap-editor-pro/extensions/History/components/HistoryActionButton';
+import type { GeneralOptions } from 'reactjs-tiptap-editor-pro/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

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import type { TooltipContentProps } from '@radix-ui/react-tooltip';
+
+import { Toggle, Tooltip, TooltipContent, TooltipTrigger, icons } from 'reactjs-tiptap-editor-pro/components';
+import type { ButtonViewReturnComponentProps } from 'reactjs-tiptap-editor-pro/types';
+import { getShortcutKeys } from 'reactjs-tiptap-editor-pro/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

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

package/src/extensions/HorizontalRule/HorizontalRule.ts

@@ -0,0 +1,42 @@
+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 'reactjs-tiptap-editor-pro/components';
+import type { GeneralOptions } from 'reactjs-tiptap-editor-pro/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

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

package/src/extensions/Iframe/Iframe.ts

@@ -0,0 +1,140 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { Node, mergeAttributes, nodeInputRule } from '@tiptap/core';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+
+import { ActionButton } from 'reactjs-tiptap-editor-pro/components';
+import IframeNodeView from 'reactjs-tiptap-editor-pro/extensions/Iframe/components/IframeNodeView';
+import { getDatasetAttribute } from 'reactjs-tiptap-editor-pro/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

@@ -0,0 +1,92 @@
+import { useCallback, useState } from 'react';
+
+import { NodeViewWrapper } from '@tiptap/react';
+import clsx from 'clsx';
+import { Resizable } from 're-resizable';
+
+// import { getEditorContainerDOMSize } from 'reactjs-tiptap-editor-pro/utils'
+import { Button, Input } from 'reactjs-tiptap-editor-pro/components/ui';
+import { Iframe } from 'reactjs-tiptap-editor-pro/extensions/Iframe/Iframe';
+import { useEditableEditor } from 'reactjs-tiptap-editor-pro/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

@@ -0,0 +1,40 @@
+.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;
+    }
+  }
+}