@gientech/modual 2.0.8 → 2.0.9

package/src/modules/search/components/Editor/plugins/autofomatRules.ts

@@ -0,0 +1,332 @@
+import {
+  autoformatArrow,
+  autoformatLegal,
+  autoformatLegalHtml,
+  autoformatMath,
+  autoformatPunctuation,
+  autoformatSmartQuotes
+} from "@udecode/plate-autoformat";
+import {
+  BoldPlugin,
+  CodePlugin,
+  ItalicPlugin,
+  StrikethroughPlugin,
+  SubscriptPlugin,
+  SuperscriptPlugin,
+  UnderlinePlugin
+} from "@udecode/plate-basic-marks/react";
+import { BlockquotePlugin } from "@udecode/plate-block-quote/react";
+import {
+  CodeBlockPlugin,
+  CodeLinePlugin,
+  insertEmptyCodeBlock
+} from "@udecode/plate-code-block";
+import {
+  getParentNode,
+  insertNodes,
+  isBlock,
+  isElement,
+  isType,
+  setNodes
+} from "@udecode/plate-common";
+import { ParagraphPlugin } from "@udecode/plate-common/react";
+import { HEADING_KEYS } from "@udecode/plate-heading";
+import { HighlightPlugin } from "@udecode/plate-highlight/react";
+import { HorizontalRulePlugin } from "@udecode/plate-horizontal-rule/react";
+import {
+  INDENT_LIST_KEYS,
+  ListStyleType,
+  toggleIndentList
+} from "@udecode/plate-indent-list";
+import { toggleList, unwrapList } from "@udecode/plate-list";
+import {
+  BulletedListPlugin,
+  ListItemPlugin,
+  NumberedListPlugin,
+  TodoListPlugin
+} from "@udecode/plate-list/react";
+import { openNextToggles, TogglePlugin } from "@udecode/plate-toggle/react";
+
+import type {
+  AutoformatBlockRule,
+  AutoformatRule
+} from "@udecode/plate-autoformat";
+import type { SlateEditor } from "@udecode/plate-common";
+import type { TTodoListItemElement } from "@udecode/plate-list";
+
+export const preFormat: AutoformatBlockRule["preFormat"] = (editor) =>
+  unwrapList(editor);
+
+export const format = (editor: SlateEditor, customFormatting: any) => {
+  if (editor.selection) {
+    const parentEntry = getParentNode(editor, editor.selection);
+
+    if (!parentEntry) return;
+
+    const [node] = parentEntry;
+
+    if (
+      isElement(node) &&
+      !isType(editor, node, CodeBlockPlugin.key) &&
+      !isType(editor, node, CodeLinePlugin.key)
+    ) {
+      customFormatting();
+    }
+  }
+};
+
+export const formatList = (editor: SlateEditor, elementType: string) => {
+  format(editor, () =>
+    toggleList(editor, {
+      type: elementType
+    })
+  );
+};
+
+export const autoformatMarks: AutoformatRule[] = [
+  {
+    match: "***",
+    mode: "mark",
+    type: [BoldPlugin.key, ItalicPlugin.key]
+  },
+  {
+    match: "__*",
+    mode: "mark",
+    type: [UnderlinePlugin.key, ItalicPlugin.key]
+  },
+  {
+    match: "__**",
+    mode: "mark",
+    type: [UnderlinePlugin.key, BoldPlugin.key]
+  },
+  {
+    match: "___***",
+    mode: "mark",
+    type: [UnderlinePlugin.key, BoldPlugin.key, ItalicPlugin.key]
+  },
+  {
+    match: "**",
+    mode: "mark",
+    type: BoldPlugin.key
+  },
+  {
+    match: "__",
+    mode: "mark",
+    type: UnderlinePlugin.key
+  },
+  {
+    match: "*",
+    mode: "mark",
+    type: ItalicPlugin.key
+  },
+  {
+    match: "_",
+    mode: "mark",
+    type: ItalicPlugin.key
+  },
+  {
+    match: "~~",
+    mode: "mark",
+    type: StrikethroughPlugin.key
+  },
+  {
+    match: "^",
+    mode: "mark",
+    type: SuperscriptPlugin.key
+  },
+  {
+    match: "~",
+    mode: "mark",
+    type: SubscriptPlugin.key
+  },
+  {
+    match: "==",
+    mode: "mark",
+    type: HighlightPlugin.key
+  },
+  {
+    match: "≡",
+    mode: "mark",
+    type: HighlightPlugin.key
+  },
+  {
+    match: "`",
+    mode: "mark",
+    type: CodePlugin.key
+  }
+];
+
+export const autoformatBlocks: AutoformatRule[] = [
+  {
+    match: "# ",
+    mode: "block",
+    preFormat,
+    type: HEADING_KEYS.h1
+  },
+  {
+    match: "## ",
+    mode: "block",
+    preFormat,
+    type: HEADING_KEYS.h2
+  },
+  {
+    match: "### ",
+    mode: "block",
+    preFormat,
+    type: HEADING_KEYS.h3
+  },
+  {
+    match: "#### ",
+    mode: "block",
+    preFormat,
+    type: HEADING_KEYS.h4
+  },
+  {
+    match: "##### ",
+    mode: "block",
+    preFormat,
+    type: HEADING_KEYS.h5
+  },
+  {
+    match: "###### ",
+    mode: "block",
+    preFormat,
+    type: HEADING_KEYS.h6
+  },
+  {
+    match: "> ",
+    mode: "block",
+    preFormat,
+    type: BlockquotePlugin.key
+  },
+  {
+    format: (editor) => {
+      insertEmptyCodeBlock(editor, {
+        defaultType: ParagraphPlugin.key,
+        insertNodesOptions: { select: true }
+      });
+    },
+    match: "```",
+    mode: "block",
+    preFormat,
+    triggerAtBlockStart: false,
+    type: CodeBlockPlugin.key
+  },
+  {
+    match: "+ ",
+    mode: "block",
+    preFormat: openNextToggles,
+    type: TogglePlugin.key
+  },
+  {
+    format: (editor) => {
+      setNodes(editor, { type: HorizontalRulePlugin.key });
+      insertNodes(editor, {
+        children: [{ text: "" }],
+        type: ParagraphPlugin.key
+      });
+    },
+    match: ["---", "—-", "___ "],
+    mode: "block",
+    type: HorizontalRulePlugin.key
+  }
+];
+
+export const autoformatLists: AutoformatRule[] = [
+  {
+    format: (editor) => formatList(editor, BulletedListPlugin.key),
+    match: ["* ", "- "],
+    mode: "block",
+    preFormat,
+    type: ListItemPlugin.key
+  },
+  {
+    format: (editor) => formatList(editor, NumberedListPlugin.key),
+    match: ["^\\d+\\.$ ", "^\\d+\\)$ "],
+    matchByRegex: true,
+    mode: "block",
+    preFormat,
+    type: ListItemPlugin.key
+  },
+  {
+    match: "[] ",
+    mode: "block",
+    type: TodoListPlugin.key
+  },
+  {
+    format: (editor) =>
+      setNodes<TTodoListItemElement>(
+        editor,
+        { checked: true, type: TodoListPlugin.key },
+        {
+          match: (n) => isBlock(editor, n)
+        }
+      ),
+    match: "[x] ",
+    mode: "block",
+    type: TodoListPlugin.key
+  }
+];
+
+export const autoformatIndentLists: AutoformatRule[] = [
+  {
+    format: (editor) => {
+      toggleIndentList(editor, {
+        listStyleType: ListStyleType.Disc
+      });
+    },
+    match: ["* ", "- "],
+    mode: "block",
+    type: "list"
+  },
+  {
+    format: (editor) =>
+      toggleIndentList(editor, {
+        listStyleType: ListStyleType.Decimal
+      }),
+    match: ["^\\d+\\.$ ", "^\\d+\\)$ "],
+    matchByRegex: true,
+    mode: "block",
+    type: "list"
+  },
+  {
+    format: (editor) => {
+      toggleIndentList(editor, {
+        listStyleType: INDENT_LIST_KEYS.todo
+      });
+      setNodes(editor, {
+        checked: false,
+        listStyleType: INDENT_LIST_KEYS.todo
+      });
+    },
+    match: ["[] "],
+    mode: "block",
+    type: "list"
+  },
+  {
+    format: (editor) => {
+      toggleIndentList(editor, {
+        listStyleType: INDENT_LIST_KEYS.todo
+      });
+      setNodes(editor, {
+        checked: true,
+        listStyleType: INDENT_LIST_KEYS.todo
+      });
+    },
+    match: ["[x] "],
+    mode: "block",
+    type: "list"
+  }
+];
+
+export const autoformatRules: AutoformatRule[] = [
+  ...autoformatBlocks,
+  ...autoformatMarks,
+  ...autoformatSmartQuotes,
+  ...autoformatPunctuation,
+  ...autoformatLegal,
+  ...autoformatLegalHtml,
+  ...autoformatArrow,
+  ...autoformatMath,
+  ...autoformatIndentLists
+];

package/src/modules/search/components/Editor/plugins/convertImgPlugins.tsx

@@ -0,0 +1,20 @@
+import { createPlatePlugin, PlateElement, withRef } from "@udecode/plate/react";
+import { cn } from "@udecode/cn";
+export const CONVERT_IMG_PLUGINS = "convertImgPlugins";
+
+export const ConvertImgElements = withRef<typeof PlateElement>(
+  ({ children, className, onClick, ...props }, ref) => {
+    const url: string =
+      typeof props?.element?.url === "string" ? props?.element?.url : "";
+    return (
+      <PlateElement asChild ref={ref} {...props} onClick={() => {}}>
+        <span className={cn(``, className)}>{url}</span>
+      </PlateElement>
+    );
+  }
+);
+
+export const ConvertImgPlugins = createPlatePlugin({
+  key: CONVERT_IMG_PLUGINS,
+  node: { isElement: true, type: "img" }
+});

package/src/modules/search/components/Editor/plugins/createIndexes.tsx

@@ -0,0 +1,38 @@
+import { createPlatePlugin, PlateElement, withRef } from '@udecode/plate/react';
+import { cn } from '@udecode/cn';
+export const CREATEINDEXES = 'createIndexes';
+
+export const IndexesElement = withRef<typeof PlateElement>(
+  ({ children, className, onClick, ...props }, ref) => {
+    const text = props?.element?.children?.[0]?.text;
+    return (
+      <PlateElement
+        asChild
+        ref={ref}
+        {...props}
+        id={typeof props?.element?.id === 'string' ? props?.element?.id : '0'}
+        onClick={() => {
+          const p: any = {
+            ...(props?.element?.curReferentce || {}),
+            curMark: text,
+          };
+          onClick && onClick(p);
+        }}
+      >
+        <div
+          className={cn(
+            `inline-block text-center !leading-[14px] mx-[3px] pr-[1px] ${text ? '' : 'hidden'}`,
+            className
+          )}
+        >
+          {children}
+        </div>
+      </PlateElement>
+    );
+  }
+);
+
+export const CreateIndexes = createPlatePlugin({
+  key: CREATEINDEXES,
+  node: { isElement: true, isInline: true, type: 'retrive-tag' },
+});

package/src/modules/search/components/Editor/plugins/displayer.ts

@@ -0,0 +1,298 @@
+import { withProps } from "@udecode/cn";
+import { ParagraphPlugin, PlateLeaf } from "@udecode/plate-common/react";
+import { BlockquotePlugin } from "@udecode/plate-block-quote/react";
+import {
+  CodeBlockPlugin,
+  CodeLinePlugin,
+  CodeSyntaxPlugin
+} from "@udecode/plate-code-block/react";
+import { HeadingPlugin } from "@udecode/plate-heading/react";
+import { HorizontalRulePlugin } from "@udecode/plate-horizontal-rule/react";
+import { LinkPlugin } from "@udecode/plate-link/react";
+import { ImagePlugin, MediaEmbedPlugin } from "@udecode/plate-media/react";
+import { ExcalidrawPlugin } from "@udecode/plate-excalidraw/react";
+import { ColumnPlugin, ColumnItemPlugin } from "@udecode/plate-layout/react";
+
+import {
+  TablePlugin,
+  TableRowPlugin,
+  TableCellPlugin,
+  TableCellHeaderPlugin
+} from "@udecode/plate-table/react";
+import { TodoListPlugin } from "@udecode/plate-list/react";
+import { DatePlugin } from "@udecode/plate-date/react";
+import {
+  BoldPlugin,
+  ItalicPlugin,
+  UnderlinePlugin,
+  StrikethroughPlugin,
+  CodePlugin,
+  SubscriptPlugin,
+  SuperscriptPlugin
+} from "@udecode/plate-basic-marks/react";
+import {
+  FontColorPlugin,
+  FontBackgroundColorPlugin,
+  FontSizePlugin
+} from "@udecode/plate-font";
+import { HighlightPlugin } from "@udecode/plate-highlight/react";
+import { KbdPlugin } from "@udecode/plate-kbd/react";
+import { AlignPlugin } from "@udecode/plate-alignment";
+import { IndentPlugin } from "@udecode/plate-indent/react";
+import { IndentListPlugin } from "@udecode/plate-indent-list/react";
+import { LineHeightPlugin } from "@udecode/plate-line-height";
+import { AutoformatPlugin } from "@udecode/plate-autoformat/react";
+import { NodeIdPlugin } from "@udecode/plate-node-id";
+import { DocxPlugin } from "@udecode/plate-docx";
+import { MarkdownPlugin } from "@udecode/plate-markdown";
+import { JuicePlugin } from "@udecode/plate-juice";
+import { HEADING_KEYS } from "@udecode/plate-heading";
+import { CaptionPlugin } from "@udecode/plate-caption/react";
+
+import { BlockquoteElement } from "../ui/blockquote-element";
+import { CodeBlockElement } from "../ui/code-block-element";
+import { CodeLineElement } from "../ui/code-line-element";
+import { CodeSyntaxLeaf } from "../ui/code-syntax-leaf";
+import { ExcalidrawElement } from "../ui/excalidraw-element";
+import { HrElement } from "../ui/hr-element";
+import { ImageElement } from "../ui/image-element";
+import { LinkElement } from "../ui/link-element";
+import { ColumnGroupElement } from "../ui/column-group-element";
+import { ColumnElement } from "../ui/column-element";
+import { HeadingElement } from "../ui/heading-element";
+import { MediaEmbedElement } from "../ui/media-embed-element";
+import { ParagraphElement } from "../ui/paragraph-element";
+import { TableElement } from "../ui/table-element";
+import { TableRowElement } from "../ui/table-row-element";
+import {
+  TableCellElement,
+  TableCellHeaderElement
+} from "../ui/table-cell-element";
+import { TodoListElement } from "../ui/todo-list-element";
+import { DateElement } from "../ui/date-element";
+import { CodeLeaf } from "../ui/code-leaf";
+import { HighlightLeaf } from "../ui/highlight-leaf";
+import { KbdLeaf } from "../ui/kbd-leaf";
+import { withPlaceholders } from "../ui/placeholder";
+
+import { autoformatRules } from "./autofomatRules";
+import { MyPlugin } from "./myplugin.tsx";
+
+import { CREATEINDEXES, CreateIndexes, IndexesElement } from "./createIndexes";
+import { IMAGE_CLICK, ImageClickElement, ImageClickPlugin } from "./imageClick";
+import {
+  CONVERT_IMG_PLUGINS,
+  ConvertImgElements,
+  ConvertImgPlugins
+} from "./convertImgPlugins";
+
+import "../aichat.css";
+
+export const displayerEditor = ({ clickIndexes, imgClassName }: any) => {
+  return {
+    plugins: [
+      ConvertImgPlugins,
+      ImageClickPlugin,
+      ImagePlugin,
+      TablePlugin.configure({
+        options: {
+          enableMerging: false,
+          minColumnWidth: 80,
+          disableExpandOnInsert: true,
+          disableMarginLeft: true,
+          enableUnsetSingleColSize: false,
+          initialTableWidth: 80
+        }
+      }),
+      CreateIndexes,
+      BlockquotePlugin,
+      CodeBlockPlugin,
+      ParagraphPlugin,
+      HeadingPlugin,
+      HorizontalRulePlugin,
+      LinkPlugin.configure({}),
+      BoldPlugin,
+      ItalicPlugin,
+      UnderlinePlugin,
+      StrikethroughPlugin,
+      CodePlugin,
+      FontColorPlugin,
+      FontBackgroundColorPlugin,
+      FontSizePlugin,
+      HighlightPlugin,
+      AlignPlugin.configure({
+        inject: { targetPlugins: ["p", "h1", "h2", "h3"] }
+      }),
+      IndentPlugin.configure({
+        inject: { targetPlugins: ["p", "h1", "h2", "h3"] }
+      }),
+      IndentListPlugin.configure({
+        inject: { targetPlugins: ["p", "h1", "h2", "h3"] }
+      }),
+      LineHeightPlugin.configure({
+        inject: {
+          nodeProps: {
+            defaultNodeValue: 1.5,
+            validNodeValues: [1, 1.2, 1.5, 2, 3]
+          },
+          targetPlugins: ["p", "h1", "h2", "h3"]
+        }
+      }),
+      NodeIdPlugin,
+      JuicePlugin,
+      MyPlugin,
+      CaptionPlugin.configure({
+        options: { plugins: [ImagePlugin, MediaEmbedPlugin] }
+      })
+    ],
+    override: {
+      components: withPlaceholders({
+        [CONVERT_IMG_PLUGINS]: ConvertImgElements,
+        [IMAGE_CLICK]: withProps(ImageClickElement, {
+          className: imgClassName
+        }),
+        [ImagePlugin.key]: ImageElement,
+        [CREATEINDEXES]: withProps(IndexesElement, {
+          className:
+            "w-[14px] h-[14px] bg-[#E1EBFF] rounded-full text-[#055AFF] text-[10px] cursor-pointer",
+          onClick: (data) => {
+            clickIndexes(data);
+          }
+        }),
+        [BlockquotePlugin.key]: BlockquoteElement,
+        [CodeBlockPlugin.key]: CodeBlockElement,
+        [CodeLinePlugin.key]: CodeLineElement,
+        [CodeSyntaxPlugin.key]: CodeSyntaxLeaf,
+        [ExcalidrawPlugin.key]: ExcalidrawElement,
+        [HorizontalRulePlugin.key]: HrElement,
+        [LinkPlugin.key]: LinkElement,
+
+        [ColumnPlugin.key]: ColumnGroupElement,
+        [ColumnItemPlugin.key]: ColumnElement,
+        [HEADING_KEYS.h1]: withProps(HeadingElement, { variant: "h1" }),
+        [HEADING_KEYS.h2]: withProps(HeadingElement, { variant: "h2" }),
+        [HEADING_KEYS.h3]: withProps(HeadingElement, { variant: "h3" }),
+        [HEADING_KEYS.h4]: withProps(HeadingElement, { variant: "h4" }),
+        [HEADING_KEYS.h5]: withProps(HeadingElement, { variant: "h5" }),
+        [HEADING_KEYS.h6]: withProps(HeadingElement, { variant: "h6" }),
+        [MediaEmbedPlugin.key]: MediaEmbedElement,
+
+        [ParagraphPlugin.key]: ParagraphElement,
+        [TablePlugin.key]: TableElement,
+        [TableRowPlugin.key]: TableRowElement,
+        [TableCellPlugin.key]: TableCellElement,
+        [TableCellHeaderPlugin.key]: TableCellHeaderElement,
+        [TodoListPlugin.key]: TodoListElement,
+        [DatePlugin.key]: DateElement,
+        [BoldPlugin.key]: withProps(PlateLeaf, { as: "strong" }),
+        [CodePlugin.key]: CodeLeaf,
+
+        [HighlightPlugin.key]: HighlightLeaf,
+        [ItalicPlugin.key]: withProps(PlateLeaf, { as: "em" }),
+        [KbdPlugin.key]: KbdLeaf,
+        [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: "s" }),
+        [SubscriptPlugin.key]: withProps(PlateLeaf, { as: "sub" }),
+        [SuperscriptPlugin.key]: withProps(PlateLeaf, { as: "sup" }),
+        [UnderlinePlugin.key]: withProps(PlateLeaf, { as: "u" }),
+        [MyPlugin.key]: LinkElement
+      }),
+      plugins: {
+        [TablePlugin.key]: { enabled: true },
+        [ImagePlugin.key]: { enabled: true }
+      }
+    }
+  };
+};
+
+export const fileEditor = () => {
+  return {
+    plugins: [
+      MarkdownPlugin,
+      TablePlugin,
+      BlockquotePlugin,
+      CodeBlockPlugin,
+      ParagraphPlugin,
+      HeadingPlugin,
+      HorizontalRulePlugin,
+      LinkPlugin.configure({}),
+      ImagePlugin,
+      BoldPlugin,
+      ItalicPlugin,
+      UnderlinePlugin,
+      StrikethroughPlugin,
+      CodePlugin,
+      FontColorPlugin,
+      FontBackgroundColorPlugin,
+      FontSizePlugin,
+      HighlightPlugin,
+      AlignPlugin.configure({
+        inject: { targetPlugins: ["p", "h1", "h2", "h3"] }
+      }),
+      IndentPlugin.configure({
+        inject: { targetPlugins: ["p", "h1", "h2", "h3"] }
+      }),
+      IndentListPlugin.configure({
+        inject: { targetPlugins: ["p", "h1", "h2", "h3"] }
+      }),
+      LineHeightPlugin.configure({
+        inject: {
+          nodeProps: {
+            defaultNodeValue: 1.5,
+            validNodeValues: [1, 1.2, 1.5, 2, 3]
+          },
+          targetPlugins: ["p", "h1", "h2", "h3"]
+        }
+      }),
+      AutoformatPlugin.configure({
+        options: {
+          rules: autoformatRules,
+          enableUndoOnDelete: true
+        }
+      }),
+      NodeIdPlugin,
+      DocxPlugin,
+      JuicePlugin
+    ],
+    override: {
+      components: withPlaceholders({
+        [BlockquotePlugin.key]: BlockquoteElement,
+        [CodeBlockPlugin.key]: CodeBlockElement,
+        [CodeLinePlugin.key]: CodeLineElement,
+        [CodeSyntaxPlugin.key]: CodeSyntaxLeaf,
+        [ExcalidrawPlugin.key]: ExcalidrawElement,
+        [HorizontalRulePlugin.key]: HrElement,
+        [ImagePlugin.key]: ImageElement,
+        [LinkPlugin.key]: LinkElement,
+
+        [ColumnPlugin.key]: ColumnGroupElement,
+        [ColumnItemPlugin.key]: ColumnElement,
+        [HEADING_KEYS.h1]: withProps(HeadingElement, { variant: "h1" }),
+        [HEADING_KEYS.h2]: withProps(HeadingElement, { variant: "h2" }),
+        [HEADING_KEYS.h3]: withProps(HeadingElement, { variant: "h3" }),
+        [HEADING_KEYS.h4]: withProps(HeadingElement, { variant: "h4" }),
+        [HEADING_KEYS.h5]: withProps(HeadingElement, { variant: "h5" }),
+        [HEADING_KEYS.h6]: withProps(HeadingElement, { variant: "h6" }),
+        [MediaEmbedPlugin.key]: MediaEmbedElement,
+
+        [ParagraphPlugin.key]: ParagraphElement,
+        [TablePlugin.key]: TableElement,
+        [TableRowPlugin.key]: TableRowElement,
+        [TableCellPlugin.key]: TableCellElement,
+        [TableCellHeaderPlugin.key]: TableCellHeaderElement,
+        [TodoListPlugin.key]: TodoListElement,
+        [DatePlugin.key]: DateElement,
+        [BoldPlugin.key]: withProps(PlateLeaf, { as: "strong" }),
+        [CodePlugin.key]: CodeLeaf,
+
+        [HighlightPlugin.key]: HighlightLeaf,
+        [ItalicPlugin.key]: withProps(PlateLeaf, { as: "em" }),
+        [KbdPlugin.key]: KbdLeaf,
+        [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: "s" }),
+        [SubscriptPlugin.key]: withProps(PlateLeaf, { as: "sub" }),
+        [SuperscriptPlugin.key]: withProps(PlateLeaf, { as: "sup" }),
+        [UnderlinePlugin.key]: withProps(PlateLeaf, { as: "u" }),
+        [MyPlugin.key]: LinkElement
+      })
+    }
+  };
+};