reactjs-tiptap-editor-pro 0.2.30 → 0.2.32

package/src/extensions/Katex/Katex.ts

@@ -1,109 +0,0 @@
-import { Node, mergeAttributes, nodeInputRule } from '@tiptap/core';
-import { ReactNodeViewRenderer } from '@tiptap/react';
-
-import KatexActiveButton from '@/extensions/Katex/components/KatexActiveButton';
-import { KatexWrapper } from '@/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

@@ -1,117 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
-import katex from 'katex';
-import { HelpCircle } from 'lucide-react';
-
-import { ActionButton, Button, Label, Popover, PopoverContent, PopoverTrigger } from '@/components';
-import { Textarea } from '@/components/ui/textarea';
-import type { IKatexAttrs } from '@/extensions/Katex/Katex';
-import { Katex } from '@/extensions/Katex/Katex';
-import { useAttributes } from '@/hooks/useAttributes';
-import { useLocale } from '@/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

@@ -1,53 +0,0 @@
-import { useMemo } from 'react';
-
-import { NodeViewWrapper } from '@tiptap/react';
-
-import katex from 'katex';
-import { useTheme } from '@/theme/theme';
-import { convertColorToRGBA } from '@/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

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

package/src/extensions/LineHeight/LineHeight.ts

@@ -1,76 +0,0 @@
-import { Extension } from '@tiptap/core';
-import type { Editor } from '@tiptap/core';
-
-import { DEFAULT_LINE_HEIGHT, DEFAULT_LINE_HEIGHT_LIST } from '@/constants';
-import LineHeightDropdown from '@/extensions/LineHeight/components/LineHeightDropdown';
-import type { GeneralOptions } from '@/types';
-import { createLineHeightCommand } from '@/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

@@ -1,93 +0,0 @@
-import React, { useMemo, useState } from 'react';
-
-import {
-  ActionButton,
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-  IconComponent,
-} from '@/components';
-import { useLocale } from '@/locales';
-import type { ButtonViewReturnComponentProps } from '@/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

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

package/src/extensions/Link/Link.ts

@@ -1,92 +0,0 @@
-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 '@/extensions/Link/components/LinkEditPopover';
-import type { GeneralOptions } from '@/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

@@ -1,110 +0,0 @@
-/* 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 '@/components';
-import { useLocale } from '@/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

@@ -1,46 +0,0 @@
-import { useState } from 'react';
-
-import { ActionButton, IconComponent, Popover, PopoverContent, PopoverTrigger } from '@/components';
-import LinkEditBlock from '@/extensions/Link/components/LinkEditBlock';
-import type { ButtonViewReturnComponentProps } from '@/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;