reactjs-tiptap-editor-pro 0.2.29 → 0.2.31

package/src/extensions/Katex/Katex.ts

@@ -0,0 +1,109 @@
+import { Node, mergeAttributes, nodeInputRule } from '@tiptap/core';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+
+import KatexActiveButton from 'reactjs-tiptap-editor-pro/extensions/Katex/components/KatexActiveButton';
+import { KatexWrapper } from 'reactjs-tiptap-editor-pro/extensions/Katex/components/KatexWrapper';
+
+export interface IKatexAttrs {
+  text?: string
+  defaultShowPicker?: boolean
+}
+
+interface IKatexOptions {
+  HTMLAttributes: Record<string, any>
+}
+
+function getDatasetAttribute(attribute: string) {
+  return (element: any) => {
+    return element.getAttribute(attribute);
+  };
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    katex: {
+      setKatex: (arg?: IKatexAttrs) => ReturnType
+    }
+  }
+}
+
+export const Katex = Node.create<IKatexOptions>({
+  name: 'katex',
+  group: 'inline',
+  inline: true,
+  defining: true,
+  draggable: true,
+  selectable: true,
+
+  addOptions() {
+    return {
+      HTMLAttributes: {
+        class: 'katex',
+      },
+      button: ({ editor, t }: any) => {
+        return {
+          component: KatexActiveButton,
+          componentProps: {
+            editor,
+            action: () => {
+              return true;
+            },
+            isActive: () => false,
+            disabled: false,
+            icon: 'KatexIcon',
+            tooltip: t('editor.katex.tooltip'),
+          },
+        };
+      },
+    };
+  },
+
+  addAttributes() {
+    return {
+      text: {
+        default: '',
+        parseHTML: getDatasetAttribute('text'),
+      },
+      defaultShowPicker: {
+        default: false,
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: 'span.katex' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['span', mergeAttributes((this.options && this.options.HTMLAttributes) || {}, HTMLAttributes)];
+  },
+
+  addCommands() {
+    return {
+      setKatex:
+        options =>
+          ({ commands }) => {
+            return commands.insertContent({
+              type: this.name,
+              attrs: options,
+            });
+          },
+    };
+  },
+
+  addInputRules() {
+    return [
+      nodeInputRule({
+        find: /^\$katex\$$/,
+        type: this.type,
+        getAttributes: () => {
+          return { defaultShowPicker: true };
+        },
+      }),
+    ];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(KatexWrapper);
+  },
+});

package/src/extensions/Katex/components/KatexActiveButton.tsx

@@ -0,0 +1,117 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import katex from 'katex';
+import { HelpCircle } from 'lucide-react';
+
+import { ActionButton, Button, Label, Popover, PopoverContent, PopoverTrigger } from 'reactjs-tiptap-editor-pro/components';
+import { Textarea } from 'reactjs-tiptap-editor-pro/components/ui/textarea';
+import type { IKatexAttrs } from 'reactjs-tiptap-editor-pro/extensions/Katex/Katex';
+import { Katex } from 'reactjs-tiptap-editor-pro/extensions/Katex/Katex';
+import { useAttributes } from 'reactjs-tiptap-editor-pro/hooks/useAttributes';
+import { useLocale } from 'reactjs-tiptap-editor-pro/locales';
+
+function KatexActiveButton({ editor, ...props }: any) {
+  const { t } = useLocale();
+
+  const attrs = useAttributes<IKatexAttrs>(editor, Katex.name, {
+    text: '',
+    defaultShowPicker: false,
+  });
+  const { text, defaultShowPicker } = attrs;
+
+  const [currentValue, setCurrentValue] = useState('');
+
+  const submit = useCallback(() => {
+    editor.chain().focus().setKatex({ text: currentValue }).run();
+    setCurrentValue('');
+  }, [editor, currentValue]);
+
+  useEffect(() => {
+    if (defaultShowPicker) {
+      editor.chain().updateAttributes(Katex.name, { defaultShowPicker: false }).focus().run();
+    }
+  }, [editor, defaultShowPicker]);
+
+  const formatText = useMemo(() => {
+    try {
+      return katex.renderToString(`${currentValue}`);
+    } catch {
+      return currentValue;
+    }
+  }, [currentValue]);
+
+  const previewContent = useMemo(
+    () => {
+      if (`${currentValue}`.trim()) {
+        return (
+          <span contentEditable={false}
+            dangerouslySetInnerHTML={{ __html: formatText || '' }}
+          >
+          </span>
+        );
+      }
+
+      return null;
+    },
+    [currentValue, formatText],
+  );
+
+  return (
+    <Popover modal>
+      <PopoverTrigger asChild>
+        <ActionButton
+          icon={props?.icon}
+          tooltip={props?.tooltip}
+        />
+      </PopoverTrigger>
+
+      <PopoverContent align="start"
+        className="size-full p-2"
+        hideWhenDetached
+        side="bottom"
+      >
+        <Label className="mb-[6px]">
+          {t('editor.formula.dialog.text')}
+        </Label>
+
+        <div className="mb-[16px] flex w-full max-w-sm items-center gap-1.5">
+          <div className="relative w-full max-w-sm">
+            <Textarea
+              autoFocus
+              className="w-full"
+              defaultValue={text}
+              onChange={e => setCurrentValue(e.target.value)}
+              placeholder="Text"
+              required
+              rows={3}
+              value={currentValue}
+            />
+          </div>
+        </div>
+
+        {previewContent && (
+          <div className="my-[10px] max-w-[286px] overflow-auto whitespace-nowrap rounded-[6px] !border p-[10px]">
+            {previewContent}
+          </div>
+        )}
+
+        <div className="flex items-center justify-between gap-[6px]">
+          <Button className="flex-1"
+            onClick={submit}
+          >
+            Submit
+          </Button>
+
+          <a href="https://katex.org/docs/supported"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            <HelpCircle size={16} />
+          </a>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export default KatexActiveButton;

package/src/extensions/Katex/components/KatexWrapper.tsx

@@ -0,0 +1,53 @@
+import { useMemo } from 'react';
+
+import { NodeViewWrapper } from '@tiptap/react';
+
+import katex from 'katex';
+import { useTheme } from 'reactjs-tiptap-editor-pro/theme/theme';
+import { convertColorToRGBA } from 'reactjs-tiptap-editor-pro/utils/color';
+
+export function KatexWrapper({ node }: any) {
+  const theme = useTheme();
+  const { text } = node.attrs;
+
+  const backgroundColor = useMemo(() => {
+    const color = 'rgb(254, 242, 237)';
+    if (theme === 'dark')
+      return convertColorToRGBA(color, 0.75);
+    return color;
+  }, [theme]);
+
+  const formatText = useMemo(() => {
+    try {
+      return katex.renderToString(`${text}`);
+    } catch {
+      return text;
+    }
+  }, [text]);
+
+  const content = useMemo(
+    () =>
+      text.trim()
+        ? (
+          <span contentEditable={false} dangerouslySetInnerHTML={{ __html: formatText }}></span>
+        )
+        : (
+          <span contentEditable={false}>
+            Not enter a formula
+          </span>
+        ),
+    [text, formatText],
+  );
+
+  return (
+    <NodeViewWrapper
+      style={{
+        display: 'inline-block',
+        backgroundColor,
+      }}
+      as="span"
+    >
+      {content}
+    </NodeViewWrapper>
+  );
+}

package/src/extensions/Katex/index.ts

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

package/src/extensions/LineHeight/LineHeight.ts

@@ -0,0 +1,76 @@
+import { Extension } from '@tiptap/core';
+import type { Editor } from '@tiptap/core';
+
+import { DEFAULT_LINE_HEIGHT, DEFAULT_LINE_HEIGHT_LIST } from 'reactjs-tiptap-editor-pro/constants';
+import LineHeightDropdown from 'reactjs-tiptap-editor-pro/extensions/LineHeight/components/LineHeightDropdown';
+import type { GeneralOptions } from 'reactjs-tiptap-editor-pro/types';
+import { createLineHeightCommand } from 'reactjs-tiptap-editor-pro/utils/line-height';
+
+export interface LineHeightOptions extends GeneralOptions<LineHeightOptions> {
+  types: string[]
+  lineHeights: string[]
+  defaultHeight: string
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    lineHeight: {
+      setLineHeight: (lineHeight: string) => ReturnType
+      unsetLineHeight: () => ReturnType
+    }
+  }
+}
+
+export const LineHeight = Extension.create<LineHeightOptions>({
+  name: 'lineHeight',
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      types: ['paragraph', 'heading', 'list_item', 'todo_item'],
+      lineHeights: DEFAULT_LINE_HEIGHT_LIST,
+      defaultHeight: DEFAULT_LINE_HEIGHT,
+      button({ editor, t }: { editor: Editor, t: any }) {
+        return {
+          component: LineHeightDropdown,
+          componentProps: {
+            editor,
+            tooltip: t('editor.lineheight.tooltip'),
+          },
+        };
+      },
+    };
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          lineHeight: {
+            default: null,
+            parseHTML: (element) => {
+              return element.style.lineHeight || this.options.defaultHeight;
+            },
+            renderHTML: (attributes) => {
+              if (attributes.lineHeight === this.options.defaultHeight || !attributes.lineHeight) {
+                return {};
+              }
+              return { style: `line-height: ${attributes.lineHeight}` };
+            },
+          },
+        },
+      },
+    ];
+  },
+
+  addCommands() {
+    return {
+      setLineHeight: lineHeight => createLineHeightCommand(lineHeight),
+      unsetLineHeight:
+        () =>
+          ({ commands }) => {
+            return this.options.types.every(type => commands.resetAttributes(type, 'lineHeight'));
+          },
+    };
+  },
+});

package/src/extensions/LineHeight/components/LineHeightDropdown.tsx

@@ -0,0 +1,93 @@
+import React, { useMemo, useState } from 'react';
+
+import {
+  ActionButton,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  IconComponent,
+} from 'reactjs-tiptap-editor-pro/components';
+import { useLocale } from 'reactjs-tiptap-editor-pro/locales';
+import type { ButtonViewReturnComponentProps } from 'reactjs-tiptap-editor-pro/types';
+
+interface IPropsLineHeightDropdown {
+  editor: any
+  icon?: any
+  tooltip?: string
+  disabled?: boolean
+  action?: ButtonViewReturnComponentProps['action']
+  isActive?: ButtonViewReturnComponentProps['isActive']
+}
+
+function percentageToDecimal(percentageString: any) {
+  const percentage = Number.parseFloat(percentageString.replace('%', ''));
+  const decimal = percentage / 100;
+  return decimal;
+}
+
+function LineHeightDropdown(props: IPropsLineHeightDropdown) {
+  const { t } = useLocale();
+  const [value, setValue] = useState('default');
+
+  function toggleLightheight(key: string) {
+    if (key === 'default') {
+      props.editor.commands.unsetLineHeight();
+    } else {
+      props.editor.commands.setLineHeight(key);
+    }
+    setValue(key);
+  }
+
+  const LineHeights = useMemo(() => {
+    const lineHeightOptions = props.editor.extensionManager.extensions.find(
+      (e: any) => e.name === 'lineHeight',
+    )!.options;
+    const a = lineHeightOptions.lineHeights;
+    const b = a.map((item: any) => ({
+      label: percentageToDecimal(item),
+      value: item,
+    }));
+
+    b.unshift({
+      label: t('editor.default'),
+      value: 'default',
+    });
+    return b;
+  }, [props]);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild
+        disabled={props?.disabled}
+      >
+        <ActionButton
+          customClass="!w-12 h-12"
+          disabled={props?.disabled}
+          icon="LineHeight"
+          tooltip={props?.tooltip}
+        >
+          <IconComponent className="ml-1 size-3 text-zinc-500"
+            name="MenuDown"
+          />
+        </ActionButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent className="min-w-24">
+        {LineHeights?.map((item: any, index: any) => {
+          return (
+            <DropdownMenuCheckboxItem
+              checked={item.value === value}
+              key={`lineHeight-${index}`}
+              onClick={() => toggleLightheight(item.value)}
+            >
+              {item.label}
+            </DropdownMenuCheckboxItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export default LineHeightDropdown;

package/src/extensions/LineHeight/index.ts

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

package/src/extensions/Link/Link.ts

@@ -0,0 +1,92 @@
+import { getMarkRange, mergeAttributes } from '@tiptap/core';
+import type { LinkOptions as TiptapLinkOptions } from '@tiptap/extension-link';
+import { Link as TiptapLink } from '@tiptap/extension-link';
+import { Plugin, TextSelection } from '@tiptap/pm/state';
+import type { EditorView } from '@tiptap/pm/view';
+
+import LinkEditPopover from 'reactjs-tiptap-editor-pro/extensions/Link/components/LinkEditPopover';
+import type { GeneralOptions } from 'reactjs-tiptap-editor-pro/types';
+
+export interface LinkOptions extends TiptapLinkOptions, GeneralOptions<LinkOptions> {}
+
+export const Link = TiptapLink.extend<LinkOptions>({
+  inclusive: false,
+  parseHTML() {
+    return [
+      {
+        tag: 'a[href]:not([data-type="button"]):not([href *= "javascript:" i])',
+      },
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'a',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        class: 'link',
+      }),
+      0,
+    ];
+  },
+
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      openOnClick: true,
+      button: ({ editor, t }) => {
+        return {
+          component: LinkEditPopover,
+          componentProps: {
+            editor,
+            action: (value) => {
+              const { link, text, openInNewTab } = value as any;
+              editor
+                .chain()
+                .extendMarkRange('link')
+                .insertContent({
+                  type: 'text',
+                  text,
+                  marks: [
+                    {
+                      type: 'link',
+                      attrs: {
+                        href: link,
+                        target: openInNewTab ? '_blank' : '',
+                      },
+                    },
+                  ],
+                })
+                .setLink({ href: link })
+                .focus()
+                .run();
+            },
+            id: 'linkk',
+            isActive: () => editor.isActive('link') || false,
+            disabled: !editor.can().setLink({ href: '' }),
+            icon: 'Link',
+            tooltip: t('editor.link.tooltip'),
+          },
+        };
+      },
+    };
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        props: {
+          handleClick: (view: EditorView, pos: number) => {
+            const { schema, doc, tr } = view.state;
+            const range = getMarkRange(doc.resolve(pos), schema.marks.link);
+            if (!range) {
+              return false;
+            }
+            const $start = doc.resolve(range.from);
+            const $end = doc.resolve(range.to);
+            const transaction = tr.setSelection(new TextSelection($start, $end));
+            view.dispatch(transaction);
+          },
+        },
+      }),
+    ];
+  },
+});

package/src/extensions/Link/components/LinkEditBlock.tsx

@@ -0,0 +1,110 @@
+/* eslint-disable no-unsafe-optional-chaining */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import React, { useEffect, useState } from 'react';
+
+import { Button, IconComponent, Input, Label, Switch } from 'reactjs-tiptap-editor-pro/components';
+import { useLocale } from 'reactjs-tiptap-editor-pro/locales';
+
+interface IPropsLinkEditBlock {
+  editor: any
+  onSetLink: (link: string, text?: string, openInNewTab?: boolean) => void
+}
+
+function LinkEditBlock(props: IPropsLinkEditBlock) {
+  const { t } = useLocale();
+
+  const [form, setForm] = useState({
+    text: '',
+    link: '',
+  });
+  const [openInNewTab, setOpenInNewTab] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (props?.editor) {
+      const { href: link, target } = props.editor?.getAttributes('link');
+
+      const { from, to } = props.editor.state.selection;
+      const text = props.editor.state.doc.textBetween(from, to, ' ');
+      setForm({
+        link,
+        text,
+      });
+      setOpenInNewTab(target === '_blank');
+    }
+  }, [props?.editor]);
+
+  function handleSubmit(event: any) {
+    event.preventDefault();
+    event.stopPropagation();
+    props?.onSetLink(form.link, form.text, openInNewTab);
+  }
+
+  return (
+    <div className="border-neutral-200 rounded-lg !border bg-white p-2 shadow-sm dark:border-neutral-800 dark:bg-black">
+      <form className="flex flex-col gap-2"
+        onSubmit={handleSubmit}
+      >
+        <Label className="mb-[6px]">
+          {t('editor.link.dialog.text')}
+        </Label>
+
+        <div className="mb-[10px] flex w-full max-w-sm items-center gap-1.5">
+          <div className="relative w-full max-w-sm items-center">
+            <Input
+              className="w-80"
+              onChange={e => setForm({ ...form, text: e.target.value })}
+              placeholder="Text"
+              required
+              type="text"
+              value={form.text}
+            />
+          </div>
+        </div>
+
+        <Label className="mb-[6px]">
+          {t('editor.link.dialog.link')}
+        </Label>
+
+        <div className="flex w-full max-w-sm items-center gap-1.5">
+          <div className="relative w-full max-w-sm items-center">
+            <Input
+              className="pl-10"
+              onChange={e => setForm({ ...form, link: e.target.value })}
+              required
+              type="url"
+              value={form.link}
+            />
+
+            <span className="absolute inset-y-0 start-0 flex items-center justify-center px-2">
+              <IconComponent className="size-5 text-muted-foreground"
+                name="Link"
+              />
+            </span>
+          </div>
+        </div>
+
+        <div className="flex items-center space-x-2">
+          <Label>
+            {t('editor.link.dialog.openInNewTab')}
+          </Label>
+
+          <Switch
+            checked={openInNewTab}
+            onCheckedChange={(e) => {
+              setOpenInNewTab(e);
+            }}
+          />
+        </div>
+
+        <Button className="mt-2 self-end"
+          type="submit"
+        >
+          {t('editor.link.dialog.button.apply')}
+        </Button>
+      </form>
+    </div>
+  );
+}
+
+export default LinkEditBlock;

package/src/extensions/Link/components/LinkEditPopover.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+
+import { ActionButton, IconComponent, Popover, PopoverContent, PopoverTrigger } from 'reactjs-tiptap-editor-pro/components';
+import LinkEditBlock from 'reactjs-tiptap-editor-pro/extensions/Link/components/LinkEditBlock';
+import type { ButtonViewReturnComponentProps } from 'reactjs-tiptap-editor-pro/types';
+
+interface IPropsLinkEditPopover {
+  editor: any
+  icon?: any
+  title?: string
+  tooltip?: string
+  disabled?: boolean
+  shortcutKeys?: string[]
+  isActive?: ButtonViewReturnComponentProps['isActive']
+  action?: ButtonViewReturnComponentProps['action']
+}
+
+function LinkEditPopover(props: IPropsLinkEditPopover) {
+  const [open, setOpen] = useState(false);
+
+  function onSetLink(link: string, text?: string, openInNewTab?: boolean) {
+    if (props.action) {
+      props.action({ link, text, openInNewTab });
+      setOpen(false);
+    }
+  }
+
+  return (
+    <Popover modal open={open} onOpenChange={setOpen}>
+      <PopoverTrigger disabled={props?.disabled} asChild>
+        <ActionButton
+          tooltip={props?.tooltip}
+          isActive={props?.isActive}
+          disabled={props?.disabled}
+        >
+          <IconComponent name={props?.icon} />
+        </ActionButton>
+      </PopoverTrigger>
+      <PopoverContent hideWhenDetached className="w-full" align="start" side="bottom">
+        <LinkEditBlock editor={props.editor} onSetLink={onSetLink} />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export default LinkEditPopover;