reactjs-tiptap-editor-pro 0.2.29 → 0.2.30

package/src/components/RichTextEditor.tsx

@@ -0,0 +1,212 @@
+import { forwardRef, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo } from 'react';
+
+import type { AnyExtension, Editor as CoreEditor } from '@tiptap/core';
+import type { UseEditorOptions } from '@tiptap/react';
+import { EditorContent, useEditor } from '@tiptap/react';
+import { differenceBy, throttle } from 'lodash-es';
+
+import { BubbleMenu, Toolbar, TooltipProvider } from '@/components';
+import CharactorCount from '@/components/CharactorCount';
+import { Toaster } from '@/components/ui/toaster';
+import { EDITOR_UPDATE_WATCH_THROTTLE_WAIT_TIME } from '@/constants';
+import { RESET_CSS } from '@/constants/resetCSS';
+import { editableEditorActions } from '@/store/editableEditor';
+import { ProviderRichText } from '@/store/ProviderRichText';
+import { themeActions } from '@/theme/theme';
+import type { BubbleMenuProps, ToolbarProps } from '@/types';
+import { removeCSS, updateCSS } from '@/utils/dynamicCSS';
+import { hasExtension } from '@/utils/utils';
+
+import '../styles/index.scss';
+
+/**
+ * Interface for RichTextEditor component props
+ */
+export interface RichTextEditorProps {
+  /** Content of the editor */
+  content: string
+  /** Extensions for the editor */
+  extensions: AnyExtension[]
+
+  /** Output format */
+  output: 'html' | 'json' | 'text'
+  /** Model value */
+  modelValue?: string | object
+  /** Dark mode flag */
+  dark?: boolean
+  /** Dense mode flag */
+  dense?: boolean
+  /** Disabled flag */
+  disabled?: boolean
+  /** Label for the editor */
+  label?: string
+  /** Hide toolbar flag */
+  hideToolbar?: boolean
+  /** Disable bubble menu flag */
+  disableBubble?: boolean
+  /** Hide bubble menu flag */
+  hideBubble?: boolean
+  /** Remove default wrapper flag */
+  removeDefaultWrapper?: boolean
+  /** Maximum width */
+  maxWidth?: string | number
+  /** Minimum height */
+  minHeight?: string | number
+  /** Maximum height */
+  maxHeight?: string | number
+  /** Content class */
+  contentClass?: string | string[] | Record<string, any>
+  /** Content change callback */
+  onChangeContent?: (val: any) => void
+  /** Bubble menu props */
+  bubbleMenu?: BubbleMenuProps
+  /** Toolbar props */
+  toolbar?: ToolbarProps
+
+  /** Use editor options */
+  useEditorOptions?: UseEditorOptions
+
+  /** Use editor options */
+  resetCSS?: boolean
+}
+
+function RichTextEditor(props: RichTextEditorProps, ref: React.ForwardedRef<{ editor: CoreEditor | null }>) {
+  const { content, extensions, useEditorOptions = {} } = props;
+
+  const id = useId();
+
+  const sortExtensions = useMemo(() => {
+    const diff = differenceBy(extensions, extensions, 'name');
+    const exts = extensions.map((k: any) => {
+      const find = extensions.find((ext: any) => ext.name === k.name);
+      if (!find) {
+        return k;
+      }
+      return k.configure(find.options);
+    });
+    return [...exts, ...diff].map((k, i) => k.configure({ sort: i }));
+  }, [extensions]);
+
+  const onValueChange = throttle((editor) => {
+    const output = getOutput(editor, props.output as any);
+
+    props?.onChangeContent?.(output as any);
+  }, EDITOR_UPDATE_WATCH_THROTTLE_WAIT_TIME);
+
+  const editor = useEditor({
+    extensions: sortExtensions,
+    content,
+    onUpdate: ({ editor }) => {
+      if (onValueChange)
+        onValueChange(editor);
+    },
+    ...useEditorOptions,
+  }) as any;
+
+  useImperativeHandle(ref, () => {
+    return {
+      editor,
+    };
+  });
+
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', props.dark);
+    themeActions.setTheme(id, props.dark ? 'dark' : 'light');
+  }, [props.dark]);
+
+  useEffect(() => {
+    editor?.setEditable(!props?.disabled);
+    editableEditorActions.setDisable(id, !props?.disabled);
+  }, [editor, props?.disabled]);
+
+  useEffect(() => {
+    if (props?.resetCSS !== false) {
+      updateCSS(RESET_CSS, 'react-tiptap-reset');
+    }
+
+    return () => {
+      removeCSS('react-tiptap-reset');
+    };
+  }, [props?.resetCSS]);
+
+  function getOutput(editor: CoreEditor, output: RichTextEditorProps['output']) {
+    if (props?.removeDefaultWrapper) {
+      if (output === 'html') {
+        return editor.isEmpty ? '' : editor.getHTML();
+      }
+      if (output === 'json') {
+        return editor.isEmpty ? {} : editor.getJSON();
+      }
+      if (output === 'text') {
+        return editor.isEmpty ? '' : editor.getText();
+      }
+      return '';
+    }
+
+    if (output === 'html') {
+      return editor.getHTML();
+    }
+    if (output === 'json') {
+      return editor.getJSON();
+    }
+    if (output === 'text') {
+      return editor.getText();
+    }
+    return '';
+  }
+
+  useLayoutEffect(() => {
+    if (editor) editor!.id = id;
+  }, [id, editor]);
+
+  useEffect(() => {
+    return () => {
+      editor?.destroy?.();
+    };
+  }, []);
+
+  const hasExtensionValue = hasExtension(editor, 'characterCount');
+
+  if (!editor) {
+    return <></>;
+  }
+
+  return (
+    <div className="reactjs-tiptap-editor">
+      <ProviderRichText
+        id={id}
+      >
+        <TooltipProvider delayDuration={0}
+          disableHoverableContent
+        >
+          <div className="overflow-hidden rounded-[0.5rem] bg-background">
+            <div className="flex max-h-full w-full flex-col">
+              {!props?.hideToolbar && <Toolbar disabled={!!props?.disabled}
+                editor={editor}
+                toolbar={props.toolbar}
+              />}
+
+              <EditorContent className={`relative ${props?.contentClass || ''}`}
+                editor={editor}
+
+              />
+
+              {hasExtensionValue && <CharactorCount editor={editor}
+                extensions={extensions}
+              />}
+
+              {!props?.hideBubble && <BubbleMenu bubbleMenu={props?.bubbleMenu}
+                disabled={props?.disabled}
+                editor={editor}
+              />}
+            </div>
+          </div>
+        </TooltipProvider>
+      </ProviderRichText>
+
+      <Toaster />
+    </div>
+  );
+}
+
+export default forwardRef(RichTextEditor);

package/src/components/SizeSetter/SizeSetter.tsx

@@ -0,0 +1,102 @@
+import { useEffect, useState } from 'react';
+import { Button, Input, Label, Popover, PopoverContent, PopoverTrigger } from '@/components/ui';
+import { useLocale } from '@/locales';
+
+interface ISize {
+  width: number | string, height: number | string 
+}
+
+interface IProps {
+  width: number | string
+  maxWidth?: number | string
+  height: number | string
+  onOk: (arg: ISize) => void
+  children: React.ReactNode
+}
+
+const containerStyle = { padding: '0 12px 12px' };
+
+export const SizeSetter: React.FC<IProps> = ({ width, maxWidth, height, onOk, children }: any) => {
+  const { t } = useLocale();
+
+  const [form, setForm] = useState({
+    width: '',
+    height: '',
+    maxWidth: '',
+  });
+
+  useEffect(() => {
+    setForm({
+      width,
+      height,
+      maxWidth,
+    });
+  }, [height, maxWidth, width]);
+
+  function handleSubmit(event: any) {
+    event.preventDefault();
+    event.stopPropagation();
+    onOk(form);
+  }
+
+  return (
+    <Popover modal>
+      <PopoverTrigger asChild>
+        {children}
+      </PopoverTrigger>
+
+      <PopoverContent>
+        <div style={containerStyle}>
+          <form className="flex flex-col gap-2" onSubmit={handleSubmit}>
+            <Label className="mb-[6px]">
+              Width
+            </Label>
+
+            <div className="flex w-full max-w-sm items-center gap-1.5">
+              <div className="relative items-center w-full max-w-sm">
+                <Input
+                  type="number"
+                  value={form.width}
+                  required
+                  onChange={e => setForm({ ...form, width: e.target.value })}
+                />
+              </div>
+            </div>
+
+            <Label className="mb-[6px]">
+              Max Width
+            </Label>
+
+            <div className="flex w-full max-w-sm items-center gap-1.5">
+              <div className="relative items-center w-full max-w-sm">
+                <Input
+                  type="number"
+                  value={form.maxWidth}
+                  required
+                  onChange={e => setForm({ ...form, maxWidth: e.target.value })}
+                />
+              </div>
+            </div>
+            <Label className="mb-[6px]">
+              Height
+            </Label>
+            <div className="flex w-full max-w-sm items-center gap-1.5">
+              <div className="relative items-center w-full max-w-sm">
+                <Input
+                  type="number"
+                  value={form.height}
+                  required
+                  onChange={e => setForm({ ...form, height: e.target.value })}
+                />
+              </div>
+            </div>
+
+            <Button type="submit" className="self-end mt-2">
+              {t('editor.link.dialog.button.apply')}
+            </Button>
+          </form>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/components/Toolbar.tsx

@@ -0,0 +1,108 @@
+import React, { useMemo } from 'react';
+import type { Editor } from '@tiptap/core';
+import type { ToolbarItemProps, ToolbarProps } from '@/types';
+
+import { Separator } from '@/components';
+import { useLocale } from '@/locales';
+import { isFunction } from '@/utils/utils';
+
+export interface ToolbarComponentProps {
+  editor: Editor
+  disabled?: boolean
+  toolbar?: ToolbarProps
+}
+
+function Toolbar({ editor, disabled, toolbar }: ToolbarComponentProps) {
+  const { t, lang } = useLocale();
+
+  const toolbarItems = useMemo(() => {
+    const extensions = [...editor.extensionManager.extensions];
+    const sortExtensions = extensions.sort((arr, acc) => {
+      const a = (arr.options).sort ?? -1;
+      const b = (acc.options).sort ?? -1;
+      return a - b;
+    });
+
+    let menus: ToolbarItemProps[] = [];
+
+    for (const extension of sortExtensions) {
+      const {
+        button,
+        divider = false,
+        spacer = false,
+        toolbar = true,
+      } = extension.options;
+      if (!button || !isFunction(button) || !toolbar) {
+        continue;
+      }
+
+      const _button: ToolbarItemProps['button'] | ToolbarItemProps['button'][] = button({
+        editor,
+        extension,
+        t,
+      });
+
+      if (Array.isArray(_button)) {
+        const menu: ToolbarItemProps[] = _button.map((k, i) => ({
+          button: k,
+          divider: i === _button.length - 1 ? divider : false,
+          spacer: i === 0 ? spacer : false,
+          type: extension.type,
+          name: extension.name,
+        }));
+        menus = [...menus, ...menu];
+        continue;
+      }
+
+      menus.push({
+        button: _button,
+        divider,
+        spacer,
+        type: extension.type,
+        name: extension.name,
+      });
+    }
+    return menus;
+  }, [editor, t, lang]);
+
+  const containerDom = (innerContent: React.ReactNode) => {
+    return (
+      <div
+        className="toolbar px-1 py-2 !border-b"
+        style={{
+          pointerEvents: disabled ? 'none' : 'auto',
+          opacity: disabled ? 0.5 : 1,
+        }}
+      >
+        <div className="relative flex flex-wrap h-auto gap-y-1 gap-x-1">
+          {innerContent}
+        </div>
+      </div>
+    );
+  };
+
+  const dom = toolbarItems.map((item: ToolbarItemProps, key) => {
+    const ButtonComponent = item.button.component;
+
+    return (
+      <div className="flex items-center" key={`toolbar-item-${key}`}>
+        {item?.spacer && <Separator orientation="vertical" className="!h-[16px] !mx-[10px]" />}
+
+        <ButtonComponent
+          {...item.button.componentProps}
+          disabled={disabled || item?.button?.componentProps?.disabled}
+        />
+
+        {item?.divider && <Separator orientation="vertical" className="!h-auto !mx-2" />}
+      </div>
+    );
+  });
+
+  if (toolbar && toolbar?.render) {
+    return toolbar.render({ editor, disabled: disabled || false }, toolbarItems, dom, containerDom);
+  }
+
+  return containerDom(dom);
+}
+
+export { Toolbar };

package/src/components/icons/Activity.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+function Activity() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="1em"
+      height="1em"
+    >
+      <path
+        d="M12 0C5.373 0 0 5.372 0 12c0 6.627 5.373 12 12 12 6.628 0 12-5.373 12-12 0-6.628-5.372-12-12-12m9.949 11H17.05c.224-2.527 1.232-4.773 1.968-6.113A9.966 9.966 0 0 1 21.949 11M13 11V2.051a9.945 9.945 0 0 1 4.432 1.564c-.858 1.491-2.156 4.22-2.392 7.385H13zm-2 0H8.961c-.238-3.165-1.536-5.894-2.393-7.385A9.95 9.95 0 0 1 11 2.051V11zm0 2v8.949a9.937 9.937 0 0 1-4.432-1.564c.857-1.492 2.155-4.221 2.393-7.385H11zm4.04 0c.236 3.164 1.534 5.893 2.392 7.385A9.92 9.92 0 0 1 13 21.949V13h2.04zM4.982 4.887C5.718 6.227 6.726 8.473 6.951 11h-4.9a9.977 9.977 0 0 1 2.931-6.113M2.051 13h4.9c-.226 2.527-1.233 4.771-1.969 6.113A9.972 9.972 0 0 1 2.051 13m16.967 6.113c-.735-1.342-1.744-3.586-1.968-6.113h4.899a9.961 9.961 0 0 1-2.931 6.113"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default Activity;

package/src/components/icons/Animas.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+function Animal() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="1em"
+      height="1em"
+    >
+      <path
+        d="M15.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 15.5 8M8.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 8.5 8"
+        fill="currentColor"
+      />
+      <path
+        d="M18.933 0h-.027c-.97 0-2.138.787-3.018 1.497-1.274-.374-2.612-.51-3.887-.51-1.285 0-2.616.133-3.874.517C7.245.79 6.069 0 5.093 0h-.027C3.352 0 .07 2.67.002 7.026c-.039 2.479.276 4.238 1.04 5.013.254.258.882.677 1.295.882.191 3.177.922 5.238 2.536 6.38.897.637 2.187.949 3.2 1.102C8.04 20.6 8 20.795 8 21c0 1.773 2.35 3 4 3 1.648 0 4-1.227 4-3 0-.201-.038-.393-.072-.586 2.573-.385 5.435-1.877 5.925-7.587.396-.22.887-.568 1.104-.788.763-.774 1.079-2.534 1.04-5.013C23.929 2.67 20.646 0 18.933 0M3.223 9.135c-.237.281-.837 1.155-.884 1.238-.15-.41-.368-1.349-.337-3.291.051-3.281 2.478-4.972 3.091-5.031.256.015.731.27 1.265.646-1.11 1.171-2.275 2.915-2.352 5.125-.133.546-.398.858-.783 1.313M12 22c-.901 0-1.954-.693-2-1 0-.654.475-1.236 1-1.602V20a1 1 0 1 0 2 0v-.602c.524.365 1 .947 1 1.602-.046.307-1.099 1-2 1m3-3.48v.02a4.752 4.752 0 0 0-1.262-1.02c1.092-.516 2.239-1.334 2.239-2.217 0-1.842-1.781-2.195-3.977-2.195-2.196 0-3.978.354-3.978 2.195 0 .883 1.148 1.701 2.238 2.217A4.8 4.8 0 0 0 9 18.539v-.025c-1-.076-2.182-.281-2.973-.842-1.301-.92-1.838-3.045-1.853-6.478l.023-.041c.496-.826 1.49-1.45 1.804-3.102 0-2.047 1.357-3.631 2.362-4.522C9.37 3.178 10.555 3 11.948 3c1.447 0 2.685.192 3.733.57 1 .9 2.316 2.465 2.316 4.48.313 1.651 1.307 2.275 1.803 3.102.035.058.068.117.102.178-.059 5.967-1.949 7.01-4.902 7.19m6.628-8.202c-.037-.065-.074-.13-.113-.195a7.587 7.587 0 0 0-.739-.987c-.385-.455-.648-.768-.782-1.313-.076-2.209-1.241-3.954-2.353-5.124.531-.376 1.004-.63 1.261-.647.636.071 3.044 1.764 3.096 5.031.027 1.81-.347 3.218-.37 3.235"
+        fill="currentColor"
+      />
+    </svg>
+
+  );
+}
+
+export default Animal;

package/src/components/icons/AspectRatio.tsx

@@ -0,0 +1,13 @@
+import type { SVGProps } from 'react';
+
+export function AspectRatio(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M19 12h-2v3h-3v2h5zM7 9h3V7H5v5h2zm14-6H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m0 16H3V5h18z"
+      >
+      </path>
+    </svg>
+  );
+}

package/src/components/icons/Blockquote.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react';
+
+export function BlockquoteLeft(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M6 15h15m0 4H6m9-8h6m0-4h-6M9 9h1a1 1 0 1 1-1 1V7.5a2 2 0 0 1 2-2M3 9h1a1 1 0 1 1-1 1V7.5a2 2 0 0 1 2-2"
+      >
+      </path>
+    </svg>
+  );
+}

package/src/components/icons/ColumnAddLeft.tsx

@@ -0,0 +1,7 @@
+export function ColumnAddLeft() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+      <path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1m-9 8h4m-2-2v4"></path>
+    </svg>
+  );
+}

package/src/components/icons/ColumnAddRight.tsx

@@ -0,0 +1,7 @@
+export function ColumnAddRight() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+      <path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1m9 8h4m-2-2v4"></path>
+    </svg>
+  );
+}

package/src/components/icons/DeleteColumn.tsx

@@ -0,0 +1,26 @@
+function DeleteColumn() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      aria-hidden="true"
+      role="img"
+      className="w-4 h-4"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M5.5 3c1.404 0 2.107 0 2.611.38c.219.164.406.375.552.62C9 4.568 9 5.358 9 6.938v10.125c0 1.58 0 2.37-.337 2.937a2.1 2.1 0 0 1-.552.621c-.504.38-1.207.38-2.611.38s-2.107 0-2.611-.38a2.1 2.1 0 0 1-.552-.62C2 19.432 2 18.642 2 17.062V6.938c0-1.58 0-2.37.337-2.938a2.1 2.1 0 0 1 .552-.62C3.393 3 4.096 3 5.5 3M20 11.938v5.124c0 1.58 0 2.37-.337 2.938a2.1 2.1 0 0 1-.552.62c-.504.38-1.207.38-2.611.38s-2.107 0-2.611-.38a2.1 2.1 0 0 1-.552-.62C13 19.433 13 18.642 13 17.063V6.938c0-1.58 0-2.37.337-2.938M22 9l-6-6m6 0l-6 6"
+        color="currentColor"
+      />
+    </svg>
+  );
+}
+
+export { DeleteColumn };

package/src/components/icons/DeleteRow.tsx

@@ -0,0 +1,26 @@
+function DeleteRow() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      aria-hidden="true"
+      role="img"
+      className="w-4 h-4"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M21 18.5c0 1.404 0 2.107-.38 2.611a2.1 2.1 0 0 1-.62.552c-.567.337-1.358.337-2.937.337H6.938c-1.58 0-2.37 0-2.938-.337a2.1 2.1 0 0 1-.62-.552C3 20.607 3 19.904 3 18.5s0-2.107.38-2.611c.163-.218.374-.406.62-.552C4.567 15 5.357 15 6.938 15h10.125c1.58 0 2.37 0 2.937.337c.246.146.457.334.62.552c.38.504.38 1.207.38 2.611M12.063 4H6.937C5.358 4 4.568 4 4 4.337a2.1 2.1 0 0 0-.62.552C3 5.393 3 6.096 3 7.5s0 2.107.38 2.611c.163.218.374.406.62.552C4.567 11 5.357 11 6.938 11h10.125c1.58 0 2.37 0 2.937-.337M21 8l-6-6m6 0l-6 6"
+        color="currentColor"
+      />
+    </svg>
+  );
+}
+
+export { DeleteRow };

package/src/components/icons/Direction.tsx

@@ -0,0 +1,7 @@
+export function Direction() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+      <path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 21v-4m0-4V9m0-4V3m-2 18h4M8 5v4h11l2-2l-2-2zm6 8v4H6l-2-2l2-2z"></path>
+    </svg>
+  );
+}

package/src/components/icons/Excalidraw.tsx

@@ -0,0 +1,7 @@
+export function Excalidraw() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+      <path fill="currentColor" d="M23.943 19.806a.2.2 0 0 0-.168-.034c-1.26-1.855-2.873-3.61-4.419-5.315l-.252-.284c-.001-.073-.067-.12-.134-.15l-.084-.084c-.05-.1-.169-.167-.286-.1c-.47.234-.907.585-1.327.919c-.554.434-1.109.87-1.63 1.354a5 5 0 0 0-.588.618c-.084.117-.017.217.084.267c-.37.368-.74.736-1.109 1.12a.2.2 0 0 0-.05.134c0 .05.033.1.067.117l.655.502v.016c.924.92 2.554 2.173 4.285 3.527c.251.201.52.402.773.602c.117.134.234.285.335.418c.05.066.169.084.236.033c.033.034.084.067.118.1a.24.24 0 0 0 .1.034a.15.15 0 0 0 .135-.066a.24.24 0 0 0 .033-.1c.017 0 .017.016.034.016a.2.2 0 0 0 .134-.05l3.058-3.327c.12-.116.014-.267 0-.267m-7.628-.134l-1.546-1.17l-.15-.1c-.035-.017-.068-.05-.102-.067l-.117-.1c.66-.66 1.33-1.308 2-1.956c-.488.484-1.463 1.906-1.261 2.373c.002 0 .018.042.067.084zm4.1 3.126l-1.277-.97a27 27 0 0 0-1.58-1.504c.69.518 1.277.97 1.361 1.053c.673.585.638.485 1.093.87l.554.4c-.074.103-.151.148-.151.151m.336.25l-.034-.016a1 1 0 0 0 .152-.117zM.588 3.476c.033.217.084.435.117.636c.201 1.103.403 2.106.772 2.858l.152.568c.05.217.134.485.219.552a67 67 0 0 0 3.578 2.942a.18.18 0 0 0 .219 0s0 .016.016.016a.15.15 0 0 0 .118.05a.2.2 0 0 0 .134-.05c1.798-1.989 3.142-3.627 4.1-4.998c.068-.066.084-.167.084-.25c.067-.067.118-.151.185-.201c.067-.067.067-.184 0-.235l-.017-.016c0-.033-.017-.084-.05-.1c-.42-.401-.722-.685-1.042-.986a94 94 0 0 1-2.352-2.273c-.017-.017-.034-.034-.067-.034c-.336-.117-1.025-.234-1.882-.385c-1.277-.216-3.008-.517-4.57-.986c0 0-.101 0-.118.017l-.05.05C.05.714.022.707 0 .718c.017.1.017.167.05.284c0 .033.068.301.068.334zm7.19 4.78l-.033.034a.036.036 0 0 1 .033-.034M6.553 2.238c.101.1.521.502.622.585c-.437-.2-1.529-.702-2.034-.869c.505.1 1.194.201 1.412.284M.79 1.403c.252.434.454 1.939.655 3.41c-.118-.469-.201-.936-.302-1.372C.992 2.673.84 1.988.638 1.386c.124 0 .152.021.152.017m-.286-.369c0-.016 0-.033-.017-.033c.085 0 .135.017.202.05c0 .006-.145-.017-.185-.017m23.17-.217c.017-.066-.336-.367-.219-.384c.253-.017.253-.401 0-.401c-.335.017-.688.1-1.008.15c-.587.117-1.192.234-1.78.367a80 80 0 0 0-3.949.937c-.403.117-.857.2-1.243.401c-.135.067-.118.2-.05.284c-.034.017-.051.017-.085.034c-.117.017-.218.034-.335.05c-.102.017-.152.1-.135.2c0 .017.017.05.017.067c-.706.936-1.496 1.923-2.353 2.976c-.84.969-1.73 1.989-2.62 3.042c-2.84 3.31-6.05 7.07-9.594 10.38a.16.16 0 0 0 0 .234c.016.016.033.033.05.033c-.05.05-.101.085-.152.134q-.05.05-.05.1a.4.4 0 0 0-.067.084c-.067.067-.067.184.017.234c.067.066.185.066.235-.017c.017-.017.017-.033.033-.033a.265.265 0 0 1 .37 0c.202.217.404.435.588.618l-.42-.35c-.067-.067-.184-.05-.234.016c-.068.066-.051.184.016.234l4.469 3.727c.034.034.067.034.118.034a.15.15 0 0 0 .117-.05l.101-.1c.017.016.05.016.067.016c.05 0 .084-.016.118-.05c6.049-6.05 10.922-10.614 16.5-14.693c.05-.033.067-.1.067-.15c.067 0 .118-.05.15-.117c1.026-3.125 1.228-5.9 1.295-7.27c0-.059.016-.038.016-.068c.017-.033.017-.05.017-.05a.98.98 0 0 0-.067-.619m-10.82 4.915c.268-.301.537-.619.806-.903c-1.73 2.273-4.603 5.767-8.67 9.929c2.773-3.059 5.562-6.218 7.864-9.026M5.14 23.466c-.016-.017-.016-.017 0-.017zm2.504-2.156c.135-.15.27-.284.42-.434c0 0 0 .016.017.016c-.224.198-.433.418-.437.418m.69-.668c.099-.1.14-.173.284-.318c.992-1.02 2.017-2.04 3.059-3.076l.016-.016c.252-.2.555-.418.824-.619a228 228 0 0 0-4.184 4.029M14.852 3.91c-.554.719-1.176 1.671-1.697 2.423c-1.646 2.374-6.94 8.174-7.057 8.274a1190 1190 0 0 1-4.839 4.597l-.1.1c-.085-.1-.085-.25.016-.334C8.652 11.966 13.19 6.133 15.021 3.576c-.05.116-.084.216-.168.334zm2.906 3.427c-.671-.386-.99-.987-.806-1.572l.05-.2a.8.8 0 0 1 .085-.167a1.9 1.9 0 0 1 .756-.703c.016 0 .033 0 .05-.016c-.017-.034-.017-.084-.017-.134c.017-.1.085-.167.202-.167c.202 0 .824.184 1.059.384c.067.05.134.117.202.184c.084.1.218.268.285.401c.034.017.067.184.118.268c.033.134.067.284.05.418c-.017.016 0 .116-.017.116a1.6 1.6 0 0 1-.218.619c-.03.03.006.012-.05.067a1.2 1.2 0 0 1-.32.334a1.49 1.49 0 0 1-1.26.234a2 2 0 0 0-.169-.066m4.37 1.403c0 .017-.017.05 0 .067c-.034 0-.05.017-.085.034a110 110 0 0 0-3.915 3.025c1.11-.986 2.218-1.989 3.378-2.975c.336-.301.571-.686.638-1.12l.168-1.003v-.033c.085-.201.404-.118.353.1c-.004-.001-.173.795-.537 1.905"></path>
+    </svg>
+  );
+}

package/src/components/icons/ExportPdf.tsx

@@ -0,0 +1,8 @@
+export function ExportPdf() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32">
+      <path fill="currentColor" d="M30 18v-2h-6v10h2v-4h3v-2h-3v-2zm-11 8h-4V16h4a3.003 3.003 0 0 1 3 3v4a3.003 3.003 0 0 1-3 3m-2-2h2a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2zm-6-8H6v10h2v-3h3a2.003 2.003 0 0 0 2-2v-3a2 2 0 0 0-2-2m-3 5v-3h3l.001 3z"></path>
+      <path fill="currentColor" d="M22 14v-4a.91.91 0 0 0-.3-.7l-7-7A.9.9 0 0 0 14 2H4a2.006 2.006 0 0 0-2 2v24a2 2 0 0 0 2 2h16v-2H4V4h8v6a2.006 2.006 0 0 0 2 2h6v2Zm-8-4V4.4l5.6 5.6Z"></path>
+    </svg>
+  );
+}

package/src/components/icons/ExportWord.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+function ExportWord() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      className="icon"
+      viewBox="0 0 1024 1024"
+    >
+      <path
+        fill="currentColor"
+        d="M679.253 402.364 618.77 561.015l-60.348-158.651a30.04 30.04 0 0 0-30.447-18.637 29.76 29.76 0 0 0-30.447 18.637l-60.416 158.651-60.416-158.651a30.515 30.515 0 0 0-38.843-17.272 28.945 28.945 0 0 0-17.954 37.547l88.815 233.267c4.369 11.469 15.7 19.115 28.398 19.115a30.31 30.31 0 0 0 28.468-19.115l62.395-163.908 62.396 163.84c4.437 11.605 15.701 19.183 28.4 19.183a30.31 30.31 0 0 0 28.466-19.115l88.747-233.267a28.945 28.945 0 0 0-17.886-37.547 30.447 30.447 0 0 0-38.912 17.272zm219.478 395.605-51.883-29.218c-28.672-16.18-52.224-3.072-52.224 29.082v.273H643.209a29.833 29.833 0 0 0-30.31 29.354c0 16.18 13.584 29.218 30.31 29.218h151.825c1.092 30.516 24.03 43.077 52.224 27.648l51.063-27.989c29.013-15.906 29.15-42.189.41-58.368"
+      />
+      <path
+        fill="currentColor"
+        d="m810.667 913.135-.478.068H201.796c-19.865 0-36.727-11.673-36.727-25.6v-618.36h154.965c51.268 0 92.911-39.39 92.911-87.858v-87.86H810.19c19.797 0 36.522 11.742 36.522 25.669V739.26h61.987V119.262c0-46.421-44.169-84.241-98.51-84.241H328.364l-225.28 194.56v658.09c0 46.285 44.236 84.105 98.713 84.105H810.19c43.759 0 80.554-24.713 93.32-58.573h-92.842zM350.89 94.89v86.562c0 16.11-13.858 29.286-30.925 29.286H216.815L350.959 94.891z"
+      />
+    </svg>
+  );
+}
+
+export default ExportWord;

package/src/components/icons/FileWordOutline.tsx

@@ -0,0 +1,13 @@
+import type { SVGProps } from 'react';
+
+export function FileWordOutline(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M14 2H6a2 2 0 0 0-2 2v16c0 1.11.89 2 2 2h12c1.11 0 2-.89 2-2V8zm4 18H6V4h7v5h5zm-.65-10l-2.1 9h-1.4l-1.8-6.79l-1.8 6.79h-1.4l-2.2-9h1.5l1.4 6.81l1.8-6.81h1.3l1.8 6.81l1.4-6.81z"
+      >
+      </path>
+    </svg>
+  );
+}

package/src/components/icons/Flag.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+function Flag() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="1em"
+      height="1em"
+    >
+      <path
+        d="M0 0l6.084 24H8L1.916 0zM21 5h-4l-1-4H4l3 12h3l1 4h13L21 5zM6.563 3h7.875l2 8H8.563l-2-8zm8.832 10l-2.856 1.904L12.063 13h3.332zM19 13l-1.5-6h1.938l2 8H16l3-2z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default Flag;